fix(frontend): 修复redis整机替换单据详情内容缺失问题 TencentBlueKing#7596

# Reviewed, transaction id: 21950
JustaCattt · Oct 25, 2024 · 2e4fad0 · 2e4fad0
1 parent cae7133
commit 2e4fad0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 125 deletions.
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterCutoff.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterCutoff.ts
@@ -19,47 +19,22 @@ import { random } from '@utils';
 export function generateRedisClusterCutoffCloneData(ticketData: TicketModel<RedisDBReplaceDetails>) {
   const { clusters, infos, specs } = ticketData.details;
   return Promise.resolve({
-    tableDataList: infos.reduce(
-      (dataList, item) => {
-        const roleList = ['proxy', 'redis_master', 'redis_slave'] as ['proxy', 'redis_master', 'redis_slave'];
-        const roleMap = {
-          redis_master: 'master',
-          redis_slave: 'slave',
-          proxy: 'proxy',
-        };
-        roleList.forEach((role) => {
-          if (item[role].length > 0) {
-            item[role].forEach((info) => {
-              dataList.push({
-                rowKey: random(),
-                isLoading: false,
-                ip: info.ip,
-                role: roleMap[role],
-                clusterIds: item.cluster_ids,
-                bkCloudId: item.bk_cloud_id,
-                cluster: {
-                  domain: item.cluster_ids.map((id) => clusters[id].immute_domain).join(','),
-                  isStart: false,
-                  isGeneral: true,
-                  rowSpan: 1,
-                },
-                spec: specs[info.spec_id],
-              });
-            });
-          }
-        });
-        return dataList;
-      },
-      [] as {
-        rowKey: string;
-        isLoading: boolean;
-        ip: string;
-        role: string;
-        clusterIds: number[];
-        bkCloudId: number;
-        cluster: any;
-        spec: any;
-      }[],
+    tableDataList: infos.flatMap((info) =>
+      info.display_info.data.map((curr) => ({
+        rowKey: random(),
+        isLoading: false,
+        ip: curr.ip,
+        role: curr.role,
+        clusterIds: info.cluster_ids,
+        bkCloudId: info.bk_cloud_id,
+        cluster: {
+          domain: info.cluster_ids.map((id) => clusters[id].immute_domain).join(','),
+          isStart: false,
+          isGeneral: true,
+          rowSpan: 1,
+        },
+        spec: specs[curr.spec_id],
+      })),
     ),
     remark: ticketData.remark,
   });

diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
@@ -256,6 +256,15 @@ export interface RedisDBReplaceDetails extends DetailBase {
       ip: string;
       spec_id: number;
     }[];
+    display_info: {
+      data: {
+        ip: string;
+        role: string;
+        cluster_domain: string;
+        spec_id: number;
+        spec_name: string;
+      }[];
+    };
   }[];
   specs: DetailSpecs;
 }

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/db-replace/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/db-replace/pages/page1/Index.vue
@@ -83,8 +83,6 @@
 
   import TicketRemark from '@components/ticket-remark/Index.vue';
 
-  import { switchToNormalRole } from '@utils';
-
   import RenderData from './components/Index.vue';
   import InstanceSelector, { type InstanceSelectorValues } from './components/instance-selector/Index.vue';
   import RenderDataRow, { createRowData, type IDataRow } from './components/Row.vue';
@@ -101,6 +99,15 @@
     proxy: SpecItem[];
     redis_master: SpecItem[];
     redis_slave: SpecItem[];
+    display_info: {
+      data: {
+        ip: string;
+        role: string;
+        cluster_domain: string;
+        spec_id: number;
+        spec_name: string;
+      }[];
+    };
   }
 
   const { currentBizId } = useGlobalBizs();
@@ -244,7 +251,7 @@
       rowKey: tableData.value[index].rowKey,
       isLoading: false,
       ip,
