From 65ed900ce8d18bde8ceb5ee0f314fff2a7e86a54 Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Fri, 20 Dec 2024 18:16:15 +0800
Subject: [PATCH] =?UTF-8?q?chore(frontend):=20ts=20=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20#8748?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cluster-instance-status/Index.vue         |  60 ++++++++
 .../model/tendbcluster/tendbcluster.ts        |   4 +-
 .../src/services/types/db/clusterListNode.ts  |   1 +
 .../render-instances/RenderInstances.vue      | 138 ++++++++----------
 .../mysql/ha-cluster-list/components/List.vue |   3 +-
 5 files changed, 122 insertions(+), 84 deletions(-)
 create mode 100644 dbm-ui/frontend/src/components/cluster-instance-status/Index.vue

diff --git a/dbm-ui/frontend/src/components/cluster-instance-status/Index.vue b/dbm-ui/frontend/src/components/cluster-instance-status/Index.vue
new file mode 100644
index 0000000000..43baf157db
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-instance-status/Index.vue
@@ -0,0 +1,60 @@
+<!--
+ * 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="db-cluster-instance-status">
+    <DbIcon
+      svg
+      :type="clusterInstStatus[data as keyof typeof clusterInstStatus].icon" />
+    <span
+      v-if="showText"
+      style="margin-left: 4px">
+      {{ clusterInstStatus[data as keyof typeof clusterInstStatus].text }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    data: string;
+    showText?: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    showText: true,
+  });
+
+  const { t } = useI18n();
+
+  const clusterInstStatus = {
+    running: {
+      text: t('正常'),
+      icon: 'normal',
+    },
+    unavailable: {
+      text: t('异常'),
+      icon: 'abnormal',
+    },
+    restoring: {
+      text: t('重建中'),
+      icon: 'sync-pending',
+    },
+  };
+</script>
+<style lang="less">
+  .db-cluster-status {
+    display: flex;
+    align-items: center;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
index 8ba032f26e..28486b1023 100644
--- a/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
+++ b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
@@ -113,8 +113,8 @@ export default class TendbCluster {
   phase: 'online' | 'offline';
   phase_name: string;
   region: string;
-  remote_db: ClusterListNode[];
-  remote_dr: ClusterListNode[];
+  remote_db: (ClusterListNode & { shard_id: number })[];
+  remote_dr: (ClusterListNode & { shard_id: number })[];
   remote_shard_num: number;
   slave_domain: string;
   spider_master: ClusterListNode[];
diff --git a/dbm-ui/frontend/src/services/types/db/clusterListNode.ts b/dbm-ui/frontend/src/services/types/db/clusterListNode.ts
index e76a033b92..b8e114fe57 100644
--- a/dbm-ui/frontend/src/services/types/db/clusterListNode.ts
+++ b/dbm-ui/frontend/src/services/types/db/clusterListNode.ts
@@ -2,6 +2,7 @@ export interface ClusterListNode {
   bk_biz_id: number;
   bk_cloud_id: number;
   bk_host_id: number;
+  bk_sub_zone: string;
   bk_instance_id: number;
   instance: string;
   ip: string;
diff --git a/dbm-ui/frontend/src/views/db-manage/common/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/views/db-manage/common/render-instances/RenderInstances.vue
index 4e0a5408ff..2cc9513b88 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/render-instances/RenderInstances.vue
@@ -15,7 +15,7 @@
   <div class="cluster-instances">
     <p
       v-for="(inst, index) in renderData"
-      :key="inst.bk_instance_id"
+      :key="`${inst.ip}:${inst.port}`"
       class="pt-2 pb-2"
       :class="{ 'is-unavailable': inst.status === 'unavailable' }">
       <TextOverflowLayout>
@@ -104,13 +104,24 @@
       </div>
       <DbTable
         ref="tableRef"
-        :columns="columns"
         :data-source="dataSource"
         fixed-pagination
         :height="440"
         releate-url-query
         @clear-search="handleClearSearch"
-        @request-finished="handleRequestFinished" />
+        @request-finished="handleRequestFinished">
+        <BkTableColumn :label="t('实例')">
+          <template #default="{ data: rowData }: { data: T }"> {{ rowData.ip }}:{{ rowData.port }} </template>
+        </BkTableColumn>
+        <BkTableColumn :label="t('部署角色')">
+          {{ role }}
+        </BkTableColumn>
+        <BkTableColumn :label="t('状态')">
+          <template #default="{ data: rowData }: { data: T }">
+            <ClusterInstanceStatus :data="rowData.status" />
+          </template>
+        </BkTableColumn>
+      </DbTable>
     </div>
     <template #footer>
       <BkButton @click="handleClose">
@@ -119,40 +130,27 @@
     </template>
   </BkDialog>
 </template>
-
-<script
-  setup
-  lang="tsx"
-  generic="
-    T extends {
-      bk_instance_id: number;
-      create_at: string;
-      instance_address: string;
-      ip: string;
-      port: number;
-      role: string;
-      status: string;
-    }
-  ">
+<script lang="ts">
+  type IData = {
+    ip: string;
+    port: number;
+    status: string;
+  };
+</script>
+<script setup lang="ts" generic="T extends IData">
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import type { UnwrapRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import type {
-    ListBase,
-  } from '@services/types';
+  import type { ListBase } from '@services/types';
 
   import { useCopy } from '@hooks';
 
   import { useGlobalBizs } from '@stores';
 
-  import {
-    type ClusterInstStatus,
-    clusterInstStatus,
-    ClusterInstStatusKeys,
-  } from '@common/const';
+  import { ClusterInstStatusKeys } from '@common/const';
 
-  import DbStatus from '@components/db-status/index.vue';
+  import ClusterInstanceStatus from '@components/cluster-instance-status/Index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { messageWarn } from '@utils';
@@ -160,17 +158,15 @@
   interface Props {
     title: string;
     role: string;
-    data: T[];
+    data: IData[];
     clusterId: number;
     dataSource: (params: Record<string, any>) => Promise<ListBase<T[]>>;
-    sort?: (data: T[]) => T[];
     highlightIps?: string[];
   }
 
   const props = withDefaults(defineProps<Props>(), {
-    highlightIps: () => ([]),
-    tagKeyConfig: () => ([]),
-    sort: (data: T[]) => data,
+    highlightIps: () => [],
+    tagKeyConfig: () => [],
   });
 
   const copy = useCopy();
@@ -179,12 +175,14 @@
 
   let tippyIns: Instance;
 
+  const renderCount = 10;
+
   const copyRootRef = ref();
   const popRef = ref();
   const isCopyIconClicked = ref(false);
   const tableRef = ref();
-  const renderData = shallowRef<T[]>([]);
-  const hasMore = computed(() => props.data.length > 10);
+  const renderData = shallowRef<IData[]>([]);
+  const hasMore = computed(() => props.data.length > renderCount);
 
   const dialogState = reactive({
     isShow: false,
@@ -195,112 +193,92 @@
   watch(
     () => props.data,
     () => {
-      renderData.value = props.sort(props.data).slice(0, 10);
+      renderData.value = props.data.slice(0, renderCount);
     },
     {
       immediate: true,
-    }
-  );
-
-  const columns = [
-    {
-      label: t('实例'),
-      field: 'instance_address',
-    },
-    {
-      label: t('部署角色'),
-      field: 'role',
-    },
-    {
-      label: t('状态'),
-      field: 'status',
-      render: ({ cell }: { cell: ClusterInstStatus }) => {
-        const info = clusterInstStatus[cell] || clusterInstStatus.unavailable;
-        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
-      },
     },
-    {
-      label: t('部署时间'),
-      field: 'create_at',
-    },
-  ];
+  );
 
   /**
    * 获取节点列表
    */
   const fetchInstance = () => {
     nextTick(() => {
-      tableRef.value.fetchData({
-        instance_address: dialogState.keyword,
-      }, {
-        bk_biz_id: globalBizsStore.currentBizId,
-        cluster_id: props.clusterId,
-        role: props.role,
-      });
+      tableRef.value.fetchData(
+        {
+          instance_address: dialogState.keyword,
+        },
+        {
+          bk_biz_id: globalBizsStore.currentBizId,
+          cluster_id: props.clusterId,
+          role: props.role,
+        },
+      );
     });
-  }
+  };
 
   const handleShowMore = () => {
     dialogState.isShow = true;
     fetchInstance();
-  }
+  };
 
   const handleClearSearch = () => {
     dialogState.keyword = '';
     fetchInstance();
-  }
+  };
 
   const handleRequestFinished = (data: T[]) => {
     dialogState.data = data as UnwrapRef<T[]>;
-  }
+  };
 
   /**
    * 复制异常实例
    */
   const handleCopyAbnormal = () => {
     const abnormalInstances = dialogState.data
-      .filter(item => item.status !== ClusterInstStatusKeys.RUNNING)
-      .map(item => item.instance_address);
+      .filter((item) => item.status !== ClusterInstStatusKeys.RUNNING)
+      .map((item) => `${item.ip}:${item.port}`);
     if (abnormalInstances.length === 0) {
       messageWarn(t('没有可复制实例'));
       return;
     }
     copy(abnormalInstances.join('\n'));
-  }
+  };
 
   /**
    * 复制所有实例
    */
   const handleCopyAll = () => {
-    const instances = dialogState.data.map(item => item.instance_address);
+    const instances = dialogState.data.map((item) => `${item.ip}:${item.port}`);
     if (instances.length === 0) {
       messageWarn(t('没有可复制实例'));
       return;
     }
     copy(instances.join('\n'));
-  }
+  };
 
   const handleCopyIps = () => {
     const { data } = props;
-    const ips = [...new Set(data.map(item => item.ip))];
+    const ips = [...new Set(data.map((item) => item.ip))];
     if (ips.length === 0) {
       messageWarn(t('没有可复制IP'));
       return;
     }
     copy(ips.join('\n'));
-  }
+  };
 
   const handleCopyInstances = () => {
     const { data } = props;
-    const instances = data.map(item => `${item.ip}:${item.port}`);
+    const instances = data.map((item) => `${item.ip}:${item.port}`);
     copy(instances.join('\n'));
-  }
+  };
 
   const handleClose = () => {
     dialogState.isShow = false;
     dialogState.keyword = '';
     dialogState.data = [];
-  }
+  };
 
   onMounted(() => {
     nextTick(() => {
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 b26ea9af70..1cea9b41a8 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
@@ -672,12 +672,11 @@
       render: ({ data }: ColumnData) => (
         <RenderInstances
           highlightIps={batchSearchIpInatanceList.value}
-          data={data.slaves || []}
+          data={(data.slaves || []).sort((a, b) => Number(b.is_stand_by) - Number(a.is_stand_by))}
           title={t('【inst】实例预览', { inst: data.master_domain, title: 'Slave' })}
           role="slave"
           clusterId={data.id}
           dataSource={getTendbhaInstanceList}
-          sort={(data: TendbhaModel['slaves'] = []) => data.sort((a, b) => Number(b.is_stand_by) - Number(a.is_stand_by))}
         >
           {{
             append: ({ data: instance }: { data: TendbhaModel['slaves'][number] }) =>