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

style: table column size

Browse Source
This commit is contained in:
jialin
2024-10-23 19:36:29 +08:00
parent 8576015633
commit 90350f99ad
5 changed files with 86 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/global.less
+1
View File
@@ -387,6 +387,7 @@ body {
}
.ant-pro-layout-container {
overflow-x: auto;
min-height: 100vh;
// background-color: var(--color-fill-2);
}
src/pages/api-keys/index.tsx
+36 -7
View File
@@ -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}>
src/pages/llmodels/components/instance-item.tsx
+3 -3
View File
@@ -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)`
}
];
src/pages/resources/components/gpus.tsx
+7
View File
@@ -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' })}
src/pages/users/index.tsx
+39 -6
View File
@@ -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