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

TencentBlueKing · Nov 12, 2024 · a2fdc0e · a2fdc0e
1 parent 6b9514f
commit a2fdc0e
Show file tree

Hide file tree

Showing 22 changed files with 432 additions and 440 deletions.
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';
 
@@ -228,4 +228,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/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,28 @@
             ),
             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>
+                  )
+                }
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
                 {data.domain && (
                   <RenderCellCopy copyItems={
                     [
@@ -411,22 +432,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,28 @@
               ),
               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>
+                    )
+                  }
+                  {
+                    data.isNew && (
+                      <bk-tag
+                        theme="success"
+                        size="small"
+                        class="ml-4">
+                        NEW
+                      </bk-tag>
+                    )
+                  }
                   {data.domain && (
                     <RenderCellCopy copyItems={
                       [
@@ -427,22 +448,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/influxdb/instance-list/components/render-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
@@ -346,7 +346,12 @@
                   }
                   {
                     data.isNew && (
-                      <span class="glob-new-tag cluster-tag" data-text="NEW" />
+                      <bk-tag
+                        theme="success"
+                        size="small"
+                        class="ml-4">
+                        NEW
+                      </bk-tag>
                     )
                   }
                   <db-icon

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"