feat(frontend): 集群列表支持批量禁用/启用、删除集群 TencentBlueKing#7753

3octaves · Nov 7, 2024 · c64430b · c64430b
1 parent 74181c6
commit c64430b
Show file tree

Hide file tree

Showing 15 changed files with 707 additions and 437 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3129,10 +3129,10 @@
   "构造后 DB 名": "构造后 DB 名",
   "手动修改回档的 DB 名": "手动修改回档的 DB 名",
   "n项待修改": "{0} 项待修改",
-  "禁用的集群不支持提取 Key": "禁用的集群不支持提取 Key",
-  "禁用的集群不支持删除 Key": "禁用的集群不支持删除 Key",
-  "禁用的集群不支持备份": "禁用的集群不支持备份",
-  "禁用的集群不支持清档": "禁用的集群不支持清档",
+  "仅已启用集群可以提取 Key": "仅已启用集群可以提取 Key",
+  "仅已启用集群可以删除 Key": "仅已启用集群可以删除 Key",
+  "仅已启用集群可以备份": "仅已启用集群可以备份",
+  "仅已启用集群可以清档": "仅已启用集群可以清档",
   "请先添加链接的集群": "请先添加链接的集群",
   "立即添加": "立即添加",
   "高可用-从域名": "高可用-从域名",
