From 57f71d3224f350c0fba2f443a65f1e6411193754 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Tue, 12 Oct 2021 09:13:05 -0400 Subject: [PATCH] wokr Signed-off-by: Sebastian Malton --- .../+cluster/cluster-metric-switchers.tsx | 8 ++-- .../components/+cluster/cluster-metrics.tsx | 42 ++++++++++++------- .../+cluster/cluster-overview.store.ts | 32 +++----------- .../components/+cluster/cluster-overview.tsx | 6 +-- .../+cluster/cluster-pie-charts.tsx | 8 ++-- 5 files changed, 44 insertions(+), 52 deletions(-) diff --git a/src/renderer/components/+cluster/cluster-metric-switchers.tsx b/src/renderer/components/+cluster/cluster-metric-switchers.tsx index b80dd10527..3be4ae903f 100644 --- a/src/renderer/components/+cluster/cluster-metric-switchers.tsx +++ b/src/renderer/components/+cluster/cluster-metric-switchers.tsx @@ -26,10 +26,10 @@ import { observer } from "mobx-react"; import { nodesStore } from "../+nodes/nodes.store"; import { cssNames } from "../../utils"; import { Radio, RadioGroup } from "../radio"; -import { clusterOverviewStore, MetricNodeRole, MetricType } from "./cluster-overview.store"; +import { clusterApiStore, MetricNodeRole, MetricType } from "./cluster-overview.store"; export const ClusterMetricSwitchers = observer(() => { - const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterOverviewStore; + const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterApiStore; const { masterNodes, workerNodes } = nodesStore; const metricsValues = getMetricsValues(metrics); const disableRoles = !masterNodes.length || !workerNodes.length; @@ -42,7 +42,7 @@ export const ClusterMetricSwitchers = observer(() => { asButtons className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })} value={metricNodeRole} - onChange={(metric: MetricNodeRole) => clusterOverviewStore.metricNodeRole = metric} + onChange={(metric: MetricNodeRole) => clusterApiStore.metricNodeRole = metric} > @@ -53,7 +53,7 @@ export const ClusterMetricSwitchers = observer(() => { asButtons className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })} value={metricType} - onChange={(value: MetricType) => clusterOverviewStore.metricType = value} + onChange={(value: MetricType) => clusterApiStore.metricType = value} > diff --git a/src/renderer/components/+cluster/cluster-metrics.tsx b/src/renderer/components/+cluster/cluster-metrics.tsx index 43e540dca2..17221c3944 100644 --- a/src/renderer/components/+cluster/cluster-metrics.tsx +++ b/src/renderer/components/+cluster/cluster-metrics.tsx @@ -24,18 +24,38 @@ import "./cluster-metrics.scss"; import React from "react"; import { observer } from "mobx-react"; import type { ChartOptions, ChartPoint } from "chart.js"; -import { clusterOverviewStore, MetricType } from "./cluster-overview.store"; +import { clusterApiStore } from "./cluster-overview.store"; import { BarChart } from "../chart"; -import { bytesToUnits } from "../../utils"; +import { bytesToUnits, createStorage } from "../../utils"; import { Spinner } from "../spinner"; import { ZebraStripes } 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"; +export enum MetricType { + MEMORY = "memory", + CPU = "cpu" +} + +export enum MetricNodeRole { + MASTER = "master", + WORKER = "worker" +} + +export interface ClusterMetricsStorageState { + metricType: MetricType; + metricNodeRole: MetricNodeRole, +} + +const storage = createStorage("cluster_overview", { + metricType: MetricType.CPU, // setup defaults + metricNodeRole: MetricNodeRole.WORKER, +}); + export const ClusterMetrics = observer(() => { - const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterOverviewStore; - const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterOverviewStore.metrics); + const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterApiStore; + const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterApiStore.metrics); const metricValues = getMetricsValues(metrics); const colors = { cpu: "#3D90CE", memory: "#C93DCE" }; const data = metricValues.map(value => ({ @@ -60,11 +80,7 @@ export const ClusterMetrics = observer(() => { }, tooltips: { callbacks: { - label: ({ index }, data) => { - const value = data.datasets[0].data[index] as ChartPoint; - - return value.y.toString(); - } + label: ({ index }, data) => (data.datasets[0].data[index] as ChartPoint).y.toString(), } } }; @@ -79,11 +95,9 @@ export const ClusterMetrics = observer(() => { }, tooltips: { callbacks: { - label: ({ index }, data) => { - const value = data.datasets[0].data[index] as ChartPoint; - - return bytesToUnits(parseInt(value.y as string), 3); - } + label: ({ index }, data) => ( + bytesToUnits(parseInt((data.datasets[0].data[index] as ChartPoint).y as string), 3) + ) } } }; diff --git a/src/renderer/components/+cluster/cluster-overview.store.ts b/src/renderer/components/+cluster/cluster-overview.store.ts index 17cc100109..f4312aa25a 100644 --- a/src/renderer/components/+cluster/cluster-overview.store.ts +++ b/src/renderer/components/+cluster/cluster-overview.store.ts @@ -19,39 +19,17 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import { action, observable, reaction, when, makeObservable } from "mobx"; +import { action, reaction, when, makeObservable } from "mobx"; import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../common/k8s-api/endpoints"; -import { autoBind, createStorage } from "../../utils"; +import { autoBind } from "../../utils"; import { IMetricsReqParams, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api"; import { nodesStore } from "../+nodes/nodes.store"; import { apiManager } from "../../../common/k8s-api/api-manager"; -export enum MetricType { - MEMORY = "memory", - CPU = "cpu" -} - -export enum MetricNodeRole { - MASTER = "master", - WORKER = "worker" -} - -export interface ClusterOverviewStorageState { - metricType: MetricType; - metricNodeRole: MetricNodeRole, -} - -export class ClusterOverviewStore extends KubeObjectStore implements ClusterOverviewStorageState { +export class ClusterOverviewStore extends KubeObjectStore { api = clusterApi; - @observable metrics: Partial = {}; - @observable metricsLoaded = false; - - private storage = createStorage("cluster_overview", { - metricType: MetricType.CPU, // setup defaults - metricNodeRole: MetricNodeRole.WORKER, - }); get metricType(): MetricType { return this.storage.get().metricType; @@ -129,5 +107,5 @@ export class ClusterOverviewStore extends KubeObjectStore implements Cl } } -export const clusterOverviewStore = new ClusterOverviewStore(); -apiManager.registerStore(clusterOverviewStore); +export const clusterApiStore = new ClusterOverviewStore(); +apiManager.registerStore(clusterApiStore); diff --git a/src/renderer/components/+cluster/cluster-overview.tsx b/src/renderer/components/+cluster/cluster-overview.tsx index e68c2f752f..ca59d49456 100644 --- a/src/renderer/components/+cluster/cluster-overview.tsx +++ b/src/renderer/components/+cluster/cluster-overview.tsx @@ -31,7 +31,7 @@ import { TabLayout } from "../layout/tab-layout"; import { Spinner } from "../spinner"; import { ClusterIssues } from "./cluster-issues"; import { ClusterMetrics } from "./cluster-metrics"; -import { clusterOverviewStore } from "./cluster-overview.store"; +import { clusterApiStore } from "./cluster-overview.store"; import { ClusterPieCharts } from "./cluster-pie-charts"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; @@ -45,7 +45,7 @@ export class ClusterOverview extends React.Component { const cluster = ClusterStore.getInstance().getById(getHostedClusterId()); if (cluster.available) { - clusterOverviewStore.loadMetrics(); + clusterApiStore.loadMetrics(); } } @@ -54,7 +54,7 @@ export class ClusterOverview extends React.Component { disposeOnUnmount(this, [ reaction( - () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher + () => clusterApiStore.metricNodeRole, // Toggle Master/Worker node switcher () => this.metricPoller.restart(true) ), ]); diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index 76bb6967f6..da622bcc45 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx @@ -23,7 +23,7 @@ import "./cluster-pie-charts.scss"; import React from "react"; import { observer } from "mobx-react"; -import { clusterOverviewStore, MetricNodeRole } from "./cluster-overview.store"; +import { clusterApiStore, MetricNodeRole } from "./cluster-overview.store"; import { Spinner } from "../spinner"; import { Icon } from "../icon"; import { nodesStore } from "../+nodes/nodes.store"; @@ -48,7 +48,7 @@ export const ClusterPieCharts = observer(() => { }; const renderCharts = () => { - const data = getMetricLastPoints(clusterOverviewStore.metrics); + const data = getMetricLastPoints(clusterApiStore.metrics); const { memoryUsage, memoryRequests, memoryAllocatableCapacity, memoryCapacity, memoryLimits } = data; const { cpuUsage, cpuRequests, cpuAllocatableCapacity, cpuCapacity, cpuLimits } = data; const { podUsage, podAllocatableCapacity, podCapacity } = data; @@ -215,7 +215,7 @@ export const ClusterPieCharts = observer(() => { const renderContent = () => { const { masterNodes, workerNodes } = nodesStore; - const { metricNodeRole, metricsLoaded } = clusterOverviewStore; + const { metricNodeRole, metricsLoaded } = clusterApiStore; const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes; if (!nodes.length) { @@ -234,7 +234,7 @@ export const ClusterPieCharts = observer(() => { ); } - const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterOverviewStore.metrics); + const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterApiStore.metrics); if (!memoryCapacity || !cpuCapacity || !podCapacity) { return ;