chore: optimize text display if text is too long in table (#25)

Co-authored-by: yaojiping <[email protected]>

Author: yaojp123

web/src/components/AutoTextEllipsis/index.js

@@ -0,0 +1,54 @@
+import { Tooltip } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+export default (props) => {
+    const { height = 21, width = '100%', children, showTooltip = true } = props;
+    const [textHeight, setTextHeight] = useState(height);
+    const textRef = useRef(null);
+
+    const handleResize = () => {
+        if (textRef.current) {
+            setTextHeight(textRef.current.offsetHeight);
+        }
+    };
+    
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+              const { width, height } = entry.contentRect;
+              setTextHeight(height);
+            });
+        });
+    
+        if (textRef.current && showTooltip) {
+            resizeObserver.observe(textRef.current);
+        }
+    
+        return () => {
+            if (textRef.current && showTooltip) {
+                resizeObserver.unobserve(textRef.current);
+            }
+        };
+    }, [showTooltip]);
+
+    return (
+        <div style={{ position: 'relative', width, height }} onClick={(e) => e.stopPropagation()}>
+            <div ref={textRef} style={{ visibility: 'hidden'}}>
+                {children}
+            </div>
+            {
+                showTooltip && textHeight > height ? (
+                    <Tooltip title={children} overlayStyle={{ maxWidth: 'unset !important'}}>
+                        <div style={{ position: 'absolute', left: 0, top: 0, overflow: 'hidden', height, width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {children}
+                        </div>
+                    </Tooltip>
+                ) : (
+                    <div style={{ position: 'absolute', left: 0, top: 0 }}>
+                        {children}
+                    </div>
+                )
+            }
+        </div>
+    )
+}

web/src/components/infini/IconText.jsx

@@ -8,7 +8,7 @@ export default ({ icon, text }) => {
       }}
     >
       <span>{icon}</span>
-      <span>{text}</span>
+      <span style={{ width: "calc(100% - 20px)"}}>{text}</span>
     </span>
   );
 };

web/src/models/global.js

@@ -256,7 +256,6 @@ export default {
 
     *fetchConsoleInfo(_, { call, put }) {
       const data = yield call(queryConsoleInfo);
-      console.log(data?.application);
       if (data && data.hasOwnProperty("application")&& data?.application.hasOwnProperty("version")) {
         const localVersionInfoVal = localStorage.getItem(COUSOLE_VERSION_KEY);
         localStorage.setItem(COUSOLE_VERSION_KEY, JSON.stringify(data?.application?.version));

web/src/pages/DataManagement/Index.js

@@ -34,6 +34,7 @@ import { isMatch, sorter } from "@/utils/utils";
 import { hasAuthority } from "@/utils/authority";
 import DeleteIndexModal from "./components/DeleteIndexModal";
 import IconText from "@/components/infini/IconText";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
 
 const { Search } = Input;
 
@@ -185,7 +186,9 @@ class Index extends PureComponent {
       render: (text, record) => (
         <IconText
           icon={<Icon type="table" />}
-          text={<Link to={`/insight/discover?index=${text}`}>{text}</Link>}
+          text={<Link to={`/insight/discover?index=${text}`}>
+            <AutoTextEllipsis >{text}</AutoTextEllipsis>
+          </Link>}
         />
       ),
       sorter: (a, b) => sorter.string(a, b, "index"),
@@ -227,6 +230,7 @@ class Index extends PureComponent {
     },
     {
       title: formatMessage({ id: "table.field.actions" }),
+      width: 116,
       render: (text, record) => (
         <Fragment>
           <a

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

@@ -10,6 +10,7 @@ import { formatter } from "@/utils/format";
 import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 import IconText from "@/components/infini/IconText";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
 
 const { Search } = Input;
 
@@ -107,7 +108,7 @@ const Indices = ({
                   timeRange
                 ))},"timeInterval":"${bucketSize}","cluster_name":"${clusterName}"}`}
               >
-                {text}
+                <AutoTextEllipsis >{text}</AutoTextEllipsis>
               </Link>
             }
           />

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

@@ -12,6 +12,7 @@ import { formatter } from "@/utils/format";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 import moment from "moment";
 import IconText from "@/components/infini/IconText";
+import AutoTextEllipsis from "@/components/AutoTextEllipsis";
 
 const { Search } = Input;
 const InputGroup = Input.Group;
@@ -117,7 +118,7 @@ export default ({
                     record?.name
                   }"}`}
                 >
-                  {text}
+                  <AutoTextEllipsis >{text}</AutoTextEllipsis>
                 </Link>
               }
             />

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

@@ -147,7 +147,7 @@ export default ({
                     record?.node
                   }"}`}
                 >
-                  {text}
+                  <AutoTextEllipsis >{text}</AutoTextEllipsis>
                 </Link>
               }
             />

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

@@ -97,7 +97,7 @@ export default ({ clusterID, clusterName, nodeID, timeRange, bucketSize }) => {
                     timeRange
                   ))},"timeInterval":"${bucketSize}","cluster_name":"${clusterName}"}`}
                 >
-                  {text}
+                  <AutoTextEllipsis >{text}</AutoTextEllipsis>
                 </Link>
               }
             />