Add MetricBar component

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

src/renderer/components/metric-bar/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+export * from "./metric-bar";

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.metricBar {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./metric-bar.module.scss";
+
+import React, { HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
+import { cssNames, cssVar } from "../../utils";
+import { VerticalBar } from "../vertical-bar";
+
+interface BarProps extends HTMLAttributes<HTMLDivElement> {
+  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;
+  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());
+  });
+
+  return (
+    <div className={cssNames(styles.metricBar)} data-testid="metric-bar" ref={elem}>
+      <VerticalBar color={color} value={percents} />
+      {showPercent && <label>{percents}%</label>}
+    </div>
+  );
+}

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

@@ -7,8 +7,8 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  width: 12px;
+  inline-size: 12px;
-  height: 22px;
+  block-size: 22px;
   background-color: #313235;
   border-radius: 2px;
   overflow: hidden;