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/+custom-resources/custom-resources.tsx

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
-import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
-import { CrdList } from "./crd-list";
-import { CrdResources } from "./crd-resources";
-import { crdURL, crdDefinitionsRoute, crdResourcesRoute } from "../../../common/routes";
-
-@observer
-export class CustomResources extends React.Component {
-  static get tabRoutes(): TabLayoutRoute[] {
-    return [
-      {
-        title: "Definitions",
-        component: CustomResources,
-        url: crdURL(),
-        routePath: String(crdDefinitionsRoute.path),
-      },
-    ];
-  }
-
-  render() {
-    return (
-      <TabLayout>
-        <Switch>
-          <Route component={CrdList} {...crdDefinitionsRoute} exact/>
-          <Route component={CrdResources} {...crdResourcesRoute}/>
-          <Redirect to={crdURL()}/>
-        </Switch>
-      </TabLayout>
-    );
-  }
-}

src/renderer/components/+custom-resources/grouped-custom-resources.injectable.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 { computed, IComputedValue } from "mobx";
+import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints";
+import { getOrInsert } from "../../utils";
+import customResourceDefinitionsInjectable from "./custom-resources.injectable";
+
+interface Dependencies {
+  definitions: IComputedValue<CustomResourceDefinition[]>;
+}
+
+function getGroupedCustomResourceDefinitions({ definitions }: Dependencies) {
+  return computed(() => {
+    const groups = new Map<string, CustomResourceDefinition[]>();
+
+    for (const crd of definitions.get()) {
+      getOrInsert(groups, crd.getGroup(), []).push(crd);
+    }
+
+    return groups;
+  });
+}
+
+const groupedCustomResourceDefinitionsInjectable = getInjectable({
+  instantiate: (di) => getGroupedCustomResourceDefinitions({
+    definitions: di.inject(customResourceDefinitionsInjectable),
+  }),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default groupedCustomResourceDefinitionsInjectable;

src/renderer/components/+custom-resources/route-tabs.injectable.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { computed, IComputedValue } from "mobx";
+import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints";
+import { crdURL, crdDefinitionsRoute } from "../../../common/routes";
+import type { TabLayoutRoute } from "../layout/tab-layout";
+import { CrdList } from "./crd-list";
+import { CrdResources } from "./crd-resources";
+import groupedCustomResourceDefinitionsInjectable from "./grouped-custom-resources.injectable";
+
+export interface CustomResourceTabLayoutRoute extends TabLayoutRoute {
+  id: string;
+}
+
+export interface CustomResourceGroupTabLayoutRoute extends CustomResourceTabLayoutRoute {
+  subRoutes?: CustomResourceTabLayoutRoute[];
+}
+
+interface Dependencies {
+  customResourcesDefinitions: IComputedValue<Map<string, CustomResourceDefinition[]>>;
+}
+
+function getRouteTabs({ customResourcesDefinitions }: Dependencies) {
+  return computed(() => {
+    const tabs: CustomResourceGroupTabLayoutRoute[] = [
+      {
+        id: "definitions",
+        title: "Definitions",
+        component: CrdList,
+        url: crdURL(),
+        routePath: String(crdDefinitionsRoute.path),
+        exact: true,
+      },
+    ];
+
+    for (const [group, definitions] of customResourcesDefinitions.get()) {
+      tabs.push({
+        id: `crd-group:${group}`,
+        title: group,
+        routePath: crdURL({ query: { groups: group }}),
+        component: CrdResources,
+        subRoutes: definitions.map(crd => ({
+          id: `crd-resource:${crd.getResourceApiBase()}`,
+          title: crd.getResourceKind(),
+          routePath: crd.getResourceUrl(),
+          component: CrdResources,
+        })),
+      });
+    }
+
+    return tabs;
+  });
+}
+
+const customResourcesRouteTabsInjectable = getInjectable({
+  instantiate: (di) => getRouteTabs({
+    customResourcesDefinitions: di.inject(groupedCustomResourceDefinitionsInjectable),
+  }),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default customResourcesRouteTabsInjectable;

src/renderer/components/+custom-resources/route.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Redirect, Route, Switch } from "react-router";
+import { TabLayout } from "../layout/tab-layout";
+import { crdURL } from "../../../common/routes";
+import type { IComputedValue } from "mobx";
+import type { CustomResourceGroupTabLayoutRoute } from "./route-tabs.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import customResourcesRouteTabsInjectable from "./route-tabs.injectable";
+
+interface Dependencies {
+  routes: IComputedValue<CustomResourceGroupTabLayoutRoute[]>;
+}
+
+const NonInjectedCustomResourcesRoute = observer(({ routes }: Dependencies) => (
+  <TabLayout>
+    <Switch>
+      {
+        routes.get().map(({ id, component, routePath, exact }) => (
+          <Route
+            key={id}
+            component={component}
+            path={routePath}
+            exact={exact}
+          />
+        ))
+      }
+      <Redirect to={crdURL()}/>
+    </Switch>
+  </TabLayout>
+));
+
+export const CustomResourcesRoute = withInjectables<Dependencies>(NonInjectedCustomResourcesRoute, {
+  getProps: (di, props) => ({
+    routes: di.inject(customResourcesRouteTabsInjectable),
+    ...props,
+  }),
+});

src/renderer/components/+custom-resources/sidebar-item.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React, { useEffect } from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { IComputedValue } from "mobx";
+import { observer } from "mobx-react";
+import customResourcesRouteTabsInjectable, { type CustomResourceGroupTabLayoutRoute } from "./route-tabs.injectable";
+import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
+import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
+import { crdURL, crdRoute } from "../../../common/routes";
+import { isActiveRoute } from "../../navigation";
+import { Icon } from "../icon";
+import { SidebarItem } from "../layout/sidebar-item";
+import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
+import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
+import { crdStore } from "./crd.store";
+import { Spinner } from "../spinner";
+
+export interface CustomResourcesSidebarItemProps {}
+
+interface Dependencies {
+  routes: IComputedValue<CustomResourceGroupTabLayoutRoute[]>;
+  isAllowedResource: IsAllowedResource;
+  subscribeStores: SubscribeStores;
+}
+
+const NonInjectedCustomResourcesSidebarItem = observer(({ routes, isAllowedResource, subscribeStores }: Dependencies & CustomResourcesSidebarItemProps) => {
+  useEffect(() => subscribeStores([
+    crdStore,
+  ]), []);
+
+  return (
+    <SidebarItem
+      id="custom-resources"
+      text="Custom Resources"
+      url={crdURL()}
+      isActive={isActiveRoute(crdRoute)}
+      isHidden={!isAllowedResource("customresourcedefinitions")}
+      icon={<Icon material="extension"/>}
+    >
+      {routes.get().map((route) => (
+        <SidebarItem
+          key={route.id}
+          id={route.id}
+          text={route.title}
+          url={route.routePath}
+        >
+          {route.subRoutes?.map((subRoute) => (
+            <SidebarItem
+              key={subRoute.id}
+              id={subRoute.id}
+              url={subRoute.routePath}
+              text={subRoute.title}
+            />
+          ))}
+        </SidebarItem>
+      ))}
+      {crdStore.isLoading && (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      )}
+    </SidebarItem>
+  );
+});
+
+export const CustomResourcesSidebarItem = withInjectables<Dependencies, CustomResourcesSidebarItemProps>(NonInjectedCustomResourcesSidebarItem, {
+  getProps: (di, props) => ({
+    routes: di.inject(customResourcesRouteTabsInjectable),
+    isAllowedResource: di.inject(isAllowedResourceInjectable),
+    subscribeStores: di.inject(subscribeStoresInjectable),
+    ...props,
+  }),
+});