root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: table no data

Browse Source
This commit is contained in:
jialin
2025-01-21 14:25:14 +08:00
parent 6185485c68
commit d1369e765a
10 changed files with 694 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/common.less
+4
View File
@@ -232,3 +232,7 @@
list-style-type: decimal; list-style-type: decimal;
padding-left: 16px; padding-left: 16px;
} }
.gap-16 {
gap: 16px;
}
src/components/seal-table/components/row-skeleton.tsx
+13
View File
@@ -0,0 +1,13 @@
import { Checkbox } from 'antd';
import '../styles/skeleton.less';
const RowSkeleton = () => {
return (
<div className="row-skeleton">
<div className="holder"></div>
<Checkbox></Checkbox>
</div>
);
};
export default RowSkeleton;
src/components/seal-table/index.tsx
+4 -1
View File
@@ -118,7 +118,10 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
if (!props.dataSource.length) { if (!props.dataSource.length) {
return ( return (
<div className="empty-wrapper"> <div className="empty-wrapper">
<Empty image={loadend ? Empty.PRESENTED_IMAGE_SIMPLE : null}></Empty> <Empty
image={loadend ? Empty.PRESENTED_IMAGE_SIMPLE : null}
description={loadend ? undefined : null}
></Empty>
</div> </div>
); );
} }
src/components/seal-table/styles/skeleton.less
Vendored
+13
View File
@@ -0,0 +1,13 @@
.row-skeleton {
display: flex;
justify-content: flex-start;
background-color: var(--color-fill-sider);
padding: 16px;
height: 68px;
border-radius: var(--border-radius-base);
align-items: center;
.holder {
width: 33px;
}
}
src/pages/api-keys/index.tsx
+129 -103
View File
@@ -10,7 +10,15 @@ import { handleBatchRequest } from '@/utils';
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons'; import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, Tooltip } from 'antd'; import {
Button,
ConfigProvider,
Empty,
Input,
Space,
Table,
Tooltip
} from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import _ from 'lodash'; import _ from 'lodash';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
@@ -31,10 +39,12 @@ const APIKeys: React.FC = () => {
const [dataSource, setDataSource] = useState<{ const [dataSource, setDataSource] = useState<{
dataList: ListItem[]; dataList: ListItem[];
loading: boolean; loading: boolean;
loadend: boolean;
total: number; total: number;
}>({ }>({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: false,
total: 0 total: 0
}); });
const [openAddModal, setOpenAddModal] = useState(false); const [openAddModal, setOpenAddModal] = useState(false);
@@ -71,6 +81,7 @@ const APIKeys: React.FC = () => {
setDataSource({ setDataSource({
dataList: res.items || [], dataList: res.items || [],
loading: false, loading: false,
loadend: true,
total: res.pagination.total total: res.pagination.total
}); });
} catch (error) { } catch (error) {
@@ -78,6 +89,7 @@ const APIKeys: React.FC = () => {
setDataSource({ setDataSource({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: true,
total: dataSource.total total: dataSource.total
}); });
} }
@@ -139,6 +151,18 @@ const APIKeys: React.FC = () => {
}); });
}; };
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
if (
!dataSource.loading &&
dataSource.loadend &&
!dataSource.dataList.length
) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
}
return <div></div>;
};
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [queryParams]); }, [queryParams]);
@@ -205,110 +229,112 @@ const APIKeys: React.FC = () => {
</Space> </Space>
} }
></PageTools> ></PageTools>
<Table <ConfigProvider renderEmpty={renderEmpty}>
dataSource={dataSource.dataList} <Table
rowSelection={rowSelection} dataSource={dataSource.dataList}
loading={dataSource.loading} rowSelection={rowSelection}
rowKey="id" loading={dataSource.loading}
onChange={handleTableChange} rowKey="id"
pagination={{ onChange={handleTableChange}
showSizeChanger: true, pagination={{
pageSize: queryParams.perPage, showSizeChanger: true,
current: queryParams.page, pageSize: queryParams.perPage,
total: dataSource.total, current: queryParams.page,
hideOnSinglePage: queryParams.perPage === 10, total: dataSource.total,
onChange: handlePageChange hideOnSinglePage: queryParams.perPage === 10,
}} onChange: handlePageChange
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
ellipsis={{
showTitle: false
}} }}
render={(text, record) => { >
return ( <Column
<AutoTooltip ghost style={{ maxWidth: 400 }}> title={intl.formatMessage({ id: 'common.table.name' })}
{text} dataIndex="name"
</AutoTooltip> key="name"
); ellipsis={{
}} showTitle: false
/> }}
render={(text, record) => {
return (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
</AutoTooltip>
);
}}
/>
<Column <Column
title={intl.formatMessage({ id: 'apikeys.form.expiretime' })} title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
dataIndex="expires_at" dataIndex="expires_at"
key="expiration" key="expiration"
ellipsis={{ ellipsis={{
showTitle: false showTitle: false
}} }}
render={(text, record) => { render={(text, record) => {
return ( return (
<AutoTooltip ghost> <AutoTooltip ghost>
{text {text
? dayjs(text).format('YYYY-MM-DD HH:mm:ss') ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
: intl.formatMessage({ : intl.formatMessage({
id: 'apikeys.form.expiration.never' id: 'apikeys.form.expiration.never'
})} })}
</AutoTooltip> </AutoTooltip>
); );
}} }}
/> />
<Column <Column
title={intl.formatMessage({ id: 'common.table.description' })} title={intl.formatMessage({ id: 'common.table.description' })}
dataIndex="description" dataIndex="description"
key="description" key="description"
ellipsis={{ ellipsis={{
showTitle: false showTitle: false
}} }}
render={(text, record) => { render={(text, record) => {
return <AutoTooltip ghost>{text}</AutoTooltip>; return <AutoTooltip ghost>{text}</AutoTooltip>;
}} }}
/> />
<Column <Column
title={intl.formatMessage({ id: 'common.table.createTime' })} title={intl.formatMessage({ id: 'common.table.createTime' })}
dataIndex="created_at" dataIndex="created_at"
key="createTime" key="createTime"
defaultSortOrder="descend" defaultSortOrder="descend"
sortOrder={sortOrder} sortOrder={sortOrder}
showSorterTooltip={false} showSorterTooltip={false}
sorter={false} sorter={false}
ellipsis={{ ellipsis={{
showTitle: false showTitle: false
}} }}
render={(text, record) => { render={(text, record) => {
return ( return (
<AutoTooltip ghost> <AutoTooltip ghost>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')} {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip> </AutoTooltip>
); );
}} }}
/> />
<Column <Column
title={intl.formatMessage({ id: 'common.table.operation' })} title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation" key="operation"
ellipsis={{ ellipsis={{
showTitle: false showTitle: false
}} }}
render={(text, record: ListItem) => { render={(text, record: ListItem) => {
return ( return (
<Space size={20}> <Space size={20}>
<Tooltip <Tooltip
title={intl.formatMessage({ id: 'common.button.delete' })} title={intl.formatMessage({ id: 'common.button.delete' })}
> >
<Button <Button
onClick={() => handleDelete(record)} onClick={() => handleDelete(record)}
size="small" size="small"
danger danger
icon={<DeleteOutlined></DeleteOutlined>} icon={<DeleteOutlined></DeleteOutlined>}
></Button> ></Button>
</Tooltip> </Tooltip>
</Space> </Space>
); );
}} }}
/> />
</Table> </Table>
</ConfigProvider>
</PageContainer> </PageContainer>
<AddAPIKeyModal <AddAPIKeyModal
open={openAddModal} open={openAddModal}
src/pages/llmodels/index.tsx
-1
View File
@@ -161,7 +161,6 @@ const Models: React.FC = () => {
const updateInstanceHandler = (list: any) => { const updateInstanceHandler = (list: any) => {
// filter the data // filter the data
_.each(list, (data: any) => { _.each(list, (data: any) => {
console.log('updateInstanceHandler====', data);
updateInstanceChunkedList(data); updateInstanceChunkedList(data);
}); });
}; };
src/pages/resources/components/gpus.tsx
+132 -120
View File
@@ -5,7 +5,7 @@ import useTableSort from '@/hooks/use-table-sort';
import { convertFileSize } from '@/utils'; import { convertFileSize } from '@/utils';
import { SyncOutlined } from '@ant-design/icons'; import { SyncOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table } from 'antd'; import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import { memo, useEffect, useState } from 'react'; import { memo, useEffect, useState } from 'react';
import { queryGpuDevicesList } from '../apis'; import { queryGpuDevicesList } from '../apis';
@@ -21,10 +21,12 @@ const GPUList: React.FC = () => {
const [dataSource, setDataSource] = useState<{ const [dataSource, setDataSource] = useState<{
dataList: GPUDeviceItem[]; dataList: GPUDeviceItem[];
loading: boolean; loading: boolean;
loadend: boolean;
total: number; total: number;
}>({ }>({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: false,
total: 0 total: 0
}); });
const [queryParams, setQueryParams] = useState({ const [queryParams, setQueryParams] = useState({
@@ -60,12 +62,14 @@ const GPUList: React.FC = () => {
setDataSource({ setDataSource({
dataList: res.items || [], dataList: res.items || [],
loading: false, loading: false,
loadend: true,
total: res.pagination.total total: res.pagination.total
}); });
} catch (error) { } catch (error) {
setDataSource({ setDataSource({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: true,
total: dataSource.total total: dataSource.total
}); });
console.log('error', error); console.log('error', error);
@@ -83,6 +87,18 @@ const GPUList: React.FC = () => {
}); });
}; };
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
if (
!dataSource.loading &&
dataSource.loadend &&
!dataSource.dataList.length
) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
}
return <div></div>;
};
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [queryParams]); }, [queryParams]);
@@ -111,131 +127,127 @@ const GPUList: React.FC = () => {
</Space> </Space>
} }
></PageTools> ></PageTools>
<Table <ConfigProvider renderEmpty={renderEmpty}>
dataSource={dataSource.dataList} <Table
loading={dataSource.loading} dataSource={dataSource.dataList}
rowKey="id" loading={dataSource.loading}
onChange={handleTableChange} rowKey="id"
pagination={{ onChange={handleTableChange}
showSizeChanger: true, pagination={{
pageSize: queryParams.perPage, showSizeChanger: true,
current: queryParams.page, pageSize: queryParams.perPage,
total: dataSource.total, current: queryParams.page,
hideOnSinglePage: queryParams.perPage === 10, total: dataSource.total,
onChange: handlePageChange hideOnSinglePage: queryParams.perPage === 10,
}} onChange: handlePageChange
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
render={(text, record) => {
return (
<AutoTooltip ghost style={{ width: '100%' }}>
{text}
</AutoTooltip>
);
}} }}
/> >
<Column <Column
title={intl.formatMessage({ id: 'resources.table.index' })} title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="index" dataIndex="name"
key="index" key="name"
render={(text, record: GPUDeviceItem) => { render={(text, record) => {
return <span>{record.index}</span>; return (
}} <AutoTooltip ghost style={{ width: '100%' }}>
/>
<Column
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
{text} {text}
</AutoTooltip> </AutoTooltip>
</span> );
); }}
}} />
/> <Column
<Column title={intl.formatMessage({ id: 'resources.table.index' })}
title={intl.formatMessage({ id: 'resources.table.vender' })} dataIndex="index"
dataIndex="vendor" key="index"
key="vendor" render={(text, record: GPUDeviceItem) => {
/> return <span>{record.index}</span>;
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
{text}
</AutoTooltip>
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
dataIndex="vendor"
key="vendor"
/>
<Column <Column
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`} title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
dataIndex="temperature" dataIndex="temperature"
key="Temperature" key="Temperature"
render={(text, record: GPUDeviceItem) => { render={(text, record: GPUDeviceItem) => {
return <span>{text ? _.round(text, 1) : '-'}</span>; return <span>{text ? _.round(text, 1) : '-'}</span>;
}} }}
/> />
{/* <Column <Column
title={intl.formatMessage({ id: 'resources.table.core' })} title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
dataIndex="core" dataIndex="gpuUtil"
key="Core" key="gpuUtil"
render={(text, record: GPUDeviceItem) => { render={(text, record: GPUDeviceItem) => {
return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>; return (
}} <>
/> */} {record.core ? (
<Column <ProgressBar
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })} percent={_.round(record.core?.utilization_rate, 2)}
dataIndex="gpuUtil" ></ProgressBar>
key="gpuUtil" ) : (
render={(text, record: GPUDeviceItem) => { '-'
return ( )}
<> </>
{record.core ? ( );
<ProgressBar }}
percent={_.round(record.core?.utilization_rate, 2)} />
></ProgressBar>
) : (
'-'
)}
</>
);
}}
/>
<Column <Column
title={intl.formatMessage({ id: 'resources.table.vramutilization' })} title={intl.formatMessage({
dataIndex="VRAM" id: 'resources.table.vramutilization'
key="VRAM" })}
render={(text, record: GPUDeviceItem) => { dataIndex="VRAM"
return ( key="VRAM"
<ProgressBar render={(text, record: GPUDeviceItem) => {
percent={ return (
record.memory?.used <ProgressBar
? _.round(record.memory?.utilization_rate, 0) percent={
: _.round( record.memory?.used
record.memory?.allocated / record.memory?.total, ? _.round(record.memory?.utilization_rate, 0)
0 : _.round(
) * 100 record.memory?.allocated / record.memory?.total,
} 0
label={ ) * 100
<span className="flex-column"> }
<span> label={
{intl.formatMessage({ id: 'resources.table.total' })}:{' '} <span className="flex-column">
{convertFileSize(record.memory?.total, 0)} <span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(record.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(
record.memory?.used || record.memory?.allocated,
0
)}
</span>
</span> </span>
<span> }
{intl.formatMessage({ id: 'resources.table.used' })}:{' '} ></ProgressBar>
{convertFileSize( );
record.memory?.used || record.memory?.allocated, }}
0 />
)} </Table>
</span> </ConfigProvider>
</span>
}
></ProgressBar>
);
}}
/>
</Table>
</> </>
); );
}; };
src/pages/resources/components/workers.tsx
+267 -239
View File
@@ -16,7 +16,16 @@ import {
SyncOutlined SyncOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, Tooltip, message } from 'antd'; import {
Button,
ConfigProvider,
Empty,
Input,
Space,
Table,
Tooltip,
message
} from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@@ -55,10 +64,12 @@ const Resources: React.FC = () => {
const [dataSource, setDataSource] = useState<{ const [dataSource, setDataSource] = useState<{
dataList: ListItem[]; dataList: ListItem[];
loading: boolean; loading: boolean;
loadend: boolean;
total: number; total: number;
}>({ }>({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: false,
total: 0 total: 0
}); });
const [queryParams, setQueryParams] = useState({ const [queryParams, setQueryParams] = useState({
@@ -88,12 +99,14 @@ const Resources: React.FC = () => {
setDataSource({ setDataSource({
dataList: res.items, dataList: res.items,
loading: false, loading: false,
loadend: true,
total: res.pagination.total total: res.pagination.total
}); });
} catch (error) { } catch (error) {
setDataSource({ setDataSource({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: true,
total: dataSource.total total: dataSource.total
}); });
console.log('error', error); console.log('error', error);
@@ -239,6 +252,18 @@ const Resources: React.FC = () => {
} }
}; };
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
if (
!dataSource.loading &&
dataSource.loadend &&
!dataSource.dataList.length
) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
}
return <div></div>;
};
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [queryParams]); }, [queryParams]);
@@ -295,256 +320,259 @@ const Resources: React.FC = () => {
</Space> </Space>
} }
></PageTools> ></PageTools>
<Table <ConfigProvider renderEmpty={renderEmpty}>
style={{ width: '100%' }} <Table
dataSource={dataSource.dataList} style={{ width: '100%' }}
loading={dataSource.loading} dataSource={dataSource.dataList}
rowKey="id" loading={dataSource.loading}
onChange={handleTableChange} rowKey="id"
rowSelection={rowSelection} onChange={handleTableChange}
pagination={{ rowSelection={rowSelection}
showSizeChanger: true, pagination={{
pageSize: queryParams.perPage, showSizeChanger: true,
current: queryParams.page, pageSize: queryParams.perPage,
total: dataSource.total, current: queryParams.page,
hideOnSinglePage: queryParams.perPage === 10, total: dataSource.total,
onChange: handlePageChange hideOnSinglePage: queryParams.perPage === 10,
}} onChange: handlePageChange
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={100}
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>{record.name}</span>
</AutoTooltip>
);
}} }}
/> >
<Column <Column
title={intl.formatMessage({ id: 'resources.table.labels' })} title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="labels" dataIndex="name"
key="labels" key="name"
width={200} width={100}
render={(text, record: ListItem) => { render={(text, record: ListItem) => {
return ( return (
<div <AutoTooltip ghost maxWidth={240}>
style={{ <span>{record.name}</span>
display: 'flex', </AutoTooltip>
flexWrap: 'wrap', );
gap: 6, }}
maxWidth: 200 />
}} <Column
> title={intl.formatMessage({ id: 'resources.table.labels' })}
{_.map(record.labels, (item: any, index: string) => { dataIndex="labels"
return ( key="labels"
<AutoTooltip width={200}
key={index} render={(text, record: ListItem) => {
className="m-r-0" return (
maxWidth={120} <div
style={{ style={{
paddingInline: 8, display: 'flex',
borderRadius: 12 flexWrap: 'wrap',
}} gap: 6,
> maxWidth: 200
{index}:{item} }}
</AutoTooltip> >
); {_.map(record.labels, (item: any, index: string) => {
})}
</div>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.status' })}
dataIndex="state"
key="state"
render={(text, record: ListItem) => {
return (
<StatusTag
statusValue={{
status: status[record.state] as any,
text: WorkerStatusMapValue[record.state],
message: record.state_message
}}
></StatusTag>
);
}}
/>
<Column title="IP" dataIndex="ip" key="address" />
<Column
title="CPU"
dataIndex="CPU"
key="CPU"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.memory' })}
dataIndex="memory"
key="Memory"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={formateUtilazation(
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={
<span className="flex-column">
<span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(record?.status?.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(record?.status?.memory?.used, 0)}
</span>
</span>
}
></ProgressBar>
);
}}
/>
<Column
title="GPU"
dataIndex="GPU"
key="GPU"
render={(text, record: ListItem) => {
return (
<span className="flex-column flex-gap-2">
{_.map(
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return ( return (
<span className="flex-center" key={index}> <AutoTooltip
<span key={index}
className="m-r-5" className="m-r-0"
style={{ display: 'flex', width: 25 }} maxWidth={120}
> style={{
[{item.index}] paddingInline: 8,
</span> borderRadius: 12
{item.core ? ( }}
<ProgressBar >
key={index} {index}:{item}
percent={_.round(item.core?.utilization_rate, 0)} </AutoTooltip>
></ProgressBar>
) : (
'-'
)}
</span>
); );
})}
</div>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.status' })}
dataIndex="state"
key="state"
render={(text, record: ListItem) => {
return (
<StatusTag
statusValue={{
status: status[record.state] as any,
text: WorkerStatusMapValue[record.state],
message: record.state_message
}}
></StatusTag>
);
}}
/>
<Column title="IP" dataIndex="ip" key="address" />
<Column
title="CPU"
dataIndex="CPU"
key="CPU"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.memory' })}
dataIndex="memory"
key="Memory"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={formateUtilazation(
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={
<span className="flex-column">
<span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(record?.status?.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(record?.status?.memory?.used, 0)}
</span>
</span>
} }
)} ></ProgressBar>
</span> );
); }}
}} />
/> <Column
title="GPU"
<Column dataIndex="GPU"
title={intl.formatMessage({ id: 'resources.table.vram' })} key="GPU"
dataIndex="VRAM" render={(text, record: ListItem) => {
key="VRAM" return (
render={(text, record: ListItem) => { <span className="flex-column flex-gap-2">
return ( {_.map(
<span className="flex-column flex-gap-2"> _.sortBy(record?.status?.gpu_devices || [], ['index']),
{_.map( (item: GPUDeviceItem, index: string) => {
_.sortBy(record?.status?.gpu_devices || [], ['index']), return (
(item: GPUDeviceItem, index: string) => { <span className="flex-center" key={index}>
return (
<span key={index}>
<span className="flex-center">
<span <span
className="m-r-5" className="m-r-5"
style={{ display: 'flex', width: 25 }} style={{ display: 'flex', width: 25 }}
> >
[{item.index}] [{item.index}]
</span> </span>
<ProgressBar {item.core ? (
key={index} <ProgressBar
percent={ key={index}
item.memory?.used percent={_.round(item.core?.utilization_rate, 0)}
? _.round(item.memory?.utilization_rate, 0) ></ProgressBar>
: _.round( ) : (
(item.memory?.allocated / '-'
item.memory?.total) *
100,
0
)
}
label={
<span className="flex-column">
<span>
{intl.formatMessage({
id: 'resources.table.total'
})}
: {convertFileSize(item.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({
id: 'resources.table.used'
})}
:{' '}
{convertFileSize(
item.memory?.used || item.memory?.allocated,
0
)}
</span>
</span>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
title={intl.formatMessage({
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined className="m-l-5" />
</Tooltip>
)} )}
</span> </span>
</span> );
); }
} )}
)} </span>
</span> );
); }}
}} />
/>
<Column <Column
title={intl.formatMessage({ id: 'resources.table.disk' })} title={intl.formatMessage({ id: 'resources.table.vram' })}
dataIndex="storage" dataIndex="VRAM"
key="storage" key="VRAM"
render={(text, record: ListItem) => { render={(text, record: ListItem) => {
return ( return (
<ProgressBar <span className="flex-column flex-gap-2">
percent={calcStorage(record.status?.filesystem)} {_.map(
label={renderStorageTooltip(record.status.filesystem)} _.sortBy(record?.status?.gpu_devices || [], ['index']),
></ProgressBar> (item: GPUDeviceItem, index: string) => {
); return (
}} <span key={index}>
/> <span className="flex-center">
<Column <span
title={intl.formatMessage({ id: 'common.table.operation' })} className="m-r-5"
key="operation" style={{ display: 'flex', width: 25 }}
render={(text, record: ListItem) => { >
return ( [{item.index}]
<DropdownButtons </span>
items={ActionList} <ProgressBar
onSelect={(val) => handleSelect(val, record)} key={index}
></DropdownButtons> percent={
); item.memory?.used
}} ? _.round(item.memory?.utilization_rate, 0)
/> : _.round(
</Table> (item.memory?.allocated /
item.memory?.total) *
100,
0
)
}
label={
<span className="flex-column">
<span>
{intl.formatMessage({
id: 'resources.table.total'
})}
: {convertFileSize(item.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({
id: 'resources.table.used'
})}
:{' '}
{convertFileSize(
item.memory?.used ||
item.memory?.allocated,
0
)}
</span>
</span>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
title={intl.formatMessage({
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined className="m-l-5" />
</Tooltip>
)}
</span>
</span>
);
}
)}
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.disk' })}
dataIndex="storage"
key="storage"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={calcStorage(record.status?.filesystem)}
label={renderStorageTooltip(record.status.filesystem)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record: ListItem) => {
return (
<DropdownButtons
items={ActionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
);
}}
/>
</Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal> <DeleteModal ref={modalRef}></DeleteModal>
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker> <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
<UpdateLabels <UpdateLabels
src/pages/users/config/types.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export interface ListItem {
export interface FormData { export interface FormData {
username: string; username: string;
id?: number; id?: number;
is_admin: boolean; is_admin: boolean | string;
full_name: string; full_name: string;
password: string; password: string;
} }
src/pages/users/index.tsx
+131 -105
View File
@@ -18,7 +18,15 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, message } from 'antd'; import {
Button,
ConfigProvider,
Empty,
Input,
Space,
Table,
message
} from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import _ from 'lodash'; import _ from 'lodash';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
@@ -40,10 +48,12 @@ const Users: React.FC = () => {
const [dataSource, setDataSource] = useState<{ const [dataSource, setDataSource] = useState<{
dataList: ListItem[]; dataList: ListItem[];
loading: boolean; loading: boolean;
loadend: boolean;
total: number; total: number;
}>({ }>({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: false,
total: 0 total: 0
}); });
const [action, setAction] = useState<PageActionType>(PageAction.CREATE); const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -85,12 +95,14 @@ const Users: React.FC = () => {
setDataSource({ setDataSource({
dataList: res.items || [], dataList: res.items || [],
loading: false, loading: false,
loadend: true,
total: res.pagination.total total: res.pagination.total
}); });
} catch (error) { } catch (error) {
setDataSource({ setDataSource({
dataList: [], dataList: [],
loading: false, loading: false,
loadend: true,
total: dataSource.total total: dataSource.total
}); });
console.log('error', error); console.log('error', error);
@@ -199,6 +211,18 @@ const Users: React.FC = () => {
} }
}; };
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
if (
!dataSource.loading &&
dataSource.loadend &&
!dataSource.dataList.length
) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
}
return <div></div>;
};
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [queryParams]); }, [queryParams]);
@@ -265,111 +289,113 @@ const Users: React.FC = () => {
</Space> </Space>
} }
></PageTools> ></PageTools>
<Table <ConfigProvider renderEmpty={renderEmpty}>
dataSource={dataSource.dataList} <Table
rowSelection={rowSelection} dataSource={dataSource.dataList}
loading={dataSource.loading} rowSelection={rowSelection}
rowKey="id" loading={dataSource.loading}
onChange={handleTableChange} rowKey="id"
pagination={{ onChange={handleTableChange}
showSizeChanger: true, pagination={{
pageSize: queryParams.perPage, showSizeChanger: true,
current: queryParams.page, pageSize: queryParams.perPage,
total: dataSource.total, current: queryParams.page,
hideOnSinglePage: queryParams.perPage === 10, total: dataSource.total,
onChange: handlePageChange hideOnSinglePage: queryParams.perPage === 10,
}} onChange: handlePageChange
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="username"
key="name"
ellipsis={{
showTitle: false
}} }}
render={(text, record) => { >
return ( <Column
<AutoTooltip ghost minWidth={20}> title={intl.formatMessage({ id: 'common.table.name' })}
{text} dataIndex="username"
</AutoTooltip> key="name"
); ellipsis={{
}} showTitle: false
/> }}
<Column render={(text, record) => {
title={intl.formatMessage({ id: 'users.table.role' })} return (
dataIndex="role" <AutoTooltip ghost minWidth={20}>
key="role" {text}
ellipsis={{ </AutoTooltip>
showTitle: false );
}} }}
render={(text, record: ListItem) => { />
return record.is_admin ? ( <Column
<AutoTooltip ghost minWidth={50}> title={intl.formatMessage({ id: 'users.table.role' })}
<UserSwitchOutlined className="size-16" /> dataIndex="role"
<span className="m-l-5"> key="role"
{intl.formatMessage({ id: 'users.form.admin' })} ellipsis={{
</span> showTitle: false
</AutoTooltip> }}
) : ( render={(text, record: ListItem) => {
<AutoTooltip ghost minWidth={50}> return record.is_admin ? (
<UserOutlined className="size-16" /> <AutoTooltip ghost minWidth={50}>
<span className="m-l-5"> <UserSwitchOutlined className="size-16" />
{intl.formatMessage({ id: 'users.form.user' })} <span className="m-l-5">
</span> {intl.formatMessage({ id: 'users.form.admin' })}
</AutoTooltip> </span>
); </AutoTooltip>
}} ) : (
/> <AutoTooltip ghost minWidth={50}>
<Column <UserOutlined className="size-16" />
title={intl.formatMessage({ id: 'users.form.fullname' })} <span className="m-l-5">
dataIndex="full_name" {intl.formatMessage({ id: 'users.form.user' })}
key="full_name" </span>
ellipsis={{ </AutoTooltip>
showTitle: false );
}} }}
render={(text, record) => { />
return ( <Column
<AutoTooltip ghost minWidth={20}> title={intl.formatMessage({ id: 'users.form.fullname' })}
{text} dataIndex="full_name"
</AutoTooltip> key="full_name"
); ellipsis={{
}} showTitle: false
/> }}
<Column render={(text, record) => {
title={intl.formatMessage({ id: 'common.table.createTime' })} return (
dataIndex="created_at" <AutoTooltip ghost minWidth={20}>
key="createTime" {text}
defaultSortOrder="descend" </AutoTooltip>
sortOrder={sortOrder} );
showSorterTooltip={false} }}
sorter={false} />
ellipsis={{ <Column
showTitle: false title={intl.formatMessage({ id: 'common.table.createTime' })}
}} dataIndex="created_at"
render={(text, record) => { key="createTime"
return ( defaultSortOrder="descend"
<AutoTooltip ghost minWidth={20}> sortOrder={sortOrder}
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')} showSorterTooltip={false}
</AutoTooltip> sorter={false}
); ellipsis={{
}} showTitle: false
/> }}
<Column render={(text, record) => {
title={intl.formatMessage({ id: 'common.table.operation' })} return (
key="operation" <AutoTooltip ghost minWidth={20}>
ellipsis={{ {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
showTitle: false </AutoTooltip>
}} );
render={(text, record: ListItem) => { }}
return ( />
<DropdownButtons <Column
items={ActionList} title={intl.formatMessage({ id: 'common.table.operation' })}
onSelect={(val) => handleSelect(val, record)} key="operation"
></DropdownButtons> ellipsis={{
); showTitle: false
}} }}
/> render={(text, record: ListItem) => {
</Table> return (
<DropdownButtons
items={ActionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
);
}}
/>
</Table>
</ConfigProvider>
</PageContainer> </PageContainer>
<AddModal <AddModal
open={openAddModal} open={openAddModal}