diff --git a/src/features/cluster/workload-overview.test.tsx b/src/features/cluster/workload-overview.test.tsx index 27eb2823d8..1a6750a8f9 100644 --- a/src/features/cluster/workload-overview.test.tsx +++ b/src/features/cluster/workload-overview.test.tsx @@ -26,7 +26,7 @@ describe("workload overview", () => { expect(rendered.baseElement).toMatchSnapshot(); }); - it("does not yet show workload overview", () => { + it("shows workload overview", () => { expect(rendered.queryByTestId("page-for-workloads-overview")).toBeInTheDocument(); }); diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx index 5640326d87..57422fe461 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx +++ b/src/renderer/components/+workloads-overview/overview-workload-status.tsx @@ -8,7 +8,7 @@ import "./overview-workload-status.scss"; import React from "react"; import capitalize from "lodash/capitalize"; import { observer } from "mobx-react"; -import type { DatasetTooltipLabel, PieChartData } from "../chart"; +import type { PieChartData } from "../chart"; import { PieChart } from "../chart"; import { object } from "../../utils"; import type { LensTheme } from "../../themes/store"; @@ -53,39 +53,33 @@ const NonInjectedOverviewWorkloadStatus = observer((props: OverviewWorkloadStatu workload, activeTheme, } = props; - const chartData: Required = { - labels: [], - datasets: [], - }; - const statuses = object.entries(workload.status.get()).filter(([, val]) => val > 0); + const statusesToBeShown = object.entries(workload.status.get()).filter(([, val]) => val > 0); const theme = activeTheme.get(); - if (statuses.length === 0) { - chartData.datasets.push({ - data: [1], - backgroundColor: [theme.colors.pieChartDefaultColor], - label: "Empty", - }); - } else { - const data: number[] = []; - const backgroundColor: string[] = []; - const tooltipLabels: DatasetTooltipLabel[] = []; + const emptyDataSet = { + data: [1], + backgroundColor: [theme.colors.pieChartDefaultColor], + label: "Empty", + }; + const statusDataSet = { + label: "Status", + data: statusesToBeShown.map(([, value]) => value), + backgroundColor: statusesToBeShown.map(([status]) => ( + theme.colors[statusBackgroundColorMapping[toLowercase(status)]] + )), + tooltipLabels: statusesToBeShown.map(([status]) => ( + (percent: string) => `${capitalize(status)}: ${percent}` + )), + }; - for (const [status, value] of statuses) { - data.push(value); - backgroundColor.push(theme.colors[statusBackgroundColorMapping[toLowercase(status)]]); - tooltipLabels.push(percent => `${capitalize(status)}: ${percent}`); - chartData.labels.push(`${capitalize(status)}: ${value}`); - } + const chartData: Required = { + datasets: [statusesToBeShown.length > 0 ? statusDataSet : emptyDataSet], - chartData.datasets.push({ - data, - backgroundColor, - label: "Status", - tooltipLabels, - }); - } + labels: statusesToBeShown.map( + ([status, value]) => `${capitalize(status)}: ${value}`, + ), + }; return (
diff --git a/src/renderer/components/chart/pie-chart.tsx b/src/renderer/components/chart/pie-chart.tsx index 92438e04bb..2e4cd1bb0f 100644 --- a/src/renderer/components/chart/pie-chart.tsx +++ b/src/renderer/components/chart/pie-chart.tsx @@ -69,10 +69,10 @@ const NonInjectedPieChart = observer(({ const total = datasetData.reduce((acc, cur) => acc + cur, 0); const percent = Math.round((datasetData[tooltipItem.index] as number / total) * 100); const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`; - const computeTooltipLabel = dataset.tooltipLabels?.[tooltipItem.index]; + const tooltipLabelCustomizer = dataset.tooltipLabels?.[tooltipItem.index]; - return computeTooltipLabel - ? computeTooltipLabel(percentLabel) + return tooltipLabelCustomizer + ? tooltipLabelCustomizer(percentLabel) : `${dataset.label}: ${percentLabel}`; }, },