Make StatefulSet metrics component injectable

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

src/renderer/components/+workloads-statefulsets/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 { StatefulSet } 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 statefulSetMetricsInjectable from "./metrics.injectable";
+
+const statefulSetMetricsDetailsComponentInjectable = getInjectable({
+  id: "stateful-set-metrics-details-component",
+  instantiate: (di) => ({
+    Component: ({ object }: KubeObjectDetailsProps<StatefulSet>) => (
+      <ResourceMetrics
+        tabs={podMetricTabs}
+        object={object}
+        metrics={di.inject(statefulSetMetricsInjectable, object)}
+      >
+        <PodCharts />
+      </ResourceMetrics>
+    ),
+    enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.StatefulSet),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default statefulSetMetricsDetailsComponentInjectable;

src/renderer/components/+workloads-statefulsets/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 { StatefulSet } from "../../../common/k8s-api/endpoints";
+import requestPodMetricsForStatefulSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable";
+
+const statefulSetMetricsInjectable = getInjectable({
+  id: "stateful-set-metrics",
+  instantiate: (di, statefulSet) => {
+    const requestPodMetricsForStatefulSets = di.inject(requestPodMetricsForStatefulSetsInjectable);
+
+    return asyncComputed(() => {
+      now(60 * 1000);
+
+      return requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs());
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, statefulSet: StatefulSet) => statefulSet.getId(),
+  }),
+});
+
+export default statefulSetMetricsInjectable;

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -7,7 +7,6 @@ import "./statefulset-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { makeObservable, observable, reaction } from "mobx";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
@@ -16,22 +15,15 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import type { StatefulSetStore } from "./store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { StatefulSet } 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 { ClusterMetricsResourceType } from "../../../common/cluster-types";
-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 statefulSetStoreInjectable from "./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 { RequestPodMetricsForStatefulSets, StatefulSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable";
-import requestPodMetricsForStatefulSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
 
 export interface StatefulSetDetailsProps extends KubeObjectDetailsProps<StatefulSet> {
 }
@@ -40,39 +32,21 @@ interface Dependencies {
   subscribeStores: SubscribeStores;
   podStore: PodStore;
   statefulSetStore: StatefulSetStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
-  requestPodMetricsForStatefulSets: RequestPodMetricsForStatefulSets;
+  logger: Logger;
 }
 
 @observer
 class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsProps & Dependencies> {
-  @observable metrics: StatefulSetPodMetricData | null = null;
-
-  constructor(props: StatefulSetDetailsProps & 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: statefulSet, requestPodMetricsForStatefulSets } = this.props;
-
-    this.metrics = await requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs());
-  };
-
   render() {
-    const { object: statefulSet, podStore, statefulSetStore, getActiveClusterEntity } = this.props;
+    const { object: statefulSet, statefulSetStore, logger } = this.props;
 
     if (!statefulSet) {
       return null;
@@ -88,21 +62,9 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
     const selectors = statefulSet.getSelectors();
     const nodeSelector = statefulSet.getNodeSelectors();
     const childPods = statefulSetStore.getChildPods(statefulSet);
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.StatefulSet);
 
     return (
       <div className="StatefulSetDetails">
-        {!isMetricHidden && podStore.isLoaded && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={podMetricTabs}
-            object={statefulSet}
-            metrics={this.metrics}
-          >
-            <PodCharts/>
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={statefulSet}/>
         {selectors.length && (
           <DrawerItem name="Selector" labelsOnly>
             {
@@ -131,7 +93,6 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
         <DrawerItem name="Pod Status" className="pod-status">
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
-        <ResourceMetricsText metrics={this.metrics}/>
         <PodDetailsList pods={childPods} owner={statefulSet}/>
       </div>
     );
@@ -144,8 +105,7 @@ export const StatefulSetDetails = withInjectables<Dependencies, StatefulSetDetai
     subscribeStores: di.inject(subscribeStoresInjectable),
     podStore: di.inject(podStoreInjectable),
     statefulSetStore: di.inject(statefulSetStoreInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
-    requestPodMetricsForStatefulSets: di.inject(requestPodMetricsForStatefulSetsInjectable),
+    logger: di.inject(loggerInjectable),
   }),
 });
 

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

@@ -13,13 +13,11 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { StatefulSetStore } from "./store";
-import type { PodStore } from "../+workloads-pods/store";
 import type { EventStore } from "../+events/store";
 import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import eventStoreInjectable from "../+events/store.injectable";
 import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import podStoreInjectable from "../+workloads-pods/store.injectable";
 import statefulSetStoreInjectable from "./store.injectable";
 import { prevDefault } from "../../utils";
 
@@ -33,79 +31,73 @@ enum columnId {
 
 interface Dependencies {
   statefulSetStore: StatefulSetStore;
-  podStore: PodStore;
   eventStore: EventStore;
   filterByNamespace: FilterByNamespace;
 }
 
-@observer
-class NonInjectedStatefulSets extends React.Component<Dependencies> {
-  renderPods(statefulSet: StatefulSet) {
-    const { readyReplicas, currentReplicas } = statefulSet.status ?? {};
+const renderPodCounts = (statefulSet: StatefulSet) => {
+  const { readyReplicas, currentReplicas } = statefulSet.status ?? {};
 
-    return `${readyReplicas || 0}/${currentReplicas || 0}`;
-  }
+  return `${readyReplicas || 0}/${currentReplicas || 0}`;
+};
 
-  render() {
-    const {
-      eventStore,
-      filterByNamespace,
-      podStore,
-      statefulSetStore,
-    } = this.props;
+const NonInjectedStatefulSets = observer((props: Dependencies) => {
+  const {
+    eventStore,
+    filterByNamespace,
+    statefulSetStore,
+  } = props;
 
-    return (
-      <SiblingsInTabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          tableId="workload_statefulsets"
-          className="StatefulSets"
-          store={statefulSetStore}
-          dependentStores={[podStore, eventStore]} // status icon component uses event store, details component uses podStore
-          sortingCallbacks={{
-            [columnId.name]: statefulSet => statefulSet.getName(),
-            [columnId.namespace]: statefulSet => statefulSet.getNs(),
-            [columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(),
-            [columnId.replicas]: statefulSet => statefulSet.getReplicas(),
-          }}
-          searchFilters={[
-            statefulSet => statefulSet.getSearchFields(),
-          ]}
-          renderHeaderTitle="Stateful Sets"
-          renderTableHeader={[
-            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-            { title: "Pods", className: "pods", id: columnId.pods },
-            { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
-            { className: "warning", showWithColumn: columnId.replicas },
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          ]}
-          renderTableContents={statefulSet => [
-            statefulSet.getName(),
-            <a
-              key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
-            >
-              {statefulSet.getNs()}
-            </a>,
-            this.renderPods(statefulSet),
-            statefulSet.getReplicas(),
-            <KubeObjectStatusIcon key="icon" object={statefulSet} />,
-            <KubeObjectAge key="age" object={statefulSet} />,
-          ]}
-        />
-      </SiblingsInTabLayout>
-    );
-  }
-}
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_statefulsets"
+        className="StatefulSets"
+        store={statefulSetStore}
+        dependentStores={[eventStore]}
+        sortingCallbacks={{
+          [columnId.name]: statefulSet => statefulSet.getName(),
+          [columnId.namespace]: statefulSet => statefulSet.getNs(),
+          [columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(),
+          [columnId.replicas]: statefulSet => statefulSet.getReplicas(),
+        }}
+        searchFilters={[
+          statefulSet => statefulSet.getSearchFields(),
+        ]}
+        renderHeaderTitle="Stateful Sets"
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Pods", className: "pods", id: columnId.pods },
+          { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          { className: "warning", showWithColumn: columnId.replicas },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+        ]}
+        renderTableContents={statefulSet => [
+          statefulSet.getName(),
+          <a
+            key="namespace"
+            className="filterNamespace"
+            onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
+          >
+            {statefulSet.getNs()}
+          </a>,
+          renderPodCounts(statefulSet),
+          statefulSet.getReplicas(),
+          <KubeObjectStatusIcon key="icon" object={statefulSet} />,
+          <KubeObjectAge key="age" object={statefulSet} />,
+        ]}
+      />
+    </SiblingsInTabLayout>
+  );
+});
 
 export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSets, {
   getProps: (di, props) => ({
     ...props,
     eventStore: di.inject(eventStoreInjectable),
     filterByNamespace: di.inject(filterByNamespaceInjectable),
-    podStore: di.inject(podStoreInjectable),
     statefulSetStore: di.inject(statefulSetStoreInjectable),
   }),
 });