fix: error after changed table mode in overview (#30)

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

web/src/components/Overview/index.tsx

@@ -301,6 +301,7 @@ export default forwardRef((props: IProps, ref: any) => {
                     setSelectedItem(item);
                     drawRef.current?.open();
                   }}
+                  parentLoading={loading}
                 />
               )}
             </div>

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

@@ -1,96 +1,18 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Table, Tooltip, Progress } from "antd";
 import { formatter } from "@/utils/format";
-import { formatUtcTimeToLocal } from "@/utils/utils";
 import { formatMessage } from "umi/locale";
 import { SearchEngineIcon } from "@/lib/search_engines";
 import { HealthStatusView } from "@/components/infini/health_status_view";
 import { StatusBlockGroup } from "@/components/infini/status_block";
 import { Providers, ProviderIcon } from "@/lib/providers";
-import request from "@/utils/request";
+import CommonTable from "../../components/CommonTable";
-import styles from "./index.less"
 
 export default (props) => {
-  const {
+  return (
-    dataSource,
+    <CommonTable 
-    total,
+      {...props}
-    from,
+      columns={[
-    pageSize,
-    loading,
-    onPageChange,
-    onPageSizeChange,
-    onRowClick,
-    infoAction
-  } = props;
-
-  const [infos, setInfos] = useState({});
-
-  const fetchListInfo = async (data) => {
-    const res = await Promise.all(data?.map((item) => request(infoAction, {
-      method: "POST",
-      body: [item.id],
-    }, false, false)));
-    if (res) {
-      let newInfos = {}
-      res.forEach((item) => {
-        if (item && !item.error) {
-          newInfos = {
-            ...newInfos,
-            ...item
-          }
-        }
-      })
-      setInfos(newInfos);
-    }
-  };
-
-  useEffect(() => {
-    fetchListInfo(dataSource);
-  }, [JSON.stringify(dataSource)])
-
-  const [tableData] = useMemo(() => {
-    let tableData = dataSource?.map((item) => {
-      const id = item?._id;
-      const metadata = item._source || {};
-      const info = id && infos[id] ? infos[id] : {};
-      const summary = info.summary || {};
-      const metrics = info.metrics || {};
-      const fs_total_in_bytes = summary?.fs?.total_in_bytes || 0;
-      const fs_available_in_bytes = summary?.fs?.available_in_bytes || 0;
-      const fs_used_in_bytes = fs_total_in_bytes - fs_available_in_bytes;
-      const jvm_mem_total_in_bytes = summary?.jvm?.heap_max_in_bytes || 0;
-      const jvm_mem_used_in_bytes = summary?.jvm?.heap_used_in_bytes || 0;
-
-      const disk_percent =
-        fs_total_in_bytes > 0
-          ? Math.round((fs_used_in_bytes / fs_total_in_bytes) * 100)
-          : 0;
-      const jvm_mem_percent =
-        jvm_mem_total_in_bytes > 0
-          ? Math.round((jvm_mem_used_in_bytes / jvm_mem_total_in_bytes) * 100)
-          : 0;
-
-      const metrics_status = metrics?.status || {};
-
-      return {
-        id,
-        metadata,
-        summary,
-        metrics_status,
-        fs_total_in_bytes,
-        fs_available_in_bytes,
-        fs_used_in_bytes,
-        jvm_mem_total_in_bytes,
-        jvm_mem_used_in_bytes,
-        disk_percent,
-        jvm_mem_percent,
-      };
-    });
-    return [tableData];
-  }, [JSON.stringify(dataSource), JSON.stringify(infos)]);
-
-  const [columns] = useMemo(() => {
-    let columns = [
         {
           title: "Name",
           dataIndex: "name",
@@ -265,39 +187,47 @@ export default (props) => {
             );
           },
         },
-    ];
+      ]}
-    return [columns];
+      formatData={(dataSource, infos) => {
-  }, []);
+        const newData = dataSource?.map((item) => {
+          const id = item?._id;
+          const metadata = item._source || {};
+          const info = id && infos[id] ? infos[id] : {};
+          const summary = info.summary || {};
+          const metrics = info.metrics || {};
+          const fs_total_in_bytes = summary?.fs?.total_in_bytes || 0;
+          const fs_available_in_bytes = summary?.fs?.available_in_bytes || 0;
+          const fs_used_in_bytes = fs_total_in_bytes - fs_available_in_bytes;
+          const jvm_mem_total_in_bytes = summary?.jvm?.heap_max_in_bytes || 0;
+          const jvm_mem_used_in_bytes = summary?.jvm?.heap_used_in_bytes || 0;
+    
+          const disk_percent =
+            fs_total_in_bytes > 0
+              ? Math.round((fs_used_in_bytes / fs_total_in_bytes) * 100)
+              : 0;
+          const jvm_mem_percent =
+            jvm_mem_total_in_bytes > 0
+              ? Math.round((jvm_mem_used_in_bytes / jvm_mem_total_in_bytes) * 100)
+              : 0;
+    
+          const metrics_status = metrics?.status || {};
     
-  return (
-    <div className="table-wrap">
-      <Table
-        size={"small"}
-        loading={loading}
-        columns={columns}
-        dataSource={tableData}
-        rowKey={"id"}
-        pagination={{
-          size: "small",
-          total,
-          pageSize,
-          onChange: onPageChange,
-          showSizeChanger: true,
-          onShowSizeChange: (_, size) => {
-            onPageSizeChange(size);
-          },
-          showTotal: (total, range) =>
-            `${range[0]}-${range[1]} of ${total} items`,
-        }}
-        onRow={(record, i) => {
           return {
-            onClick: (event) => {
+            id,
-              onRowClick(dataSource[i]);
+            metadata,
-            },
+            summary,
+            metrics_status,
+            fs_total_in_bytes,
+            fs_available_in_bytes,
+            fs_used_in_bytes,
+            jvm_mem_total_in_bytes,
+            jvm_mem_used_in_bytes,
+            disk_percent,
+            jvm_mem_percent,
           };
+        });
+        return newData
       }}
-        rowClassName={() => styles.rowPointer}
     />
-    </div>
   );
 };

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

@@ -1,51 +1,18 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Table, Tooltip, Progress, Icon } from "antd";
+import { Tooltip, Progress, Icon } from "antd";
 import { formatter } from "@/utils/format";
 import { formatUtcTimeToLocal } from "@/utils/utils";
 import { formatMessage } from "umi/locale";
-import { SearchEngineIcon } from "@/lib/search_engines";
 import { HealthStatusView } from "@/components/infini/health_status_view";
 import { StatusBlockGroup } from "@/components/infini/status_block";
+import CommonTable from "../../components/CommonTable";
 
 export default (props) => {
-  const {
-    infos,
-    dataSource,
-    total,
-    from,
-    pageSize,
-    loading,
-    onPageChange,
-    onPageSizeChange,
-    onRowClick,
-  } = props;
 
-  const [tableData] = useMemo(() => {
+  return (
-    let tableData = dataSource?.map((item) => {
+    <CommonTable 
-      const id = item?._source?.metadata?.index_id;
+      {...props}
-      const metadata = item?._source?.metadata || {};
+      columns={[
-      const info = id && infos[id] ? infos[id] : {};
-      const summary = info.summary || {};
-      const metrics = info.metrics || {};
-
-      const timestamp = item?._source?.timestamp
-        ? formatUtcTimeToLocal(item?._source?.timestamp)
-        : "N/A";
-      const metrics_status = metrics?.status || {};
-
-      return {
-        id,
-        metadata,
-        summary,
-        metrics_status,
-        timestamp,
-      };
-    });
-    return [tableData];
-  }, [JSON.stringify(dataSource), JSON.stringify(infos)]);
-
-  const [columns] = useMemo(() => {
-    let columns = [
         {
           title: "Name",
           dataIndex: "name",
@@ -171,38 +138,30 @@ export default (props) => {
             );
           },
         },
-    ];
+      ]}
-    return [columns];
+      formatData={(dataSource, infos) => {
-  }, []);
+        const newData = dataSource?.map((item) => {
+          const id = item?._source?.metadata?.index_id;
+          const metadata = item?._source?.metadata || {};
+          const info = id && infos[id] ? infos[id] : {};
+          const summary = info.summary || {};
+          const metrics = info.metrics || {};
+    
+          const timestamp = item?._source?.timestamp
+            ? formatUtcTimeToLocal(item?._source?.timestamp)
+            : "N/A";
+          const metrics_status = metrics?.status || {};
     
-  return (
-    <div className="table-wrap">
-      <Table
-        size={"small"}
-        loading={loading}
-        columns={columns}
-        dataSource={tableData}
-        rowKey={"id"}
-        pagination={{
-          size: "small",
-          total,
-          pageSize,
-          onChange: onPageChange,
-          showSizeChanger: true,
-          onShowSizeChange: (_, size) => {
-            onPageSizeChange(size);
-          },
-          showTotal: (total, range) =>
-            `${range[0]}-${range[1]} of ${total} items`,
-        }}
-        onRow={(record, i) => {
           return {
-            onClick: (event) => {
+            id,
-              onRowClick(dataSource[i]);
+            metadata,
-            },
+            summary,
+            metrics_status,
+            timestamp,
           };
+        });
+        return newData
       }}
     />
-    </div>
   );
 };

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

@@ -1,68 +1,15 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Table, Tooltip, Progress, Icon } from "antd";
+import { Tooltip, Progress, Icon } from "antd";
 import { formatter } from "@/utils/format";
-import { formatUtcTimeToLocal } from "@/utils/utils";
-import { formatMessage } from "umi/locale";
-import { SearchEngineIcon } from "@/lib/search_engines";
 import { HealthStatusView } from "@/components/infini/health_status_view";
 import { StatusBlockGroup } from "@/components/infini/status_block";
+import CommonTable from "../../components/CommonTable";
 
 export default (props) => {
-  const {
+  return (
-    infos,
+    <CommonTable 
-    dataSource,
+      {...props}
-    total,
+      columns={[
-    from,
-    pageSize,
-    loading,
-    onPageChange,
-    onPageSizeChange,
-    onRowClick,
-  } = props;
-
-  const [tableData] = useMemo(() => {
-    let tableData = dataSource?.map((item) => {
-      const id = item?._source?.metadata?.node_id;
-      const metadata = item._source?.metadata || {};
-      const info = id && infos[id] ? infos[id] : {};
-      const summary = info.summary || {};
-      const metrics = info.metrics || {};
-      const fs_total_in_bytes = summary?.fs?.total?.total_in_bytes || 0;
-      const fs_available_in_bytes = summary?.fs?.total?.available_in_bytes || 0;
-      const fs_used_in_bytes = fs_total_in_bytes - fs_available_in_bytes;
-      const jvm_mem_total_in_bytes = summary?.jvm?.mem?.heap_max_in_bytes || 0;
-      const jvm_mem_used_in_bytes = summary?.jvm?.mem?.heap_used_in_bytes || 0;
-
-      const disk_percent =
-        fs_total_in_bytes > 0
-          ? Math.round((fs_used_in_bytes / fs_total_in_bytes) * 100)
-          : 0;
-      const jvm_mem_percent =
-        jvm_mem_total_in_bytes > 0
-          ? Math.round((jvm_mem_used_in_bytes / jvm_mem_total_in_bytes) * 100)
-          : 0;
-
-      const metrics_status = metrics?.status || {};
-
-      return {
-        id,
-        metadata,
-        summary,
-        metrics_status,
-        fs_total_in_bytes,
-        fs_available_in_bytes,
-        fs_used_in_bytes,
-        jvm_mem_total_in_bytes,
-        jvm_mem_used_in_bytes,
-        disk_percent,
-        jvm_mem_percent,
-      };
-    });
-    return [tableData];
-  }, [JSON.stringify(dataSource), JSON.stringify(infos)]);
-
-  const [columns] = useMemo(() => {
-    let columns = [
         {
           title: "Name",
           dataIndex: "name",
@@ -220,38 +167,47 @@ export default (props) => {
             );
           },
         },
-    ];
+      ]}
-    return [columns];
+      formatData={(dataSource, infos) => {
-  }, []);
+        const newData = dataSource?.map((item) => {
+          const id = item?._source?.metadata?.node_id;
+          const metadata = item._source?.metadata || {};
+          const info = id && infos[id] ? infos[id] : {};
+          const summary = info.summary || {};
+          const metrics = info.metrics || {};
+          const fs_total_in_bytes = summary?.fs?.total?.total_in_bytes || 0;
+          const fs_available_in_bytes = summary?.fs?.total?.available_in_bytes || 0;
+          const fs_used_in_bytes = fs_total_in_bytes - fs_available_in_bytes;
+          const jvm_mem_total_in_bytes = summary?.jvm?.mem?.heap_max_in_bytes || 0;
+          const jvm_mem_used_in_bytes = summary?.jvm?.mem?.heap_used_in_bytes || 0;
+    
+          const disk_percent =
+            fs_total_in_bytes > 0
+              ? Math.round((fs_used_in_bytes / fs_total_in_bytes) * 100)
+              : 0;
+          const jvm_mem_percent =
+            jvm_mem_total_in_bytes > 0
+              ? Math.round((jvm_mem_used_in_bytes / jvm_mem_total_in_bytes) * 100)
+              : 0;
+    
+          const metrics_status = metrics?.status || {};
     
-  return (
-    <div className="table-wrap">
-      <Table
-        size={"small"}
-        loading={loading}
-        columns={columns}
-        dataSource={tableData}
-        rowKey={"id"}
-        pagination={{
-          size: "small",
-          total,
-          pageSize,
-          onChange: onPageChange,
-          showSizeChanger: true,
-          onShowSizeChange: (_, size) => {
-            onPageSizeChange(size);
-          },
-          showTotal: (total, range) =>
-            `${range[0]}-${range[1]} of ${total} items`,
-        }}
-        onRow={(record, i) => {
           return {
-            onClick: (event) => {
+            id,
-              onRowClick(dataSource[i]);
+            metadata,
-            },
+            summary,
+            metrics_status,
+            fs_total_in_bytes,
+            fs_available_in_bytes,
+            fs_used_in_bytes,
+            jvm_mem_total_in_bytes,
+            jvm_mem_used_in_bytes,
+            disk_percent,
+            jvm_mem_percent,
           };
+        });
+        return newData
       }}
     />
-    </div>
   );
 };

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

@@ -0,0 +1,91 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { Table, Tooltip, Progress } from "antd";
+import { formatter } from "@/utils/format";
+import { formatUtcTimeToLocal } from "@/utils/utils";
+import { formatMessage } from "umi/locale";
+import { SearchEngineIcon } from "@/lib/search_engines";
+import { HealthStatusView } from "@/components/infini/health_status_view";
+import { StatusBlockGroup } from "@/components/infini/status_block";
+import { Providers, ProviderIcon } from "@/lib/providers";
+import request from "@/utils/request";
+import styles from "./index.less"
+
+export default (props) => {
+  const {
+    dataSource,
+    total,
+    from,
+    pageSize,
+    loading,
+    onPageChange,
+    onPageSizeChange,
+    onRowClick,
+    infoAction,
+    formatData,
+    columns = [],
+    parentLoading
+  } = props;
+
+  const [infos, setInfos] = useState({});
+
+  const fetchListInfo = async (data) => {
+    const res = await Promise.all(data?.map((item) => request(infoAction, {
+      method: "POST",
+      body: [item.id],
+    }, false, false)));
+    if (res) {
+      let newInfos = {}
+      res.forEach((item) => {
+        if (item && !item.error) {
+          newInfos = {
+            ...newInfos,
+            ...item
+          }
+        }
+      })
+      setInfos(newInfos);
+    }
+  };
+
+  useEffect(() => {
+    if (!parentLoading) {
+      fetchListInfo(dataSource);
+    }
+  }, [JSON.stringify(dataSource), parentLoading])
+
+  const tableData = useMemo(() => {
+    return formatData(dataSource, infos);
+  }, [JSON.stringify(dataSource), JSON.stringify(infos)]);
+
+  return (
+    <div className="table-wrap">
+      <Table
+        size={"small"}
+        loading={loading}
+        columns={columns}
+        dataSource={tableData}
+        rowKey={"id"}
+        pagination={{
+          size: "small",
+          total,
+          pageSize,
+          onChange: onPageChange,
+          showSizeChanger: true,
+          onShowSizeChange: (_, size) => {
+            onPageSizeChange(size);
+          },
+          showTotal: (total, range) =>
+            `${range[0]}-${range[1]} of ${total} items`,
+        }}
+        onRow={(record, i) => {
+          return {
+            onClick: (event) => {
+              onRowClick(dataSource[i]);
+            },
+          };
+        }}
+        rowClassName={() => styles.rowPointer}
+      />
+    </div>
+  );
+};