style: common component style
This commit is contained in:
jialin
@@ -0,0 +1,63 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { CopyOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { Form, Modal } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
const AddModal: React.FC<AddModalProps> = ({
|
||||
title,
|
||||
action,
|
||||
open,
|
||||
onOk,
|
||||
onCancel
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const Suffix = (
|
||||
<SyncOutlined
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: '#1677ff'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const RenderCopyButton = () => {
|
||||
return <CopyOutlined></CopyOutlined>;
|
||||
};
|
||||
|
||||
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="addAPIKey" form={form} onFinish={onOk}>
|
||||
<Form.Item name="name" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Display Name" required></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="secretkey" rules={[{ required: true }]}>
|
||||
<SealInput.Input
|
||||
label="Secret Key"
|
||||
addonAfter={<RenderCopyButton></RenderCopyButton>}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddModal;
|
||||
@@ -0,0 +1,246 @@
|
||||
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,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import AddAPIKeyModal from './components/add-apikey';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'local',
|
||||
secretKey: `auk_uzem...owsa`,
|
||||
lastusedTime: '2024-05-22 12:20:10',
|
||||
createTime: '2024-05-20 12:13:25'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'dev',
|
||||
secretKey: `auk_uzem...okwa`,
|
||||
lastusedTime: '2024-05-19 13:30:22',
|
||||
createTime: '2024-05-18 10:28:32'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'prod',
|
||||
secretKey: `auk_uzem...uuds`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-17 08:21:09'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'test',
|
||||
secretKey: `auk_uzem...uksa`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-16 13:33:23'
|
||||
}
|
||||
];
|
||||
|
||||
const Models: React.FC = () => {
|
||||
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 handleAddUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Add User');
|
||||
};
|
||||
|
||||
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 keys?',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
message.success('successfully!');
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle('Edit User');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'API Keys'
|
||||
}}
|
||||
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={handleAddUser}
|
||||
>
|
||||
Add API-key
|
||||
</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="Name" dataIndex="name" key="name" width={400} />
|
||||
<Column title="Secret Key" dataIndex="secretKey" key="secretKey" />
|
||||
<Column
|
||||
title="Create Time"
|
||||
dataIndex="createTime"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={true}
|
||||
/>
|
||||
<Column
|
||||
title="Last Used"
|
||||
dataIndex="lastusedTime"
|
||||
key="lastusedTime"
|
||||
/>
|
||||
<Column
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<Tooltip title="编辑">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={handleEditUser}
|
||||
icon={<EditOutlined></EditOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</PageContainer>
|
||||
<AddAPIKeyModal
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddAPIKeyModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Models;
|
||||
@@ -15,9 +15,9 @@ const models = [
|
||||
const dataSource: NodeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.2',
|
||||
hostname: 'node-1',
|
||||
name: 'bj-web-service-1',
|
||||
address: '183.14.31.136',
|
||||
hostname: 'bj-web-service-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -33,13 +33,13 @@ const dataSource: NodeItem[] = [
|
||||
gram: '24 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.5',
|
||||
hostname: 'node-2',
|
||||
name: 'bj-db-service-2',
|
||||
address: '172.24.1.36',
|
||||
hostname: 'bj-db-service-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -55,29 +55,51 @@ const dataSource: NodeItem[] = [
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '192.168.1.3',
|
||||
address: '192.168.1.3',
|
||||
hostname: 'node-3',
|
||||
name: 'guangzhou-computed-node-2',
|
||||
address: '170.10.2.10',
|
||||
hostname: 'guangzhou-computed-node-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 4,
|
||||
gpu: 2,
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 1,
|
||||
gpu: 0.5,
|
||||
memory: '28 GiB',
|
||||
gram: '6 Gib'
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'hangzhou-cache-node-1',
|
||||
address: '115.2.21.10',
|
||||
hostname: 'hangzhou-cache-node-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 4,
|
||||
gpu: 2.5,
|
||||
memory: '40 GiB',
|
||||
gram: '16 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
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 } from 'antd';
|
||||
import { Form, Modal, Slider } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
@@ -11,6 +12,11 @@ type AddModalProps = {
|
||||
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) {
|
||||
@@ -33,14 +39,27 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
|
||||
>
|
||||
<Form name="addModalForm" form={form} onFinish={onOk}>
|
||||
<Form.Item name="displayName" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Display Name"></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="catagory" rules={[{ required: true }]}>
|
||||
<SealSelect label="Catagory"></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item name="name" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Model Name"></SealInput.Input>
|
||||
<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>
|
||||
|
||||
@@ -30,17 +30,19 @@ const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'llama3:latest',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
progress: 30,
|
||||
transition: true,
|
||||
createTime: '2024-05-22 12:20:10'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'meta-llama/Meta-Llama-3-8B-nksrlsl-esLscs-1:latest',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
name: 'openbmb/MiniCPM-Llama3-V-2_5',
|
||||
createTime: '2024-05-19 13:30:22'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'apple/OpenELM-3B-Instructor',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
name: 'openbmb/MiniCPM-Llama3-V-2_5',
|
||||
createTime: '2024-05-18 10:28:32'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -92,7 +94,7 @@ const Models: React.FC = () => {
|
||||
const handleAddModal = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Import Module');
|
||||
setTitle('Deploy Model');
|
||||
};
|
||||
|
||||
const handleClickMenu = (e: any) => {
|
||||
@@ -197,10 +199,12 @@ const Models: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip>{text}</Tooltip>
|
||||
<Progress
|
||||
percent={30}
|
||||
strokeColor="var(--ant-color-primary)"
|
||||
/>
|
||||
{record.progress && (
|
||||
<Progress
|
||||
percent={record.progress}
|
||||
strokeColor="var(--ant-color-primary)"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
@@ -218,7 +222,7 @@ const Models: React.FC = () => {
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
return !record.transition ? (
|
||||
<Space>
|
||||
<Tooltip title="Open in PlayGround">
|
||||
<Button
|
||||
@@ -237,7 +241,7 @@ const Models: React.FC = () => {
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
) : null;
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Progress } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import { NodeItem } from '../config/types';
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default RenderProgress;
|
||||
+56
-59
@@ -4,18 +4,18 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
import { SyncOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Progress, Space, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo, useState } from 'react';
|
||||
import { Button, Input, Space, Table } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import RenderProgress from './components/render-progress';
|
||||
import { NodeItem } from './config/types';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource: NodeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.2',
|
||||
hostname: 'node-1',
|
||||
name: 'bj-web-service-1',
|
||||
address: '183.14.31.136',
|
||||
hostname: 'bj-web-service-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -31,13 +31,13 @@ const dataSource: NodeItem[] = [
|
||||
gram: '24 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.5',
|
||||
hostname: 'node-2',
|
||||
name: 'bj-db-service-2',
|
||||
address: '172.24.1.36',
|
||||
hostname: 'bj-db-service-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -53,7 +53,51 @@ const dataSource: NodeItem[] = [
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'guangzhou-computed-node-2',
|
||||
address: '170.10.2.10',
|
||||
hostname: 'guangzhou-computed-node-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'hangzhou-cache-node-1',
|
||||
address: '115.2.21.10',
|
||||
hostname: 'hangzhou-cache-node-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 4,
|
||||
gpu: 2.5,
|
||||
memory: '40 GiB',
|
||||
gram: '16 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -62,7 +106,7 @@ const Models: React.FC = () => {
|
||||
const { sortOrder, setSortOrder } = useTableSort({
|
||||
defaultSortOrder: 'descend'
|
||||
});
|
||||
const [total, setTotal] = useState(100);
|
||||
const [total, setTotal] = useState(10);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
current: 1,
|
||||
@@ -95,53 +139,6 @@ const Models: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
|
||||
Reference in New Issue
Block a user