Display plugin health score details on individual pages

plugins/gatsby-source-jenkinsplugins/utils.js

@@ -501,12 +501,13 @@ const fetchPluginVersions = async ({createNode, reporter, firstReleases}) => {
 const fetchPluginHealthScore = async ({createNode, reporter}) => {
     const sectionActivity = reporter.activityTimer('fetch plugin health score');
     sectionActivity.start();
-    const url = 'https://plugin-health.jenkins.io/api/scores';
-    const json = await requestGET({url, reporter});
-    for (const pluginName of Object.keys(json.plugins)) {
-        const data = json.plugins[pluginName];
+    const url = 'http://localhost:8080/api/scores';
+    const {plugins, statistics} = await requestGET({url, reporter});
+    for (const pluginName of Object.keys(plugins)) {
+        const {value, details} = plugins[pluginName];
         createNode({
-            ...data,
+            value,
+            details,
             id: pluginName,
             parent: null,
             children: [],
@@ -519,6 +520,21 @@ const fetchPluginHealthScore = async ({createNode, reporter}) => {
             }
         });
     }
+
+    createNode({
+        ...statistics,
+        id: 'pluginHealthStatistics',
+        name: 'pluginHealthStatistics',
+        parent: null,
+        children: [],
+        internal: {
+            type: 'JenkinsPluginHealthScoreStatistics',
+            contentDigest: crypto
+                .createHash('md5')
+                .update('pluginHealthScoreStatistics')
+                .digest('hex')
+        }
+    });
     sectionActivity.end();
 };
 

plugins/plugin-site/gatsby-node.js

@@ -7,6 +7,7 @@ async function createPluginPages({graphql, createPage}) {
     const templatesPluginDocumentation = path.resolve('src/templates/plugin_documentation.jsx');
     const templatesPluginIssues = path.resolve('src/templates/plugin_issues.jsx');
     const templatesPluginDependencies = path.resolve('src/templates/plugin_dependencies.jsx');
+    const templatesPluginHealthScore = path.resolve('src/templates/plugin_healthScore.jsx');
     const result = await graphql(`{
       allJenkinsPlugin {
         edges {
@@ -51,6 +52,13 @@ async function createPluginPages({graphql, createPage}) {
                 name: edge.node.name.trim()
             }
         });
+        createPage({
+            path: `/${edge.node.name.trim()}/healthscore/`,
+            component: templatesPluginHealthScore,
+            context: {
+                name: edge.node.name.trim()
+            }
+        });
     });
 }
 

plugins/plugin-site/src/components/Plugin.jsx

@@ -6,7 +6,7 @@ import Icon from '../components/Icon';
 import PluginLabels from '../components/PluginLabels';
 import PluginLastReleased from '../components/PluginLastReleased';
 import PluginDevelopers from '../components/PluginDevelopers';
-import PluginHealthScore from '../components/PluginHealthScore';
+import PluginHealthScoreProgressBar from './PluginHealthScoreProgressBar';
 
 
 function Developers({developers}) {
@@ -51,7 +51,7 @@ function Plugin({plugin: {name, title, stats, labels, excerpt, developers, build
                 <Developers developers={developers} />
             </div>
             <div className="Plugin--HealthScoreContainer">
-                <PluginHealthScore healthScore={healthScore} name={name}/>
+                <PluginHealthScoreProgressBar healthScore={healthScore} name={name}/>
             </div>
         </div>
     );

plugins/plugin-site/src/components/PluginHealthScore.jsx

@@ -1,67 +1,18 @@
-import React, {useState} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {Progress, Tooltip} from 'reactstrap';
 
-function PluginHealthScore({healthScore, name}) {
-    if (!healthScore) {
-        return null;
-    }
-
-    const score = healthScore.value || 0;
-    const color =
-    score > 80 ? 'success' : score > 60 ? 'warning' : 'danger';
-
-    const tooltipId = `tooltip-${name}`;
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const toggle = () => setTooltipOpen(!tooltipOpen);
+function PluginHealthScore(healthScore) {
     return (
-        <>
-            <div>
-                <div>
-                    Health Score
-                    <a
-                        href={`https://plugin-health.jenkins.io/scores/${name}`}
-                        id={tooltipId}
-                        style={{marginLeft: '5px'}}
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            setTooltipOpen(!tooltipOpen);
-                        }}
-                    >
-                        ?
-                    </a>
-                    <Tooltip
-                        placement="top"
-                        isOpen={tooltipOpen}
-                        autohide={false}
-                        target={tooltipId}
-                        toggle={toggle}
-                        onClick={(e) => {e.stopPropagation();}}
-                    >
-                        View the details about plugin&apos;s
-                        {' '}
-                        <a
-                            href={`https://plugin-health.jenkins.io/scores/${name}`}
-                        >
-                            health score
-                        </a>
-                    </Tooltip>
-                </div>
-                <div>
-                    {score}
-                    /100
-                </div>
-            </div>
-            <Progress value={score} color={color} style={{height: '10px'}} striped/>
-        </>
+        <div id="pluginHealthScore--container" className="container">
+            <pre>{JSON.stringify(healthScore, null, 2)}</pre>
+        </div>
     );
 }
 
 PluginHealthScore.propTypes = {
-    healthScore: PropTypes.shape({
-        value: PropTypes.number,
-    }),
-    name: PropTypes.string,
+    healthScore: {
+        value: PropTypes.number.isRequired,
+        details: PropTypes.shape({}).isRequired
+    }
 };
