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

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;
@@ -21,4 +23,4 @@
       padding-top: 0;
     }
   }
-}
+}

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/> : (
-            <>
-              <ClusterMetrics/>
-              <ClusterPieCharts/>
-              <ClusterIssues/>
-            </>
-          )}
+          {this.renderClusterOverview(isLoaded, isMetricsHidden)}
         </div>
       </TabLayout>
     );