From dd996851058bd11774d82071c5b697026e95f5c7 Mon Sep 17 00:00:00 2001
From: rivery <rivery.wang@vesoft.com>
Date: Fri, 30 Dec 2022 19:26:05 +0800
Subject: [PATCH] feat: add cluster remove, choose dir

---
 .../LeaderDistribution/index.less             | 30 ++++++-----
 .../LeaderDistribution/index.tsx              | 54 ++++++++++---------
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/pages/ServiceManage/LeaderDistribution/index.less b/src/pages/ServiceManage/LeaderDistribution/index.less
index 5bb73f06..deaf9e24 100644
--- a/src/pages/ServiceManage/LeaderDistribution/index.less
+++ b/src/pages/ServiceManage/LeaderDistribution/index.less
@@ -15,12 +15,27 @@
 				display: flex;
         flex-wrap: wrap;
 				overflow: auto;
-        >pre{
-          margin:0 5px;
+        div {
+          margin:5px 0;
+          white-space: break-spaces;
+          word-break: break-all;
         }
 			}
 		}
+	}
+  .content-overview{
+		display: flex;
+		padding: 20px 30px 20px 0;
+    justify-content: space-between;
 
+		.table-overview{
+			flex: 1;
+			margin-top: 20px;
+		}
+
+		.ant-empty-normal{
+			margin: 0;
+		}
 	}
 	.overview-header{
 		display: block;
@@ -54,15 +69,4 @@
 	.ant-empty-normal{
 		margin: 0;
 	}
-	.content-overview{
-		display: flex;
-		padding: 20px 30px 20px 0;
-		.table-overview{
-			flex: 1;
-			margin-top: 20px;
-		}
-		.ant-empty-normal{
-			margin: 0;
-		}
-	}
 }
diff --git a/src/pages/ServiceManage/LeaderDistribution/index.tsx b/src/pages/ServiceManage/LeaderDistribution/index.tsx
index 3c43b870..b75e39bf 100644
--- a/src/pages/ServiceManage/LeaderDistribution/index.tsx
+++ b/src/pages/ServiceManage/LeaderDistribution/index.tsx
@@ -29,7 +29,7 @@ const mapState = (state: IRootState) => ({
 
 interface IProps
   extends ReturnType<typeof mapState>,
-    ReturnType<typeof mapDispatch> {
+  ReturnType<typeof mapDispatch> {
   isOverview?: boolean;
   baseRouter?: string;
   cluster?: ICluster;
@@ -63,7 +63,7 @@ const LeaderDistribution: React.FC<IProps> = (props: IProps) => {
   const getStorageInfo = async () => {
     const res = await props.asyncGetHostsInfo();
     const data = res.map((item: any) => ({
-      name: item.Host+':'+item.Port,
+      name: item.Host + ':' + item.Port,
       count: item['Leader count'],
       distribution: item['Leader distribution'],
     })).sort((a, b) => a.name > b.name ? 1 : -1);
@@ -110,29 +110,31 @@ const LeaderDistribution: React.FC<IProps> = (props: IProps) => {
     }
   };
 
-  const columns = [
-    {
-      title: intl.get('common.service'),
-      dataIndex: 'name',
-    },
-    {
-      title: intl.get('service.leaderNumber'),
-      dataIndex: 'count',
-    },
-    {
-      title: intl.get('service.leaderDistribute'),
-      dataIndex: 'distribution',
-      render: distribution => (
-        <div className="distribution-table">
-          {distribution.split(',').map(each => <pre>{each.trim(' ')}</pre>)}
-        </div>
-      ),
-    },
-  ];
+  const columns = useMemo(() => (
+    [
+      {
+        title: intl.get('common.service'),
+        dataIndex: 'name',
+      },
+      {
+        title: intl.get('service.leaderNumber'),
+        dataIndex: 'count',
+      },
+      {
+        title: intl.get('service.leaderDistribute'),
+        dataIndex: 'distribution',
+        render: distribution => (
+          <div className="distribution-table">
+            {distribution.split(',').map(each => <div className="leader-item">{each.trim()}</div>)}
+          </div>
+        ),
+      },
+    ]
+  ), []);
 
   const options = useMemo(
     () =>
-      isOverview ? { width: 350, height: 226 } : { width: 500, height: 286 },
+      isOverview ? { width: 320, height: 226 } : { width: 500, height: 286 },
     [isOverview],
   );
 
@@ -165,10 +167,10 @@ const LeaderDistribution: React.FC<IProps> = (props: IProps) => {
           })}
         >
           {data.length > 0 ? (
-            <PieChart options={options} renderChart={renderChart} />
-          ) : (
-            <Empty description={intl.get('common.noData')} />
-          )}
+              <PieChart options={options} renderChart={renderChart} />
+            ) : (
+              <Empty description={intl.get('common.noData')} />
+            )}
           <Table
             className={classnames('leader-table', {
               'table-overview': isOverview,