Cascade different refactorings to eliminate global shared state from app paths

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/+cluster/cluster-metric-switchers.tsx

@@ -24,10 +24,15 @@ 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 { ClusterOverviewStore, MetricNodeRole, MetricType } from "./cluster-overview-store/cluster-overview-store";
+import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
 
-export const ClusterMetricSwitchers = observer(() => {
-  const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterOverviewStore;
+interface Dependencies {
+  clusterOverviewStore: ClusterOverviewStore
+}
+
+const NonInjectedClusterMetricSwitchers = observer(({ clusterOverviewStore: { metricType, metricNodeRole, getMetricsValues, metrics }}: Dependencies) => {
   const { masterNodes, workerNodes } = nodesStore;
   const metricsValues = getMetricsValues(metrics);
   const disableRoles = !masterNodes.length || !workerNodes.length;
@@ -40,7 +45,7 @@ export const ClusterMetricSwitchers = observer(() => {
           asButtons
           className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
           value={metricNodeRole}
-          onChange={(metric: MetricNodeRole) => clusterOverviewStore.metricNodeRole = metric}
+          onChange={(metric: MetricNodeRole) => metricNodeRole = metric}
         >
           <Radio label="Master" value={MetricNodeRole.MASTER}/>
           <Radio label="Worker" value={MetricNodeRole.WORKER}/>
@@ -51,7 +56,7 @@ export const ClusterMetricSwitchers = observer(() => {
           asButtons
           className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
           value={metricType}
-          onChange={(value: MetricType) => clusterOverviewStore.metricType = value}
+          onChange={(value: MetricType) => metricType = value}
         >
           <Radio label="CPU" value={MetricType.CPU}/>
           <Radio label="Memory" value={MetricType.MEMORY}/>
@@ -60,3 +65,14 @@ export const ClusterMetricSwitchers = observer(() => {
     </div>
   );
 });
+
+export const ClusterMetricSwitchers = withInjectables<Dependencies>(
+  NonInjectedClusterMetricSwitchers,
+
+  {
+    getProps: (di) => ({
+      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    }),
+  },
+);
+

src/renderer/components/+cluster/cluster-metrics.tsx

@@ -24,7 +24,7 @@ import styles from "./cluster-metrics.module.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 { ClusterOverviewStore, MetricType } from "./cluster-overview-store/cluster-overview-store";
 import { BarChart } from "../chart";
 import { bytesToUnits, cssNames } from "../../utils";
 import { Spinner } from "../spinner";
@@ -32,10 +32,16 @@ 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";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import clusterOverviewStoreInjectable
+  from "./cluster-overview-store/cluster-overview-store.injectable";
 
-export const ClusterMetrics = observer(() => {
-  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterOverviewStore;
-  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
+interface Dependencies {
+  clusterOverviewStore: ClusterOverviewStore
+}
+
+const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics }}: Dependencies) => {
+  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics);
   const metricValues = getMetricsValues(metrics);
   const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
   const data = metricValues.map(value => ({
@@ -118,3 +124,13 @@ export const ClusterMetrics = observer(() => {
     </div>
   );
 });
+
+export const ClusterMetrics = withInjectables<Dependencies>(
+  NonInjectedClusterMetrics,
+
+  {
+    getProps: (di) => ({
+      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    }),
+  },
+);

src/renderer/components/+cluster/cluster-overview-store/cluster-overview-store.injectable.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import {
+  ClusterOverviewStorageState,
+  ClusterOverviewStore,
+  MetricNodeRole,
+  MetricType,
+} from "./cluster-overview-store";
+import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
+import apiManagerInjectable from "../../kube-object-menu/dependencies/api-manager.injectable";
+
+const clusterOverviewStoreInjectable = getInjectable({
+  instantiate: (di) => {
+    const createStorage = di.inject(createStorageInjectable);
+
+    const storage = createStorage<ClusterOverviewStorageState>(
+      "cluster_overview",
+      {
+        metricType: MetricType.CPU, // setup defaults
+        metricNodeRole: MetricNodeRole.WORKER,
+      },
+    );
+
+    const store = new ClusterOverviewStore({
+      storage,
+    });
+
+    const apiManager = di.inject(apiManagerInjectable);
+
+    apiManager.registerStore(store);
+
+    return store;
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default clusterOverviewStoreInjectable;

src/renderer/components/+cluster/cluster-overview-store/cluster-overview-store.ts

@@ -20,12 +20,11 @@
  */
 
 import { action, observable, 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 { IMetricsReqParams, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
-import { nodesStore } from "../+nodes/nodes.store";
-import { apiManager } from "../../../common/k8s-api/api-manager";
+import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
+import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../../common/k8s-api/endpoints";
+import { autoBind, StorageHelper } from "../../../utils";
+import { IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
+import { nodesStore } from "../../+nodes/nodes.store";
 
 export enum MetricType {
   MEMORY = "memory",
@@ -42,34 +41,33 @@ export interface ClusterOverviewStorageState {
   metricNodeRole: MetricNodeRole,
 }
 
+interface Dependencies {
+  storage: StorageHelper<ClusterOverviewStorageState>
+}
+
 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;
+    return this.dependencies.storage.get().metricType;
   }
 
   set metricType(value: MetricType) {
-    this.storage.merge({ metricType: value });
+    this.dependencies.storage.merge({ metricType: value });
   }
 
   get metricNodeRole(): MetricNodeRole {
-    return this.storage.get().metricNodeRole;
+    return this.dependencies.storage.get().metricNodeRole;
   }
 
   set metricNodeRole(value: MetricNodeRole) {
-    this.storage.merge({ metricNodeRole: value });
+    this.dependencies.storage.merge({ metricNodeRole: value });
   }
 
-  constructor() {
+  constructor(private dependencies: Dependencies ) {
     super();
     makeObservable(this);
     autoBind(this);
@@ -125,9 +123,6 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
   reset() {
     super.reset();
     this.resetMetrics();
-    this.storage?.reset();
+    this.dependencies.storage?.reset();
   }
 }
-
-export const clusterOverviewStore = new ClusterOverviewStore();
-apiManager.registerStore(clusterOverviewStore);

src/renderer/components/+cluster/cluster-overview.tsx

@@ -26,28 +26,37 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
-import { getHostedClusterId, interval } from "../../utils";
+import { Disposer, getHostedClusterId, interval } from "../../utils";
 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 type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { ClusterStore } from "../../../common/cluster-store";
-import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
+import { ClusterStore } from "../../../common/cluster-store/cluster-store";
 import { eventStore } from "../+events/event.store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import kubeWatchApiInjectable from "../../kube-watch-api/kube-watch-api.injectable";
+import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
+
+interface Dependencies {
+  subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer,
+  clusterOverviewStore: ClusterOverviewStore
+}
 
 @observer
-export class ClusterOverview extends React.Component {
+class NonInjectedClusterOverview extends React.Component<Dependencies> {
   private metricPoller = interval(60, () => this.loadMetrics());
 
   loadMetrics() {
     const cluster = ClusterStore.getInstance().getById(getHostedClusterId());
 
     if (cluster.available) {
-      clusterOverviewStore.loadMetrics();
+      this.props.clusterOverviewStore.loadMetrics();
     }
   }
 
@@ -55,13 +64,14 @@ export class ClusterOverview extends React.Component {
     this.metricPoller.start(true);
 
     disposeOnUnmount(this, [
-      kubeWatchApi.subscribeStores([
+      this.props.subscribeStores([
         podsStore,
         eventStore,
         nodesStore,
       ]),
+
       reaction(
-        () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher
+        () => this.props.clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher
         () => this.metricPoller.restart(true),
       ),
     ]);
@@ -110,3 +120,14 @@ export class ClusterOverview extends React.Component {
     );
   }
 }
+
+export const ClusterOverview = withInjectables<Dependencies>(
+  NonInjectedClusterOverview,
+
+  {
+    getProps: (di) => ({
+      subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
+      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    }),
+  },
+);

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -23,7 +23,7 @@ import styles from "./cluster-pie-charts.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { clusterOverviewStore, MetricNodeRole } from "./cluster-overview.store";
+import { ClusterOverviewStore, MetricNodeRole } from "./cluster-overview-store/cluster-overview-store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
 import { nodesStore } from "../+nodes/nodes.store";
@@ -32,12 +32,18 @@ import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { bytesToUnits, cssNames } from "../../utils";
 import { ThemeStore } from "../../theme.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";
 
 function createLabels(rawLabelData: [string, number | undefined][]): string[] {
   return rawLabelData.map(([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}`);
 }
 
-export const ClusterPieCharts = observer(() => {
+interface Dependencies {
+  clusterOverviewStore: ClusterOverviewStore
+}
+
+const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependencies) => {
   const renderLimitWarning = () => {
     return (
       <div className="node-warning flex gaps align-center">
@@ -213,9 +219,8 @@ export const ClusterPieCharts = observer(() => {
     );
   };
 
-  const renderContent = () => {
+  const renderContent = ({ metricNodeRole, metricsLoaded }: ClusterOverviewStore) => {
     const { masterNodes, workerNodes } = nodesStore;
-    const { metricNodeRole, metricsLoaded } = clusterOverviewStore;
     const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes;
 
     if (!nodes.length) {
@@ -245,7 +250,17 @@ export const ClusterPieCharts = observer(() => {
 
   return (
     <div className="flex">
-      {renderContent()}
+      {renderContent(clusterOverviewStore)}
     </div>
   );
 });
+
+export const ClusterPieCharts = withInjectables<Dependencies>(
+  NonInjectedClusterPieCharts,
+
+  {
+    getProps: (di) => ({
+      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    }),
+  },
+);