Refactor Nodes view metrics renderer

- Use a common base function to simplify logic

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

src/common/k8s-api/endpoints/nodes.api.ts

@@ -95,17 +95,17 @@ export interface Node {
   status: {
     capacity?: {
       cpu: string;
-      ["ephemeral-storage"]: string;
+      "ephemeral-storage": string;
-      ["hugepages-1Gi"]: string;
+      "hugepages-1Gi": string;
-      ["hugepages-2Mi"]: string;
+      "hugepages-2Mi": string;
       memory: string;
       pods: string;
     };
     allocatable?: {
       cpu: string;
-      ["ephemeral-storage"]: string;
+      "ephemeral-storage": string;
-      ["hugepages-1Gi"]: string;
+      "hugepages-1Gi": string;
-      ["hugepages-2Mi"]: string;
+      "hugepages-2Mi": string;
       memory: string;
       pods: string;
     };

src/renderer/components/+nodes/nodes.tsx

@@ -56,6 +56,13 @@ enum columnId {
 interface Props extends RouteComponentProps<NodesRouteParams> {
 }
 
+interface UsageArgs {
+  node: Node;
+  title: string;
+  metricNames: [string, string];
+  secondFormater: (metrics: [number, number]) => string;
+}
+
 @observer
 export class Nodes extends React.Component<Props> {
   @observable.ref metrics: Partial<INodeMetrics> = {};
@@ -98,74 +105,60 @@ export class Nodes extends React.Component<Props> {
     });
   }
 
-  renderCpuUsage(node: Node) {
+  private renderUsage({ node, title, metricNames, secondFormater }: UsageArgs) {
-    const metrics = this.getLastMetricValues(node, ["cpuUsage", "cpuCapacity"]);
+    const metrics = this.getLastMetricValues(node, metricNames);
 
-    if (!metrics || !metrics[1]) return <LineProgress value={0}/>;
+    if (!metrics || metrics.length < 2) {
-    const usage = metrics[0];
+      return <LineProgress value={0}/>;
-    const cores = metrics[1];
+    }
-    const cpuUsagePercent = Math.ceil(usage * 100) / cores;
+
-    const cpuUsagePercentLabel: String = cpuUsagePercent % 1 === 0
+    const [usage, capacity] = metrics;
-      ? cpuUsagePercent.toString()
-      : cpuUsagePercent.toFixed(2);
 
     return (
       <LineProgress
-        max={cores}
+        max={capacity}
         value={usage}
         tooltip={{
           preferredPositions: TooltipPosition.BOTTOM,
-          children: `CPU: ${cpuUsagePercentLabel}\%, cores: ${cores}`,
+          children: `${title}: ${(usage * 100 / capacity).toFixed(2)}%, ${secondFormater([usage, capacity])}`,
         }}
       />
     );
   }
 
+  renderCpuUsage(node: Node) {
+    return this.renderUsage({
+      node,
+      title: "CPU",
+      metricNames: ["cpuUsage", "cpuCapacity"],
+      secondFormater: ([, cap]) => `cores: ${cap}`,
+    });
+  }
+
   renderMemoryUsage(node: Node) {
-    const metrics = this.getLastMetricValues(node, ["workloadMemoryUsage", "memoryAllocatableCapacity"]);
+    return this.renderUsage({
-
+      node,
-    if (!metrics || !metrics[1]) return <LineProgress value={0}/>;
+      title: "Memory",
-    const usage = metrics[0];
+      metricNames: ["workloadMemoryUsage", "memoryAllocatableCapacity"],
-    const capacity = metrics[1];
+      secondFormater: ([usage]) => bytesToUnits(usage, 3),
-
+    });
-    return (
-      <LineProgress
-        max={capacity}
-        value={usage}
-        tooltip={{
-          preferredPositions: TooltipPosition.BOTTOM,
-          children: `Memory: ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`,
-        }}
-      />
-    );
   }
 
   renderDiskUsage(node: Node): any {
-    const metrics = this.getLastMetricValues(node, ["fsUsage", "fsSize"]);
+    return this.renderUsage({
-
+      node,
-    if (!metrics || !metrics[1]) return <LineProgress value={0}/>;
+      title: "Disk",
-    const usage = metrics[0];
+      metricNames: ["fsUsage", "fsSize"],
-    const capacity = metrics[1];
+      secondFormater: ([usage]) => bytesToUnits(usage, 3),
-
+    });
-    return (
-      <LineProgress
-        max={capacity}
-        value={usage}
-        tooltip={{
-          preferredPositions: TooltipPosition.BOTTOM,
-          children: `Disk: ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`,
-        }}
-      />
-    );
   }
 
   renderConditions(node: Node) {
     if (!node.status.conditions) {
       return null;
     }
-    const conditions = node.getActiveConditions();
 
-    return conditions.map(condition => {
+    return node.getActiveConditions().map(condition => {
       const { type } = condition;
       const tooltipId = `node-${node.getName()}-condition-${type}`;
 
@@ -180,7 +173,8 @@ export class Nodes extends React.Component<Props> {
               </div>,
             )}
           </Tooltip>
-        </div>);
+        </div>
+      );
     });
   }