@@ -3631,5 +3631,13 @@
   "无只读主机": "无只读主机",
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "指定特殊字符(s)": "指定特殊字符(s)",
+  "确定启用集群": "确定启用集群",
+  "确定禁用集群": "确定禁用集群",
+  "确定删除集群": "确定删除集群",
+  "仅可删除状态为“已禁用”的集群": "仅可删除状态为“已禁用”的集群",
+  "仅可启用状态为“已禁用”的集群": "仅可启用状态为“已禁用”的集群",
+  "仅可禁用状态为“已启用”的集群": "仅可禁用状态为“已启用”的集群",
+  "确定启用集群？": "确定启用集群？",
+  "确定禁用集群？": "确定禁用集群？",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue
@@ -0,0 +1,100 @@
+<!--
+ * 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>
+  <BkDropdown
+    v-bk-tooltips="{
+      disabled: !disabled,
+      content: t('请选择操作集群'),
+    }"
+    class="cluster-batch-operation"
+    :disabled="disabled"
+    @click.stop
+    @hide="() => (isShowDropdown = false)"
+    @show="() => (isShowDropdown = true)">
+    <BkButton :disabled="disabled">
+      {{ t('批量操作') }}
+      <DbIcon
+        class="cluster-batch-operation-icon ml-4"
+        :class="[{ 'cluster-batch-operation-icon-active': isShowDropdown }]"
+        type="up-big " />
+    </BkButton>
+    <template #content>
+      <BkDropdownMenu class="cluster-batch-operation-popover">
+        <BkDropdownItem
+          v-for="item in list"
+          :key="item.dbConsole"
+          v-db-console="item.dbConsole"
+          @click="item.click">
+          <BkButton
+            v-bk-tooltips="{
+              disabled: !item.disabled,
+              content: item.tooltips,
+              placement: 'right',
+            }"
+            class="opration-button"
+            :disabled="item.disabled"
+            text>
+            {{ item.text }}
+          </BkButton>
+        </BkDropdownItem>
+      </BkDropdownMenu>
+    </template>
+  </BkDropdown>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    disabled: boolean;
+    list: {
+      dbConsole: string;
+      click: () => void;
+      disabled: boolean;
+      tooltips: string;
+      text: string;
+    }[];
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const isShowDropdown = ref(false);
+</script>
+
+<style lang="less">
+  .cluster-batch-operation-popover {
+    .bk-dropdown-item {
+      padding: 0;
+
+      .opration-button {
+        padding: 0 16px;
+      }
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  .cluster-batch-operation {
+    .cluster-batch-operation-icon {
+      transform: rotate(0);
+      transition: all 0.2s;
+    }
+
+    .cluster-batch-operation-icon-active {
+      transform: rotate(180deg);
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue
@@ -263,7 +263,7 @@
   };
 
   const handleDisableCluster = () => {
-    disableCluster(data.value!);
+    disableCluster([data.value!]);
   };
 </script>
 

diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
@@ -20,6 +20,11 @@
         @click="handleApply">
         {{ t('申请实例') }}
       </BkButton>
+      <ClusterBatchOperation
+        v-db-console="'mongodb.replicaSetList.batchOperation'"
+        class="ml-8 mb-8"
+        :disabled="!hasSelected"
+        :list="clusterBatchOperationList" />
       <BkButton
         class="ml-8 mb-8"
         :disabled="!hasSelected"
@@ -142,6 +147,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
   import DropdownExportExcel from '@views/db-manage/common/dropdown-export-excel/index.vue';
@@ -289,6 +295,31 @@
   const hasData = computed(() => tableDataList.value.length > 0);
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
+
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'mongodb.replicaSetList.disable',
+      click: () => handleDisableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'mongodb.replicaSetList.enable',
+      click: () => handleEnableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'mongodb.replicaSetList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -593,7 +624,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.operationDisabled}
-              onclick={() => handleDisableCluster(data)}>
+              onclick={() => handleDisableCluster([data])}>
               { t('禁用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -605,7 +636,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.isStarting}
-              onclick={() => handleEnableCluster(data)}>
+              onclick={() => handleEnableCluster([data])}>
               { t('启用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -617,7 +648,7 @@
               theme="primary"
               class="ml-16"
               disabled={Boolean(data.operationTicketId)}
-              onclick={() => handleDeleteCluster(data)}>
+              onclick={() => handleDeleteCluster([data])}>
               { t('删除') }
             </bk-button>
           </OperationBtnStatusTips>
@@ -778,15 +809,15 @@
     window.open(route.href);
   };
 
-  const handleEnableCluster = (row: MongodbModel) => {
+  const handleEnableCluster = (data: MongodbModel[]) => {
     InfoBox({
       type: 'warning',
-      title: t('确定启用该集群'),
+      title: t('确定启用集群'),
       content: () => (
         <p>
           { t('集群') }：
           <span class='info-box-cluster-name'>
-            { row.cluster_name }
+            { data.map(dataItem => dataItem.cluster_name).join('，') }
           </span>
         </p>
       ),
@@ -796,7 +827,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_ENABLE,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         })
           .then((res) => {
@@ -806,15 +837,15 @@
     });
   };
 
-  const handleDisableCluster = (row: MongodbModel) => {
-    disableCluster(row);
+  const handleDisableCluster = (data: MongodbModel[]) => {
+    disableCluster(data);
   };
 
-  const handleDeleteCluster = (row: MongodbModel) => {
-    const { cluster_name: name } = row;
+  const handleDeleteCluster = (data: MongodbModel[]) => {
+    const name = data.map((dataItem) => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       contentAlign: 'left',
@@ -831,7 +862,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_DESTROY,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map((dataItem) => dataItem.id),
           },
         })
           .then((res) => {

diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx
@@ -27,14 +27,15 @@ export const useDisableCluster = () => {
   const { currentBizId } = useGlobalBizs();
   const ticketMessage = useTicketMessage();
 
-  const diabledCluster = (data: { cluster_name: string; id: number }) => {
+  const diabledCluster = (data: { cluster_name: string; id: number }[]) => {
     InfoBox({
       type: 'warning',
-      title: t('确定禁用该集群'),
+      title: t('确定禁用集群'),
       content: () => (
         <>
           <p>
-            {t('集群')}：<span class='info-box-cluster-name'>{data.cluster_name}</span>
+            {t('集群')}：
+            <span class='info-box-cluster-name'>{data.map((dataItem) => dataItem.cluster_name).join('，')}</span>
           </p>
           <p>{t('被禁用后将无法访问，如需恢复访问，可以再次「启用」')}</p>
         </>
@@ -45,7 +46,7 @@ export const useDisableCluster = () => {
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_DISABLE,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map((dataItem) => dataItem.id),
           },
         }).then((res) => {
           ticketMessage(res.id);

diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue
@@ -258,7 +258,7 @@
   };
 
   const handleDisableCluster = () => {
-    disableCluster(data.value!);
+    disableCluster([data.value!]);
   };
 </script>