Setting up node table row heights

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

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

@@ -6,6 +6,10 @@
 @import "nodes-mixins";
 
 .Nodes {
+  .TableRow {
+    align-items: center;
+  }
+
   .TableCell {
     &.name {
       flex: 2;
@@ -23,18 +27,14 @@
       .metrics {
         --metric-color: var(--blue);
       }
-
-      .LineProgress {
-        color: var(--blue);
-      }
     }
 
     &.memory {
       flex: 1.0;
       align-self: center;
 
-      .LineProgress {
-        color: var(--magenta);
+      .metrics {
+        --metric-color: var(--magenta);
       }
     }
 
@@ -42,8 +42,8 @@
       flex: 1.0;
       align-self: center;
 
-      .LineProgress {
-        color: var(--golden);
+      .metrics {
+        --metric-color: var(--golden);
       }
     }
 

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

@@ -11,7 +11,6 @@ import { TabLayout } from "../layout/tab-layout-2";
 import { nodesStore } from "./nodes.store";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { formatNodeTaint, getMetricsForAllNodes, INodeMetrics, Node } from "../../../common/k8s-api/endpoints/nodes.api";
-import { LineProgress } from "../line-progress";
 import { bytesToUnits } from "../../../common/utils/convertMemory";
 import { Tooltip, TooltipPosition } from "../tooltip";
 import kebabCase from "lodash/kebabCase";
@@ -23,6 +22,7 @@ import { makeObservable, observable } from "mobx";
 import isEmpty from "lodash/isEmpty";
 import { KubeObjectAge } from "../kube-object/age";
 import { MetricBar } from "../metric-bar";
+import { VerticalBar } from "../vertical-bar";
 
 enum columnId {
   name = "name",
@@ -50,6 +50,7 @@ interface UsageArgs {
 export class NodesRoute extends React.Component {
   @observable.ref metrics: Partial<INodeMetrics> = {};
   private metricsWatcher = interval(30, async () => this.metrics = await getMetricsForAllNodes());
+  private metricBarHeight = 22;
 
   constructor(props: any) {
     super(props);
@@ -91,7 +92,7 @@ export class NodesRoute extends React.Component {
     const metrics = this.getLastMetricValues(node, metricNames);
 
     if (!metrics || metrics.length < 2) {
-      return <LineProgress value={0}/>;
+      return <VerticalBar value={0}/>;
     }
 
     const [usage, capacity] = metrics;
@@ -101,6 +102,7 @@ export class NodesRoute extends React.Component {
         className="metrics"
         max={capacity}
         value={usage}
+        height={this.metricBarHeight}
         tooltip={{
           preferredPositions: TooltipPosition.BOTTOM,
           children: `${title}: ${formatters.map(formatter => formatter([usage, capacity])).join(", ")}`,
@@ -233,6 +235,11 @@ export class NodesRoute extends React.Component {
               this.renderConditions(node),
             ];
           }}
+          tableProps={{
+            customRowHeights: (item, lineHeight, paddings) => {
+              return paddings + this.metricBarHeight;
+            },
+          }}
         />
       </TabLayout>
     );

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

@@ -9,10 +9,6 @@
   display: flex;
   gap: 0.5rem;
   align-items: center;
-
-  label {
-    color: var(--textColorTertiary);
-  }
 }
 
 .bar {

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

@@ -14,13 +14,14 @@ interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps
   value: number;
   max: number;
   min?: number;
+  height?: number;
   showPercent?: ReactNode;
   changeColorOnWarning?: boolean;
   warningPercentage?: number;
 }
 
 export const MetricBar = withTooltip((props: BarProps) => {
-  const { max, min = 0, showPercent = true, changeColorOnWarning = true, warningPercentage = 85, value } = props;
+  const { max, min = 0, showPercent = true, changeColorOnWarning = true, warningPercentage = 85, value, height } = props;
   const percents = Math.min(100, value / (max - min) * 100);
   const percentsRounded = +percents.toFixed(2);
   const warning = percents > warningPercentage;
@@ -30,8 +31,9 @@ export const MetricBar = withTooltip((props: BarProps) => {
       <VerticalBar
         value={percentsRounded}
         className={cssNames(styles.bar, { [styles.warning]: warning && changeColorOnWarning })}
+        style={{ blockSize: height }}
       />
-      {showPercent && <label>{percentsRounded}%</label>}
+      {showPercent && <span>{percentsRounded}%</span>}
     </div>
   );
 });