From 85879c5ea7c3c8a41fa69291ac10c1cf646a48da Mon Sep 17 00:00:00 2001
From: yaojp123 <15989103230@163.com>
Date: Thu, 12 Dec 2024 20:29:51 +0800
Subject: [PATCH] chore: optimize text display if text is too long in table
 (#25)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
---
 web/src/components/AutoTextEllipsis/index.js  | 54 +++++++++++++++++++
 web/src/components/infini/IconText.jsx        |  2 +-
 web/src/models/global.js                      |  1 -
 web/src/pages/DataManagement/Index.js         |  6 ++-
 .../Overview/Cluster/Monitor/indices.jsx      |  3 +-
 .../Overview/Cluster/Monitor/nodes.jsx        |  3 +-
 .../Overview/Indices/Monitor/shards.jsx       |  2 +-
 .../Platform/Overview/Node/Monitor/shards.jsx |  2 +-
 8 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 web/src/components/AutoTextEllipsis/index.js

diff --git a/web/src/components/AutoTextEllipsis/index.js b/web/src/components/AutoTextEllipsis/index.js
new file mode 100644
index 00000000..63f240a5
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/web/src/components/infini/IconText.jsx b/web/src/components/infini/IconText.jsx
index c5fd13d2..c641027c 100644
--- a/web/src/components/infini/IconText.jsx
+++ b/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>
   );
 };
diff --git a/web/src/models/global.js b/web/src/models/global.js
index 0f9fbb12..6a20e040 100644
--- a/web/src/models/global.js
+++ b/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));
diff --git a/web/src/pages/DataManagement/Index.js b/web/src/pages/DataManagement/Index.js
index 0c9b7074..9df70041 100644
--- a/web/src/pages/DataManagement/Index.js
+++ b/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
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/indices.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/indices.jsx
index 9a221cee..8908d11c 100644
--- a/web/src/pages/Platform/Overview/Cluster/Monitor/indices.jsx
+++ b/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>
             }
           />
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/nodes.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/nodes.jsx
index d633c2c8..555dfc52 100644
--- a/web/src/pages/Platform/Overview/Cluster/Monitor/nodes.jsx
+++ b/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>
               }
             />
diff --git a/web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx b/web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx
index 274ae187..55f65e00 100644
--- a/web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx
+++ b/web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx
@@ -147,7 +147,7 @@ export default ({
                     record?.node
                   }"}`}
                 >
-                  {text}
+                  <AutoTextEllipsis >{text}</AutoTextEllipsis>
                 </Link>
               }
             />
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/shards.jsx b/web/src/pages/Platform/Overview/Node/Monitor/shards.jsx
index 5b0beb4b..98e25ca1 100644
--- a/web/src/pages/Platform/Overview/Node/Monitor/shards.jsx
+++ b/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>
               }
             />