Make ReplicaSet metrics details injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-10-25 12:09:39 -04:00 · 2022-10-25 12:09:39 -04:00 · c060a6b73e
commit c060a6b73e
parent 836783fbc1
4 changed files with 120 additions and 103 deletions
--- a/src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.tsx
+++ b/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;
--- a/src/renderer/components/+workloads-replicasets/metrics.injectable.ts
+++ b/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;
--- a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx
+++ b/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 { 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";
@ -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 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";
+import loggerInjectable from "../../../common/logger.injectable";

 export interface ReplicaSetDetailsProps extends KubeObjectDetailsProps<ReplicaSet> {
 }
@ -39,39 +31,20 @@ interface Dependencies {
  subscribeStores: SubscribeStores;
  podStore: PodStore;
  replicaSetStore: ReplicaSetStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
-  requestPodMetricsForReplicaSets: RequestPodMetricsForReplicaSets;
+  logger: Logger;
 }

@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),
-    requestPodMetricsForReplicaSets: di.inject(requestPodMetricsForReplicaSetsInjectable),
+    logger: di.inject(loggerInjectable),
  }),
 });
--- a/src/renderer/components/+workloads-replicasets/replicasets.tsx
+++ b/src/renderer/components/+workloads-replicasets/replicasets.tsx
@ -35,64 +35,61 @@ interface Dependencies {
  filterByNamespace: FilterByNamespace;
 }

-@observer
-class NonInjectedReplicaSets extends React.Component<Dependencies> {
-  render() {
-    const {
-      eventStore,
-      filterByNamespace,
-      replicaSetStore,
-    } = this.props;
+const NonInjectedReplicaSets = observer((props: Dependencies) => {
+  const {
+    eventStore,
+    filterByNamespace,
+    replicaSetStore,
+  } = props;

-    return (
-      <SiblingsInTabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          tableId="workload_replicasets"
-          className="ReplicaSets"
-          store={replicaSetStore}
-          dependentStores={[eventStore]} // status icon component uses event store
-          sortingCallbacks={{
-            [columnId.name]: replicaSet => replicaSet.getName(),
-            [columnId.namespace]: replicaSet => replicaSet.getNs(),
-            [columnId.desired]: replicaSet => replicaSet.getDesired(),
-            [columnId.current]: replicaSet => replicaSet.getCurrent(),
-            [columnId.ready]: replicaSet => replicaSet.getReady(),
-            [columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(),
-          }}
-          searchFilters={[
-            replicaSet => replicaSet.getSearchFields(),
-          ]}
-          renderHeaderTitle="Replica Sets"
-          renderTableHeader={[
-            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-            { className: "warning", showWithColumn: columnId.name },
-            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-            { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired },
-            { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current },
-            { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          ]}
-          renderTableContents={replicaSet => [
-            replicaSet.getName(),
-            <KubeObjectStatusIcon key="icon" object={replicaSet} />,
-            <a
-              key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))}
-            >
-              {replicaSet.getNs()}
-            </a>,
-            replicaSet.getDesired(),
-            replicaSet.getCurrent(),
-            replicaSet.getReady(),
-            <KubeObjectAge key="age" object={replicaSet} />,
-          ]}
-        />
-      </SiblingsInTabLayout>
-    );
-  }
-}
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_replicasets"
+        className="ReplicaSets"
+        store={replicaSetStore}
+        dependentStores={[eventStore]} // status icon component uses event store
+        sortingCallbacks={{
+          [columnId.name]: replicaSet => replicaSet.getName(),
+          [columnId.namespace]: replicaSet => replicaSet.getNs(),
+          [columnId.desired]: replicaSet => replicaSet.getDesired(),
+          [columnId.current]: replicaSet => replicaSet.getCurrent(),
+          [columnId.ready]: replicaSet => replicaSet.getReady(),
+          [columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(),
+        }}
+        searchFilters={[
+          replicaSet => replicaSet.getSearchFields(),
+        ]}
+        renderHeaderTitle="Replica Sets"
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired },
+          { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current },
+          { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+        ]}
+        renderTableContents={replicaSet => [
+          replicaSet.getName(),
+          <KubeObjectStatusIcon key="icon" object={replicaSet} />,
+          <a
+            key="namespace"
+            className="filterNamespace"
+            onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))}
+          >
+            {replicaSet.getNs()}
+          </a>,
+          replicaSet.getDesired(),
+          replicaSet.getCurrent(),
+          replicaSet.getReady(),
+          <KubeObjectAge key="age" object={replicaSet} />,
+        ]}
+      />
+    </SiblingsInTabLayout>
+  );
+});

 export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets, {
  getProps: (di, props) => ({