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

3octaves · Nov 11, 2024 · 74f7c0c · 74f7c0c
1 parent d6ca532
commit 74f7c0c
Show file tree

Hide file tree

Showing 14 changed files with 336 additions and 420 deletions.
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"

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
@@ -314,8 +314,7 @@
     {
       label: t('访问入口'),
       field: 'domain',
-      width: 300,
-      minWidth: 300,
+      minWidth: 320,
       fixed: 'left',
       renderHead: () => (
         <RenderHeadCopy
@@ -354,6 +353,22 @@
             ),
             append: () => (
               <>
+                {
+                  data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
+                }
+                {
+                  !data.isOnline && !data.isStarting && (
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                  )
+                }
+                {
+                  isRecentDays(data.create_at, 24 * 3)
+                  && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
+                }
                 {data.domain && (
                   <RenderCellCopy copyItems={
                     [
@@ -411,22 +426,6 @@
             </span >
             <div style='color: #C4C6CC;'>{data.cluster_alias || '--'}</div>
           </div>
-          {
-            data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
-          }
-          {
-            !data.isOnline && !data.isStarting && (
-              <bk-tag
-                class="ml-4"
-                size="small">
-                {t('已禁用')}
-              </bk-tag>
-            )
-          }
-          {
-            isRecentDays(data.create_at, 24 * 3)
-            && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
-          }
           <db-icon
             v-bk-tooltips={t('复制集群名称')}
             type="copy"

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
@@ -327,8 +327,7 @@
     {
       label: t('访问入口'),
       field: 'domain',
-      width: 280,
-      minWidth: 280,
+      minWidth: 320,
       fixed: 'left',
       renderHead: () => (
         <RenderHeadCopy
@@ -367,6 +366,22 @@
               ),
               append: () => (
                 <>
+                  {
+                    data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
+                  }
+                  {
+                    data.isOffline && (
+                      <bk-tag
+                        class="ml-4"
+                        size="small">
+                        {t('已禁用')}
+                      </bk-tag>
+                    )
+                  }
+                  {
+                    isRecentDays(data.create_at, 24 * 3)
+                    && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
+                  }
                   {data.domain && (
                     <RenderCellCopy copyItems={
                       [
@@ -427,22 +442,6 @@
               {data.cluster_alias || '--'}
             </div>
           </div>
-          {
-            data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
-          }
-          {
-            data.isOffline && (
-              <bk-tag
-                class="ml-4"
-                size="small">
-                {t('已禁用')}
-              </bk-tag>
-            )
-          }
-          {
-            isRecentDays(data.create_at, 24 * 3)
-            && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
-          }
             <db-icon
               class="mt-2"
               v-bk-tooltips={t('复制集群名称')}

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
@@ -311,8 +311,7 @@
     {
       label: t('访问入口'),
       field: 'domain',
-      width: 280,
-      minWidth: 280,
+      minWidth: 320,
       fixed: 'left',
       renderHead: () => (
         <RenderHeadCopy
@@ -351,6 +350,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={
                     [
@@ -413,28 +434,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"

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
@@ -25,12 +25,6 @@
         class="ml-8 mb-8"
         :disabled="!hasSelected"
         :list="clusterBatchOperationList" />
-      <BkButton
-        class="ml-8 mb-8"
-        :disabled="!hasSelected"
-        @click="handleShowClusterAuthorize">
-        {{ t('批量授权') }}
-      </BkButton>
       <span
         v-bk-tooltips="{
           disabled: hasData,
@@ -297,6 +291,13 @@
   const selectedIds = computed(() => selected.value.map(item => item.id));
 
   const clusterBatchOperationList = computed(() => [
+  {
+      dbConsole: 'mongodb.replicaSetList.batchAuthorize',
+      click: () => handleShowClusterAuthorize(),
+      disabled: false,
+      tooltips: '',
+      text: t('批量授权')
+    },
     {
       dbConsole: 'mongodb.replicaSetList.disable',
       click: () => handleDisableCluster(selected.value),
@@ -330,22 +331,12 @@
     {
       label: t('集群名称'),
       field: 'cluster_name',
-      width: 280,
-      minWidth: 280,
+      minWidth: 320,
       fixed: 'left',
       showOverflowTooltip: false,
       render: ({ data }: { data: MongodbModel }) => {
         const content = (
           <>
-            {
-              data.isNew && (
-                <MiniTag
-                  content='NEW'
-                  class="new-tag"
-                  theme='success'>
-                </MiniTag>
-              )
-            }
             {
               data.isStructCluster && (
                 <bk-popover
@@ -383,22 +374,6 @@
                 </bk-popover>
               )
             }
-            {
-              data.operationTagTips.map(item => (
-                <RenderOperationTag
-                  class="cluster-tag ml-4"
-                  data={item}/>
-              ))
-            }
-            {
-              data.isOffline && (
-                <bk-tag
-                  class="ml-4"
-                  size="small">
-                  {t('已禁用')}
-                </bk-tag>
-              )
-            }
           </>
         );
 
@@ -448,6 +423,31 @@
             ),
             append: () => (
               <>
+                {
+                  data.isNew && (
+                    <MiniTag
+                      content='NEW'
+                      class="new-tag"
+                      theme='success'>
+                    </MiniTag>
+                  )
+                }
+                {
+                  data.operationTagTips.map(item => (
+                    <RenderOperationTag
+                      class="cluster-tag ml-4"
+                      data={item}/>
+                  ))
+                }
+                {
+                  data.isOffline && (
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                  )
+                }
                 <RenderCellCopy copyItems={
                   [
                     {