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;
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) {
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>
);
}
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
+27 -1
View File
@@ -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,6 +229,7 @@ const APIKeys: React.FC = () => {
</Space>
}
></PageTools>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -309,6 +334,7 @@ const APIKeys: React.FC = () => {
}}
/>
</Table>
</ConfigProvider>
</PageContainer>
<AddAPIKeyModal
open={openAddModal}
src/pages/llmodels/index.tsx
-1
View File
@@ -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);
});
};
src/pages/resources/components/gpus.tsx
+22 -10
View File
@@ -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,6 +127,7 @@ const GPUList: React.FC = () => {
</Space>
}
></PageTools>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
dataSource={dataSource.dataList}
loading={dataSource.loading}
@@ -174,14 +191,6 @@ const GPUList: React.FC = () => {
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"
@@ -202,7 +211,9 @@ const GPUList: React.FC = () => {
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vramutilization' })}
title={intl.formatMessage({
id: 'resources.table.vramutilization'
})}
dataIndex="VRAM"
key="VRAM"
render={(text, record: GPUDeviceItem) => {
@@ -236,6 +247,7 @@ const GPUList: React.FC = () => {
}}
/>
</Table>
</ConfigProvider>
</>
);
};
src/pages/resources/components/workers.tsx
+30 -2
View File
@@ -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,6 +320,7 @@ const Resources: React.FC = () => {
</Space>
}
></PageTools>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
style={{ width: '100%' }}
dataSource={dataSource.dataList}
@@ -494,7 +520,8 @@ const Resources: React.FC = () => {
})}
:{' '}
{convertFileSize(
item.memory?.used || item.memory?.allocated,
item.memory?.used ||
item.memory?.allocated,
0
)}
</span>
@@ -545,6 +572,7 @@ const Resources: React.FC = () => {
}}
/>
</Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
<UpdateLabels
src/pages/users/config/types.ts
+1 -1
View File
@@ -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;
}
src/pages/users/index.tsx
+27 -1
View File
@@ -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,6 +289,7 @@ const Users: React.FC = () => {
</Space>
}
></PageTools>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
dataSource={dataSource.dataList}
rowSelection={rowSelection}
@@ -370,6 +395,7 @@ const Users: React.FC = () => {
}}
/>
</Table>
</ConfigProvider>
</PageContainer>
<AddModal
open={openAddModal}