From d082a2766c8109d3cf89a36684ff3aa4b51fbcbc Mon Sep 17 00:00:00 2001 From: Iku-turso Date: Thu, 16 Mar 2023 15:38:33 +0200 Subject: [PATCH] Extract hard-coded cluster overview components as injectables Signed-off-by: Iku-turso --- .../components/+cluster/cluster-metrics.tsx | 129 ------- .../cluster-metrics.injectable.tsx | 161 +++++++++ .../cluster-pie-charts.injectable.tsx | 322 ++++++++++++++++++ .../components/+cluster/cluster-overview.tsx | 5 - .../+cluster/cluster-pie-charts.tsx | 288 ---------------- 5 files changed, 483 insertions(+), 422 deletions(-) delete mode 100644 packages/core/src/renderer/components/+cluster/cluster-metrics.tsx create mode 100644 packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx create mode 100644 packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx delete mode 100644 packages/core/src/renderer/components/+cluster/cluster-pie-charts.tsx diff --git a/packages/core/src/renderer/components/+cluster/cluster-metrics.tsx b/packages/core/src/renderer/components/+cluster/cluster-metrics.tsx deleted file mode 100644 index 726e37d76e..0000000000 --- a/packages/core/src/renderer/components/+cluster/cluster-metrics.tsx +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import styles from "./cluster-metrics.module.scss"; - -import React, { useState } from "react"; -import { observer } from "mobx-react"; -import type { ChartOptions, ChartPoint } from "chart.js"; -import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store"; -import { MetricType } from "./cluster-overview-store/cluster-overview-store"; -import { BarChart } from "../chart"; -import { bytesToUnits, cssNames } from "@k8slens/utilities"; -import { Spinner } from "../spinner"; -import { ZebraStripesPlugin } from "../chart/zebra-stripes.plugin"; -import { ClusterNoMetrics } from "./cluster-no-metrics"; -import { ClusterMetricSwitchers } from "./cluster-metric-switchers"; -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"; - -interface Dependencies { - clusterOverviewStore: ClusterOverviewStore; -} - -const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics }}: Dependencies) => { - const [plugins] = useState([new ZebraStripesPlugin()]); - const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {}); - const metricValues = getMetricsValues(metrics ?? {}); - const colors = { cpu: "#3D90CE", memory: "#C93DCE" }; - const data = metricValues.map(value => ({ - x: value[0], - y: parseFloat(value[1]).toFixed(3), - })); - - const datasets = [{ - id: metricType + metricNodeRole, - label: `${metricType.toUpperCase()} usage`, - borderColor: colors[metricType], - data, - }]; - const cpuOptions: ChartOptions = { - scales: { - yAxes: [{ - ticks: { - suggestedMax: cpuCapacity, - callback: (value) => value, - }, - }], - }, - tooltips: { - callbacks: { - label: ({ index }, data) => { - if (!index) { - return ""; - } - - const value = data.datasets?.[0].data?.[index] as ChartPoint; - - return value.y?.toString() ?? ""; - }, - }, - }, - }; - const memoryOptions: ChartOptions = { - scales: { - yAxes: [{ - ticks: { - suggestedMax: memoryCapacity, - callback: (value: string) => !value ? 0 : bytesToUnits(parseInt(value)), - }, - }], - }, - tooltips: { - callbacks: { - label: ({ index }, data) => { - if (!index) { - return ""; - } - - const value = data.datasets?.[0].data?.[index] as ChartPoint; - - return bytesToUnits(parseInt(value.y as string), { precision: 3 }); - }, - }, - }, - }; - const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions; - - const renderMetrics = () => { - if (!metricValues.length && !metricsLoaded) { - return ; - } - - if (!memoryCapacity || !cpuCapacity) { - return ; - } - - return ( - - ); - }; - - return ( -
- - {renderMetrics()} -
- ); -}); - -export const ClusterMetrics = withInjectables( - NonInjectedClusterMetrics, - - { - getProps: (di) => ({ - clusterOverviewStore: di.inject(clusterOverviewStoreInjectable), - }), - }, -); diff --git a/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx b/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx new file mode 100644 index 0000000000..f6d069bcdf --- /dev/null +++ b/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx @@ -0,0 +1,161 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import styles from "../cluster-metrics.module.scss"; + +import React, { useState } from "react"; +import { observer } from "mobx-react"; +import type { ChartOptions, ChartPoint } from "chart.js"; +import type { ClusterOverviewStore } from "../cluster-overview-store/cluster-overview-store"; +import { MetricType } from "../cluster-overview-store/cluster-overview-store"; +import { BarChart } from "../../chart"; +import { bytesToUnits, cssNames } from "@k8slens/utilities"; +import { Spinner } from "../../spinner"; +import { ZebraStripesPlugin } from "../../chart/zebra-stripes.plugin"; +import { ClusterNoMetrics } from "../cluster-no-metrics"; +import { ClusterMetricSwitchers } from "../cluster-metric-switchers"; +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 { getInjectable } from "@ogre-tools/injectable"; +import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics"; + +interface Dependencies { + clusterOverviewStore: ClusterOverviewStore; +} + +const NonInjectedClusterMetrics = observer( + ({ + clusterOverviewStore: { + metricType, + metricNodeRole, + getMetricsValues, + metricsLoaded, + metrics, + }, + }: Dependencies) => { + const [plugins] = useState([new ZebraStripesPlugin()]); + const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {}); + const metricValues = getMetricsValues(metrics ?? {}); + const colors = { cpu: "#3D90CE", memory: "#C93DCE" }; + const data = metricValues.map((value) => ({ + x: value[0], + y: parseFloat(value[1]).toFixed(3), + })); + + const datasets = [ + { + id: metricType + metricNodeRole, + label: `${metricType.toUpperCase()} usage`, + borderColor: colors[metricType], + data, + }, + ]; + const cpuOptions: ChartOptions = { + scales: { + yAxes: [ + { + ticks: { + suggestedMax: cpuCapacity, + callback: (value) => value, + }, + }, + ], + }, + tooltips: { + callbacks: { + label: ({ index }, data) => { + if (!index) { + return ""; + } + + const value = data.datasets?.[0].data?.[index] as ChartPoint; + + return value.y?.toString() ?? ""; + }, + }, + }, + }; + const memoryOptions: ChartOptions = { + scales: { + yAxes: [ + { + ticks: { + suggestedMax: memoryCapacity, + callback: (value: string) => + !value ? 0 : bytesToUnits(parseInt(value)), + }, + }, + ], + }, + tooltips: { + callbacks: { + label: ({ index }, data) => { + if (!index) { + return ""; + } + + const value = data.datasets?.[0].data?.[index] as ChartPoint; + + return bytesToUnits(parseInt(value.y as string), { precision: 3 }); + }, + }, + }, + }; + const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions; + + const renderMetrics = () => { + if (!metricValues.length && !metricsLoaded) { + return ; + } + + if (!memoryCapacity || !cpuCapacity) { + return ; + } + + return ( + + ); + }; + + return ( +
+ + {renderMetrics()} +
+ ); + } +); + +const ClusterMetrics = withInjectables( + NonInjectedClusterMetrics, + + { + getProps: (di) => ({ + clusterOverviewStore: di.inject(clusterOverviewStoreInjectable), + }), + } +); + +const clusterMetricsOverviewBlockInjectable = getInjectable({ + id: "cluster-metrics-overview-block", + + instantiate: () => ({ + id: "cluster-metrics-overview-block", + Component: ClusterMetrics, + }), + + injectionToken: clusterOverviewUIBlockInjectionToken, +}); + +export default clusterMetricsOverviewBlockInjectable; diff --git a/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx b/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx new file mode 100644 index 0000000000..c0f0c173ee --- /dev/null +++ b/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx @@ -0,0 +1,322 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import styles from "../cluster-pie-charts.module.scss"; + +import React from "react"; +import { observer } from "mobx-react"; +import type { ClusterOverviewStore } from "../cluster-overview-store/cluster-overview-store"; +import { MetricNodeRole } from "../cluster-overview-store/cluster-overview-store"; +import { Spinner } from "../../spinner"; +import { Icon } from "../../icon"; +import type { NodeStore } from "../../+nodes/store"; +import type { PieChartData } from "../../chart"; +import { PieChart } from "../../chart"; +import { ClusterNoMetrics } from "../cluster-no-metrics"; +import { bytesToUnits, cssNames } from "@k8slens/utilities"; +import type { LensTheme } from "../../../themes/lens-theme"; +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 type { IComputedValue } from "mobx"; +import activeThemeInjectable from "../../../themes/active.injectable"; +import type { ClusterMetricData } from "../../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; +import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics"; +import { getInjectable } from "@ogre-tools/injectable"; + +function createLabels(rawLabelData: [string, number | undefined][]): string[] { + return rawLabelData.map( + ([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}` + ); +} + +const checkedBytesToUnits = (value: number | undefined) => + typeof value === "number" ? bytesToUnits(value) : "N/A"; + +interface Dependencies { + clusterOverviewStore: ClusterOverviewStore; + nodeStore: NodeStore; + activeTheme: IComputedValue; +} + +const NonInjectedClusterPieCharts = observer( + ({ clusterOverviewStore, nodeStore, activeTheme }: Dependencies) => { + const renderLimitWarning = () => { + return ( +
+ +

Specified limits are higher than node capacity!

+
+ ); + }; + + const renderCharts = ( + lastPoints: Partial> + ) => { + const { + memoryUsage, + memoryRequests, + memoryAllocatableCapacity, + memoryCapacity, + memoryLimits, + cpuUsage, + cpuRequests, + cpuAllocatableCapacity, + cpuCapacity, + cpuLimits, + podUsage, + podAllocatableCapacity, + podCapacity, + } = lastPoints; + + if ( + typeof cpuCapacity !== "number" || + typeof cpuAllocatableCapacity !== "number" || + typeof podCapacity !== "number" || + typeof podAllocatableCapacity !== "number" || + typeof memoryAllocatableCapacity !== "number" || + typeof memoryCapacity !== "number" || + typeof memoryUsage !== "number" || + typeof memoryRequests !== "number" + ) { + return null; + } + + const defaultColor = activeTheme.get().colors.pieChartDefaultColor; + + const cpuData: PieChartData = { + datasets: [ + { + data: [cpuUsage, cpuUsage ? cpuAllocatableCapacity - cpuUsage : 1], + backgroundColor: ["#c93dce", defaultColor], + id: "cpuUsage", + label: "Usage", + }, + { + data: [ + cpuRequests, + cpuRequests ? cpuAllocatableCapacity - cpuRequests : 1, + ], + backgroundColor: ["#4caf50", defaultColor], + id: "cpuRequests", + label: "Requests", + }, + { + data: [ + cpuLimits, + Math.max( + 0, + cpuAllocatableCapacity - (cpuLimits ?? cpuAllocatableCapacity) + ), + ], + backgroundColor: ["#3d90ce", defaultColor], + id: "cpuLimits", + label: "Limits", + }, + ], + labels: createLabels([ + ["Usage", cpuUsage], + ["Requests", cpuRequests], + ["Limits", cpuLimits], + ["Allocatable Capacity", cpuAllocatableCapacity], + ["Capacity", cpuCapacity], + ]), + }; + const memoryData: PieChartData = { + datasets: [ + { + data: [ + memoryUsage, + memoryUsage ? memoryAllocatableCapacity - memoryUsage : 1, + ], + backgroundColor: ["#c93dce", defaultColor], + id: "memoryUsage", + label: "Usage", + }, + { + data: [ + memoryRequests, + memoryRequests ? memoryAllocatableCapacity - memoryRequests : 1, + ], + backgroundColor: ["#4caf50", defaultColor], + id: "memoryRequests", + label: "Requests", + }, + { + data: [ + memoryLimits, + Math.max( + 0, + memoryAllocatableCapacity - + (memoryLimits ?? memoryAllocatableCapacity) + ), + ], + backgroundColor: ["#3d90ce", defaultColor], + id: "memoryLimits", + label: "Limits", + }, + ], + labels: [ + `Usage: ${bytesToUnits(memoryUsage)}`, + `Requests: ${bytesToUnits(memoryRequests)}`, + `Limits: ${checkedBytesToUnits(memoryLimits)}`, + `Allocatable Capacity: ${bytesToUnits(memoryAllocatableCapacity)}`, + `Capacity: ${bytesToUnits(memoryCapacity)}`, + ], + }; + const podsData: PieChartData = { + datasets: [ + { + data: [podUsage, podUsage ? podAllocatableCapacity - podUsage : 1], + backgroundColor: ["#4caf50", defaultColor], + id: "podUsage", + label: "Usage", + tooltipLabels: [ + (percent) => `Usage: ${percent}`, + (percent) => `Available: ${percent}`, + ], + }, + ], + labels: [ + `Usage: ${podUsage || 0}`, + `Capacity: ${podAllocatableCapacity}`, + ], + }; + + return ( +
+
+ + {(cpuLimits ?? cpuAllocatableCapacity) > cpuAllocatableCapacity && + renderLimitWarning()} +
+
+ + {(memoryLimits ?? memoryAllocatableCapacity) > + memoryAllocatableCapacity && renderLimitWarning()} +
+
+ +
+
+ ); + }; + + const renderContent = ({ + metricNodeRole, + metrics, + }: ClusterOverviewStore) => { + const { masterNodes, workerNodes } = nodeStore; + const nodes = + metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes; + + if (!nodes.length) { + return ( +
+ + No Nodes Available. +
+ ); + } + + if (!metrics) { + return ( +
+ +
+ ); + } + + const lastPoints = getMetricLastPoints(metrics); + const { memoryCapacity, cpuCapacity, podCapacity } = lastPoints; + + if (!memoryCapacity || !cpuCapacity || !podCapacity) { + return ( +
+ +
+ ); + } + + return renderCharts(lastPoints); + }; + + return
{renderContent(clusterOverviewStore)}
; + } +); + +const ClusterPieCharts = withInjectables( + NonInjectedClusterPieCharts, + { + getProps: (di) => ({ + clusterOverviewStore: di.inject(clusterOverviewStoreInjectable), + nodeStore: di.inject(nodeStoreInjectable), + activeTheme: di.inject(activeThemeInjectable), + }), + } +); + +const clusterPieChartsClusterOverviewInjectable = getInjectable({ + id: "cluster-pie-charts-cluster-overview", + + instantiate: (di) => ({ + id: "cluster-pie-charts-cluster-overview", + Component: ClusterPieCharts, + }), + + injectionToken: clusterOverviewUIBlockInjectionToken, +}); + +export default clusterPieChartsClusterOverviewInjectable; diff --git a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx b/packages/core/src/renderer/components/+cluster/cluster-overview.tsx index 7e88bcfb8c..ac32fdf4d3 100644 --- a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx +++ b/packages/core/src/renderer/components/+cluster/cluster-overview.tsx @@ -15,9 +15,7 @@ import { interval } from "@k8slens/utilities"; import { TabLayout } from "../layout/tab-layout"; import { Spinner } from "../spinner"; import { ClusterIssues } from "./cluster-issues"; -import { ClusterMetrics } from "./cluster-metrics"; import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store"; -import { ClusterPieCharts } from "./cluster-pie-charts"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import type { EventStore } from "../+events/store"; import { withInjectables } from "@ogre-tools/injectable-react"; @@ -79,12 +77,9 @@ class NonInjectedClusterOverview extends React.Component { return ( <> - {this.props.uiBlocks.map((block) => (
{}
))} - lol - ); } diff --git a/packages/core/src/renderer/components/+cluster/cluster-pie-charts.tsx b/packages/core/src/renderer/components/+cluster/cluster-pie-charts.tsx deleted file mode 100644 index 6ae370f052..0000000000 --- a/packages/core/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ /dev/null @@ -1,288 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import styles from "./cluster-pie-charts.module.scss"; - -import React from "react"; -import { observer } from "mobx-react"; -import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store"; -import { MetricNodeRole } from "./cluster-overview-store/cluster-overview-store"; -import { Spinner } from "../spinner"; -import { Icon } from "../icon"; -import type { NodeStore } from "../+nodes/store"; -import type { PieChartData } from "../chart"; -import { PieChart } from "../chart"; -import { ClusterNoMetrics } from "./cluster-no-metrics"; -import { bytesToUnits, cssNames } from "@k8slens/utilities"; -import type { LensTheme } from "../../themes/lens-theme"; -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 type { IComputedValue } from "mobx"; -import activeThemeInjectable from "../../themes/active.injectable"; -import type { ClusterMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; - -function createLabels(rawLabelData: [string, number | undefined][]): string[] { - return rawLabelData.map(([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}`); -} - -const checkedBytesToUnits = (value: number | undefined) => ( - typeof value === "number" - ? bytesToUnits(value) - : "N/A" -); - -interface Dependencies { - clusterOverviewStore: ClusterOverviewStore; - nodeStore: NodeStore; - activeTheme: IComputedValue; -} - -const NonInjectedClusterPieCharts = observer(({ - clusterOverviewStore, - nodeStore, - activeTheme, -}: Dependencies) => { - const renderLimitWarning = () => { - return ( -
- -

Specified limits are higher than node capacity!

-
- ); - }; - - const renderCharts = (lastPoints: Partial>) => { - const { - memoryUsage, memoryRequests, memoryAllocatableCapacity, memoryCapacity, memoryLimits, - cpuUsage, cpuRequests, cpuAllocatableCapacity, cpuCapacity, cpuLimits, - podUsage, podAllocatableCapacity, podCapacity, - } = lastPoints; - - if ( - typeof cpuCapacity !== "number" || - typeof cpuAllocatableCapacity !== "number" || - typeof podCapacity !== "number" || - typeof podAllocatableCapacity !== "number" || - typeof memoryAllocatableCapacity !== "number" || - typeof memoryCapacity !== "number" || - typeof memoryUsage !== "number" || - typeof memoryRequests !== "number" - ) { - return null; - } - - const defaultColor = activeTheme.get().colors.pieChartDefaultColor; - - const cpuData: PieChartData = { - datasets: [ - { - data: [ - cpuUsage, - cpuUsage ? cpuAllocatableCapacity - cpuUsage : 1, - ], - backgroundColor: [ - "#c93dce", - defaultColor, - ], - id: "cpuUsage", - label: "Usage", - }, - { - data: [ - cpuRequests, - cpuRequests ? cpuAllocatableCapacity - cpuRequests : 1, - ], - backgroundColor: [ - "#4caf50", - defaultColor, - ], - id: "cpuRequests", - label: "Requests", - }, - { - data: [ - cpuLimits, - Math.max(0, cpuAllocatableCapacity - (cpuLimits ?? cpuAllocatableCapacity)), - ], - backgroundColor: [ - "#3d90ce", - defaultColor, - ], - id: "cpuLimits", - label: "Limits", - }, - ], - labels: createLabels([ - ["Usage", cpuUsage], - ["Requests", cpuRequests], - ["Limits", cpuLimits], - ["Allocatable Capacity", cpuAllocatableCapacity], - ["Capacity", cpuCapacity], - ]), - }; - const memoryData: PieChartData = { - datasets: [ - { - data: [ - memoryUsage, - memoryUsage ? memoryAllocatableCapacity - memoryUsage : 1, - ], - backgroundColor: [ - "#c93dce", - defaultColor, - ], - id: "memoryUsage", - label: "Usage", - }, - { - data: [ - memoryRequests, - memoryRequests ? memoryAllocatableCapacity - memoryRequests : 1, - ], - backgroundColor: [ - "#4caf50", - defaultColor, - ], - id: "memoryRequests", - label: "Requests", - }, - { - data: [ - memoryLimits, - Math.max(0, memoryAllocatableCapacity - (memoryLimits ?? memoryAllocatableCapacity)), - ], - backgroundColor: [ - "#3d90ce", - defaultColor, - ], - id: "memoryLimits", - label: "Limits", - }, - ], - labels: [ - `Usage: ${bytesToUnits(memoryUsage)}`, - `Requests: ${bytesToUnits(memoryRequests)}`, - `Limits: ${checkedBytesToUnits(memoryLimits)}`, - `Allocatable Capacity: ${bytesToUnits(memoryAllocatableCapacity)}`, - `Capacity: ${bytesToUnits(memoryCapacity)}`, - ], - }; - const podsData: PieChartData = { - datasets: [ - { - data: [ - podUsage, - podUsage ? podAllocatableCapacity - podUsage : 1, - ], - backgroundColor: [ - "#4caf50", - defaultColor, - ], - id: "podUsage", - label: "Usage", - tooltipLabels: [ - (percent) => `Usage: ${percent}`, - (percent) => `Available: ${percent}`, - ], - }, - ], - labels: [ - `Usage: ${podUsage || 0}`, - `Capacity: ${podAllocatableCapacity}`, - ], - }; - - return ( -
-
- - {((cpuLimits ?? cpuAllocatableCapacity) > cpuAllocatableCapacity) && renderLimitWarning()} -
-
- - {((memoryLimits ?? memoryAllocatableCapacity) > memoryAllocatableCapacity) && renderLimitWarning()} -
-
- -
-
- ); - }; - - const renderContent = ({ metricNodeRole, metrics }: ClusterOverviewStore) => { - const { masterNodes, workerNodes } = nodeStore; - const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes; - - if (!nodes.length) { - return ( -
- - No Nodes Available. -
- ); - } - - if (!metrics) { - return ( -
- -
- ); - } - - const lastPoints = getMetricLastPoints(metrics); - const { memoryCapacity, cpuCapacity, podCapacity } = lastPoints; - - if (!memoryCapacity || !cpuCapacity || !podCapacity) { - return ( -
- -
- ); - } - - return renderCharts(lastPoints); - }; - - return ( -
- {renderContent(clusterOverviewStore)} -
- ); -}); - -export const ClusterPieCharts = withInjectables(NonInjectedClusterPieCharts, { - getProps: (di) => ({ - clusterOverviewStore: di.inject(clusterOverviewStoreInjectable), - nodeStore: di.inject(nodeStoreInjectable), - activeTheme: di.inject(activeThemeInjectable), - }), -});