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

TencentBlueKing · Nov 11, 2024 · 5a3833e · 5a3833e
1 parent f08be7f
commit 5a3833e
Show file tree

Hide file tree

Showing 21 changed files with 1,272 additions and 803 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3094,10 +3094,10 @@
   "构造后 DB 名": "构造后 DB 名",
   "手动修改回档的 DB 名": "手动修改回档的 DB 名",
   "n项待修改": "{0} 项待修改",
-  "禁用的集群不支持提取 Key": "禁用的集群不支持提取 Key",
-  "禁用的集群不支持删除 Key": "禁用的集群不支持删除 Key",
-  "禁用的集群不支持备份": "禁用的集群不支持备份",
-  "禁用的集群不支持清档": "禁用的集群不支持清档",
+  "仅已启用集群可以提取 Key": "仅已启用集群可以提取 Key",
+  "仅已启用集群可以删除 Key": "仅已启用集群可以删除 Key",
+  "仅已启用集群可以备份": "仅已启用集群可以备份",
+  "仅已启用集群可以清档": "仅已启用集群可以清档",
   "请先添加链接的集群": "请先添加链接的集群",
   "立即添加": "立即添加",
   "高可用-从域名": "高可用-从域名",
@@ -3671,5 +3671,13 @@
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "高可用": "高可用",
   "关联实例": "关联实例",
+  "确定启用集群": "确定启用集群",
+  "确定禁用集群": "确定禁用集群",
+  "确定删除集群": "确定删除集群",
+  "仅可删除状态为“已禁用”的集群": "仅可删除状态为“已禁用”的集群",
+  "仅可启用状态为“已禁用”的集群": "仅可启用状态为“已禁用”的集群",
+  "仅可禁用状态为“已启用”的集群": "仅可禁用状态为“已启用”的集群",
+  "确定启用集群？": "确定启用集群？",
+  "确定禁用集群？": "确定禁用集群？",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
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/doris/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue
@@ -733,34 +733,58 @@
                         </auth-button>
                       </OperationBtnStatusTips>
                     </bk-dropdown-item>
+                    <bk-dropdown-item>
+                      <OperationBtnStatusTips data={data}>
+                        <auth-button
+                          v-bk-tooltips={{
+                            disabled: data.isOffline,
+                            content: t('请先禁用集群')
+                          }}
+                          text
+                          theme="primary"
+                          action-id="doris_destroy"
+                          disabled={data.isOnline}
+                          permission={data.permission.doris_destroy}
+                          resource={data.id}
+                          loading={tableDataActionLoadingMap.value[data.id]}
+                          onClick={() => handleRemove(data)}>
+                          { t('删除') }
+                        </auth-button>
+                      </OperationBtnStatusTips>,
+                    </bk-dropdown-item>
                   </>
                 )
               }}
             </bk-dropdown>
           ];
         }
         return [
-          <auth-button
-            text
-            theme="primary"
-            action-id="doris_enable_disable"
-            permission={data.permission.doris_enable_disable}
-            resource={data.id}
-            class="mr-16"
-            loading={tableDataActionLoadingMap.value[data.id]}
-            onClick={() => handleEnable(data)}>
-            { t('启用') }
-          </auth-button>,
-          <auth-button
-            text
-            theme="primary"
-            action-id="doris_destroy"
-            permission={data.permission.doris_destroy}
-            resource={data.id}
-            loading={tableDataActionLoadingMap.value[data.id]}
-            onClick={() => handleRemove(data)}>
-            { t('删除') }
-          </auth-button>,
+          <OperationBtnStatusTips data={data}>
+            <auth-button
+              text
+              theme="primary"
+              action-id="doris_enable_disable"
+              permission={data.permission.doris_enable_disable}
+              resource={data.id}
+              class="mr-16"
+              loading={tableDataActionLoadingMap.value[data.id]}
+              onClick={() => handleEnable(data)}>
+              { t('启用') }
+            </auth-button>
+          </OperationBtnStatusTips>,
+          <OperationBtnStatusTips data={data}>
+            <auth-button
+              text
+              theme="primary"
+              action-id="doris_destroy"
+              permission={data.permission.doris_destroy}
+              resource={data.id}
+              disabled={Boolean(data.operationTicketId)}
+              loading={tableDataActionLoadingMap.value[data.id]}
+              onClick={() => handleRemove(data)}>
+              { t('删除') }
+            </auth-button>
+          </OperationBtnStatusTips>,
         ];
       },
     },

diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
@@ -299,7 +299,7 @@
 
   const tableOperationWidth = computed(() => {
     if (!isStretchLayoutOpen.value) {
-      return isCN.value ? 270 : 420;
+      return isCN.value ? 300 : 420;
     }
     return 100;
   });
@@ -749,6 +749,26 @@
                 { t('禁用') }
               </auth-button>
             </OperationBtnStatusTips>,
