chore: watch api

config/config.ts

@@ -98,6 +98,7 @@ export default defineConfig({
   hash: true,
   access: {},
   model: {},
+  valtio: {},
   initialState: {},
   request: {},
   locale: {

package.json

@@ -18,12 +18,15 @@
     "@monaco-editor/react": "^4.6.0",
     "@types/lodash": "^4.17.4",
     "@umijs/max": "^4.2.1",
-    "antd": "^5.17.0",
+    "ansi-to-html": "^0.7.2",
+    "antd": "^5.18.3",
     "antd-style": "^3.6.2",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
+    "has-ansi": "^5.0.1",
+    "jotai": "^2.8.4",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "query-string": "^9.0.0",

src/app.tsx

@@ -9,11 +9,14 @@ let currentUserInfo: any = {};
 
 // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
 // 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
-export async function getInitialState() {
+export async function getInitialState(): Promise<{
+  fetchUserInfo: () => Promise<Global.UserInfo>;
+  currentUser?: Global.UserInfo;
+}> {
   // 如果不是登录页面，执行
   const { location } = history;
 
-  const fetchUserInfo = async () => {
+  const fetchUserInfo = async (): Promise<Global.UserInfo> => {
     try {
       const data = await queryCurrentUserState({
         skipErrorHandler: true
@@ -22,7 +25,7 @@ export async function getInitialState() {
     } catch (error) {
       history.push(loginPath);
     }
-    return undefined;
+    return {} as Global.UserInfo;
   };
 
   if (![loginPath].includes(location.pathname)) {
@@ -40,23 +43,6 @@ export async function getInitialState() {
   };
 }
 
-// export const patchClientRoutes = async (params: { routes: any[] }) => {
-//   const { routes } = params;
-//   console.log('routes============999', routes);
-//   const data = await queryCurrentUserState({
-//     skipErrorHandler: true
-//   });
-
-//   routes.unshift({
-//     path: '/',
-//     element: data?.is_admin ? (
-//       <Navigate to="/dashboard" replace />
-//     ) : (
-//       <Navigate to="/playground" replace />
-//     )
-//   });
-// };
-
 export const request: RequestConfig = {
   baseURL: ' /v1',
   ...requestConfig

src/assets/styles/common.less

@@ -14,6 +14,18 @@
   margin-left: 8px;
 }
 
+.m-r-10 {
+  margin-right: 10px;
+}
+
+.m-r-5 {
+  margin-right: 5px;
+}
+
+.m-r-8 {
+  margin-right: 8px;
+}
+
 .flex {
   display: flex;
 }
@@ -35,3 +47,8 @@
 .opct-8 {
   opacity: 0.8;
 }
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}

src/components/logs-viewer/index.less

@@ -0,0 +1,22 @@
+.logs-viewer-wrap-w2 {
+  .wrap {
+    padding: 5px 0 5px 10px;
+    overflow: auto;
+    background-color: var(--color-logs-bg);
+    border-radius: var(--border-radius-small);
+
+    .content {
+      word-wrap: break-word;
+
+      &.line-break {
+        word-wrap: break-word;
+      }
+
+      color: var(--color-logs-text);
+      font-size: var(--font-size-small);
+      line-height: 22px;
+      white-space: pre-wrap;
+      background-color: var(--color-logs-bg);
+    }
+  }
+}

src/components/logs-viewer/index.tsx

@@ -0,0 +1,63 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import Convert from 'ansi-to-html';
+import classNames from 'classnames';
+import hasAnsi from 'has-ansi';
+import { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+interface LogsViewerProps {
+  height: number;
+  content: string;
+  url: string;
+  params?: object;
+}
+const LogsViewer: React.FC<LogsViewerProps> = (props) => {
+  const { height, content, url } = props;
+  const [nowrap, setNowrap] = useState(false);
+  const [logsContent, setLogsContent] = useState(content);
+  const { setChunkRequest } = useSetChunkRequest();
+  const chunkRequedtRef = useRef<any>(null);
+
+  const convert = new Convert();
+
+  const updateContent = (newVal: string) => {
+    if (hasAnsi(newVal)) {
+      const htmlStr = `${convert.toHtml(newVal)}`;
+      setLogsContent(htmlStr);
+    } else {
+      setLogsContent(newVal);
+    }
+  };
+
+  const createChunkConnection = async () => {
+    chunkRequedtRef.current?.current?.cancel?.();
+    chunkRequedtRef.current = setChunkRequest({
+      url,
+      params: {
+        ...props.params,
+        watch: true
+      },
+      contentType: 'text',
+      handler: updateContent
+    });
+  };
+
+  useEffect(() => {
+    createChunkConnection();
+    return () => {
+      chunkRequedtRef.current?.current?.cancel?.();
+    };
+  }, [url, props.params]);
+
+  return (
+    <div className="logs-viewer-wrap-w2">
+      <div className="wrap" style={{ height: height }}>
+        <div className={classNames('content', { 'line-break': nowrap })}>
+          <div className="text">{logsContent}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogsViewer;

src/components/progress-bar/index.tsx

@@ -1,9 +1,14 @@
-import { Progress } from 'antd';
+import { Progress, Tooltip } from 'antd';
 import { memo, useMemo } from 'react';
 
 const RenderProgress = memo(
-  (props: { percent: number; steps?: number; download?: boolean }) => {
-    const { percent, steps = 5, download } = props;
+  (props: {
+    percent: number;
+    steps?: number;
+    download?: boolean;
+    label?: React.ReactNode;
+  }) => {
+    const { percent, steps = 5, download, label } = props;
 
     const strokeColor = useMemo(() => {
       if (download) {
@@ -19,16 +24,48 @@ const RenderProgress = memo(
     }, [percent]);
 
     return (
-      <Progress
-        steps={steps}
-        format={() => {
-          return (
-            <span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
-          );
-        }}
-        percent={percent}
-        strokeColor={strokeColor}
-      />
+      <>
+        {label ? (
+          <Tooltip title={label}>
+            <Progress
+              percentPosition={{ align: 'center', type: 'inner' }}
+              size={[undefined, 12]}
+              format={() => {
+                return (
+                  <span
+                    style={{
+                      color: 'var(--ant-color-text)'
+                    }}
+                  >
+                    {percent}%
+                  </span>
+                );
+              }}
+              percent={percent}
+              strokeColor={strokeColor}
+            ></Progress>
+          </Tooltip>
+        ) : (
+          <Progress
+            type="line"
+            percentPosition={{ align: 'center', type: 'inner' }}
+            size={[undefined, 12]}
+            format={() => {
+              return (
+                <span
+                  style={{
+                    color: 'var(--ant-color-text)'
+                  }}
+                >
+                  {percent}%
+                </span>
+              );
+            }}
+            percent={percent}
+            strokeColor={strokeColor}
+          ></Progress>
+        )}
+      </>
     );
   }
 );

src/components/seal-form/components/wrapper.less

@@ -2,6 +2,7 @@
   @wrapheight: 54px;
   @inputheight: 32px;
   @borderRadius: 8px;
+  @input-inner-padding: 12px;
 
   position: relative;
   display: flex;
@@ -115,7 +116,7 @@
   :global(.ant-select-selector) {
     border: none !important;
     padding-block: 5px;
-    padding-inline: 12px;
+    padding-inline: @input-inner-padding !important;
     box-shadow: none !important;
   }
 
@@ -167,7 +168,7 @@
     border: none;
     box-shadow: none;
     padding-block: 5px;
-    padding-inline: 12px;
+    padding-inline: @input-inner-padding;
     height: @inputheight !important;
 
     &.seal-textarea {
@@ -182,7 +183,7 @@
   :global(input.ant-input-number-input) {
     height: @inputheight !important;
     padding-block: 5px;
-    padding-inline: 12px;
+    padding-inline: @input-inner-padding;
   }
 
   :global(.ant-input-group) {

src/components/seal-table/styles/index.less

@@ -23,6 +23,7 @@
     margin-bottom: 20px;
     border-radius: var(--ant-table-header-border-radius);
     overflow: hidden;
+    box-shadow: var(--box-shadow-base);
   }
 
   .expanded-row {

src/config/global.d.ts

@@ -18,6 +18,7 @@ declare namespace Global {
     username: string;
     is_admin: boolean;
     full_name: string;
+    require_password_change: boolean;
     id: number;
   }
 }

src/global.less

@@ -7,6 +7,8 @@ html {
   // --color-fill-1: #fff;
   --color-fill-2: #fff;
   --color-fill-3: #f3f6fa;
+  --color-logs-bg: #1e1e1e;
+  --color-logs-text: #d4d4d4;
   --menu-border-radius-base: 8px;
   --border-radius-base: 16px;
   --border-radius-middle: 20px;

src/hooks/use-chunk-request.ts

@@ -199,7 +199,7 @@ const useSetChunkRequest = () => {
     retryCount.current = totalCount;
     clearTimeout(timer.current);
     axiosChunkRequest(requestConfig.current);
-    return axiosToken.current;
+    return axiosToken;
   };
 
   useEffect(() => {

src/layouts/index.tsx

@@ -87,7 +87,6 @@ export default (props: any) => {
     loading: false,
     setInitialState: null
   };
-  console.log('initialInfo==========', initialInfo);
   const { initialState, loading, setInitialState } = initialInfo;
 
   const userConfig = {
@@ -97,7 +96,6 @@ export default (props: any) => {
   };
 
   const formatMessage = (args) => {
-    console.log('formatMessage', args);
     return intl.formatMessage({ id: args.id });
   };
 

src/locales/en-US/models.ts

@@ -11,5 +11,6 @@ export default {
   'models.form.replicas': 'Replicas',
   'models.form.s3address': 'S3 Address',
   'models.openinplayground': 'Open in Playground',
-  'models.instances': 'instances'
+  'models.instances': 'instances',
+  'model.form.ollama.model': 'Ollama Model'
 };

src/locales/zh-CN/models.ts

@@ -11,5 +11,6 @@ export default {
   'models.form.replicas': '副本数',
   'models.form.s3address': 'S3 地址',
   'models.openinplayground': '在 Playground 中打开',
-  'models.instances': '实例'
+  'models.instances': '实例',
+  'model.form.ollama.model': 'Ollama 模型'
 };

src/pages/dashboard/components/active-table.tsx

@@ -16,7 +16,7 @@ const modelColumns = [
     dataIndex: 'gpu_utilization',
     key: 'gpu_utilization',
     render: (text: any, record: any) => (
-      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+      <ProgressBar percent={_.round(text, 0)}></ProgressBar>
     )
   },
   {
@@ -24,7 +24,7 @@ const modelColumns = [
     dataIndex: 'gpu_memory_utilization',
     key: 'gpu_memory_utilization',
     render: (text: any, record: any) => (
-      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+      <ProgressBar percent={_.round(text, 0)}></ProgressBar>
     )
   },
   {

src/pages/llmodels/components/add-modal.tsx

@@ -223,7 +223,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         >
           <SealAutoComplete
             filterOption
-            label="Ollama Model"
+            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
             required
             options={ollamaModelOptions}
           ></SealAutoComplete>

src/pages/llmodels/components/view-logs-modal.tsx

@@ -1,15 +1,17 @@
+import LogsViewer from '@/components/logs-viewer';
 import { Modal } from 'antd';
 import React from 'react';
 
 type ViewModalProps = {
-  content?: string;
+  content: string;
   title: string;
   open: boolean;
+  url: string;
   onCancel: () => void;
 };
 
 const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
-  const { title, open, onCancel, content } = props || {};
+  const { title, open, url, onCancel, content = '' } = props || {};
   if (!open) {
     return null;
   }
@@ -27,7 +29,14 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       style={{ top: '80px' }}
       footer={null}
     >
-      <div>{content}</div>
+      <LogsViewer
+        content={content}
+        height={400}
+        url={url}
+        params={{
+          follow: false
+        }}
+      ></LogsViewer>
     </Modal>
   );
 };

src/pages/llmodels/config/types.ts

@@ -28,6 +28,7 @@ export interface ModelInstanceListItem {
   s3_address: string;
   worker_id: number;
   worker_ip: string;
+  gpu_index: number;
   pid: number;
   port: number;
   state: string;

src/pages/llmodels/index.tsx

@@ -23,27 +23,26 @@ import {
 import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
 import {
-  App,
   Button,
   Col,
   Input,
   Modal,
-  Progress,
   Row,
   Space,
+  Tag,
   Tooltip,
   message
 } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   MODELS_API,
+  MODEL_INSTANCE_API,
   createModel,
   createModelInstance,
   deleteModel,
   deleteModelInstance,
-  queryModelInstanceLogs,
   queryModelInstancesList,
   queryModelsList,
   updateModel
@@ -54,7 +53,7 @@ import { status } from './config';
 import { FormData, ListItem, ModelInstanceListItem } from './config/types';
 
 const Models: React.FC = () => {
-  const { modal } = App.useApp();
+  // const { modal } = App.useApp();
   const access = useAccess();
   const intl = useIntl();
   const navigate = useNavigate();
@@ -75,6 +74,9 @@ const Models: React.FC = () => {
   const [currentData, setCurrentData] = useState<ListItem | undefined>(
     undefined
   );
+  const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
+
+  const chunkRequedtRef = useRef<any>();
   const timer = useRef<any>();
   let axiosToken = createAxiosToken();
   const [queryParams, setQueryParams] = useState({
@@ -152,8 +154,9 @@ const Models: React.FC = () => {
   };
 
   const createModelsChunkRequest = () => {
+    chunkRequedtRef.current?.current?.cancel?.();
     try {
-      setChunkRequest({
+      chunkRequedtRef.current = setChunkRequest({
         url: MODELS_API,
         params: {
           ..._.pickBy(
@@ -242,7 +245,6 @@ const Models: React.FC = () => {
   };
 
   const handleOpenPlayGround = (row: any) => {
-    console.log('handleOpenPlayGround', row);
     navigate(`/playground?model=${row.name}`);
   };
 
@@ -260,12 +262,34 @@ const Models: React.FC = () => {
     } catch (error) {}
   };
 
+  const handleStreamData = (data: any) => {
+    setLogContent(data);
+  };
+
   const handleViewLogs = async (row: any) => {
     try {
-      const data = await queryModelInstanceLogs(row.id);
-      setLogContent(data);
+      // const result = await fetchChunkedData({
+      //   url: `/v1${MODEL_INSTANCE_API}/${row.id}/logs`,
+      //   params: {
+      //     follow: false
+      //   },
+      //   method: 'GET'
+      // });
+      // if (!result) {
+      //   setLogContent('');
+      // } else {
+      //   const { reader, decoder } = result;
+      //   await readStreamData(reader, decoder, (chunk: any) => {
+      //     handleStreamData(chunk);
+      //   });
+      // }
+
+      setCurrentInstanceUrl(`${MODEL_INSTANCE_API}/${row.id}/logs`);
+
       setOpenLogModal(true);
-    } catch (error) {}
+    } catch (error) {
+      console.log('error:', error);
+    }
   };
   const handleDeleteInstace = (row: any) => {
     Modal.confirm({
@@ -293,7 +317,7 @@ const Models: React.FC = () => {
     setHoverChildIndex(-1);
   };
 
-  const getModelInstances = async (row: any) => {
+  const getModelInstances = useCallback(async (row: any) => {
     const params = {
       id: row.id,
       page: 1,
@@ -301,7 +325,7 @@ const Models: React.FC = () => {
     };
     const data = await queryModelInstancesList(params);
     return data.items || [];
-  };
+  }, []);
 
   const handleEdit = (row: ListItem) => {
     setCurrentData(row);
@@ -315,11 +339,11 @@ const Models: React.FC = () => {
   }, [queryParams]);
 
   useEffect(() => {
-    fetchDataByPolling();
+    createModelsChunkRequest();
     return () => {
-      clearInterval(timer.current);
+      chunkRequedtRef.current?.current?.cancel?.();
     };
-  }, []);
+  }, [queryParams]);
 
   const renderChildren = (list: any) => {
     return (
@@ -337,20 +361,19 @@ const Models: React.FC = () => {
             >
               <RowChildren>
                 <Row style={{ width: '100%' }} align="middle">
-                  <Col span={4}>
+                  <Col span={6}>
+                    <Tag>{item.gpu_index}</Tag>
                     {item.worker_ip}:{item.port}
                   </Col>
-                  <Col span={5}>
+                  <Col span={4}>
                     <span>{item.huggingface_filename}</span>
                   </Col>
-                  <Col span={4}>
-                    {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
-                  </Col>
+
                   <Col span={4}>
                     {item.state && (
                       <StatusTag
                         download={
-                          item.download_progress !== 100
+                          item.state !== 'Running'
                             ? { percent: item.download_progress }
                             : undefined
                         }
@@ -361,7 +384,10 @@ const Models: React.FC = () => {
                       ></StatusTag>
                     )}
                   </Col>
-                  <Col span={7}>
+                  <Col span={5}>
+                    {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
+                  </Col>
+                  <Col span={5}>
                     {hoverChildIndex === `${item.id}-${index}` && (
                       <Space size={20}>
                         <Tooltip
@@ -415,6 +441,7 @@ const Models: React.FC = () => {
               <Input
                 placeholder={intl.formatMessage({ id: 'common.filter.name' })}
                 style={{ width: 300 }}
+                size="large"
                 allowClear
                 onChange={handleNameChange}
               ></Input>
@@ -455,7 +482,7 @@ const Models: React.FC = () => {
           rowKey="id"
           expandable={true}
           onChange={handleTableChange}
-          pollingChildren={true}
+          pollingChildren={false}
           loadChildren={getModelInstances}
           renderChildren={renderChildren}
           pagination={{
@@ -470,26 +497,32 @@ const Models: React.FC = () => {
         >
           <SealColumn
             title={intl.formatMessage({ id: 'models.table.name' })}
-            dataIndex="name"
-            key="name"
+            dataIndex="huggingface_repo_id"
+            key="huggingface_repo_id"
             width={400}
-            span={8}
+            span={6}
             render={(text, record) => {
               return (
                 <>
                   <Tooltip>{text}</Tooltip>
-                  {record.progress && (
-                    <Progress
-                      percent={record.progress}
-                      strokeColor="var(--ant-color-primary)"
-                    />
-                  )}
                 </>
               );
             }}
           />
           <SealColumn
-            span={8}
+            title={intl.formatMessage({ id: 'models.form.source' })}
+            dataIndex="source"
+            key="source"
+            span={4}
+          />
+          <SealColumn
+            title={intl.formatMessage({ id: 'models.form.replicas' })}
+            dataIndex="replicas"
+            key="replicas"
+            span={4}
+          />
+          <SealColumn
+            span={5}
             title={intl.formatMessage({ id: 'common.table.createTime' })}
             dataIndex="created_at"
             key="createTime"
@@ -502,7 +535,7 @@ const Models: React.FC = () => {
             }}
           />
           <SealColumn
-            span={8}
+            span={5}
             title={intl.formatMessage({ id: 'common.table.operation' })}
             key="operation"
             render={(text, record) => {
@@ -558,8 +591,10 @@ const Models: React.FC = () => {
         onOk={handleModalOk}
       ></AddModal>
       <ViewLogsModal
+        url={currentInstanceUrl}
         title={intl.formatMessage({ id: 'common.button.viewlog' })}
         open={openLogModal}
+        content={logContent}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
     </>

src/pages/login/components/login-form.tsx

@@ -0,0 +1,142 @@
+import LogoIcon from '@/assets/images/logo.png';
+import SealInput from '@/components/seal-form/seal-input';
+import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
+import { SelectLang, history, useIntl, useModel } from '@umijs/max';
+import { Button, Checkbox, Form } from 'antd';
+import { useEffect } from 'react';
+import { flushSync } from 'react-dom';
+import { login } from '../apis';
+
+const renderLogo = () => {
+  return (
+    <div
+      style={{
+        width: '400px',
+        display: 'flex',
+        marginBottom: 24,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <img src={LogoIcon} alt="logo" style={{ width: '44px' }} />
+      <span style={{ fontSize: 34, marginLeft: 12 }}>SEAL</span>
+    </div>
+  );
+};
+const LoginForm: React.FC<{
+  setCurrentUser: (userInfo: any) => void;
+}> = ({ setCurrentUser }) => {
+  const { initialState, setInitialState } = useModel('@@initialState');
+  const { globalState, setGlobalState } = useModel('global');
+  const intl = useIntl();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    console.log('initstate===', {
+      initialState,
+      globalState
+    });
+  }, []);
+  const gotoDefaultPage = (userInfo: any) => {
+    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
+    history.push(pathname);
+  };
+  const fetchUserInfo = async () => {
+    const userInfo = await initialState?.fetchUserInfo?.();
+
+    if (userInfo) {
+      flushSync(() => {
+        setInitialState((s: any) => ({
+          ...s,
+          currentUser: userInfo
+        }));
+      });
+    }
+    return userInfo;
+  };
+
+  const handleLogin = async (values: any) => {
+    console.log('values', values, form);
+    try {
+      await login({
+        username: values.username,
+        password: values.password
+      });
+      const userInfo = await fetchUserInfo();
+      setGlobalState({
+        userInfo
+      });
+      // if (userInfo?.require_password_change) {
+      //   setCurrentUser(userInfo);
+      // } else {
+      //   setCurrentUser(null);
+      //   gotoDefaultPage(userInfo);
+      // }
+      gotoDefaultPage(userInfo);
+    } catch (error) {
+      console.log('error====', error);
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
+        <SelectLang icon={<GlobalOutlined />} reload={false} />
+      </div>
+      <Form
+        form={form}
+        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
+        onFinish={handleLogin}
+      >
+        <div>{renderLogo()}</div>
+        <Form.Item
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.username' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.form.username' })}
+            prefix={<UserOutlined />}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.password' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'common.form.password' })}
+          />
+        </Form.Item>
+        <Form.Item name="autoLogin">
+          <div style={{ paddingLeft: 10 }}>
+            <Checkbox>
+              {intl.formatMessage({ id: 'common.login.rember' })}
+            </Checkbox>
+          </div>
+        </Form.Item>
+        <Button htmlType="submit" type="primary" block>
+          {intl.formatMessage({ id: 'menu.login' })}
+        </Button>
+      </Form>
+    </div>
+  );
+};
+
+export default LoginForm;

src/pages/login/components/password-form.tsx

@@ -0,0 +1,93 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { GlobalOutlined, LockOutlined } from '@ant-design/icons';
+import { SelectLang, history, useIntl, useModel } from '@umijs/max';
+import { Button, Form, message } from 'antd';
+import { useEffect } from 'react';
+import { updatePassword } from '../apis';
+
+const PasswordForm: React.FC = () => {
+  const { globalState, setGlobalState } = useModel('global');
+  const [currentUser, setCurrentUser] = useState(null);
+  const intl = useIntl();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    console.log('initstate===', {
+      globalState
+    });
+  }, []);
+  const gotoDefaultPage = (userInfo: any) => {
+    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
+    history.push(pathname);
+  };
+
+  const handleSubmit = async (values: any) => {
+    console.log('values', values, form);
+    try {
+      await updatePassword({
+        new_password: values.new_password,
+        comfirm_password: values.comfirm_password
+      });
+      gotoDefaultPage(currentUser);
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      console.log('error====', error);
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
+        <SelectLang icon={<GlobalOutlined />} reload={false} />
+      </div>
+      <Form
+        form={form}
+        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
+        onFinish={handleSubmit}
+      >
+        <div>修改密码</div>
+
+        <Form.Item
+          name="new_password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.password' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'common.form.password' })}
+          />
+        </Form.Item>
+        <Form.Item
+          name="comfirm_password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.password' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'common.form.password' })}
+          />
+        </Form.Item>
+
+        <Button htmlType="submit" type="primary" block>
+          {intl.formatMessage({ id: 'common.button.submit' })}
+        </Button>
+      </Form>
+    </div>
+  );
+};
+
+export default PasswordForm;

src/pages/login/index.tsx

@@ -1,122 +1,13 @@
-import LogoIcon from '@/assets/images/logo.png';
-import SealInput from '@/components/seal-form/seal-input';
-import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
-import { SelectLang, history, useIntl, useModel } from '@umijs/max';
-import { Button, Checkbox, Form } from 'antd';
-import { flushSync } from 'react-dom';
-import { login } from './apis';
+import { useState } from 'react';
+import LoginForm from './components/login-form';
 
-const renderLogo = () => {
-  return (
-    <div
-      style={{
-        width: '400px',
-        display: 'flex',
-        marginBottom: 24,
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}
-    >
-      <img src={LogoIcon} alt="logo" style={{ width: '44px' }} />
-      <span style={{ fontSize: 34, marginLeft: 12 }}>SEAL</span>
-    </div>
-  );
-};
 const Login = () => {
-  const { initialState, setInitialState } = useModel('@@initialState');
-  const intl = useIntl();
-  const [form] = Form.useForm();
-
-  const gotoDefaultPage = (userInfo: any) => {
-    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
-    history.push(pathname);
-  };
-  const fetchUserInfo = async () => {
-    const userInfo = await initialState?.fetchUserInfo?.();
-
-    if (userInfo) {
-      flushSync(() => {
-        setInitialState((s: any) => ({
-          ...s,
-          currentUser: userInfo
-        }));
-      });
-    }
-    return userInfo;
-  };
-
-  const handleLogin = async (values: any) => {
-    console.log('values', values, form);
-    try {
-      await login({
-        username: values.username,
-        password: values.password
-      });
-      const userInfo = await fetchUserInfo();
-
-      gotoDefaultPage(userInfo);
-    } catch (error) {
-      console.log('error====', error);
-    }
-  };
+  const [currentUser, setCurrentUser] = useState(null);
 
   return (
     <div>
-      <div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
-        <SelectLang icon={<GlobalOutlined />} reload={false} />
-      </div>
-      <Form
-        form={form}
-        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
-        onFinish={handleLogin}
-      >
-        <div>{renderLogo()}</div>
-        <Form.Item
-          name="username"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.username' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'common.form.username' })}
-            prefix={<UserOutlined />}
-          />
-        </Form.Item>
-
-        <Form.Item
-          name="password"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.password' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Password
-            prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'common.form.password' })}
-          />
-        </Form.Item>
-        <Form.Item name="autoLogin">
-          <div style={{ paddingLeft: 10 }}>
-            <Checkbox>
-              {intl.formatMessage({ id: 'common.login.rember' })}
-            </Checkbox>
-          </div>
-        </Form.Item>
-        <Button htmlType="submit" type="primary" block>
-          {intl.formatMessage({ id: 'menu.login' })}
-        </Button>
-      </Form>
+      <LoginForm setCurrentUser={setCurrentUser} />
+      {/* <PasswordForm /> */}
     </div>
   );
 };

src/pages/playground/apis/index.ts

@@ -14,43 +14,3 @@ export async function execChatCompletions(params: any) {
 export const queryModelsList = async () => {
   return request(`${OPENAI_MODELS}`);
 };
-
-export const fetchChatStream = async (params: any) => {
-  const response = await fetch(`${CHAT_API}`, {
-    method: 'POST',
-    body: JSON.stringify(params),
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  });
-  if (!response.ok) {
-    throw new Error('Network response was not ok');
-    return null;
-  }
-  const reader = response?.body?.getReader();
-  const decoder = new TextDecoder('utf-8');
-  return {
-    reader,
-    decoder
-  };
-};
-
-export const receiveChatStream = async (
-  reader: any,
-  decoder: TextDecoder,
-  callback: (data: any) => void
-) => {
-  const { done, value } = await reader.read();
-
-  if (done) {
-    return;
-  }
-
-  let chunk = decoder.decode(value, { stream: true });
-  if (chunk.startsWith('data:')) {
-    chunk = chunk.substring('data:'.length);
-  }
-  const item = JSON.parse(chunk?.trim());
-  callback(item);
-  await receiveChatStream(reader, decoder, callback);
-};

src/pages/playground/components/ground-left.tsx

@@ -1,5 +1,6 @@
 import TransitionWrapper from '@/components/transition';
 import HotKeys from '@/config/hotkeys';
+import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { EyeInvisibleOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
@@ -7,7 +8,7 @@ import { Button, Input, Spin } from 'antd';
 import _ from 'lodash';
 import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { fetchChatStream, receiveChatStream } from '../apis';
+import { CHAT_API } from '../apis';
 import { Roles } from '../config';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
@@ -65,7 +66,12 @@ const MessageList: React.FC<MessageProps> = (props) => {
     setActiveIndex(messageList.length - 1);
   };
 
-  const joinMessage = (chunk: any) => {
+  const joinMessage = (str: any) => {
+    let data = str;
+    if (data.startsWith('data:')) {
+      data = data.substring('data:'.length);
+    }
+    const chunk = JSON.parse(data?.trim());
     if (_.get(chunk, 'choices.0.finish_reason')) {
       setTokenResult({
         ...chunk?.usage
@@ -104,14 +110,17 @@ const MessageList: React.FC<MessageProps> = (props) => {
         ...parameters,
         stream: true
       };
-      const result = await fetchChatStream(chatParams);
+      const result = await fetchChunkedData({
+        data: chatParams,
+        url: CHAT_API
+      });
 
       if (!result) {
         return;
       }
       const { reader, decoder } = result;
 
-      await receiveChatStream(reader, decoder, (data: any) => {
+      await readStreamData(reader, decoder, (data: any) => {
         joinMessage(data);
       });
       setLoading(false);
@@ -218,12 +227,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
           })}
           {loading && (
             <Spin>
-              <MessageItem
-                message={{ role: Roles.Assistant, content: '' }}
-                isFocus={false}
-                onDelete={() => {}}
-                updateMessage={() => {}}
-              />
+              <div style={{ height: '46px' }}></div>
             </Spin>
           )}
         </div>

src/pages/resources/apis/index.ts

@@ -1,7 +1,8 @@
 import { request } from '@umijs/max';
-import { ListItem } from '../config/types';
+import { GPUDeviceItem, ListItem } from '../config/types';
 
 export const WORKERS_API = '/workers';
+export const GPU_DEVICES_API = '/gpu-devices';
 
 export async function queryWorkersList(
   params: Global.Pagination & { query?: string }
@@ -11,3 +12,18 @@ export async function queryWorkersList(
     params
   });
 }
+
+export async function queryGpuDevicesList(
+  params: Global.Pagination & { query?: string }
+) {
+  return request<Global.PageResponse<GPUDeviceItem>>(`${GPU_DEVICES_API}`, {
+    methos: 'GET',
+    params
+  });
+}
+
+export async function queryGPUDeviceItem(id: string) {
+  return request<GPUDeviceItem>(`${GPU_DEVICES_API}/${id}`, {
+    methos: 'GET'
+  });
+}

src/pages/resources/components/gpus.tsx

@@ -1,15 +1,18 @@
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
-import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table } from 'antd';
-import { useState } from 'react';
-import { Gpu } from '../config/types';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { queryGpuDevicesList } from '../apis';
+import { GPUDeviceItem } from '../config/types';
 const { Column } = Table;
 
-const dataSource: Gpu[] = [
+const dataSource: GPUDeviceItem[] = [
   {
     id: 1,
     name: 'bj-web-service-1',
@@ -101,23 +104,32 @@ const dataSource: Gpu[] = [
 ];
 
 const Models: React.FC = () => {
+  const intl = useIntl();
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const [dataSource, setDataSource] = useState<GPUDeviceItem[]>([]);
   const [total, setTotal] = useState(10);
   const [loading, setLoading] = useState(false);
   const [queryParams, setQueryParams] = useState({
-    current: 1,
-    pageSize: 10,
-    name: ''
+    page: 1,
+    perPage: 10,
+    query: ''
   });
   const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
+    setQueryParams({
+      ...queryParams,
+      perPage: size
+    });
   };
 
-  const handlePageChange = (page: number, pageSize: number | undefined) => {
-    console.log(page, pageSize);
+  const handlePageChange = (page: number, perPage: number | undefined) => {
+    console.log(page, perPage);
+    setQueryParams({
+      ...queryParams,
+      page: page
+    });
   };
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {
@@ -125,7 +137,20 @@ const Models: React.FC = () => {
   };
 
   const fetchData = async () => {
-    console.log('fetchData');
+    setLoading(true);
+    try {
+      const params = {
+        ..._.pickBy(queryParams, (val: any) => !!val)
+      };
+      const res = await queryGpuDevicesList(params);
+
+      setDataSource(res.items);
+      setTotal(res.pagination.total);
+    } catch (error) {
+      console.log('error', error);
+    } finally {
+      setLoading(false);
+    }
   };
   const handleSearch = (e: any) => {
     fetchData();
@@ -134,10 +159,14 @@ const Models: React.FC = () => {
   const handleNameChange = (e: any) => {
     setQueryParams({
       ...queryParams,
-      name: e.target.value
+      query: e.target.value
     });
   };
 
+  useEffect(() => {
+    fetchData();
+  }, [queryParams]);
+
   return (
     <>
       <PageTools
@@ -146,7 +175,9 @@ const Models: React.FC = () => {
         left={
           <Space>
             <Input
-              placeholder="名称查询"
+              placeholder={intl.formatMessage({
+                id: 'common.filter.name'
+              })}
               style={{ width: 300 }}
               onChange={handleNameChange}
             ></Input>
@@ -166,46 +197,73 @@ const Models: React.FC = () => {
         onChange={handleTableChange}
         pagination={{
           showSizeChanger: true,
-          pageSize: 10,
-          current: 2,
+          pageSize: queryParams.perPage,
+          current: queryParams.page,
           total: total,
           hideOnSinglePage: true,
           onShowSizeChange: handleShowSizeChange,
           onChange: handlePageChange
         }}
       >
-        <Column title="GPU Name" dataIndex="hostname" key="hostname" />
+        <Column title="Name" dataIndex="name" key="name" />
         <Column
-          title="State"
-          dataIndex="state"
-          key="state"
-          render={(text, record) => {
-            return (
-              <StatusTag
-                statusValue={{
-                  status: 'success',
-                  text: 'ALIVE'
-                }}
-              ></StatusTag>
-            );
+          title="Index"
+          dataIndex="index"
+          key="index"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{record.index}</span>;
           }}
         />
-        <Column title="IP" dataIndex="address" key="address" />
+        <Column title="Worker Name" dataIndex="worker_name" key="worker_name" />
+        <Column title="Vendor" dataIndex="vendor" key="vendor" />
 
         <Column
           title="Temperature(˚C)"
-          dataIndex="Temperature"
+          dataIndex="temperature"
           key="Temperature"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{_.round(text, 1)}</span>;
+          }}
+        />
+        <Column
+          title="Core"
+          dataIndex="core"
+          key="Core"
+          render={(text, record: GPUDeviceItem) => {
+            return <span>{record.core?.total}</span>;
+          }}
+        />
+        <Column
+          title="GPU Utilization"
+          dataIndex="gpuUtil"
+          key="gpuUtil"
+          render={(text, record: GPUDeviceItem) => {
+            return (
+              <ProgressBar
+                percent={_.round(record.core?.utilization_rate, 2)}
+              ></ProgressBar>
+            );
+          }}
         />
-        <Column title="Core" dataIndex="core" key="Core" />
-        <Column title="GPU-Util" dataIndex="gpuUtil" key="gpuUtil" />
 
         <Column
           title="VRAM"
           dataIndex="GRAM"
           key="VRAM"
-          render={(text, record: Gpu) => {
-            return <ProgressBar percent={0}></ProgressBar>;
+          render={(text, record: GPUDeviceItem) => {
+            return (
+              <ProgressBar
+                percent={_.round(record.memory.utilization_rate, 0)}
+                label={
+                  <span className="flex-column">
+                    <span>
+                      Total: {convertFileSize(record.memory?.total, 0)}
+                    </span>
+                    <span>Used: {convertFileSize(record.memory?.used, 0)}</span>
+                  </span>
+                }
+              ></ProgressBar>
+            );
           }}
         />
       </Table>

src/pages/resources/components/test.tsx

@@ -1,22 +0,0 @@
-import SealTable from '@/components/seal-table';
-import SealColumn from '@/components/seal-table/components/seal-column';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-
-const Table = () => {
-  const dataSource = [{ name: 'test' }, { name: 'test2' }];
-  const rowSelection = useTableRowSelection();
-  return (
-    <SealTable
-      dataSource={dataSource}
-      rowKey="name"
-      loading={false}
-      rowSelection={rowSelection}
-      expandable={true}
-    >
-      <SealColumn title="Name" dataIndex="name" key="name" span={12} />
-      <SealColumn title="Status" dataIndex="status" key="status" span={12} />
-    </SealTable>
-  );
-};
-
-export default Table;

src/pages/resources/components/workers.tsx

@@ -3,13 +3,14 @@ import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryWorkersList } from '../apis';
-import { ListItem } from '../config/types';
+import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 const { Column } = Table;
 
 const Models: React.FC = () => {
@@ -44,7 +45,10 @@ const Models: React.FC = () => {
     }
   };
   const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
+    setQueryParams({
+      ...queryParams,
+      perPage: size
+    });
   };
 
   const handlePageChange = (page: number, perPage: number | undefined) => {
@@ -74,7 +78,30 @@ const Models: React.FC = () => {
     if (!val2 || !val1) {
       return 0;
     }
-    return _.round((val1 / val2) * 100, 2);
+    return _.round((val1 / val2) * 100, 0);
+  };
+
+  const calcStorage = (files: Filesystem[]) => {
+    const mountRoot = _.find(
+      files,
+      (item: Filesystem) => item.mount_point === '/'
+    );
+    return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
+  };
+
+  const renderStorageTooltip = (files: Filesystem[]) => {
+    const mountRoot = _.find(
+      files,
+      (item: Filesystem) => item.mount_point === '/'
+    );
+    return mountRoot ? (
+      <span className="flex-column">
+        <span>Total: {convertFileSize(mountRoot?.total, 0)}</span>
+        <span>Used: {convertFileSize(mountRoot?.used, 0)}</span>
+      </span>
+    ) : (
+      0
+    );
   };
   useEffect(() => {
     fetchData();
@@ -148,7 +175,7 @@ const Models: React.FC = () => {
           render={(text, record: ListItem) => {
             return (
               <ProgressBar
-                percent={_.round(record?.status?.cpu.utilization_rate, 2)}
+                percent={_.round(record?.status?.cpu.utilization_rate, 0)}
               ></ProgressBar>
             );
           }}
@@ -164,6 +191,16 @@ const Models: React.FC = () => {
                   record?.status?.memory.used,
                   record?.status?.memory.total
                 )}
+                label={
+                  <span className="flex-column">
+                    <span>
+                      Total: {convertFileSize(record?.status?.memory.total, 0)}
+                    </span>
+                    <span>
+                      Used: {convertFileSize(record?.status?.memory.used, 0)}
+                    </span>
+                  </span>
+                }
               ></ProgressBar>
             );
           }}
@@ -174,30 +211,19 @@ const Models: React.FC = () => {
           key="GPU"
           render={(text, record: ListItem) => {
             return (
-              <Space>
-                {record?.status?.gpu.map((item) => {
+              <span className="flex-column">
+                {record?.status?.gpu_devices.map((item, index) => {
                   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 className="flex-center" key={index}>
+                      <span className="m-r-5">[{index}]</span>
+                      <ProgressBar
+                        key={index}
+                        percent={_.round(item.core.utilization_rate, 0)}
+                      ></ProgressBar>
                     </span>
                   );
                 })}
-              </Space>
+              </span>
             );
           }}
         />
@@ -208,28 +234,39 @@ const Models: React.FC = () => {
           key="VRAM"
           render={(text, record: ListItem) => {
             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 className="flex-column">
+                {record?.status?.gpu_devices.map(
+                  (item: GPUDeviceItem, index) => {
+                    return (
+                      <span key={index}>
+                        {item.memory.is_unified_memory ? (
+                          'Unified Memory'
+                        ) : (
+                          <span className="flex-center">
+                            <span className="m-r-5">[{index}]</span>
+                            <ProgressBar
+                              key={index}
+                              percent={_.round(item.memory.utilization_rate, 0)}
+                              label={
+                                <span className="flex-column">
+                                  <span>
+                                    Total:{' '}
+                                    {convertFileSize(item.memory?.total, 0)}
+                                  </span>
+                                  <span>
+                                    Used:{' '}
+                                    {convertFileSize(item.memory?.used, 0)}
+                                  </span>
+                                </span>
+                              }
+                            ></ProgressBar>
+                          </span>
+                        )}
                       </span>
-                    </span>
-                  );
-                })}
-              </Space>
+                    );
+                  }
+                )}
+              </span>
             );
           }}
         />
@@ -238,7 +275,12 @@ const Models: React.FC = () => {
           dataIndex="storage"
           key="storage"
           render={(text, record: ListItem) => {
-            return <ProgressBar percent={0}></ProgressBar>;
+            return (
+              <ProgressBar
+                percent={calcStorage(record.status?.filesystem)}
+                label={renderStorageTooltip(record.status.filesystem)}
+              ></ProgressBar>
+            );
           }}
         />
       </Table>

src/pages/resources/config/types.ts

@@ -17,6 +17,29 @@ export interface Gpu {
   temperature: number;
 }
 
+export interface GPUDeviceItem {
+  uuid: string;
+  name: string;
+  vendor: string;
+  index: number;
+  core: {
+    total: number;
+    utilization_rate: number;
+  };
+  memory: {
+    total: number;
+    utilization_rate: number;
+    is_unified_memory: boolean;
+    used: number;
+    allocated: number;
+  };
+  temperature: number;
+  id: string;
+  worker_id: number;
+  worker_name: string;
+  worker_ip: string;
+}
+
 export interface Filesystem {
   name: string;
   mount_point: string;
@@ -52,7 +75,7 @@ export interface ListItem {
       used: number;
       allocated: number;
     };
-    gpu: Gpu[];
+    gpu_devices: GPUDeviceItem[];
     swap: {
       total: number;
       used: number;

src/utils/fetch-chunk-data.ts

@@ -0,0 +1,53 @@
+import qs from 'query-string';
+
+/**
+ *
+ * @param params data: for post request, params: for get request
+ * @returns
+ */
+export const fetchChunkedData = async (params: {
+  data?: any;
+  url: string;
+  params?: any;
+  method?: string;
+}) => {
+  const method = params.method || 'POST';
+  let url = params.url;
+  if (params.params) {
+    url = `${url}?${qs.stringify(params.params)}`;
+  }
+  const response = await fetch(url, {
+    method,
+    body: method === 'POST' ? JSON.stringify(params.data) : null,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+    return null;
+  }
+  const reader = response?.body?.getReader();
+  const decoder = new TextDecoder('utf-8');
+  return {
+    reader,
+    decoder
+  };
+};
+
+export const readStreamData = async (
+  reader: any,
+  decoder: TextDecoder,
+  callback: (data: any) => void
+) => {
+  const { done, value } = await reader.read();
+
+  if (done) {
+    return;
+  }
+
+  let chunk = decoder.decode(value, { stream: true });
+  console.log('chunk==========', chunk);
+  callback(chunk);
+  await readStreamData(reader, decoder, callback);
+};

src/utils/index.ts

@@ -19,20 +19,21 @@ export const handleBatchRequest = async (
   return Promise.all(list.map((item) => fn(item)));
 };
 
-export const convertFileSize = (sizeInBytes: number) => {
+export const convertFileSize = (sizeInBytes: number, prec?: number) => {
+  const precision = prec ?? 2;
   if (!sizeInBytes) {
     return '0 B';
   }
   if (sizeInBytes < 1024) {
-    return `${sizeInBytes.toFixed(2)} B`;
+    return `${sizeInBytes.toFixed(precision)} B`;
   } else if (sizeInBytes < 1024 * 1024) {
-    return `${(sizeInBytes / 1024).toFixed(2)} KB`;
+    return `${(sizeInBytes / 1024).toFixed(precision)} KiB`;
   } else if (sizeInBytes < 1024 * 1024 * 1024) {
-    return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
+    return `${(sizeInBytes / (1024 * 1024)).toFixed(precision)} MiB`;
   } else if (sizeInBytes < 1024 * 1024 * 1024 * 1024) {
-    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(precision)} GiB`;
   } else {
-    return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
+    return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(precision)} TiB`;
   }
 };