From 2d4c365a9f3c2a9a96611bd284d385a19323153a Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Mon, 6 Jan 2025 18:23:36 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20mongodb=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E9=87=8D=E6=9E=84=5F=E7=BC=A9=E5=AE=B9Shard=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=95=B0=20#8498?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MONGODB_REDUCE_SHARD_NODES/Create.vue     | 334 ++++++++++++++++++
 .../MONGODB_REDUCE_SHARD_NODES/Index.vue      |  32 ++
 .../src/views/db-manage/mongodb/routes.ts     |  17 +-
 .../views/db-manage/mongodb/toolbox-menu.ts   |   2 +-
 .../ticket-center/common/TicketClone.vue      |   1 +
 5 files changed, 377 insertions(+), 9 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Index.vue

diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Create.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Create.vue
new file mode 100644
index 0000000000..e0e6f36311
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Create.vue
@@ -0,0 +1,334 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <SmartAction>
+    <div class="proxy-scale-down-page">
+      <BkAlert
+        closable
+        theme="info"
+        :title="t('缩容Shard节点数：xxx')" />
+      <DbForm
+        ref="form"
+        class="toolbox-form mt-16"
+        form-type="vertical"
+        :model="formData">
+        <EditableTable
+          ref="editableTable"
+          class="mt16 mb16"
+          :model="formData.tableData"
+          :rules="rules">
+          <EditableRow
+            v-for="(item, index) in formData.tableData"
+            :key="index">
+            <ClusterWithRelatedClustersColumn
+              v-model="item.cluster"
+              :cluster-types="[ClusterTypes.MONGO_REPLICA_SET, ClusterTypes.MONGO_SHARED_CLUSTER]"
+              :selected="selected"
+              @batch-edit="handleClusterBatchEdit" />
+            <EditableColumn
+              :label="t('集群类型')"
+              :width="200">
+              <EditableBlock
+                v-model="item.cluster.cluster_type_name"
+                :placeholder="t('输入集群后自动生成')" />
+            </EditableColumn>
+            <EditableColumn
+              :label="t('当前 Shard 的节点数')"
+              :width="200">
+              <EditableBlock :placeholder="t('输入集群后自动生成')">
+                {{ item.cluster.shard_node_count }}
+              </EditableBlock>
+            </EditableColumn>
+            <EditableColumn
+              field="target_num"
+              :label="t('缩容至（节点数）')"
+              required
+              :width="200">
+              <EditableInput
+                v-model="item.target_num"
+                :disabled="!item.cluster.id"
+                :max="item.cluster.shard_node_count"
+                :min="1"
+                type="number" />
+            </EditableColumn>
+            <OperationColumn
+              :create-row-method="createRowData"
+              :table-data="formData.tableData" />
+          </EditableRow>
+        </EditableTable>
+        <IgnoreBiz
+          v-model="formData.is_ignore_business_access"
+          v-bk-tooltips="t('如忽略_有连接的情况下也会执行')" />
+        <TicketPayload v-model="formData" />
+      </DbForm>
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml-8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+
+<script setup lang="tsx">
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import MongodbModel from '@services/model/mongodb/mongodb';
+  import type { Mongodb } from '@services/model/ticket/ticket';
+
+  import { useCreateTicket, useTicketDetail } from '@hooks';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
+  import ClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/cluster-column/Index.vue';
+  import ClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/cluster-with-related-clusters-column/Index.vue';
+
+  export interface IDataRow {
+    cluster: {
+      id: number;
+      master_domain: string;
+      related_clusters: {
+        id: number;
+        domain: string;
+      }[];
+      cluster_type: string;
+      cluster_type_name: string;
+      shard_node_count: number;
+      machine_instance_num: number;
+      shard_num: number;
+    };
+    target_num: number;
+  }
+
+  const createRowData = (values = {} as Partial<IDataRow>) => ({
+    cluster: Object.assign(
+      {
+        id: 0,
+        master_domain: '',
+        related_clusters: [] as IDataRow['cluster']['related_clusters'],
+        cluster_type: '',
+        cluster_type_name: '',
+        shard_node_count: 0,
+        machine_instance_num: 0,
+        shard_num: 0,
+      },
+      values.cluster,
+    ),
+    target_num: values.target_num || 0,
+  });
+
+  const createDefaultFormData = () => ({
+    tableData: [createRowData()],
+    is_ignore_business_access: false,
+    ...createTickePayload(),
+  });
+
+  const { t } = useI18n();
+
+  useTicketDetail<Mongodb.ReduceShardNodes>(TicketTypes.MONGODB_REDUCE_SHARD_NODES, {
+    onSuccess(ticketDetail) {
+      const { details, remark } = ticketDetail;
+      const { infos, clusters, is_safe: isSafe } = details;
+      formData.tableData = infos.map((item) => {
+        const clusterItem = clusters[item.cluster_ids[0]];
+        return createRowData({
+          cluster: {
+            master_domain: clusterItem.immute_domain,
+          } as IDataRow['cluster'],
+          target_num: item.current_shard_nodes_num - item.reduce_shard_nodes,
+        });
+      });
+      Object.assign(formData, {
+        is_ignore_business_access: !isSafe,
+        remark,
+      });
+    },
+  });
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    infos: {
+      cluster_ids: number[];
+      current_shard_nodes_num: number; // 当前shard节点数
+      reduce_shard_nodes: number; // 当前 - 缩容至
+      shard_num: number; // 分片数
+      machine_instance_num: number; // 单机部署实例
+    }[];
+    is_safe: boolean;
+  }>(TicketTypes.MONGODB_REDUCE_SHARD_NODES);
+
+  const formRef = useTemplateRef('form');
+  const editableTableRef = useTemplateRef('editableTable');
+
+  const rules = {
+    'cluster.master_domain': [
+      {
+        validator: (value: string) => {
+          if (value) {
+            return domainList.value.filter((domain) => domain === value).length === 1;
+          }
+          return true;
+        },
+        trigger: 'change',
+        message: t('目标集群重复'),
+      },
+    ],
+    target_num: [
+      {
+        validator: (value: number, rowData: IDataRow) => value < Number(rowData.cluster.shard_node_count),
+        trigger: 'change',
+        message: t('必须小于当前节点数'),
+      },
+      {
+        validator: (value: number) => value >= 3,
+        trigger: 'change',
+        message: t('不能少于n台', { n: 3 }),
+      },
+    ],
+  };
+
+  const formData = reactive(createDefaultFormData());
+
+  const selected = computed(() => {
+    const selectedClusters: ComponentProps<typeof ClusterColumn>['selected'] = {
+      [ClusterTypes.MONGO_REPLICA_SET]: [],
+      [ClusterTypes.MONGO_SHARED_CLUSTER]: [],
+    };
+    formData.tableData.forEach((tableRow) => {
+      const { id, cluster_type: clusterType, master_domain: masterDomain } = tableRow.cluster;
+      if (id) {
+        selectedClusters[clusterType as keyof typeof selectedClusters].push({
+          id,
+          master_domain: masterDomain,
+        });
+      }
+    });
+    return selectedClusters;
+  });
+
+  const clusterMemo = computed(() =>
+    Object.fromEntries(
+      Object.values(selected.value).flatMap((clusters) =>
+        clusters.filter((cluster) => cluster.master_domain).map((cluster) => [cluster.master_domain, true]),
+      ),
+    ),
+  );
+
+  const domainList = computed(() =>
+    formData.tableData.flatMap((tableRow) => {
+      if (tableRow.cluster.master_domain) {
+        return [
+          tableRow.cluster.master_domain,
+          ...tableRow.cluster.related_clusters.map((relatedItem) => relatedItem.domain),
+        ];
+      }
+      return [];
+    }),
+  );
+
+  const handleClusterBatchEdit = (clusterList: MongodbModel[]) => {
+    const newList: IDataRow[] = [];
+    clusterList.forEach((item) => {
+      if (!clusterMemo.value[item.master_domain]) {
+        newList.push(
+          createRowData({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              related_clusters: [],
+              cluster_type: item.cluster_type,
+              cluster_type_name: item.cluster_type_name,
+              shard_node_count: item.shard_node_count,
+              machine_instance_num: item.machine_instance_num,
+              shard_num: item.shard_num,
+            },
+          }),
+        );
+      }
+    });
+    formData.tableData = [...(formData.tableData[0].cluster.master_domain ? formData.tableData : []), ...newList];
+    window.changeConfirm = true;
+  };
+
+  const handleSubmit = async () => {
+    await formRef.value!.validate();
+    const validateResult = await editableTableRef.value!.validate();
+    if (validateResult) {
+      createTicketRun({
+        details: {
+          is_safe: !formData.is_ignore_business_access,
+          infos: formData.tableData.map((tableRow) => {
+            const cluster = tableRow.cluster as Required<IDataRow['cluster']>;
+            const targerNum = tableRow.target_num;
+            return {
+              cluster_ids:
+                cluster.cluster_type === ClusterTypes.MONGO_REPLICA_SET
+                  ? [cluster.id, ...cluster.related_clusters.map((relatedItem) => relatedItem.id)]
+                  : [cluster.id],
+              reduce_shard_nodes: cluster.shard_node_count - targerNum, // 当前 - 缩容至
+              current_shard_nodes_num: cluster.shard_node_count, // 当前shard节点数
+              shard_num: cluster.shard_num, // 分片数
+              machine_instance_num: cluster.machine_instance_num, // 单机部署实例
+            };
+          }),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, createDefaultFormData());
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .proxy-scale-down-page {
+    padding-bottom: 20px;
+
+    .page-action-box {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+
+      .safe-action {
+        margin-left: auto;
+
+        .safe-action-text {
+          padding-bottom: 2px;
+          border-bottom: 1px dashed #979ba5;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Component :is="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts b/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
index f180a02825..4e9c2c872d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
@@ -30,14 +30,15 @@ export const mongoToolboxChildrenRoutes: RouteRecordRaw[] = [
   //   component: () => import('@views/db-manage/mongodb/shard-scale-up/Index.vue'),
   // },
   createRouteItem(TicketTypes.MONGODB_ADD_SHARD_NODES, t('扩容Shard节点数')),
-  {
-    name: 'MongoShardScaleDown',
-    path: 'shard-scale-down/:page?',
-    meta: {
-      navName: t('缩容Shard节点数'),
-    },
-    component: () => import('@views/db-manage/mongodb/shard-scale-down/Index.vue'),
-  },
+  // {
+  //   name: 'MongoShardScaleDown',
+  //   path: 'shard-scale-down/:page?',
+  //   meta: {
+  //     navName: t('缩容Shard节点数'),
+  //   },
+  //   component: () => import('@views/db-manage/mongodb/shard-scale-down/Index.vue'),
+  // },
+  createRouteItem(TicketTypes.MONGODB_REDUCE_SHARD_NODES, t('缩容Shard节点数')),
   // {
   //   name: 'MongoCapacityChange',
   //   path: 'capacity-change/:page?',
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
index 01d298e8cc..e67fc55961 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
@@ -45,7 +45,7 @@ export default [
       },
       {
         name: t('缩容Shard节点数'),
-        id: 'MongoShardScaleDown',
+        id: TicketTypes.MONGODB_REDUCE_SHARD_NODES,
         parentId: 'mongo_manage',
       },
       {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue b/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
index eb5b536743..1edd0ddb76 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
@@ -158,6 +158,7 @@
     [TicketTypes.MONGODB_REDUCE_MONGOS]: TicketTypes.MONGODB_REDUCE_MONGOS, // mongodb 缩容接入层
     [TicketTypes.MONGODB_SCALE_UPDOWN]: TicketTypes.MONGODB_SCALE_UPDOWN, // mongodb 集群容量变更
     [TicketTypes.MONGODB_ADD_SHARD_NODES]: TicketTypes.MONGODB_ADD_SHARD_NODES, // 扩容 Shard 节点数
+    [TicketTypes.MONGODB_REDUCE_SHARD_NODES]: TicketTypes.MONGODB_REDUCE_SHARD_NODES, // 缩容 Shard 节点数
   };
 
   const isSupported = computed(() => !!ticketTypeRouteNameMap[props.data.ticket_type]);