chore: api request

2024-06-10 21:14:37 +08:00
parent 6a60561401
commit f491b5dfb1
24 changed files with 685 additions and 312 deletions
@@ -0,0 +1,33 @@
+import { request } from '@umijs/max';
+import { FormData, ListItem } from '../config/types';
+
+export const MODELS_API = '/models';
+
+export async function queryModelsList(
+  params: Global.Pagination & { query?: string }
+) {
+  return request<Global.PageResponse<ListItem>>(`${MODELS_API}`, {
+    methos: 'GET',
+    params
+  });
+}
+
+export async function createModel(params: { data: FormData }) {
+  return request(`${MODELS_API}`, {
+    method: 'POST',
+    data: params.data
+  });
+}
+
+export async function deleteModel(id: number) {
+  return request(`${MODELS_API}/${id}`, {
+    method: 'DELETE'
+  });
+}
+
+export async function updateModel(params: { id: number; data: FormData }) {
+  return request(`${MODELS_API}/${params.id}`, {
+    method: 'PUT',
+    data: params.data
+  });
+}
@@ -1,34 +1,92 @@
 import ModalFooter from '@/components/modal-footer';
-import FieldWrapper from '@/components/seal-form/field-wrapper';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import { Form, Modal, Slider } from 'antd';
+import { Form, Modal } from 'antd';
+import { useEffect } from 'react';
+import { FormData } from '../config/types';

 type AddModalProps = {
  title: string;
  action: PageActionType;
  open: boolean;
-  onOk: () => void;
+  onOk: (values: FormData) => void;
  onCancel: () => void;
 };

 const sourceOptions = [
-  { label: 'Huggingface', value: 'huggingface' },
-  { label: 'S3', value: 's3' }
+  { label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
+  { label: 'S3', value: 's3', key: 's3' }
 ];
+
 const AddModal: React.FC<AddModalProps> = (props) => {
  const { title, action, open, onOk, onCancel } = props || {};
  if (!open) {
    return null;
  }
-  console.log('modal open', open);
  const [form] = Form.useForm();
+  const modelSource = Form.useWatch('source', form);
+
+  const initFormValue = () => {
+    if (action === PageAction.CREATE && open) {
+      form.setFieldsValue({
+        source: 'huggingface'
+      });
+    }
+  };
+
+  useEffect(() => {
+    initFormValue();
+  }, [open]);
+
+  const renderHuggingfaceFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="huggingface_repo_id"
+          rules={[{ required: true }]}
+        >
+          <SealInput.Input label="Huggingface ID" required></SealInput.Input>
+        </Form.Item>
+        {/* <Form.Item<FormData>
+          name="huggingface_filename"
+          rules={[{ required: true }]}
+        >
+          <SealInput.Input
+            label="Huggingface File Name"
+            required
+          ></SealInput.Input>
+        </Form.Item> */}
+      </>
+    );
+  };
+
+  const renderS3Fields = () => {
+    return (
+      <>
+        <Form.Item<FormData> name="s3_address" rules={[{ required: true }]}>
+          <SealInput.Input label="S3 Address" required></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const handleSourceChange = (value: string) => {
+    console.log('source change', value);
+  };
+  const handleSumit = () => {
+    form.submit();
+  };
+  const handleOnFinish = (values: FormData) => {
+    console.log('onFinish', values);
+    onOk(values);
+  };
  return (
    <Modal
      title={title}
      open={open}
-      onOk={onOk}
+      onOk={handleSumit}
      onCancel={onCancel}
      destroyOnClose={true}
      closeIcon={false}
@@ -36,30 +94,29 @@ const AddModal: React.FC<AddModalProps> = (props) => {
      keyboard={false}
      width={600}
      styles={{}}
-      footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
+      footer={
+        <ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
+      }
    >
-      <Form name="addModalForm" form={form} onFinish={onOk}>
-        <Form.Item name="name" rules={[{ required: true }]}>
+      <Form name="addModalForm" form={form} onFinish={onOk} preserve={false}>
+        <Form.Item<FormData> name="name" rules={[{ required: true }]}>
          <SealInput.Input
            label="Name"
            required
            description="description info"
          ></SealInput.Input>
        </Form.Item>
-        <Form.Item name="source" rules={[{ required: true }]}>
-          <SealSelect label="Model Source" options={sourceOptions}></SealSelect>
-        </Form.Item>
-        <Form.Item name="id" rules={[{ required: true }]}>
-          <SealSelect label="Huggingface ID" showSearch></SealSelect>
-        </Form.Item>
-        <Form.Item name="tokenPers" rules={[{ required: true }]}>
-          <FieldWrapper
-            label="tokenPers"
+        <Form.Item<FormData> name="source" rules={[{ required: true }]}>
+          <SealSelect
+            label="Source"
+            options={sourceOptions}
            required
-            description="description info"
-          >
-            <Slider defaultValue={30} style={{ width: '100%' }} />
-          </FieldWrapper>
+            onChange={handleSourceChange}
+          ></SealSelect>
+        </Form.Item>
+        {modelSource === 's3' ? renderS3Fields() : renderHuggingfaceFields()}
+        <Form.Item<FormData> name="description">
+          <SealInput.TextArea label="Description"></SealInput.TextArea>
        </Form.Item>
      </Form>
    </Modal>
@@ -0,0 +1,31 @@
+export const modelInstanceCols = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: 'Create Time',
+    dataIndex: 'createTime',
+    key: 'createTime'
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: 'Utilization',
+    dataIndex: 'utilization',
+    key: 'utilization'
+  },
+  {
+    title: 'Host Name',
+    dataIndex: 'hostName',
+    key: 'hostName'
+  },
+  {
+    title: 'Operation',
+    key: 'Operation'
+  }
+];
@@ -0,0 +1,20 @@
+export interface ListItem {
+  source: string;
+  huggingface_repo_id: string;
+  huggingface_file_name: string;
+  s3Address: string;
+  name: string;
+  description: string;
+  id: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface FormData {
+  source: string;
+  huggingface_repo_id: string;
+  huggingface_filename: string;
+  s3_address: string;
+  name: string;
+  description: string;
+}
@@ -5,9 +5,7 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import {
  DeleteOutlined,
-  DownOutlined,
  PlusOutlined,
-  RightOutlined,
  SyncOutlined,
  WechatWorkOutlined
 } from '@ant-design/icons';
@@ -24,30 +22,14 @@ import {
  Tooltip,
  message
 } from 'antd';
-import { StrictMode, useState } from 'react';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { createModel, deleteModel, queryModelsList } from './apis';
 import AddModal from './components/add-modal';
+import { FormData, ListItem } from './config/types';
 const { Column } = Table;

-const dataSource = [
-  {
-    key: '1',
-    name: 'llama3:latest',
-    progress: 30,
-    transition: true,
-    createTime: '2024-05-22 12:20:10'
-  },
-  {
-    key: '2',
-    name: 'openbmb/MiniCPM-Llama3-V-2_5',
-    createTime: '2024-05-19 13:30:22'
-  },
-  {
-    key: '3',
-    name: 'openbmb/MiniCPM-Llama3-V-2_5',
-    createTime: '2024-05-18 10:28:32'
-  }
-];
-
 const Models: React.FC = () => {
  const { modal } = App.useApp();
  const access = useAccess();
@@ -62,17 +44,43 @@ const Models: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
  const [title, setTitle] = useState<string>('');
+  const [dataSource, setDataSource] = useState<ListItem[]>([]);
  const [queryParams, setQueryParams] = useState({
-    current: 1,
-    pageSize: 10,
-    name: ''
+    page: 1,
+    perPage: 10,
+    query: ''
  });
-  const handleShowSizeChange = (current: number, size: number) => {
-    console.log(current, size);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const params = {
+        ..._.pickBy(queryParams, (val: any) => !!val)
+      };
+      const res = await queryModelsList(params);
+      console.log('res=======', res);
+      setDataSource(res.items);
+      setTotal(res.pagination.total);
+    } catch (error) {
+      console.log('error', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleShowSizeChange = (page: number, size: number) => {
+    console.log(page, size);
+    setQueryParams({
+      ...queryParams,
+      perPage: size
+    });
  };

  const handlePageChange = (page: number, pageSize: number | undefined) => {
    console.log(page, pageSize);
+    setQueryParams({
+      ...queryParams,
+      page: page
+    });
  };

  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
@@ -80,9 +88,6 @@ const Models: React.FC = () => {
    setSortOrder(sorter.order);
  };

-  const fetchData = async () => {
-    console.log('fetchData');
-  };
  const handleSearch = (e: any) => {
    fetchData();
  };
@@ -90,7 +95,7 @@ const Models: React.FC = () => {
  const handleNameChange = (e: any) => {
    setQueryParams({
      ...queryParams,
-      name: e.target.value
+      query: e.target.value
    });
  };

@@ -104,17 +109,32 @@ const Models: React.FC = () => {
    console.log('click', e);
  };

-  const handleModalOk = () => {
-    console.log('handleModalOk');
+  const handleModalOk = async (data: FormData) => {
+    console.log('handleModalOk', data);
+    await createModel({ data });
    setOpenAddModal(false);
+    message.success('successfully!');
  };

  const handleModalCancel = () => {
    console.log('handleModalCancel');
    setOpenAddModal(false);
  };
-
-  const handleDelete = () => {
+  const handleDelete = async (row: any) => {
+    Modal.confirm({
+      title: '',
+      content: 'Are you sure you want to delete the selected models?',
+      async onOk() {
+        await deleteModel(row.id);
+        message.success('successfully!');
+        fetchData();
+      },
+      onCancel() {
+        console.log('Cancel');
+      }
+    });
+  };
+  const handleDeleteBatch = () => {
    Modal.confirm({
      title: '',
      content: 'Are you sure you want to delete the selected models?',
@@ -132,8 +152,15 @@ const Models: React.FC = () => {
    console.log('handleOpenPlayGround', row);
    navigate('/playground');
  };
+
+  // request data
+
+  useEffect(() => {
+    fetchData();
+  }, [queryParams]);
+
  return (
-    <StrictMode>
+    <>
      <PageContainer
        ghost
        header={{
@@ -148,6 +175,7 @@ const Models: React.FC = () => {
              <Input
                placeholder="按名称查询"
                style={{ width: 300 }}
+                allowClear
                onChange={handleNameChange}
              ></Input>
              <Button
@@ -171,7 +199,7 @@ const Models: React.FC = () => {
                <Button
                  icon={<DeleteOutlined />}
                  danger
-                  onClick={handleDelete}
+                  onClick={handleDeleteBatch}
                  disabled={!rowSelection.selectedRowKeys.length}
                >
                  Delete
@@ -184,27 +212,17 @@ const Models: React.FC = () => {
          dataSource={dataSource}
          rowSelection={rowSelection}
          loading={loading}
+          rowKey="id"
          onChange={handleTableChange}
          pagination={{
            showSizeChanger: true,
-            pageSize: 10,
-            current: 2,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
            total: total,
            hideOnSinglePage: true,
            onShowSizeChange: handleShowSizeChange,
            onChange: handlePageChange
          }}
-          expandable={{
-            expandIcon: ({ expanded, onExpand, record }) => {
-              return expanded ? (
-                <DownOutlined onClick={(e) => onExpand(record, e)} />
-              ) : (
-                <RightOutlined onClick={(e) => onExpand(record, e)} />
-              );
-            },
-            expandedRowRender: (record) => <p style={{ margin: 0 }}>list</p>,
-            rowExpandable: (record) => record.name !== 'Not Expandable'
-          }}
        >
          <Column
            title="Model Name"
@@ -227,12 +245,15 @@ const Models: React.FC = () => {
          />
          <Column
            title="Create Time"
-            dataIndex="createTime"
+            dataIndex="created_at"
            key="createTime"
            defaultSortOrder="descend"
            sortOrder={sortOrder}
            showSorterTooltip={false}
            sorter={true}
+            render={(val, row) => {
+              return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
+            }}
          />
          <Column
            title="Operation"
@@ -253,6 +274,7 @@ const Models: React.FC = () => {
                      size="small"
                      type="primary"
                      danger
+                      onClick={() => handleDelete(record)}
                      icon={<DeleteOutlined></DeleteOutlined>}
                    ></Button>
                  </Tooltip>
@@ -269,7 +291,7 @@ const Models: React.FC = () => {
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      ></AddModal>
-    </StrictMode>
+    </>
  );
 };