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
@@ -17,7 +17,6 @@ import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { getDetailsUrl } from "../kube-detail-params";
 import type { Job } from "../../../common/k8s-api/endpoints";
 import { CronJob } from "../../../common/k8s-api/endpoints";
-import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
@@ -61,7 +60,6 @@ class NonInjectedCronJobDetails extends React.Component<CronJobDetailsProps & De

    return (
      <div className="CronJobDetails">
-        <KubeObjectMeta object={cronJob}/>
        <DrawerItem name="Schedule">
          {
            cronJob.isNeverRun()
@@ -13,11 +13,9 @@ import moment from "moment";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { CronJobStore } from "./store";
-import type { JobStore } from "../+workloads-jobs/store";
 import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import cronJobStoreInjectable from "./store.injectable";
-import jobStoreInjectable from "../+workloads-jobs/store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
 import { prevDefault } from "../../utils";
 import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
@@ -35,84 +33,78 @@ enum columnId {

 interface Dependencies {
  cronJobStore: CronJobStore;
-  jobStore: JobStore;
  eventStore: EventStore;
  filterByNamespace: FilterByNamespace;
 }

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

-    return (
-      <SiblingsInTabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          tableId="workload_cronjobs"
-          className="CronJobs"
-          store={cronJobStore}
-          dependentStores={[jobStore, eventStore]}
-          sortingCallbacks={{
-            [columnId.name]: cronJob => cronJob.getName(),
-            [columnId.namespace]: cronJob => cronJob.getNs(),
-            [columnId.suspend]: cronJob => cronJob.getSuspendFlag(),
-            [columnId.active]: cronJob => cronJobStore.getActiveJobsNum(cronJob),
-            [columnId.lastSchedule]: cronJob => (
-              cronJob.status?.lastScheduleTime
-                ? moment().diff(cronJob.status.lastScheduleTime)
-                : 0
-            ),
-            [columnId.age]: cronJob => -cronJob.getCreationTimestamp(),
-          }}
-          searchFilters={[
-            cronJob => cronJob.getSearchFields(),
-            cronJob => cronJob.getSchedule(),
-          ]}
-          renderHeaderTitle="Cron Jobs"
-          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: "Schedule", className: "schedule", id: columnId.schedule },
-            { title: "Suspend", className: "suspend", sortBy: columnId.suspend, id: columnId.suspend },
-            { title: "Active", className: "active", sortBy: columnId.active, id: columnId.active },
-            { title: "Last schedule", className: "last-schedule", sortBy: columnId.lastSchedule, id: columnId.lastSchedule },
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          ]}
-          renderTableContents={cronJob => [
-            cronJob.getName(),
-            <KubeObjectStatusIcon key="icon" object={cronJob} />,
-            <a
-              key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => filterByNamespace(cronJob.getNs()))}
-            >
-              {cronJob.getNs()}
-            </a>,
-            cronJob.isNeverRun() ? "never"  : cronJob.getSchedule(),
-            cronJob.getSuspendFlag(),
-            cronJobStore.getActiveJobsNum(cronJob),
-            cronJob.getLastScheduleTime(),
-            <KubeObjectAge key="age" object={cronJob} />,
-          ]}
-        />
-      </SiblingsInTabLayout>
-    );
-  }
-}
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_cronjobs"
+        className="CronJobs"
+        store={cronJobStore}
+        dependentStores={[eventStore]}
+        sortingCallbacks={{
+          [columnId.name]: cronJob => cronJob.getName(),
+          [columnId.namespace]: cronJob => cronJob.getNs(),
+          [columnId.suspend]: cronJob => cronJob.getSuspendFlag(),
+          [columnId.active]: cronJob => cronJobStore.getActiveJobsNum(cronJob),
+          [columnId.lastSchedule]: cronJob => (
+            cronJob.status?.lastScheduleTime
+              ? moment().diff(cronJob.status.lastScheduleTime)
+              : 0
+          ),
+          [columnId.age]: cronJob => -cronJob.getCreationTimestamp(),
+        }}
+        searchFilters={[
+          cronJob => cronJob.getSearchFields(),
+          cronJob => cronJob.getSchedule(),
+        ]}
+        renderHeaderTitle="Cron Jobs"
+        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: "Schedule", className: "schedule", id: columnId.schedule },
+          { title: "Suspend", className: "suspend", sortBy: columnId.suspend, id: columnId.suspend },
+          { title: "Active", className: "active", sortBy: columnId.active, id: columnId.active },
+          { title: "Last schedule", className: "last-schedule", sortBy: columnId.lastSchedule, id: columnId.lastSchedule },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+        ]}
+        renderTableContents={cronJob => [
+          cronJob.getName(),
+          <KubeObjectStatusIcon key="icon" object={cronJob} />,
+          <a
+            key="namespace"
+            className="filterNamespace"
+            onClick={prevDefault(() => filterByNamespace(cronJob.getNs()))}
+          >
+            {cronJob.getNs()}
+          </a>,
+          cronJob.isNeverRun() ? "never"  : cronJob.getSchedule(),
+          cronJob.getSuspendFlag(),
+          cronJobStore.getActiveJobsNum(cronJob),
+          cronJob.getLastScheduleTime(),
+          <KubeObjectAge key="age" object={cronJob} />,
+        ]}
+      />
+    </SiblingsInTabLayout>
+  );
+});

 export const CronJobs = withInjectables<Dependencies>(NonInjectedCronJobs, {
  getProps: (di, props) => ({
    ...props,
    cronJobStore: di.inject(cronJobStoreInjectable),
    eventStore: di.inject(eventStoreInjectable),
-    jobStore: di.inject(jobStoreInjectable),
    filterByNamespace: di.inject(filterByNamespaceInjectable),
  }),
 });