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/index.ts

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./workloads";
-export * from "./workloads.stores";

src/renderer/components/+workloads/route-tabs.injectable.ts

@@ -2,11 +2,9 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-
-import "./workloads.scss";
-
-import React from "react";
-import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import type { TabLayoutRoute } from "../layout/tab-layout";
 import { WorkloadsOverview } from "../+workloads-overview/overview";
 import { Pods } from "../+workloads-pods";
 import { Deployments } from "../+workloads-deployments";
@@ -14,12 +12,17 @@ import { DaemonSets } from "../+workloads-daemonsets";
 import { StatefulSets } from "../+workloads-statefulsets";
 import { Jobs } from "../+workloads-jobs";
 import { CronJobs } from "../+workloads-cronjobs";
-import { isAllowedResource } from "../../../common/utils/allowed-resource";
 import { ReplicaSets } from "../+workloads-replicasets";
 import * as routes from "../../../common/routes";
+import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
+import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
 
-export class Workloads extends React.Component {
-  static get tabRoutes(): TabLayoutRoute[] {
+interface Dependencies {
+  isAllowedResource: IsAllowedResource;
+}
+
+function getRouteTabs({ isAllowedResource }: Dependencies) {
+  return computed(() => {
     const tabs: TabLayoutRoute[] = [
       {
         title: "Overview",
@@ -93,11 +96,14 @@ export class Workloads extends React.Component {
     }
 
     return tabs;
-  }
-
-  render() {
-    return (
-      <TabLayout className="Workloads" tabs={Workloads.tabRoutes}/>
-    );
-  }
+  });
 }
+
+const workloadsRouteTabsInjectable = getInjectable({
+  instantiate: (di) => getRouteTabs({
+    isAllowedResource: di.inject(isAllowedResourceInjectable),
+  }),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default workloadsRouteTabsInjectable;

src/renderer/components/+workloads/route.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./workloads.scss";
+
+import React from "react";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
+import type { IComputedValue } from "mobx";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { observer } from "mobx-react";
+import workloadsRouteTabsInjectable from "./route-tabs.injectable";
+
+export interface WorkloadsRouteProps {}
+
+interface Dependencies {
+  routes: IComputedValue<TabLayoutRoute[]>;
+}
+
+const NonInjectedWorkloadsRoute = observer(({ routes }: Dependencies & WorkloadsRouteProps) => (
+  <TabLayout
+    className="Workloads"
+    tabs={routes.get()}
+  />
+));
+
+export const WorkloadsRoute = withInjectables<Dependencies, WorkloadsRouteProps>(NonInjectedWorkloadsRoute, {
+  getProps: (di, props) => ({
+    routes: di.inject(workloadsRouteTabsInjectable),
+    ...props,
+  }),
+});
+

src/renderer/components/+workloads/sidebar-item.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { IComputedValue } from "mobx";
+import { observer } from "mobx-react";
+import { workloadsRoute, workloadsURL } from "../../../common/routes";
+import { isActiveRoute } from "../../navigation";
+import { Icon } from "../icon";
+import { SidebarItem } from "../layout/sidebar-item";
+import type { TabLayoutRoute } from "../layout/tab-layout";
+import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import workloadsRouteTabsInjectable from "./route-tabs.injectable";
+
+export interface WorkloadSidebarItemProps {}
+
+interface Dependencies {
+  routes: IComputedValue<TabLayoutRoute[]>;
+}
+
+const NonInjectedWorkloadsSidebarItem = observer(({ routes }: Dependencies & WorkloadSidebarItemProps) => {
+  const tabRoutes = routes.get();
+
+  return (
+    <SidebarItem
+      id="workloads"
+      text="Workloads"
+      isActive={isActiveRoute(workloadsRoute)}
+      isHidden={tabRoutes.length == 0}
+      url={workloadsURL()}
+      icon={<Icon svg="workloads"/>}
+    >
+      <TabRoutesSidebarItems routes={tabRoutes} />
+    </SidebarItem>
+  );
+});
+
+export const WorkloadsSidebarItem = withInjectables<Dependencies, WorkloadSidebarItemProps>(NonInjectedWorkloadsSidebarItem, {
+  getProps: (di, props) => ({
+    routes: di.inject(workloadsRouteTabsInjectable),
+    ...props,
+  }),
+});

src/renderer/components/+workloads/workloads.stores.ts

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
-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 type { KubeResource } from "../../../common/rbac";
-import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
-
-export const workloadStores = new Map<KubeResource, KubeObjectStore<KubeObject>>([
-  ["pods", podsStore],
-  ["deployments", deploymentStore],
-  ["daemonsets", daemonSetStore],
-  ["statefulsets", statefulSetStore],
-  ["replicasets", replicaSetStore],
-  ["jobs", jobStore],
-  ["cronjobs", cronJobStore],
-]);