fix: Topic 列表趋势图优化 & 相关文案调整

km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx

@@ -1,19 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import {
-  Alert,
-  Button,
-  Checkbox,
-  Divider,
-  Drawer,
-  Form,
-  Input,
-  InputNumber,
-  Modal,
-  notification,
-  Select,
-  Utils,
-} from 'knowdesign';
+import { Alert, Button, Checkbox, Divider, Drawer, Form, Input, InputNumber, Modal, notification, Select, Utils } from 'knowdesign';
 import { PlusOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
 import Api from '@src/api/index';
 
@@ -120,9 +107,9 @@ export default (props: any) => {
             res =
               item.name === 'cleanup.policy'
                 ? item.defaultValue
-                  .replace(/\[|\]|\s+/g, '')
-                  .split(',')
-                  .filter((_) => _)
+                    .replace(/\[|\]|\s+/g, '')
+                    .split(',')
+                    .filter((_) => _)
                 : item.defaultValue;
           } catch (e) {
             res = [];
@@ -317,7 +304,7 @@ export default (props: any) => {
               }
             />
             <div className="create-topic-flex-layout">
-              <Form.Item name={['properties', 'max.message.bytes']} label="max message size">
+              <Form.Item name={['properties', 'max.message.bytes']} label="Max message size">
                 <InputNumber
                   min={0}
                   style={{ width: '100%' }}
@@ -329,7 +316,11 @@ export default (props: any) => {
               {defaultConfigs
                 .filter((dc) => !customDefaultFields.includes(dc.name))
                 .map((configItem, i) => (
-                  <Form.Item key={i} name={['properties', configItem.name]} label={configItem.name}>
+                  <Form.Item
+                    key={i}
+                    name={['properties', configItem.name]}
+                    label={configItem.name.slice(0, 1).toUpperCase() + configItem.name.slice(1)}
+                  >
                     <Input />
                   </Form.Item>
                 ))}

km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less

@@ -19,6 +19,7 @@
       align-items: center;
       > span {
         margin-left: 4px;
+        color: #74788d;
       }
     }
   }
@@ -36,7 +37,7 @@
       width: 120px;
       margin-right: 8px;
     }
