fix: api changed

visualDust · Dec 1, 2023 · e44e8e5 · e44e8e5
1 parent 38a378e
commit e44e8e5
Show file tree

Hide file tree

Showing 15 changed files with 131 additions and 118 deletions.
diff --git a/neetbox/frontend/src/components/dashboard/project/actions.tsx b/neetbox/frontend/src/components/dashboard/project/actions.tsx
@@ -1,9 +1,10 @@
 import { Button, Checkbox, Col, Input, Popover, Row, Space, Typography } from "@douyinfe/semi-ui";
 import { memo, useContext, useState } from "react";
 import { IconChevronDown, IconPlay } from "@douyinfe/semi-icons";
-import { ProjectStatus, getProject } from "../../../services/projects";
+import { getProject } from "../../../services/projects";
 import { ProjectContext } from "../../../pages/console/proejctDashboard";
 import { useMemoJSON } from "../../../hooks/useMemoJSON";
+import { ProjectStatus } from "../../../services/types";
 
 interface Props {
   actions: ProjectStatus["__action"];
@@ -55,11 +56,11 @@ export const ActionItem = memo(({ name, actionOptions: options, blocking, setBlo
   );
   const [running, setCurrentBlocking] = useState(false);
   const [result, setResult] = useState<string | null>(null);
-  const { projectName } = useContext(ProjectContext)!;
+  const { projectId } = useContext(ProjectContext)!;
   const handleRun = () => {
     if (options.blocking) setBlocking(true);
     setCurrentBlocking(true);
-    getProject(projectName).sendAction(name, args, ({ error: err, result: res }) => {
+    getProject(projectId).sendAction(name, args, ({ error: err, result: res }) => {
       if (options.blocking) setBlocking(false);
       setCurrentBlocking(false);
       setResult(err ? `error:\n${err}` : `result:\n${JSON.stringify(res)}`);

diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/cpugraph.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/cpugraph.tsx
@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { ECharts } from "../../../echarts";
-import { ProjectStatus } from "../../../../services/projects";
+import { ProjectStatus } from "../../../../services/types";
+import { getTimeAxisOptions } from "./utils";
 
 export const CPUGraph = ({ hardwareData }: { hardwareData: Array<ProjectStatus["hardware"]> }) => {
   const cpus = hardwareData[0].value.cpus;
+  console.info({ hardwareData });
   const initialOption = () => {
     return {
       backgroundColor: "transparent",
@@ -39,21 +41,16 @@ export const CPUGraph = ({ hardwareData }: { hardwareData: Array<ProjectStatus["
   };
 
   const updatingOption = useMemo(() => {
-    const latestTime = hardwareData[hardwareData.length - 1].timestamp;
     const newOption = {
       series: cpus.map((cpu) => ({
         name: `CPU${cpu.id}`,
         type: "line",
         stack: "cpu",
         areaStyle: {},
         symbol: null,
-        data: hardwareData.map((x) => [x.timestamp * 1000, x.value.cpus[cpu.id].percent]),
+        data: hardwareData.map((x) => [new Date(x.timestamp), x.value.cpus[cpu.id].percent]),
       })),
-      xAxis: {
-        min: (latestTime - 60) * 1000,
-        max: latestTime * 1000,
-        data: new Array(10).fill(0).map((x, i) => i),
-      },
+      xAxis: getTimeAxisOptions(hardwareData),
     } as echarts.EChartsOption;
     return newOption;
   }, [cpus, hardwareData]);

diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/gpugraph.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/gpugraph.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { ECharts } from "../../../echarts";
-import { ProjectStatus } from "../../../../services/projects";
+import { ProjectStatus } from "../../../../services/types";
+import { getTimeAxisOptions } from "./utils";
 
 export const GPUGraph = ({
   hardwareData,
@@ -56,29 +57,25 @@ export const GPUGraph = ({
   };
 
   const updatingOption = useMemo(() => {
-    const latestTime = hardwareData[hardwareData.length - 1].timestamp;
     const newOption = {
       series: [
         {
           name: `Load`,
           type: "line",
           areaStyle: null,
           symbol: null,
-          data: hardwareData.map((x) => [x.timestamp * 1000, x.value.gpus[gpuId].load * 100]),
+          data: hardwareData.map((x) => [new Date(x.timestamp), x.value.gpus[gpuId].load * 100]),
         },
         {
           name: `Memory`,
           type: "line",
           areaStyle: {},
           symbol: null,
           yAxisIndex: 1,
-          data: hardwareData.map((x) => [x.timestamp * 1000, x.value.gpus[gpuId].memoryUsed / 1024]),
+          data: hardwareData.map((x) => [new Date(x.timestamp), x.value.gpus[gpuId].memoryUsed / 1024]),
         },
       ],
-      xAxis: {
-        min: (latestTime - 60) * 1000,
-        max: latestTime * 1000,
-      },
+      xAxis: getTimeAxisOptions(hardwareData),
     } as echarts.EChartsOption;
     return newOption;
   }, [gpuId, hardwareData]);

diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/index.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/index.tsx
@@ -1,5 +1,5 @@
 import { Typography } from "@douyinfe/semi-ui";
-import { ProjectStatus } from "../../../../services/projects";
+import { ProjectStatus } from "../../../../services/types";
 import { CPUGraph } from "./cpugraph";
 import { GPUGraph } from "./gpugraph";
 import { RAMGraph } from "./ramgraph";

diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/ramgraph.tsx b/neetbox/frontend/src/components/dashboard/project/hardware/ramgraph.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { ECharts } from "../../../echarts";
-import { ProjectStatus } from "../../../../services/projects";
+import { ProjectStatus } from "../../../../services/types";
+import { getTimeAxisOptions } from "./utils";
 
 export const RAMGraph = ({ hardwareData }: { hardwareData: Array<ProjectStatus["hardware"]> }) => {
   const initialOption = () => {
@@ -41,21 +42,17 @@ export const RAMGraph = ({ hardwareData }: { hardwareData: Array<ProjectStatus["
   };
 
   const updatingOption = useMemo(() => {
-    const latestTime = hardwareData[hardwareData.length - 1].timestamp;
     const newOption = {
       series: [
         {
           name: `RAM Used`,
           type: "line",
           areaStyle: {},
           symbol: null,
-          data: hardwareData.map((x) => [x.timestamp * 1000, x.value.ram.used]),
+          data: hardwareData.map((x) => [new Date(x.timestamp), x.value.ram.used]),
         },
       ],
-      xAxis: {
-        min: (latestTime - 60) * 1000,
-        max: latestTime * 1000,
-      },
+      xAxis: getTimeAxisOptions(hardwareData),
     } as echarts.EChartsOption;
     return newOption;
   }, [hardwareData]);

diff --git a/neetbox/frontend/src/components/dashboard/project/hardware/utils.ts b/neetbox/frontend/src/components/dashboard/project/hardware/utils.ts
@@ -0,0 +1,9 @@
+import { ProjectStatus } from "../../../../services/types";
+
+export function getTimeAxisOptions(hardwareData: Array<ProjectStatus["hardware"]>) {
+  const latestTime = new Date(hardwareData[hardwareData.length - 1].timestamp).getTime();
+  return {
+    min: latestTime - 60 * 1000,
+    max: latestTime,
+  };
+}
diff --git a/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx b/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx
@@ -1,11 +1,11 @@
 import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button } from "@douyinfe/semi-ui";
 import { IconAlignBottom } from "@douyinfe/semi-icons";
-import { LogData } from "../../../../services/projects";
+import { LogData } from "../../../../services/types";
 import "./logs.css";
 import { useProjectLogs } from "../../../../hooks/useProject";
 interface Props {
-  projectName: string;
+  projectId: string;
 }
 
 function AutoScrolling({ style, children }: React.PropsWithChildren<{ style: React.CSSProperties }>) {
@@ -53,8 +53,8 @@ function AutoScrolling({ style, children }: React.PropsWithChildren<{ style: Rea
   );
 }
 
-export const Logs = React.memo(({ projectName }: Props) => {
-  const logs = useProjectLogs(projectName);
+export const Logs = React.memo(({ projectId }: Props) => {
+  const logs = useProjectLogs(projectId);
   return <AutoScrolling style={{ height: "40vh" }} children={<LogItems logs={logs} />} />;
 });
 

diff --git a/neetbox/frontend/src/components/dashboard/project/platformProps.tsx b/neetbox/frontend/src/components/dashboard/project/platformProps.tsx
@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { Toast, Button, Card, CardGroup, Typography } from "@douyinfe/semi-ui";
 import { IconCopy } from "@douyinfe/semi-icons";
 import { useMemoJSON } from "../../../hooks/useMemoJSON";
-import { ProjectStatus } from "../../../services/projects";
+import { ProjectStatus } from "../../../services/types";
 
 const PropCard = memo(
   ({ propName, propValue }: { propName: string; propValue: ProjectStatus["platform"]["value"][string] }) => {

diff --git a/neetbox/frontend/src/hooks/useProject.ts b/neetbox/frontend/src/hooks/useProject.ts
@@ -1,14 +1,14 @@
 import { useAtom } from "jotai";
 import { getProject } from "../services/projects";
 
-export function useProjectStatus(name: string) {
-  const project = getProject(name);
+export function useProjectStatus(id: string) {
+  const project = getProject(id);
   const [data] = useAtom(project.status.atom);
   return data;
 }
 
-export function useProjectLogs(name: string) {
-  const project = getProject(name);
+export function useProjectLogs(id: string) {
+  const project = getProject(id);
   const [data] = useAtom(project?.logs.atom);
   return data;
 }
diff --git a/neetbox/frontend/src/pages/console/index.tsx b/neetbox/frontend/src/pages/console/index.tsx
@@ -9,7 +9,7 @@ export function consoleRoutes(): RouteObject {
     element: <ConsoleLayout />,
     children: [
       {
-        path: "project/:projectName",
+        path: "project/:projectId",
         element: <Dashboard />,
         errorElement: <div>Error</div>,
       },

diff --git a/neetbox/frontend/src/pages/console/proejctDashboard.tsx b/neetbox/frontend/src/pages/console/proejctDashboard.tsx
@@ -9,35 +9,38 @@ import Loading from "../../components/loading";
 import { Hardware } from "../../components/dashboard/project/hardware";
 import { SectionTitle } from "../../components/sectionTitle";
 
-export const ProjectContext = createContext<{ projectName: string } | null>(null);
+export const ProjectContext = createContext<{ projectId: string; projectName?: string } | null>(null);
 
 export default function ProjectDashboardButRecreateOnRouteChange() {
-  const { projectName } = useParams();
-  return <ProjectDashboard key={projectName} />;
+  const { projectId } = useParams();
+  return <ProjectDashboard key={projectId} />;
 }
 
 function ProjectDashboard() {
-  const { projectName } = useParams();
-  if (!projectName) throw new Error("projectName required");
+  const { projectId } = useParams();
+  if (!projectId) throw new Error("projectId required");
 
-  const data = useProjectStatus(projectName);
-  // console.info("project", { projectName, data });
+  const data = useProjectStatus(projectId);
+  // console.info("project", { projectId, data });
+
+  const projectName = data.current?.config.value.name;
 
   const projectContextData = useMemo(
     () => ({
+      projectId,
       projectName,
     }),
-    [projectName],
+    [projectId, projectName],
   );
 
   return (
     <ProjectContext.Provider value={projectContextData}>
       <div style={{ padding: "20px" }}>
         <Typography.Title heading={2} style={{ textAlign: "center" }}>
-          Project "{projectName}"
+          Project "{projectName ?? projectId}"
         </Typography.Title>
         <SectionTitle title="Logs" />
-        <Logs projectName={projectName} />
+        <Logs projectId={projectId} />
         <Divider />
         {data.current ? (
           <>

diff --git a/neetbox/frontend/src/pages/console/sidebar.tsx b/neetbox/frontend/src/pages/console/sidebar.tsx
@@ -26,15 +26,16 @@ export default function ConsoleNavBar() {
           text: "Projects",
           icon: <IconListView />,
           itemKey: "projects",
-          items: data?.names.map((name: string) => ({
-            text: name,
-            itemKey: "/console/project/" + name,
-          })) ?? [{ text: "", itemKey: "loading" }],
+          items: data
+            ? data.map(({ id, config }) => ({
+                text: config.value.name,
+                itemKey: "/console/project/" + id,
+              }))
+            : [{ text: "", itemKey: "loading" }],
         },
       ]}
       defaultOpenKeys={["projects"]}
       selectedKeys={[location.pathname]}
-      onClick={(data) => console.log("trigger onClick: ", data)}
       footer={{
         collapseButton: true,
       }}

diff --git a/neetbox/frontend/src/services/projectWebsocket.ts b/neetbox/frontend/src/services/projectWebsocket.ts
@@ -43,7 +43,7 @@ export class WsClient {
     const eventId = this.nextId++;
     const json = {
       ...msg,
-      name: this.project.name,
+      "workspace-id": this.project.id,
       "event-id": eventId,
     };
     console.info("ws send", json);