Metrics for namespaces and jobs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/main/cluster.ts

@@ -62,6 +62,8 @@ export enum ClusterMetricsResourceType {
   VolumeClaim = "VolumeClaim",
   ReplicaSet = "ReplicaSet",
   DaemonSet = "DaemonSet",
+  Job = "Job",
+  Namespace = "Namespace"
 }
 
 export type ClusterRefreshOptions = {

src/renderer/components/+namespaces/namespace-details.tsx

@@ -22,28 +22,44 @@
 import "./namespace-details.scss";
 
 import React from "react";
-import { computed, makeObservable } from "mobx";
+import { computed, makeObservable, observable, reaction } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
-import type { Namespace } from "../../api/endpoints";
+import { getMetricsForNamespace, IPodMetrics, Namespace } from "../../api/endpoints";
 import { getDetailsUrl, KubeObjectDetailsProps } from "../kube-object";
 import { Link } from "react-router-dom";
 import { Spinner } from "../spinner";
 import { resourceQuotaStore } from "../+config-resource-quotas/resource-quotas.store";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { limitRangeStore } from "../+config-limit-ranges/limit-ranges.store";
+import { ResourceMetrics } from "../resource-metrics";
+import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 
 interface Props extends KubeObjectDetailsProps<Namespace> {
 }
 
 @observer
 export class NamespaceDetails extends React.Component<Props> {
+  @observable metrics: IPodMetrics = null;
+
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
+  @disposeOnUnmount
+  clean = reaction(() => this.props.object, () => {
+    this.metrics = null;
+  });
+
+  componentDidMount() {
+    resourceQuotaStore.reloadAll();
+    limitRangeStore.reloadAll();
+  }
+
   @computed get quotas() {
     const namespace = this.props.object.getName();
 
@@ -56,9 +72,8 @@ export class NamespaceDetails extends React.Component<Props> {
     return limitRangeStore.getAllByNs(namespace);
   }
 
-  componentDidMount() {
+  async loadMetrics() {
-    resourceQuotaStore.reloadAll();
+    this.metrics = await getMetricsForNamespace(this.props.object.getName(), "");
-    limitRangeStore.reloadAll();
   }
 
   render() {
@@ -66,9 +81,18 @@ export class NamespaceDetails extends React.Component<Props> {
 
     if (!namespace) return null;
     const status = namespace.getStatus();
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Namespace);
 
     return (
       <div className="NamespaceDetails">
+        {!isMetricHidden && (
+          <ResourceMetrics
+            loader={this.loadMetrics}
+            tabs={podMetricTabs} object={namespace} params={{ metrics: this.metrics }}
+          >
+            <PodCharts />
+          </ResourceMetrics>
+        )}
         <KubeObjectMeta object={namespace}/>
 
         <DrawerItem name="Status">

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

@@ -33,20 +33,33 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import { getDetailsUrl, KubeObjectDetailsProps } from "../kube-object";
-import type { Job } from "../../api/endpoints";
+import { getMetricsForJobs, IPodMetrics, Job } from "../../api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { lookupApiLink } from "../../api/kube-api";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { observable } from "mobx";
+import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ResourceMetrics } from "../resource-metrics";
 
 interface Props extends KubeObjectDetailsProps<Job> {
 }
 
 @observer
 export class JobDetails extends React.Component<Props> {
+  @observable metrics: IPodMetrics = null;
+
   async componentDidMount() {
     podsStore.reloadAll();
   }
 
+  async loadMetrics() {
+    const { object: job } = this.props;
+
+    this.metrics = await getMetricsForJobs([job], job.getNs(), "");
+  }
+
   render() {
     const { object: job } = this.props;
 
@@ -57,9 +70,18 @@ export class JobDetails extends React.Component<Props> {
     const childPods = jobStore.getChildPods(job);
     const ownerRefs = job.getOwnerRefs();
     const condition = job.getCondition();
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Job);
 
     return (
       <div className="JobDetails">
+        {!isMetricHidden && (
+          <ResourceMetrics
+            loader={this.loadMetrics}
+            tabs={podMetricTabs} object={job} params={{ metrics: this.metrics }}
+          >
+            <PodCharts />
+          </ResourceMetrics>
+        )}
         <KubeObjectMeta object={job}/>
         <DrawerItem name="Selector" labelsOnly>
           {