fix(frontend): 同机关联集群支持按角色过滤 TencentBlueKing#7315

# Reviewed, transaction id: 20489

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

@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import type { InstanceInfos } from '@services/types';
+
 import { ClusterTypes } from '@common/const';
 
 import http from '../http';
@@ -93,13 +95,7 @@ export function checkClusterDatabase(params: { bk_biz_id: number; cluster_id: nu
 }
 
 // 根据用户手动输入的ip[:port]查询真实的实例
-export function checkInstance<
-  T extends {
-    bk_host_id: number;
-    ip: string;
-    bk_cloud_id: number;
-  },
->(params: { instance_addresses: string[]; bk_biz_id: number }) {
+export function checkInstance<T extends InstanceInfos>(params: { instance_addresses: string[]; bk_biz_id: number }) {
   return http.post<T[]>(`${path}/check_instances/`, params);
 }
 

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

@@ -12,9 +12,9 @@
  */
 
 import RedisClusterNodeByIpModel from '@services/model/redis/redis-cluster-node-by-ip';
+import type { InstanceInfos } from '@services/types';
 
 import http from '../http';
-import type { InstanceInfos } from '../types/instanceInfos';
 
 /**
  * 判断 Mysql 实例是否存在

dbm-ui/frontend/src/views/db-manage/common/RenderRelatedClusters.vue

@@ -0,0 +1,137 @@
+<!--
+ * 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="isLoading">
+    <div
+      class="render-cluster-box"
+      :style="{ backgroundColor: showDefault ? '#fafbfd' : '#fff' }">
+      <span
+        v-if="showDefault"
+        key="empty"
+        style="color: #c4c6cc">
+        {{ placeholder }}
+      </span>
+      <template v-else>
+        <div
+          v-for="item in relatedClusterList"
+          :key="item.id"
+          v-overflow-tips
+          class="cluster-item">
+          {{ item.master_domain }}
+        </div>
+      </template>
+    </div>
+  </BkLoading>
+</template>
+<script
+  setup
+  lang="ts"
+  generic="
+    T extends {
+      ip: string;
+    }
+  ">
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { t } from '@locales/index';
+
+  interface Props {
+    data?: T;
+    role?: string;
+    placeholder?: string;
+  }
+
+  interface Emits {
+    (e: 'change', value: number[]): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<Record<'cluster_ids', number[]>>;
+  }
+
+  type InstanceInfos = ServiceReturnType<typeof checkInstance>[number];
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: undefined,
+    role: 'master',
+    placeholder: t('自动生成'),
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const relatedClusterList = shallowRef<InstanceInfos['related_clusters']>([]);
+
+  const showDefault = computed(() => relatedClusterList.value.length === 0);
+
+  const { loading: isLoading, run: fetchChecklInstances } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess(data) {
+      if (data.length === 0) {
+        return;
+      }
+
+      const [currentData] = data.filter((item) => item.role === props.role);
+      relatedClusterList.value = currentData.related_clusters;
+      emits(
+        'change',
+        relatedClusterList.value.map((item) => item.id),
+      );
+    },
+  });
+
+  watch(
+    () => props.data,
+    (newData, oldData) => {
+      if (newData?.ip === oldData?.ip) {
+        return;
+      }
+
+      relatedClusterList.value = [];
+      emits('change', []);
+      if (props.data && props.data.ip) {
+        fetchChecklInstances({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          instance_addresses: [props.data.ip],
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  defineExpose<Exposes>({
+    getValue() {
+      return Promise.resolve({
+        cluster_ids: relatedClusterList.value.map((item) => item.id),
+      });
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .render-cluster-box {
+    padding: 10px 16px;
+    line-height: 20px;
+    color: #63656e;
+
+    .cluster-item {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/RenderMaster.vue

@@ -54,7 +54,7 @@
   }
 
   interface Exposes {
-    getValue: (field: string) => Promise<IValue>;
+    getValue: () => Promise<IValue>;
   }
 
   const props = defineProps<Props>();

dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/RenderSlave.vue

@@ -45,7 +45,7 @@
   }
 
   interface Exposes {
-    getValue: (field: string) => Promise<string>;
+    getValue: () => Promise<{ slave_ip: ISlaveHost }>;
   }
 
   interface ISlaveHost {

dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/Row.vue

@@ -28,7 +28,7 @@
     <td style="padding: 0">
       <RenderCluster
         ref="clusterRef"
-        :master-data="localMasterData"
+        :data="localMasterData"
         @change="handleClusterChange" />
     </td>
     <OperateColumn
@@ -41,13 +41,15 @@
 </template>
 <script lang="ts">
   import { ref, shallowRef, watch } from 'vue';
+  import type { ComponentExposed } from 'vue-component-type-helpers';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderCluster from '@views/db-manage/common/RenderRelatedClusters.vue';
+
   import { random } from '@utils';
 
-  import RenderCluster from './RenderCluster.vue';
   import RenderMaster from './RenderMaster.vue';
   import RenderSlave from './RenderSlave.vue';
 
@@ -94,9 +96,9 @@
 
   const emits = defineEmits<Emits>();
 
-  const masterHostRef = ref();
-  const slaveHostRef = ref();
-  const clusterRef = ref();
+  const masterHostRef = ref<InstanceType<typeof RenderMaster>>();
+  const slaveHostRef = ref<InstanceType<typeof RenderSlave>>();
+  const clusterRef = ref<ComponentExposed<typeof RenderCluster>>();
 
   const localMasterData = shallowRef();
 
@@ -132,9 +134,9 @@
   };
 
   const getRowData = () => [
-    masterHostRef.value.getValue('master_ip'),
-    slaveHostRef.value.getValue(),
-    clusterRef.value.getValue(),
+    masterHostRef.value!.getValue(),
+    slaveHostRef.value!.getValue(),
+    clusterRef.value!.getValue(),
   ];
 
   const handleClone = () => {