From 27189d24603863e09ae51b3328dcebdddd1bfad4 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Mon, 18 Nov 2024 16:39:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20redis=E5=AE=89=E8=A3=85module?=
 =?UTF-8?q?=20#8020=20#=20Reviewed,=20transaction=20id:=2024080?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/common/const/ticketTypes.ts  |   1 +
 .../render-table/columns/select/index.vue     |   2 +
 .../generateCloneData/index.ts                |   2 +
 .../generateCloneData/redis/index.ts          |   1 +
 .../generateCloneData/redis/installModule.ts  |  38 +++
 dbm-ui/frontend/src/locales/zh-cn.json        |   5 +
 .../function-controller/functionController.ts |   2 +
 .../src/services/model/redis/redis.ts         |   2 +
 .../services/model/ticket/details/redis.ts    |  11 +
 .../src/services/source/redisToolbox.ts       |   9 +
 .../db-manage/redis/install-module/Index.vue  |  49 +++
 .../install-module/pages/page1/Index.vue      | 280 ++++++++++++++++++
 .../pages/page1/components/Index.vue          |  90 ++++++
 .../pages/page1/components/RenderModule.vue   | 166 +++++++++++
 .../pages/page1/components/Row.vue            | 162 ++++++++++
 .../install-module/pages/page2/Index.vue      |  87 ++++++
 .../redis/list-ha/components/list/Index.vue   |   7 +
 .../redis/list/components/list/Index.vue      |   7 +
 .../src/views/db-manage/redis/routes.ts       |  10 +
 .../src/views/db-manage/redis/toolbox-menu.ts |  12 +-
 .../components/demand-factory/Index.vue       |   2 +
 .../demand-factory/redis/InstallModule.vue    |  85 ++++++
 22 files changed, 1027 insertions(+), 3 deletions(-)
 create mode 100644 dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/installModule.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/RenderModule.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Row.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page2/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue

