fix: add limit of width to some columns and adjust ui of text if is overflow, in table (#45)

Co-authored-by: yaojiping <yaojiping@infini.ltd>

web/src/common.less

@@ -0,0 +1,3 @@
+.maxColumnWidth {
+  max-width: 200px;
+}

web/src/components/AutoTextEllipsis/index.js

@@ -20,16 +20,22 @@ export default (props) => {
             });
         });
     
-        if (textRef.current && showTooltip) {
+        if (textRef.current) {
             resizeObserver.observe(textRef.current);
         }
     
         return () => {
-            if (textRef.current && showTooltip) {
+            if (textRef.current) {
                 resizeObserver.unobserve(textRef.current);
             }
         };
-    }, [showTooltip]);
+    }, []);
+
+    const ellipsisDom = (
+        <div style={{ position: 'absolute', left: 0, top: 0, overflow: 'hidden', height, width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {children}
+        </div>
+    )
 
     return (
         <div style={{ position: 'relative', width, height }} onClick={(e) => e.stopPropagation()}>
@@ -37,12 +43,12 @@ export default (props) => {
                 {children}
             </div>
             {
-                showTooltip && textHeight > height ? (
+                textHeight > height ? (
-                    <Tooltip title={children} overlayStyle={{ maxWidth: 'unset !important'}}>
+                    showTooltip ? (
-                        <div style={{ position: 'absolute', left: 0, top: 0, overflow: 'hidden', height, width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        <Tooltip title={children} overlayStyle={{ maxWidth: 'unset !important'}}>
-                            {children}
+                            {ellipsisDom}
-                        </div>
+                        </Tooltip>
-                    </Tooltip>
+                    ) : ellipsisDom
                 ) : (
                     <div style={{ position: 'absolute', left: 0, top: 0 }}>
                         {children}

web/src/pages/Agent/Instance/components/RowDetail.jsx

@@ -25,6 +25,8 @@ import Logs from "@/pages/Platform/Overview/Node/Detail/Logs";
 import IconText from "@/components/infini/IconText";
 import { SearchEngineIcon } from "@/lib/search_engines";
 import { hasAuthority } from "@/utils/authority";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { TabPane } = Tabs;
 
@@ -190,6 +192,8 @@ export const AgentRowDetail = ({ agentID, t }) => {
       {
         title: "Home",
         dataIndex: "node_info.settings.path.home",
+        render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
+        className: commonStyles.maxColumnWidth
       },
       {
         title: "Status",

web/src/pages/Agent/Instance/index.jsx

@@ -474,7 +474,7 @@ const AgentList = (props) => {
           columns={columns}
           onChange={handleTableChange}
           expandedRowRender={expandedRowRender}
-          scroll={{x: 1100 }}
+          scroll={{x: 'max-content' }}
         />
         <Drawer
           title={`Task Settings(${editState.editItem?.remote_ip})`}

web/src/pages/DataManagement/Index.js

@@ -35,6 +35,7 @@ import { hasAuthority } from "@/utils/authority";
 import DeleteIndexModal from "./components/DeleteIndexModal";
 import IconText from "@/components/infini/IconText";
 import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -192,6 +193,7 @@ class Index extends PureComponent {
         />
       ),
       sorter: (a, b) => sorter.string(a, b, "index"),
+      className: commonStyles.maxColumnWidth
     },
     {
       title: formatMessage({ id: "indices.field.health" }),

web/src/pages/Gateway/Queue/Consumer.jsx

@@ -18,6 +18,8 @@ import ReestOffsetModal from "./ResetOffsetModal";
 import { encodeProxyPath } from "@/lib/util";
 import { filterSearchValue, sorter } from "@/utils/utils";
 import { hasAuthority } from "@/utils/authority";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -42,7 +44,12 @@ export default (props) => {
   };
 
   const columns = [
-    { title: "Group", dataIndex: "group" },
+    { 
+      title: "Group", 
+      dataIndex: "group", 
+      render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
+      className: commonStyles.maxColumnWidth
+    },
     { 
       title: "LastActive", 
       dataIndex: "last_active",

web/src/pages/Gateway/Queue/Persistent.jsx

@@ -23,6 +23,8 @@ import { hasAuthority } from "@/utils/authority";
 import IconText from "@/components/infini/IconText";
 import Consumer from "./Consumer";
 import QueueTypeIcon from "./QueueTypeIcon";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -107,7 +109,12 @@ export default (props) => {
             text={
               <Popover
                 content={consumerLabelRender(row?.metadata?.label)}
-                title={`ID:${row?.metadata?.id}`}
+                title={(
+                  <>
+                    <div>{`ID: ${row?.metadata?.id}`}</div>
+                    <div>{`Name: ${name}`}</div>
+                  </>
+                )}
               >
                 <a
                   onClick={() => {
@@ -117,7 +124,7 @@ export default (props) => {
                     );
                   }}
                 >
-                  {name}
+                  <AutoTextEllipsis showTooltip={false}>{name}</AutoTextEllipsis>
                 </a>
               </Popover>
             }
@@ -126,6 +133,7 @@ export default (props) => {
         </>
       ),
       sorter: (a, b) => sorter.string(a, b, "name"),
+      className: commonStyles.maxColumnWidth
     },
     {
       title: "Local Storage",
@@ -422,6 +430,7 @@ export default (props) => {
             ? "offset-normal"
             : "";
         }}
+        scroll={{ x: 'max-content' }}
       />
     </div>
   );

web/src/pages/Platform/Overview/Cluster/Monitor/indices.jsx

@@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 import IconText from "@/components/infini/IconText";
 import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -114,6 +115,7 @@ const Indices = ({
           />
         ),
         sorter: (a, b) => sorter.string(a, b, "index"),
+        className: commonStyles.maxColumnWidth
       },
       {
         title: "Health",
@@ -272,6 +274,7 @@ const Indices = ({
             dispatch({ type: "pageSizeChange", value: size });
           },
         }}
+        scroll={{x: 'max-content' }}
       />
     </>
   );

web/src/pages/Platform/Overview/Cluster/Monitor/nodes.jsx

@@ -13,6 +13,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
 import moment from "moment";
 import IconText from "@/components/infini/IconText";
 import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 const InputGroup = Input.Group;
@@ -128,7 +129,7 @@ export default ({
           </span>
         ),
         sorter: (a, b) => sorter.string(a, b, "name"),
-        className: "verticalAlign",
+        className: `verticalAlign ${commonStyles.maxColumnWidth}`,
       },
     ];
     if (showRealtime) {
@@ -325,6 +326,7 @@ export default ({
             dispatch({ type: "pageSizeChange", value: size });
           },
         }}
+        scroll={{x: 'max-content' }}
       />
     </>
   );

web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx

@@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 import IconText from "@/components/infini/IconText";
 import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -155,6 +156,7 @@ export default ({
           );
         },
         sorter: (a, b) => sorter.string(a, b, "node"),
+        className: commonStyles.maxColumnWidth
       },
       {
         title: "State",
@@ -255,6 +257,7 @@ export default ({
             dispatch({ type: "pageSizeChange", value: size });
           },
         }}
+        scroll={{x: 'max-content' }}
       />
     </>
   );

web/src/pages/Platform/Overview/Node/Monitor/shards.jsx

@@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 import IconText from "@/components/infini/IconText";
 import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -105,6 +106,7 @@ export default ({ clusterID, clusterName, nodeID, timeRange, bucketSize }) => {
           );
         },
         sorter: (a, b) => sorter.string(a, b, "index"),
+        className: commonStyles.maxColumnWidth
       },
       {
         title: "Shard",
@@ -257,6 +259,7 @@ export default ({ clusterID, clusterName, nodeID, timeRange, bucketSize }) => {
             dispatch({ type: "pageSizeChange", value: size });
           },
         }}
+        scroll={{x: 'max-content' }}
       />
     </>
   );

web/src/pages/System/Credential/Index.js

@@ -18,6 +18,8 @@ import { formatESSearchResult } from "@/lib/elasticsearch/util";
 import useFetch from "@/lib/hooks/use_fetch";
 import CredentialForm from "./CredentialForm";
 import { hasAuthority } from "@/utils/authority";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
+import commonStyles from "@/common.less"
 
 const { Search } = Input;
 
@@ -182,6 +184,8 @@ export default () => {
       }),
       dataIndex: "name",
       key: "name",
+      render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
+      className: commonStyles.maxColumnWidth
     },
     {
       title: formatMessage({