chore: workers list api

src/layouts/index.tsx

@@ -206,7 +206,8 @@ export default (props: any) => {
               runtimeConfig,
               loading,
               initialState,
-              setInitialState
+              setInitialState,
+              intl
             });
             if (runtimeConfig.rightContentRender) {
               return runtimeConfig.rightContentRender(layoutProps, dom, {
@@ -215,7 +216,8 @@ export default (props: any) => {
                 runtimeConfig,
                 loading,
                 initialState,
-                setInitialState
+                setInitialState,
+                intl
               });
             }
             return dom;

src/layouts/rightRender.tsx

@@ -14,9 +14,9 @@ export function getRightRenderContent(opts: {
   loading: boolean;
   initialState: any;
   setInitialState: any;
+  intl: any;
 }) {
-  console.log('runtimeConfig==', opts.runtimeConfig, opts);
-  // const intl = useIntl();
+  const { intl } = opts;
   if (opts.runtimeConfig.rightRender) {
     return opts.runtimeConfig.rightRender(
       opts.initialState,
@@ -66,8 +66,7 @@ export function getRightRenderContent(opts: {
           <span style={{ fontSize: '12px' }}>
             <GlobalOutlined />
             <span className="m-l-8">
-              {/* {FormattedMessage({ id: 'common.settings.language' })} */}
-              Language
+              {intl?.formatMessage?.({ id: 'common.settings.language' })}
             </span>
           </span>
         }
@@ -87,8 +86,7 @@ export function getRightRenderContent(opts: {
         label: (
           <>
             <SettingOutlined />
-            {/* {intl.formatMessage({ id: 'common.button.settings' })} */}
-            Settings
+            {intl?.formatMessage?.({ id: 'common.button.settings' })}
           </>
         ),
         onClick: () => {
@@ -112,8 +110,7 @@ export function getRightRenderContent(opts: {
         label: (
           <>
             <LogoutOutlined />
-            {/* {intl.formatMessage({ id: 'common.button.logout' })} */}
-            Logout
+            {intl?.formatMessage?.({ id: 'common.button.logout' })}
           </>
         ),
         onClick: () => {

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',