-      role: switchToNormalRole(data.instance_role),
+      role: data.instance_role,
       clusterIds: data.related_clusters.map((item) => item.id),
       bkCloudId: data.bk_cloud_id,
       cluster: {
@@ -335,6 +342,9 @@
         proxy: [],
         redis_master: [],
         redis_slave: [],
+        display_info: {
+          data: [],
+        },
       };
       const needDeleteSlaves: string[] = [];
       sameArr.forEach((item) => {
@@ -357,6 +367,15 @@
       });
       // 当选择了master的时候，对应的slave不要传给后端
       infoItem.redis_slave = infoItem.redis_slave.filter((item) => !needDeleteSlaves.includes(item.ip));
+      infoItem.display_info = {
+        data: tableData.value.map((item) => ({
+          ip: item.ip,
+          role: item.role,
+          cluster_domain: item.cluster.domain,
+          spec_id: item.spec?.id ?? null,
+          spec_name: item.spec?.name ?? '',
+        })),
+      };
       return infoItem;
     });
     return infos;

diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DBReplace.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DBReplace.vue
@@ -24,18 +24,7 @@
   import TicketModel from '@services/model/ticket/ticket';
 
   interface Props {
-    ticketDetails: TicketModel<RedisDBReplaceDetails>
-  }
-
-  interface RowData {
-    ip: string,
-    role: string,
-    clusterName: string,
-    clusterType: string,
-    sepc: {
-      id: number,
-      name: string,
-    },
+    ticketDetails: TicketModel<RedisDBReplaceDetails>;
   }
 
   const props = defineProps<Props>();
@@ -54,81 +43,17 @@
     },
     {
       label: t('所属集群'),
-      field: 'clusterName',
+      field: 'cluster_domain',
       showOverflowTooltip: true,
     },
     {
       label: t('规格需求'),
-      field: 'sepc',
+      field: 'spec_name',
       showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
     },
   ];
 
-  const tableData = computed(() => {
-    const {
-      clusters,
-      infos,
-      specs,
-    } = props.ticketDetails.details;
-
-    return infos.reduce((results, item) => {
-      if (item.proxy.length > 0) {
-        item.proxy.forEach((proxyItem) => {
-          const specInfo = specs[proxyItem.spec_id];
-          const obj = {
-            ip: proxyItem.ip,
-            role: 'Proxy',
-            clusterName: item.cluster_id
-              ? clusters[item.cluster_id].immute_domain // 兼容旧单据
-              : item.cluster_ids.map(id => clusters[id].immute_domain).join(','),
-            clusterType: clusters[item.cluster_ids[0]].cluster_type,
-            sepc: {
-              id: proxyItem.spec_id,
-              name: specInfo ? specInfo.name : '',
-            },
-          };
-          results.push(obj);
-        });
-      }
-      if (item.redis_master.length > 0) {
-        item.redis_master.forEach((masterItem) => {
-          const specInfo = specs[masterItem.spec_id];
-          const obj = {
-            ip: masterItem.ip,
-            role: 'Master',
-            clusterName: item.cluster_id
-              ? clusters[item.cluster_id].immute_domain // 兼容旧单据
-              : item.cluster_ids.map(id => clusters[id].immute_domain).join(','),
-            clusterType: clusters[item.cluster_ids[0]].cluster_type,
-            sepc: {
-              id: masterItem.spec_id,
-              name: specInfo ? specInfo.name : '',
-            },
-          };
-          results.push(obj);
-        });
-      }
-      if (item.redis_slave.length > 0) {
-        item.redis_slave.forEach((slaveItem) => {
-          const specInfo = specs[slaveItem.spec_id];
-          const obj = {
-            ip: slaveItem.ip,
-            role: 'Slave',
-            clusterName: item.cluster_id
-              ? clusters[item.cluster_id].immute_domain // 兼容旧单据
-              : item.cluster_ids.map(id => clusters[id].immute_domain).join(','),
-            clusterType: clusters[item.cluster_ids[0]].cluster_type,
-            sepc: {
-              id: slaveItem.spec_id,
-              name: specInfo ? specInfo.name : '',
-            },
-          };
-          results.push(obj);
-        });
-      }
-
-      return results;
-    }, [] as RowData[])
-  });
+  const tableData = computed(
+    () => props.ticketDetails.details.infos?.flatMap((info) => info.display_info?.data ?? []) ?? [],
+  );
 </script>