feat(DW): gray donuts for empty data top-consuming charts

Signed-off-by: gitdallas <[email protected]> feat(dw): add emptystate for statusoverview chart Signed-off-by: gitdallas <[email protected]> lint fixes Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Apr 10, 2024 · a4c94b0 · a4c94b0
1 parent aceb751
commit a4c94b0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/...ges/distributedWorkloads/global/projectMetrics/sections/TopResourceConsumingWorkloads.tsx b/...ges/distributedWorkloads/global/projectMetrics/sections/TopResourceConsumingWorkloads.tsx
@@ -30,12 +30,20 @@ const TopResourceConsumingWorkloadsChart: React.FC<TopResourceConsumingWorkloads
   <ChartDonut
     ariaTitle={`${metricLabel} chart`}
     constrainToVisibleArea
-    data={data.topWorkloads.map(({ workload, usage }) => ({
-      x: getWorkloadName(workload),
-      y: roundNumber(convertUnits(usage), 3),
-    }))}
+    data={
+      data.topWorkloads.length
+        ? data.topWorkloads.map(({ workload, usage }) => ({
+            x: getWorkloadName(workload),
+            y: roundNumber(convertUnits(usage), 3),
+          }))
+        : [{ x: `No workload is consuming ${unitLabel}`, y: 1 }]
+    }
     height={150}
-    labels={({ datum }) => `${datum.x}: ${datum.y} ${unitLabel}`}
+    labels={
+      data.topWorkloads.length
+        ? ({ datum }) => `${datum.x}: ${datum.y} ${unitLabel}`
+        : ({ datum }) => datum.x
+    }
     legendComponent={
       <ChartLegend
         data={data.topWorkloads.map(({ workload }) => ({
@@ -57,7 +65,7 @@ const TopResourceConsumingWorkloadsChart: React.FC<TopResourceConsumingWorkloads
     }}
     subTitle={unitLabel}
     title={String(roundNumber(convertUnits(data.totalUsage)))}
-    themeColor={ChartThemeColor.multi}
+    themeColor={data.topWorkloads.length ? ChartThemeColor.multi : ChartThemeColor.gray}
     width={375}
   />
 );

diff --git a/frontend/src/pages/distributedWorkloads/global/workloadStatus/DWStatusOverviewDonutChart.tsx b/frontend/src/pages/distributedWorkloads/global/workloadStatus/DWStatusOverviewDonutChart.tsx
@@ -8,6 +8,7 @@ import {
   getStatusCounts,
 } from '~/concepts/distributedWorkloads/utils';
 import { LoadingState } from '~/pages/distributedWorkloads/components/LoadingState';
+import { NoWorkloadState } from '~/pages/distributedWorkloads/components/NoWorkloadState';
 
 export const DWStatusOverviewDonutChart: React.FC = () => {
   const { workloads } = React.useContext(DistributedWorkloadsContext);
@@ -32,6 +33,11 @@ export const DWStatusOverviewDonutChart: React.FC = () => {
     (statusType) => statusCounts[statusType] > 0,
   );
 
+  if (workloads.data.length) {
+    return (
+      <NoWorkloadState subTitle="Select another project or create a distributed workload in the selected project." />
+    );
+  }
   return (
     <ChartDonut
       ariaDesc="Distributed workload status overview"