Fix rerendering of KubeObject views every 30s (#4801)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

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

@@ -9,73 +9,49 @@ import React from "react";
 import { observer } from "mobx-react";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
-import { workloadStores } from "../+workloads";
-import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
 import type { KubeResource } from "../../../common/rbac";
-import { ResourceNames } from "../../utils/rbac";
-import { boundMethod } from "../../utils";
-import { workloadURL } from "../../../common/routes";
-import { isAllowedResource } from "../../../common/utils/allowed-resource";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import type { IComputedValue } from "mobx";
+import workloadsInjectable from "./workloads.injectable";
 
-const resources: KubeResource[] = [
-  "pods",
-  "deployments",
-  "statefulsets",
-  "daemonsets",
-  "replicasets",
-  "jobs",
-  "cronjobs",
-];
+export interface OverviewStatusesProps {}
+
+interface Workload {
+  resource: KubeResource;
+  amountOfItems: number;
+  href: string;
+  status: Record<string, number>;
+  title: string
+}
 
 interface Dependencies {
-  namespaceStore: NamespaceStore
+  workloads: IComputedValue<Workload[]>;
 }
 
-@observer
-class NonInjectedOverviewStatuses extends React.Component<Dependencies> {
-  @boundMethod
-  renderWorkload(resource: KubeResource): React.ReactElement {
-    const store = workloadStores.get(resource);
+const NonInjectedOverviewStatuses = observer(
+  ({ workloads }: Dependencies & OverviewStatusesProps) => (
+    <div className="OverviewStatuses">
+      <div className="workloads">
+        {workloads.get()
+          .map(({ resource, title, href, status, amountOfItems }) => (
+            <div className="workload" key={resource}>
+              <div className="title">
+                <Link to={href}>
+                  {title} ({amountOfItems})
+                </Link>
+              </div>
 
-    if (!store) {
-      return null;
-    }
-
-    const items = store.getAllByNs(this.props.namespaceStore.contextNamespaces);
-
-    return (
-      <div className="workload" key={resource}>
-        <div className="title">
-          <Link to={workloadURL[resource]()}>{ResourceNames[resource]} ({items.length})</Link>
-        </div>
-        <OverviewWorkloadStatus status={store.getStatuses(items)} />
+              <OverviewWorkloadStatus status={status} />
+            </div>
+          ))}
       </div>
-    );
-  }
-
-  render() {
-    const workloads = resources
-      .filter(isAllowedResource)
-      .map(this.renderWorkload);
-
-    return (
-      <div className="OverviewStatuses">
-        <div className="workloads">
-          {workloads}
-        </div>
-      </div>
-    );
-  }
-}
-
-export const OverviewStatuses = withInjectables<Dependencies>(
-  NonInjectedOverviewStatuses,
-
-  {
-    getProps: (di) => ({
-      namespaceStore: di.inject(namespaceStoreInjectable),
-    }),
-  },
+    </div>
+  ),
 );
+
+export const OverviewStatuses = withInjectables<Dependencies, OverviewStatusesProps>(NonInjectedOverviewStatuses, {
+  getProps: (di, props) => ({
+    workloads: di.inject(workloadsInjectable),
+    ...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,39 @@
+/**
+ * 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";
+import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
+
+interface Dependencies {
+  workloadStores: Map<KubeResource, KubeObjectStore<KubeObject>>;
+  isAllowedResource: IsAllowedResource;
+  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],
+        };
+      }),
+  );