chore: workers list api

src/pages/resources/components/workers.tsx

@@ -174,14 +174,30 @@ const Models: React.FC = () => {
           key="GPU"
           render={(text, record: ListItem) => {
             return (
-              <ProgressBar
-                percent={_.get(record, [
-                  'status',
-                  'gpu',
-                  '0',
-                  'core_utilization_rate'
-                ])}
-              ></ProgressBar>
+              <Space>
+                {record?.status?.gpu.map((item) => {
+                  return (
+                    <span key={item.index} className="flex-center">
+                      <span
+                        style={{
+                          display: 'flex',
+                          width: '6px',
+                          height: '6px',
+                          borderRadius: '50%',
+                          backgroundColor: 'var(--ant-color-primary)'
+                        }}
+                      ></span>
+                      <span className="m-l-5">
+                        {' '}
+                        {`${item.core.total}C`} /{' '}
+                        {item.core.utilization_rate
+                          ? `${item.core.utilization_rate}%`
+                          : 0}
+                      </span>
+                    </span>
+                  );
+                })}
+              </Space>
             );
           }}
         />
@@ -198,7 +214,30 @@ const Models: React.FC = () => {
           dataIndex="VRAM"
           key="VRAM"
           render={(text, record: ListItem) => {
-            return <ProgressBar percent={0}></ProgressBar>;
+            return (
+              <Space>
+                {record?.status?.gpu.map((item) => {
+                  return (
+                    <span key={item.index} className="flex-center">
+                      <span
+                        style={{
+                          display: 'flex',
+                          width: '6px',
+                          height: '6px',
+                          borderRadius: '50%',
+                          backgroundColor: 'var(--ant-color-primary)'
+                        }}
+                      ></span>
+                      <span className="m-l-5">
+                        {item.memory.allocated
+                          ? `${formateUtilazation(item.memory.allocated, item.memory.total)}%`
+                          : 0}
+                      </span>
+                    </span>
+                  );
+                })}
+              </Space>
+            );
           }}
         />
       </Table>

src/pages/resources/config/types.ts

@@ -3,12 +3,17 @@ export interface Gpu {
   name: string;
   vendor: string;
   index: number;
-  core_total: number;
-  core_allocated: number;
-  core_utilization_rate: number;
-  memory_total: number;
-  memory_allocated: number;
-  memory_used: number;
+  core: {
+    total: number;
+    allocated: number;
+    utilization_rate: number;
+  };
+  memory: {
+    total: number;
+    allocated: number;
+    used: number;
+    utilization_rate: number;
+  };
   temperature: number;
 }
 

src/pages/resources/index.tsx

@@ -4,13 +4,13 @@ import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
 import { useState } from 'react';
 import GPUs from './components/gpus';
-import Nodes from './components/nodes';
+import Workers from './components/workers';
 
 const items: TabsProps['items'] = [
   {
     key: 'workers',
     label: 'Workers',
-    children: <Nodes />
+    children: <Workers />
   },
   {
     key: 'gpus',