style: add ellipsis for route table (#2317)

apache · Feb 17, 2022 · 1f3e854 · 1f3e854
1 parent 03a6cc1
commit 1f3e854
Showing 1 changed file with 26 additions and 7 deletions.
diff --git 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,37 +345,46 @@ 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>
         ));
       },
     },
     {
       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,13 +513,15 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'component.global.updateTime' }),
       dataIndex: 'update_time',
       hideInSearch: true,
+      width: 200,
       render: (text) => timestampToLocaleString(text as number),
     },
     {
       title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       fixed: 'right',
       hideInSearch: true,
+      width: 240,
       render: (_, record) => (
         <>
           <Space align="baseline">