Add the ability to hide metrics from the UI (#2036)

src/common/cluster-store.ts

@@ -15,6 +15,7 @@ import { handleRequest, requestMain, subscribeToBroadcast, unsubscribeAllFromBro
 import _ from "lodash";
 import move from "array-move";
 import type { WorkspaceId } from "./workspace-store";
+import { ResourceType } from "../renderer/components/+cluster-settings/components/cluster-metrics-setting";
 
 export interface ClusterIconUpload {
   clusterId: string;
@@ -34,7 +35,7 @@ export type ClusterPrometheusMetadata = {
 
 export interface ClusterStoreModel {
   activeCluster?: ClusterId; // last opened cluster
-  clusters?: ClusterModel[]
+  clusters?: ClusterModel[];
 }
 
 export type ClusterId = string;
@@ -76,6 +77,7 @@ export interface ClusterPreferences extends ClusterPrometheusPreferences{
   iconOrder?: number;
   icon?: string;
   httpsProxy?: string;
+  hiddenMetrics?: string[];
 }
 
 export interface ClusterPrometheusPreferences {
@@ -211,6 +213,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     return this.activeCluster === id;
   }
 
+  isMetricHidden(resource: ResourceType) {
+    return Boolean(this.active?.preferences.hiddenMetrics?.includes(resource));
+  }
+
   @action
   setActive(id: ClusterId) {
     const clusterId = this.clusters.has(id) ? id : null;

src/common/user-store.ts

@@ -29,7 +29,7 @@ export interface UserPreferences {
   downloadBinariesPath?: string;
   kubectlBinariesPath?: string;
   openAtLogin?: boolean;
-  hiddenTableColumns?: Record<string, string[]>
+  hiddenTableColumns?: Record<string, string[]>;
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {

src/renderer/components/+cluster-settings/components/cluster-metrics-setting.scss

@@ -0,0 +1,12 @@
+.MetricsSelect {
+  $spacing: $padding;
+  --flex-gap: #{$spacing};
+
+  .Badge {
+    margin-top: $spacing;
+  }
+
+  .Button {
+    margin-top: $spacing;
+  }
+}

src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx

@@ -0,0 +1,118 @@
+import "./cluster-metrics-setting.scss";
+
+import React from "react";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Select, SelectOption } from "../../select/select";
+import { Icon } from "../../icon/icon";
+import { Button } from "../../button/button";
+import { SubTitle } from "../../layout/sub-title";
+import { Cluster } from "../../../../main/cluster";
+import { observable, reaction } from "mobx";
+
+interface Props {
+  cluster: Cluster;
+}
+
+export enum ResourceType {
+  Cluster = "Cluster",
+  Node = "Node",
+  Pod = "Pod",
+  Deployment = "Deployment",
+  StatefulSet = "StatefulSet",
+  Container = "Container",
+  Ingress = "Ingress",
+  VolumeClaim = "VolumeClaim",
+  ReplicaSet = "ReplicaSet",
+  DaemonSet = "DaemonSet",
+}
+
+@observer
+export class ClusterMetricsSetting extends React.Component<Props> {
+  @observable hiddenMetrics = observable.set<string>();
+
+  componentDidMount() {
+    this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
+
+    disposeOnUnmount(this, [
+      reaction(() => this.props.cluster.preferences.hiddenMetrics, () => {
+        this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
+      }),
+    ]);
+  }
+
+  save = () => {
+    this.props.cluster.preferences.hiddenMetrics = Array.from(this.hiddenMetrics);
+  };
+
+  onChangeSelect = (values: SelectOption<ResourceType>[]) => {
+    for (const { value } of values) {
+      if (this.hiddenMetrics.has(value)) {
+        this.hiddenMetrics.delete(value);
+      } else {
+        this.hiddenMetrics.add(value);
+      }
+    }
+    this.save();
+  };
+
+  onChangeButton = () => {
+    Object.keys(ResourceType).map(value =>
+      this.hiddenMetrics.add(value)
+    );
+    this.save();
+  };
+
+  reset = () => {
+    this.hiddenMetrics.clear();
+    this.save();
+  };
+
+  formatOptionLabel = ({ value: resource }: SelectOption<ResourceType>) => (
+    <div className="flex gaps align-center">
+      <span>{resource}</span>
+      {this.hiddenMetrics.has(resource) && <Icon smallest material="check" className="box right" />}
+    </div>
+  );
+
+  renderMetricsSelect() {
+
+    return (
+      <>
+        <Select
+          className="box grow"
+          placeholder="Select metrics to hide..."
+          isMulti
+          isSearchable
+          onMenuClose={this.save}
+          closeMenuOnSelect={false}
+          controlShouldRenderValue={false}
+          options={Object.values(ResourceType)}
+          onChange={this.onChangeSelect}
+          formatOptionLabel={this.formatOptionLabel}
+        />
+        <Button
+          primary
+          label="Hide all metrics"
+          onClick={this.onChangeButton}
+        />
+        <Button
+          primary
+          label="Reset"
+          onClick={this.reset}
+        />
+      </>
+    );
+  }
+
+  render() {
+
+    return (
+      <div className="MetricsSelect">
+        <SubTitle title={"Hide metrics from the UI"}/>
+        <div className="flex gaps">
+          {this.renderMetricsSelect()}
+        </div>
+      </div>
+    );
+  }
+}

src/renderer/components/+cluster-settings/components/show-metrics.tsx

@@ -0,0 +1,63 @@
+import "./cluster-metrics-setting.scss";
+
+import React from "react";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Cluster } from "../../../../main/cluster";
+import { observable, reaction } from "mobx";
+import { Badge } from "../../badge/badge";
+import { Icon } from "../../icon/icon";
+
+interface Props {
+  cluster: Cluster;
+}
+
+@observer
+export class ShowMetricsSetting extends React.Component<Props> {
+  @observable hiddenMetrics = observable.set<string>();
+
+  componentDidMount() {
+    this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
+
+    disposeOnUnmount(this, [
+      reaction(() => this.props.cluster.preferences.hiddenMetrics, () => {
+        this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
+      }),
+    ]);
+  }
+
+  removeMetric(metric: string) {
+    this.hiddenMetrics.delete(metric);
+    this.props.cluster.preferences.hiddenMetrics = Array.from(this.hiddenMetrics);
+  }
+
+  renderMetrics() {
+
+    return (
+
+      Array.from(this.hiddenMetrics).map(name => {
+        const tooltipId = `${name}`;
+
+        return (
+          <Badge key={name}>
+            <span id={tooltipId}>{name}</span>
+            <Icon
+              smallest
+              material="clear"
+              onClick={() => this.removeMetric(name)}
+              tooltip="Remove"
+            />
+          </Badge>
+        );
+      })
+    );
+  }
+
+  render() {
+
+    return (
+      <div className="MetricsSelect flex wrap gaps">
+        {this.renderMetrics()}
+      </div>
+    );
+  }
+}

src/renderer/components/+cluster-settings/general.tsx

@@ -7,6 +7,8 @@ import { ClusterProxySetting } from "./components/cluster-proxy-setting";
 import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
 import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
 import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces";
+import { ClusterMetricsSetting } from "./components/cluster-metrics-setting";
+import { ShowMetricsSetting } from "./components/show-metrics";
 
 interface Props {
   cluster: Cluster;
@@ -23,6 +25,8 @@ export class General extends React.Component<Props> {
       <ClusterPrometheusSetting cluster={this.props.cluster} />
       <ClusterHomeDirSetting cluster={this.props.cluster} />
       <ClusterAccessibleNamespaces cluster={this.props.cluster} />
+      <ClusterMetricsSetting cluster={this.props.cluster}/>
+      <ShowMetricsSetting cluster={this.props.cluster}/>
     </div>;
   }
 }

src/renderer/components/+cluster/cluster-issues.scss

@@ -53,3 +53,7 @@
     }
   }
 }
+
+.OnlyClusterIssues {
+  grid-row: row1-start / row2-end;
+}

src/renderer/components/+cluster/cluster-overview.scss

@@ -7,7 +7,9 @@
   display: grid;
   grid-gap: $gridGap;
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows:
+          [row1-start] 1fr
+          [row2-start] 1fr;
 
   @include media(">1600px") {
     grid-template-columns: 1fr 1fr;

src/renderer/components/+cluster/cluster-overview.tsx

@@ -5,7 +5,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
-import { getHostedCluster } from "../../../common/cluster-store";
+import { clusterStore, getHostedCluster } from "../../../common/cluster-store";
 import { interval } from "../../utils";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
@@ -13,6 +13,7 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import { clusterOverviewStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
 
 @observer
 export class ClusterOverview extends React.Component {
@@ -37,19 +38,40 @@ export class ClusterOverview extends React.Component {
     this.metricPoller.stop();
   }
 
+  renderMetrics(isMetricsHidden: boolean) {
+    if (isMetricsHidden) {
+      return null;
+    }
+
+    return (
+      <>
+        <ClusterMetrics/>
+        <ClusterPieCharts/>
+      </>
+    );
+  }
+
+  renderClusterOverview(isLoaded: boolean, isMetricsHidden: boolean) {
+    if (!isLoaded) {
+      return <Spinner center/>;
+    }
+
+    return (
+      <>
+        {this.renderMetrics(isMetricsHidden)}
+        <ClusterIssues className={isMetricsHidden ? "OnlyClusterIssues" : ""}/>
+      </>
+    );
+  }
+
   render() {
     const isLoaded = nodesStore.isLoaded && podsStore.isLoaded;
+    const isMetricsHidden = clusterStore.isMetricHidden(ResourceType.Cluster);
 
     return (
       <TabLayout>
         <div className="ClusterOverview">
-          {!isLoaded ? <Spinner center/> : (
+          {this.renderClusterOverview(isLoaded, isMetricsHidden)}
-            <>
-              <ClusterMetrics/>
-              <ClusterPieCharts/>
-              <ClusterIssues/>
-            </>
-          )}
         </div>
       </TabLayout>
     );

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

@@ -4,7 +4,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { Ingress, ILoadBalancerIngress } from "../../api/endpoints";
+import { ILoadBalancerIngress, Ingress } from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { ingressStore } from "./ingress.store";
@@ -14,6 +14,8 @@ import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 import { getBackendServiceNamePort } from "../../api/endpoints/ingress.api";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Ingress> {
 }
@@ -106,17 +108,20 @@ export class IngressDetails extends React.Component<Props> {
       "Network",
       "Duration",
     ];
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.Ingress);
 
     const { serviceName, servicePort } = ingress.getServiceNamePort();
 
     return (
       <div className="IngressDetails">
+        {!isMetricHidden && (
           <ResourceMetrics
             loader={() => ingressStore.loadMetrics(ingress)}
             tabs={metricTabs} object={ingress} params={{ metrics }}
           >
             <IngressCharts/>
           </ResourceMetrics>
+        )}
         <KubeObjectMeta object={ingress}/>
         <DrawerItem name="Ports">
           {ingress.getPorts()}

src/renderer/components/+nodes/node-details.tsx

@@ -17,6 +17,8 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Node> {
 }
@@ -52,10 +54,11 @@ export class NodeDetails extends React.Component<Props> {
       "Disk",
       "Pods",
     ];
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.Node);
 
     return (
       <div className="NodeDetails">
-        {podsStore.isLoaded && (
+        {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
             loader={() => nodesStore.loadMetrics(node.getName())}
             tabs={metricTabs} object={node} params={{ metrics }}

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -14,6 +14,8 @@ import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import { getDetailsUrl, KubeObjectDetailsProps, KubeObjectMeta } from "../kube-object";
 import { PersistentVolumeClaim } from "../../api/endpoints";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
@@ -41,15 +43,18 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     const metricTabs = [
       "Disk"
     ];
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.VolumeClaim);
 
     return (
       <div className="PersistentVolumeClaimDetails">
+        {!isMetricHidden && (
           <ResourceMetrics
             loader={() => volumeClaimStore.loadMetrics(volumeClaim)}
             tabs={metricTabs} object={volumeClaim} params={{ metrics }}
           >
             <VolumeClaimDiskChart/>
           </ResourceMetrics>
+        )}
         <KubeObjectMeta object={volumeClaim}/>
         <DrawerItem name="Access Modes">
           {accessModes.join(", ")}

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -18,6 +18,8 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<DaemonSet> {
 }
@@ -47,10 +49,11 @@ export class DaemonSetDetails extends React.Component<Props> {
     const nodeSelector = daemonSet.getNodeSelectors();
     const childPods = daemonSetStore.getChildPods(daemonSet);
     const metrics = daemonSetStore.metrics;
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.DaemonSet);
 
     return (
       <div className="DaemonSetDetails">
-        {podsStore.isLoaded && (
+        {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
             loader={() => daemonSetStore.loadMetrics(daemonSet)}
             tabs={podMetricTabs} object={daemonSet} params={{ metrics }}

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -19,6 +19,8 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {
 }
@@ -47,10 +49,11 @@ export class DeploymentDetails extends React.Component<Props> {
     const selectors = deployment.getSelectors();
     const childPods = deploymentStore.getChildPods(deployment);
     const metrics = deploymentStore.metrics;
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.Deployment);
 
     return (
       <div className="DeploymentDetails">
-        {podsStore.isLoaded && (
+        {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
             loader={() => deploymentStore.loadMetrics(deployment)}
             tabs={podMetricTabs} object={deployment} params={{ metrics }}

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -11,6 +11,8 @@ import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props {
   pod: Pod;
@@ -63,13 +65,14 @@ export class PodDetailsContainer extends React.Component<Props> {
       "Memory",
       "Filesystem",
     ];
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.Container);
 
     return (
       <div className="PodDetailsContainer">
         <div className="pod-container-title">
           <StatusBrick className={cssNames(state, { ready })}/>{name}
         </div>
-        {!isInitContainer &&
+        {!isMetricHidden && !isInitContainer &&
         <ResourceMetrics tabs={metricTabs} params={{ metrics }}>
           <ContainerCharts/>
         </ResourceMetrics>

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -22,6 +22,8 @@ import { getItemMetrics } from "../../api/endpoints/metrics.api";
 import { PodCharts, podMetricTabs } from "./pod-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Pod> {
 }
@@ -66,15 +68,18 @@ export class PodDetails extends React.Component<Props> {
     const nodeSelector = pod.getNodeSelectors();
     const volumes = pod.getVolumes();
     const metrics = podsStore.metrics;
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.Pod);
 
     return (
       <div className="PodDetails">
+        {!isMetricHidden && (
           <ResourceMetrics
             loader={() => podsStore.loadMetrics(pod)}
             tabs={podMetricTabs} object={pod} params={{ metrics }}
           >
             <PodCharts/>
           </ResourceMetrics>
+        )}
         <KubeObjectMeta object={pod}/>
         <DrawerItem name="Status">
           <span className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</span>

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -17,6 +17,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<ReplicaSet> {
 }
@@ -47,10 +49,11 @@ export class ReplicaSetDetails extends React.Component<Props> {
     const nodeSelector = replicaSet.getNodeSelectors();
     const images = replicaSet.getImages();
     const childPods = replicaSetStore.getChildPods(replicaSet);
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.ReplicaSet);
 
     return (
       <div className="ReplicaSetDetails">
-        {podsStore.isLoaded && (
+        {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
             loader={() => replicaSetStore.loadMetrics(replicaSet)}
             tabs={podMetricTabs} object={replicaSet} params={{ metrics }}

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -18,6 +18,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<StatefulSet> {
 }
@@ -46,10 +48,11 @@ export class StatefulSetDetails extends React.Component<Props> {
     const nodeSelector = statefulSet.getNodeSelectors();
     const childPods = statefulSetStore.getChildPods(statefulSet);
     const metrics = statefulSetStore.metrics;
+    const isMetricHidden = clusterStore.isMetricHidden(ResourceType.StatefulSet);
 
     return (
       <div className="StatefulSetDetails">
-        {podsStore.isLoaded && (
+        {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
             loader={() => statefulSetStore.loadMetrics(statefulSet)}
             tabs={podMetricTabs} object={statefulSet} params={{ metrics }}

src/renderer/components/chart/pie-chart.scss

@@ -1,6 +1,7 @@
 .PieChart {
   .chart-container {
     width: 120px;
+    min-height: 150px;
   }
 
   .legend {