[inlong] branch master updated: [INLONG-7438][Dashboard] Support more Sort index display instead of directly displaying ID (#7440)

[leezng]

This is an automated email from the ASF dual-hosted git repository.

leezng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git


The following commit(s) were added to refs/heads/master by this push:
     new 803682a4e [INLONG-7438][Dashboard] Support more Sort index display 
instead of directly displaying ID (#7440)
803682a4e is described below

commit 803682a4e05ac79bfd645a2e6e2b8efd1213615a
Author: Daniel <lee...@apache.org>
AuthorDate: Mon Feb 27 14:16:59 2023 +0800

    [INLONG-7438][Dashboard] Support more Sort index display instead of 
directly displaying ID (#7440)
---
 inlong-dashboard/src/configs/menus/index.ts               |  1 +
 inlong-dashboard/src/pages/GroupDetail/Audit/config.tsx   | 15 +++++++++++----
 .../src/pages/GroupDetail/DataStorage/DetailModal.tsx     |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/inlong-dashboard/src/configs/menus/index.ts 
b/inlong-dashboard/src/configs/menus/index.ts
index f19e26c1d..d02fddecf 100644
--- a/inlong-dashboard/src/configs/menus/index.ts
+++ b/inlong-dashboard/src/configs/menus/index.ts
@@ -27,6 +27,7 @@ export interface MenuItemType {
   children?: MenuItemType[];
   path?: string;
   isAdmin?: boolean;
+  icon?: React.ReactNode;
 }
 
 const genMenuKey = (array: Omit<MenuItemType, 'key'>[], parentKey = ''): 
MenuItemType[] => {
diff --git a/inlong-dashboard/src/pages/GroupDetail/Audit/config.tsx 
b/inlong-dashboard/src/pages/GroupDetail/Audit/config.tsx
index 8d6a8b41c..ac3f39ceb 100644
--- a/inlong-dashboard/src/pages/GroupDetail/Audit/config.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/Audit/config.tsx
@@ -37,7 +37,7 @@ export const timeStaticsDimList = [
   },
 ];
 
-export const auditList = ['Agent', 'DataProxy', 'Sort'].reduce((acc, item, 
index) => {
+const auditList = ['Agent', 'DataProxy', 'Sort'].reduce((acc, item, index) => {
   return acc.concat([
     {
       label: `${item} ${i18n.t('pages.GroupDetail.Audit.Receive')}`,
@@ -58,11 +58,18 @@ const auditMap = auditList.reduce(
   {},
 );
 
+function getAuditLabel(auditId: number, nodeType?: string) {
+  const id = +auditId;
+  const item = id >= 9 ? auditMap[id % 2 ? 7 : 8] : auditMap[id];
+  const label = item?.label || id;
+  return nodeType ? `${label}(${nodeType})` : label;
+}
+
 export const toChartData = (source, sourceDataMap) => {
   const xAxisData = Object.keys(sourceDataMap);
   return {
     legend: {
-      data: source.map(item => auditMap[item.auditId]?.label),
+      data: source.map(item => getAuditLabel(item.auditId, item.nodeType)),
     },
     tooltip: {
       trigger: 'axis',
@@ -75,7 +82,7 @@ export const toChartData = (source, sourceDataMap) => {
       type: 'value',
     },
     series: source.map(item => ({
-      name: auditMap[item.auditId]?.label,
+      name: getAuditLabel(item.auditId, item.nodeType),
       type: 'line',
       data: xAxisData.map(logTs => sourceDataMap[logTs]?.[item.auditId] || 0),
     })),
@@ -152,7 +159,7 @@ export const getFormContent = (inlongGroupId, 
initialValues, onSearch, onDataStr
 
 export const getTableColumns = source => {
   const data = source.map(item => ({
-    title: auditMap[item.auditId]?.label || item.auditId,
+    title: getAuditLabel(item.auditId, item.nodeType),
     dataIndex: item.auditId,
     render: text => text || 0,
   }));
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx 
b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
index 42961e873..3b90dee98 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
@@ -114,7 +114,7 @@ const Comp: React.FC<DetailModalProps> = ({
         })),
       });
     }
-  }, [Entity, streamDetail, form]);
+  }, [Entity, streamDetail, form, id]);
 
   useUpdateEffect(() => {
     if (modalProps.visible) {