feat(frontend): redis安装module TencentBlueKing#8020

# Reviewed, transaction id: 24075

dbm-ui/frontend/src/common/const/ticketTypes.ts

@@ -81,6 +81,7 @@ export enum TicketTypes {
   REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
   REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  REDIS_CLUSTER_LOAD_MODULES = 'REDIS_CLUSTER_LOAD_MODULES', // redis 安装Module
 }
 export enum TicketTypes {
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',

dbm-ui/frontend/src/components/render-table/columns/select/index.vue

@@ -46,6 +46,7 @@
       <BkOption
         v-for="(item, index) in list"
         :key="index"
+        :disabled="item.disabled"
         :label="item.label"
         :value="item.value"
         @click="handleOptionClick(item.value)">
@@ -64,6 +65,7 @@
   export interface IListItem {
     value: IKey;
     label: string;
+    disabled?: boolean;
     [x: string]: any;
   }
 </script>

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts

@@ -39,6 +39,7 @@ import {
   generateRedisDataCopyCheckRepairCloneData,
   generateRedisDataCopyCloneData,
   generateRedisDataStructureCloneData,
+  generateRedisInstallModule,
   generateRedisMasterSlaveSwitchCloneData,
   generateRedisOperationCloneData,
   generateRedisProxyScaleDownCloneData,
@@ -91,6 +92,7 @@ export const generateCloneDataHandlerMap = {
   [TicketTypes.REDIS_KEYS_DELETE]: generateRedisOperationCloneData, // Redis 删除Key
   [TicketTypes.REDIS_BACKUP]: generateRedisOperationCloneData, // Redis 集群备份
   [TicketTypes.REDIS_PURGE]: generateRedisOperationCloneData,
+  [TicketTypes.REDIS_CLUSTER_LOAD_MODULES]: generateRedisInstallModule, // Redis 安装Module
   [TicketTypes.MYSQL_AUTHORIZE_RULES]: generateMysqlAuthorizeRuleCloneData, // Mysql 集群授权
   [TicketTypes.MYSQL_IMPORT_SQLFILE]: generateMysqlImportSqlFileCloneData, // Mysql SQL变更执行
   [TicketTypes.MYSQL_CHECKSUM]: generateMysqlChecksumCloneData, // Mysql 数据校验

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts

@@ -6,6 +6,7 @@ export * from './clusterTypeUpdate';
 export * from './dataCopy';
 export * from './dataCopyCheckRepair';
 export * from './dataStructure';
+export * from './installModule';
 export * from './masterSlaveSwitch';
 export * from './operation';
 export * from './proxyScaleDown';

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/installModule.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 at https://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.
+ */
+import type { RedisInstallModuleDetails } from '@services/model/ticket/details/redis';
+import TicketModel from '@services/model/ticket/ticket';
+
+import { random } from '@utils';
+
+// Redis 整机替换
+export function generateRedisInstallModule(ticketData: TicketModel<RedisInstallModuleDetails>) {
+  const { clusters, infos } = ticketData.details;
+  return Promise.resolve({
+    tableDataList: infos.map((info) => {
+      const cluster = clusters[info.cluster_id];
+      return {
+        rowKey: random(),
+        isLoading: false,
+        srcCluster: cluster.immute_domain,
+        clusterId: info.cluster_id,
+        bkCloudId: cluster.bk_cloud_id,
+        clusterType: cluster.cluster_type,
+        clusterTypeName: cluster.cluster_type_name,
+        dbVersion: info.db_version,
+        loadModules: info.load_modules,
+      };
+    }),
+    remark: ticketData.remark,
+  });
+}

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3659,5 +3659,10 @@
   "模糊搜索": "模糊搜索",
   "精确搜索": "精确搜索",
   "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
+  "为集群安装扩展 Module，仅 RedisCluster、Redis 主从 支持安装 Module。": "为集群安装扩展 Module，仅 RedisCluster、Redis 主从 支持安装 Module。",
+  "安装 Module": "安装 Module",
+  "已安装": "已安装",
+  "请选择Module": "请选择Module",
+  "仅允许同一管控区域的集群一起安装module": "仅允许同一管控区域的集群一起安装module",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/model/function-controller/functionController.ts

@@ -145,6 +145,7 @@ interface ControllerData {
   'redis.instanceManage': ControllerItem<string>;
   'redis.haClusterManage': ControllerItem<string>;
   'redis.haInstanceManage': ControllerItem<string>;
+  'redis.toolbox.installModule': ControllerItem<string>;
   'redis.toolbox.capacityChange': ControllerItem<string>;
   'redis.toolbox.proxyScaleUp': ControllerItem<string>;
   'redis.toolbox.proxyScaleDown': ControllerItem<string>;
@@ -286,6 +287,7 @@ export default class FunctionController {
   'redis.instanceManage': ControllerItem<string>;
   'redis.haClusterManage': ControllerItem<string>;
   'redis.haInstanceManage': ControllerItem<string>;
+  'redis.toolbox.installModule': ControllerItem<string>;
   'redis.toolbox.capacityChange': ControllerItem<string>;
   'redis.toolbox.proxyScaleUp': ControllerItem<string>;
   'redis.toolbox.proxyScaleDown': ControllerItem<string>;

dbm-ui/frontend/src/services/model/redis/redis.ts

@@ -72,6 +72,7 @@ export default class Redis {
   machine_pair_cnt: number;
   major_version: string;
   master_domain: string;
+  module_names: string[];
   operations: ClusterListOperation[];
   permission: {
     access_entry_edit: boolean;
@@ -126,6 +127,7 @@ export default class Redis {
     this.machine_pair_cnt = payload.machine_pair_cnt;
     this.major_version = payload.major_version;
     this.master_domain = payload.master_domain;
+    this.module_names = payload.module_names || [];
     this.operations = payload.operations || [];
     this.permission = payload.permission || {};
     this.phase = payload.phase;

dbm-ui/frontend/src/services/model/ticket/details/redis.ts

@@ -415,3 +415,14 @@ export interface RedisVersionUpgrade extends DetailBase {
     target_version: string;
   }[];
 }
+
+// redis 安装Module
+export interface RedisInstallModuleDetails extends DetailBase {
+  bk_cloud_id: number;
+  clusters: DetailClusters;
+  infos: {
+    cluster_id: number;
+    db_version: string;
+    load_modules: string[];
+  }[];
+}

dbm-ui/frontend/src/services/source/redisToolbox.ts

@@ -124,3 +124,12 @@ export function getRedisClusterCapacityUpdateInfo(params: {
     err_msg: string;
   }>(`${getRootPath()}/get_cluster_capacity_update_info/`, params);
 }
+
+/**
+ * 查询集群模块信息
+ */
+export function getRedisClusterModuleInfo(params: { cluster_id: number; version: string }) {
+  return http.get<{
+    results: Record<string, boolean>;
+  }>(`${getRootPath()}/get_cluster_module_info/`, params);
+}

dbm-ui/frontend/src/views/db-manage/redis/install-module/Index.vue

@@ -0,0 +1,49 @@
+<!--
+ * 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>
+  <Component :is="component" />
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import Page1 from './pages/page1/Index.vue';
+  import Page2 from './pages/page2/Index.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Page1,
+    success: Page2,
+  };
+
+  const page = ref('');
+
+  const component = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Page1;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>