feat: user settings
This commit is contained in:
jialin
@@ -0,0 +1,69 @@
|
||||
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 { PageActionType } from '@/config/types';
|
||||
import { Form, Modal, Slider } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const sourceOptions = [
|
||||
{ label: 'Huggingface', value: 'huggingface' },
|
||||
{ label: 'S3', value: '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();
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
open={open}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
|
||||
>
|
||||
<Form name="addModalForm" form={form} onFinish={onOk}>
|
||||
<Form.Item 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"
|
||||
required
|
||||
description="description info"
|
||||
>
|
||||
<Slider defaultValue={30} style={{ width: '100%' }} />
|
||||
</FieldWrapper>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddModal;
|
||||
@@ -0,0 +1,260 @@
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
WechatWorkOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import {
|
||||
App,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
Progress,
|
||||
Space,
|
||||
Table,
|
||||
Tooltip,
|
||||
message
|
||||
} from 'antd';
|
||||
import { StrictMode, useState } from 'react';
|
||||
import AddModal from './components/add-modal';
|
||||
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 intl = useIntl();
|
||||
const navigate = useNavigate();
|
||||
const rowSelection = useTableRowSelection();
|
||||
const { sortOrder, setSortOrder } = useTableSort({
|
||||
defaultSortOrder: 'descend'
|
||||
});
|
||||
const [total, setTotal] = useState(100);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
name: ''
|
||||
});
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
console.log(current, size);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
};
|
||||
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
console.log('handleTableChange=======', pagination, filters, sorter);
|
||||
setSortOrder(sorter.order);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
console.log('fetchData');
|
||||
};
|
||||
const handleSearch = (e: any) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleNameChange = (e: any) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
name: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddModal = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Deploy Model');
|
||||
};
|
||||
|
||||
const handleClickMenu = (e: any) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const handleModalOk = () => {
|
||||
console.log('handleModalOk');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '',
|
||||
content: 'Are you sure you want to delete the selected models?',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
message.success('successfully!');
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenPlayGround = (row: any) => {
|
||||
console.log('handleOpenPlayGround', row);
|
||||
navigate('/playground');
|
||||
};
|
||||
return (
|
||||
<StrictMode>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Models'
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="按名称查询"
|
||||
style={{ width: 300 }}
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-primary)' }}
|
||||
onClick={handleSearch}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<Button
|
||||
icon={<PlusOutlined></PlusOutlined>}
|
||||
type="primary"
|
||||
onClick={handleAddModal}
|
||||
>
|
||||
{intl?.formatMessage?.({ id: 'models.button.deploy' })}
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDelete}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
rowSelection={rowSelection}
|
||||
loading={loading}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
current: 2,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title="Model Name"
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={400}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip>{text}</Tooltip>
|
||||
{record.progress && (
|
||||
<Progress
|
||||
percent={record.progress}
|
||||
strokeColor="var(--ant-color-primary)"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Create Time"
|
||||
dataIndex="createTime"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={true}
|
||||
/>
|
||||
<Column
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return !record.transition ? (
|
||||
<Space>
|
||||
<Tooltip title="Open in PlayGround">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => handleOpenPlayGround(record)}
|
||||
icon={<WechatWorkOutlined />}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
) : null;
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</PageContainer>
|
||||
<AddModal
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddModal>
|
||||
</StrictMode>
|
||||
);
|
||||
};
|
||||
|
||||
export default Models;
|
||||
Reference in New Issue
Block a user