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

3octaves · Nov 12, 2024 · 0d5f8ee · 0d5f8ee
1 parent c7f40b3
commit 0d5f8ee
Show file tree

Hide file tree

Showing 29 changed files with 1,700 additions and 1,235 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3607,5 +3607,17 @@
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "高可用": "高可用",
   "关联实例": "关联实例",
+  "确定启用集群": "确定启用集群",
+  "确定禁用集群": "确定禁用集群",
+  "确定删除集群": "确定删除集群",
+  "仅可删除状态为“已禁用”的集群": "仅可删除状态为“已禁用”的集群",
+  "仅可启用状态为“已禁用”的集群": "仅可启用状态为“已禁用”的集群",
+  "仅可禁用状态为“已启用”的集群": "仅可禁用状态为“已启用”的集群",
+  "确定启用集群？": "确定启用集群？",
+  "确定禁用集群？": "确定禁用集群？",
+  "仅已启用集群可以提取 Key": "仅已启用集群可以提取 Key",
+  "仅已启用集群可以删除 Key": "仅已启用集群可以删除 Key",
+  "仅已启用集群可以备份": "仅已启用集群可以备份",
+  "仅已启用集群可以清档": "仅已启用集群可以清档",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/es/es.ts b/dbm-ui/frontend/src/services/model/es/es.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -233,6 +233,10 @@ export default class Es {
     }));
   }
 
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
+
   initOperations(payload = [] as Es['operations']) {
     if (!Array.isArray(payload)) {
       return [];

diff --git a/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts b/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -238,4 +238,8 @@ export default class Hdfs {
   get isStarting() {
     return Boolean(this.operations.find((item) => item.ticket_type === Hdfs.HDFS_ENABLE));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -232,4 +232,8 @@ export default class Tendbha {
       ticketId: item.ticket_id,
     }));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts b/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -210,4 +210,8 @@ export default class Tendbsingle {
       ticketId: item.ticket_id,
     }));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
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
@@ -300,8 +300,7 @@
     {
       label: t('访问入口'),
       field: 'domain',
-      width: 300,
-      minWidth: 300,
+      minWidth: 320,
       fixed: 'left',
       renderHead: () => (
         <RenderHeadCopy
@@ -340,6 +339,28 @@
             ),
             append: () => (
               <>
+                {
+                  data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
+                }
+                {
+                  data.isOffline && !data.isStarting && (
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                  )
+                }
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
                 {
                   data.domain && (
                     <RenderCellCopy copyItems={
@@ -405,28 +426,6 @@
             ),
             append: () => (
               <>
-                {
-                  data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
-                }
-                {
-                  data.isOffline && !data.isStarting && (
-                    <bk-tag
-                      class="ml-4"
-                      size="small">
-                      {t('已禁用')}
-                    </bk-tag>
-                  )
-                }
-                {
-                  data.isNew && (
-                    <bk-tag
-                      theme="success"
-                      size="small"
-                      class="ml-4">
-                      NEW
-                    </bk-tag>
-                  )
-                }
                 <db-icon
                   v-bk-tooltips={t('复制集群名称')}
                   type="copy"
@@ -733,34 +732,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>,
         ];
       },
     },