From 4b1c9fb5fdcedca4c7cb371cbd24c4410ad8b6e7 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Tue, 30 Aug 2022 04:54:18 -0700 Subject: [PATCH] Fix doughnut graphs on workload overview sometimes not showing (#5727) --- .../allowed-resources-injection-token.ts | 4 +- src/extensions/renderer-api/theming.ts | 12 +- .../order-of-sidebar-items.test.tsx.snap | 2 + ...-and-tab-navigation-for-core.test.tsx.snap | 5 + ...ab-navigation-for-extensions.test.tsx.snap | 5 + .../visibility-of-sidebar-items.test.tsx.snap | 2 + .../workload-overview.test.tsx.snap | 576 ++++++++++++++++++ ...when-cluster-is-not-relevant.test.tsx.snap | 2 + ...when-cluster-is-not-relevant.test.tsx.snap | 3 + ...e-from-previously-opened-tab.test.tsx.snap | 2 + .../cluster/workload-overview.test.tsx | 37 ++ ...when-cluster-is-not-relevant.test.tsx.snap | 3 + ...rt-from-previously-opened-tab.test.ts.snap | 2 + .../components/+cluster/cluster-issues.tsx | 11 +- .../+cluster/cluster-pie-charts.tsx | 13 +- .../release-details-model.injectable.tsx | 14 +- .../components/+nodes/node-charts.tsx | 13 +- .../volume-claim-disk-chart.tsx | 13 +- .../+workloads-overview/overview-statuses.tsx | 2 +- .../overview-workload-status.tsx | 141 +++-- .../+workloads-overview/overview.tsx | 2 +- .../workloads/workload-injection-token.ts | 3 +- .../+workloads-pods/container-charts.tsx | 13 +- src/renderer/components/chart/bar-chart.tsx | 13 +- src/renderer/components/chart/chart.tsx | 36 +- src/renderer/components/chart/pie-chart.tsx | 28 +- .../components/dock/terminal/view.tsx | 11 +- .../components/item-object-list/content.tsx | 13 +- .../monaco-editor/monaco-editor.tsx | 11 +- src/renderer/components/select/select.tsx | 12 +- .../test-utils/get-application-builder.tsx | 9 +- .../__snapshots__/cluster-frame.test.tsx.snap | 1 + src/renderer/themes/active.injectable.ts | 18 + src/renderer/themes/lens-dark.ts | 4 +- src/renderer/themes/lens-light.ts | 4 +- src/renderer/themes/store.ts | 12 +- 36 files changed, 868 insertions(+), 184 deletions(-) create mode 100644 src/features/cluster/__snapshots__/workload-overview.test.tsx.snap create mode 100644 src/features/cluster/workload-overview.test.tsx create mode 100644 src/renderer/themes/active.injectable.ts diff --git a/src/common/cluster-store/allowed-resources-injection-token.ts b/src/common/cluster-store/allowed-resources-injection-token.ts index ad387d26a2..353d0b309c 100644 --- a/src/common/cluster-store/allowed-resources-injection-token.ts +++ b/src/common/cluster-store/allowed-resources-injection-token.ts @@ -6,8 +6,6 @@ import { getInjectionToken } from "@ogre-tools/injectable"; import type { IComputedValue } from "mobx"; -export const allowedResourcesInjectionToken = getInjectionToken< - IComputedValue> ->({ +export const allowedResourcesInjectionToken = getInjectionToken>>({ id: "allowed-resources", }); diff --git a/src/extensions/renderer-api/theming.ts b/src/extensions/renderer-api/theming.ts index a39efc80b7..435cf23504 100644 --- a/src/extensions/renderer-api/theming.ts +++ b/src/extensions/renderer-api/theming.ts @@ -3,11 +3,17 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -import themeStoreInjectable from "../../renderer/themes/store.injectable"; +import activeThemeInjectable from "../../renderer/themes/active.injectable"; +import type { LensTheme } from "../../renderer/themes/store"; import { asLegacyGlobalForExtensionApi } from "../as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api"; -const themeStore = asLegacyGlobalForExtensionApi(themeStoreInjectable); +export const activeTheme = asLegacyGlobalForExtensionApi(activeThemeInjectable); +/** + * @deprecated This hides the reactivity of active theme, use {@link activeTheme} instead + */ export function getActiveTheme() { - return themeStore.activeTheme; + return activeTheme.get(); } + +export type { LensTheme }; diff --git a/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap b/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap index 3dccc2e925..b9d854220c 100644 --- a/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap +++ b/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap @@ -350,6 +350,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ + + + security + + + + Access Control + + +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+ + Pods (0) + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ +`; diff --git a/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap b/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap index 1ec0fb09cb..8d5a23815e 100644 --- a/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap +++ b/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap @@ -691,6 +691,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
{ + let rendered: RenderResult; + let applicationBuilder: ApplicationBuilder; + + beforeEach(async () => { + applicationBuilder = getApplicationBuilder().setEnvironmentToClusterFrame(); + applicationBuilder.allowKubeResource("pods"); + rendered = await applicationBuilder.render(); + }); + + describe("when navigating to workload overview", () => { + beforeEach(() => { + applicationBuilder.navigateWith(navigateToWorkloadsOverviewInjectable); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("shows workload overview", () => { + expect(rendered.queryByTestId("page-for-workloads-overview")).toBeInTheDocument(); + }); + + it("shows pods pie chart", () => { + expect(rendered.queryByTestId("workload-overview-status-chart-pods")).toBeInTheDocument(); + }); + }); +}); diff --git a/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap b/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap index 5040538e31..27900116a3 100644 --- a/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap +++ b/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap @@ -290,6 +290,7 @@ exports[`disable workloads overview details when cluster is not relevant given e
; nodeStore: NodeStore; eventStore: EventStore; apiManager: ApiManager; @@ -166,7 +167,7 @@ class NonInjectedClusterIssues extends React.Component Message @@ -191,7 +192,7 @@ class NonInjectedClusterIssues extends React.Component(NonInjectedClusterIssues, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), apiManager: di.inject(apiManagerInjectable), eventStore: di.inject(eventStoreInjectable), nodeStore: di.inject(nodeStoreInjectable), diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index 94612d2229..6d633c9eb9 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx @@ -16,12 +16,13 @@ import type { PieChartData } from "../chart"; import { PieChart } from "../chart"; import { ClusterNoMetrics } from "./cluster-no-metrics"; import { bytesToUnits, cssNames } from "../../utils"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api"; import { withInjectables } from "@ogre-tools/injectable-react"; import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable"; import nodeStoreInjectable from "../+nodes/store.injectable"; -import themeStoreInjectable from "../../themes/store.injectable"; +import type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../themes/active.injectable"; function createLabels(rawLabelData: [string, number | undefined][]): string[] { return rawLabelData.map(([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}`); @@ -30,13 +31,13 @@ function createLabels(rawLabelData: [string, number | undefined][]): string[] { interface Dependencies { clusterOverviewStore: ClusterOverviewStore; nodeStore: NodeStore; - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore, nodeStore, - themeStore, + activeTheme, }: Dependencies) => { const renderLimitWarning = () => { return ( @@ -54,7 +55,7 @@ const NonInjectedClusterPieCharts = observer(({ const { podUsage, podAllocatableCapacity, podCapacity } = data; const cpuLimitsOverload = cpuLimits > cpuAllocatableCapacity; const memoryLimitsOverload = memoryLimits > memoryAllocatableCapacity; - const defaultColor = themeStore.activeTheme.colors.pieChartDefaultColor; + const defaultColor = activeTheme.get().colors.pieChartDefaultColor; if (!memoryCapacity || !cpuCapacity || !podCapacity || !memoryAllocatableCapacity || !cpuAllocatableCapacity || !podAllocatableCapacity) return null; const cpuData: PieChartData = { @@ -261,6 +262,6 @@ export const ClusterPieCharts = withInjectables(NonInjectedCluster getProps: (di) => ({ clusterOverviewStore: di.inject(clusterOverviewStoreInjectable), nodeStore: di.inject(nodeStoreInjectable), - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx b/src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx index 640ee88412..f36e3c8cce 100644 --- a/src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx +++ b/src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx @@ -3,13 +3,12 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; -import type { IObservableValue } from "mobx"; +import type { IComputedValue, IObservableValue } from "mobx"; import { runInAction, action, observable, computed } from "mobx"; import type { TargetHelmRelease } from "../target-helm-release.injectable"; import type { CallForHelmRelease, DetailedHelmRelease } from "./call-for-helm-release/call-for-helm-release.injectable"; import callForHelmReleaseInjectable from "./call-for-helm-release/call-for-helm-release.injectable"; -import type { ThemeStore } from "../../../../themes/store"; -import themeStoreInjectable from "../../../../themes/store.injectable"; +import type { LensTheme } from "../../../../themes/store"; import type { CallForHelmReleaseConfiguration } from "./call-for-helm-release-configuration/call-for-helm-release-configuration.injectable"; import callForHelmReleaseConfigurationInjectable from "./call-for-helm-release-configuration/call-for-helm-release-configuration.injectable"; import { toHelmRelease } from "../../releases.injectable"; @@ -31,6 +30,7 @@ import type { NavigateToHelmReleases } from "../../../../../common/front-end-rou import navigateToHelmReleasesInjectable from "../../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable"; import assert from "assert"; import withOrphanPromiseInjectable from "../../../../../common/utils/with-orphan-promise/with-orphan-promise.injectable"; +import activeThemeInjectable from "../../../../themes/active.injectable"; const releaseDetailsModelInjectable = getInjectable({ id: "release-details-model", @@ -38,7 +38,7 @@ const releaseDetailsModelInjectable = getInjectable({ instantiate: (di, targetRelease: TargetHelmRelease) => { const callForHelmRelease = di.inject(callForHelmReleaseInjectable); const callForHelmReleaseConfiguration = di.inject(callForHelmReleaseConfigurationInjectable); - const themeStore = di.inject(themeStoreInjectable); + const activeTheme = di.inject(activeThemeInjectable); const getResourceDetailsUrl = di.inject(getResourceDetailsUrlInjectable); const updateRelease = di.inject(updateReleaseInjectable); const showCheckedErrorNotification = di.inject(showCheckedErrorNotificationInjectable); @@ -50,7 +50,7 @@ const releaseDetailsModelInjectable = getInjectable({ const model = new ReleaseDetailsModel({ callForHelmRelease, targetRelease, - themeStore, + activeTheme, callForHelmReleaseConfiguration, getResourceDetailsUrl, updateRelease, @@ -92,7 +92,7 @@ export interface ConfigurationInput { interface Dependencies { callForHelmRelease: CallForHelmRelease; targetRelease: TargetHelmRelease; - themeStore: ThemeStore; + activeTheme: IComputedValue; callForHelmReleaseConfiguration: CallForHelmReleaseConfiguration; getResourceDetailsUrl: GetResourceDetailsUrl; updateRelease: CallForHelmReleaseUpdate; @@ -259,7 +259,7 @@ export class ReleaseDetailsModel { } @computed get activeTheme() { - return this.dependencies.themeStore.activeTheme.type; + return this.dependencies.activeTheme.get().type; } close = () => { diff --git a/src/renderer/components/+nodes/node-charts.tsx b/src/renderer/components/+nodes/node-charts.tsx index 2214721a33..36ec85227e 100644 --- a/src/renderer/components/+nodes/node-charts.tsx +++ b/src/renderer/components/+nodes/node-charts.tsx @@ -12,18 +12,19 @@ import { ResourceMetricsContext } from "../resource-metrics"; import { observer } from "mobx-react"; import { mapValues } from "lodash"; import { type MetricsTab, metricTabOptions } from "../chart/options"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../themes/active.injectable"; export interface NodeChartsProps {} interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedNodeCharts = observer(({ - themeStore, + activeTheme, }: Dependencies & NodeChartsProps) => { const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {}; @@ -31,7 +32,7 @@ const NonInjectedNodeCharts = observer(({ if (isMetricsEmpty(metrics)) return ; const id = object.getId(); - const { chartCapacityColor } = themeStore.activeTheme.colors; + const { chartCapacityColor } = activeTheme.get().colors; const { memoryUsage, workloadMemoryUsage, @@ -162,6 +163,6 @@ const NonInjectedNodeCharts = observer(({ export const NodeCharts = withInjectables(NonInjectedNodeCharts, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx b/src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx index 3e3af50bb6..044bb3399d 100644 --- a/src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx +++ b/src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx @@ -10,18 +10,19 @@ import { BarChart, memoryOptions } from "../chart"; import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api"; import { NoMetrics } from "../resource-metrics/no-metrics"; import { ResourceMetricsContext } from "../resource-metrics"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../themes/active.injectable"; export interface VolumeClaimDiskChartProps {} interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedVolumeClaimDiskChart = observer(({ - themeStore, + activeTheme, }: Dependencies & VolumeClaimDiskChartProps) => { const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {}; @@ -29,7 +30,7 @@ const NonInjectedVolumeClaimDiskChart = observer(({ if (isMetricsEmpty(metrics)) return ; const id = object.getId(); - const { chartCapacityColor } = themeStore.activeTheme.colors; + const { chartCapacityColor } = activeTheme.get().colors; const { diskUsage, diskCapacity } = metrics; const usage = normalizeMetrics(diskUsage).data.result[0].values; const capacity = normalizeMetrics(diskCapacity).data.result[0].values; @@ -65,6 +66,6 @@ const NonInjectedVolumeClaimDiskChart = observer(({ export const VolumeClaimDiskChart = withInjectables(NonInjectedVolumeClaimDiskChart, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/+workloads-overview/overview-statuses.tsx b/src/renderer/components/+workloads-overview/overview-statuses.tsx index 1a77288c46..2430409d30 100644 --- a/src/renderer/components/+workloads-overview/overview-statuses.tsx +++ b/src/renderer/components/+workloads-overview/overview-statuses.tsx @@ -31,7 +31,7 @@ const NonInjectedOverviewStatuses = observer(
- +
))}
diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx index 52321d3af4..57422fe461 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx +++ b/src/renderer/components/+workloads-overview/overview-workload-status.tsx @@ -8,92 +8,101 @@ 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 { 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 = Lowercase | PascalCase; + +export type WorkloadStatus = Partial, number>>; + +function toLowercase(src: T): Lowercase { + return src.toLowerCase() as Lowercase; +} export interface OverviewWorkloadStatusProps { - status: Partial>; + workload: Workload; } interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } -@observer -class NonInjectedOverviewWorkloadStatus extends React.Component { - 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 cssVars = cssVar(this.elem); - const chartData: Required = { - labels: [], - datasets: [], - }; + const statusesToBeShown = object.entries(workload.status.get()).filter(([, val]) => val > 0); + const theme = activeTheme.get(); - const statuses = object.entries(this.props.status).filter(([, val]) => val > 0); + 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}` + )), + }; - 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[] = []; + const chartData: Required = { + datasets: [statusesToBeShown.length > 0 ? statusDataSet : emptyDataSet], - 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}`); - } + labels: statusesToBeShown.map( + ([status, value]) => `${capitalize(status)}: ${value}`, + ), + }; - chartData.datasets.push({ - data, - backgroundColor, - label: "Status", - tooltipLabels, - }); - } - - return ( - +
+ - ); - } - - render() { - return ( -
this.elem = e}> -
- {this.renderChart()} -
+ }} + data-testid={`workload-overview-status-chart-${workload.title.toLowerCase().replace(/\s+/, "-")}`} + />
- ); - } -} +
+ ); +}); export const OverviewWorkloadStatus = withInjectables(NonInjectedOverviewWorkloadStatus, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/+workloads-overview/overview.tsx b/src/renderer/components/+workloads-overview/overview.tsx index 0510c96bc9..83a2bf9e84 100644 --- a/src/renderer/components/+workloads-overview/overview.tsx +++ b/src/renderer/components/+workloads-overview/overview.tsx @@ -104,7 +104,7 @@ class NonInjectedWorkloadsOverview extends React.Component { render() { return ( -
+
Overview
{this.renderLoadErrors()} diff --git a/src/renderer/components/+workloads-overview/workloads/workload-injection-token.ts b/src/renderer/components/+workloads-overview/workloads/workload-injection-token.ts index 6453efe59b..decb5a1f7c 100644 --- a/src/renderer/components/+workloads-overview/workloads/workload-injection-token.ts +++ b/src/renderer/components/+workloads-overview/workloads/workload-injection-token.ts @@ -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; - status: IComputedValue>>; + status: IComputedValue; title: string; orderNumber: number; } diff --git a/src/renderer/components/+workloads-pods/container-charts.tsx b/src/renderer/components/+workloads-pods/container-charts.tsx index e9d39ebbdf..718f05420c 100644 --- a/src/renderer/components/+workloads-pods/container-charts.tsx +++ b/src/renderer/components/+workloads-pods/container-charts.tsx @@ -10,27 +10,28 @@ import { BarChart } from "../chart"; import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api"; import { NoMetrics } from "../resource-metrics/no-metrics"; import { ResourceMetricsContext } from "../resource-metrics"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { mapValues } from "lodash"; import { type MetricsTab, metricTabOptions } from "../chart/options"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import activeThemeInjectable from "../../themes/active.injectable"; +import type { IComputedValue } from "mobx"; export interface ContainerChartsProps {} interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedContainerCharts = observer(({ - themeStore, + activeTheme, }: Dependencies & ContainerChartsProps) => { const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {}; if (!metrics || !object || !tab) return null; if (isMetricsEmpty(metrics)) return ; - const { chartCapacityColor } = themeStore.activeTheme.colors; + const { chartCapacityColor } = activeTheme.get().colors; const { cpuUsage, cpuRequests, @@ -127,6 +128,6 @@ const NonInjectedContainerCharts = observer(({ export const ContainerCharts = withInjectables(NonInjectedContainerCharts, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/chart/bar-chart.tsx b/src/renderer/components/chart/bar-chart.tsx index b80a539f6f..b159520309 100644 --- a/src/renderer/components/chart/bar-chart.tsx +++ b/src/renderer/components/chart/bar-chart.tsx @@ -13,11 +13,12 @@ import type { ChartProps } from "./chart"; import { Chart, ChartKind } from "./chart"; import { bytesToUnits, cssNames, isObject } from "../../utils"; import { ZebraStripesPlugin } from "./zebra-stripes.plugin"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { NoMetrics } from "../resource-metrics/no-metrics"; import assert from "assert"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../themes/active.injectable"; export interface BarChartProps extends ChartProps { name?: string; @@ -27,11 +28,11 @@ export interface BarChartProps extends ChartProps { const getBarColor: Scriptable = ({ dataset }) => Color(dataset?.borderColor).alpha(0.2).string(); interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedBarChart = observer(({ - themeStore, + activeTheme, name, data, className, @@ -40,7 +41,7 @@ const NonInjectedBarChart = observer(({ options: customOptions, ...settings }: Dependencies & BarChartProps) => { - const { textColorPrimary, borderFaintColor, chartStripesColor } = themeStore.activeTheme.colors; + const { textColorPrimary, borderFaintColor, chartStripesColor } = activeTheme.get().colors; const { datasets: rawDatasets = [], ...rest } = data; const datasets = rawDatasets .filter(set => set.data?.length) @@ -168,7 +169,7 @@ const NonInjectedBarChart = observer(({ export const BarChart = withInjectables(NonInjectedBarChart, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/chart/chart.tsx b/src/renderer/components/chart/chart.tsx index 3d00c71aed..3d54b90302 100644 --- a/src/renderer/components/chart/chart.tsx +++ b/src/renderer/components/chart/chart.tsx @@ -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 { } render() { - const { width, height, showChart, title, className } = this.props; + const { width, height, showChart, title, className, "data-testid": dataTestId } = this.props; return ( - <> -
- {title &&
{title}
} - {showChart && ( -
- -
-
- )} - {this.renderLegend()} -
- +
+ {title &&
{title}
} + {showChart && ( +
+ +
+
+ )} + {this.renderLegend()} +
); } } diff --git a/src/renderer/components/chart/pie-chart.tsx b/src/renderer/components/chart/pie-chart.tsx index 2df1fd05f4..2e4cd1bb0f 100644 --- a/src/renderer/components/chart/pie-chart.tsx +++ b/src/renderer/components/chart/pie-chart.tsx @@ -11,9 +11,10 @@ import ChartJS from "chart.js"; import type { ChartProps } from "./chart"; import { Chart } from "./chart"; import { cssNames } from "../../utils"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../themes/active.injectable"; export interface PieChartProps extends ChartProps { } @@ -44,18 +45,18 @@ function getCutout(length: number | undefined): number { } interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } const NonInjectedPieChart = observer(({ - themeStore, + activeTheme, data, className, options, showChart, ...chartProps }: Dependencies & PieChartProps) => { - const { contentColor } = themeStore.activeTheme.colors; + const { contentColor } = activeTheme.get().colors; const opts: ChartOptions = { maintainAspectRatio: false, tooltips: { @@ -68,18 +69,11 @@ 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 tooltipLabel = dataset.tooltipLabels?.[tooltipItem.index]; - let tooltip = `${dataset.label}: ${percentLabel}`; + const tooltipLabelCustomizer = dataset.tooltipLabels?.[tooltipItem.index]; - if (tooltipLabel) { - if (typeof tooltipLabel === "function") { - tooltip = tooltipLabel(percentLabel); - } else { - tooltip = tooltipLabel; - } - } - - return tooltip; + return tooltipLabelCustomizer + ? tooltipLabelCustomizer(percentLabel) + : `${dataset.label}: ${percentLabel}`; }, }, filter: ({ datasetIndex, index }, { datasets = [] }) => { @@ -120,7 +114,7 @@ const NonInjectedPieChart = observer(({ export const PieChart = withInjectables(NonInjectedPieChart, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/dock/terminal/view.tsx b/src/renderer/components/dock/terminal/view.tsx index 01313a661a..6fa9e157c8 100644 --- a/src/renderer/components/dock/terminal/view.tsx +++ b/src/renderer/components/dock/terminal/view.tsx @@ -10,13 +10,14 @@ import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../../utils"; import type { Terminal } from "./terminal"; import type { TerminalStore } from "./store"; -import type { ThemeStore } from "../../../themes/store"; +import type { LensTheme } from "../../../themes/store"; import type { DockTab, DockStore } from "../dock/store"; import { withInjectables } from "@ogre-tools/injectable-react"; import dockStoreInjectable from "../dock/store.injectable"; import terminalStoreInjectable from "./store.injectable"; import assert from "assert"; -import themeStoreInjectable from "../../../themes/store.injectable"; +import activeThemeInjectable from "../../../themes/active.injectable"; +import type { IComputedValue } from "mobx"; export interface TerminalWindowProps { tab: DockTab; @@ -25,7 +26,7 @@ export interface TerminalWindowProps { interface Dependencies { dockStore: DockStore; terminalStore: TerminalStore; - themeStore: ThemeStore; + activeTheme: IComputedValue; } @observer @@ -68,7 +69,7 @@ class NonInjectedTerminalWindow extends React.Component this.elem = elem} /> ); @@ -80,7 +81,7 @@ export const TerminalWindow = withInjectables ...props, dockStore: di.inject(dockStoreInjectable), terminalStore: di.inject(terminalStoreInjectable), - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }); diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx index 8cff8f21bc..07756760a9 100644 --- a/src/renderer/components/item-object-list/content.tsx +++ b/src/renderer/components/item-object-list/content.tsx @@ -7,6 +7,7 @@ import "./item-list-layout.scss"; import type { ReactNode } from "react"; import React from "react"; +import type { IComputedValue } from "mobx"; import { computed, makeObservable } from "mobx"; import { Observer, observer } from "mobx-react"; import type { ConfirmDialogParams } from "../confirm-dialog"; @@ -20,18 +21,18 @@ import { NoItems } from "../no-items"; import { Spinner } from "../spinner"; import type { ItemObject } from "../../../common/item.store"; import type { Filter, PageFiltersStore } from "./page-filters/store"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { MenuActions } from "../menu/menu-actions"; import { MenuItem } from "../menu"; import { Checkbox } from "../checkbox"; import type { UserStore } from "../../../common/user-store"; import type { ItemListStore } from "./list-layout"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; import userStoreInjectable from "../../../common/user-store/user-store.injectable"; import pageFiltersStoreInjectable from "./page-filters/store.injectable"; import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable"; import openConfirmDialogInjectable from "../confirm-dialog/open.injectable"; +import activeThemeInjectable from "../../themes/active.injectable"; export interface ItemListLayoutContentProps { getFilters: () => Filter[]; @@ -71,7 +72,7 @@ export interface ItemListLayoutContentProps; userStore: UserStore; pageFiltersStore: PageFiltersStore; openConfirmDialog: OpenConfirmDialog; @@ -291,10 +292,10 @@ class NonInjectedItemListLayoutContent< render() { const { store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, - detailsItem, className, tableProps = {}, tableId, getItems, themeStore, + detailsItem, className, tableProps = {}, tableId, getItems, activeTheme, } = this.props; const selectedItemId = detailsItem && detailsItem.getId(); - const classNames = cssNames(className, "box", "grow", themeStore.activeTheme.type); + const classNames = cssNames(className, "box", "grow", activeTheme.get().type); const items = getItems(); const selectedItems = store.pickOnlySelected(items); @@ -377,7 +378,7 @@ class NonInjectedItemListLayoutContent< export const ItemListLayoutContent = withInjectables>(NonInjectedItemListLayoutContent, { getProps: (di, props) => ({ ...props, - themeStore: di.inject(themeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), userStore: di.inject(userStoreInjectable), pageFiltersStore: di.inject(pageFiltersStoreInjectable), openConfirmDialog: di.inject(openConfirmDialogInjectable), diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx index 7418187dde..09032bbf7e 100644 --- a/src/renderer/components/monaco-editor/monaco-editor.tsx +++ b/src/renderer/components/monaco-editor/monaco-editor.tsx @@ -6,6 +6,7 @@ import styles from "./monaco-editor.module.scss"; import React from "react"; import { observer } from "mobx-react"; +import type { IComputedValue } from "mobx"; import { action, computed, makeObservable, observable, reaction } from "mobx"; import { editor, Uri } from "monaco-editor"; import type { MonacoTheme } from "./monaco-themes"; @@ -13,10 +14,10 @@ import { type MonacoValidator, monacoValidators } from "./monaco-validators"; import { debounce, merge } from "lodash"; import { autoBind, cssNames, disposer } from "../../utils"; import type { UserStore } from "../../../common/user-store"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; import userStoreInjectable from "../../../common/user-store/user-store.injectable"; +import activeThemeInjectable from "../../themes/active.injectable"; export type MonacoEditorId = string; @@ -39,8 +40,8 @@ export interface MonacoEditorProps { } interface Dependencies { - themeStore: ThemeStore; userStore: UserStore; + activeTheme: IComputedValue; } export function createMonacoUri(id: MonacoEditorId): Uri { @@ -83,7 +84,7 @@ class NonInjectedMonacoEditor extends React.Component ({ ...props, - themeStore: di.inject(themeStoreInjectable), userStore: di.inject(userStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), }), }, ); diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx index 61b6de1284..629c11cecf 100644 --- a/src/renderer/components/select/select.tsx +++ b/src/renderer/components/select/select.tsx @@ -8,15 +8,15 @@ import "./select.scss"; import React from "react"; -import type { ObservableSet } from "mobx"; +import type { IComputedValue, ObservableSet } from "mobx"; import { action, computed, makeObservable } from "mobx"; import { observer } from "mobx-react"; import ReactSelect, { components, createFilter } from "react-select"; import type { Props as ReactSelectProps, GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select"; -import type { ThemeStore } from "../../themes/store"; +import type { LensTheme } from "../../themes/store"; import { autoBind, cssNames } from "../../utils"; import { withInjectables } from "@ogre-tools/injectable-react"; -import themeStoreInjectable from "../../themes/store.injectable"; +import activeThemeInjectable from "../../themes/active.injectable"; const { Menu } = components; @@ -80,7 +80,7 @@ const defaultFilter = createFilter({ }); interface Dependencies { - themeStore: ThemeStore; + activeTheme: IComputedValue; } export function onMultiSelectFor, Group extends GroupBase