Fix not being able to switch metrics if none are available

- Previously if there were no metrics for the current selected options
  then you couldn't switch options.

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

src/renderer/components/+cluster/cluster-metric-switchers.tsx

@@ -13,6 +13,7 @@ import { MetricNodeRole, MetricType } from "./cluster-overview-store/cluster-ove
 import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import nodeStoreInjectable from "../+nodes/store.injectable";
+import { normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
 
 interface Dependencies {
   clusterOverviewStore: ClusterOverviewStore;
@@ -24,32 +25,50 @@ const NonInjectedClusterMetricSwitchers = observer(({
   nodeStore,
 }: Dependencies) => {
   const { masterNodes, workerNodes } = nodeStore;
-  const metricsValues = clusterOverviewStore.getMetricsValues(clusterOverviewStore.metrics);
-  const disableRoles = !masterNodes.length || !workerNodes.length;
-  const disableMetrics = !metricsValues.length;
+  const { cpuUsage, memoryUsage } = clusterOverviewStore.metrics;
+  const hasMasterNodes = masterNodes.length > 0;
+  const hasWorkerNodes = workerNodes.length > 0;
+  const hasCpuMetrics = normalizeMetrics(cpuUsage).data.result[0].values.length > 0;
+  const hasMemoryMetrics = normalizeMetrics(memoryUsage).data.result[0].values.length > 0;
 
   return (
     <div className="flex gaps" style={{ marginBottom: "calc(var(--margin) * 2)" }}>
       <div className="box grow">
         <RadioGroup
           asButtons
-          className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
+          className={cssNames("RadioGroup flex gaps")}
           value={clusterOverviewStore.metricNodeRole}
           onChange={metric => clusterOverviewStore.metricNodeRole = metric}
         >
-          <Radio label="Master" value={MetricNodeRole.MASTER}/>
-          <Radio label="Worker" value={MetricNodeRole.WORKER}/>
+          <Radio
+            label="Master"
+            value={MetricNodeRole.MASTER}
+            disabled={!hasMasterNodes}
+          />
+          <Radio
+            label="Worker"
+            value={MetricNodeRole.WORKER}
+            disabled={!hasWorkerNodes}
+          />
         </RadioGroup>
       </div>
       <div className="box grow" style={{ textAlign: "right" }}>
         <RadioGroup
           asButtons
-          className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
+          className={cssNames("RadioGroup flex gaps")}
           value={clusterOverviewStore.metricType}
           onChange={value => clusterOverviewStore.metricType = value}
         >
-          <Radio label="CPU" value={MetricType.CPU}/>
-          <Radio label="Memory" value={MetricType.MEMORY}/>
+          <Radio
+            label="CPU"
+            value={MetricType.CPU}
+            disabled={!hasCpuMetrics}
+          />
+          <Radio
+            label="Memory"
+            value={MetricType.MEMORY}
+            disabled={!hasMemoryMetrics}
+          />
         </RadioGroup>
       </div>
     </div>

src/renderer/components/+cluster/cluster-metrics.module.scss

@@ -17,7 +17,6 @@
   }
 
   .empty {
-    margin-top: -45px;
     text-align: center;
   }
 }

src/renderer/components/+cluster/cluster-pie-charts.module.scss

@@ -8,6 +8,7 @@
   min-height: 280px;
   text-align: center;
   padding: calc(var(--padding) * 2);
+  padding-top: 45px;
 }
 
 .chart {

src/renderer/components/radio/radio.scss

@@ -21,6 +21,11 @@
       white-space: nowrap;
       transition: 250ms color;
 
+      &.disabled {
+        opacity: 0.6;
+        pointer-events: none;
+      }
+
       &:not(.checked):not(.disabled) {
         cursor: pointer;
         &:not(:active):focus {

src/renderer/components/radio/radio.tsx

@@ -85,6 +85,7 @@ export function Radio<T>({
         type="radio"
         checked={checked}
         onChange={() => ctx.onSelect(value)}
+        disabled={disabled || ctx.disabled}
       />
       <i className="tick flex center"/>
       {label ? <div className="label">{label}</div> : null}