Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Signed-off-by: Cody Belcher <cody.t.belcher@gmail.com>

dashboard/client/components/+cluster/cluster-metric-switchers.tsx

@@ -0,0 +1,43 @@
+import "./cluster-metric-switchers.scss";
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { observer } from "mobx-react";
+import { nodesStore } from "../+nodes/nodes.store";
+import { cssNames } from "../../utils";
+import { Radio, RadioGroup } from "../radio";
+import { clusterStore, MetricNodeRole, MetricType } from "./cluster.store";
+
+export const ClusterMetricSwitchers = observer(() => {
+  const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterStore;
+  const { masterNodes, workerNodes } = nodesStore;
+  const metricsValues = getMetricsValues(metrics);
+  const disableRoles = !masterNodes.length || !workerNodes.length;
+  const disableMetrics = !metricsValues.length;
+  return (
+    <div className="ClusterMetricSwitchers flex gaps">
+      <div className="box grow">
+        <RadioGroup
+          asButtons
+          className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
+          value={metricNodeRole}
+          onChange={(metric: MetricNodeRole) => clusterStore.metricNodeRole = metric}
+        >
+          <Radio label={<Trans>Master</Trans>} value={MetricNodeRole.MASTER}/>
+          <Radio label={<Trans>Worker</Trans>} value={MetricNodeRole.WORKER}/>
+        </RadioGroup>
+      </div>
+      <div className="box grow metric-switch">
+        <RadioGroup
+          asButtons
+          className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
+          value={metricType}
+          onChange={(value: MetricType) => clusterStore.metricType = value}
+        >
+          <Radio label={<Trans>CPU</Trans>} value={MetricType.CPU}/>
+          <Radio label={<Trans>Memory</Trans>} value={MetricType.MEMORY}/>
+        </RadioGroup>
+      </div>
+    </div>
+  );
+});