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

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./node-details-resources.scss";
+import "./details-resources.scss";
 
 import { Table } from "../table/table";
 import { TableHead } from "../table/table-head";

src/renderer/components/+nodes/details.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./node-details.scss";
+import "./details.scss";
 
 import React from "react";
 import upperFirst from "lodash/upperFirst";
@@ -21,7 +21,7 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { NodeDetailsResources } from "./node-details-resources";
+import { NodeDetailsResources } from "./details-resources";
 import { DrawerTitle } from "../drawer/drawer-title";
 import { boundMethod, Disposer } from "../../utils";
 import logger from "../../../common/logger";

src/renderer/components/+nodes/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 "./nodes";
-export * from "./node-details";

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

@@ -50,7 +50,7 @@ interface UsageArgs {
 }
 
 @observer
-export class Nodes extends React.Component<Props> {
+export class NodesRoute extends React.Component<Props> {
   @observable.ref metrics: Partial<INodeMetrics> = {};
   private metricsWatcher = interval(30, async () => this.metrics = await getMetricsForAllNodes());
 

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { observer } from "mobx-react";
+import React from "react";
+import { nodesRoute, nodesURL } from "../../../common/routes";
+import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
+import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
+import { isActiveRoute } from "../../navigation";
+import { Icon } from "../icon";
+import { SidebarItem } from "../layout/sidebar-item";
+
+export interface NodeSidebarItemProps {}
+
+interface Dependencies {
+  isAllowedResource: IsAllowedResource;
+}
+
+const NonInjectedNodeSidebarItem = observer(({ isAllowedResource }: Dependencies & NodeSidebarItemProps) => (
+  <SidebarItem
+    id="nodes"
+    text="Nodes"
+    isActive={isActiveRoute(nodesRoute)}
+    isHidden={!isAllowedResource("nodes")}
+    url={nodesURL()}
+    icon={<Icon svg="nodes"/>}
+  />
+));
+
+export const NodesSidebarItem = withInjectables<Dependencies, NodeSidebarItemProps>(NonInjectedNodeSidebarItem, {
+  getProps: (di, props) => ({
+    isAllowedResource: di.inject(isAllowedResourceInjectable),
+    ...props,
+  }),
+});