chore: watch api

2024-06-28 17:14:34 +08:00
parent 871bca1916
commit cf0113e8d8
35 changed files with 1171 additions and 627 deletions
@@ -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>
    )
  },
  {
@@ -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>
@@ -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>
  );
 };
@@ -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;
@@ -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>
    </>
@@ -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;
@@ -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;
@@ -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>
  );
 };
@@ -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);
-};
@@ -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>
@@ -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'
+  });
+}
@@ -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>
@@ -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;
@@ -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>
@@ -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;