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 deleted file mode 100644 index f6d069bcdf..0000000000 --- a/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx +++ /dev/null @@ -1,161 +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"; -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 deleted file mode 100644 index c0f0c173ee..0000000000 --- a/packages/core/src/renderer/components/+cluster/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx +++ /dev/null @@ -1,322 +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"; -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/open-lens/src/renderer/index.ts b/packages/open-lens/src/renderer/index.ts index 11d80b9bec..01b4dd5aad 100644 --- a/packages/open-lens/src/renderer/index.ts +++ b/packages/open-lens/src/renderer/index.ts @@ -24,8 +24,7 @@ runInAction(() => { registerMobX(di); registerInjectableReact(di); registerLensCore(di, environment); - registerFeature(di, applicationFeature); - registerFeature(di, metricsFeature); + registerFeature(di, applicationFeature, metricsFeature); autoRegister({ di, diff --git a/packages/technical-features/metrics/package.json b/packages/technical-features/metrics/package.json index 8c8fc54222..6fdf6aa236 100644 --- a/packages/technical-features/metrics/package.json +++ b/packages/technical-features/metrics/package.json @@ -33,7 +33,9 @@ }, "peerDependencies": { "@k8slens/feature-core": "^6.5.0-alpha.0", - "@ogre-tools/injectable": "^15.1.2" + "@ogre-tools/injectable": "^15.1.2", + "@ogre-tools/injectable-react": "^15.1.2", + "chart.js": "^2.9.4" }, "devDependencies": { "@k8slens/eslint-config": "6.5.0-alpha.1" diff --git a/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx new file mode 100644 index 0000000000..03f2170e31 --- /dev/null +++ b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.injectable.tsx @@ -0,0 +1,164 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import React from 'react'; +// 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 "../cluster-overview-ui-block"; + +// 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 ClusterMetrics = () =>
cluster-metrics.injectable
; + +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/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.module.scss b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.module.scss new file mode 100644 index 0000000000..8f45b01913 --- /dev/null +++ b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-metrics.module.scss @@ -0,0 +1,23 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + + .ClusterMetrics { + position: relative; + min-height: 280px; + padding: calc(var(--margin) * 2); + background: var(--contentColor); + + .chart { + :global(.chart-container) { + width: 100%; + height: 100%; + } + } + + .empty { + text-align: center; + padding-bottom: 45px; + } +} diff --git a/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx new file mode 100644 index 0000000000..737876482e --- /dev/null +++ b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-pie-charts.injectable.tsx @@ -0,0 +1,324 @@ +/** + * 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 { getInjectable } from "@ogre-tools/injectable"; +import { clusterOverviewUIBlockInjectionToken } from "../cluster-overview-ui-block"; + +// 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 ClusterPieCharts = () =>
cluster-pie-charts.injectable
; + +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-pie-charts.module.scss b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-pie-charts.module.scss similarity index 100% rename from packages/core/src/renderer/components/+cluster/cluster-pie-charts.module.scss rename to packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-blocks/cluster-pie-charts.module.scss diff --git a/packages/technical-features/metrics/src/feature.ts b/packages/technical-features/metrics/src/feature.ts index 6307633634..2d76e22782 100644 --- a/packages/technical-features/metrics/src/feature.ts +++ b/packages/technical-features/metrics/src/feature.ts @@ -1,7 +1,15 @@ import { getFeature } from "@k8slens/feature-core"; +import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration"; export const metricsFeature = getFeature({ id: "metrics", - register: () => {}, + register: (di) => { + autoRegister({ + di, + targetModule: module, + + getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)], + }); + }, });