From 8f4ff36c09f6298995daa4daf92c42145493b1e6 Mon Sep 17 00:00:00 2001
From: GraceWalk <gracewalk1999@163.com>
Date: Fri, 21 Oct 2022 11:44:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20Topic=20=E6=89=A9?=
 =?UTF-8?q?=E5=88=86=E5=8C=BA=E5=90=8D=E7=A7=B0=20&=20=E6=8F=8F=E8=BF=B0?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/TopicList/ExpandPartition.tsx   | 19 +++++++++-----
 .../src/pages/TopicList/index.less            | 26 ++++++++++++++-----
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
index b17a41ab..bf87fb59 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { AppContainer, Button, Divider, Drawer, Form, InputNumber, notification, SingleChart, Space, Spin, Utils } from 'knowdesign';
+import { AppContainer, Button, Divider, Drawer, Form, InputNumber, SingleChart, Space, Spin, Tooltip, Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
 import Api, { MetricType } from '@src/api/index';
-import { getBasicChartConfig, getUnit } from '@src/constants/chartConfig';
-import { formatChartData, MetricDefaultChartDataType } from '@src/constants/chartConfig';
+import { getBasicChartConfig, getDataUnit } from '@src/constants/chartConfig';
+import { formatChartData, OriginMetricData } from '@src/constants/chartConfig';
 
 const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
   const [global] = AppContainer.useGlobalValue();
@@ -60,7 +61,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
       );
       const empiricalMinValue = 10 * 1024 * record.partitionNum;
 
-      const lines = data.map((metric: MetricDefaultChartDataType) => {
+      const lines = data.map((metric: OriginMetricData) => {
         const child = metric.metricLines[0];
         child.name = metric.metricName;
         return child;
@@ -87,7 +88,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
     });
   }, [expandPartitionsVisible]);
   const formattedMinBytesInOut = (v: number) => {
-    const [unit, size] = getUnit(v);
+    const [unit, size] = getDataUnit['Memory'](v);
     return `${(v / size).toFixed(2)}${unit}/s`;
   };
   return (
@@ -130,11 +131,15 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
         <div className="brief-info">
           <div className="item">
             <span className="field">Topic名称 :</span>
-            <span className="val">{record.topicName}</span>
+            <Tooltip title={record.topicName}>
+              <span className="val">{record.topicName}</span>
+            </Tooltip>
           </div>
           <div className="item">
             <span className="field desc-field">描述 :</span>
-            <span className="val desc-val">{record.description}</span>
+            <Tooltip title={record.description || '-'}>
+              <span className="desc-val">{record.description || '-'}</span>
+            </Tooltip>
           </div>
         </div>
         <Spin spinning={loading}>
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
index 453363c6..0fa44077 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
@@ -142,6 +142,7 @@
           color: #74788d;
         }
         .desc-field {
+          flex-shrink: 0;
           width: 34px;
         }
         .val,
@@ -149,17 +150,28 @@
           color: #495057;
           letter-spacing: 0;
           font-weight: 400;
-        }
-        .val {
-          width: 105px;
           margin-left: 12px;
         }
-        .desc-val {
-          width: 809px;
-          height: 36px;
+        .val {
+          max-width: 208px;
           overflow: hidden;
-          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .desc-val {
+          height: 36px;
+          display: -webkit-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
           -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+        &:first-child {
+          margin-right: 40px;
+        }
+        &:last-child {
+          flex: 1;
         }
       }
     }