From b6055576c96e73c93ea747527a9ef2828d17f16d Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Sat, 7 Dec 2024 20:40:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=8D=95=E6=8D=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=BF=AD=E4=BB=A3=5F123=20#7190?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |  10 +-
 .../details/tendbCluster/spiderReduceNodes.ts |   2 +-
 .../components/task-info/Index.vue            |   2 +-
 .../common/mysql-truncate-data/Index.vue      |   4 +
 .../components/info-list/InfoItem.vue         |   2 +-
 .../com-factory/redis/ScaleUpdown.vue         |  15 ++-
 .../com-factory/tendbCluster/CheckSum.vue     |   4 +-
 .../com-factory/tendbCluster/Flashback.vue    |  33 +++--
 .../tendbCluster/SpiderReduceNodes.vue        | 126 +++++-------------
 9 files changed, 80 insertions(+), 118 deletions(-)

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 284026e78d..57c0739125 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -49,7 +49,7 @@
   "备份目标": "备份目标",
   "备份类型": "备份类型",
   "备注": "备注",
-  "备注：": "备注：",
+  "备注:": "备注:",
   "大小": "大小",
   "大数据": "大数据",
   "字符集": "字符集",
@@ -3802,5 +3802,13 @@
   "构造类型：": "构造类型：",
   "备份记录：": "备份记录：",
   "新客户端 IP": "新客户端 IP",
