Make ReplicaSet metrics details injectable

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

src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.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 { getInjectable } from "@ogre-tools/injectable";
+import React from "react";
+import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import type { ReplicaSet } 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 replicaSetMetricsInjectable from "./metrics.injectable";
+
+const replicaSetMetricsDetailsComponentInjectable = getInjectable({
+  id: "replica-set-metrics-details-component",
+  instantiate: (di) => ({
+    Component: ({ object }: KubeObjectDetailsProps<ReplicaSet>) => (
+      <ResourceMetrics
+        tabs={podMetricTabs}
+        object={object}
+        metrics={di.inject(replicaSetMetricsInjectable, object)}
+      >
+        <PodCharts />
+      </ResourceMetrics>
+    ),
+    enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.ReplicaSet),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default replicaSetMetricsDetailsComponentInjectable;

src/renderer/components/+workloads-replicasets/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 { ReplicaSet } from "../../../common/k8s-api/endpoints";
+import requestPodMetricsForReplicaSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable";
+
+const replicaSetMetricsInjectable = getInjectable({
+  id: "replica-set-metrics",
+  instantiate: (di, replicaSet) => {
+    const requestPodMetricsForReplicaSets = di.inject(requestPodMetricsForReplicaSetsInjectable);
+
+    return asyncComputed(() => {
+      now(60 * 1000); // update every minute
+
+      return requestPodMetricsForReplicaSets([replicaSet], replicaSet.getNs());
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, replicaSet: ReplicaSet) => replicaSet.getId(),
+  }),
+});
+
+export default replicaSetMetricsInjectable;

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -5,7 +5,6 @@
 
 import "./replicaset-details.scss";
 import React from "react";
-import { makeObservable, observable, reaction } from "mobx";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
@@ -14,12 +13,8 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ReplicaSet } from "../../../common/k8s-api/endpoints";
-import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
-import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { KubeObjectMeta } from "../kube-object-meta";
+import type { Logger } from "../../../common/logger";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import 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";
@@ -27,10 +22,7 @@ import type { PodStore } from "../+workloads-pods/store";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
 import type { ReplicaSetStore } from "./store";
 import replicaSetStoreInjectable from "./store.injectable";
-import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
-import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
-import type { ReplicaSetPodMetricData, RequestPodMetricsForReplicaSets } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable";
-import requestPodMetricsForReplicaSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable";
 
 export interface ReplicaSetDetailsProps extends KubeObjectDetailsProps<ReplicaSet> {
 }
@@ -39,39 +31,20 @@ interface Dependencies {
   subscribeStores: SubscribeStores;
   podStore: PodStore;
   replicaSetStore: ReplicaSetStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
+  logger: Logger;
-  requestPodMetricsForReplicaSets: RequestPodMetricsForReplicaSets;
 }
 
 @observer
 class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProps & Dependencies> {
-  @observable metrics: ReplicaSetPodMetricData | null = null;
-
-  constructor(props: ReplicaSetDetailsProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.props.object, () => {
-        this.metrics = null;
-      }),
-
       this.props.subscribeStores([
         this.props.podStore,
       ]),
     ]);
   }
-
-  loadMetrics = async () => {
-    const { object: replicaSet, requestPodMetricsForReplicaSets } = this.props;
-
-    this.metrics = await requestPodMetricsForReplicaSets([replicaSet], replicaSet.getNs());
-  };
-
   render() {
-    const { object: replicaSet, podStore, replicaSetStore, getActiveClusterEntity } = this.props;
+    const { object: replicaSet, replicaSetStore, logger } = this.props;
 
     if (!replicaSet) {
       return null;
@@ -88,21 +61,9 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
     const nodeSelector = replicaSet.getNodeSelectors();
     const images = replicaSet.getImages();
     const childPods = replicaSetStore.getChildPods(replicaSet);
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.ReplicaSet);
 
     return (
       <div className="ReplicaSetDetails">
-        {!isMetricHidden && podStore.isLoaded && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={podMetricTabs}
-            object={replicaSet}
-            metrics={this.metrics}
-          >
-            <PodCharts/>
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={replicaSet}/>
         {selectors.length > 0 && (
           <DrawerItem name="Selector" labelsOnly>
             {
@@ -132,7 +93,6 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
         <DrawerItem name="Pod Status" className="pod-status">
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
-        <ResourceMetricsText metrics={this.metrics}/>
         <PodDetailsList pods={childPods} owner={replicaSet}/>
       </div>
     );
@@ -145,7 +105,6 @@ export const ReplicaSetDetails = withInjectables<Dependencies, ReplicaSetDetails
     subscribeStores: di.inject(subscribeStoresInjectable),
     podStore: di.inject(podStoreInjectable),
     replicaSetStore: di.inject(replicaSetStoreInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
+    logger: di.inject(loggerInjectable),
-    requestPodMetricsForReplicaSets: di.inject(requestPodMetricsForReplicaSetsInjectable),
   }),
 });

src/renderer/components/+workloads-replicasets/replicasets.tsx

@@ -35,14 +35,12 @@ interface Dependencies {
   filterByNamespace: FilterByNamespace;
 }
 
-@observer
+const NonInjectedReplicaSets = observer((props: Dependencies) => {
-class NonInjectedReplicaSets extends React.Component<Dependencies> {
-  render() {
   const {
     eventStore,
     filterByNamespace,
     replicaSetStore,
-    } = this.props;
+  } = props;
 
   return (
     <SiblingsInTabLayout>
@@ -91,8 +89,7 @@ class NonInjectedReplicaSets extends React.Component<Dependencies> {
       />
     </SiblingsInTabLayout>
   );
-  }
+});
-}
 
 export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets, {
   getProps: (di, props) => ({