Fix not being able to switch metrics if none are available (#5430)

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -6,13 +6,13 @@
 import React from "react";
 import { observer } from "mobx-react";
 import type { NodeStore } from "../+nodes/store";
-import { cssNames } from "../../utils";
 import { Radio, RadioGroup } from "../radio";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
 import { MetricNodeRole, MetricType } from "./cluster-overview-store/cluster-overview-store";
 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 +24,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="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="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,7 @@
   }
 
   .empty {
-    margin-top: -45px;
     text-align: center;
+    padding-bottom: 45px;
   }
 }

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}