mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix OverviewWorkloadStatus to satisfy tests
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton
parent
4d19a4ed47
commit
ed48d1611f
@ -6,8 +6,6 @@
|
||||
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||
import type { IComputedValue } from "mobx";
|
||||
|
||||
export const allowedResourcesInjectionToken = getInjectionToken<
|
||||
IComputedValue<Set<string>>
|
||||
>({
|
||||
export const allowedResourcesInjectionToken = getInjectionToken<IComputedValue<Set<string>>>({
|
||||
id: "allowed-resources",
|
||||
});
|
||||
|
||||
@ -31,7 +31,7 @@ const NonInjectedOverviewStatuses = observer(
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<OverviewWorkloadStatus status={workload.status.get()} />
|
||||
<OverviewWorkloadStatus workload={workload} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -10,90 +10,105 @@ import capitalize from "lodash/capitalize";
|
||||
import { observer } from "mobx-react";
|
||||
import type { DatasetTooltipLabel, PieChartData } from "../chart";
|
||||
import { PieChart } from "../chart";
|
||||
import { cssVar, object } from "../../utils";
|
||||
import type { ThemeStore } from "../../themes/store";
|
||||
import { object } from "../../utils";
|
||||
import type { LensTheme } from "../../themes/store";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import themeStoreInjectable from "../../themes/store.injectable";
|
||||
import type { PascalCase } from "type-fest";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import activeThemeInjectable from "../../themes/active.injectable";
|
||||
import type { Workload } from "./workloads/workload-injection-token";
|
||||
|
||||
export type LowercaseOrPascalCase<T extends string> = Lowercase<T> | PascalCase<T>;
|
||||
|
||||
export type WorkloadStatus = Partial<Record<LowercaseOrPascalCase<keyof typeof statusBackgroundColorMapping>, number>>;
|
||||
|
||||
function toLowercase<T extends string>(src: T): Lowercase<T> {
|
||||
return src.toLowerCase() as Lowercase<T>;
|
||||
}
|
||||
|
||||
export interface OverviewWorkloadStatusProps {
|
||||
status: Partial<Record<string, number>>;
|
||||
workload: Workload;
|
||||
}
|
||||
|
||||
interface Dependencies {
|
||||
themeStore: ThemeStore;
|
||||
activeTheme: IComputedValue<LensTheme>;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedOverviewWorkloadStatus extends React.Component<OverviewWorkloadStatusProps & Dependencies> {
|
||||
private elem: HTMLElement | null = null;
|
||||
const statusBackgroundColorMapping = {
|
||||
"running": "colorOk",
|
||||
"scheduled": "colorOk",
|
||||
"pending": "colorWarning",
|
||||
"suspended": "colorWarning",
|
||||
"evicted": "colorError",
|
||||
"succeeded": "colorSuccess",
|
||||
"failed": "colorError",
|
||||
"terminated": "colorTerminated",
|
||||
"terminating": "colorTerminated",
|
||||
"unknown": "colorVague",
|
||||
"complete": "colorSuccess",
|
||||
} as const;
|
||||
|
||||
renderChart() {
|
||||
if (!this.elem) {
|
||||
return null;
|
||||
const NonInjectedOverviewWorkloadStatus = observer((props: OverviewWorkloadStatusProps & Dependencies) => {
|
||||
const {
|
||||
workload,
|
||||
activeTheme,
|
||||
} = props;
|
||||
const chartData: Required<PieChartData> = {
|
||||
labels: [],
|
||||
datasets: [],
|
||||
};
|
||||
|
||||
const statuses = 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[] = [];
|
||||
|
||||
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 cssVars = cssVar(this.elem);
|
||||
const chartData: Required<PieChartData> = {
|
||||
labels: [],
|
||||
datasets: [],
|
||||
};
|
||||
chartData.datasets.push({
|
||||
data,
|
||||
backgroundColor,
|
||||
label: "Status",
|
||||
tooltipLabels,
|
||||
});
|
||||
}
|
||||
|
||||
const statuses = object.entries(this.props.status).filter(([, val]) => val > 0);
|
||||
|
||||
if (statuses.length === 0) {
|
||||
chartData.datasets.push({
|
||||
data: [1],
|
||||
backgroundColor: [this.props.themeStore.activeTheme.colors.pieChartDefaultColor],
|
||||
label: "Empty",
|
||||
});
|
||||
} else {
|
||||
const data: number[] = [];
|
||||
const backgroundColor: string[] = [];
|
||||
const tooltipLabels: DatasetTooltipLabel[] = [];
|
||||
|
||||
for (const [status, value] of statuses) {
|
||||
data.push(value);
|
||||
backgroundColor.push(cssVars.get(`--workload-status-${status.toLowerCase()}`).toString());
|
||||
tooltipLabels.push(percent => `${capitalize(status)}: ${percent}`);
|
||||
chartData.labels.push(`${capitalize(status)}: ${value}`);
|
||||
}
|
||||
|
||||
chartData.datasets.push({
|
||||
data,
|
||||
backgroundColor,
|
||||
label: "Status",
|
||||
tooltipLabels,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<PieChart
|
||||
data={chartData}
|
||||
options={{
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0,
|
||||
return (
|
||||
<div className="OverviewWorkloadStatus">
|
||||
<div className="flex column align-center box grow">
|
||||
<PieChart
|
||||
data={chartData}
|
||||
options={{
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="OverviewWorkloadStatus" ref={e => this.elem = e}>
|
||||
<div className="flex column align-center box grow">
|
||||
{this.renderChart()}
|
||||
</div>
|
||||
}}
|
||||
data-testid={`workload-overview-status-chart-${workload.title.toLowerCase().replace(/\s+/, "-")}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const OverviewWorkloadStatus = withInjectables<Dependencies, OverviewWorkloadStatusProps>(NonInjectedOverviewWorkloadStatus, {
|
||||
getProps: (di, props) => ({
|
||||
...props,
|
||||
themeStore: di.inject(themeStoreInjectable),
|
||||
activeTheme: di.inject(activeThemeInjectable),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -104,7 +104,7 @@ class NonInjectedWorkloadsOverview extends React.Component<Dependencies> {
|
||||
render() {
|
||||
return (
|
||||
<SiblingsInTabLayout>
|
||||
<div className="WorkloadsOverview flex column gaps">
|
||||
<div className="WorkloadsOverview flex column gaps" data-testid="page-for-workloads-overview">
|
||||
<div className="header flex gaps align-center">
|
||||
<h5 className="box grow">Overview</h5>
|
||||
{this.renderLoadErrors()}
|
||||
|
||||
@ -4,12 +4,13 @@
|
||||
*/
|
||||
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import type { WorkloadStatus } from "../overview-workload-status";
|
||||
|
||||
export interface Workload {
|
||||
resourceName: string;
|
||||
open: () => void;
|
||||
amountOfItems: IComputedValue<number>;
|
||||
status: IComputedValue<Partial<Record<string, number>>>;
|
||||
status: IComputedValue<WorkloadStatus>;
|
||||
title: string;
|
||||
orderNumber: number;
|
||||
}
|
||||
|
||||
@ -36,6 +36,7 @@ export interface ChartProps {
|
||||
redraw?: boolean; // If true - recreate chart instance with no animation
|
||||
title?: string;
|
||||
className?: string;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export enum ChartKind {
|
||||
@ -212,25 +213,26 @@ export class Chart extends React.Component<ChartProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { width, height, showChart, title, className } = this.props;
|
||||
const { width, height, showChart, title, className, "data-testid": dataTestId } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cssNames("Chart", className)}>
|
||||
{title && <div className="chart-title">{title}</div>}
|
||||
{showChart && (
|
||||
<div className="chart-container">
|
||||
<canvas
|
||||
ref={this.canvas}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
<div className="chartjs-tooltip flex column"></div>
|
||||
</div>
|
||||
)}
|
||||
{this.renderLegend()}
|
||||
</div>
|
||||
</>
|
||||
<div
|
||||
className={cssNames("Chart", className)}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
{title && <div className="chart-title">{title}</div>}
|
||||
{showChart && (
|
||||
<div className="chart-container">
|
||||
<canvas
|
||||
ref={this.canvas}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
<div className="chartjs-tooltip flex column"></div>
|
||||
</div>
|
||||
)}
|
||||
{this.renderLegend()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user