Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/resource-metrics/index.ts

@@ -0,0 +1,2 @@
+export * from "./resource-metrics";
+export * from "./resource-metrics-text";

src/renderer/components/resource-metrics/no-metrics.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { Icon } from "../icon";
+
+export function NoMetrics() {
+  return (
+    <div className="flex justify-center align-center">
+      <Icon material="info"/>&nbsp;<Trans>Metrics not available at the moment</Trans>
+    </div>
+  );
+}

src/renderer/components/resource-metrics/resource-metrics-text.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { IPodMetrics } from "../../api/endpoints";
+import { getMetricLastPoints, IMetrics } from "../../api/endpoints/metrics.api";
+import { bytesToUnits } from "../../utils";
+import { Badge } from "../badge";
+import { DrawerItem } from "../drawer";
+
+interface Props {
+  metrics: IPodMetrics<IMetrics>;
+}
+
+export function ResourceMetricsText(props: Props) {
+  if (!props.metrics) return null
+  const metrics = getMetricLastPoints(props.metrics);
+  const { cpuUsage, cpuRequests, cpuLimits, memoryUsage, memoryRequests, memoryLimits } = metrics;
+  return (
+    <>
+      <DrawerItem name={<Trans>CPU</Trans>} labelsOnly>
+        {cpuUsage > 0 && <Badge label={`Usage: ${cpuUsage.toPrecision(2)}`}/>}
+        {cpuRequests > 0 && <Badge label={`Requests: ${cpuRequests.toPrecision(2)}`}/>}
+        {cpuLimits > 0 && <Badge label={`Limits: ${cpuLimits.toPrecision(2)}`}/>}
+      </DrawerItem>
+      <DrawerItem name={<Trans>Memory</Trans>} labelsOnly>
+        {memoryUsage > 0 && <Badge label={`Usage: ${bytesToUnits(memoryUsage)}`}/>}
+        {memoryRequests > 0 && <Badge label={`Requests: ${bytesToUnits(memoryRequests)}`}/>}
+        {memoryLimits > 0 && <Badge label={`Limits: ${bytesToUnits(memoryLimits)}`}/>}
+      </DrawerItem>
+    </>
+  );
+}

src/renderer/components/resource-metrics/resource-metrics.scss

@@ -0,0 +1,38 @@
+.ResourceMetrics {
+  $metricsHeight: 200px;
+
+  position: relative;
+  margin-bottom: $margin * 2;
+
+  .switchers {
+    margin-bottom: $margin * 2;
+    text-align: center;
+  }
+
+  .graph {
+    &:empty + .loader {
+      display: flex;
+      height: #{$metricsHeight + $unit * 2.75};
+      align-items: center;
+      justify-content: center;
+    }
+
+    .Chart {
+      .chart-container {
+        min-height: $metricsHeight;
+      }
+  
+      .legend {
+        justify-content: center;
+  
+        > * {
+          margin-right: $margin * 2;
+        }
+      }
+    }
+  }
+
+  .loader {
+    display: none;
+  }
+}

src/renderer/components/resource-metrics/resource-metrics.tsx

@@ -0,0 +1,78 @@
+import "./resource-metrics.scss";
+
+import React, { createContext, useEffect, useState } from "react";
+import { Radio, RadioGroup } from "../radio";
+import { useInterval } from "../../hooks";
+import { KubeObject } from "../../api/kube-object";
+import { cssNames } from "../../utils";
+import { Spinner } from "../spinner";
+
+interface Props extends React.HTMLProps<any> {
+  tabs: React.ReactNode[];
+  object?: KubeObject;
+  loader?: () => void;
+  interval?: number;
+  className?: string;
+  params?: {
+    [key: string]: any;
+  };
+}
+
+export type IResourceMetricsValue<T extends KubeObject = any, P = any> = {
+  object: T;
+  tabId: number;
+  params?: P;
+}
+
+export const ResourceMetricsContext = createContext<IResourceMetricsValue>(null);
+
+const defaultProps: Partial<Props> = {
+  interval: 60  // 1 min
+};
+
+ResourceMetrics.defaultProps = defaultProps;
+
+export function ResourceMetrics({ object, loader, interval, tabs, children, className, params }: Props) {
+  const [tabId, setTabId] = useState<number>(0);
+
+  useEffect(() => {
+    if (loader) loader();
+  }, [object]);
+
+  useInterval(() => {
+    if (loader) loader();
+  }, interval * 1000);
+
+  const renderContents = () => {
+    return (
+      <>
+        <div className="switchers">
+          <RadioGroup
+            asButtons
+            className="flex box grow gaps"
+            value={tabs[tabId]}
+            onChange={value => setTabId(tabs.findIndex(tab => tab == value))}
+          >
+            {tabs.map((tab, index) => (
+              <Radio key={index} className="box grow" label={tab} value={tab}/>
+            ))}
+          </RadioGroup>
+        </div>
+        <ResourceMetricsContext.Provider value={{ object, tabId, params }}>
+          <div className="graph">
+            {children}
+          </div>
+        </ResourceMetricsContext.Provider>
+        <div className="loader">
+          <Spinner/>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className={cssNames("ResourceMetrics flex column", className)}>
+      {renderContents()}
+    </div>
+  );
+}