From 9b46956259da22c8e959119d806cd3c9924f760a Mon Sep 17 00:00:00 2001
From: GraceWalk <gracewalk1999@163.com>
Date: Tue, 13 Sep 2022 14:18:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Topic=20=E8=AF=A6=E6=83=85=20Partition?=
 =?UTF-8?q?=20Tab=20=E5=8D=A1=E7=89=87=E6=A8=A1=E5=BC=8F=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/TopicDetail/BrokersDetail.tsx   | 39 ++++++---------
 .../src/pages/TopicDetail/index.less          | 50 ++++++++-----------
 2 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
index 6e525018..1c40cd66 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
@@ -6,6 +6,7 @@ import api, { MetricType } from '@src/api';
 import { useParams } from 'react-router-dom';
 import TagsWithHide from '@src/components/TagsWithHide';
 import SwitchTab from '@src/components/SwitchTab';
+import RenderEmpty from '@src/components/RenderEmpty';
 
 interface PropsType {
   hashData: any;
@@ -86,18 +87,6 @@ function getTranformedBytes(bytes: number) {
   return [outBytes.toFixed(2), unit[i]];
 }
 
-const RenderEmpty = (props: { message: string }) => {
-  const { message } = props;
-  return (
-    <>
-      <div className="empty-panel">
-        <div className="img" />
-        <div className="text">{message}</div>
-      </div>
-    </>
-  );
-};
-
 const PartitionPopoverContent = (props: {
   clusterId: string;
   hashData: any;
@@ -125,18 +114,21 @@ const PartitionPopoverContent = (props: {
         { label: 'LeaderBroker', value: leaderBrokerId },
         {
           label: 'BeginningOffset',
-          value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
-            }`,
+          value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${
+            global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
+          }`,
         },
         {
           label: 'EndOffset',
-          value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
-            }`,
+          value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${
+            global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
+          }`,
         },
         {
           label: 'MsgNum',
-          value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${global.getMetricDefine(type, 'Messages')?.unit || ''
-            }`,
+          value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${
+            global.getMetricDefine(type, 'Messages')?.unit || ''
+          }`,
         },
         {
           label: 'LogSize',
@@ -281,13 +273,14 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
                 <div className="broker-container-box-detail">
                   {partitionState.alive ? (
                     partitionState?.replicaList?.length ? (
-                      <div className="partition-list">
+                      <div className={`partition-list ${hoverPartitionId !== -1 ? 'partition-list-hover-state' : ''}`}>
                         {partitionState?.replicaList?.map((partition) => {
                           return (
                             <div
                               key={partition.partitionId}
-                              className={`partition-list-item partition-list-item-${partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
-                                } ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
+                              className={`partition-list-item partition-list-item-${
+                                partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
+                              } ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
                               onMouseEnter={() => setHoverPartitionId(partition.partitionId)}
                               onMouseLeave={() => setHoverPartitionId(-1)}
                               onClick={() => setClickPartition(`${partitionState.brokerId}&${partition.partitionId}`)}
@@ -316,10 +309,10 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
                         })}
                       </div>
                     ) : (
-                      <RenderEmpty message="暂无数据" />
+                      <RenderEmpty message="暂无数据" height="unset" />
                     )
                   ) : (
-                    <RenderEmpty message="暂无数据" />
+                    <RenderEmpty message="暂无数据" height="unset" />
                   )}
                 </div>
               </div>
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
index 694056fb..f13249ab 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
@@ -215,8 +215,8 @@
         position: relative;
         width: 324px;
         min-height: calc(100% - 66px);
-        margin: 0 0 12px 6px;
-        padding: 22px 20px 0 20px;
+        margin: 0 6px 6px 6px;
+        padding: 12px 12px 0 12px;
         border-radius: 12px;
         background: #ffffff;
         overflow: hidden;
@@ -226,16 +226,16 @@
           flex-flow: row wrap;
           width: 100%;
           &-item {
-            width: 32px;
+            width: 34px;
             height: 16px;
-            margin-bottom: 22px;
+            margin-bottom: 12px;
             border-radius: 4px;
             text-align: center;
             line-height: 16px;
-            transition: all ease 0.2s;
+            transition: all ease-in-out 0.3s;
             cursor: pointer;
-            &:not(&:nth-of-type(5n)) {
-              margin-right: 31px;
+            &:not(&:nth-of-type(8n)) {
+              margin-right: 4px;
             }
             &-leader {
               background: rgba(85, 110, 230, 0.1);
@@ -262,27 +262,21 @@
               }
             }
           }
-        }
-
-        .empty-panel {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-bottom: 18px;
-          text-align: center;
-
-          .img {
-            width: 51px;
-            height: 34px;
-            margin-bottom: 7px;
-            background-size: cover;
-            background-image: url('../../assets/empty.png');
-          }
-
-          .text {
-            font-size: 10px;
-            color: #919aac;
-            line-height: 20px;
+          &-hover-state {
+            .partition-list-item {
+              &-leader:not(.partition-active) {
+                background-color: #f6f7fd;
+                color: #dbe1f8;
+              }
+              &-isr:not(.partition-active) {
+                background-color: #fcfcfc;
+                color: #c4c6c9;
+              }
+              &-osr:not(.partition-active) {
+                background-color: #fefaf4;
+                color: #f8d6af;
+              }
+            }
           }
         }
       }