From 90350f99ad08ac6958152bdd5e785e82698de329 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 23 Oct 2024 19:35:22 +0800
Subject: [PATCH] style: table column size

---
 src/global.less                               |  1 +
 src/pages/api-keys/index.tsx                  | 43 +++++++++++++++---
 .../llmodels/components/instance-item.tsx     |  6 +--
 src/pages/resources/components/gpus.tsx       |  7 +++
 src/pages/users/index.tsx                     | 45 ++++++++++++++++---
 5 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/global.less b/src/global.less
index c6646c9f..4a502045 100644
--- a/src/global.less
+++ b/src/global.less
@@ -387,6 +387,7 @@ body {
   }
 
   .ant-pro-layout-container {
+    overflow-x: auto;
     min-height: 100vh;
     // background-color: var(--color-fill-2);
   }
diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx
index aafa8609..4c9b98dc 100644
--- a/src/pages/api-keys/index.tsx
+++ b/src/pages/api-keys/index.tsx
@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
@@ -218,9 +219,15 @@ const APIKeys: React.FC = () => {
             title={intl.formatMessage({ id: 'common.table.name' })}
             dataIndex="name"
             key="name"
-            width={400}
             ellipsis={{
-              showTitle: true
+              showTitle: false
+            }}
+            render={(text, record) => {
+              return (
+                <AutoTooltip ghost style={{ maxWidth: 400 }}>
+                  {text}
+                </AutoTooltip>
+              );
             }}
           />
 
@@ -228,10 +235,19 @@ const APIKeys: React.FC = () => {
             title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
             dataIndex="expires_at"
             key="expiration"
+            ellipsis={{
+              showTitle: false
+            }}
             render={(text, record) => {
-              return text
-                ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
-                : intl.formatMessage({ id: 'apikeys.form.expiration.never' });
+              return (
+                <AutoTooltip ghost>
+                  {text
+                    ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+                    : intl.formatMessage({
+                        id: 'apikeys.form.expiration.never'
+                      })}
+                </AutoTooltip>
+              );
             }}
           />
           <Column
@@ -239,7 +255,10 @@ const APIKeys: React.FC = () => {
             dataIndex="description"
             key="description"
             ellipsis={{
-              showTitle: true
+              showTitle: false
+            }}
+            render={(text, record) => {
+              return <AutoTooltip ghost>{text}</AutoTooltip>;
             }}
           />
           <Column
@@ -250,13 +269,23 @@ const APIKeys: React.FC = () => {
             sortOrder={sortOrder}
             showSorterTooltip={false}
             sorter={false}
+            ellipsis={{
+              showTitle: false
+            }}
             render={(text, record) => {
-              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+              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}>
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index b85cb135..17da4e8b 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -91,7 +91,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   const renderWorkerInfo = (item: ModelInstanceListItem) => {
     let workerIp = '-';
     if (item.worker_ip) {
-      workerIp = item.worker_ip;
+      workerIp = item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
     }
     return (
       <div>
@@ -116,7 +116,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       return {
         worker_name: data?.name,
         worker_ip: data?.ip,
-        port: data?.port,
+        port: '',
         gpu_index: item.gpu_index
       };
     });
@@ -125,7 +125,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       {
         worker_name: `${row.worker_name}`,
         worker_ip: `${row.worker_ip}`,
-        port: row.port,
+        port: '',
         gpu_index: `${row.gpu_indexes?.sort?.()} (main)`
       }
     ];
diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx
index e1df1b50..4fd44bbf 100644
--- a/src/pages/resources/components/gpus.tsx
+++ b/src/pages/resources/components/gpus.tsx
@@ -128,6 +128,13 @@ const GPUList: React.FC = () => {
           title={intl.formatMessage({ id: 'common.table.name' })}
           dataIndex="name"
           key="name"
+          render={(text, record) => {
+            return (
+              <AutoTooltip ghost style={{ width: '100%' }}>
+                {text}
+              </AutoTooltip>
+            );
+          }}
         />
         <Column
           title={intl.formatMessage({ id: 'resources.table.index' })}
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index d62542c5..6e22875a 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
@@ -275,26 +276,39 @@ const Users: React.FC = () => {
             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>
               );
             }}
           />
@@ -302,6 +316,16 @@ const Users: React.FC = () => {
             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' })}
@@ -311,14 +335,23 @@ const Users: React.FC = () => {
             sortOrder={sortOrder}
             showSorterTooltip={false}
             sorter={false}
+            ellipsis={{
+              showTitle: false
+            }}
             render={(text, record) => {
-              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+              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"
-            width={200}
+            ellipsis={{
+              showTitle: false
+            }}
             render={(text, record: ListItem) => {
               return (
                 <DropdownButtons