feat: gpu graph

visualDust · Nov 27, 2023 · 3215918 · 3215918
1 parent 6389ede
commit 3215918
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 6 deletions.
diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/cpugraph.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/cpugraph.tsx
@@ -10,20 +10,34 @@ export const CPUGraph = ({
   const cpus = hardwareData[0].value.cpus;
   const initialOption = () => {
     return {
-      backgroundColor: 'transparent',
+      backgroundColor: "transparent",
       animation: false,
       tooltip: {
         trigger: "axis",
       },
-      legend: {
-        data: cpus.map((cpu) => `CPU${cpu.id}`),
+      grid: {
+        top: 30,
+        bottom: 30,
       },
+      title: {
+        text: `CPU Load (${cpus.length} threads)`,
+        left: "center",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      // legend: {
+      //   data: cpus.map((cpu) => `CPU${cpu.id}`),
+      // },
       xAxis: {
         type: "time",
       },
       yAxis: {
         type: "value",
         max: cpus.length * 100,
+        axisLabel: {
+          formatter: (x) => x + " %",
+        },
       },
       series: [],
     } as echarts.EChartsOption;
@@ -56,7 +70,7 @@ export const CPUGraph = ({
     <ECharts
       initialOption={initialOption}
       updatingOption={updatingOption}
-      style={{ height: "300px" }}
+      style={{ height: "200px" }}
     />
   );
 };
diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/gpugraph.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/gpugraph.tsx
@@ -0,0 +1,93 @@
+import { useMemo } from "react";
+import { ECharts } from "../../../echarts";
+import { ProjectStatus } from "../../../../services/projects";
+
+export const GPUGraph = ({
+  hardwareData,
+  gpuId,
+}: {
+  hardwareData: Array<ProjectStatus["hardware"]>;
+  gpuId: number;
+}) => {
+  const gpus = hardwareData[0].value.gpus;
+  const initialOption = () => {
+    return {
+      backgroundColor: "transparent",
+      animation: false,
+      tooltip: {
+        trigger: "axis",
+      },
+      grid: {
+        top: 30,
+        bottom: 30,
+      },
+      legend: {
+        data: [`GPU${gpuId} Load`, `GPU${gpuId} Memory`],
+      },
+      xAxis: {
+        type: "time",
+      },
+      yAxis: [
+        {
+          type: "value",
+          max: 100,
+          axisLabel: {
+            formatter: (x) => x + " %",
+          },
+        },
+        {
+          type: "value",
+          position: "right",
+          splitLine: null,
+          axisLabel: {
+            formatter: (x) => x + " MB",
+          },
+          max: gpus[gpuId].memoryTotal,
+        },
+      ],
+      series: [],
+    } as echarts.EChartsOption;
+  };
+
+  const updatingOption = useMemo(() => {
+    const latestTime = hardwareData[hardwareData.length - 1].timestamp;
+    const newOption = {
+      series: [
+        {
+          name: `GPU${gpuId} Load`,
+          type: "line",
+          areaStyle: null,
+          symbol: null,
+          data: hardwareData.map((x) => [
+            x.timestamp * 1000,
+            x.value.gpus[gpuId].load * 100,
+          ]),
+        },
+        {
+          name: `GPU${gpuId} Memory`,
+          type: "line",
+          areaStyle: {},
+          symbol: null,
+          yAxisIndex: 1,
+          data: hardwareData.map((x) => [
+            x.timestamp * 1000,
+            x.value.gpus[gpuId].memoryUsed,
+          ]),
+        },
+      ],
+      xAxis: {
+        min: (latestTime - 60) * 1000,
+        max: latestTime * 1000,
+      },
+    } as echarts.EChartsOption;
+    return newOption;
+  }, [hardwareData]);
+
+  return (
+    <ECharts
+      initialOption={initialOption}
+      updatingOption={updatingOption}
+      style={{ height: "200px" }}
+    />
+  );
+};
diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/index.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/index.tsx
@@ -1,6 +1,7 @@
 import { Typography } from "@douyinfe/semi-ui";
 import { ProjectStatus } from "../../../../services/projects";
 import { CPUGraph } from "./cpugraph";
+import { GPUGraph } from "./gpugraph";
 
 export function Hardware({
   hardwareData,
@@ -14,6 +15,13 @@ export function Hardware({
       ) : (
         <Typography.Text>No CPU Info</Typography.Text>
       )}
+      {hardwareData.every((x) => x.value.gpus) ? (
+        hardwareData[0].value.gpus.map((_, i) => (
+          <GPUGraph key={i} hardwareData={hardwareData} gpuId={i} />
+        ))
+      ) : (
+        <Typography.Text>No GPU Info</Typography.Text>
+      )}
     </div>
   );
 }
diff --git a/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx b/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx
@@ -17,7 +17,7 @@ function AutoScrolling({
     const dom = containerRef.current;
     if (dom) {
       setFollowing(
-        Math.abs(dom.scrollHeight - dom.clientHeight - dom.scrollTop) < 5
+        Math.abs(dom.scrollHeight - dom.clientHeight - dom.scrollTop) < 30,
       );
     }
     setRenderingElement(children);

diff --git a/neetbox/frontend/src/components/echarts.tsx b/neetbox/frontend/src/components/echarts.tsx
@@ -26,9 +26,10 @@ export const ECharts = (props: EChartsProps) => {
       const chart = echartsModule.init(
         chartContainerRef.current,
         darkMode ? "dark" : null,
+        // { renderer: "svg" },
       );
 
-      chart.setOption(props.initialOption());
+      chart.setOption(props.initialOption(), false, true);
       chart.setOption(props.updatingOption);
       chartRef.current = chart;