diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json index 4384240851..eec9271678 100644 --- a/dbm-ui/frontend/src/locales/zh-cn.json +++ b/dbm-ui/frontend/src/locales/zh-cn.json @@ -3079,10 +3079,10 @@ "构造后 DB 名": "构造后 DB 名", "手动修改回档的 DB 名": "手动修改回档的 DB 名", "n项待修改": "{0} 项待修改", - "禁用的集群不支持提取 Key": "禁用的集群不支持提取 Key", - "禁用的集群不支持删除 Key": "禁用的集群不支持删除 Key", - "禁用的集群不支持备份": "禁用的集群不支持备份", - "禁用的集群不支持清档": "禁用的集群不支持清档", + "仅已启用集群可以提取 Key": "仅已启用集群可以提取 Key", + "仅已启用集群可以删除 Key": "仅已启用集群可以删除 Key", + "仅已启用集群可以备份": "仅已启用集群可以备份", + "仅已启用集群可以清档": "仅已启用集群可以清档", "请先添加链接的集群": "请先添加链接的集群", "立即添加": "立即添加", "MySQL主从-从域名": "MySQL主从-从域名", @@ -3608,5 +3608,13 @@ "批量录入:按行录入,快速批量输入多个单元格的值": "批量录入:按行录入,快速批量输入多个单元格的值", "MySQL 单节点": "MySQL 单节点", "MySQL 主从": "MySQL 主从", + "确定启用集群": "确定启用集群", + "确定禁用集群": "确定禁用集群", + "确定删除集群": "确定删除集群", + "仅可删除状态为“已禁用”的集群": "仅可删除状态为“已禁用”的集群", + "仅可启用状态为“已禁用”的集群": "仅可启用状态为“已禁用”的集群", + "仅可禁用状态为“已启用”的集群": "仅可禁用状态为“已启用”的集群", + "确定启用集群?": "确定启用集群?", + "确定禁用集群?": "确定禁用集群?", "这行勿动!新增翻译请在上一行添加!": "" } 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 new file mode 100644 index 0000000000..5c43897abf --- /dev/null +++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue @@ -0,0 +1,100 @@ + + + + + + + + + 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 index d2a83fb51d..73bc28020c 100644 --- 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 @@ -257,7 +257,7 @@ }; const handleDisableCluster = () => { - disableCluster(data.value!); + disableCluster([data.value!]); }; 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 index 8645333b99..542194a355 100644 --- 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('申请实例') }} + 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('禁用') } , @@ -605,7 +636,7 @@ theme="primary" class="ml-16" disabled={data.isStarting} - onclick={() => handleEnableCluster(data)}> + onclick={() => handleEnableCluster([data])}> { t('启用') } , @@ -617,7 +648,7 @@ theme="primary" class="ml-16" disabled={Boolean(data.operationTicketId)} - onclick={() => handleDeleteCluster(data)}> + onclick={() => handleDeleteCluster([data])}> { t('删除') } @@ -778,15 +809,15 @@ window.open(route.href); }; - const handleEnableCluster = (row: MongodbModel) => { + const handleEnableCluster = (data: MongodbModel[]) => { InfoBox({ type: 'warning', - title: t('确定启用该集群'), + title: t('确定启用集群'), content: () => (

{ t('集群') }: - { row.cluster_name } + { data.map(dataItem => dataItem.cluster_name).join(',') }

), @@ -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 index 4f64337d37..d19f539d5a 100644 --- 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: () => ( <>

- {t('集群')}:{data.cluster_name} + {t('集群')}: + {data.map((dataItem) => dataItem.cluster_name).join(',')}

{t('被禁用后将无法访问,如需恢复访问,可以再次「启用」')}

@@ -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 index 7c86e5e115..ba3e8baff4 100644 --- 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!]); }; diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue index 6f190cf826..6089c46734 100644 --- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue @@ -20,6 +20,11 @@ @click="handleApply"> {{ t('申请实例') }}
+ 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.sharedClusterList.disable', + click: () => handleDisableCluster(selected.value), + disabled: selected.value.some((data) => data.isOffline || data.operationDisabled), + tooltips: t('仅可禁用状态为“已启用”的集群'), + text: t('禁用') + }, + { + dbConsole: 'mongodb.sharedClusterList.enable', + click: () => handleEnableCluster(selected.value), + disabled: selected.value.some((data) => data.isOnline || data.isStarting), + tooltips: t('仅可启用状态为“已禁用”的集群'), + text: t('启用') + }, + { + dbConsole: 'mongodb.sharedClusterList.delete', + click: () => handleDeleteCluster(selected.value), + disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)), + tooltips: t('仅可删除状态为“已禁用”的集群'), + text: t('删除') + } + ]); + const columns = computed(() => [ { label: 'ID', @@ -622,7 +653,7 @@ theme="primary" class="ml-16" disabled={data.operationDisabled} - onclick={() => handleDisableCluster(data)}> + onclick={() => handleDisableCluster([data])}> { t('禁用') } , @@ -634,7 +665,7 @@ theme="primary" class="ml-16" disabled={data.isStarting} - onclick={() => handleEnableCluster(data)}> + onclick={() => handleEnableCluster([data])}> { t('启用') } , @@ -644,7 +675,7 @@ theme="primary" class="ml-16" disabled={Boolean(data.operationTicketId)} - onclick={() => handleDeleteCluster(data)}> + onclick={() => handleDeleteCluster([data])}> { t('删除') } , @@ -792,15 +823,15 @@ capacityChangeShow.value = true; }; - const handleEnableCluster = (row: MongodbModel) => { + const handleEnableCluster = (data: MongodbModel[]) => { InfoBox({ type: 'warning', - title: t('确定启用该集群'), + title: t('确定启用集群'), content: () => (

{ t('集群') }: - { row.cluster_name } + { data.map(dataItem => dataItem.cluster_name).join(',') }

), @@ -810,7 +841,7 @@ bk_biz_id: currentBizId, ticket_type: TicketTypes.MONGODB_ENABLE, details: { - cluster_ids: [row.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }) .then((res) => { @@ -820,15 +851,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', @@ -845,7 +876,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/shared-cluster-list/hooks/useDisableCluster.tsx b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx index b1b40fd35a..823918ce88 100644 --- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx +++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-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('确定禁用该集群'), content: () => ( <>

- {t('集群')}:{data.cluster_name} + {t('集群')}: + {data.map((dataItem) => dataItem.cluster_name).join(',')}

{t('被禁用后将无法访问,如需恢复访问,可以再次「启用」')}

@@ -46,7 +47,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), }, }; await createTicket(params).then((res) => { diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue index 55195df2f1..ff982727d3 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue @@ -21,6 +21,11 @@ @click="handleApply"> {{ t('申请实例') }} + handleSwitchCluster(TicketTypes.MYSQL_HA_DISABLE, data)}> + onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_DISABLE, [data])}> { t('禁用') } @@ -845,7 +875,7 @@ action-id="mysql_enable_disable" permission={data.permission.mysql_enable_disable} resource={data.id} - onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_ENABLE, data)}> + onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_ENABLE, [data])}> { t('启用') } @@ -859,7 +889,7 @@ action-id="mysql_destroy" permission={data.permission.mysql_destroy} resource={data.id} - onClick={() => handleDeleteCluster(data)}> + onClick={() => handleDeleteCluster([data])}> { t('删除') } @@ -1030,11 +1060,12 @@ /** * 集群启停 */ - const handleSwitchCluster = (type: TicketTypesStrings, data: TendbhaModel) => { + const handleSwitchCluster = (type: TicketTypesStrings, data: TendbhaModel[]) => { if (!type) return; const isOpen = type === TicketTypes.MYSQL_HA_ENABLE; - const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群'); + const title = isOpen ? t('确定启用集群') : t('确定禁用集群'); + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title, @@ -1042,8 +1073,8 @@
{ isOpen - ?

{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}

- :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}

+ ?

{t('集群【name】启用后将恢复访问', { name })}

+ :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}

}
), @@ -1052,7 +1083,7 @@ bk_biz_id: globalBizsStore.currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }; await createTicket(params).then((res) => { @@ -1066,8 +1097,8 @@ /** * 删除集群 */ - const handleDeleteCluster = (data: TendbhaModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: TendbhaModel[]) => { + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title: t('确定删除该集群'), @@ -1086,7 +1117,7 @@ bk_biz_id: globalBizsStore.currentBizId, ticket_type: TicketTypes.MYSQL_HA_DESTROY, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id) }, }; await createTicket(params).then((res) => { diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue index 727c3e1987..48e54b3f92 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue @@ -21,6 +21,11 @@ @click="handleApply"> {{ t('申请实例') }} + { isOpen - ?

{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}

- :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}

+ ?

{t('集群【name】启用后将恢复访问', { name: clusterName })}

+ :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: clusterName })}

} ), @@ -845,7 +875,7 @@ bk_biz_id: globalBizsStore.currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }; await createTicket(params).then((res) => { @@ -859,18 +889,18 @@ /** * 删除集群 */ - const handleDeleteCluster = (data: TendbsingleModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: TendbsingleModel[]) => { + const clusterName = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', - title: t('确定删除该集群'), + title: t('确定删除集群'), confirmText: t('删除'), confirmButtonTheme: 'danger', content: () => (
-

{t('集群【name】被删除后_将进行以下操作', { name })}

-

{t('1_删除xx集群', { name })}

-

{t('2_删除xx实例数据_停止相关进程', { name })}

+

{t('集群【name】被删除后_将进行以下操作', { name: clusterName })}

+

{t('1_删除xx集群', { name: clusterName })}

+

{t('2_删除xx实例数据_停止相关进程', { name: clusterName })}

3. {t('回收主机')}

), @@ -879,7 +909,7 @@ bk_biz_id: globalBizsStore.currentBizId, ticket_type: TicketTypes.MYSQL_SINGLE_DESTROY, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }; await createTicket(params).then((res) => { diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue index f5abb8a6af..40438c4c35 100644 --- a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue @@ -22,49 +22,11 @@ @click="handleApply"> {{ t('申请实例') }} - - - {{ t('批量操作') }} - - - - + :list="clusterBatchOperationList" /> @@ -165,6 +127,7 @@ import MoreActionExtend from '@components/more-action-extend/Index.vue'; import TextOverflowLayout from '@components/text-overflow-layout/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 EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue'; import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue'; @@ -270,7 +233,6 @@ } }); - const isShowDropdown = ref(false); const selected = shallowRef([]) /** 查看密码 */ @@ -308,6 +270,58 @@ data: [] as RedisModel[], }); + const clusterBatchOperationList = computed(() => [ + { + dbConsole: 'redis.haClusterManage.extractKey', + click: () => handleShowExtract(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以提取 Key'), + text: t('提取Key') + }, + { + dbConsole: 'redis.haClusterManage.deleteKey', + click: () => handlShowDeleteKeys(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以删除 Key'), + text: t('删除Key') + }, + { + dbConsole: 'redis.haClusterManage.backup', + click: () => handleShowBackup(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以备份'), + text: t('备份') + }, + { + dbConsole: 'redis.haClusterManage.dbClear', + click: () => handleShowPurge(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以清档'), + text: t('清档') + }, + { + dbConsole: 'redis.haClusterManage.disable', + click: () => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE,selected.value), + disabled: selected.value.some((data) => data.isOffline || data.operationDisabled), + tooltips: t('仅可禁用状态为“已启用”的集群'), + text: t('禁用') + }, + { + dbConsole: 'redis.haClusterManage.enable', + click: () => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, selected.value), + disabled: selected.value.some((data) => data.isOnline || data.isStarting), + tooltips: t('仅可启用状态为“已禁用”的集群'), + text: t('启用') + }, + { + dbConsole: 'redis.haClusterManage.delete', + click: () => handleDeleteCluster(selected.value), + disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)), + tooltips: t('仅可删除状态为“已禁用”的集群'), + text: t('删除') + } + ]); + const searchSelectData = computed(() => [ { name: t('访问入口'), @@ -394,6 +408,8 @@ return 60; }); + const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data))); + const columns = computed(() => [ { label: 'ID', @@ -931,7 +947,7 @@ style="width: 100%;height: 32px;" disabled={data.operationDisabled} text - onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE, data)}> + onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE, [data])}> { t('禁用') } @@ -939,7 +955,7 @@ ) } { - !data.isOnline && ( + data.isOffline && ( handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, data)}> + onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, [data])}> { t('启用') } @@ -967,7 +983,7 @@ style="width: 100%;height: 32px;" disabled={Boolean(data.operationTicketId)} text - onClick={() => handleDeleteCluster(data)}> + onClick={() => handleDeleteCluster([data])}> { t('删除') } @@ -1211,9 +1227,10 @@ /** * 集群启停 */ - const handleSwitchRedis = (type: TicketTypesStrings, data: RedisModel) => { + const handleSwitchRedis = (type: TicketTypesStrings, data: RedisModel[]) => { const isOpen = type === TicketTypes.REDIS_INSTANCE_PROXY_OPEN; - const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群'); + const title = isOpen ? t('确定启用集群') : t('确定禁用集群'); + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title, @@ -1221,8 +1238,8 @@
{ isOpen - ?

{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}

- :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}

+ ?

{t('集群【name】启用后将恢复访问', { name })}

+ :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}

}
), @@ -1231,7 +1248,7 @@ bk_biz_id: globalBizsStore.currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }; await createTicket(params).then((res) => { @@ -1244,11 +1261,11 @@ /** * 删除集群 */ - const handleDeleteCluster = (data: RedisModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: RedisModel[]) => { + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', - title: t('确定删除该集群'), + title: t('确定删除集群'), confirmText: t('删除'), confirmButtonTheme: 'danger', content: () => ( @@ -1262,9 +1279,9 @@ onConfirm: async () => { const params = { bk_biz_id: globalBizsStore.currentBizId, - ticket_type: TicketTypes.REDIS_DESTROY, + ticket_type: TicketTypes.REDIS_INSTANCE_DESTROY, details: { - cluster_id: data.id, + cluster_ids: data.map(dataItem => dataItem.id), }, }; await createTicket(params).then((res) => { @@ -1299,18 +1316,6 @@ min-width: 320px; margin-left: auto; } - - .cluster-dropdown { - .cluster-dropdown-icon { - color: @gray-color; - transform: rotate(0); - transition: all 0.2s; - } - - .cluster-dropdown-icon-active { - transform: rotate(-90deg); - } - } } .table-wrapper-out { diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue index d06edc4189..c3d9e44018 100644 --- a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue @@ -23,87 +23,11 @@ @click="handleApply"> {{ t('申请实例') }} - - - {{ t('批量操作') }} - - - - + :list="clusterBatchOperationList" /> >(); - const isShowDropdown = ref(false); const selected = ref([]); - /** 查看密码 */ - const passwordState = reactive({ - isShow: false, - fetchParams: { - cluster_id: -1, - bk_biz_id: globalBizsStore.currentBizId, - db_type: DBTypes.REDIS, - type: DBTypes.REDIS, - }, - }); - - /** 提取 key 功能 */ - const extractState = reactive({ - isShow: false, - data: [] as RedisModel[], - }); - - /** 删除 key 功能 */ - const deleteKeyState = reactive({ - isShow: false, - data: [] as RedisModel[], - }); - - /** 备份功能 */ - const backupState = reactive({ - isShow: false, - data: [] as RedisModel[], - }); - - /** 清档功能 */ - const purgeState = reactive({ - isShow: false, - data: [] as RedisModel[], - }); + /** 查看密码 */ + const passwordState = reactive({ + isShow: false, + fetchParams: { + cluster_id: -1, + bk_biz_id: globalBizsStore.currentBizId, + db_type: DBTypes.REDIS, + type: DBTypes.REDIS, + }, + }); + + /** 提取 key 功能 */ + const extractState = reactive({ + isShow: false, + data: [] as RedisModel[], + }); + + /** 删除 key 功能 */ + const deleteKeyState = reactive({ + isShow: false, + data: [] as RedisModel[], + }); + + /** 备份功能 */ + const backupState = reactive({ + isShow: false, + data: [] as RedisModel[], + }); + + /** 清档功能 */ + const purgeState = reactive({ + isShow: false, + data: [] as RedisModel[], + }); + + const clusterBatchOperationList = computed(() => [ + { + dbConsole: 'redis.clusterManage.extractKey', + click: () => handleShowExtract(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以提取 Key'), + text: t('提取Key') + }, + { + dbConsole: 'redis.clusterManage.deleteKey', + click: () => handlShowDeleteKeys(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以删除 Key'), + text: t('删除Key') + }, + { + dbConsole: 'redis.clusterManage.backup', + click: () => handleShowBackup(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以备份'), + text: t('备份') + }, + { + dbConsole: 'redis.clusterManage.dbClear', + click: () => handleShowPurge(selected.value), + disabled: hasDisabledRow.value, + tooltips: t('仅已启用集群可以清档'), + text: t('清档') + } + ]); - const searchSelectData = computed(() => [ - { - name: t('访问入口'), - id: 'domain', - multiple: true, - }, - { - name: t('IP 或 IP:Port'), - id: 'instance', - multiple: true, - }, - { - name: 'ID', - id: 'id', - }, - { - name: t('集群名称'), - id: 'name', - }, - { - name: t('管控区域'), - id: 'bk_cloud_id', - multiple: true, - children: searchAttrs.value.bk_cloud_id, - }, - { - name: t('状态'), - id: 'status', - multiple: true, - children: [ - { - id: 'normal', - name: t('正常'), - }, - { - id: 'abnormal', - name: t('异常'), - }, - ], - }, - { - name: t('架构版本'), - id: 'cluster_type', - multiple: true, - children: searchAttrs.value.cluster_type, - }, - { - name: t('版本'), - id: 'major_version', - multiple: true, - children: searchAttrs.value.major_version, - }, - { - name: t('地域'), - id: 'region', - multiple: true, - children: searchAttrs.value.region, - }, - { - name: t('创建人'), - id: 'creator', - }, - { - name: t('时区'), - id: 'time_zone', - multiple: true, - children: searchAttrs.value.time_zone, - }, - ]); + const searchSelectData = computed(() => [ + { + name: t('访问入口'), + id: 'domain', + multiple: true, + }, + { + name: t('IP 或 IP:Port'), + id: 'instance', + multiple: true, + }, + { + name: 'ID', + id: 'id', + }, + { + name: t('集群名称'), + id: 'name', + }, + { + name: t('管控区域'), + id: 'bk_cloud_id', + multiple: true, + children: searchAttrs.value.bk_cloud_id, + }, + { + name: t('状态'), + id: 'status', + multiple: true, + children: [ + { + id: 'normal', + name: t('正常'), + }, + { + id: 'abnormal', + name: t('异常'), + }, + ], + }, + { + name: t('架构版本'), + id: 'cluster_type', + multiple: true, + children: searchAttrs.value.cluster_type, + }, + { + name: t('版本'), + id: 'major_version', + multiple: true, + children: searchAttrs.value.major_version, + }, + { + name: t('地域'), + id: 'region', + multiple: true, + children: searchAttrs.value.region, + }, + { + name: t('创建人'), + id: 'creator', + }, + { + name: t('时区'), + id: 'time_zone', + multiple: true, + children: searchAttrs.value.time_zone, + }, + ]); - const paginationExtra = computed(() => { - if (isStretchLayoutOpen.value) { - return { small: false }; - } + const paginationExtra = computed(() => { + if (isStretchLayoutOpen.value) { + return { small: false }; + } - return { - small: true, - align: 'left', - layout: ['total', 'limit', 'list'], - }; - }); - const hasSelected = computed(() => selected.value.length > 0); - const selectedIds = computed(() => selected.value.map(item => item.id)); - const isCN = computed(() => locale.value === 'zh-cn'); - const tableOperationWidth = computed(() => { - if (!isStretchLayoutOpen.value) { - return isCN.value ? 350 : 420; - } - return 60; - }); - const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data))); + return { + small: true, + align: 'left', + layout: ['total', 'limit', 'list'], + }; + }); + const hasSelected = computed(() => selected.value.length > 0); + const selectedIds = computed(() => selected.value.map(item => item.id)); + const isCN = computed(() => locale.value === 'zh-cn'); + const tableOperationWidth = computed(() => { + if (!isStretchLayoutOpen.value) { + return isCN.value ? 350 : 420; + } + return 60; + }); + const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data))); const columns = computed(() => [ { @@ -1050,7 +1005,7 @@ ) } { - !data.isOnline && ( + data.isOffline && ( {{ t('申请实例') }}
+ handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, data)}> + onClick={() => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, [data])}> { t('禁用') } @@ -724,7 +753,7 @@ text theme="primary" disabled={data.isStarting} - onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, data) }> + onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, [data]) }> { t('启用') } @@ -744,7 +773,7 @@ theme="primary" class="ml-16" disabled={Boolean(data.operationTicketId)} - onClick={() => handleDeleteCluster(data)}> + onClick={() => handleDeleteCluster([data])}> { t('删除') } @@ -871,17 +900,15 @@ */ const handleSwitchCluster = ( type: TicketTypesStrings, - data: SqlServerHaModel, + data: SqlServerHaModel[], ) => { - if (!type) return; - const isOpen = type === TicketTypes.SQLSERVER_ENABLE; InfoBox({ type: 'warning', - title: isOpen ? t('确定启用该集群?') : t('确定禁用该集群?'), + title: isOpen ? t('确定启用集群?') : t('确定禁用集群?'), content: () => (
-

{t('集群')} :{data.cluster_name}

+

{t('集群')} :{data.map(dataItem => dataItem.cluster_name).join(',')}

{ isOpen ?

{ t('启用后将恢复访问')}

@@ -895,7 +922,7 @@ bk_biz_id: currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }); return true; @@ -906,8 +933,8 @@ /** * 删除集群 */ - const handleDeleteCluster = (data: SqlServerHaModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: SqlServerHaModel[]) => { + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title: t('确定删除该集群'), @@ -926,7 +953,7 @@ bk_biz_id: currentBizId, ticket_type: TicketTypes.SQLSERVER_DESTROY, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }); return false; diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue index d7d8b99b80..320f430362 100644 --- a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue +++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue @@ -7,6 +7,11 @@ @click="handleApply"> {{ t('申请实例') }} + handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, data) }> + onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, [data]) }> { t('禁用') } @@ -594,7 +624,7 @@ text theme="primary" disabled={data.isStarting} - onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, data) }> + onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, [data]) }> { t('启用') } @@ -614,7 +644,7 @@ theme="primary" class="ml-16" disabled={Boolean(data.operationTicketId)} - onClick={ () => handleDeleteCluster(data) }> + onClick={ () => handleDeleteCluster([data]) }> { t('删除') } @@ -692,17 +722,15 @@ */ const handleSwitchCluster = ( type: TicketTypesStrings, - data: SqlServerSingleModel, + data: SqlServerSingleModel[], ) => { - if (!type) return; - const isOpen = type === TicketTypes.SQLSERVER_ENABLE; InfoBox({ type: 'warning', - title: isOpen ? t('确定启用该集群?') : t('确定禁用该集群?'), + title: isOpen ? t('确定启用集群?') : t('确定禁用集群?'), content: () => (
-

{t('集群')} :{data.cluster_name}

+

{t('集群')} :{data.map(dataItem => dataItem.cluster_name).join(',')}

{ isOpen ?

{ t('启用后将恢复访问')}

@@ -716,7 +744,7 @@ bk_biz_id: currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }); return true; @@ -727,11 +755,11 @@ /** * 删除集群 */ - const handleDeleteCluster = (data: SqlServerSingleModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: SqlServerSingleModel[]) => { + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', - title: t('确定删除该集群'), + title: t('确定删除集群'), confirmText: t('删除'), confirmButtonTheme: 'danger', content: () => ( @@ -747,7 +775,7 @@ bk_biz_id: currentBizId, ticket_type: TicketTypes.SQLSERVER_DESTROY, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }); return false; diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue index 4bb8dd4444..19a6b20488 100644 --- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue @@ -21,6 +21,11 @@ @click="handleApply"> {{ t('申请实例') }} + - - handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_DISABLE, data)}> - { t('禁用') } - - - , - - - handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_ENABLE, data)}> - { t('启用') } - - - , - - - handleDeleteCluster(data)}> - { t('删除') } - - - - ]); + if (data.isOnline) { + operations.push( + + + handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_DISABLE, [data])}> + { t('禁用') } + + + + ) + } + if (data.isOffline) { + operations.push(...[ + + + handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_ENABLE, [data])}> + { t('启用') } + + + , + + + handleDeleteCluster([data])}> + { t('删除') } + + + + ]); + } return operations; }; @@ -1311,11 +1348,10 @@ }; // 集群启停 - const handleChangeClusterOnline = (type: TicketTypesStrings, data: TendbClusterModel) => { - if (!type) return; - + const handleChangeClusterOnline = (type: TicketTypesStrings, data: TendbClusterModel[]) => { const isOpen = type === TicketTypes.TENDBCLUSTER_ENABLE; - const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群'); + const title = isOpen ? t('确定启用集群') : t('确定禁用集群'); + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title, @@ -1323,8 +1359,8 @@
{ isOpen - ?

{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}

- :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}

+ ?

{t('集群【name】启用后将恢复访问', { name })}

+ :

{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}

}
), @@ -1332,7 +1368,7 @@ bk_biz_id: currentBizId, ticket_type: type, details: { - cluster_ids: [data.id], + cluster_ids: data.map(dataItem => dataItem.id), }, }) .then((res) => { @@ -1343,8 +1379,8 @@ }; // 删除集群 - const handleDeleteCluster = (data: TendbClusterModel) => { - const { cluster_name: name } = data; + const handleDeleteCluster = (data: TendbClusterModel[]) => { + const name = data.map(dataItem => dataItem.cluster_name).join(',') InfoBox({ type: 'warning', title: t('确定删除该集群'), @@ -1362,7 +1398,7 @@ bk_biz_id: currentBizId, ticket_type: TicketTypes.TENDBCLUSTER_DESTROY, details: { - cluster_ids: [data.id], + cluster_ids:data.map(dataItem => dataItem.id), }, }) .then((res) => {