Extract business logic from UI component

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

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

src/renderer/components/+workloads-overview/overview-statuses.tsx

@@ -9,78 +9,49 @@ import React from "react";
 import { observer } from "mobx-react";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
-import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
 import type { KubeResource } from "../../../common/rbac";
-import { ResourceNames } from "../../utils/rbac";
-import { workloadURL } from "../../../common/routes";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import type { IComputedValue } from "mobx";
-import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import workloadsInjectable from "./workloads.injectable";
-import { podsStore } from "../+workloads-pods/pods.store";
-import { deploymentStore } from "../+workloads-deployments/deployments.store";
-import { daemonSetStore } from "../+workloads-daemonsets/daemonsets.store";
-import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
-import { jobStore } from "../+workloads-jobs/job.store";
-import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
-import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
-import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
-import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
-
-const workloadStores = new Map<KubeResource, KubeObjectStore<KubeObject>>([
-  ["pods", podsStore],
-  ["deployments", deploymentStore],
-  ["daemonsets", daemonSetStore],
-  ["statefulsets", statefulSetStore],
-  ["replicasets", replicaSetStore],
-  ["jobs", jobStore],
-  ["cronjobs", cronJobStore],
-]);
 
 export interface OverviewStatusesProps {}
 
-interface Dependencies {
+interface Workload {
-  namespaceStore: NamespaceStore;
+  resource: KubeResource;
-  isAllowedResource: IsAllowedResource;
+  amountOfItems: number;
+  href: string;
+  status: Record<string, number>;
+  title: string
 }
 
-const NonInjectedOverviewStatuses = observer(({ namespaceStore, isAllowedResource }: Dependencies & OverviewStatusesProps) => {
+interface Dependencies {
-  const renderWorkloads = () => {
+  workloads: IComputedValue<Workload[]>;
-    const workloads: React.ReactNode[] = [];
+}
 
-    for (const [resource, store] of workloadStores.entries()) {
+const NonInjectedOverviewStatuses = observer(
-      if (!isAllowedResource(resource)) {
+  ({ workloads }: Dependencies & OverviewStatusesProps) => (
-        continue;
-      }
-
-      const items = store.getAllByNs(namespaceStore.contextNamespaces);
-
-      workloads.push(
-        <div className="workload" key={resource}>
-          <div className="title">
-            <Link to={workloadURL[resource]()}>{ResourceNames[resource]} ({items.length})</Link>
-          </div>
-          <OverviewWorkloadStatus status={store.getStatuses(items)} />
-        </div>,
-      );
-    }
-
-    return workloads;
-  };
-
-  return (
     <div className="OverviewStatuses">
       <div className="workloads">
-        {renderWorkloads()}
+        {workloads.get()
+          .map(({ resource, title, href, status, amountOfItems }) => (
+            <div className="workload" key={resource}>
+              <div className="title">
+                <Link to={href}>
+                  {title} ({amountOfItems})
+                </Link>
+              </div>
+
+              <OverviewWorkloadStatus status={status} />
+            </div>
+          ))}
       </div>
     </div>
-  );
+  ),
-});
+);
 
 export const OverviewStatuses = withInjectables<Dependencies, OverviewStatusesProps>(NonInjectedOverviewStatuses, {
   getProps: (di, props) => ({
-    namespaceStore: di.inject(namespaceStoreInjectable),
+    workloads: di.inject(workloadsInjectable),
-    isAllowedResource: di.inject(isAllowedResourceInjectable),
     ...props,
   }),
 });

src/renderer/components/+workloads-overview/workloads.injectable.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import type { KubeResource } from "../../../common/rbac";
+import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { deploymentStore } from "../+workloads-deployments/deployments.store";
+import { daemonSetStore } from "../+workloads-daemonsets/daemonsets.store";
+import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
+import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
+import { jobStore } from "../+workloads-jobs/job.store";
+import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
+import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
+import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import { workloads } from "./workloads";
+
+const workloadsInjectable = getInjectable({
+  instantiate: (di) =>
+    workloads({
+      isAllowedResource: di.inject(isAllowedResourceInjectable),
+      namespaceStore: di.inject(namespaceStoreInjectable),
+
+      workloadStores: new Map<KubeResource, KubeObjectStore<KubeObject>>([
+        ["pods", podsStore],
+        ["deployments", deploymentStore],
+        ["daemonsets", daemonSetStore],
+        ["statefulsets", statefulSetStore],
+        ["replicasets", replicaSetStore],
+        ["jobs", jobStore],
+        ["cronjobs", cronJobStore],
+      ]),
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default workloadsInjectable;

src/renderer/components/+workloads-overview/workloads.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { computed } from "mobx";
+import type { KubeResource } from "../../../common/rbac";
+import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import { workloadURL } from "../../../common/routes";
+import { ResourceNames } from "../../utils/rbac";
+import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
+
+interface Dependencies {
+  workloadStores: Map<KubeResource, KubeObjectStore<KubeObject>>;
+  isAllowedResource: (resource: KubeResource) => boolean;
+  namespaceStore: NamespaceStore;
+}
+
+export const workloads = ({
+  workloadStores,
+  isAllowedResource,
+  namespaceStore,
+}: Dependencies) =>
+  computed(() =>
+    [...workloadStores.entries()]
+      .filter(([resource]) => isAllowedResource(resource))
+      .map(([resource, store]) => {
+        const items = store.getAllByNs(namespaceStore.contextNamespaces);
+
+        return {
+          resource,
+          href: workloadURL[resource](),
+          amountOfItems: items.length,
+          status: store.getStatuses(items),
+          title: ResourceNames[resource],
+        };
+      }),
+  );