+            <OperationBtnStatusTips
+              v-db-console="es.clusterManage.delete"
+              data={data}>
+              <auth-button
+                v-bk-tooltips={{
+                  disabled: data.isOffline,
+                  content: t('请先禁用集群')
+                }}
+                text
+                theme="primary"
+                action-id="es_destroy"
+                class="mr8"
+                permission={data.permission.es_destroy}
+                disabled={data.isOnline || Boolean(data.operationTicketId)}
+                resource={data.id}
+                loading={tableDataActionLoadingMap.value[data.id]}
+                onClick={() => handleRemove(data)}>
+                { t('删除') }
+              </auth-button>
+            </OperationBtnStatusTips>,
             <a
               v-db-console="es.clusterManage.manage"
               class="mr8"

diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
@@ -312,7 +312,7 @@
 
   const tableOperationWidth = computed(() => {
     if (!isStretchLayoutOpen.value) {
-      return isCN.value ? 350 : 520;
+      return isCN.value ? 380 : 520;
     }
     return 100;
   });
@@ -700,6 +700,9 @@
           ];
           if (data.isOffline) {
             return [
+            <OperationBtnStatusTips
+              v-db-console="hdfs.clusterManage.enable"
+              data={data}>
               <auth-button
                 text
                 theme="primary"
@@ -712,20 +715,25 @@
                 loading={tableDataActionLoadingMap.value[data.id]}
                 onClick={() => handleEnable(data)}>
                 { t('启用') }
-              </auth-button>,
-              <auth-button
-                text
-                theme="primary"
-                action-id="hdfs_destroy"
-                permission={data.permission.hdfs_destroy}
+              </auth-button>
+              </OperationBtnStatusTips>,
+              <OperationBtnStatusTips
                 v-db-console="hdfs.clusterManage.delete"
-                resource={data.id}
-                disabled={Boolean(data.operationTicketId)}
-                class="mr8"
-                loading={tableDataActionLoadingMap.value[data.id]}
-                onClick={() => handleRemove(data)}>
-                { t('删除') }
-              </auth-button>,
+                data={data} >
+                <auth-button
+                  text
+                  theme="primary"
+                  action-id="hdfs_destroy"
+                  permission={data.permission.hdfs_destroy}
+                  v-db-console="hdfs.clusterManage.delete"
+                  resource={data.id}
+                  disabled={Boolean(data.operationTicketId)}
+                  class="mr8"
+                  loading={tableDataActionLoadingMap.value[data.id]}
+                  onClick={() => handleRemove(data)}>
+                  { t('删除') }
+                </auth-button>
+              </OperationBtnStatusTips>,
               ...baseAction,
             ];
           }
@@ -773,6 +781,26 @@
                 { t('禁用') }
               </auth-button>
             </OperationBtnStatusTips>,
+            <OperationBtnStatusTips
+              v-db-console="hdfs.clusterManage.delete"
+              data={data} >
+              <auth-button
+                v-bk-tooltips={{
+                  disabled: data.isOffline,
+                  content: t('请先禁用集群')
+                }}
+                text
+                theme="primary"
+                action-id="hdfs_destroy"
+                permission={data.permission.hdfs_destroy}
+                resource={data.id}
+                disabled={data.isOnline || Boolean(data.operationTicketId)}
+                class="mr8"
+                loading={tableDataActionLoadingMap.value[data.id]}
+                onClick={() => handleRemove(data)}>
+                { t('删除') }
+              </auth-button>
+            </OperationBtnStatusTips>,
             <a
               v-db-console="hdfs.clusterManage.manage"
               class="mr8"

diff --git a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
@@ -297,7 +297,7 @@
 
   const tableOperationWidth = computed(() => {
     if (!isStretchLayoutOpen.value) {
-      return isCN.value ? 270 : 420;
+      return isCN.value ? 300 : 420;
     }
     return 100;
   });
@@ -696,6 +696,26 @@
                 { t('禁用') }
               </auth-button>
             </OperationBtnStatusTips>,
+            <OperationBtnStatusTips
+              data={data}
+              v-db-console="kafka.clusterManage.delete">
+              <auth-button
+                v-bk-tooltips={{
+                  disabled: data.isOffline,
+                  content: t('请先禁用集群')
+                }}
+                text
+                theme="primary"
+                action-id="kafka_destroy"
+                permission={data.permission.kafka_destroy}
+                disabled={data.isOnline || Boolean(data.operationTicketId)}
+                resource={data.id}
+                class="mr8"
+                loading={tableDataActionLoadingMap.value[data.id]}
+                onClick={() => handleRemove(data)}>
+                { t('删除') }
+              </auth-button>
+            </OperationBtnStatusTips>,
             <a
               v-db-console="kafka.clusterManage.manage"
               class="mr8"

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>