style: table no data
This commit is contained in:
jialin
@@ -232,3 +232,7 @@
|
||||
list-style-type: decimal;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.gap-16 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -118,7 +118,10 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
|
||||
if (!props.dataSource.length) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
+13
@@ -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;
|
||||
}
|
||||
}
|
||||
+129
-103
@@ -10,7 +10,15 @@ import { handleBatchRequest } from '@/utils';
|
||||
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
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 _ from 'lodash';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
@@ -31,10 +39,12 @@ const APIKeys: React.FC = () => {
|
||||
const [dataSource, setDataSource] = useState<{
|
||||
dataList: ListItem[];
|
||||
loading: boolean;
|
||||
loadend: boolean;
|
||||
total: number;
|
||||
}>({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: false,
|
||||
total: 0
|
||||
});
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
@@ -71,6 +81,7 @@ const APIKeys: React.FC = () => {
|
||||
setDataSource({
|
||||
dataList: res.items || [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: res.pagination.total
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -78,6 +89,7 @@ const APIKeys: React.FC = () => {
|
||||
setDataSource({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
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(() => {
|
||||
fetchData();
|
||||
}, [queryParams]);
|
||||
@@ -205,110 +229,112 @@ const APIKeys: React.FC = () => {
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost style={{ maxWidth: 400 }}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost style={{ maxWidth: 400 }}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
|
||||
dataIndex="expires_at"
|
||||
key="expiration"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
{text
|
||||
? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
|
||||
: intl.formatMessage({
|
||||
id: 'apikeys.form.expiration.never'
|
||||
})}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.description' })}
|
||||
dataIndex="description"
|
||||
key="description"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return <AutoTooltip ghost>{text}</AutoTooltip>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.createTime' })}
|
||||
dataIndex="created_at"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={false}
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<Space size={20}>
|
||||
<Tooltip
|
||||
title={intl.formatMessage({ id: 'common.button.delete' })}
|
||||
>
|
||||
<Button
|
||||
onClick={() => handleDelete(record)}
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
|
||||
dataIndex="expires_at"
|
||||
key="expiration"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
{text
|
||||
? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
|
||||
: intl.formatMessage({
|
||||
id: 'apikeys.form.expiration.never'
|
||||
})}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.description' })}
|
||||
dataIndex="description"
|
||||
key="description"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return <AutoTooltip ghost>{text}</AutoTooltip>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.createTime' })}
|
||||
dataIndex="created_at"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={false}
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<Space size={20}>
|
||||
<Tooltip
|
||||
title={intl.formatMessage({ id: 'common.button.delete' })}
|
||||
>
|
||||
<Button
|
||||
onClick={() => handleDelete(record)}
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
<AddAPIKeyModal
|
||||
open={openAddModal}
|
||||
|
||||
@@ -161,7 +161,6 @@ const Models: React.FC = () => {
|
||||
const updateInstanceHandler = (list: any) => {
|
||||
// filter the data
|
||||
_.each(list, (data: any) => {
|
||||
console.log('updateInstanceHandler====', data);
|
||||
updateInstanceChunkedList(data);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -5,7 +5,7 @@ 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 { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { queryGpuDevicesList } from '../apis';
|
||||
@@ -21,10 +21,12 @@ const GPUList: React.FC = () => {
|
||||
const [dataSource, setDataSource] = useState<{
|
||||
dataList: GPUDeviceItem[];
|
||||
loading: boolean;
|
||||
loadend: boolean;
|
||||
total: number;
|
||||
}>({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: false,
|
||||
total: 0
|
||||
});
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
@@ -60,12 +62,14 @@ const GPUList: React.FC = () => {
|
||||
setDataSource({
|
||||
dataList: res.items || [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: res.pagination.total
|
||||
});
|
||||
} catch (error) {
|
||||
setDataSource({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: dataSource.total
|
||||
});
|
||||
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(() => {
|
||||
fetchData();
|
||||
}, [queryParams]);
|
||||
@@ -111,131 +127,127 @@ const GPUList: React.FC = () => {
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
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>
|
||||
);
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.index' })}
|
||||
dataIndex="index"
|
||||
key="index"
|
||||
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}>
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost style={{ width: '100%' }}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vender' })}
|
||||
dataIndex="vendor"
|
||||
key="vendor"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.index' })}
|
||||
dataIndex="index"
|
||||
key="index"
|
||||
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
|
||||
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
|
||||
dataIndex="temperature"
|
||||
key="Temperature"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{text ? _.round(text, 1) : '-'}</span>;
|
||||
}}
|
||||
/>
|
||||
{/* <Column
|
||||
title={intl.formatMessage({ id: 'resources.table.core' })}
|
||||
dataIndex="core"
|
||||
key="Core"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>;
|
||||
}}
|
||||
/> */}
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
|
||||
dataIndex="gpuUtil"
|
||||
key="gpuUtil"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
|
||||
dataIndex="temperature"
|
||||
key="Temperature"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{text ? _.round(text, 1) : '-'}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
|
||||
dataIndex="gpuUtil"
|
||||
key="gpuUtil"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vramutilization' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={
|
||||
record.memory?.used
|
||||
? _.round(record.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
record.memory?.allocated / record.memory?.total,
|
||||
0
|
||||
) * 100
|
||||
}
|
||||
label={
|
||||
<span className="flex-column">
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
|
||||
{convertFileSize(record.memory?.total, 0)}
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.vramutilization'
|
||||
})}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={
|
||||
record.memory?.used
|
||||
? _.round(record.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
record.memory?.allocated / record.memory?.total,
|
||||
0
|
||||
) * 100
|
||||
}
|
||||
label={
|
||||
<span className="flex-column">
|
||||
<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>
|
||||
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
|
||||
{convertFileSize(
|
||||
record.memory?.used || record.memory?.allocated,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -16,7 +16,16 @@ import {
|
||||
SyncOutlined
|
||||
} from '@ant-design/icons';
|
||||
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 { memo, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
@@ -55,10 +64,12 @@ const Resources: React.FC = () => {
|
||||
const [dataSource, setDataSource] = useState<{
|
||||
dataList: ListItem[];
|
||||
loading: boolean;
|
||||
loadend: boolean;
|
||||
total: number;
|
||||
}>({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: false,
|
||||
total: 0
|
||||
});
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
@@ -88,12 +99,14 @@ const Resources: React.FC = () => {
|
||||
setDataSource({
|
||||
dataList: res.items,
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: res.pagination.total
|
||||
});
|
||||
} catch (error) {
|
||||
setDataSource({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: dataSource.total
|
||||
});
|
||||
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(() => {
|
||||
fetchData();
|
||||
}, [queryParams]);
|
||||
@@ -295,256 +320,259 @@ const Resources: React.FC = () => {
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
rowSelection={rowSelection}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
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>
|
||||
);
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
rowSelection={rowSelection}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.labels' })}
|
||||
dataIndex="labels"
|
||||
key="labels"
|
||||
width={200}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6,
|
||||
maxWidth: 200
|
||||
}}
|
||||
>
|
||||
{_.map(record.labels, (item: any, index: string) => {
|
||||
return (
|
||||
<AutoTooltip
|
||||
key={index}
|
||||
className="m-r-0"
|
||||
maxWidth={120}
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
borderRadius: 12
|
||||
}}
|
||||
>
|
||||
{index}:{item}
|
||||
</AutoTooltip>
|
||||
);
|
||||
})}
|
||||
</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) => {
|
||||
>
|
||||
<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
|
||||
title={intl.formatMessage({ id: 'resources.table.labels' })}
|
||||
dataIndex="labels"
|
||||
key="labels"
|
||||
width={200}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6,
|
||||
maxWidth: 200
|
||||
}}
|
||||
>
|
||||
{_.map(record.labels, (item: any, index: string) => {
|
||||
return (
|
||||
<span className="flex-center" key={index}>
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
{item.core ? (
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={_.round(item.core?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</span>
|
||||
<AutoTooltip
|
||||
key={index}
|
||||
className="m-r-0"
|
||||
maxWidth={120}
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
borderRadius: 12
|
||||
}}
|
||||
>
|
||||
{index}:{item}
|
||||
</AutoTooltip>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className="flex-center">
|
||||
></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 (
|
||||
<span className="flex-center" key={index}>
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.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>
|
||||
{item.core ? (
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={_.round(item.core?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className="flex-center">
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
|
||||
<UpdateLabels
|
||||
|
||||
@@ -10,7 +10,7 @@ export interface ListItem {
|
||||
export interface FormData {
|
||||
username: string;
|
||||
id?: number;
|
||||
is_admin: boolean;
|
||||
is_admin: boolean | string;
|
||||
full_name: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
+131
-105
@@ -18,7 +18,15 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
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 _ from 'lodash';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
@@ -40,10 +48,12 @@ const Users: React.FC = () => {
|
||||
const [dataSource, setDataSource] = useState<{
|
||||
dataList: ListItem[];
|
||||
loading: boolean;
|
||||
loadend: boolean;
|
||||
total: number;
|
||||
}>({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: false,
|
||||
total: 0
|
||||
});
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
@@ -85,12 +95,14 @@ const Users: React.FC = () => {
|
||||
setDataSource({
|
||||
dataList: res.items || [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: res.pagination.total
|
||||
});
|
||||
} catch (error) {
|
||||
setDataSource({
|
||||
dataList: [],
|
||||
loading: false,
|
||||
loadend: true,
|
||||
total: dataSource.total
|
||||
});
|
||||
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(() => {
|
||||
fetchData();
|
||||
}, [queryParams]);
|
||||
@@ -265,111 +289,113 @@ const Users: React.FC = () => {
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="username"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={dataSource.dataList}
|
||||
rowSelection={rowSelection}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'users.table.role' })}
|
||||
dataIndex="role"
|
||||
key="role"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return record.is_admin ? (
|
||||
<AutoTooltip ghost minWidth={50}>
|
||||
<UserSwitchOutlined className="size-16" />
|
||||
<span className="m-l-5">
|
||||
{intl.formatMessage({ id: 'users.form.admin' })}
|
||||
</span>
|
||||
</AutoTooltip>
|
||||
) : (
|
||||
<AutoTooltip ghost minWidth={50}>
|
||||
<UserOutlined className="size-16" />
|
||||
<span className="m-l-5">
|
||||
{intl.formatMessage({ id: 'users.form.user' })}
|
||||
</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'users.form.fullname' })}
|
||||
dataIndex="full_name"
|
||||
key="full_name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.createTime' })}
|
||||
dataIndex="created_at"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={false}
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="username"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'users.table.role' })}
|
||||
dataIndex="role"
|
||||
key="role"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return record.is_admin ? (
|
||||
<AutoTooltip ghost minWidth={50}>
|
||||
<UserSwitchOutlined className="size-16" />
|
||||
<span className="m-l-5">
|
||||
{intl.formatMessage({ id: 'users.form.admin' })}
|
||||
</span>
|
||||
</AutoTooltip>
|
||||
) : (
|
||||
<AutoTooltip ghost minWidth={50}>
|
||||
<UserOutlined className="size-16" />
|
||||
<span className="m-l-5">
|
||||
{intl.formatMessage({ id: 'users.form.user' })}
|
||||
</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'users.form.fullname' })}
|
||||
dataIndex="full_name"
|
||||
key="full_name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.createTime' })}
|
||||
dataIndex="created_at"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={false}
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
<AddModal
|
||||
open={openAddModal}
|
||||
|
||||
Reference in New Issue
Block a user