From c4a691aa8a61630aa360ca43b15ef33705fe31cb Mon Sep 17 00:00:00 2001
From: GraceWalk <gracewalk1999@163.com>
Date: Thu, 29 Sep 2022 10:44:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=9A=E9=9B=86=E7=BE=A4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=85=BC=E5=AE=B9=E9=9B=86=E7=BE=A4=E6=97=A0=20ZK=20?=
 =?UTF-8?q?=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/MutliClusterPage/List.tsx       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
index a65ac3fd..d15cffcb 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
@@ -1,4 +1,5 @@
-import { AppContainer, Divider, Form, IconFont, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Form, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import moment from 'moment';
 import API from '@src/api';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -16,6 +17,10 @@ import { SearchParams } from './HomePage';
 
 const DEFAULT_PAGE_SIZE = 10;
 
+enum ClusterRunState {
+  Raft = 2,
+}
+
 const DeleteCluster = React.forwardRef((_, ref) => {
   const intl = useIntl();
   const [form] = Form.useForm();
@@ -245,6 +250,7 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
       metricPoints.push(line);
     });
 
+    const runState = itemData.runState;
     const {
       Brokers: brokers,
       Zookeepers: zks,
@@ -345,18 +351,21 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
                   </div>
                   <div className="indicator-left-item-value">{brokers}</div>
                 </div>
-                <div className="indicator-left-item">
-                  <div className="indicator-left-item-title">
-                    <span
-                      className="indicator-left-item-title-dot"
-                      style={{
-                        background: zookeepersAvailable === -1 ? '#e9e7e7' : zookeepersAvailable === 0 ? '#FF7066' : '#34C38F',
-                      }}
-                    ></span>
-                    ZK
+                {/* 2: raft 模式 无zk */}
+                {runState !== ClusterRunState.Raft && (
+                  <div className="indicator-left-item">
+                    <div className="indicator-left-item-title">
+                      <span
+                        className="indicator-left-item-title-dot"
+                        style={{
+                          background: zookeepersAvailable === -1 ? '#e9e7e7' : zookeepersAvailable === 0 ? '#FF7066' : '#34C38F',
+                        }}
+                      ></span>
+                      ZK
+                    </div>
+                    <div className="indicator-left-item-value">{zookeepersAvailable === -1 ? '-' : zks}</div>
                   </div>
-                  <div className="indicator-left-item-value">{zookeepersAvailable === -1 ? '-' : zks}</div>
-                </div>
+                )}
               </div>
               <div className="indicator-right">
                 {metricPoints.map((row, index) => {