Displaying of plugin health score in Search Page

plugins/gatsby-source-jenkinsplugins/gatsby-node.js

@@ -2,6 +2,7 @@ const {
     fetchSiteInfo,
     fetchPluginData,
     fetchPluginVersions,
+    fetchPluginHealthScore,
     processCategoryData,
     fetchLabelData,
     fetchStats,
@@ -21,6 +22,7 @@ exports.sourceNodes = async (
             processCategoryData({createNode, createNodeField, createContentDigest, createNodeId, createRemoteFileNode, reporter}),
             fetchLabelData({createNode, createNodeField, createContentDigest, createNodeId, createRemoteFileNode, reporter}),
             fetchPluginVersions({createNode, createNodeField, createContentDigest, createNodeId, createRemoteFileNode, reporter, firstReleases}),
+            fetchPluginHealthScore({createNode, createNodeField, createContentDigest, createNodeId, createRemoteFileNode, reporter}),
         ]).then(() => fetchPluginData({createNode, createNodeField, createContentDigest, createNodeId, createRemoteFileNode, reporter, firstReleases, stats}));
     } catch (err) {
         reporter.panic(
@@ -36,6 +38,7 @@ exports.createSchemaCustomization = ({actions}) => {
         type JenkinsPlugin implements Node {
             wiki: JenkinsPluginWiki @link(from: "name", by: "name")
             releases: [JenkinsPluginVersion] @link(from: "name", by: "name")
+            healthScore: JenkinsPluginHealthScore @link(from: "name", by: "id")
             buildDate: Date @dateformat
             previousTimestamp: Date @dateformat
             releaseTimestamp: Date @dateformat

plugins/gatsby-source-jenkinsplugins/utils.js

@@ -498,12 +498,37 @@ const fetchPluginVersions = async ({createNode, reporter, firstReleases}) => {
     sectionActivity.end();
 };
 
+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)) {
+        const data = json[pluginName];
+        createNode({
+            ...data,
+            id: pluginName,
+            parent: null,
+            children: [],
+            internal: {
+                type: 'JenkinsPluginHealthScore',
+                contentDigest: crypto
+                    .createHash('md5')
+                    .update(`pluginHealthScore_${pluginName}`)
+                    .digest('hex')
+            }
+        });
+    }
+    sectionActivity.end();
+};
+
 module.exports = {
     fetchSiteInfo,
     fetchLabelData,
     processCategoryData,
     fetchPluginData,
     fetchPluginVersions,
+    fetchPluginHealthScore,
     fixGitHubUrl,
     fetchStats,
     getPluginContent,

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

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import {navigate} from 'gatsby';
-
 import {cleanTitle} from '../commons/helper';
 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';
+
 
 function Developers({developers}) {
     return (
@@ -24,7 +24,8 @@ function Developers({developers}) {
 
 Developers.propTypes = PluginDevelopers.propTypes;
 
-function Plugin({plugin: {name, title, stats, labels, excerpt, developers, buildDate, releaseTimestamp}}) {
+function Plugin({plugin: {name, title, stats, labels, excerpt, developers, buildDate, releaseTimestamp, healthScore}}) {
+
     return (
         <div onClick={() => navigate(`/${name}/`)} className="Plugin--PluginContainer">
             <div className="Plugin--IconContainer">
@@ -49,6 +50,9 @@ function Plugin({plugin: {name, title, stats, labels, excerpt, developers, build
             <div className="Plugin--AuthorsContainer">
                 <Developers developers={developers} />
             </div>
+            <div className="Plugin--HealthScoreContainer">
+                <PluginHealthScore healthScore={healthScore} />
+            </div>
         </div>
     );
 }
@@ -63,6 +67,9 @@ Plugin.propTypes = {
             id: PropTypes.string,
             name: PropTypes.string
         })),
+        healthScore: PropTypes.shape({
+            value: PropTypes.number,
+        }),
         name: PropTypes.string.isRequired,
         requiredCore: PropTypes.string,
         sha1: PropTypes.string,

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Progress} from 'reactstrap';
+
+function PluginHealthScore({healthScore}) {
+    const score = healthScore.value || 0;
+    const color =
+    score > 80 ? 'success' : score > 60 ? 'warning' : 'danger';
+    return (
+        <>
+            <div>
+                Health Score
+                <div>
+                    {score}
+                    /100
+                </div>
+            </div>
+            <Progress value={score} color={color} style={{height: '10px'}} striped/>
+        </>
+    );
+}
+
+PluginHealthScore.propTypes = {
+    healthScore: PropTypes.shape({
+        value: PropTypes.number,
+    }),
+};
+
+export default PluginHealthScore;

plugins/plugin-site/src/components/SearchResults.css

@@ -20,7 +20,7 @@
     display: block;
     flex: 0 0 auto;
     font-size: 0.85rem;
-    height: 16.5rem;
+    height: 18.5rem;
     margin: 0.25rem;
     min-height: 6rem;
     opacity: 0.9;
@@ -55,7 +55,7 @@
     }
 }
 .Plugin--IconContainer {
-    bottom: 0.25rem;
+    bottom: 3rem;
     display: block;
     grid-area: icon;
     opacity: 0.75;
@@ -147,7 +147,7 @@
     word-wrap: break-word;
 }
 .Plugin--AuthorsContainer {
-    bottom: 1rem;
+    bottom: 3rem;
     grid-area: authors;
     max-width: 8rem;
     overflow: hidden;
@@ -160,6 +160,20 @@
         margin-right: 0.5rem;
     }
 }
+
+.Plugin--HealthScoreContainer{
+    bottom: 0rem;
+    position: absolute;
+    width: 100%;
+    & div{
+        display: flex;
+        justify-content: space-between;
+        font-size: 1rem;
+        font-weight: bold;
+        row-gap: 0.5rem;
+    }
+
+}
 .SearchResults--List {
     & .SearchResults--ItemBox {
         height: initial;

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

@@ -93,6 +93,7 @@ function SearchPage({location}) {
       }
         }
     `);
+
     const categoriesMap = groupBy(graphqlData.categories.edges.map(edge => edge.node), 'id');
     const suspendedPlugins = graphqlData.suspendedPlugins.edges.map(edge => edge.node.id);
     const {

plugins/plugin-site/src/utils/algolia-queries.js

@@ -12,6 +12,16 @@ function pluginQueries() {
               currentInstalls
               trend
             }
+            healthScore {
+                value
+                    version
+                    details {
+                        key
+                        value
+                        coefficient
+                    }
+                    timestamp
+            }
             developers {
               name
               id