This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 1f3e854 style: add ellipsis for route table (#2317)
1f3e854 is described below
commit 1f3e85425a0be35df3bab32af434226f6b52d311
Author: oil欧呦 <[email protected]>
AuthorDate: Thu Feb 17 21:17:56 2022 +0800
style: add ellipsis for route table (#2317)
---
web/src/pages/Route/List.tsx | 33 ++++++++++++++++++++++++++-------
1 file changed, 26 insertions(+), 7 deletions(-)
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 93a31f2..89cda66 100755
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -33,6 +33,7 @@ import {
Divider,
Menu,
Dropdown,
+ Tooltip,
} from 'antd';
import { history, useIntl } from 'umi';
import { PlusOutlined, ExportOutlined, ImportOutlined, DownOutlined } from
'@ant-design/icons';
@@ -328,7 +329,12 @@ const Page: React.FC = () => {
</Popconfirm>
);
};
-
+ const tagStyle = {
+ maxWidth: '200px',
+ overflow: 'hidden',
+ WhiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ };
const columns: ProColumns<RouteModule.ResponseBody>[] = [
{
title: formatMessage({ id: 'component.global.name' }),
@@ -339,30 +345,37 @@ const Page: React.FC = () => {
title: formatMessage({ id: 'component.global.id' }),
hideInSearch: true,
dataIndex: 'id',
+ width: 200,
},
{
title: formatMessage({ id: 'page.route.host' }),
hideInSearch: true,
+ width: 224,
render: (_, record) => {
const list = record.hosts || (record.host && [record.host]) || [];
return list.map((item) => (
- <Tag key={item} color="geekblue">
- {item}
- </Tag>
+ <Tooltip placement="topLeft" title={item}>
+ <Tag key={item} color="geekblue" style={tagStyle}>
+ {item}
+ </Tag>
+ </Tooltip>
));
},
},
{
title: formatMessage({ id: 'page.route.path' }),
dataIndex: 'uri',
+ width: 224,
render: (_, record) => {
const list = record.uris || (record.uri && [record.uri]) || [];
return list.map((item) => (
- <Tag key={item} color="geekblue">
- {item}
- </Tag>
+ <Tooltip placement="topLeft" title={item}>
+ <Tag key={item} color="geekblue" style={tagStyle}>
+ {item}
+ </Tag>
+ </Tooltip>
));
},
},
@@ -370,6 +383,8 @@ const Page: React.FC = () => {
title: formatMessage({ id: 'component.global.description' }),
dataIndex: 'desc',
hideInSearch: true,
+ ellipsis: true,
+ width: 200,
},
{
title: formatMessage({ id: 'component.global.labels' }),
@@ -423,6 +438,7 @@ const Page: React.FC = () => {
{
title: formatMessage({ id: 'component.global.version' }),
dataIndex: 'API_VERSION',
+ width: 100,
render: (_, record) => {
return Object.keys(record.labels || {})
.filter((item) => item === 'API_VERSION')
@@ -460,6 +476,7 @@ const Page: React.FC = () => {
{
title: formatMessage({ id: 'page.route.status' }),
dataIndex: 'status',
+ width: 100,
render: (_, record) => (
<>
{record.status ? (
@@ -496,6 +513,7 @@ const Page: React.FC = () => {
title: formatMessage({ id: 'component.global.updateTime' }),
dataIndex: 'update_time',
hideInSearch: true,
+ width: 200,
render: (text) => timestampToLocaleString(text as number),
},
{
@@ -503,6 +521,7 @@ const Page: React.FC = () => {
valueType: 'option',
fixed: 'right',
hideInSearch: true,
+ width: 240,
render: (_, record) => (
<>
<Space align="baseline">
