chore: add loading to each row in overview table (#51)

* chore: add loading to each row in overview table

* chore: update release notes

---------

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

docs/content.en/docs/release-notes/_index.md

@@ -12,11 +12,14 @@ Information about release notes of INFINI Console is provided here.
 ### Breaking changes
 
 ### Features
+- add allocation to activities if is cluster health change and changed to red.
 
 ### Bug fix
 - fix: query thread pool metrics when cluster uuid is empty
 
 ### Improvements
+- Optimize UI of agent list when its columns are overflow.
+- add loading to each row in overview table.
 
 ## 1.27.0 (2024-12-09)
 

web/src/pages/Platform/Overview/Cluster/Table/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Table, Tooltip, Progress } from "antd";
+import { Table, Tooltip, Progress, Spin } from "antd";
 import { formatter } from "@/utils/format";
 import { formatMessage } from "umi/locale";
 import { SearchEngineIcon } from "@/lib/search_engines";
@@ -18,6 +18,7 @@ export default (props) => {
           dataIndex: "name",
           render: (text, record) => {
             return (
+              <>
                 <Tooltip
                   placement="topLeft"
                   title={
@@ -48,6 +49,8 @@ export default (props) => {
                     <span>{record.metadata?.name}</span>
                   </div>
                 </Tooltip>
+                <Spin />
+              </>
             );
           },
         },

web/src/pages/Platform/Overview/Indices/Table/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Tooltip, Progress, Icon } from "antd";
+import { Tooltip, Progress, Icon, Spin } from "antd";
 import { formatter } from "@/utils/format";
 import { formatUtcTimeToLocal } from "@/utils/utils";
 import { formatMessage } from "umi/locale";
@@ -18,6 +18,7 @@ export default (props) => {
           dataIndex: "name",
           render: (text, record) => {
             return (
+              <>
                 <Tooltip
                   placement="topLeft"
                   title={
@@ -37,6 +38,8 @@ export default (props) => {
                     <span>{record.metadata?.index_name}</span>
                   </div>
                 </Tooltip>
+                <Spin />
+              </>
             );
           },
         },

web/src/pages/Platform/Overview/Node/Table/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Tooltip, Progress, Icon } from "antd";
+import { Tooltip, Progress, Icon, Spin } from "antd";
 import { formatter } from "@/utils/format";
 import { HealthStatusView } from "@/components/infini/health_status_view";
 import { StatusBlockGroup } from "@/components/infini/status_block";
@@ -15,6 +15,7 @@ export default (props) => {
           dataIndex: "name",
           render: (text, record) => {
             return (
+              <>
                 <Tooltip
                   placement="topLeft"
                   title={
@@ -44,6 +45,8 @@ export default (props) => {
                     <span>{record.metadata?.node_name}</span>
                   </div>
                 </Tooltip>
+                <Spin />
+              </>
             );
           },
         },

web/src/pages/Platform/Overview/components/CommonTable/index.jsx

@@ -27,24 +27,31 @@ export default (props) => {
   } = props;
 
   const [infos, setInfos] = useState({});
+  const [loadings, setLoadings] = useState({});
 
   const fetchListInfo = async (data) => {
-    const res = await Promise.all(data?.map((item) => request(infoAction, {
+    data?.forEach((item) => {
+      setLoadings((loadings) => ({
+        ...loadings,
+        [item.id]: true
+      }))
+      request(infoAction, {
         method: "POST",
         body: [item.id],
-    }, false, false)));
-    if (res) {
-      let newInfos = {}
-      res.forEach((item) => {
-        if (item && !item.error) {
-          newInfos = {
-            ...newInfos,
-            ...item
-          }
+      }, false, false).then((res) => {
+        if (res && !res.error) {
+          setInfos((infos) => ({
+            ...infos,
+            ...res
+          }));
         }
+      }).finally(() => {
+        setLoadings((loadings) => ({
+          ...loadings,
+          [item.id]: false
+        }))
+      })
     })
-      setInfos(newInfos);
-    }
   };
 
   useEffect(() => {
@@ -84,7 +91,7 @@ export default (props) => {
             },
           };
         }}
-        rowClassName={() => styles.rowPointer}
+        rowClassName={(record) => `${styles.rowPointer} ${loadings[record.id] && !parentLoading ? styles.loading : ''}`}
       />
     </div>
   );

web/src/pages/Platform/Overview/components/CommonTable/index.less

@@ -1,3 +1,28 @@
 .rowPointer {
     cursor: pointer;
+    :global {
+        .ant-spin-spinning {
+            display: none;
+        }
+    }
+}
+
+.loading {
+    position: relative;
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.5;
+    :global {
+        .ant-spin-spinning {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1;
+        }
+    }
 }