Introduce metrics details item for Ingress

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

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -6,56 +6,26 @@
 import "./ingress-details.scss";
 
 import React from "react";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
-import { makeObservable, observable, reaction } from "mobx";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { ILoadBalancerIngress } from "../../../common/k8s-api/endpoints";
 import { Ingress } from "../../../common/k8s-api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { IngressCharts } from "./ingress-charts";
-import { KubeObjectMeta } from "../kube-object-meta";
 import { computeRuleDeclarations } from "../../../common/k8s-api/endpoints/ingress.api";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import type { Logger } from "../../../common/logger";
-import logger from "../../../common/logger";
-import type { IngressMetricData, RequestIngressMetrics } from "../../../common/k8s-api/endpoints/metrics.api/request-ingress-metrics.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import requestIngressMetricsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-ingress-metrics.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
-import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
-import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
 
 export interface IngressDetailsProps extends KubeObjectDetailsProps<Ingress> {
 }
 
 interface Dependencies {
-  requestIngressMetrics: RequestIngressMetrics;
+  logger: Logger;
-  getActiveClusterEntity: GetActiveClusterEntity;
 }
 
 @observer
 class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & Dependencies> {
-  @observable metrics: IngressMetricData | null = null;
-
-  constructor(props: IngressDetailsProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  componentDidMount() {
-    disposeOnUnmount(this, [
-      reaction(() => this.props.object, () => {
-        this.metrics = null;
-      }),
-    ]);
-  }
-
-  loadMetrics = async () => {
-    const { object: ingress, requestIngressMetrics } = this.props;
-
-    this.metrics = await requestIngressMetrics(ingress.getName(), ingress.getNs());
-  };
-
   renderPaths(ingress: Ingress) {
     return ingress.getRules()
       .map((rule, index) => (
@@ -126,7 +96,7 @@ class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & De
   }
 
   render() {
-    const { object: ingress, getActiveClusterEntity } = this.props;
+    const { object: ingress, logger } = this.props;
 
     if (!ingress) {
       return null;
@@ -138,25 +108,10 @@ class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & De
       return null;
     }
 
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Ingress);
     const port = ingress.getServiceNamePort();
 
     return (
       <div className="IngressDetails">
-        {!isMetricHidden && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={[
-              "Network",
-              "Duration",
-            ]}
-            object={ingress}
-            metrics={this.metrics}
-          >
-            <IngressCharts/>
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={ingress}/>
         <DrawerItem name="Ports">
           {ingress.getPorts()}
         </DrawerItem>
@@ -183,7 +138,6 @@ class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & De
 export const IngressDetails = withInjectables<Dependencies, IngressDetailsProps>(NonInjectedIngressDetails, {
   getProps: (di, props) => ({
     ...props,
-    requestIngressMetrics: di.inject(requestIngressMetricsInjectable),
+    logger: di.inject(loggerInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
   }),
 });

src/renderer/components/+network-ingresses/metrics-details-component.injectable.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { asyncComputed } from "@ogre-tools/injectable-react";
+import { computed } from "mobx";
+import { now } from "mobx-utils";
+import React from "react";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import type { Ingress } from "../../../common/k8s-api/endpoints";
+import requestIngressMetricsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-ingress-metrics.injectable";
+import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.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 { IngressCharts } from "./ingress-charts";
+
+const ingressMetricsDetailsComponentInjectable = getInjectable({
+  id: "ingress-metrics-details-component",
+  instantiate: (di) => {
+    const getActiveClusterEntity = di.inject(getActiveClusterEntityInjectable);
+    const requestIngressMetrics = di.inject(requestIngressMetricsInjectable);
+
+    return {
+      Component: ({ object }: KubeObjectDetailsProps<Ingress>) => (
+        <ResourceMetrics
+          tabs={[
+            "Network",
+            "Duration",
+          ]}
+          object={object}
+          metrics={asyncComputed(async () => {
+            now(60 * 1000); // Update every minute
+
+            return requestIngressMetrics(object.getName(), object.getNs());
+          })}
+        >
+          <IngressCharts />
+        </ResourceMetrics>
+      ),
+      enabled: computed(() => !getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Ingress)),
+      orderNumber: -1,
+    };
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default ingressMetricsDetailsComponentInjectable;