removed extra dependency and used reactstrap progress bar

jenkins-infra · Mar 24, 2023 · b423bbb · b423bbb
1 parent 60cde49
commit b423bbb
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 912 deletions.
diff --git a/plugins/plugin-site/package.json b/plugins/plugin-site/package.json
@@ -69,7 +69,6 @@
     "@sentry/browser": "7.7.0",
     "@sentry/node": "7.7.0",
     "algoliasearch": "4.15.0",
-    "antd": "^5.3.2",
     "chart.js": "3.8.0",
     "cheerio": "1.0.0-rc.12",
     "classnames": "2.3.2",

diff --git a/plugins/plugin-site/src/components/Plugin.jsx b/plugins/plugin-site/src/components/Plugin.jsx
@@ -27,7 +27,7 @@ Developers.propTypes = PluginDevelopers.propTypes;
 function Plugin({plugin: {name, title, stats, labels, excerpt, developers, buildDate, releaseTimestamp}}) {
     let progress = 0;
     let color =
-    progress > 80 ? '#87d068' : progress > 60 ? '#e5e512' : '#fe3535';
+    progress > 80 ? 'success' : progress > 60 ? 'warning' : 'danger';
 
     const graphqlData = useStaticQuery(graphql`
         query {
@@ -49,7 +49,7 @@ function Plugin({plugin: {name, title, stats, labels, excerpt, developers, build
     if (health) {
         progress = health.node.value;
         color =
-        progress > 80 ? '#87d068' : progress > 60 ? '#e5e512' : '#fe3535';
+        progress > 80 ? 'success' : progress > 60 ? 'warning' : 'danger';
     }
 
     return (

diff --git a/plugins/plugin-site/src/components/PluginHealthScore.jsx b/plugins/plugin-site/src/components/PluginHealthScore.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Progress} from 'antd';
+import {Progress} from 'reactstrap';
 
 function PluginHealthScore({healthScore, color}) {
     return (
         <>
-            <h6>Health Score</h6>
-            <Progress percent={healthScore} strokeColor={color} />
+            <div>
+                Health Score
+                <spam>
+                    {healthScore}
+                    /100
+                </spam>
+            </div>
+            <Progress value={healthScore} color={color} style={{height: '10px'}} striped/>
         </>
     );
 }

diff --git a/plugins/plugin-site/src/components/SearchResults.css b/plugins/plugin-site/src/components/SearchResults.css
@@ -162,12 +162,17 @@
 }
 
 .Plugin--HealthScoreContainer{
-    bottom: -0.75rem;
+    bottom: 0rem;
     position: absolute;
     width: 100%;
-    & h6{
-        margin-bottom: 0px;
+    & div{
+        display: flex;
+        justify-content: space-between;
+        font-size: 1rem;
+        font-weight: bold;
+        row-gap: 0.5rem;
     }
+
 }
 .SearchResults--List {
     & .SearchResults--ItemBox {