+  "全局超时时间（h）:": "全局超时时间（h）:",
+  "修复数据:": "修复数据:",
+  "修复模式:": "修复模式:",
+  "主库主机关联实例": "主库主机关联实例",
+  "数据校验:": "数据校验:",
+  "校验时间:": "校验时间:",
+  "定时执行时间:": "定时执行时间:",
+  "忽略业务连接:": "忽略业务连接:",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/spiderReduceNodes.ts b/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/spiderReduceNodes.ts
index baa2b8e8eb..b5fdcc1d95 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/spiderReduceNodes.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/spiderReduceNodes.ts
@@ -11,7 +11,7 @@ export interface SpiderReduceNodes extends DetailBase {
     cluster_id: number;
     reduce_spider_role: string;
     spider_reduced_to_count: number;
-    spider_reduced_hosts: {
+    spider_reduced_hosts?: {
       ip: string;
       bk_host_id: number;
       bk_cloud_id: number;
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue
index ef0213b83d..a74bd7125d 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue
@@ -20,7 +20,7 @@
       class="ticket-details-page"
       :data="data" />
     <InfoList>
-      <Item :label="t('备注：')">
+      <Item :label="t('备注:')">
         {{ data.remark || '--' }}
       </Item>
     </InfoList>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-truncate-data/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-truncate-data/Index.vue
index 563a535752..aaa792b21b 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-truncate-data/Index.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-truncate-data/Index.vue
@@ -37,6 +37,7 @@
           :key="item">
           {{ item }}
         </BkTag>
+        <span v-if="data.db_patterns.length < 1">--</span>
       </template>
     </BkTableColumn>
     <BkTableColumn :label="t('忽略 DB 名')">
@@ -46,6 +47,7 @@
           :key="item">
           {{ item }}
         </BkTag>
+        <span v-if="data.ignore_dbs.length < 1">--</span>
       </template>
     </BkTableColumn>
     <BkTableColumn :label="t('指定表名')">
@@ -55,6 +57,7 @@
           :key="item">
           {{ item }}
         </BkTag>
+        <span v-if="data.table_patterns.length < 1">--</span>
       </template>
     </BkTableColumn>
     <BkTableColumn :label="t('忽略表名')">
@@ -64,6 +67,7 @@
           :key="item">
           {{ item }}
         </BkTag>
+        <span v-if="data.ignore_tables.length < 1">--</span>
       </template>
     </BkTableColumn>
   </BkTable>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/info-list/InfoItem.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/info-list/InfoItem.vue
index ab6385b302..3d41c136ac 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/info-list/InfoItem.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/info-list/InfoItem.vue
@@ -14,7 +14,7 @@
   defineProps<Props>();
 </script>
 <style lang="less">
-  @label-width: 100px;
+  @label-width: 150px;
 
   .db-ticket-info-item {
     flex: 0 0 50%;
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
index 2a2beb85e1..b4b313fe1b 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
@@ -12,24 +12,27 @@
 -->
 
 <template>
-  <BkTable
-    :data="ticketDetails.details.infos"
-    show-overflow-tooltip>
+  <BkTable :data="ticketDetails.details.infos">
     <BkTableColumn
+      fixed="left"
       :label="t('源集群')"
-      :min-width="180">
+      :min-width="220"
+      :show-overflow="false">
       <template #default="{ data }: { data: RowData }">
         {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('架构版本')">
+    <BkTableColumn
+      :label="t('架构版本')"
+      :min-width="180">
       <template #default="{ data }: { data: RowData }">
         {{ ticketDetails.details.clusters[data.cluster_id].cluster_type_name }}
       </template>
     </BkTableColumn>
     <BkTableColumn
       field="db_version"
-      :label="t('Redis版本')">
+      :label="t('Redis版本')"
+      :min-width="100">
     </BkTableColumn>
     <BkTableColumn
       :label="t('当前容量')"
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/CheckSum.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/CheckSum.vue
index af24c9cb3b..31839154b3 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/CheckSum.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/CheckSum.vue
@@ -51,14 +51,14 @@
       :label="t('校验从库')"
       :width="220">
       <template #default="{ data }: { data: RowData }">
-        {{ data.slave }}
+        {{ data.slave || '--' }}
       </template>
     </BkTableColumn>
     <BkTableColumn
       :label="t('校验主库')"
       :width="220">
       <template #default="{ data }: { data: RowData }">
-        {{ data.slave }}
+        {{ data.master || '--' }}
       </template>
     </BkTableColumn>
     <BkTableColumn
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
index 87510ad989..a17e1035ac 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
@@ -12,25 +12,32 @@
 -->
 
 <template>
-  <BkTable
-    :data="ticketDetails.details.infos"
-    show-overflow-tooltip>
-    <BkTableColumn :label="t('目标集群')">
+  <BkTable :data="ticketDetails.details.infos">
+    <BkTableColumn
+      fixed="left"
+      :label="t('目标集群')"
+      :min-width="220">
       <template #default="{ data }: { data: RowData }">
         {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('回档时间')">
+    <BkTableColumn
+      :label="t('回档时间')"
+      :min-width="250">
       <template #default="{ data }: { data: RowData }">
         {{ utcDisplayTime(data.start_time) }}
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('截止时间')">
+    <BkTableColumn
+      :label="t('截止时间')"
+      :min-width="250">
       <template #default="{ data }: { data: RowData }">
         {{ utcDisplayTime(data.end_time) }}
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('目标库')">
+    <BkTableColumn
+      :label="t('目标库')"
+      :min-width="120">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.databases"
@@ -40,7 +47,9 @@
         <span v-if="data.databases.length < 1">--</span>
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('目标表')">
+    <BkTableColumn
+      :label="t('目标表')"
+      :min-width="120">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.tables"
@@ -50,7 +59,9 @@
         <span v-if="data.tables.length < 1">--</span>
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('忽略库')">
+    <BkTableColumn
+      :label="t('忽略库')"
+      :min-width="120">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.databases_ignore"
@@ -60,7 +71,9 @@
         <span v-if="data.databases_ignore.length < 1">--</span>
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('忽略表')">
+    <BkTableColumn
+      :label="t('忽略表')"
+      :min-width="120">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.tables_ignore"
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/SpiderReduceNodes.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/SpiderReduceNodes.vue
index c4cd02cb62..72156d314c 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/SpiderReduceNodes.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/SpiderReduceNodes.vue
@@ -12,39 +12,40 @@
 -->
 
 <template>
-  <BkLoading :loading="loading">
-    <BkTable :data="tableData">
-      <BkTableColumn :label="t('目标集群')">
-        <template #default="{ data }: { data: RowData }">
-          {{ data.clusterName }}
+  <BkTable :data="ticketDetails.details.infos">
+    <BkTableColumn :label="t('目标集群')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('缩容节点类型')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.reduce_spider_role === 'spider_master' ? 'Master' : 'Slave' }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('主机选择方式')">
+      <template #default="{ data }: { data: RowData }">
+        <template v-if="data.spider_reduced_hosts">
+          <div
+            v-for="item in data.spider_reduced_hosts"
+            :key="item.bk_host_id">
+            {{ item.ip }}
+          </div>
         </template>
-      </BkTableColumn>
-      <BkTableColumn :label="t('缩容节点类型')">
-        <template #default="{ data }: { data: RowData }">
-          {{ data.nodeType }}
-        </template>
-      </BkTableColumn>
-      <BkTableColumn :label="t('主机选择方式')">
-        <template #default="{ data }: { data: RowData }">
-          <div style="line-height: 18px; white-space: break-spaces">{{ data.hostSelectType }}</div>
-        </template>
-      </BkTableColumn>
-      <BkTableColumn :label="t('缩容数量(台)')">
-        <template #default="{ data }: { data: RowData }">
-          {{ data.targetNum }}
-        </template>
-      </BkTableColumn>
-    </BkTable>
-  </BkLoading>
+        <span v-else>{{ t('自动匹配') }}</span>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('缩容数量(台)')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.spider_reduced_hosts ? data.spider_reduced_hosts.length : data.spider_reduced_to_count }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
 </template>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import TicketModel, { type TendbCluster } from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
 
   import { TicketTypes } from '@common/const';
 
@@ -52,7 +53,7 @@
     ticketDetails: TicketModel<TendbCluster.SpiderReduceNodes>;
   }
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES,
@@ -61,72 +62,5 @@
 
   const { t } = useI18n();
 
-  const { infos } = props.ticketDetails.details;
-
-  interface RowData {
-    clusterName: string;
-    clusterType: string;
-    nodeType: string;
-    sepcName: string;
-    hostSelectType: string;
-    targetNum: number;
-  }
-  const tableData = ref<RowData[]>([]);
-
-  const { loading } = useRequest(getTendbclusterListByBizId, {
-    defaultParams: [
-      {
-        bk_biz_id: props.ticketDetails.bk_biz_id,
-        offset: 0,
-        limit: -1,
-      },
-    ],
-    onSuccess: async (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, {
-            [item.id]: {
-              clusterName: item.master_domain,
-              clusterType: item.cluster_spec.spec_cluster_type,
-              specId: item.cluster_spec.spec_id,
-            },
-          });
-          return obj;
-        },
-        {} as Record<number, { clusterName: string; clusterType: string; specId: number }>,
-      );
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map((item) => item.clusterType))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(
-        clusterTypes.map(async (type) => {
-          const ret = await getResourceSpecList({
-            spec_cluster_type: type,
-            limit: -1,
-            offset: 0,
-          });
-          sepcMap[type] = ret.results;
-        }),
-      );
-      loading.value = false;
-      tableData.value = infos.map((item) => {
-        const sepcList = sepcMap[clusterMap[item?.cluster_id]?.clusterType] || [];
-        const specInfo = sepcList.find((row) => row.spec_id === clusterMap[item.cluster_id].specId);
-        const ipList = (item.spider_reduced_hosts || []).map((item) => item.ip);
-        return {
-          clusterName: clusterMap[item?.cluster_id]?.clusterName,
-          clusterType: clusterMap[item?.cluster_id]?.clusterType,
-          nodeType: item.reduce_spider_role === 'spider_master' ? 'Master' : 'Slave',
-          sepcName: specInfo ? specInfo.spec_name : '',
-          hostSelectType: ipList.length > 0 ? ipList.join('\n') : t('自动匹配'),
-          targetNum: item.spider_reduced_to_count || ipList.length,
-        };
-      });
-    },
-  });
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 </script>