[Bugfix]zookeeper页面leader节点显示异常(#873)

km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import CardBar, { healthDataProps } from './index';
-import { Utils } from 'knowdesign';
+import { Tooltip, Utils } from 'knowdesign';
 import api from '@src/api';
 import { HealthStateEnum } from '../HealthState';
 
@@ -81,7 +81,22 @@ const ZookeeperCard = () => {
         {
           title: 'Leader',
           value() {
-            return <span style={{ fontSize: 24 }}>{leaderNode || '-'}</span>;
+            return (
+              <Tooltip title={leaderNode}>
+                <span
+                  style={{
+                    fontSize: 24,
+                    overflow: 'hidden',
+                    display: 'block',
+                    width: '100%',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {leaderNode || '-'}
+                </span>
+              </Tooltip>
+            );
           },
         },
         {

km-console/packages/layout-clusters-fe/src/components/CardBar/index.less

@@ -64,21 +64,21 @@
       margin-left: 12px;
       padding: 12px 20px;
       .card-bar-colunms-header {
+        font-size: 14px;
+        color: #74788d;
+        letter-spacing: 0;
+        text-align: justify;
+        line-height: 20px;
+        .anticon-question-circle {
+          padding: 3px 3px 2px 3px;
+          margin-left: -3px;
           font-size: 14px;
-          color: #74788d;
+          border-radius: 50%;
-          letter-spacing: 0;
+          &:hover {
-          text-align: justify;
+            background: rgba(33, 37, 41, 0.04);
-          line-height: 20px;
-          .anticon-question-circle {
-            padding: 3px 3px 2px 3px;
-            margin-left: -3px;
-            font-size: 14px;
-            border-radius: 50%;
-            &:hover {
-              background: rgba(33, 37, 41, 0.04);
-            }
           }
         }
+      }
       .card-bar-colunms-body {
         font-size: 40px;
         color: #212529;
@@ -89,6 +89,7 @@
         margin-top: 5px;
         .num {
           font-family: DIDIFD-Medium;
+          overflow: hidden;
         }
         .sub-title {
           font-family: @font-family;