From 57e4e29a16007b9df44e1422dbcea9c10076f36d Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 2 Aug 2022 07:05:15 -0700
Subject: [PATCH] Fix not being able to switch metrics if none are available
 (#5430)

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+cluster/cluster-metric-switchers.tsx     | 38 ++++++++++++++-----
 .../+cluster/cluster-metrics.module.scss      |  2 +-
 src/renderer/components/radio/radio.scss      |  5 +++
 src/renderer/components/radio/radio.tsx       |  1 +
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/+cluster/cluster-metric-switchers.tsx b/src/renderer/components/+cluster/cluster-metric-switchers.tsx
index 32c3dce572..716084026d 100644
--- a/src/renderer/components/+cluster/cluster-metric-switchers.tsx
+++ b/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>
diff --git a/src/renderer/components/+cluster/cluster-metrics.module.scss b/src/renderer/components/+cluster/cluster-metrics.module.scss
index 06bba97b0d..8f45b01913 100644
--- a/src/renderer/components/+cluster/cluster-metrics.module.scss
+++ b/src/renderer/components/+cluster/cluster-metrics.module.scss
@@ -17,7 +17,7 @@
   }
 
   .empty {
-    margin-top: -45px;
     text-align: center;
+    padding-bottom: 45px;
   }
 }
diff --git a/src/renderer/components/radio/radio.scss b/src/renderer/components/radio/radio.scss
index 21d0e8f81b..c74c9f5058 100644
--- a/src/renderer/components/radio/radio.scss
+++ b/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 {
diff --git a/src/renderer/components/radio/radio.tsx b/src/renderer/components/radio/radio.tsx
index 554b54de21..bcfd43de9a 100644
--- a/src/renderer/components/radio/radio.tsx
+++ b/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}