fix: 样式 & 文案细节优化

Author: GraceWalk

km-console/packages/layout-clusters-fe/src/pages/Jobs/config.tsx

@@ -19,9 +19,9 @@ export const jobType = [
   },
   process.env.BUSSINESS_VERSION
     ? {
-      label: '集群均衡',
-      value: 2,
-    }
+        label: '集群均衡',
+        value: 2,
+      }
     : undefined,
 ].filter((t) => t);
 
@@ -75,6 +75,7 @@ export const getJobsListColumns = (arg?: any) => {
       title: '任务ID',
       dataIndex: 'id',
       key: 'id',
+      width: 70,
     },
     {
       title: '任务类型',

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/display-name */
-
 import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Select, Spin, Space, Utils } from 'knowdesign';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
@@ -16,10 +14,9 @@ const clientPropertiesPlaceholder = `用于创建Kafka客户端进行信息获
 {
   "security.protocol": "SASL_PLAINTEXT",
   "sasl.mechanism": "SCRAM-SHA-256",
-  "sasl.jaas.config": 
-  "org.apache.kafka.common.security.scram.
-  ScramLoginModule required username="xxxxxx" 
-  password="xxxxxx";"
+  "sasl.jaas.config": "org.apache.kafka.common.security.
+scram.ScramLoginModule required username=\\"xxxxxx\\" pass
+word=\\"xxxxxx\\";"
 }
 `;
 

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx

@@ -93,7 +93,10 @@ const MultiClusterPage = () => {
     setVersionLoading(true);
     Utils.request(API.getClustersVersion)
       .then((versions: string[]) => {
-        setExistKafkaVersion(versions || []);
+        if (!Array.isArray(versions)) {
+          versions = [];
+        }
+        setExistKafkaVersion(versions.sort().reverse() || []);
         setVersionLoading(false);
         setCheckedKafkaVersions(versions || []);
       })
@@ -299,7 +302,9 @@ const MultiClusterPage = () => {
             <div className="test-modal-23"></div>
           </div>
         </div>
-        <Spin spinning={clusterLoading}>{renderList}</Spin>
+        <div className="multi-cluster-page-dashboard">
+          <Spin spinning={clusterLoading}>{renderList}</Spin>
+        </div>
       </div>
     );
   };

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

@@ -329,6 +329,11 @@
       }
     }
   }
+  &-dashboard {
+    & > .dcloud-spin-nested-loading > .dcloud-spin-container::after {
+      background: transparent;
+    }
+  }
 
   .multi-cluster-list {
     box-sizing: content-box;

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

@@ -201,6 +201,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           if (Number.isNaN(parsedValue)) {
             parsedValue = values.MessagesIn;
           } else {
+            // 为避免出现过小的数字影响图表展示效果，图表值统一只保留到小数点后三位
+            parsedValue = parseFloat(parsedValue.toFixed(3));
             if (maxValue < parsedValue) maxValue = parsedValue;
           }
           const valuesWithUnit = Object.entries(values).map(([key, value]) => {
@@ -287,8 +289,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           checkboxProps: (record: MetricInfo) => {
             return record.name === DEFAULT_METRIC
               ? {
-                disabled: true,
-              }
+                  disabled: true,
+                }
               : {};
           },
           submitCallback: indicatorChangeCallback,