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>

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -17,22 +17,14 @@ import type { JobStore } from "./store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Job } from "../../../common/k8s-api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { KubeObjectMeta } from "../kube-object-meta";
-import { makeObservable, observable, reaction } from "mobx";
-import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { ResourceMetrics } from "../resource-metrics";
-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 jobStoreInjectable 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 { JobPodMetricData, RequestPodMetricsForJobs } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
-import requestPodMetricsForJobsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
 
 export interface JobDetailsProps extends KubeObjectDetailsProps<Job> {
 }
@@ -41,38 +33,21 @@ interface Dependencies {
   subscribeStores: SubscribeStores;
   podStore: PodStore;
   jobStore: JobStore;
-  getActiveClusterEntity: GetActiveClusterEntity;
-  requestPodMetricsForJobs: RequestPodMetricsForJobs;
+  logger: Logger;
 }
 
 @observer
 class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependencies> {
-  @observable metrics: JobPodMetricData | null = null;
-
-  constructor(props: JobDetailsProps & 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: job, requestPodMetricsForJobs } = this.props;
-
-    this.metrics = await requestPodMetricsForJobs([job], job.getNs(), "");
-  };
-
   render() {
-    const { object: job, jobStore, getActiveClusterEntity } = this.props;
+    const { object: job, jobStore, logger } = this.props;
 
     if (!job) {
       return null;
@@ -89,21 +64,9 @@ class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependenci
     const images = job.getImages();
     const childPods = jobStore.getChildPods(job);
     const condition = job.getCondition();
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Job);
 
     return (
       <div className="JobDetails">
-        {!isMetricHidden && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={podMetricTabs}
-            object={job}
-            metrics={this.metrics}
-          >
-            <PodCharts />
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={job}/>
         <DrawerItem name="Selector" labelsOnly>
           {
             Object.keys(selectors).map(label => <Badge key={label} label={label}/>)
@@ -161,8 +124,7 @@ export const JobDetails = withInjectables<Dependencies, JobDetailsProps>(NonInje
     subscribeStores: di.inject(subscribeStoresInjectable),
     podStore: di.inject(podStoreInjectable),
     jobStore: di.inject(jobStoreInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
-    requestPodMetricsForJobs: di.inject(requestPodMetricsForJobsInjectable),
+    logger: di.inject(loggerInjectable),
   }),
 });
 

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

@@ -35,67 +35,64 @@ interface Dependencies {
   filterByNamespace: FilterByNamespace;
 }
 
-@observer
-class NonInjectedJobs extends React.Component<Dependencies> {
-  render() {
-    const {
-      eventStore,
-      filterByNamespace,
-      jobStore,
-    } = this.props;
+const NonInjectedJobs = observer((props: Dependencies) => {
+  const {
+    eventStore,
+    filterByNamespace,
+    jobStore,
+  } = props;
 
-    return (
-      <SiblingsInTabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          tableId="workload_jobs"
-          className="Jobs"
-          store={jobStore}
-          dependentStores={[eventStore]} // status icon component uses event store
-          sortingCallbacks={{
-            [columnId.name]: job => job.getName(),
-            [columnId.namespace]: job => job.getNs(),
-            [columnId.conditions]: job => job.getCondition()?.type,
-            [columnId.age]: job => -job.getCreationTimestamp(),
-          }}
-          searchFilters={[
-            job => job.getSearchFields(),
-          ]}
-          renderHeaderTitle="Jobs"
-          renderTableHeader={[
-            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-            { title: "Completions", className: "completions", id: columnId.completions },
-            { className: "warning", showWithColumn: columnId.completions },
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-            { title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions },
-          ]}
-          renderTableContents={job => {
-            const condition = job.getCondition();
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_jobs"
+        className="Jobs"
+        store={jobStore}
+        dependentStores={[eventStore]} // status icon component uses event store
+        sortingCallbacks={{
+          [columnId.name]: job => job.getName(),
+          [columnId.namespace]: job => job.getNs(),
+          [columnId.conditions]: job => job.getCondition()?.type,
+          [columnId.age]: job => -job.getCreationTimestamp(),
+        }}
+        searchFilters={[
+          job => job.getSearchFields(),
+        ]}
+        renderHeaderTitle="Jobs"
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Completions", className: "completions", id: columnId.completions },
+          { className: "warning", showWithColumn: columnId.completions },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions },
+        ]}
+        renderTableContents={job => {
+          const condition = job.getCondition();
 
-            return [
-              job.getName(),
-              <a
-                key="namespace"
-                className="filterNamespace"
-                onClick={prevDefault(() => filterByNamespace(job.getNs()))}
-              >
-                {job.getNs()}
-              </a>,
-              `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
-              <KubeObjectStatusIcon key="icon" object={job} />,
-              <KubeObjectAge key="age" object={job} />,
-              condition && {
-                title: condition.type,
-                className: kebabCase(condition.type),
-              },
-            ];
-          }}
-        />
-      </SiblingsInTabLayout>
-    );
-  }
-}
+          return [
+            job.getName(),
+            <a
+              key="namespace"
+              className="filterNamespace"
+              onClick={prevDefault(() => filterByNamespace(job.getNs()))}
+            >
+              {job.getNs()}
+            </a>,
+            `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
+            <KubeObjectStatusIcon key="icon" object={job} />,
+            <KubeObjectAge key="age" object={job} />,
+            condition && {
+              title: condition.type,
+              className: kebabCase(condition.type),
+            },
+          ];
+        }}
+      />
+    </SiblingsInTabLayout>
+  );
+});
 
 export const Jobs = withInjectables<Dependencies>(NonInjectedJobs, {
   getProps: (di, props) => ({

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

@@ -0,0 +1,52 @@
+/**
+ * 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, 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 { Job } from "../../../common/k8s-api/endpoints";
+import type { JobPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.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 jobMetricsInjectable from "./metrics.injectable";
+
+interface Dependencies {
+  metrics: IAsyncComputed<JobPodMetricData>;
+}
+
+const NonInjectedJobMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Job> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+const JobMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Job>>(NonInjectedJobMetricsDetailsComponent, {
+  getProps: (di, props) => ({
+    metrics: di.inject(jobMetricsInjectable, props.object),
+    ...props,
+  }),
+});
+
+const jobMetricsDetailsComponentInjectable = getInjectable({
+  id: "job-metrics-details-component",
+  instantiate: (di) => ({
+    Component: JobMetricsDetailsComponent,
+    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Job),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default jobMetricsDetailsComponentInjectable;

src/renderer/components/+workloads-jobs/metrics.injectable.ts

@@ -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 { Job } from "../../../common/k8s-api/endpoints";
+import requestPodMetricsForJobsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
+
+const jobMetricsInjectable = getInjectable({
+  id: "job-metrics",
+  instantiate: (di, job) => {
+    const requestPodMetricsForJobs = di.inject(requestPodMetricsForJobsInjectable);
+
+    return asyncComputed({
+      getValueFromObservedPromise: () => {
+        now(60 * 1000);
+
+        return requestPodMetricsForJobs([job], job.getNs());
+      },
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, job: Job) => job.getId(),
+  }),
+});
+
+export default jobMetricsInjectable;