style: table no data

src/assets/styles/common.less

@@ -232,3 +232,7 @@
   list-style-type: decimal;
   padding-left: 16px;
 }
+
+.gap-16 {
+  gap: 16px;
+}

src/components/seal-table/components/row-skeleton.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}