From b59b8eb03b12405891933771466ec6afede5af27 Mon Sep 17 00:00:00 2001
From: austinqli <1344583166@qq.com>
Date: Wed, 29 Nov 2023 15:23:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E7=BA=BF=E4=B8=8A=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E9=AB=98=E4=BC=98=E5=85=88=E7=BA=A7=E9=9C=80=E6=B1=82?=
 =?UTF-8?q?=E5=8F=8A=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20#2094?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cluster-details/common/graphData.ts       |  6 +++--
 .../render-instances/RenderInstances.vue      | 23 ++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/dbm-ui/frontend/src/components/cluster-details/common/graphData.ts b/dbm-ui/frontend/src/components/cluster-details/common/graphData.ts
index f64ad8b203..72c7855e1c 100644
--- a/dbm-ui/frontend/src/components/cluster-details/common/graphData.ts
+++ b/dbm-ui/frontend/src/components/cluster-details/common/graphData.ts
@@ -15,6 +15,8 @@ import _ from 'lodash';
 
 import type { ResourceTopo } from '@services/types';
 
+import { ClusterTypes } from '@common/const';
+
 const defaultNodeConfig = {
   width: 296,
   itemHeight: 28,
@@ -139,9 +141,9 @@ export class GraphData {
     this.calcNodeLocations(firstRoot, groups, groupLines);
 
     // es hdfs 集群特殊逻辑
-    if (['es', 'hdfs'].includes(this.clusterType)) {
+    if (([ClusterTypes.ES, ClusterTypes.HDFS] as string[]).includes(this.clusterType)) {
       this.calcHorizontalAlignLocations(groups);
-    } else if (this.clusterType === 'spider') {
+    } else if (this.clusterType === ClusterTypes.TENDBCLUSTER) {
       this.calcSpiderNodeLocations(rootGroups, groups);
     }
 
diff --git a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
index 1dd3ffbb2f..5f25dba481 100644
--- a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -23,10 +23,10 @@
         :style="{ color: highlightIps.includes(inst.ip) ? 'rgb(234 177 93)' : '#63656e' }">
         <slot :data="inst">
           {{ inst.ip }}:{{ inst.port }}
-          <!-- TODO: 待UI确认Icon -->
-          <!-- <DbIcon
+          <span
             v-if="inst.admin_port && inst.admin_port > 0"
-            type="warn-lightning" /> -->
+            v-bk-tooltips="'Primary ctl'"
+            class="primary-ctl-box">P</span>
         </slot>
       </span>
       <BkTag v-if="inst.status === 'unavailable'">
@@ -276,6 +276,23 @@
 .cluster-instances {
   padding: 8px 0;
 
+  .primary-ctl-box {
+    width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #3A84FF;
+    cursor: pointer;
+    background: #F0F5FF;
+    border-radius: 2px;
+
+    &:hover {
+      color: #1768EF;
+      background: #E1ECFF;
+    }
+  }
+
   .db-icon-copy {
     display: none;
     margin-top: 1px;