-
 export default PluginHealthScore;

plugins/plugin-site/src/components/PluginHealthScoreProgressBar.jsx

@@ -0,0 +1,67 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {Progress, Tooltip} from 'reactstrap';
+
+function PluginHealthScoreProgressBar({healthScore, name}) {
+    if (!healthScore) {
+        return null;
+    }
+
+    const score = healthScore.value || 0;
+    const color =
+    score > 80 ? 'success' : score > 60 ? 'warning' : 'danger';
+
+    const tooltipId = `tooltip-${name}`;
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const toggle = () => setTooltipOpen(!tooltipOpen);
+    return (
+        <>
+            <div>
+                <div>
+                    Health Score
+                    <a
+                        href={`https://plugin-health.jenkins.io/scores/${name}`}
+                        id={tooltipId}
+                        style={{marginLeft: '5px'}}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setTooltipOpen(!tooltipOpen);
+                        }}
+                    >
+                        ?
+                    </a>
+                    <Tooltip
+                        placement="top"
+                        isOpen={tooltipOpen}
+                        autohide={false}
+                        target={tooltipId}
+                        toggle={toggle}
+                        onClick={(e) => {e.stopPropagation();}}
+                    >
+                        View the details about plugin&apos;s
+                        {' '}
+                        <a
+                            href={`https://plugin-health.jenkins.io/scores/${name}`}
+                        >
+                            health score
+                        </a>
+                    </Tooltip>
+                </div>
+                <div>
+                    {score}
+                    /100
+                </div>
+            </div>
+            <Progress value={score} color={color} style={{height: '10px'}} striped/>
+        </>
+    );
+}
+
+PluginHealthScoreProgressBar.propTypes = {
+    healthScore: PropTypes.shape({
+        value: PropTypes.number,
+    }),
+    name: PropTypes.string,
+};
+
+export default PluginHealthScoreProgressBar;

plugins/plugin-site/src/components/PluginPageLayout.jsx

@@ -35,6 +35,7 @@ function PluginPageLayout({plugin, children}) {
         {id: 'releases', to: `/${plugin.name}/releases/`, label: 'Releases'},
         {id: 'issues', to: `/${plugin.name}/issues/`, label: 'Issues'},
         {id: 'dependencies', to: `/${plugin.name}/dependencies/`, label: 'Dependencies'},
+        {id: 'health-score', to: `/${plugin.name}/healthscore/`, label: 'Health Score'},
     ];
 
     const [isShowInstructions, setShowInstructions] = React.useState(false);

plugins/plugin-site/src/templates/plugin_healthScore.jsx

@@ -0,0 +1,41 @@
+import {graphql} from 'gatsby';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {PropTypesJenkinsPlugin} from '../proptypes';
+
+import PluginPageLayout from '../components/PluginPageLayout';
+import PluginHealthScore from '../components/PluginHealthScore';
+
+const TemplatePluginHealthScore = ({data: {jenkinsPlugin: plugin, healthScore}}) => {
+    return (
+        <PluginPageLayout plugin={plugin}>
+            <PluginHealthScore healthScore={healthScore}/>
+        </PluginPageLayout>
+    );
+};
+
+TemplatePluginHealthScore.displayName = 'TemplatePluginHealthScore';
+TemplatePluginHealthScore.propTypes = {
+    data: PropTypes.shape({
+        jenkinsPlugin: PropTypesJenkinsPlugin.isRequired,
+        healthScore: PropTypes.shape({
+        }).isRequired
+    })
+};
+
+/* eslint no-undef: "off" */
+export const pageQuery = graphql`
+    query ($name: String!) {
+        jenkinsPlugin(name: {eq: $name}) {
+            ...JenkinsPluginFragment
+        }
+
+        healthScore: allJenkinsPluginHealthScore(filter: {name: {eq: $name}}) {
+            nodes {
+                id
+            }
+        }
+    }
+`;
+
+export default TemplatePluginHealthScore;