work

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

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

@@ -24,6 +24,7 @@
 import moment from "moment";
 import { apiBase } from "../index";
 import type { IMetricsQuery } from "../../../main/routes/metrics-route";
+import { iter, toJS } from "../../utils";
 
 export interface IMetrics {
   status: string;
@@ -36,7 +37,7 @@ export interface IMetrics {
 export interface IMetricsResult {
   metric: {
     [name: string]: string;
-    instance: string;
+    instance?: string;
     node?: string;
     pod?: string;
     kubernetes?: string;
@@ -104,7 +105,7 @@ export function normalizeMetrics(metrics: IMetrics, frames = 60): IMetrics {
         result: [{
           metric: {},
           values: []
-        } as IMetricsResult],
+        }],
       },
       status: "",
     };
@@ -112,18 +113,23 @@ export function normalizeMetrics(metrics: IMetrics, frames = 60): IMetrics {
 
   const { result } = metrics.data;
 
+  console.log(toJS(result));
+
   if (result.length) {
     if (frames > 0) {
       // fill the gaps
-      result.forEach(res => {
+      for (const res of result) {
-        if (!res.values || !res.values.length) return;
+        if (!res.values || !res.values.length) {
+          continue;
+        }
 
-        let now = moment().startOf("minute").subtract(1, "minute").unix();
+        const now = moment().startOf("minute").subtract(1, "minute").unix();
-        let timestamp = res.values[0][0];
-
-        while (timestamp <= now) {
-          timestamp = moment.unix(timestamp).add(1, "minute").unix();
 
+        for (
+          let timestamp = res.values[0][0]; 
+          timestamp <= now; 
+          timestamp = moment.unix(timestamp).add(1, "minute").unix()
+        ) {
           if (!res.values.find((value) => value[0] === timestamp)) {
             res.values.push([timestamp, "0"]);
           }
@@ -135,58 +141,67 @@ export function normalizeMetrics(metrics: IMetrics, frames = 60): IMetrics {
           if (!res.values.find((value) => value[0] === timestamp)) {
             res.values.unshift([timestamp, "0"]);
           }
-          now = timestamp;
         }
-      });
+      }
     }
-  }
+  } else {
-  else {
     // always return at least empty values array
     result.push({
       metric: {},
       values: []
-    } as IMetricsResult);
+    });
   }
 
   return metrics;
 }
 
 export function isMetricsEmpty(metrics: Record<string, IMetrics>) {
-  return Object.values(metrics).every(metric => !metric?.data?.result?.length);
+  return !Object.values(metrics).some(metric => metric?.data?.result?.length);
 }
 
-export function getItemMetrics(metrics: Record<string, IMetrics>, itemName: string): Record<string, IMetrics> | void {
+export function getItemMetrics(metrics: Record<string, IMetrics>, itemName: string): Record<string, IMetrics> {
-  if (!metrics) return;
+  if (!metrics) {
-  const itemMetrics = { ...metrics };
+    return {};
-
-  for (const metric in metrics) {
-    if (!metrics[metric]?.data?.result) {
-      continue;
-    }
-    const results = metrics[metric].data.result;
-    const result = results.find(res => Object.values(res.metric)[0] == itemName);
-
-    itemMetrics[metric].data.result = result ? [result] : [];
   }
 
-  return itemMetrics;
+  return Object.fromEntries(
-}
+    iter.filterMap(
+      Object.entries(metrics),
+      ([key, value]) => {
+        if (value?.data?.result) {
+          const result = value.data.result.find(res => res.metric.container === itemName);
 
-export function getMetricLastPoints(metrics: Record<string, IMetrics>) {
+          value.data.result = [result].filter(Boolean);
-  const result: Partial<{ [metric: string]: number }> = {};
 
-  Object.keys(metrics).forEach(metricName => {
+          return [key, value];
-    try {
+        }
-      const metric = metrics[metricName];
 
-      if (metric.data.result.length) {
+        return undefined;
-        result[metricName] = +metric.data.result[0].values.slice(-1)[0][1];
       }
-    } catch (e) {
+    )
-    }
+  );
-
+}
-    return result;
+
-  }, {});
+export function getMetricLastPoints(metrics: Record<string, IMetrics>): Record<string, number> {
-
+  return Object.fromEntries(
-  return result;
+    iter.filterMap(
+      Object.entries(metrics),
+      ([key, value]) => {
+        if (value.data.result.length > 0) {
+          const [{ values }] = value.data.result;
+
+          if (values.length > 0) {
+            const [[, value]] = values.slice(-1);
+            const parsed = +value;
+
+            if (!isNaN(parsed)) {
+              return [key, parsed];
+            }
+          }
+        }
+
+        return undefined;
+      },
+    ),
+  );
 }

src/main/routes/metrics-route.ts

@@ -44,11 +44,13 @@ async function loadMetrics(promQueries: string[], cluster: Cluster, prometheusPa
   async function loadMetric(query: string): Promise<any> {
     async function loadMetricHelper(): Promise<any> {
       for (const [attempt, lastAttempt] of ATTEMPTS.entries()) { // retry
+        const reqParams = { query, ...queryParams };
+
         try {
-          return await getMetrics(cluster, prometheusPath, { query, ...queryParams });
+          return await getMetrics(cluster, prometheusPath, reqParams);
         } catch (error) {
           if (lastAttempt || (error?.statusCode >= 400 && error?.statusCode < 500)) {
-            logger.error("[Metrics]: metrics not available", { error });
+            logger.error("[Metrics]: metrics not available", { ...error.error, reqParams });
             throw new Error("Metrics not available");
           }
 

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

@@ -26,10 +26,10 @@ import { observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { cssNames } from "../../utils";
 import { Radio, RadioGroup } from "../radio";
-import { clusterApiStore, MetricNodeRole, MetricType } from "./cluster-overview.store";
+import { kubeClusterStore, MetricNodeRole, MetricType } from "./cluster-overview.store";
 
 export const ClusterMetricSwitchers = observer(() => {
-  const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterApiStore;
+  const { metricType, metricNodeRole, getMetricsValues, metrics } = kubeClusterStore;
   const { masterNodes, workerNodes } = nodesStore;
   const metricsValues = getMetricsValues(metrics);
   const disableRoles = !masterNodes.length || !workerNodes.length;
@@ -42,7 +42,7 @@ export const ClusterMetricSwitchers = observer(() => {
           asButtons
           className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
           value={metricNodeRole}
-          onChange={(metric: MetricNodeRole) => clusterApiStore.metricNodeRole = metric}
+          onChange={(metric: MetricNodeRole) => kubeClusterStore.metricNodeRole = metric}
         >
           <Radio label="Master" value={MetricNodeRole.MASTER}/>
           <Radio label="Worker" value={MetricNodeRole.WORKER}/>
@@ -53,7 +53,7 @@ export const ClusterMetricSwitchers = observer(() => {
           asButtons
           className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
           value={metricType}
-          onChange={(value: MetricType) => clusterApiStore.metricType = value}
+          onChange={(value: MetricType) => kubeClusterStore.metricType = value}
         >
           <Radio label="CPU" value={MetricType.CPU}/>
           <Radio label="Memory" value={MetricType.MEMORY}/>

src/renderer/components/+cluster/cluster-metrics.tsx

@@ -24,7 +24,7 @@ import "./cluster-metrics.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import type { ChartOptions, ChartPoint } from "chart.js";
-import { clusterApiStore } from "./cluster-overview.store";
+import { kubeClusterStore } from "./cluster-overview.store";
 import { BarChart } from "../chart";
 import { bytesToUnits, createStorage } from "../../utils";
 import { Spinner } from "../spinner";
@@ -33,31 +33,10 @@ import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { ClusterMetricSwitchers } from "./cluster-metric-switchers";
 import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api";
 
-export enum MetricType {
-  MEMORY = "memory",
-  CPU = "cpu"
-}
-
-export enum MetricNodeRole {
-  MASTER = "master",
-  WORKER = "worker"
-}
-
-export interface ClusterMetricsStorageState {
-  metricType: MetricType;
-  metricNodeRole: MetricNodeRole,
-}
-
-const storage = createStorage<ClusterMetricsStorageState>("cluster_overview", {
-  metricType: MetricType.CPU, // setup defaults
-  metricNodeRole: MetricNodeRole.WORKER,
-});
-
 export const ClusterMetrics = observer(() => {
-  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = clusterApiStore;
+  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics } = kubeClusterStore;
-  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterApiStore.metrics);
+  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics);
   const metricValues = getMetricsValues(metrics);
-  const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
   const data = metricValues.map(value => ({
     x: value[0],
     y: parseFloat(value[1]).toFixed(3)
@@ -66,7 +45,7 @@ export const ClusterMetrics = observer(() => {
   const datasets = [{
     id: metricType + metricNodeRole,
     label: `${metricType.toUpperCase()} usage`,
-    borderColor: colors[metricType],
+    borderColor: metricType === MetricType.CPU ? "#3D90CE" : "#C93DCE",
     data
   }];
   const cpuOptions: ChartOptions = {
@@ -104,11 +83,11 @@ export const ClusterMetrics = observer(() => {
   const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions;
 
   const renderMetrics = () => {
-    if (!metricValues.length && !metricsLoaded) {
+    if (!metricsLoaded) {
       return <Spinner center/>;
     }
 
-    if (!memoryCapacity || !cpuCapacity) {
+    if (!memoryCapacity && !cpuCapacity) {
       return <ClusterNoMetrics className="empty"/>;
     }
 

src/renderer/components/+cluster/cluster-overview.store.ts

@@ -27,7 +27,7 @@ import { IMetricsReqParams, normalizeMetrics } from "../../../common/k8s-api/end
 import { nodesStore } from "../+nodes/nodes.store";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 
-export class ClusterOverviewStore extends KubeObjectStore<Cluster> {
+export class KubeClusterStore extends KubeObjectStore<Cluster> {
   api = clusterApi;
 
 
@@ -80,6 +80,7 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> {
     const nodes = this.metricNodeRole === MetricNodeRole.MASTER && masterNodes.length ? masterNodes : workerNodes;
 
     this.metrics = await getMetricsByNodeNames(nodes.map(node => node.getName()), params);
+    console.log(toJS(this.metrics));
     this.metricsLoaded = true;
   }
 
@@ -107,5 +108,5 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> {
   }
 }
 
-export const clusterApiStore = new ClusterOverviewStore();
+export const kubeClusterStore = new KubeClusterStore();
-apiManager.registerStore(clusterApiStore);
+apiManager.registerStore(kubeClusterStore);

src/renderer/components/+cluster/cluster-overview.tsx

@@ -22,39 +22,62 @@
 import "./cluster-overview.scss";
 
 import React from "react";
-import { reaction } from "mobx";
+import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
-import { getHostedClusterId, interval } from "../../utils";
+import { createStorage, getHostedClusterId, interval } from "../../utils";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
 import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
-import { clusterApiStore } from "./cluster-overview.store";
+import { kubeClusterStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { ClusterStore } from "../../../common/cluster-store";
+import type { IClusterMetrics } from "../../../common/k8s-api/endpoints";
+
+export enum MetricType {
+  MEMORY = "memory",
+  CPU = "cpu"
+}
+
+export enum MetricNodeRole {
+  MASTER = "master",
+  WORKER = "worker"
+}
+
+const storage = createStorage("cluster_overview", {
+  metricType: MetricType.CPU, // setup defaults
+  metricNodeRole: MetricNodeRole.WORKER,
+});
 
 @observer
 export class ClusterOverview extends React.Component {
+  @observable metrics?: IClusterMetrics = undefined;
   private metricPoller = interval(60, () => this.loadMetrics());
 
   loadMetrics() {
     const cluster = ClusterStore.getInstance().getById(getHostedClusterId());
 
     if (cluster.available) {
-      clusterApiStore.loadMetrics();
+      kubeClusterStore.loadMetrics();
     }
   }
+  async loadMetrics() {
+    const { object: pod } = this.props;
+
+    this.metrics = await getMetricsForPods([pod], pod.getNs());
+    this.containerMetrics = await getMetricsForPods([pod], pod.getNs(), "container, namespace");
+  }
 
   componentDidMount() {
     this.metricPoller.start(true);
 
     disposeOnUnmount(this, [
       reaction(
-        () => clusterApiStore.metricNodeRole, // Toggle Master/Worker node switcher
+        () => kubeClusterStore.metricNodeRole, // Toggle Master/Worker node switcher
         () => this.metricPoller.restart(true)
       ),
     ]);

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -23,7 +23,7 @@ import "./cluster-pie-charts.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { clusterApiStore, MetricNodeRole } from "./cluster-overview.store";
+import { kubeClusterStore, MetricNodeRole } from "./cluster-overview.store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
 import { nodesStore } from "../+nodes/nodes.store";
@@ -48,7 +48,7 @@ export const ClusterPieCharts = observer(() => {
   };
 
   const renderCharts = () => {
-    const data = getMetricLastPoints(clusterApiStore.metrics);
+    const data = getMetricLastPoints(kubeClusterStore.metrics);
     const { memoryUsage, memoryRequests, memoryAllocatableCapacity, memoryCapacity, memoryLimits } = data;
     const { cpuUsage, cpuRequests, cpuAllocatableCapacity, cpuCapacity, cpuLimits } = data;
     const { podUsage, podAllocatableCapacity, podCapacity } = data;
@@ -215,7 +215,7 @@ export const ClusterPieCharts = observer(() => {
 
   const renderContent = () => {
     const { masterNodes, workerNodes } = nodesStore;
-    const { metricNodeRole, metricsLoaded } = clusterApiStore;
+    const { metricNodeRole, metricsLoaded } = kubeClusterStore;
     const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes;
 
     if (!nodes.length) {
@@ -234,7 +234,7 @@ export const ClusterPieCharts = observer(() => {
         </div>
       );
     }
-    const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterApiStore.metrics);
+    const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(kubeClusterStore.metrics);
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity) {
       return <ClusterNoMetrics className="empty"/>;

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -77,13 +77,16 @@ export class PodDetails extends React.Component<Props> {
   render() {
     const { object: pod } = this.props;
 
-    if (!pod) return null;
+    if (!pod) {
-    const { status, spec } = pod;
+      return null;
-    const { conditions, podIP } = status;
+    }
+
+    const { status: { conditions, podIP }, spec: { nodeName } } = pod;
+    const { metrics } = this;
     const podIPs = pod.getIPs();
-    const { nodeName } = spec;
     const nodeSelector = pod.getNodeSelectors();
     const volumes = pod.getVolumes();
+    const initContainers = pod.getInitContainers();
     const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Pod);
 
     return (
@@ -91,7 +94,9 @@ export class PodDetails extends React.Component<Props> {
         {!isMetricHidden && (
           <ResourceMetrics
             loader={this.loadMetrics}
-            tabs={podMetricTabs} object={pod} params={{ metrics: this.metrics }}
+            tabs={podMetricTabs}
+            object={pod}
+            params={{ metrics }}
           >
             <PodCharts/>
           </ResourceMetrics>
@@ -111,11 +116,7 @@ export class PodDetails extends React.Component<Props> {
           {podIP}
         </DrawerItem>
         <DrawerItem name="Pod IPs" hidden={!podIPs.length} labelsOnly>
-          {
+          {podIPs.map(label => <Badge key={label} label={label} />)}
-            podIPs.map(label => (
-              <Badge key={label} label={label}/>
-            ))
-          }
         </DrawerItem>
         <DrawerItem name="Priority Class">
           {pod.getPriorityClassName()}
@@ -123,65 +124,65 @@ export class PodDetails extends React.Component<Props> {
         <DrawerItem name="QoS Class">
           {pod.getQosClass()}
         </DrawerItem>
-        {conditions &&
+        {
-        <DrawerItem name="Conditions" className="conditions" labelsOnly>
+          conditions && (
-          {
+            <DrawerItem name="Conditions" className="conditions" labelsOnly>
-            conditions.map(condition => {
+              {
-              const { type, status, lastTransitionTime } = condition;
+                conditions
-
+                  .map(({ type, status, lastTransitionTime }) => (
-              return (
+                    <Badge
-                <Badge
+                      key={type}
-                  key={type}
+                      label={type}
-                  label={type}
+                      disabled={status === "False"}
-                  disabled={status === "False"}
+                      tooltip={`Last transition time: ${lastTransitionTime}`}
-                  tooltip={`Last transition time: ${lastTransitionTime}`}
+                    />
-                />
+                  ))
-              );
+              }
-            })
+            </DrawerItem>
-          }
+          )
-        </DrawerItem>
         }
-        {nodeSelector.length > 0 &&
+        {
-        <DrawerItem name="Node Selector">
+          nodeSelector.length > 0 && (
-          {
+            <DrawerItem name="Node Selector">
-            nodeSelector.map(label => (
+              {nodeSelector.map(label => <Badge key={label} label={label} />)}
-              <Badge key={label} label={label}/>
+            </DrawerItem>
-            ))
+          )
-          }
-        </DrawerItem>
         }
         <PodDetailsTolerations workload={pod}/>
         <PodDetailsAffinities workload={pod}/>
-
+        {
-        {pod.getSecrets().length > 0 && (
+          pod.getSecrets().length > 0 && (
-          <DrawerItem name="Secrets">
+            <DrawerItem name="Secrets">
-            <PodDetailsSecrets pod={pod}/>
+              <PodDetailsSecrets pod={pod} />
-          </DrawerItem>
+            </DrawerItem>
-        )}
+          )
-
-        {pod.getInitContainers() && pod.getInitContainers().length > 0 &&
-        <DrawerTitle title="Init Containers"/>
         }
         {
-          pod.getInitContainers() && pod.getInitContainers().map(container => {
+          initContainers.length && (
-            return <PodDetailsContainer key={container.name} pod={pod} container={container}/>;
+            <>
-          })
+              <DrawerTitle title="Init Containers" />
+              {
+                initContainers.map(container => (
+                  <PodDetailsContainer
+                    key={container.name}
+                    pod={pod}
+                    container={container}
+                  />
+                ))
+              }
+            </>
+          )
         }
         <DrawerTitle title="Containers"/>
         {
-          pod.getContainers().map(container => {
+          pod.getContainers().map(container => (
-            const { name } = container;
+            <PodDetailsContainer
-            const metrics = getItemMetrics(toJS(this.containerMetrics), name);
+              key={container.name}
-
+              pod={pod}
-            return (
+              container={container}
-              <PodDetailsContainer
+              metrics={getItemMetrics(toJS(this.containerMetrics), container.name)}
-                key={name}
+            />
-                pod={pod}
+          ))
-                container={container}
-                metrics={metrics || null}
-              />
-            );
-          })
         }
 
         {volumes.length > 0 && (