wokr

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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}
         >
           <Radio label="Master" value={MetricNodeRole.MASTER}/>
           <Radio label="Worker" value={MetricNodeRole.WORKER}/>
@@ -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}
         >
           <Radio label="CPU" value={MetricType.CPU}/>
           <Radio label="Memory" value={MetricType.MEMORY}/>

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<ClusterMetricsStorageState>("cluster_overview", {
+  metricType: MetricType.CPU, // setup defaults
+  metricNodeRole: MetricNodeRole.WORKER,
+});
+
 export const ClusterMetrics = observer(() => {
-  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterOverviewStore;
+  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterApiStore;
-  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
+  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) => {
+        label: ({ index }, data) => (data.datasets[0].data[index] as ChartPoint).y.toString(),
-          const value = data.datasets[0].data[index] as ChartPoint;
-
-          return value.y.toString();
-        }
       }
     }
   };
@@ -79,11 +95,9 @@ export const ClusterMetrics = observer(() => {
     },
     tooltips: {
       callbacks: {
-        label: ({ index }, data) => {
+        label: ({ index }, data) => (
-          const value = data.datasets[0].data[index] as ChartPoint;
+          bytesToUnits(parseInt((data.datasets[0].data[index] as ChartPoint).y as string), 3)
-
+        )
-          return bytesToUnits(parseInt(value.y as string), 3);
-        }
       }
     }
   };

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 {
+export class ClusterOverviewStore extends KubeObjectStore<Cluster> {
-  MEMORY = "memory",
-  CPU = "cpu"
-}
-
-export enum MetricNodeRole {
-  MASTER = "master",
-  WORKER = "worker"
-}
-
-export interface ClusterOverviewStorageState {
-  metricType: MetricType;
-  metricNodeRole: MetricNodeRole,
-}
-
-export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements ClusterOverviewStorageState {
   api = clusterApi;
 
-  @observable metrics: Partial<IClusterMetrics> = {};
-  @observable metricsLoaded = false;
-
-  private storage = createStorage<ClusterOverviewStorageState>("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<Cluster> implements Cl
   }
 }
 
-export const clusterOverviewStore = new ClusterOverviewStore();
+export const clusterApiStore = new ClusterOverviewStore();
-apiManager.registerStore(clusterOverviewStore);
+apiManager.registerStore(clusterApiStore);

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)
       ),
     ]);

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(() => {
         </div>
       );
     }
-    const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
+    const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterApiStore.metrics);
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity) {
       return <ClusterNoMetrics className="empty"/>;