Refactor kube detail components and add KubeEvents automatically to all custom resources (#6468)

* Support Events on CustomResourece details panel Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove unnecessary check Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy KubeObjectMeta use from non-metrics details Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change orderNumber of default KubeMetaDetails Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove last use of legacy global getActiveClusterEntity Signed-off-by: Sebastian Malton <sebastian@malton.name> * Refactor ResourceMetrics to use IAsyncComputed - Introduce first use for namespace metrics Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce metrics details item for Ingress Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacyStore for nodes Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacyStore for ingresses Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace NodeMetrics in details with injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change namespace metrics details to use more injectables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change ingress metrics details to use more injectables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change PersistentVolumeClaim metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change DaemonSet metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change Deployment metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change Job metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert Pod metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ReplicaSet metrics details injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make StatefulSet metrics component injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce fix for metrics components visible on all details Signed-off-by: Sebastian Malton <sebastian@malton.name> * Use the new and correct enabled check Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy global for daemonSetStore Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch components to be static to help with React performance Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy store of CronJobs Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make DeploymentReplicaSets injectable to fix build error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix up remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Allow use of ResourceMetrics without IAsyncComputed Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix metrics not updating correctly Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots because moving KubeObjectMeta out of CustomResourceDetails Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update more snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test failures due to newer dep versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type errors from new asyncComputed Signed-off-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-12-15 10:14:00 -05:00
1 parent d05189d008
commit 83d2b12cca
@@ -16,22 +16,16 @@ import type { DaemonSetStore } from "./store";
 import type { PodStore } from "../+workloads-pods/store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { DaemonSet } from "../../../common/k8s-api/endpoints";
-import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
-import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-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 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 daemonSetStoreInjectable from "./store.injectable";
 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 { DaemonSetPodMetricData, RequestPodMetricsForDaemonSets } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-daemon-sets.injectable";
 import requestPodMetricsForDaemonSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-daemon-sets.injectable";
+import loggerInjectable from "../../../common/logger.injectable";

 export interface DaemonSetDetailsProps extends KubeObjectDetailsProps<DaemonSet> {
 }
@@ -40,38 +34,21 @@ interface Dependencies {
  subscribeStores: SubscribeStores;
  daemonSetStore: DaemonSetStore;
  podStore: PodStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
-  requestPodMetricsForDaemonSets: RequestPodMetricsForDaemonSets;
+  logger: Logger;
 }

@observer
 class NonInjectedDaemonSetDetails extends React.Component<DaemonSetDetailsProps & Dependencies> {
-  @observable metrics: DaemonSetPodMetricData | null = null;
-
-  constructor(props: DaemonSetDetailsProps & 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: daemonSet, requestPodMetricsForDaemonSets } = this.props;
-
-    this.metrics = await requestPodMetricsForDaemonSets([daemonSet], daemonSet.getNs());
-  };
-
  render() {
-    const { object: daemonSet, daemonSetStore, podStore, getActiveClusterEntity } = this.props;
+    const { object: daemonSet, daemonSetStore, logger } = this.props;

    if (!daemonSet) {
      return null;
@@ -88,21 +65,9 @@ class NonInjectedDaemonSetDetails extends React.Component<DaemonSetDetailsProps
    const images = daemonSet.getImages();
    const nodeSelector = daemonSet.getNodeSelectors();
    const childPods = daemonSetStore.getChildPods(daemonSet);
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.DaemonSet);

    return (
      <div className="DaemonSetDetails">
-        {!isMetricHidden && podStore.isLoaded && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={podMetricTabs}
-            object={daemonSet}
-            metrics={this.metrics}
-          >
-            <PodCharts/>
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={daemonSet}/>
        {selectors.length > 0 && (
          <DrawerItem name="Selector" labelsOnly>
            {
@@ -132,7 +97,6 @@ class NonInjectedDaemonSetDetails extends React.Component<DaemonSetDetailsProps
        <DrawerItem name="Pod Status" className="pod-status">
          <PodDetailsStatuses pods={childPods}/>
        </DrawerItem>
-        <ResourceMetricsText metrics={this.metrics}/>
        <PodDetailsList pods={childPods} owner={daemonSet}/>
      </div>
    );
@@ -147,5 +111,6 @@ export const DaemonSetDetails = withInjectables<Dependencies, DaemonSetDetailsPr
    podStore: di.inject(podStoreInjectable),
    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
    requestPodMetricsForDaemonSets: di.inject(requestPodMetricsForDaemonSetsInjectable),
+    logger: di.inject(loggerInjectable),
  }),
 });
@@ -14,7 +14,6 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { DaemonSetStore } from "./store";
-import type { PodStore } from "../+workloads-pods/store";
 import type { EventStore } from "../+events/store";
 import { prevDefault } from "../../utils";
 import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
@@ -22,7 +21,6 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import daemonSetStoreInjectable from "./store.injectable";
 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";

 enum columnId {
  name = "name",
@@ -34,77 +32,70 @@ enum columnId {

 interface Dependencies {
  daemonSetStore: DaemonSetStore;
-  podStore: PodStore;
  eventStore: EventStore;
  filterByNamespace: FilterByNamespace;
 }

-@observer
-class NonInjectedDaemonSets extends React.Component<Dependencies> {
-  getPodsLength(daemonSet: DaemonSet) {
-    return this.props.daemonSetStore.getChildPods(daemonSet).length;
-  }
+const NonInjectedDaemonSets = observer((props: Dependencies) => {
+  const {
+    daemonSetStore,
+    eventStore,
+    filterByNamespace,
+  } = props;

-  render() {
-    const {
-      daemonSetStore,
-      eventStore,
-      filterByNamespace,
-      podStore,
-    } = this.props;
+  const getPodsLength = (daemonSet: DaemonSet) => daemonSetStore.getChildPods(daemonSet).length;

-    return (
-      <SiblingsInTabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          tableId="workload_daemonsets"
-          className="DaemonSets"
-          store={daemonSetStore}
-          dependentStores={[podStore, eventStore]} // status icon component uses event store
-          sortingCallbacks={{
-            [columnId.name]: daemonSet => daemonSet.getName(),
-            [columnId.namespace]: daemonSet => daemonSet.getNs(),
-            [columnId.pods]: daemonSet => this.getPodsLength(daemonSet),
-            [columnId.age]: daemonSet => -daemonSet.getCreationTimestamp(),
-          }}
-          searchFilters={[
-            daemonSet => daemonSet.getSearchFields(),
-            daemonSet => daemonSet.getLabels(),
-          ]}
-          renderHeaderTitle="Daemon 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", sortBy: columnId.pods, id: columnId.pods },
-            { className: "warning", showWithColumn: columnId.pods },
-            { title: "Node Selector", className: "labels scrollable", id: columnId.labels },
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          ]}
-          renderTableContents={daemonSet => [
-            daemonSet.getName(),
-            <a
-              key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => filterByNamespace(daemonSet.getNs()))}
-            >
-              {daemonSet.getNs()}
-            </a>,
-            this.getPodsLength(daemonSet),
-            <KubeObjectStatusIcon key="icon" object={daemonSet} />,
-            daemonSet.getNodeSelectors().map(selector => (
-              <Badge
-                key={selector}
-                label={selector}
-                scrollable
-              />
-            )),
-            <KubeObjectAge key="age" object={daemonSet} />,
-          ]}
-        />
-      </SiblingsInTabLayout>
-    );
-  }
-}
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_daemonsets"
+        className="DaemonSets"
+        store={daemonSetStore}
+        dependentStores={[eventStore]} // status icon component uses event store
+        sortingCallbacks={{
+          [columnId.name]: daemonSet => daemonSet.getName(),
+          [columnId.namespace]: daemonSet => daemonSet.getNs(),
+          [columnId.pods]: daemonSet => getPodsLength(daemonSet),
+          [columnId.age]: daemonSet => -daemonSet.getCreationTimestamp(),
+        }}
+        searchFilters={[
+          daemonSet => daemonSet.getSearchFields(),
+          daemonSet => daemonSet.getLabels(),
+        ]}
+        renderHeaderTitle="Daemon 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", sortBy: columnId.pods, id: columnId.pods },
+          { className: "warning", showWithColumn: columnId.pods },
+          { title: "Node Selector", className: "labels scrollable", id: columnId.labels },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+        ]}
+        renderTableContents={daemonSet => [
+          daemonSet.getName(),
+          <a
+            key="namespace"
+            className="filterNamespace"
+            onClick={prevDefault(() => filterByNamespace(daemonSet.getNs()))}
+          >
+            {daemonSet.getNs()}
+          </a>,
+          getPodsLength(daemonSet),
+          <KubeObjectStatusIcon key="icon" object={daemonSet} />,
+          daemonSet.getNodeSelectors().map(selector => (
+            <Badge
+              key={selector}
+              label={selector}
+              scrollable
+            />
+          )),
+          <KubeObjectAge key="age" object={daemonSet} />,
+        ]}
+      />
+    </SiblingsInTabLayout>
+  );
+});

 export const DaemonSets = withInjectables<Dependencies>(NonInjectedDaemonSets, {
  getProps: (di, props) => ({
@@ -112,6 +103,5 @@ export const DaemonSets = withInjectables<Dependencies>(NonInjectedDaemonSets, {
    daemonSetStore: di.inject(daemonSetStoreInjectable),
    eventStore: di.inject(eventStoreInjectable),
    filterByNamespace: di.inject(filterByNamespaceInjectable),
-    podStore: di.inject(podStoreInjectable),
  }),
 });
@@ -0,0 +1,53 @@
+/**
+ * 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 type { IAsyncComputed } from "@ogre-tools/injectable-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import type { DaemonSet } from "../../../common/k8s-api/endpoints";
+import type { DaemonSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-daemon-sets.injectable";
+import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-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 daemonSetMetricsInjectable from "./metrics.injectable";
+
+interface Dependencies {
+  metrics: IAsyncComputed<DaemonSetPodMetricData>;
+}
+
+const NonInjectedDaemonSetMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<DaemonSet> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+const DaemonSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<DaemonSet>>(NonInjectedDaemonSetMetricsDetailsComponent, {
+  getProps: (di, props) => ({
+    metrics: di.inject(daemonSetMetricsInjectable, props.object),
+    ...props,
+  }),
+});
+
+const daemonSetMetricsDetailsComponentInjectable = getInjectable({
+  id: "daemon-set-metrics-details-component",
+  instantiate: (di) => ({
+    Component: DaemonSetMetricsDetailsComponent,
+    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.DaemonSet),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default daemonSetMetricsDetailsComponentInjectable;
@@ -0,0 +1,29 @@
+/**
+ * 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 { DaemonSet } from "../../../common/k8s-api/endpoints";
+import requestPodMetricsForDaemonSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-daemon-sets.injectable";
+
+const daemonSetMetricsInjectable = getInjectable({
+  id: "daemon-set-metrics",
+  instantiate: (di, daemonSet) => {
+    const requestPodMetricsForDaemonSets = di.inject(requestPodMetricsForDaemonSetsInjectable);
+
+    return asyncComputed({
+      getValueFromObservedPromise: () => {
+        now(60 * 1000); // update every minute
+
+        return requestPodMetricsForDaemonSets([daemonSet], daemonSet.getNs());
+      },
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, daemonSet: DaemonSet) => daemonSet.getId(),
+  }),
+});
+
+export default daemonSetMetricsInjectable;