-    .batch-btn{
+    .batch-btn {
       margin-right: 8px;
     }
     .add-btn {
@@ -51,44 +52,44 @@
   }
 }
 .metric-data-wrap {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
   width: 100%;
   .cur-val {
-    width: 34px;
-    margin-right: 11px;
+    display: block;
+    text-align: right;
   }
-  .dcloud-spin-nested-loading{
+  .dcloud-spin-nested-loading {
     flex: 1;
   }
 }
 .del-topic-modal,
 .cluster-topic-add {
   .tip-info {
-    height: 27px;
-    line-height: 27px;
+    display: flex;
     color: #592d00;
-    padding: 0 14px;
+    padding: 6px 14px;
     font-size: 13px;
     background: #fffae0;
     border-radius: 4px;
     .anticon {
       color: #ffc300;
       margin-right: 4px;
+      margin-top: 3px;
     }
     .test-right-away {
       color: #556ee6;
       cursor: pointer;
     }
-    .dcloud-alert-content{
+    .dcloud-alert-content {
       flex: none;
     }
   }
 }
 .cluster-topic-add {
-  .data-save-time-label{
-    &>.dcloud-form-item-control{
-      &>.dcloud-form-item-explain{
+  .data-save-time-label {
+    & > .dcloud-form-item-control {
+      & > .dcloud-form-item-explain {
         display: none;
       }
     }
@@ -124,11 +125,11 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      color: #556EE6;
+      color: #556ee6;
       .txt {
         width: 26px;
         margin-right: 4px;
-        color: #556EE6;
+        color: #556ee6;
         font-family: @font-family;
       }
       .anticon {
@@ -226,12 +227,11 @@
   }
 }
 
-
-.create-topic-flex-layout{
+.create-topic-flex-layout {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  .dcloud-form-item{
+  .dcloud-form-item {
     width: 370px;
   }
-}
+}

km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx

@@ -91,21 +91,9 @@ const AutoPage = (props: any) => {
       if (metricName === 'HealthScore') {
         return Math.round(orgVal);
       } else if (metricName === 'LogSize') {
-        return Number(Utils.formatAssignSize(orgVal, 'MB')).toString().length > 3 ? (
-          <Tooltip title={Utils.formatAssignSize(orgVal, 'MB')}>
-            {Number(Utils.formatAssignSize(orgVal, 'MB')).toString().slice(0, 3) + '...'}
-          </Tooltip>
-        ) : (
-          Number(Utils.formatAssignSize(orgVal, 'MB'))
-        );
+        return Number(Utils.formatAssignSize(orgVal, 'MB'));
       } else {
-        return Number(Utils.formatAssignSize(orgVal, 'KB')).toString().length > 3 ? (
-          <Tooltip title={Utils.formatAssignSize(orgVal, 'KB')}>
-            {Number(Utils.formatAssignSize(orgVal, 'KB')).toString().slice(0, 3) + '...'}
-          </Tooltip>
-        ) : (
-          Number(Utils.formatAssignSize(orgVal, 'KB'))
-        );
+        return Number(Utils.formatAssignSize(orgVal, 'KB'));
         // return Utils.formatAssignSize(orgVal, 'KB');
       }
     }
@@ -116,15 +104,15 @@ const AutoPage = (props: any) => {
     const points = record.metricLines.find((item: any) => item.metricName === metricName)?.metricPoints || [];
     return (
       <div className="metric-data-wrap">
-        <span className="cur-val">{calcCurValue(record, metricName)}</span>
         <SmallChart
           width={'100%'}
-          height={40}
+          height={30}
           chartData={{
             name: record.metricName,
             data: points.map((item: any) => ({ time: item.timeStamp, value: item.value })),
           }}
         />
+        <span className="cur-val">{calcCurValue(record, metricName)}</span>
       </div>
     );
   };
@@ -268,12 +256,16 @@ const AutoPage = (props: any) => {
 
   const menu = (
     <Menu>
-      <Menu.Item>
-        <a onClick={() => setChangeVisible(true)}>扩缩副本</a>
-      </Menu.Item>
-      <Menu.Item>
-        <a onClick={() => setMoveVisible(true)}>迁移副本</a>
-      </Menu.Item>
+      {global.hasPermission(ClustersPermissionMap.TOPIC_CHANGE_REPLICA) && (
+        <Menu.Item>
+          <a onClick={() => setChangeVisible(true)}>扩缩副本</a>
+        </Menu.Item>
+      )}
+      {global.hasPermission(ClustersPermissionMap.TOPIC_MOVE_REPLICA) && (
+        <Menu.Item>
+          <a onClick={() => setMoveVisible(true)}>迁移副本</a>
+        </Menu.Item>
+      )}
     </Menu>
   );
 
@@ -345,11 +337,14 @@ const AutoPage = (props: any) => {
                 setSearchKeywordsInput(e.target.value);
               }}
             />
-            <Dropdown overlay={menu} trigger={['click']}>
-              <Button className="batch-btn" icon={<DownOutlined />} type="primary" ghost>
-                批量操作
-              </Button>
-            </Dropdown>
+            {(global.hasPermission(ClustersPermissionMap.TOPIC_CHANGE_REPLICA) ||
+              global.hasPermission(ClustersPermissionMap.TOPIC_MOVE_REPLICA)) && (
+              <Dropdown overlay={menu} trigger={['click']}>
+                <Button className="batch-btn" icon={<DownOutlined />} type="primary" ghost>
+                  批量变更
+                </Button>
+              </Dropdown>
+            )}
             {global.hasPermission && global.hasPermission(ClustersPermissionMap.TOPIC_ADD) ? (
               <Create onConfirm={getTopicsList}></Create>
             ) : (