diff --git a/web/src/components/Overview/index.tsx b/web/src/components/Overview/index.tsx
index 4e0b3b6e..7af473e5 100644
--- a/web/src/components/Overview/index.tsx
+++ b/web/src/components/Overview/index.tsx
@@ -301,6 +301,7 @@ export default forwardRef((props: IProps, ref: any) => {
setSelectedItem(item);
drawRef.current?.open();
}}
+ parentLoading={loading}
/>
)}
diff --git a/web/src/pages/Platform/Overview/Cluster/Table/index.jsx b/web/src/pages/Platform/Overview/Cluster/Table/index.jsx
index f13e8419..7ce235f7 100644
--- a/web/src/pages/Platform/Overview/Cluster/Table/index.jsx
+++ b/web/src/pages/Platform/Overview/Cluster/Table/index.jsx
@@ -1,303 +1,233 @@
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"
+import CommonTable from "../../components/CommonTable";
export default (props) => {
- const {
- dataSource,
- total,
- from,
- 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",
- render: (text, record) => {
- return (
-
- Host: {record.metadata?.host}
-
- Provider:{" "}
- {formatMessage({
- id: `cluster.providers.${record.metadata?.location
- ?.provider ?? Providers.OnPremises}`,
- })}
-
- Region: {record.metadata?.location?.region ?? ""}
-
- Version: {record.metadata?.version ?? ""}
-
- Tags:{" "}
- {record.metadata?.tags ? record.metadata.tags.toString() : ""}
-
- }
- >
-
-
- {record.metadata?.name}
-
-
- );
- },
- },
- {
- title: "Version",
- dataIndex: "version",
- render: (text, record) => {
- return record.metadata?.version ?? "";
- },
- },
- {
- title: "Health",
- dataIndex: "health_status",
- render: (text, record) => {
- return (
-
-
-
- {record.metrics_status?.metric?.label +
- "(" +
- (record.metrics_status?.data?.length || 14) +
- " " +
- record.metrics_status?.metric?.units +
- ")"}
-
-
- }
- >
-
-
-
-
- );
- },
- },
- {
- title: "Nodes",
- dataIndex: "nodes",
- render: (text, record) => {
- return record.summary?.number_of_nodes || 0;
- },
- },
- {
- title: "Indices",
- dataIndex: "Indices",
- render: (text, record) => {
- return record.summary?.number_of_indices || 0;
- },
- },
- {
- title: "Shards",
- dataIndex: "Shards",
- render: (text, record) => {
- return record.summary?.number_of_shards || 0;
- },
- },
- {
- title: "Docs",
- dataIndex: "Docs",
- render: (text, record) => {
- return (
-
- {formatter.numberToHuman(record.summary?.number_of_documents)}
-
- );
- },
- },
- {
- title: "Disk Usage",
- dataIndex: "DiskUsage",
- render: (text, record) => {
- return (
-
- Total:{formatter.bytes(record.fs_total_in_bytes)}
-
- Used:{formatter.bytes(record.fs_used_in_bytes)}
-
- Free:{formatter.bytes(record.fs_available_in_bytes)}
-
- }
- >
-
- );
- },
- },
- {
- title: "JVM Heap",
- dataIndex: "JVMHeap",
- render: (text, record) => {
- return (
-
- Total:{formatter.bytes(record.jvm_mem_total_in_bytes)}
-
- Used:{formatter.bytes(record.jvm_mem_used_in_bytes)}
-
- Free:
- {formatter.bytes(
- record.jvm_mem_total_in_bytes - record.jvm_mem_used_in_bytes
- )}
-
- }
- >
-
- );
- },
- },
- ];
- return [columns];
- }, []);
-
return (
-
-
{
- onPageSizeChange(size);
+ {
+ return (
+
+ Host: {record.metadata?.host}
+
+ Provider:{" "}
+ {formatMessage({
+ id: `cluster.providers.${record.metadata?.location
+ ?.provider ?? Providers.OnPremises}`,
+ })}
+
+ Region: {record.metadata?.location?.region ?? ""}
+
+ Version: {record.metadata?.version ?? ""}
+
+ Tags:{" "}
+ {record.metadata?.tags ? record.metadata.tags.toString() : ""}
+
+ }
+ >
+
+
+ {record.metadata?.name}
+
+
+ );
},
- showTotal: (total, range) =>
- `${range[0]}-${range[1]} of ${total} items`,
- }}
- onRow={(record, i) => {
+ },
+ {
+ title: "Version",
+ dataIndex: "version",
+ render: (text, record) => {
+ return record.metadata?.version ?? "";
+ },
+ },
+ {
+ title: "Health",
+ dataIndex: "health_status",
+ render: (text, record) => {
+ return (
+
+
+
+ {record.metrics_status?.metric?.label +
+ "(" +
+ (record.metrics_status?.data?.length || 14) +
+ " " +
+ record.metrics_status?.metric?.units +
+ ")"}
+
+
+ }
+ >
+
+
+
+
+ );
+ },
+ },
+ {
+ title: "Nodes",
+ dataIndex: "nodes",
+ render: (text, record) => {
+ return record.summary?.number_of_nodes || 0;
+ },
+ },
+ {
+ title: "Indices",
+ dataIndex: "Indices",
+ render: (text, record) => {
+ return record.summary?.number_of_indices || 0;
+ },
+ },
+ {
+ title: "Shards",
+ dataIndex: "Shards",
+ render: (text, record) => {
+ return record.summary?.number_of_shards || 0;
+ },
+ },
+ {
+ title: "Docs",
+ dataIndex: "Docs",
+ render: (text, record) => {
+ return (
+
+ {formatter.numberToHuman(record.summary?.number_of_documents)}
+
+ );
+ },
+ },
+ {
+ title: "Disk Usage",
+ dataIndex: "DiskUsage",
+ render: (text, record) => {
+ return (
+
+ Total:{formatter.bytes(record.fs_total_in_bytes)}
+
+ Used:{formatter.bytes(record.fs_used_in_bytes)}
+
+ Free:{formatter.bytes(record.fs_available_in_bytes)}
+
+ }
+ >
+
+ );
+ },
+ },
+ {
+ title: "JVM Heap",
+ dataIndex: "JVMHeap",
+ render: (text, record) => {
+ return (
+
+ Total:{formatter.bytes(record.jvm_mem_total_in_bytes)}
+
+ Used:{formatter.bytes(record.jvm_mem_used_in_bytes)}
+
+ Free:
+ {formatter.bytes(
+ record.jvm_mem_total_in_bytes - record.jvm_mem_used_in_bytes
+ )}
+
+ }
+ >
+
+ );
+ },
+ },
+ ]}
+ 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 {
- onClick: (event) => {
- onRowClick(dataSource[i]);
- },
+ 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,
};
- }}
- rowClassName={() => styles.rowPointer}
- />
-
+ });
+ return newData
+ }}
+ />
);
};
diff --git a/web/src/pages/Platform/Overview/Indices/Table/index.jsx b/web/src/pages/Platform/Overview/Indices/Table/index.jsx
index ab562b95..2e1f777f 100644
--- a/web/src/pages/Platform/Overview/Indices/Table/index.jsx
+++ b/web/src/pages/Platform/Overview/Indices/Table/index.jsx
@@ -1,208 +1,167 @@
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(() => {
- let tableData = 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 {
- id,
- metadata,
- summary,
- metrics_status,
- timestamp,
- };
- });
- return [tableData];
- }, [JSON.stringify(dataSource), JSON.stringify(infos)]);
-
- const [columns] = useMemo(() => {
- let columns = [
- {
- title: "Name",
- dataIndex: "name",
- render: (text, record) => {
- return (
-
- Cluster: {record.metadata?.cluster_name}
-
- Aliases: {record.metadata?.aliases?.join(",")}
-
- Timestamp: {record.timestamp}
-
- }
- >
-
-
-
-
- {record.metadata?.index_name}
-
-
- );
- },
- },
- {
- title: "Health",
- dataIndex: "health_status",
- render: (text, record) => {
- return (
-
-
-
- {record.metrics_status?.metric?.label +
- "(" +
- (record.metrics_status?.data?.length || 14) +
- " " +
- record.metrics_status?.metric?.units +
- ")"}
-
-
- }
- >
-
-
-
-
- );
- },
- },
- {
- title: "Status",
- dataIndex: "index_status",
- render: (text, record) => {
- return record.metadata?.labels?.state ?? "N/A";
- },
- },
- {
- title: "Store Size",
- dataIndex: "store_size",
- render: (text, record) => {
- return record.summary?.index_info?.store_size?.toUpperCase() || "N/A";
- },
- },
- {
- title: "Shards",
- dataIndex: "Shards",
- render: (text, record) => {
- return (
-
- Unassigned Shards:
- {record.summary?.unassigned_shards || 0}
-
- Shards:
- {record.summary?.index_info?.shards || 0}
-
- Replicas:
- {record.summary?.index_info?.replicas || 0}
-
- }
- >
- {record.summary?.unassigned_shards || 0} /{" "}
- {record.summary?.index_info?.shards ||
- 0 + (record.summary?.index_info?.replicas || 0)}
-
- );
- },
- },
- {
- title: "Docs",
- dataIndex: "Docs",
- render: (text, record) => {
- return (
-
- Deleted:
- {formatter.number(record.summary?.docs?.deleted || 0)}
-
- Total:
- {formatter.number(record.summary?.docs?.count || 0)}
-
- }
- >
- {formatter.numberToHuman(record.summary?.docs?.deleted)} /{" "}
- {formatter.numberToHuman(record.summary?.docs?.count)}
-
- );
- },
- },
- ];
- return [columns];
- }, []);
return (
-
-
{
- onPageSizeChange(size);
+ {
+ return (
+
+ Cluster: {record.metadata?.cluster_name}
+
+ Aliases: {record.metadata?.aliases?.join(",")}
+
+ Timestamp: {record.timestamp}
+
+ }
+ >
+
+
+
+
+ {record.metadata?.index_name}
+
+
+ );
},
- showTotal: (total, range) =>
- `${range[0]}-${range[1]} of ${total} items`,
- }}
- onRow={(record, i) => {
+ },
+ {
+ title: "Health",
+ dataIndex: "health_status",
+ render: (text, record) => {
+ return (
+
+
+
+ {record.metrics_status?.metric?.label +
+ "(" +
+ (record.metrics_status?.data?.length || 14) +
+ " " +
+ record.metrics_status?.metric?.units +
+ ")"}
+
+
+ }
+ >
+
+
+
+
+ );
+ },
+ },
+ {
+ title: "Status",
+ dataIndex: "index_status",
+ render: (text, record) => {
+ return record.metadata?.labels?.state ?? "N/A";
+ },
+ },
+ {
+ title: "Store Size",
+ dataIndex: "store_size",
+ render: (text, record) => {
+ return record.summary?.index_info?.store_size?.toUpperCase() || "N/A";
+ },
+ },
+ {
+ title: "Shards",
+ dataIndex: "Shards",
+ render: (text, record) => {
+ return (
+
+ Unassigned Shards:
+ {record.summary?.unassigned_shards || 0}
+
+ Shards:
+ {record.summary?.index_info?.shards || 0}
+
+ Replicas:
+ {record.summary?.index_info?.replicas || 0}
+
+ }
+ >
+ {record.summary?.unassigned_shards || 0} /{" "}
+ {record.summary?.index_info?.shards ||
+ 0 + (record.summary?.index_info?.replicas || 0)}
+
+ );
+ },
+ },
+ {
+ title: "Docs",
+ dataIndex: "Docs",
+ render: (text, record) => {
+ return (
+
+ Deleted:
+ {formatter.number(record.summary?.docs?.deleted || 0)}
+
+ Total:
+ {formatter.number(record.summary?.docs?.count || 0)}
+
+ }
+ >
+ {formatter.numberToHuman(record.summary?.docs?.deleted)} /{" "}
+ {formatter.numberToHuman(record.summary?.docs?.count)}
+
+ );
+ },
+ },
+ ]}
+ 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 {
- onClick: (event) => {
- onRowClick(dataSource[i]);
- },
+ id,
+ metadata,
+ summary,
+ metrics_status,
+ timestamp,
};
- }}
- />
-
+ });
+ return newData
+ }}
+ />
);
};
diff --git a/web/src/pages/Platform/Overview/Node/Table/index.jsx b/web/src/pages/Platform/Overview/Node/Table/index.jsx
index 533dfbd0..375a5bf3 100644
--- a/web/src/pages/Platform/Overview/Node/Table/index.jsx
+++ b/web/src/pages/Platform/Overview/Node/Table/index.jsx
@@ -1,257 +1,213 @@
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(() => {
- 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",
- render: (text, record) => {
- return (
-
- Transport Address:{" "}
- {record.metadata?.labels?.transport_address}
-
- Cluster: {record.metadata?.cluster_name ?? ""}
-
- Version: {record.metadata?.labels?.version ?? ""}
-
- Roles:{" "}
- {record.metadata?.labels?.roles
- ? record.metadata?.labels?.roles?.toString()
- : ""}
-
- }
- >
-
-
- {record.summary?.is_master_node ? (
-
- ) : (
-
- )}
-
- {record.metadata?.node_name}
-
-
- );
- },
- },
- {
- title: "Status",
- dataIndex: "status",
- render: (text, record) => {
- return (
-
-
-
- {record.metrics_status?.metric?.label +
- "(" +
- (record.metrics_status?.data?.length || 14) +
- " " +
- record.metrics_status?.metric?.units +
- ")"}
-
-
- }
- >
-
-
-
-
- );
- },
- },
- {
- title: "Indices",
- dataIndex: "Indices",
- render: (text, record) => {
- return record.summary?.shard_info?.indices_count || 0;
- },
- },
- {
- title: "Shards",
- dataIndex: "Shards",
- render: (text, record) => {
- return record.summary?.shard_info?.shard_count || 0;
- },
- },
- {
- title: "Docs",
- dataIndex: "Docs",
- render: (text, record) => {
- return (
-
- {formatter.numberToHuman(record.summary?.indices?.docs?.count)}
-
- );
- },
- },
- {
- title: "Disk Usage",
- dataIndex: "DiskUsage",
- render: (text, record) => {
- return (
-
- Total:{formatter.bytes(record.fs_total_in_bytes)}
-
- Used:{formatter.bytes(record.fs_used_in_bytes)}
-
- Free:{formatter.bytes(record.fs_available_in_bytes)}
-
- }
- >
-
- );
- },
- },
- {
- title: "JVM Heap",
- dataIndex: "JVMHeap",
- render: (text, record) => {
- return (
-
- Total:{formatter.bytes(record.jvm_mem_total_in_bytes)}
-
- Used:{formatter.bytes(record.jvm_mem_used_in_bytes)}
-
- Free:
- {formatter.bytes(
- record.jvm_mem_total_in_bytes - record.jvm_mem_used_in_bytes
- )}
-
- }
- >
-
- );
- },
- },
- ];
- return [columns];
- }, []);
-
return (
-
-
{
- onPageSizeChange(size);
+ {
+ return (
+
+ Transport Address:{" "}
+ {record.metadata?.labels?.transport_address}
+
+ Cluster: {record.metadata?.cluster_name ?? ""}
+
+ Version: {record.metadata?.labels?.version ?? ""}
+
+ Roles:{" "}
+ {record.metadata?.labels?.roles
+ ? record.metadata?.labels?.roles?.toString()
+ : ""}
+
+ }
+ >
+
+
+ {record.summary?.is_master_node ? (
+
+ ) : (
+
+ )}
+
+ {record.metadata?.node_name}
+
+
+ );
},
- showTotal: (total, range) =>
- `${range[0]}-${range[1]} of ${total} items`,
- }}
- onRow={(record, i) => {
+ },
+ {
+ title: "Status",
+ dataIndex: "status",
+ render: (text, record) => {
+ return (
+
+
+
+ {record.metrics_status?.metric?.label +
+ "(" +
+ (record.metrics_status?.data?.length || 14) +
+ " " +
+ record.metrics_status?.metric?.units +
+ ")"}
+
+
+ }
+ >
+
+
+
+
+ );
+ },
+ },
+ {
+ title: "Indices",
+ dataIndex: "Indices",
+ render: (text, record) => {
+ return record.summary?.shard_info?.indices_count || 0;
+ },
+ },
+ {
+ title: "Shards",
+ dataIndex: "Shards",
+ render: (text, record) => {
+ return record.summary?.shard_info?.shard_count || 0;
+ },
+ },
+ {
+ title: "Docs",
+ dataIndex: "Docs",
+ render: (text, record) => {
+ return (
+
+ {formatter.numberToHuman(record.summary?.indices?.docs?.count)}
+
+ );
+ },
+ },
+ {
+ title: "Disk Usage",
+ dataIndex: "DiskUsage",
+ render: (text, record) => {
+ return (
+
+ Total:{formatter.bytes(record.fs_total_in_bytes)}
+
+ Used:{formatter.bytes(record.fs_used_in_bytes)}
+
+ Free:{formatter.bytes(record.fs_available_in_bytes)}
+
+ }
+ >
+
+ );
+ },
+ },
+ {
+ title: "JVM Heap",
+ dataIndex: "JVMHeap",
+ render: (text, record) => {
+ return (
+
+ Total:{formatter.bytes(record.jvm_mem_total_in_bytes)}
+
+ Used:{formatter.bytes(record.jvm_mem_used_in_bytes)}
+
+ Free:
+ {formatter.bytes(
+ record.jvm_mem_total_in_bytes - record.jvm_mem_used_in_bytes
+ )}
+
+ }
+ >
+
+ );
+ },
+ },
+ ]}
+ 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 {
- onClick: (event) => {
- onRowClick(dataSource[i]);
- },
+ 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 newData
+ }}
+ />
);
};
diff --git a/web/src/pages/Platform/Overview/components/CommonTable/index.jsx b/web/src/pages/Platform/Overview/components/CommonTable/index.jsx
new file mode 100644
index 00000000..3d141935
--- /dev/null
+++ b/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 (
+
+
{
+ onPageSizeChange(size);
+ },
+ showTotal: (total, range) =>
+ `${range[0]}-${range[1]} of ${total} items`,
+ }}
+ onRow={(record, i) => {
+ return {
+ onClick: (event) => {
+ onRowClick(dataSource[i]);
+ },
+ };
+ }}
+ rowClassName={() => styles.rowPointer}
+ />
+
+ );
+};
diff --git a/web/src/pages/Platform/Overview/Cluster/Table/index.less b/web/src/pages/Platform/Overview/components/CommonTable/index.less
similarity index 100%
rename from web/src/pages/Platform/Overview/Cluster/Table/index.less
rename to web/src/pages/Platform/Overview/components/CommonTable/index.less