refactor: align pie charts, add missing labels, use lens status color…

…s and tweak spacings
okaufmann · Dec 18, 2023 · 1c9fa16 · 1c9fa16
1 parent 66e9578
commit 1c9fa16
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 51 deletions.
diff --git a/src/components/pie-chart.tsx b/src/components/pie-chart.tsx
@@ -1,6 +1,7 @@
 import { Renderer } from '@k8slens/extensions'
 import React from 'react'
 import './pie-chart.scss'
+import { PieChartData } from '@k8slens/extensions/dist/src/extensions/renderer-api/components'
 
 const getStats = (objects: Renderer.K8sApi.KubeObject[]) => {
   const suspended = objects.filter((k) => k.spec.suspend === true).length
@@ -10,9 +11,10 @@ const getStats = (objects: Renderer.K8sApi.KubeObject[]) => {
   const notReady = objects.filter(
     (k) => !k.spec.suspend && k.status?.conditions?.find((c: any) => c.type === 'Ready').status === 'False'
   ).length
-  const inProgress = objects.length - ready - notReady - suspended
+  const unknown = objects.filter((k) => !k.status?.conditions).length
+  const inProgress = objects.length - ready - notReady - suspended - unknown
 
-  return [ready, notReady, inProgress, suspended]
+  return [ready, notReady, inProgress, suspended, unknown]
 }
 
 const getPath = (crd: Renderer.K8sApi.CustomResourceDefinition) => {
@@ -27,47 +29,45 @@ export interface PieChartProps<A extends Renderer.K8sApi.KubeObject> {
 
 export function PieChart(props: PieChartProps<Renderer.K8sApi.KubeObject>): React.ReactElement {
   const { objects, title, crd } = props
-  const [ready, notReady, inProgress, suspended] = getStats(objects)
+  const [ready, notReady, inProgress, suspended, unknown] = getStats(objects)
+
+  const chartData: PieChartData = {
+    datasets: [
+      {
+        data: [ready, notReady, inProgress, suspended, unknown],
+        backgroundColor: ['#43a047', '#ce3933', '#FF6600', '#3d90ce', '#3a3a3c'],
+        tooltipLabels: [
+          (percent) => `Ready: ${percent}`,
+          (percent) => `Not Ready: ${percent}`,
+          (percent) => `In pogress: ${percent}`,
+          (percent) => `Suspended: ${percent}`,
+          (percent) => `Unknown: ${percent}`,
+        ],
+      },
+    ],
+
+    labels: [
+      `Ready: ${ready}`,
+      `Not Ready: ${notReady}`,
+      `In progress: ${inProgress}`,
+      `Suspended: ${suspended}`,
+      `Unknown: ${unknown}`,
+    ],
+  }
 
   return (
-    <>
-      <a
-        className="center"
-        onClick={(e) => {
-          e.preventDefault()
-          Renderer.Navigation.navigate({ pathname: getPath(crd) })
-        }}
-      >
-        {title}: {objects.length}
-      </a>
-      <Renderer.Component.PieChart
-        options={{
-          tooltips: {
-            callbacks: {
-              title(item, data) {
-                return `${data.labels[item[0].index]}`
-              },
-              label(tooltipItem, data) {
-                return `${data.labels[tooltipItem.index]}`
-              },
-            },
-          },
-        }}
-        data={{
-          labels: [
-            `Ready: ${ready}`,
-            `Not Ready: ${notReady}`,
-            `In progress: ${inProgress}`,
-            `Suspended: ${suspended}`,
-          ],
-          datasets: [
-            {
-              data: [ready, notReady, inProgress, suspended],
-              backgroundColor: ['#00FF00', '#FF0000', '#FF6600', '#3a3a3c'],
-            },
-          ],
-        }}
-      />
-    </>
+    <div className="chart-item">
+      <div className="chart-title center">
+        <a
+          onClick={(e) => {
+            e.preventDefault()
+            Renderer.Navigation.navigate({ pathname: getPath(crd) })
+          }}
+        >
+          {title}: {objects.length}
+        </a>
+      </div>
+      <Renderer.Component.PieChart data={chartData} />
+    </div>
   )
 }
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -173,7 +173,7 @@ export class FluxCDDashboard extends React.Component<{ extension: Renderer.LensE
           </header>
 
           {/* add all crd from flux here as chart  */}
-          <div className="grid flex FluxWorkloads pb-3">
+          <div className="grid grow algin-center flux-workloads">
             {this.getChart('Kustomizations', kustomizationStore.items)}
             {this.getChart('Helm releases', helmReleaseStore.items)}
 
@@ -184,7 +184,7 @@ export class FluxCDDashboard extends React.Component<{ extension: Renderer.LensE
             {this.getChart('OCI Repositories', ociRepositoryStore.items)}
             {this.getChart('Image Repositories', imageRepositoryStore.items)}
             {this.getChart('Image Policies', imagePolicyStore.items)}
-            {this.getChart('Image Update Automations', imageUpdateAutomationStore.items)}
+            {this.getChart('Image Automations', imageUpdateAutomationStore.items)}
             {this.getChart('Alerts', alertStore.items)}
             {this.getChart('Providers', providerStore.items)}
             {this.getChart('Receivers', receiverStore.items)}

diff --git a/src/pages/fluxcd-dashboard.scss b/src/pages/fluxcd-dashboard.scss
@@ -1,13 +1,9 @@
-.FluxWorkloads,
-.FluxPanels {
+.flux-workloads {
   display: grid;
   grid-template-columns: repeat(auto-fit, 180px);
   justify-content: space-evenly;
-}
-
-.FluxPanels {
-  grid-template-columns: repeat(auto-fill, 385px);
-  justify-content: flex-start;
+  grid-gap: 8px;
+  padding: 16px;
 }
 
 .floatRight {
@@ -31,6 +27,14 @@
   white-space: nowrap;
 }
 
+.chart-title {
+  color: var(--colorInfo);
+}
+
+.chart-item {
+  margin-bottom: 16px;
+}
+
 .pb-3 {
   padding-bottom: 3em;
 }