From 2e4fad0ba54dee63fa62f71a8e86874a264ed07f Mon Sep 17 00:00:00 2001 From: chenwenchang <479999519@qq.com> Date: Fri, 25 Oct 2024 16:38:42 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8Dredis?= =?UTF-8?q?=E6=95=B4=E6=9C=BA=E6=9B=BF=E6=8D=A2=E5=8D=95=E6=8D=AE=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E5=86=85=E5=AE=B9=E7=BC=BA=E5=A4=B1=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20#7596=20#=20Reviewed,=20transaction=20id:=2021950?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../generateCloneData/redis/clusterCutoff.ts | 57 ++++-------- .../services/model/ticket/details/redis.ts | 9 ++ .../redis/db-replace/pages/page1/Index.vue | 25 +++++- .../demand-factory/redis/DBReplace.vue | 87 ++----------------- 4 files changed, 53 insertions(+), 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 index da754f6ba6..f7c724a585 100644 --- 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) { 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 index e0ecc9a8cb..0a5d736f04 100644 --- 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 index d3bc426808..0e340c358b 100644 --- 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 index f9d5c789af..abc127e980 100644 --- 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 - } - - interface RowData { - ip: string, - role: string, - clusterName: string, - clusterType: string, - sepc: { - id: number, - name: string, - }, + ticketDetails: TicketModel; } const props = defineProps(); @@ -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}) => {data.sepc.name}, }, ]; - 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 ?? []) ?? [], + );