feat: Changed the status bar component to an icon based component (#1198

)

Co-authored-by: Darshan Simha <[email protected]>
Co-authored-by: mshakira <[email protected]>

ui/src/components/common/StatusCounts/StatusCounts.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { IconsStatusMap } from "../../../utils";
+
+import "./style.css";
+export interface StatusCountsProps {
+  counts: {
+    healthy: number;
+    warning: number;
+    critical: number;
+  };
+}
+
+export function StatusCounts(counts: StatusCountsProps) {
+  return (
+    <div className="flex row" style={{ marginLeft: "0.5rem" }}>
+      {Object.keys(counts.counts).map((key) => {
+        return (
+          <div className="flex row status-block">
+            <div className="flex column">
+              <div className="flex row">
+                <img src={IconsStatusMap[key]} alt={key} />
+                <span style={{ marginLeft: "0.5rem" }} className="bold-text">
+                  : {counts.counts[key]}
+                </span>
+              </div>
+              <div className="flex row title-case regular-text">{key}</div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

ui/src/components/common/StatusCounts/style.css

@@ -0,0 +1,35 @@
+.flex{
+    display: flex;
+}
+.row{
+    flex-direction: row;
+}
+.column{
+    flex-direction: column;
+} 
+.status-block{
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+}
+.title-case{
+    text-transform: capitalize;
+}
+.regular-text{
+    color: #3C4348;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 23.50px;
+    word-wrap: break-word
+}
+.bold-text{
+    color: #3C4348;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 23.50px;
+    word-wrap: break-word
+}
+img{
+    width: 1.5rem;
+    height: 1.5rem;
+}

ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx

@@ -3,8 +3,8 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Grid from "@mui/material/Grid";
 import { Link } from "react-router-dom";
-import { StatusBar } from "../../../../common/StatusBar";
 import { NamespaceCardProps } from "../../../../../types/declarations/cluster";
+import { StatusCounts } from "../../../../common/StatusCounts/StatusCounts";
 
 import "./style.css";
 
@@ -41,7 +41,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
             marginTop: "0.5rem",
           }}
         >
-          <Grid item xs={4}>
+          <Grid item xs={3}>
             <span className="namespace-card-section-text-14-normal">
               Status:
             </span>
@@ -83,16 +83,18 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
             marginTop: "0.5rem",
           }}
         >
-          <Grid item xs={4}>
+          <Grid item xs={2}>
             <span className="namespace-card-section-text-14-normal">
               Health:
             </span>
           </Grid>
           <Grid item xs={8} sx={{ padding: "0.3125rem 0" }}>
-            <StatusBar
-              healthy={data?.pipelinesHealthyCount}
-              warning={data?.pipelinesWarningCount}
-              critical={data?.pipelinesCriticalCount}
+            <StatusCounts
+              counts={{
+                healthy: data?.pipelinesHealthyCount,
+                warning: data?.pipelinesWarningCount,
+                critical: data?.pipelinesCriticalCount,
+              }}
             />
           </Grid>
         </Grid>
@@ -117,7 +119,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
             marginTop: "0.5rem",
           }}
         >
-          <Grid item xs={4}>
+          <Grid item xs={3}>
             <span className="namespace-card-section-text-14-normal">
               Status:
             </span>
@@ -158,16 +160,18 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
             marginTop: "0.5rem",
           }}
         >
-          <Grid item xs={4}>
+          <Grid item xs={2}>
             <span className="namespace-card-section-text-14-normal">
               Health:
             </span>
           </Grid>
           <Grid item xs={8} sx={{ padding: "0.3125rem 0" }}>
-            <StatusBar
-              healthy={data?.isbsHealthyCount}
-              warning={data?.isbsWarningCount}
-              critical={data?.isbsCriticalCount}
+            <StatusCounts
+              counts={{
+                healthy: data?.isbsHealthyCount,
+                warning: data?.isbsWarningCount,
+                critical: data?.isbsCriticalCount,
+              }}
             />
           </Grid>
         </Grid>