Replace NodeMetrics in details with injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/api/catalog/entity/metrics-enabled.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 } from "mobx";
+import type { ClusterMetricsResourceType } from "../../../../common/cluster-types";
+import getActiveClusterEntityInjectable from "./get-active-cluster-entity.injectable";
+
+const enabledMetricsInjectable = getInjectable({
+  id: "enabled-metrics",
+  instantiate: (di, kind) => {
+    const getActiveClusterEntity = di.inject(getActiveClusterEntityInjectable);
+
+    return computed(() => !getActiveClusterEntity()?.isMetricsHidden(kind));
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, kind: ClusterMetricsResourceType) => kind,
+  }),
+});
+
+export default enabledMetricsInjectable;

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

@@ -11,26 +11,18 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerItemLabels } from "../drawer";
 import { Badge } from "../badge";
-import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { formatNodeTaint, Node } from "../../../common/k8s-api/endpoints";
-import { NodeCharts } from "./node-charts";
-import { makeObservable, observable, reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { KubeObjectMeta } from "../kube-object-meta";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { NodeDetailsResources } from "./details-resources";
 import { DrawerTitle } from "../drawer/drawer-title";
-import logger from "../../../common/logger";
+import type { Logger } from "../../../common/logger";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
 import type { PodStore } from "../+workloads-pods/store";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
-import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
-import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
-import type { ClusterMetricData, RequestClusterMetricsByNodeNames } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
-import requestClusterMetricsByNodeNamesInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
 
 export interface NodeDetailsProps extends KubeObjectDetailsProps<Node> {
 }
@@ -38,39 +30,21 @@ export interface NodeDetailsProps extends KubeObjectDetailsProps<Node> {
 interface Dependencies {
   subscribeStores: SubscribeStores;
   podStore: PodStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
-  requestClusterMetricsByNodeNames: RequestClusterMetricsByNodeNames;
+  logger: Logger;
 }
 
 @observer
 class NonInjectedNodeDetails extends React.Component<NodeDetailsProps & Dependencies> {
-  @observable metrics: ClusterMetricData | null = null;
-
-  constructor(props: NodeDetailsProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.props.object.getName(), () => {
-        this.metrics = null;
-      }),
-
       this.props.subscribeStores([
         this.props.podStore,
       ]),
     ]);
   }
 
-  loadMetrics = async () => {
-    const { object: node, requestClusterMetricsByNodeNames } = this.props;
-
-    this.metrics = await requestClusterMetricsByNodeNames([node.getName()]);
-  };
-
   render() {
-    const { object: node, podStore, getActiveClusterEntity } = this.props;
+    const { object: node, podStore, logger } = this.props;
 
     if (!node) {
       return null;
@@ -86,27 +60,9 @@ class NonInjectedNodeDetails extends React.Component<NodeDetailsProps & Dependen
     const conditions = node.getActiveConditions();
     const taints = node.getTaints();
     const childPods = podStore.getPodsByNode(node.getName());
-    const { metrics } = this;
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Node);
 
     return (
       <div className="NodeDetails">
-        {!isMetricHidden && podStore.isLoaded && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={[
-              "CPU",
-              "Memory",
-              "Disk",
-              "Pods",
-            ]}
-            object={node}
-            metrics={metrics}
-          >
-            <NodeCharts/>
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={node} hideFields={["labels", "annotations", "uid", "resourceVersion", "selfLink"]}/>
         {addresses && (
           <DrawerItem name="Addresses">
             {
@@ -197,8 +153,7 @@ export const NodeDetails = withInjectables<Dependencies, NodeDetailsProps>(NonIn
     ...props,
     subscribeStores: di.inject(subscribeStoresInjectable),
     podStore: di.inject(podStoreInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
-    requestClusterMetricsByNodeNames: di.inject(requestClusterMetricsByNodeNamesInjectable),
+    logger: di.inject(loggerInjectable),
   }),
 });
 

src/renderer/components/+nodes/metrics-details-component.injectable.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import React from "react";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import type { Node } from "../../../common/k8s-api/endpoints";
+import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
+import type { KubeObjectDetailsProps } from "../kube-object-details";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
+import { ResourceMetrics } from "../resource-metrics";
+import nodeMetricsInjectable from "./metrics.injectable";
+import { NodeCharts } from "./node-charts";
+
+const nodeMetricsDetailsComponentInjectable = getInjectable({
+  id: "node-metrics-details-component",
+  instantiate: (di) => ({
+    Component: ({ object }: KubeObjectDetailsProps<Node>) => (
+      <ResourceMetrics
+        tabs={ [
+          "CPU",
+          "Memory",
+          "Disk",
+          "Pods",
+        ] }
+        object={ object }
+        metrics={ di.inject(nodeMetricsInjectable, object) }
+      >
+        <NodeCharts />
+      </ResourceMetrics>
+    ),
+    enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.Node),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default nodeMetricsDetailsComponentInjectable;

src/renderer/components/+nodes/metrics.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 { asyncComputed } from "@ogre-tools/injectable-react";
+import { now } from "mobx-utils";
+import type { Node } from "../../../common/k8s-api/endpoints";
+import requestClusterMetricsByNodeNamesInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
+
+const nodeMetricsInjectable = getInjectable({
+  id: "node-metrics",
+  instantiate: (di, node) => {
+    const requestClusterMetricsByNodeNames = di.inject(requestClusterMetricsByNodeNamesInjectable);
+
+    return asyncComputed(() => {
+      now(60 * 1000);
+
+      return requestClusterMetricsByNodeNames([node.getName()]);
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, node: Node) => node.getId(),
+  }),
+});
+
+export default nodeMetricsInjectable;