feat: switch to gauge for topology metrics

Closes #1477

src/components/TopologyCard/Property.tsx

@@ -5,6 +5,7 @@ import { Age } from "../../ui/Age";
 import { isEmpty } from "../Canary/utils";
 import { Icon } from "../Icon";
 import {
+  FormatPropertyCPUMemory,
   FormatPropertyCurrency,
   FormatPropertyDefault,
   FormatPropertyURL
@@ -36,6 +37,10 @@ export function FormatProperty({
     return <FormatPropertyCurrency property={property} />;
   }
 
+  if (property.name === "cpu" || property.name === "memory") {
+    return <FormatPropertyCPUMemory property={property} />;
+  }
+
   return <FormatPropertyDefault property={property} short={short} />;
 }
 

src/components/TopologyCard/Utils/FormatProperties.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { formatBytes } from "../../../utils/common";
 import { isEmpty } from "lodash";
 import { TopologyProperty } from "../../../api/types/topology";
+import ProgressBar from "../../../ui/stats/ProgressBar";
 
 type FormatPropertyProps = {
   property?: TopologyProperty;
@@ -74,6 +75,38 @@ function convertUnitsToDisplayValue(value: number, unit?: string) {
   return value;
 }
 
+export function FormatPropertyCPUMemory({ property }: FormatPropertyProps) {
+  if (
+    !property ||
+    !property.value ||
+    (property?.name !== "cpu" && property?.name !== "memory")
+  ) {
+    return null;
+  }
+
+  const value = property.value;
+  const max = property.max;
+
+  const formattedMax =
+    property.name === "cpu"
+      ? (Number(max) / 1000).toFixed(2)
+      : formatBytes(Number(max), 1);
+
+  if (max) {
+    const percent = (Number(value) / Number(max)) * 100;
+    return (
+      <div
+        data-tip={`${percent.toFixed(2)}% of ${formattedMax}`}
+        className="block w-14"
+      >
+        <ProgressBar value={percent} />
+      </div>
+    );
+  }
+
+  return <span data-tip={value.toString()}>{value.toString()}</span>;
+}
+
 export function FormatPropertyDefault({
   property,
   short

src/ui/stats/ProgressBar.stories.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentProps } from "react";
+import { Story, Meta } from "@storybook/react";
+import ProgressBar from "./ProgressBar";
+
+export default {
+  title: "ProgressBar",
+  component: ProgressBar
+} as Meta;
+
+const Template: Story<ComponentProps<typeof ProgressBar>> = (args) => (
+  <div className="flex flex-col space-y-4">
+    <ProgressBar {...args} />
+  </div>
+);
+
+export const FivePercent = Template.bind({});
+FivePercent.args = {
+  value: 5
+};
+
+export const FiftyPercent = Template.bind({});
+FiftyPercent.args = {
+  value: 50
+};
+
+export const EightyPercent = Template.bind({});
+EightyPercent.args = {
+  value: 80
+};

src/ui/stats/ProgressBar.tsx

@@ -0,0 +1,29 @@
+import React, { CSSProperties } from "react";
+
+interface Props {
+  value: number;
+  className?: string;
+}
+
+export default function ProgressBar({ value, className = "h-3" }: Props) {
+  const barStyle: CSSProperties = {
+    width: `${value}%`,
+    backgroundColor: value > 70 ? "red" : "green"
+  };
+
+  const roundingClassName =
+    value < 25
+      ? "rounded-l-2xl"
+      : value > 50
+      ? "rounded-full"
+      : "rounded-l-xl rounded-r-xl";
+
+  return (
+    <div className={`relative rounded-full bg-gray-400 ${className}`}>
+      <div
+        className={`absolute top-0 left-0 h-full ${roundingClassName}`}
+        style={barStyle}
+      ></div>
+    </div>
+  );
+}