hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Resolve PR comments

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-07-08 13:11:56 -04:00
parent ed48d1611f
commit fd427f4f3f
3 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/cluster/workload-overview.test.tsx
View File

@ -26,7 +26,7 @@ describe("workload overview", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("does not yet show workload overview", () => { it("shows workload overview", () => {
expect(rendered.queryByTestId("page-for-workloads-overview")).toBeInTheDocument(); expect(rendered.queryByTestId("page-for-workloads-overview")).toBeInTheDocument();
}); });

52
src/renderer/components/+workloads-overview/overview-workload-status.tsx
View File

@ -8,7 +8,7 @@ import "./overview-workload-status.scss";
import React from "react"; import React from "react";
import capitalize from "lodash/capitalize"; import capitalize from "lodash/capitalize";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { DatasetTooltipLabel, PieChartData } from "../chart"; import type { PieChartData } from "../chart";
import { PieChart } from "../chart"; import { PieChart } from "../chart";
import { object } from "../../utils"; import { object } from "../../utils";
import type { LensTheme } from "../../themes/store"; import type { LensTheme } from "../../themes/store";
@ -53,39 +53,33 @@ const NonInjectedOverviewWorkloadStatus = observer((props: OverviewWorkloadStatu
workload, workload,
activeTheme, activeTheme,
} = props; } = props;
const chartData: Required<PieChartData> = {
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(); const theme = activeTheme.get();
if (statuses.length === 0) { const emptyDataSet = {
chartData.datasets.push({ data: [1],
data: [1], backgroundColor: [theme.colors.pieChartDefaultColor],
backgroundColor: [theme.colors.pieChartDefaultColor], label: "Empty",
label: "Empty", };
}); const statusDataSet = {
} else { label: "Status",
const data: number[] = []; data: statusesToBeShown.map(([, value]) => value),
const backgroundColor: string[] = []; backgroundColor: statusesToBeShown.map(([status]) => (
const tooltipLabels: DatasetTooltipLabel[] = []; theme.colors[statusBackgroundColorMapping[toLowercase(status)]]
)),
tooltipLabels: statusesToBeShown.map(([status]) => (
(percent: string) => `${capitalize(status)}: ${percent}`
)),
};
for (const [status, value] of statuses) { const chartData: Required<PieChartData> = {
data.push(value); datasets: [statusesToBeShown.length > 0 ? statusDataSet : emptyDataSet],
backgroundColor.push(theme.colors[statusBackgroundColorMapping[toLowercase(status)]]);
tooltipLabels.push(percent => `${capitalize(status)}: ${percent}`);
chartData.labels.push(`${capitalize(status)}: ${value}`);
}
chartData.datasets.push({ labels: statusesToBeShown.map(
data, ([status, value]) => `${capitalize(status)}: ${value}`,
backgroundColor, ),
label: "Status", };
tooltipLabels,
});
}
return ( return (
<div className="OverviewWorkloadStatus"> <div className="OverviewWorkloadStatus">

6
src/renderer/components/chart/pie-chart.tsx
View File

@ -69,10 +69,10 @@ const NonInjectedPieChart = observer(({
const total = datasetData.reduce((acc, cur) => acc + cur, 0); const total = datasetData.reduce((acc, cur) => acc + cur, 0);
const percent = Math.round((datasetData[tooltipItem.index] as number / total) * 100); const percent = Math.round((datasetData[tooltipItem.index] as number / total) * 100);
const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`; const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`;
const computeTooltipLabel = dataset.tooltipLabels?.[tooltipItem.index]; const tooltipLabelCustomizer = dataset.tooltipLabels?.[tooltipItem.index];
return computeTooltipLabel return tooltipLabelCustomizer
? computeTooltipLabel(percentLabel) ? tooltipLabelCustomizer(percentLabel)
: `${dataset.label}: ${percentLabel}`; : `${dataset.label}: ${percentLabel}`;
}, },
}, },