From b6c9f88e572fdc1765117acf49da823fd435b091 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Mon, 20 Jan 2025 11:15:19 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20redis=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E9=87=8D=E6=9E=84=5F=E5=AE=89=E8=A3=85module=20#8840?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/ticket/details/redis/index.ts       |   1 +
 .../ticket/details/redis/installModule.ts     |  11 +
 .../REDIS_CLUSTER_LOAD_MODULES/Index.vue      |  32 ++
 .../create/Index.vue                          | 307 ++++++++++++++++++
 .../create/components/ModuleSelectColumn.vue  | 143 ++++++++
 5 files changed, 494 insertions(+)
 create mode 100644 dbm-ui/frontend/src/services/model/ticket/details/redis/installModule.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/components/ModuleSelectColumn.vue

diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
index e99f29cc85..0d9205a40f 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
@@ -11,6 +11,7 @@ export * from './dataStructure';
 export * from './dataStructureTaskDelete';
 export * from './destroy';
 export * from './insApply';
+export * from './installModule';
 export * from './instanceDestroy';
 export * from './instanceProxyClose';
 export * from './instanceProxyOpen';
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/installModule.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/installModule.ts
new file mode 100644
index 0000000000..22ee285d52
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/ticket/details/redis/installModule.ts
@@ -0,0 +1,11 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+export interface InstallModule extends DetailBase {
+  clusters: DetailClusters;
+  bk_cloud_id: number;
+  infos: {
+    cluster_id: number;
+    db_version: string;
+    load_modules: string[];
+  }[];
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/Index.vue
new file mode 100644
index 0000000000..fdfa950179
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './create/Index.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/Index.vue
new file mode 100644
index 0000000000..50c7c26150
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/Index.vue
@@ -0,0 +1,307 @@
+<!--
+ * 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。')" />
+      <DbForm
+        ref="form"
+        class="toolbox-form"
+        form-type="vertical"
+        :model="formData"
+        style="margin-top: 16px">
+        <EditableTable
+          ref="editableTable"
+          class="mt16 mb16"
+          :model="tableData"
+          :rules="rules">
+          <EditableTableRow
+            v-for="(item, index) in tableData"
+            :key="index">
+            <EditClusterColumn
+              v-model="item.cluster"
+              :cluster-types="[ClusterTypes.REDIS]"
+              field="cluster.master_domain"
+              :label="t('目标集群')"
+              :selected="selected"
+              :tab-list-config="tabListConfig"
+              @batch-edit="handleClusterBatchEdit" />
+            <EditableTableColumn
+              :label="t('架构版本')"
+              :width="200">
+              <EditBlock :placeholder="t('选择集群后自动生成')">
+                {{ item.cluster.cluster_type_name }}
+              </EditBlock>
+            </EditableTableColumn>
+            <EditableTableColumn
+              :label="t('版本')"
+              :width="200">
+              <EditBlock :placeholder="t('选择集群后自动生成')">
+                {{ item.cluster.major_version }}
+              </EditBlock>
+            </EditableTableColumn>
+            <ModuleSelectColumn
+              v-model="item.load_modules"
+              :params="{
+                clusterId: item.cluster.id,
+                version: item.cluster.major_version,
+              }">
+            </ModuleSelectColumn>
+            <OperationColumn
+              :create-row-method="createRowData"
+              :table-data="tableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <TicketRemark v-model="formData.remark" />
+      </DbForm>
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :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>
+  </SmartAction>
+</template>
+
+<script setup lang="ts">
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { RepairAndVerifyFrequencyModes, RepairAndVerifyModes } from '@services/model/redis/redis-dst-history-job';
+  import { type Redis } from '@services/model/ticket/ticket';
+  import { getRedisList } from '@services/source/redis';
+
+  import { useCreateTicket, useTicketDetail } from '@hooks';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import { type TabItem } from '@components/cluster-selector/Index.vue';
+  import EditableTable, {
+    Block as EditBlock,
+    Column as EditableTableColumn,
+    Row as EditableTableRow,
+  } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import EditClusterColumn from '@views/db-manage/redis/common/toolbox-field/edit-cluster-column/Index.vue';
+
+  import { messageError } from '@utils';
+
+  import ModuleSelectColumn from './components/ModuleSelectColumn.vue';
+
+  interface IDataRow {
+    cluster: {
+      id?: number;
+      master_domain?: string;
+      bk_cloud_id?: number;
+      cluster_type?: string;
+      cluster_type_name?: string;
+      major_version?: string;
+    };
+    load_modules: string[];
+  }
+
+  const createRowData = (values?: Partial<IDataRow>) => ({
+    cluster: values?.cluster ? values.cluster : ({} as IDataRow['cluster']),
+    load_modules: values?.load_modules || [],
+  });
+
+  const createDefaultFormData = () => ({
+    data_check_repair_setting_type: RepairAndVerifyModes.DATA_CHECK_AND_REPAIR,
+    data_check_repair_setting_execution_frequency: RepairAndVerifyFrequencyModes.ONCE_AFTER_REPLICATION,
+    remark: '',
+  });
+
+  const { t } = useI18n();
+
+  // 单据克隆
+  useTicketDetail<Redis.InstallModule>(TicketTypes.REDIS_CLUSTER_LOAD_MODULES, {
+    onSuccess(ticketDetail) {
+      const { details, remark } = ticketDetail;
+      const { infos, clusters } = details;
+      tableData.value = infos.map((infoItem) =>
+        createRowData({
+          cluster: {
+            master_domain: clusters[infoItem.cluster_id].immute_domain,
+          },
+          load_modules: infoItem.load_modules,
+        }),
+      );
+      Object.assign(formData, {
+        remark,
+      });
+    },
+  });
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    bk_cloud_id: number;
+    infos: {
+      cluster_id: number;
+      db_version: string;
+      load_modules: string[];
+    }[];
+  }>(TicketTypes.REDIS_CLUSTER_LOAD_MODULES);
+
+  const editableTableRef = useTemplateRef('editableTable');
+
+  const tableData = ref<IDataRow[]>([createRowData()]);
+
+  const formData = reactive(createDefaultFormData());
+
+  const rules = {
+    'cluster.master_domain': [
+      {
+        validator: (value: string) => {
+          if (value) {
+            const nonEmptyIdList = tableData.value.filter((row) => row.cluster.master_domain === value);
+            return nonEmptyIdList.length === 1;
+          }
+          return true;
+        },
+        trigger: 'change',
+        message: t('目标集群重复'),
+      },
+    ],
+  };
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: {
+      getResourceList: (params: ServiceParameters<typeof getRedisList>) =>
+        getRedisList({
+          cluster_type: [ClusterTypes.PREDIXY_REDIS_CLUSTER, ClusterTypes.REDIS_INSTANCE].join(','),
+          ...params,
+        }),
+    },
+  } as unknown as Record<string, TabItem>;
+
+  const selected = computed(() => {
+    const selectedClusters: ComponentProps<typeof EditClusterColumn>['selected'] = {
+      [ClusterTypes.REDIS]: [],
+    };
+    tableData.value.forEach((tableRow) => {
+      const { id, master_domain: masterDomain } = tableRow.cluster;
+      if (id && masterDomain) {
+        selectedClusters[ClusterTypes.REDIS].push({
+          id,
+          master_domain: masterDomain,
+        });
+      }
+    });
+    return selectedClusters;
+  });
+
+  const clusterMemo = computed(() =>
+    Object.fromEntries(
+      Object.values(selected.value).flatMap((clusters) =>
+        clusters.filter((cluster) => cluster.master_domain).map((cluster) => [cluster.master_domain, true]),
+      ),
+    ),
+  );
+
+  const handleClusterBatchEdit = (clusterList: RedisModel[]) => {
+    const newList: IDataRow[] = [];
+    clusterList.forEach((item) => {
+      if (!clusterMemo.value[item.master_domain]) {
+        const domain = item.master_domain;
+        if (!clusterMemo.value[domain]) {
+          newList.push(
+            createRowData({
+              cluster: {
+                id: item.id,
+                master_domain: item.master_domain,
+                bk_cloud_id: item.bk_cloud_id,
+                cluster_type: item.cluster_type,
+                cluster_type_name: item.cluster_type_name,
+                major_version: item.major_version,
+              },
+            }),
+          );
+        }
+      }
+    });
+    tableData.value = [...(tableData.value[0].cluster.id ? tableData.value : []), ...newList];
+    window.changeConfirm = true;
+  };
+
+  const handleSubmit = async () => {
+    const validateResult = await editableTableRef.value!.validate();
+    if (validateResult) {
+      const isSameCloud = tableData.value.every(
+        (item) => item.cluster.bk_cloud_id === tableData.value[0].cluster.bk_cloud_id,
+      );
+      if (!isSameCloud) {
+        messageError(t('仅允许同一管控区域的集群一起安装module'));
+        return;
+      }
+      createTicketRun({
+        details: {
+          bk_cloud_id: tableData.value[0].cluster.bk_cloud_id!,
+          infos: tableData.value.map((tableItem) => ({
+            cluster_id: tableItem.cluster.id!,
+            db_version: tableItem.cluster.major_version!,
+            load_modules: tableItem.load_modules,
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  // 重置
+  const handleReset = () => {
+    Object.assign(formData, createDefaultFormData());
+    tableData.value = [createRowData()];
+    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/REDIS_CLUSTER_LOAD_MODULES/create/components/ModuleSelectColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/components/ModuleSelectColumn.vue
new file mode 100644
index 0000000000..a808a97fa9
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_LOAD_MODULES/create/components/ModuleSelectColumn.vue
@@ -0,0 +1,143 @@
+<!--
+ * 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">
+    <EditableTableColumn
+      ref="editableTableColumn"
+      field="drop_type"
+      :label="t('清档类型')"
+      required
+      :width="200">
+      <EditSelect
+        v-model="moduleValue"
+        :clearable="false"
+        collapse-tags
+        :disabled="!params.clusterId"
+        :list="selectList"
+        multiple
+        multiple-mode="tag">
+        <BkOption
+          v-for="(item, index) in selectList"
+          :key="index"
+          :label="item.label"
+          :value="item.value">
+          <div class="edit-spec-column-spec-item">
+            <span class="text-overflow">
+              {{ item.label }}
+              <BkTag
+                v-if="item.disabled"
+                class="ml-4"
+                size="small"
+                theme="success">
+                {{ t('已安装') }}
+              </BkTag>
+            </span>
+          </div>
+        </BkOption>
+      </EditSelect>
+    </EditableTableColumn>
+  </BkLoading>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getRedisClusterModuleInfo } from '@services/source/redisToolbox';
+
+  import { Column as EditableTableColumn, Select as EditSelect } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    params: {
+      clusterId?: number;
+      version?: string;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const moduleValue = defineModel<string[]>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const selectList = shallowRef<
+    {
+      disabled: boolean;
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  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.params.clusterId, props.params.version],
+    () => {
+      if (props.params.clusterId && props.params.version) {
+        fetchClusterModule({
+          cluster_id: props.params.clusterId,
+          version: props.params.version,
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+</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>