Add the ability to hide metrics from the UI

Signed-off-by: vshakirova <vshakirova@mirantis.com>

src/common/__tests__/user-store.test.ts

@@ -45,6 +45,19 @@ describe("user store tests", () => {
       expect(us.seenContexts.has("bar")).toBe(true);
     });
 
+    it("allows adding and listing hidden metrics", () => {
+      const us = UserStore.getInstance<UserStore>();
+
+      us.hiddenMetrics.add("foo");
+      expect(us.hiddenMetrics.size).toBe(1);
+
+      us.hiddenMetrics.add("foo");
+      us.hiddenMetrics.add("bar");
+      expect(us.hiddenMetrics.size).toBe(2);
+      expect(us.hiddenMetrics.has("foo")).toBe(true);
+      expect(us.hiddenMetrics.has("bar")).toBe(true);
+    });
+
     it("allows setting and getting preferences", () => {
       const us = UserStore.getInstance<UserStore>();
 

src/common/user-store.ts

@@ -10,12 +10,14 @@ import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
 import { appEventBus } from "./event-bus";
 import logger from "../main/logger";
 import path from "path";
+import { ResourceType } from "../renderer/components/+preferences/select-metrics-dialog";
 
 export interface UserStoreModel {
   kubeConfigPath: string;
   lastSeenAppVersion: string;
   seenContexts: string[];
   preferences: UserPreferences;
+  hiddenMetrics: string[];
 }
 
 export interface UserPreferences {
@@ -28,7 +30,8 @@ export interface UserPreferences {
   downloadBinariesPath?: string;
   kubectlBinariesPath?: string;
   openAtLogin?: boolean;
-  hiddenTableColumns?: Record<string, string[]>
+  hiddenTableColumns?: Record<string, string[]>;
+  hideMetrics?: boolean;
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {
@@ -47,6 +50,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
   @observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context
   @observable seenContexts = observable.set<string>();
   @observable newContexts = observable.set<string>();
+  @observable hiddenMetrics = observable.set<string>();
 
   @observable preferences: UserPreferences = {
     allowTelemetry: true,
@@ -56,6 +60,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
     downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
     openAtLogin: false,
     hiddenTableColumns: {},
+    hideMetrics: false,
   };
 
   protected async handleOnLoad() {
@@ -84,6 +89,10 @@ export class UserStore extends BaseStore<UserStoreModel> {
     return semver.gt(getAppVersion(), this.lastSeenAppVersion);
   }
 
+  isMetricHidden(resource: ResourceType) {
+    return this.preferences.hideMetrics || this.hiddenMetrics.has(resource);
+  }
+
   @action
   setHiddenTableColumns(tableId: string, names: Set<string> | string[]) {
     this.preferences.hiddenTableColumns[tableId] = Array.from(names);
@@ -145,7 +154,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
   @action
   protected async fromStore(data: Partial<UserStoreModel> = {}) {
-    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data;
+    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath, hiddenMetrics = [] } = data;
 
     if (lastSeenAppVersion) {
       this.lastSeenAppVersion = lastSeenAppVersion;
@@ -155,6 +164,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
       this.kubeConfigPath = kubeConfigPath;
     }
     this.seenContexts.replace(seenContexts);
+    this.hiddenMetrics.replace(hiddenMetrics);
     Object.assign(this.preferences, preferences);
   }
 
@@ -164,6 +174,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),
       preferences: this.preferences,
+      hiddenMetrics: Array.from(this.hiddenMetrics),
     };
 
     return toJS(model, {

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

@@ -13,6 +13,8 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import { clusterOverviewStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
+import { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 @observer
 export class ClusterOverview extends React.Component {
@@ -37,19 +39,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 = userStore.isMetricHidden(ResourceType.Cluster);
 
     return (
       <TabLayout>
         <div className="ClusterOverview">
-          {!isLoaded ? <Spinner center/> : (
-            <>
-              <ClusterMetrics/>
-              <ClusterPieCharts/>
-              <ClusterIssues/>
-            </>
-          )}
+          {this.renderClusterOverview(isLoaded, isMetricsHidden)}
         </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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 interface Props extends KubeObjectDetailsProps<Ingress> {
 }
@@ -106,17 +108,20 @@ export class IngressDetails extends React.Component<Props> {
       "Network",
       "Duration",
     ];
+    const isMetricHidden = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 interface Props extends KubeObjectDetailsProps<Node> {
 }
@@ -52,10 +54,11 @@ export class NodeDetails extends React.Component<Props> {
       "Disk",
       "Pods",
     ];
+    const isMetricHidden = userStore.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/+preferences/preferences.tsx

@@ -18,6 +18,7 @@ import { KubectlBinaries } from "./kubectl-binaries";
 import { appPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
 import { PageLayout } from "../layout/page-layout";
 import { AddHelmRepoDialog } from "./add-helm-repo-dialog";
+import { SelectMetricsDialog } from "./select-metrics-dialog";
 
 @observer
 export class Preferences extends React.Component {
@@ -191,6 +192,16 @@ export class Preferences extends React.Component {
           Does not affect cluster communications!
         </small>
 
+        <h2>Metrics availability</h2>
+        <div className="flex gaps">
+          <Button
+            primary
+            label="Select metrics"
+            onClick={SelectMetricsDialog.open}
+          />
+          <SelectMetricsDialog/>
+        </div>
+
         <div className="extensions flex column gaps">
           {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
             return (

src/renderer/components/+preferences/select-metrics-dialog.scss

@@ -0,0 +1,10 @@
+.SelectMetricsDialog {
+  .Select {
+    &__placeholder {
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}

src/renderer/components/+preferences/select-metrics-dialog.tsx

@@ -0,0 +1,120 @@
+import "./select-metrics-dialog.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { Dialog, DialogProps } from "../dialog/dialog";
+import { Checkbox } from "../checkbox/checkbox";
+import { Wizard, WizardStep } from "../wizard/wizard";
+import { userStore } from "../../../common/user-store";
+import { Select, SelectOption } from "../select/select";
+import { Icon } from "../icon/icon";
+import { components, PlaceholderProps } from "react-select";
+
+interface Props extends Partial<DialogProps> {
+}
+
+export enum ResourceType {
+  Cluster = "Cluster",
+  Node = "Node",
+  Pod = "Pod",
+  Deployment = "Deployment",
+  StatefulSet = "StatefulSet",
+  Container = "Container",
+  Ingress = "Ingress",
+  VolumeClaim = "VolumeClaim",
+  ReplicaSet = "ReplicaSet",
+  DaemonSet = "DaemonSet",
+}
+
+const Placeholder = observer((props: PlaceholderProps<any>) => {
+  const getPlaceholder = (): React.ReactNode => {
+    if (userStore.hiddenMetrics.size >= 1) {
+      return <>Metrics: {Array.from(userStore.hiddenMetrics).join(", ")}</>;
+    }
+    else {
+      return <>Select metrics...</>;
+    }
+  };
+
+  return (
+    <components.Placeholder {...props}>
+      {getPlaceholder()}
+    </components.Placeholder>
+  );
+});
+
+@observer
+export class SelectMetricsDialog extends React.Component<Props> {
+
+  @observable static isOpen = false;
+
+  static open() {
+    SelectMetricsDialog.isOpen = true;
+  }
+
+  static close() {
+    SelectMetricsDialog.isOpen = false;
+  }
+
+  onChange(values: ResourceType[]) {
+    values.map(value => {
+      if (userStore.hiddenMetrics.has(value)) {
+        userStore.hiddenMetrics.delete(value);
+      } else {
+        userStore.hiddenMetrics.add(value);
+      }
+    });
+  }
+
+  reset = () => {
+    userStore.hiddenMetrics.clear();
+    userStore.preferences.hideMetrics = false;
+  };
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const header = <h5>Select metrics to hide</h5>;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        isOpen={SelectMetricsDialog.isOpen}
+        close={SelectMetricsDialog.close}
+      >
+        <Wizard header={header} done={SelectMetricsDialog.close}>
+          <WizardStep contentClass="flow column" nextLabel={"Reset"} next={this.reset} prevLabel={"Close"}>
+            <div>
+              <Select
+                className={"SelectMetricsDialog"}
+                components={{ Placeholder }}
+                isMulti
+                closeMenuOnSelect={false}
+                isDisabled={userStore.preferences.hideMetrics}
+                options={Object.values(ResourceType)}
+                onChange={(options: SelectOption[]) => {
+                  this.onChange(options.map(option => option.value));
+                }}
+                formatOptionLabel={({ value: resource }: SelectOption) => {
+                  const isSelected = userStore.hiddenMetrics.has(resource);
+
+                  return (
+                    <div className="flex gaps align-center">
+                      <span>{resource}</span>
+                      {isSelected && <Icon small material="check" className="box right"/>}
+                    </div>
+                  );
+                }}
+              />
+            </div>
+            <Checkbox
+              label="Hide metrics for all resources"
+              value={userStore.preferences.hideMetrics}
+              onChange={v => userStore.preferences.hideMetrics = v}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}

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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
@@ -41,15 +43,18 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     const metricTabs = [
       "Disk"
     ];
+    const isMetricHidden = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 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 = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 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 = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 interface Props {
   pod: Pod;
@@ -62,13 +64,14 @@ export class PodDetailsContainer extends React.Component<Props> {
       "Memory",
       "Filesystem",
     ];
+    const isMetricHidden = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 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 = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 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 = userStore.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 { userStore } from "../../../common/user-store";
+import { ResourceType } from "../+preferences/select-metrics-dialog";
 
 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 = userStore.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 {