diff --git a/dbm-ui/frontend/src/common/const/ticketTypes.ts b/dbm-ui/frontend/src/common/const/ticketTypes.ts
index 4104cd16dd..60419da087 100644
--- a/dbm-ui/frontend/src/common/const/ticketTypes.ts
+++ b/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',
diff --git a/dbm-ui/frontend/src/components/render-table/columns/select/index.vue b/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
index aa26025734..a65d5326ee 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
+++ b/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>
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts
index f17e1bc98e..b20ebf88f9 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts
+++ b/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 数据校验
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts
index 08d2110cba..06fe5a9d17 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts
+++ b/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';
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/installModule.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/installModule.ts
new file mode 100644
index 0000000000..ac029404f9
--- /dev/null
+++ b/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 安装Module
+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,
+  });
+}
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 0f8031c8f8..f1ebad4219 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/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",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
index 376641af3e..45095382a9 100644
--- a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
+++ b/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>;
diff --git a/dbm-ui/frontend/src/services/model/redis/redis.ts b/dbm-ui/frontend/src/services/model/redis/redis.ts
index fd12035ca4..7a1e450df4 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis.ts
+++ b/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;
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
index 0a5d736f04..26864b9678 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
+++ b/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[];
+  }[];
+}
diff --git a/dbm-ui/frontend/src/services/source/redisToolbox.ts b/dbm-ui/frontend/src/services/source/redisToolbox.ts
index 0f4fa07881..8f281a8aa4 100644
--- a/dbm-ui/frontend/src/services/source/redisToolbox.ts
+++ b/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);
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/Index.vue
new file mode 100644
index 0000000000..e87e447e78
--- /dev/null
+++ b/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>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/Index.vue
new file mode 100644
index 0000000000..18cbcbac2c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/Index.vue
@@ -0,0 +1,280 @@
+<!--
+ * 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>
+  <SmartAction>
+    <div class="install-module">
+      <BkAlert
+        closable
+        theme="info"
+        :title="t('为集群安装扩展 Module，仅 RedisCluster、Redis 主从 支持安装 Module。')" />
+      <RenderData
+        class="mt16"
+        @show-master-batch-selector="handleShowMasterBatchSelector">
+        <RenderDataRow
+          v-for="(item, index) in tableData"
+          :key="item.rowKey"
+          ref="rowRefs"
+          :data="item"
+          :inputed-clusters="inputedClusters"
+          :removeable="tableData.length < 2"
+          @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
+          @clone="(payload: IDataRow) => handleClone(index, payload)"
+          @cluster-input-finish="(domainObj: RedisModel) => handleChangeCluster(index, domainObj)"
+          @remove="handleRemove(index)" />
+      </RenderData>
+      <TicketRemark v-model="remark" />
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :disabled="totalNum === 0"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml-8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+    <ClusterSelector
+      v-model:is-show="isShowClusterSelector"
+      :cluster-types="[ClusterTypes.REDIS]"
+      :selected="selectedClusters"
+      :tab-list-config="tabListConfig"
+      @change="handelClusterChange" />
+  </SmartAction>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { getRedisList } from '@services/source/redis';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketCloneInfo } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import ClusterSelector, { type TabItem } from '@components/cluster-selector/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
+
+  import { messageError } from '@utils';
+
+  import RenderData from './components/Index.vue';
+  import RenderDataRow, { createRowData, type IDataRow, type InfoItem } from './components/Row.vue';
+
+  const router = useRouter();
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+
+  // 单据克隆
+  useTicketCloneInfo({
+    type: TicketTypes.REDIS_CLUSTER_LOAD_MODULES,
+    onSuccess(cloneData) {
+      tableData.value = cloneData.tableDataList;
+      remark.value = cloneData.remark;
+      window.changeConfirm = true;
+    },
+  });
+
+  // 检测列表是否为空
+  const checkListEmpty = (list: Array<IDataRow>) => {
+    if (list.length > 1) {
+      return false;
+    }
+    const [firstRow] = list;
+    return !firstRow.srcCluster;
+  };
+
+  const rowRefs = ref();
+  const isShowClusterSelector = ref(false);
+  const isSubmitting = ref(false);
+  const tableData = ref([createRowData()]);
+  const remark = ref('');
+
+  const selectedClusters = shallowRef<{ [key: string]: Array<RedisModel> }>({ [ClusterTypes.REDIS]: [] });
+
+  const totalNum = computed(() => tableData.value.filter((item) => Boolean(item.srcCluster)).length);
+  const inputedClusters = computed(() => tableData.value.map((item) => item.srcCluster));
+
+  // 集群域名是否已存在表格的映射表
+  let domainMemo: Record<string, boolean> = {};
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: {
+      getResourceList: (params: ServiceParameters<typeof getRedisList>) =>
+        getRedisList({
+          cluster_type: [
+            ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+            ClusterTypes.PREDIXY_REDIS_CLUSTER,
+            ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+            ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+          ].join(','),
+          ...params,
+        }),
+    },
+  } as unknown as Record<string, TabItem>;
+
+  // Master 批量选择
+  const handleShowMasterBatchSelector = () => {
+    isShowClusterSelector.value = true;
+  };
+
+  // 转换成行数据
+  const generateTableRow = (item: RedisModel) => ({
+    rowKey: item.master_domain,
+    isLoading: false,
+    srcCluster: item.master_domain,
+    clusterId: item.id,
+    bkCloudId: item.bk_cloud_id,
+    clusterType: item.cluster_type,
+    clusterTypeName: item.cluster_type_name,
+    dbVersion: item.major_version,
+    loadModules: [],
+  });
+
+  // 批量选择
+  const handelClusterChange = async (selected: { [key: string]: Array<RedisModel> }) => {
+    selectedClusters.value = selected;
+    const list = selected[ClusterTypes.REDIS];
+    const newList = list.reduce((result, item) => {
+      const domain = item.master_domain;
+      if (!domainMemo[domain]) {
+        const row = generateTableRow(item);
+        result.push(row);
+        domainMemo[domain] = true;
+      }
+      return result;
+    }, [] as IDataRow[]);
+    if (checkListEmpty(tableData.value)) {
+      tableData.value = newList;
+    } else {
+      tableData.value = [...tableData.value, ...newList];
+    }
+    window.changeConfirm = true;
+  };
+
+  // 输入集群后查询集群信息并填充到table
+  const handleChangeCluster = async (index: number, domainObj: RedisModel) => {
+    const row = generateTableRow(domainObj);
+    tableData.value[index] = row;
+    domainMemo[domainObj.master_domain] = true;
+    selectedClusters.value[ClusterTypes.REDIS].push(domainObj);
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    const { srcCluster } = tableData.value[index];
+    tableData.value.splice(index, 1);
+    delete domainMemo[srcCluster];
+    const clustersArr = selectedClusters.value[ClusterTypes.REDIS];
+    selectedClusters.value[ClusterTypes.REDIS] = clustersArr.filter((item) => item.master_domain !== srcCluster);
+  };
+
+  // 复制行数据
+  const handleClone = (index: number, sourceData: IDataRow) => {
+    const dataList = [...tableData.value];
+    dataList.splice(index + 1, 0, sourceData);
+    tableData.value = dataList;
+    setTimeout(() => {
+      rowRefs.value[rowRefs.value.length - 1].getValue();
+    });
+  };
+
+  // 点击提交按钮
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      const infos = await Promise.all<InfoItem[]>(
+        rowRefs.value.map((item: { getValue: () => Promise<InfoItem> }) => item.getValue()),
+      );
+      const isSameCloud = infos.every((item) => item.bk_cloud_id === infos[0].bk_cloud_id);
+      if (!isSameCloud) {
+        messageError(t('仅允许同一管控区域的集群一起安装module'));
+        return;
+      }
+      const params = {
+        bk_biz_id: currentBizId,
+        ticket_type: TicketTypes.REDIS_CLUSTER_LOAD_MODULES,
+        remark: remark.value,
+        details: {
+          bk_cloud_id: infos[0].bk_cloud_id,
+          infos,
+        },
+      };
+
+      await createTicket(params).then((data) => {
+        window.changeConfirm = false;
+        router.push({
+          name: 'RedisInstallModule',
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId: data.id,
+          },
+        });
+      });
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  // 重置
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    remark.value = '';
+    selectedClusters.value[ClusterTypes.REDIS] = [];
+    domainMemo = {};
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .install-module {
+    padding-bottom: 20px;
+
+    .page-action-box {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+
+      .safe-action {
+        margin-left: auto;
+
+        .safe-action-text {
+          padding-bottom: 2px;
+          border-bottom: 1px dashed #979ba5;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Index.vue
new file mode 100644
index 0000000000..2438775667
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Index.vue
@@ -0,0 +1,90 @@
+<!--
+ * 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>
+  <div class="render-data">
+    <RenderTable>
+      <template #default>
+        <RenderTableHeadColumn
+          :min-width="120"
+          :width="270">
+          <span>{{ t('源集群') }}</span>
+          <template #append>
+            <BkPopover
+              :content="t('批量添加')"
+              theme="dark">
+              <span
+                class="batch-edit-btn"
+                @click="handleShowMasterBatchSelector">
+                <DbIcon type="batch-host-select" />
+              </span>
+            </BkPopover>
+          </template>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="120"
+          :required="false"
+          :width="200">
+          <span>{{ $t('架构版本') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="120"
+          :required="false"
+          :width="200">
+          <span>{{ $t('版本') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="130"
+          :width="140">
+          <span>{{ t('Module') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          fixed="right"
+          :required="false"
+          :width="100">
+          {{ t('操作') }}
+        </RenderTableHeadColumn>
+      </template>
+      <template #data>
+        <slot />
+      </template>
+    </RenderTable>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+
+  interface Emits {
+    (e: 'showMasterBatchSelector'): void;
+  }
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const handleShowMasterBatchSelector = () => {
+    emits('showMasterBatchSelector');
+  };
+</script>
+<style lang="less">
+  .render-data {
+    .batch-edit-btn {
+      margin-left: 4px;
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/RenderModule.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/RenderModule.vue
new file mode 100644
index 0000000000..98310b9c74
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/RenderModule.vue
@@ -0,0 +1,166 @@
+<!--
+ * 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>
+  <BkLoading :loading="loading">
+    <div class="render-role-box">
+      <TableEditSelect
+        ref="selectRef"
+        v-model="localValue"
+        collapse-tags
+        :disabled="!clusterId"
+        :list="selectList"
+        multiple
+        multiple-mode="tag"
+        :placeholder="t('请选择')"
+        :rules="rules">
+        <template #default="{ optionItem }">
+          <div class="redis-version-select-option">
+            <div
+              v-overflow-tips
+              class="option-label">
+              {{ optionItem.label }}
+            </div>
+            <div>
+              <BkTag
+                v-if="optionItem.disabled"
+                class="ml-4"
+                size="small"
+                theme="success">
+                {{ t('已安装') }}
+              </BkTag>
+            </div>
+          </div>
+        </template>
+      </TableEditSelect>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getRedisClusterModuleInfo } from '@services/source/redisToolbox';
+
+  import TableEditSelect from '@components/render-table/columns/select/index.vue';
+
+  interface Props {
+    data?: string[];
+    clusterId: number;
+    version: string;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string[]>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [],
+  });
+
+  const { t } = useI18n();
+
+  const selectRef = ref();
+  const localValue = ref<string[]>([]);
+  const selectList = ref<
+    {
+      disabled: boolean;
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  const rules = [
+    {
+      validator: (value: string[]) => Boolean(value.length),
+      message: t('请选择Module'),
+    },
+  ];
+
+  const { loading, run: fetchClusterModule } = useRequest(getRedisClusterModuleInfo, {
+    manual: true,
+    onSuccess({ results }) {
+      selectList.value = Object.entries(results).map(([key, value]) => ({
+        disabled: value,
+        value: key,
+        label: key,
+      }));
+    },
+  });
+
+  watch(
+    () => [props.clusterId, props.version],
+    () => {
+      if (props.clusterId) {
+        fetchClusterModule({
+          cluster_id: props.clusterId,
+          version: props.version,
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.data,
+    () => {
+      localValue.value = props.data;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  defineExpose<Exposes>({
+    getValue() {
+      return selectRef.value.getValue().then(() => localValue.value);
+    },
+  });
+</script>
+
+<style lang="less">
+  .redis-version-select-option {
+    display: flex;
+    width: 100%;
+
+    .option-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .render-role-box {
+    padding: 0;
+    color: #63656e;
+
+    :deep(.bk-select-trigger) {
+      height: 100% !important;
+
+      .bk-select-tag {
+        height: inherit;
+        border: none;
+      }
+    }
+
+    :deep(.is-error) {
+      .bk-select-tag {
+        background-color: #fff0f1;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Row.vue
new file mode 100644
index 0000000000..ebf8feaf5c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page1/components/Row.vue
@@ -0,0 +1,162 @@
+<!--
+ * 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>
+  <tr>
+    <td style="padding: 0">
+      <RenderTargetCluster
+        ref="clusterRef"
+        :data="data.srcCluster"
+        :inputed="inputedClusters"
+        @input-finish="handleInputFinish" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.clusterTypeName"
+        :is-loading="data.isLoading"
+        :placeholder="t('选择集群后自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.dbVersion"
+        :is-loading="data.isLoading"
+        :placeholder="t('选择集群后自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderModule
+        ref="moduleRef"
+        :cluster-id="data.clusterId"
+        :data="data.loadModules"
+        :version="data.dbVersion" />
+    </td>
+    <OperateColumn
+      :removeable="removeable"
+      show-clone
+      @add="handleAppend"
+      @clone="handleClone"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
+
+  import RenderTargetCluster from '@views/db-manage/redis/common/edit-field/ClusterName.vue';
+
+  import { random } from '@utils';
+
+  import RenderModule from './RenderModule.vue';
+
+  export interface IDataRow {
+    rowKey: string;
+    isLoading: boolean;
+    srcCluster: string;
+    clusterId: number;
+    bkCloudId: number;
+    clusterType: string;
+    clusterTypeName: string;
+    dbVersion: string;
+    loadModules: string[];
+  }
+
+  export interface InfoItem {
+    bk_cloud_id: number;
+    cluster_id: number;
+    db_version: string;
+    load_modules: string[];
+  }
+
+  // 创建表格数据
+  export const createRowData = (): IDataRow => ({
+    rowKey: random(),
+    isLoading: false,
+    srcCluster: '',
+    clusterId: 0,
+    bkCloudId: 0,
+    clusterType: '',
+    clusterTypeName: '',
+    dbVersion: '',
+    loadModules: [],
+  });
+
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputedClusters?: string[];
+  }
+
+  interface Emits {
+    (e: 'add', params: Array<IDataRow>): void;
+    (e: 'remove'): void;
+    (e: 'clone', value: IDataRow): void;
+    (e: 'clusterInputFinish', value: RedisModel): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<InfoItem>;
+  }
+</script>
+<script setup lang="ts">
+  const props = withDefaults(defineProps<Props>(), {
+    inputedClusters: () => [],
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const clusterRef = ref<InstanceType<typeof RenderTargetCluster>>();
+  const moduleRef = ref<InstanceType<typeof RenderModule>>();
+
+  const handleInputFinish = (value: RedisModel) => {
+    emits('clusterInputFinish', value);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    moduleRef.value!.getValue().then((modules: string[]) => {
+      emits('clone', {
+        ...props.data,
+        rowKey: random(),
+        isLoading: false,
+        loadModules: modules,
+      });
+    });
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      await clusterRef.value!.getValue(true);
+      return await moduleRef.value!.getValue().then((modules: string[]) => ({
+        bk_cloud_id: props.data.bkCloudId,
+        cluster_id: props.data.clusterId,
+        db_version: props.data.dbVersion,
+        load_modules: modules,
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page2/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page2/Index.vue
new file mode 100644
index 0000000000..c6f6ac0bd7
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/install-module/pages/page2/Index.vue
@@ -0,0 +1,87 @@
+<!--
+ * 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>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ $t('安装 Module任务提交成功') }}
+    </template>
+    <I18nT
+      keypath="接下来您可以通过xx查看任务最新动态"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'bizTicketManage',
+          query: {
+            id: ticketId,
+          },
+        }">
+        {{ $t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        class="w-88"
+        theme="primary"
+        @click="handleGoTicket">
+        {{ $t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml-8"
+        @click="handleStepChange">
+        {{ $t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('生产执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      query: {
+        id: ticketId,
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: 'RedisInstallModule',
+    });
+  };
+</script>
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 452e804247..25cf3756a2 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
@@ -749,6 +749,12 @@
       },
       render: ({ data }: { data: RedisModel }) => <span>{data.major_version || '--'}</span>,
     },
+    {
+      label: 'Modules',
+      field: 'module_names',
+      minWidth: 100,
+      render: ({ data }: { data: RedisModel }) => data.module_names.length ? data.module_names.map(item=><p class="mb-4">{item}</p>) : '--',
+    },
     {
       label: t('地域'),
       field: 'region',
@@ -1014,6 +1020,7 @@
       ClusterNodeKeys.REDIS_SLAVE,
       'cluster_type_name',
       'major_version',
+      'module_names',
       'region',
     ],
     showLineHeight: false,
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 7fcb736ff7..5199a47551 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
@@ -740,6 +740,12 @@
       },
       render: ({ data }: ColumnRenderData) => data.major_version || '--',
     },
+    {
+      label: 'Modules',
+      field: 'module_names',
+      minWidth: 100,
+      render: ({ data }: ColumnRenderData) => data.module_names.length ? data.module_names.map(item=><p class="mb-4">{item}</p>) : '--',
+    },
     {
       label: t('容灾要求'),
       field: 'disaster_tolerance_level',
@@ -1077,6 +1083,7 @@
         ClusterNodeKeys.REDIS_SLAVE,
         'cluster_type_name',
         'major_version',
+        'module_names',
         'disaster_tolerance_level',
         'region',
         'spec_name',
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
index 6695dc4fa3..51fc092d65 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
@@ -21,6 +21,15 @@ import { checkDbConsole } from '@utils';
 
 import { t } from '@locales/index';
 
+const redisInstallModuleRoute = {
+  name: 'RedisInstallModule',
+  path: 'install-module/:page?',
+  meta: {
+    navName: t('安装 Module'),
+  },
+  component: () => import('@views/db-manage/redis/install-module/Index.vue'),
+};
+
 const redisCapacityChangeRoute = {
   name: 'RedisCapacityChange',
   path: 'capacity-change/:page?',
@@ -157,6 +166,7 @@ const redisWebconsoleRoute = {
 };
 
 const toolboxDbConsoleRouteMap = {
+  'redis.toolbox.installModule': redisInstallModuleRoute,
   'redis.toolbox.capacityChange': redisCapacityChangeRoute,
   'redis.toolbox.proxyScaleUp': redisProxyScaleUpRoute,
   'redis.toolbox.proxyScaleDown': redisProxyScaleDownRoute,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
index eace25a4d4..d776474e96 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
@@ -134,10 +134,10 @@ export default [
         icon: 'db-icon-cluster',
         children: [
           {
-            name: t('集群容量变更'),
-            id: 'RedisCapacityChange',
+            name: t('安装 Module'),
+            id: 'RedisInstallModule',
             parentId: 'cluster-manage',
-            dbConsoleValue: 'redis.toolbox.capacityChange',
+            dbConsoleValue: 'redis.toolbox.installModule',
           },
           {
             name: t('扩容接入层'),
@@ -151,6 +151,12 @@ export default [
             parentId: 'cluster-manage',
             dbConsoleValue: 'redis.toolbox.proxyScaleDown',
           },
+          {
+            name: t('集群容量变更'),
+            id: 'RedisCapacityChange',
+            parentId: 'cluster-manage',
+            dbConsoleValue: 'redis.toolbox.capacityChange',
+          },
           {
             name: t('集群分片变更'),
             id: 'RedisClusterShardUpdate',
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
index 0e468ca014..db30ee8061 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
@@ -102,6 +102,7 @@
   import DetailsRedis from './redis/Details.vue';
   import DetailsRedisHa from './redis/DetailsHa.vue';
   import RedisHaClusterOperation from './redis/HaClusterOperation.vue';
+  import RedisInstallModule from './redis/InstallModule.vue';
   import RedisMasterFailover from './redis/MasterFailover.vue';
   import RedisOperation from './redis/Operation.vue';
   import RedisProxyScaleDown from './redis/ProxyScaleDown.vue';
@@ -335,6 +336,7 @@
     [TicketTypes.REDIS_DATACOPY_CHECK_REPAIR]: RedisDataCheckAndRepair,
     [TicketTypes.REDIS_CLUSTER_ROLLBACK_DATA_COPY]: RedisRollbackDataCopy,
     [TicketTypes.REDIS_VERSION_UPDATE_ONLINE]: RedisVersionUpgrade,
+    [TicketTypes.REDIS_CLUSTER_LOAD_MODULES]: RedisInstallModule,
     [TicketTypes.TENDBCLUSTER_APPLY]: DetailsSpider,
     [TicketTypes.TENDBCLUSTER_SPIDER_ADD_NODES]: SpiderAddNodes,
     [TicketTypes.TENDBCLUSTER_CHECKSUM]: SpiderCheckSum,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue
new file mode 100644
index 0000000000..5ff17e1a38
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue
@@ -0,0 +1,85 @@
+<!--
+ * 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>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import type { RedisInstallModuleDetails } from '@services/model/ticket/details/redis';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  interface Props {
+    ticketDetails: TicketModel<RedisInstallModuleDetails>;
+  }
+
+  interface IRowData {
+    cluster_domain: string;
+    cluster_type_name: string;
+    db_version: string;
+    load_modules: string[];
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const columns = [
+    {
+      label: t('源集群'),
+      field: 'cluster_domain',
+      showOverflowTooltip: true,
+      rowspan: ({ row }: { row: IRowData }) => {
+        const rowSpan = tableData.value.filter((item) => item.cluster_domain === row.cluster_domain).length;
+        return rowSpan > 1 ? rowSpan : 1;
+      },
+    },
+    {
+      label: t('架构版本'),
+      field: 'cluster_type_name',
+      showOverflowTooltip: true,
+    },
+    {
+      label: t('版本'),
+      field: 'db_version',
+      showOverflowTooltip: true,
+    },
+    {
+      label: 'Module',
+      field: 'load_modules',
+      showOverflowTooltip: true,
+      render: ({ row }: { row: IRowData }) => row.load_modules.length ? row.load_modules.map(item=><p class="mb-4">{item}</p>) : '--',
+    },
+  ];
+
+  const tableData = computed(() => {
+    const { clusters, infos } = props.ticketDetails.details;
+    return infos.map((item) => {
+      const cluster = clusters[item.cluster_id];
+      return {
+        cluster_domain: cluster.immute_domain,
+        cluster_type_name: cluster.cluster_type_name,
+        db_version: item.db_version,
+        load_modules: item.load_modules,
+      };
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@views/tickets/common/styles/DetailsTable.less';
+</style>