Setting up line colors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+nodes/nodes.scss

@@ -20,6 +20,10 @@
       flex: 1.0;
       align-self: center;
 
+      .metrics {
+        --metric-color: var(--blue);
+      }
+
       .LineProgress {
         color: var(--blue);
       }

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

@@ -22,6 +22,7 @@ import { eventStore } from "../+events/event.store";
 import { makeObservable, observable } from "mobx";
 import isEmpty from "lodash/isEmpty";
 import { KubeObjectAge } from "../kube-object/age";
+import { MetricBar } from "../metric-bar";
 
 enum columnId {
   name = "name",
@@ -96,7 +97,8 @@ export class NodesRoute extends React.Component {
     const [usage, capacity] = metrics;
 
     return (
-      <LineProgress
+      <MetricBar
+        className="metrics"
         max={capacity}
         value={usage}
         tooltip={{

src/renderer/components/metric-bar/metric-bar.module.scss

@@ -4,7 +4,21 @@
  */
 
 .metricBar {
+  --metric-color: gray;
+
   display: flex;
   gap: 0.5rem;
   align-items: center;
+
+  label {
+    color: var(--textColorTertiary);
+  }
+}
+
+.bar {
+  --line-color: var(--metric-color);
+
+  &.warning {
+    --line-color: salmon;
+  }
 }

src/renderer/components/metric-bar/metric-bar.tsx

@@ -5,39 +5,34 @@
 
 import styles from "./metric-bar.module.scss";
 
-import React, { HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
-import { cssNames, cssVar } from "../../utils";
+import React, { HTMLAttributes, ReactNode } from "react";
 import { VerticalBar } from "../vertical-bar";
+import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+import { cssNames } from "../../utils";
 
-interface BarProps extends HTMLAttributes<HTMLDivElement> {
+interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps {
   value: number;
   max: number;
   min?: number;
-  tooltip?: ReactNode;
   showPercent?: ReactNode;
   changeColorOnWarning?: boolean;
   warningPercentage?: number;
-  metricName?: "cpu" | "memory" | "disk";  // Used for color setting
-  customColor?: string;
 }
 
-export function MetricBar(props: BarProps) {
-  const elem = useRef<HTMLDivElement>();
-  const { max, min, tooltip, showPercent, changeColorOnWarning = true, warningPercentage = 85, value, metricName, customColor } = props;
+export const MetricBar = withTooltip((props: BarProps) => {
+  const { max, min = 0, showPercent = true, changeColorOnWarning = true, warningPercentage = 85, value } = props;
   const percents = Math.min(100, value / (max - min) * 100);
-  const [metricColor, setMetricColor] = useState("var(--colorVague)");
-  const color = (percents > warningPercentage && changeColorOnWarning) ? "pink" : customColor || metricColor;
-
-  useEffect(() => {
-    const cssVars = cssVar(elem.current);
-
-    setMetricColor(cssVars.get(`--color-${metricName}`).toString());
-  });
+  const percentsRounded = +percents.toFixed(2);
+  const warning = percents > warningPercentage;
 
   return (
-    <div className={cssNames(styles.metricBar)} data-testid="metric-bar" ref={elem}>
-      <VerticalBar color={color} value={percents} />
-      {showPercent && <label>{percents}%</label>}
+    <div className={cssNames(styles.metricBar, props.className)} data-testid="metric-bar">
+      <VerticalBar
+        value={percentsRounded}
+        className={cssNames(styles.bar, { [styles.warning]: warning && changeColorOnWarning })}
+      />
+      {showPercent && <label>{percentsRounded}%</label>}
     </div>
   );
-}
+});
+

src/renderer/components/vertical-bar/vertical-bar.module.scss

@@ -4,6 +4,8 @@
  */
 
 .verticalBar {
+  --line-color: gray;
+
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -15,6 +17,6 @@
 }
 
 .value {
-  background-color: gray;
+  background-color: var(--line-color);
   transition: all 0.2s ease-in-out;
 }

src/renderer/components/vertical-bar/vertical-bar.tsx

@@ -9,14 +9,13 @@ import React, { HTMLAttributes } from "react";
 import { cssNames } from "../../utils";
 
 interface BarProps extends HTMLAttributes<HTMLDivElement> {
-  color: string;
   value: number;
 }
 
-export function VerticalBar({ color, className, value }: BarProps) {
+export function VerticalBar({ className, value, ...rest }: BarProps) {
   return (
-    <div className={styles.verticalBar} data-testid="vertical-bar">
-      <div className={cssNames(styles.value, className)} style={{ backgroundColor: color, height: `${value}%` }}></div>
+    <div className={styles.verticalBar} data-testid="vertical-bar" {...rest}>
+      <div className={cssNames(styles.value, className)} style={{ blockSize: `${value}%` }}></div>
     </div>
   );
 }