Merge pull request #633 from didi/master

合并主分支

CONTRIBUTING.md

@@ -13,7 +13,7 @@ Before sending pull request to this project, please read and follow guidelines b
 
 Add device mode, API version, related log, screenshots and other related information in your pull request if possible.
 
-NOTE: We assume all your contribution can be licensed under the [Apache License 2.0](LICENSE).
+NOTE: We assume all your contribution can be licensed under the [AGPL-3.0](LICENSE).
 
 ## Issues
 

Releases_Notes.md

@@ -1,5 +1,32 @@
 
 
+## v3.0.0
+
+**Bug修复**
+- 修复 Group 指标防重复采集不生效问题
+- 修复自动创建 ES 索引模版失败问题
+- 修复 Group+Topic 列表中存在已删除Topic的问题
+- 修复使用 MySQL-8 ，因兼容问题， start_time 信息为 NULL 时，会导致创建任务失败的问题
+- 修复 Group 信息表更新时，出现死锁的问题
+- 修复图表补点逻辑与图表时间范围不适配的问题
+
+
+**体验优化**
+- 按照资源类别，拆分健康巡检任务
+- 优化 Group 详情页的指标为实时获取
+- 图表拖拽排序支持用户级存储
+- 多集群列表 ZK 信息展示兼容无 ZK 情况
+- Topic 详情消息预览支持复制功能
+- 部分内容大数字支持千位分割符展示
+
+
+**新增**
+- 集群信息中，新增 Zookeeper 客户端配置字段
+- 集群信息中，新增 Kafka 集群运行模式字段
+- 新增 docker-compose 的部署方式
+
+
+
 ## v3.0.0-beta.3
 
 **文档**

docs/install_guide/版本升级手册.md

@@ -1,9 +1,17 @@
 ## 6.2、版本升级手册
 
-注意：如果想升级至具体版本，需要将你当前版本至你期望使用版本的变更统统执行一遍，然后才能正常使用。
+注意：
+- 如果想升级至具体版本，需要将你当前版本至你期望使用版本的变更统统执行一遍，然后才能正常使用。
+- 如果中间某个版本没有升级信息，则表示该版本直接替换安装包即可从前一个版本升级至当前版本。
+
 
 ### 6.2.0、升级至 `master` 版本
 
+暂无
+
+
+### 6.2.1、升级至 `v3.0.0` 版本
+
 **SQL 变更**
 
 ```sql
@@ -11,7 +19,10 @@ ALTER TABLE `ks_km_physical_cluster`
 ADD COLUMN `zk_properties` TEXT NULL COMMENT 'ZK配置' AFTER `jmx_properties`;
 ```
 
-### 6.2.1、升级至 `v3.0.0-beta.2`版本
+---
+
+
+### 6.2.2、升级至 `v3.0.0-beta.2`版本
 
 **配置变更**
 
@@ -82,7 +93,7 @@ ALTER TABLE `logi_security_oplog`
 
 ---
 
-### 6.2.2、升级至 `v3.0.0-beta.1`版本
+### 6.2.3、升级至 `v3.0.0-beta.1`版本
 
 **SQL 变更**
 
@@ -101,7 +112,7 @@ ALTER COLUMN `operation_methods` set default '';
 
 ---
 
-### 6.2.3、`2.x`版本 升级至 `v3.0.0-beta.0`版本
+### 6.2.4、`2.x`版本 升级至 `v3.0.0-beta.0`版本
 
 **升级步骤：**
 

km-biz/src/main/java/com/xiaojukeji/know/streaming/km/biz/group/impl/GroupManagerImpl.java

@@ -272,15 +272,11 @@ public class GroupManagerImpl implements GroupManager {
 
 
         // 获取Group指标信息
-        Result<List<GroupMetrics>> groupMetricsResult = groupMetricService.listPartitionLatestMetricsFromES(
+        Result<List<GroupMetrics>> groupMetricsResult = groupMetricService.collectGroupMetricsFromKafka(clusterPhyId, groupName, latestMetricNames == null ? Arrays.asList() : latestMetricNames);
-                clusterPhyId,
+
-                groupName,
-                topicName,
-                latestMetricNames == null? Arrays.asList(): latestMetricNames
-        );
 
         // 转换Group指标
-        List<GroupMetrics> esGroupMetricsList = groupMetricsResult.hasData()? groupMetricsResult.getData(): new ArrayList<>();
+        List<GroupMetrics> esGroupMetricsList = groupMetricsResult.hasData() ? groupMetricsResult.getData().stream().filter(elem -> topicName.equals(elem.getTopic())).collect(Collectors.toList()) : new ArrayList<>();
         Map<Integer, GroupMetrics> esMetricsMap = new HashMap<>();
         for (GroupMetrics groupMetrics: esGroupMetricsList) {
             esMetricsMap.put(groupMetrics.getPartitionId(), groupMetrics);

km-common/src/main/java/com/xiaojukeji/know/streaming/km/common/bean/dto/metrices/MetricDetailDTO.java

@@ -7,6 +7,9 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import javax.validation.constraints.NotNull;
+
+
 /**
  * @author didi
  */
@@ -22,6 +25,7 @@ public class MetricDetailDTO extends BaseDTO {
     @ApiModelProperty("指标是否显示")
     private Boolean set;
 
+    @NotNull(message = "MetricDetailDTO的rank字段应不为空")
     @ApiModelProperty("指标优先级")
     private Integer rank;
 

km-common/src/main/java/com/xiaojukeji/know/streaming/km/common/bean/dto/metrices/UserMetricConfigDTO.java

@@ -7,6 +7,7 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import javax.validation.Valid;
 import java.util.List;
 import java.util.Map;
 
@@ -19,6 +20,7 @@ public class UserMetricConfigDTO extends BaseDTO {
     @ApiModelProperty("指标展示设置项，key：指标名；value：是否展现(true展现/false不展现)")
     private Map<String, Boolean> metricsSet;
 
+    @Valid
     @ApiModelProperty("指标自定义属性列表")
     private List<MetricDetailDTO> metricDetailDTOList;
 }

km-console/packages/layout-clusters-fe/package-lock.json

@@ -1387,6 +1387,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@knowdesign/icons": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@knowdesign/icons/-/icons-1.0.1.tgz",
+      "integrity": "sha512-EI3s25BJt+Slv7/t6B3K3zv7I6TKkk2Wf1y68zuxK80MMkWf8lqqUtyAZbFDoPUfXAjw6vHktMBH44gbMHMRFA==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons": "^4.7.0",
+        "react": "16.12.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7463,9 +7473,9 @@
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
     },
     "is-lite": {
-      "version": "0.8.2",
+      "version": "0.9.2",
-      "resolved": "https://registry.npmmirror.com/is-lite/-/is-lite-0.8.2.tgz",
+      "resolved": "https://registry.npmmirror.com/is-lite/-/is-lite-0.9.2.tgz",
-      "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
+      "integrity": "sha512-qZuxbaEiKLOKhX4sbHLfhFN9iA3YciuZLb37/DfXCpWnz8p7qNL2lwkpxYMXfjlS8eEEjpULPZxAUI8N6FYvYQ=="
     },
     "is-negative-zero": {
       "version": "2.0.2",
@@ -7769,9 +7779,11 @@
         "rc-dialog": "~8.6.0",
         "rc-drawer": "^4.4.3",
         "rc-dropdown": "~3.2.0",
+        "rc-field-form": "~1.21.0",
         "rc-image": "~5.2.5",
         "rc-input-number": "~7.3.6",
         "rc-mentions": "~1.6.1",
+        "rc-menu": "~9.0.12",
         "rc-motion": "^2.4.4",
         "rc-notification": "~4.5.7",
         "rc-pagination": "~3.1.9",
@@ -7783,9 +7795,11 @@
         "rc-slider": "~9.7.4",
         "rc-steps": "~4.1.0",
         "rc-switch": "~3.2.0",
+        "rc-table": "~7.19.0",
         "rc-tabs": "~11.10.0",
         "rc-textarea": "~0.3.0",
         "rc-tooltip": "~5.1.1",
+        "rc-tree": "~5.3.0",
         "rc-tree-select": "~4.8.0",
         "rc-trigger": "^5.2.10",
         "rc-upload": "~4.3.0",
@@ -7823,81 +7837,10 @@
         "scroll-into-view-if-needed": "^2.2.25"
       },
       "dependencies": {
-        "async-validator": {
-          "version": "4.2.5",
-          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
-          "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-        },
-        "intl-format-cache": {
-          "version": "2.2.9",
-          "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz",
-          "integrity": "sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ=="
-        },
-        "intl-messageformat": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
-          "integrity": "sha512-I+tSvHnXqJYjDfNmY95tpFMj30yoakC6OXAo+wu/wTMy6tA/4Fd4mvV7Uzs4cqK/Ap29sHhwjcY+78a8eifcXw==",
-          "requires": {
-            "intl-messageformat-parser": "1.4.0"
-          }
-        },
-        "intl-messageformat-parser": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
-          "integrity": "sha512-/XkqFHKezO6UcF4Av2/Lzfrez18R0jyw7kRFhSeB/YRakdrgSc9QfFZUwNJI9swMwMoNPygK1ArC5wdFSjPw+A=="
-        },
-        "rc-field-form": {
-          "version": "1.27.1",
-          "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.27.1.tgz",
-          "integrity": "sha512-RShegnwFu6TH8tl2olCxn+B4Wyh5EiQH8c/7wucbkLNyue05YiH5gomUAg1vbZjp71yFKwegClctsEG5CNBWAA==",
-          "requires": {
-            "@babel/runtime": "^7.18.0",
-            "async-validator": "^4.1.0",
-            "rc-util": "^5.8.0"
-          }
-        },
-        "rc-menu": {
-          "version": "9.6.4",
-          "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.6.4.tgz",
-          "integrity": "sha512-6DiNAjxjVIPLZXHffXxxcyE15d4isRL7iQ1ru4MqYDH2Cqc5bW96wZOdMydFtGLyDdnmEQ9jVvdCE9yliGvzkw==",
-          "requires": {
-            "@babel/runtime": "^7.10.1",
-            "classnames": "2.x",
-            "rc-motion": "^2.4.3",
-            "rc-overflow": "^1.2.0",
-            "rc-trigger": "^5.1.2",
-            "rc-util": "^5.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        },
-        "rc-table": {
-          "version": "7.25.3",
-          "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.25.3.tgz",
-          "integrity": "sha512-McsLJ2rg8EEpRBRYN4Pf9gT7ZNYnjvF9zrBpUBBbUX/fxk+eGi5ff1iPIhMyiHsH71/BmTUzX9nc9XqupD0nMg==",
-          "requires": {
-            "@babel/runtime": "^7.10.1",
-            "classnames": "^2.2.5",
-            "rc-resize-observer": "^1.1.0",
-            "rc-util": "^5.22.5",
-            "shallowequal": "^1.1.0"
-          }
-        },
-        "rc-tree": {
-          "version": "5.6.9",
-          "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.6.9.tgz",
-          "integrity": "sha512-si8aGuWQ2/sh2Ibk+WdUdDeAxoviT/+kDY+NLtJ+RhqfySqPFqWM5uHTwgFRrWUvKCqEeE/PjCYuuhHrK7Y7+A==",
-          "requires": {
-            "@babel/runtime": "^7.10.1",
-            "classnames": "2.x",
-            "rc-motion": "^2.0.1",
-            "rc-util": "^5.16.1",
-            "rc-virtual-list": "^3.4.8"
-          }
-        },
         "rc-util": {
-          "version": "5.24.2",
+          "version": "5.24.4",
-          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
+          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.4.tgz",
-          "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==",
+          "integrity": "sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==",
           "requires": {
             "@babel/runtime": "^7.18.3",
             "react-is": "^16.12.0",
@@ -10289,6 +10232,33 @@
         "rc-editor-core": "~0.8.3"
       }
     },
+    "rc-field-form": {
+      "version": "1.21.2",
+      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.21.2.tgz",
+      "integrity": "sha512-LR/bURt/Tf5g39mb0wtMtQuWn42d/7kEzpzlC5fNC7yaRVmLTtlPP4sBBlaViETM9uZQKLoaB0Pt9Mubhm9gow==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "async-validator": "^4.0.2",
+        "rc-util": "^5.8.0"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "4.2.5",
+          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+          "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+        },
+        "rc-util": {
+          "version": "5.24.4",
+          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.4.tgz",
+          "integrity": "sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==",
+          "requires": {
+            "@babel/runtime": "^7.18.3",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-form": {
       "version": "2.4.12",
       "resolved": "https://registry.npmmirror.com/rc-form/-/rc-form-2.4.12.tgz",
@@ -10389,6 +10359,32 @@
         }
       }
     },
+    "rc-menu": {
+      "version": "9.0.14",
+      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.0.14.tgz",
+      "integrity": "sha512-CIox5mZeLDAi32SlHrV7UeSjv7tmJJhwRyxQtZCKt351w3q59XlL4WMFOmtT9gwIfP9h0XoxdBZUMe/xzkp78A==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.2.0",
+        "rc-trigger": "^5.1.2",
+        "rc-util": "^5.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.24.4",
+          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.4.tgz",
+          "integrity": "sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==",
+          "requires": {
+            "@babel/runtime": "^7.18.3",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-motion": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.6.2.tgz",
@@ -10641,6 +10637,30 @@
         }
       }
     },
+    "rc-table": {
+      "version": "7.19.2",
+      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.19.2.tgz",
+      "integrity": "sha512-NdpnoM50MK02H5/hGOsObfxCvGFUG5cHB9turE5BKJ81T5Ycbq193w5tLhnpILXe//Oanzr47MdMxkUnVGP+qg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.14.0",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.24.4",
+          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.4.tgz",
+          "integrity": "sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==",
+          "requires": {
+            "@babel/runtime": "^7.18.3",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-tabs": {
       "version": "11.10.8",
       "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-11.10.8.tgz",
@@ -10713,6 +10733,30 @@
         "rc-trigger": "^5.0.0"
       }
     },
+    "rc-tree": {
+      "version": "5.3.8",
+      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.3.8.tgz",
+      "integrity": "sha512-YuobEryPymqPmHFUOvsoOrYdm24psaj0CrGEUuDUQUeG/nNcTGw6FA2YmF4NsEaNBvNSJUSzwfZnFHrKa/xv0A==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.4.1"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.24.4",
+          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.4.tgz",
+          "integrity": "sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==",
+          "requires": {
+            "@babel/runtime": "^7.18.3",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-tree-select": {
       "version": "4.8.0",
       "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-4.8.0.tgz",
@@ -11002,6 +11046,13 @@
         "prop-types": "^15.8.1",
         "react-proptype-conditional-require": "^1.0.4",
         "tree-changes": "^0.9.1"
+      },
+      "dependencies": {
+        "is-lite": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmmirror.com/is-lite/-/is-lite-0.8.2.tgz",
+          "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
+        }
       }
     },
     "react-freeze": {
@@ -11111,19 +11162,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-joyride": {
-      "version": "2.5.2",
+      "version": "2.5.3",
-      "resolved": "https://registry.npmmirror.com/react-joyride/-/react-joyride-2.5.2.tgz",
+      "resolved": "https://registry.npmmirror.com/react-joyride/-/react-joyride-2.5.3.tgz",
-      "integrity": "sha512-wsSYX3PhVrdzdd0/fv5f6ySGvb7QyAzleQv/x9IH+x+SXO6b5MUJUkefS+189bgLPkuHMwtSRcPE/oMupfmCVQ==",
+      "integrity": "sha512-DKKvb/JAAsHm0x/RWO3WI6NOtTMHDso5v8MTauxTSz2dFs7Tu1rWg1BDBWmEMj6pUCvem7hblFbCiDAcvhs8tQ==",
       "requires": {
         "deepmerge": "^4.2.2",
         "exenv": "^1.2.2",
-        "is-lite": "^0.8.2",
+        "is-lite": "^0.9.2",
         "prop-types": "^15.8.1",
         "react-floater": "^0.7.6",
         "react-is": "^16.13.1",
         "scroll": "^3.0.1",
         "scrollparent": "^2.0.1",
-        "tree-changes": "^0.9.1"
+        "tree-changes": "^0.9.2"
       }
     },
     "react-lifecycles-compat": {
@@ -13131,12 +13182,19 @@
       "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
     },
     "tree-changes": {
-      "version": "0.9.1",
+      "version": "0.9.3",
-      "resolved": "https://registry.npmmirror.com/tree-changes/-/tree-changes-0.9.1.tgz",
+      "resolved": "https://registry.npmmirror.com/tree-changes/-/tree-changes-0.9.3.tgz",
-      "integrity": "sha512-Un6R1T6eUStAVbN4G+2djuXEk271mDY78ptxZUUo+TVcwvHZeUgk+pwXZjOZLAJ9n0+p47KUijeuNJSmpuG6Dw==",
+      "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
       "requires": {
         "@gilbarbara/deep-equal": "^0.1.1",
         "is-lite": "^0.8.2"
+      },
+      "dependencies": {
+        "is-lite": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmmirror.com/is-lite/-/is-lite-0.8.2.tgz",
+          "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
+        }
       }
     },
     "ts-loader": {

km-console/packages/layout-clusters-fe/package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@ant-design/compatible": "^1.0.8",
     "@ant-design/icons": "^4.6.2",
+    "@knowdesign/icons": "^1.0.1",
     "@types/react": "^17.0.39",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^17.0.11",
@@ -57,10 +58,9 @@
     "react-cron-antd": "^1.1.2",
     "react-dom": "16.12.0",
     "react-intl": "^3.2.1",
-    "react-joyride": "^2.5.0",
+    "react-joyride": "^2.5.3",
     "single-spa": "5.9.3",
     "single-spa-react": "2.14.0",
-    "tree-changes": "0.9.1",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "devDependencies": {

km-console/packages/layout-clusters-fe/src/app.tsx

@@ -3,7 +3,8 @@ import '@babel/polyfill';
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter, Switch, Route, useLocation, useHistory } from 'react-router-dom';
 import { get as lodashGet } from 'lodash';
-import { DProLayout, AppContainer, IconFont, Menu, Utils, Page403, Page404, Page500, Modal } from 'knowdesign';
+import { DProLayout, AppContainer, Menu, Utils, Page403, Page404, Page500, Modal } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import dantdZhCN from 'knowdesign/es/locale/zh_CN';
 import dantdEnUS from 'knowdesign/es/locale/en_US';
 import { DotChartOutlined } from '@ant-design/icons';

km-console/packages/layout-clusters-fe/src/components/CardBar/LoadRebalanceCardBar.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import CardBar from './index';
-import { IconFont, Tag, Utils, Tooltip, Popover, AppContainer } from 'knowdesign';
+import { Tag, Utils, Tooltip, Popover, AppContainer } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import api from '@src/api';
 import StateChart from './StateChart';
 import ClusterNorms from '@src/pages/LoadRebalance/ClusterNorms';
@@ -138,15 +139,15 @@ const LoadRebalanceCardBar = (props: any) => {
           //           content={
           //             <div style={{ color: '#495057' }}>
           //               <div>
-          //                 <IconFont className="cutomIcon" type="icon-chaoguo" />
+          //                 <IconFont className="cutomIcon cutomIcon-red" type="icon-chaoguo" />
           //                 超过均衡区间的有: {cpu?.bigNu || 0}
           //               </div>
           //               <div style={{ margin: '6px 0' }}>
-          //                 <IconFont className="cutomIcon" type="icon-qujian" />
+          //                 <IconFont className="cutomIcon cutomIcon-green" type="icon-qujian" />
           //                 在均衡区间内的有: {cpu?.betweenNu || 0}
           //               </div>
           //               <div>
-          //                 <IconFont className="cutomIcon" type="icon-diyu" />
+          //                 <IconFont className="cutomIcon cutomIcon-red" type="icon-diyu" />
           //                 低于均衡区间的有: {cpu?.smallNu || 0}
           //               </div>
           //             </div>
@@ -202,15 +203,15 @@ const LoadRebalanceCardBar = (props: any) => {
                     content={
                       <div style={{ color: '#495057' }}>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-chaoguo" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-chaoguo" />
                           超过均衡区间的有: {disk?.bigNu || 0}
                         </div>
                         <div style={{ margin: '6px 0' }}>
-                          <IconFont className="cutomIcon" type="icon-qujian" />
+                          <IconFont className="cutomIcon cutomIcon-green" type="icon-qujian" />
                           在均衡区间内的有: {disk?.betweenNu || 0}
                         </div>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-diyu" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-diyu" />
                           低于均衡区间的有: {disk?.smallNu || 0}
                         </div>
                       </div>
@@ -267,15 +268,15 @@ const LoadRebalanceCardBar = (props: any) => {
                     content={
                       <div style={{ color: '#495057' }}>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-chaoguo" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-chaoguo" />
                           超过均衡区间的有: {bytesIn?.bigNu || 0}
                         </div>
                         <div style={{ margin: '6px 0' }}>
-                          <IconFont className="cutomIcon" type="icon-qujian" />
+                          <IconFont className="cutomIcon cutomIcon-green" type="icon-qujian" />
                           在均衡区间内的有: {bytesIn?.betweenNu || 0}
                         </div>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-diyu" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-diyu" />
                           低于均衡区间的有: {bytesIn?.smallNu || 0}
                         </div>
                       </div>
@@ -332,15 +333,15 @@ const LoadRebalanceCardBar = (props: any) => {
                     content={
                       <div style={{ color: '#495057' }}>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-chaoguo" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-chaoguo" />
                           超过均衡区间的有: {bytesOut?.bigNu || 0}
                         </div>
                         <div style={{ margin: '6px 0' }}>
-                          <IconFont className="cutomIcon" type="icon-qujian" />
+                          <IconFont className="cutomIcon cutomIcon-green" type="icon-qujian" />
                           在均衡区间内的有: {bytesOut?.betweenNu || 0}
                         </div>
                         <div>
-                          <IconFont className="cutomIcon" type="icon-diyu" />
+                          <IconFont className="cutomIcon cutomIcon-red" type="icon-diyu" />
                           低于均衡区间的有: {bytesOut?.smallNu || 0}
                         </div>
                       </div>

km-console/packages/layout-clusters-fe/src/components/CardBar/StateChart.tsx

@@ -59,7 +59,7 @@ const EchartsExample = (props: any) => {
             normal: {
               color: (params: any) => {
                 // 定义一个颜色数组colorList
-                const colorList = ['#00C0A2', '#CED4DA', '#FF7066'];
+                const colorList = ['#FF7066', '#00C0A2', '#FF7066'];
                 return colorList[params.dataIndex];
               },
             },

km-console/packages/layout-clusters-fe/src/components/CardBar/TopicDetailHealthCheck.tsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import CardBar from '@src/components/CardBar';
 import { healthDataProps } from '.';
-import { IconFont, Utils } from 'knowdesign';
+import { Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import api from '@src/api';
 import { healthScoreCondition } from './const';
 import { hashDataParse } from '@src/constants/common';

km-console/packages/layout-clusters-fe/src/components/CardBar/index.less

@@ -203,11 +203,19 @@
   background: rgba(33, 37, 41, 0.04);
 }
 
-.cutomIcon {
+.anticon.cutomIcon {
   display: inline-block;
   margin-right: 2px;
 }
 
+.anticon.cutomIcon-red {
+  color: #ff7066;
+}
+
+.anticon.cutomIcon-green {
+  color: #00c0a2;
+}
+
 .rebalance-tooltip {
   .dcloud-tooltip-inner {
     min-height: 20px;

km-console/packages/layout-clusters-fe/src/components/CardBar/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Drawer, IconFont, Select, Spin, Table } from 'knowdesign';
+import { Drawer, Select, Spin, Table } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { Utils, Progress } from 'knowdesign';
 import './index.less';
 import api from '@src/api';
@@ -110,8 +111,8 @@ const CardBar = (props: CardBarProps) => {
     const promise = record
       ? Utils.request(path)
       : Utils.request(path, {
-        params: { dimensionCode: sceneObj.code },
+          params: { dimensionCode: sceneObj.code },
-      });
+        });
     promise.then((data: any[]) => {
       setHealthCheckDetailList(data);
     });

km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less

@@ -0,0 +1,32 @@
+.content-with-copy {
+    display: flex;
+    align-items: center;
+    .content {
+      flex: 1;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+    }
+    .copy-icon {
+        width: 20px;
+        height: 20px;
+        padding-top: 2px;
+        border-radius: 50%;
+        margin-left: 4px;
+        font-size: 16px;
+        color: #adb5bc;
+        opacity: 0;
+        &:hover {
+        background: rgba(33, 37, 41, 0.04);
+        color: #74788d;
+        }
+    }
+}
+
+.dcloud-table-cell-row-hover {
+    .copy-icon {
+        opacity: 1;
+    }
+}

km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx

@@ -0,0 +1,35 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Tooltip } from 'knowdesign';
+import React, { useState } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { IconFont } from '@knowdesign/icons';
+import './index.less';
+
+const ContentWithCopy = (props: { content: string }) => {
+  const { content } = props;
+  const [visible, setVisible] = useState(false);
+  return (
+    <CopyToClipboard text={content}>
+      <div className="content-with-copy">
+        <Tooltip title={content}>
+          <span className="content">{content}</span>
+        </Tooltip>
+        {content && (
+          <Tooltip
+            title={
+              <span>
+                <CheckCircleFilled style={{ color: '#00b365' }} /> 复制成功
+              </span>
+            }
+            visible={visible}
+            onVisibleChange={() => setVisible(false)}
+          >
+            <IconFont className="copy-icon" type="icon-fuzhi" onClick={() => setVisible(true)} />
+          </Tooltip>
+        )}
+      </div>
+    </CopyToClipboard>
+  );
+};
+
+export default ContentWithCopy;

km-console/packages/layout-clusters-fe/src/components/DDSearchInput/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Input, IconFont } from 'knowdesign';
+import { Input } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import './style/index.less';
 
 interface IObjectProps {

km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx

@@ -2,9 +2,10 @@ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, use
 import { AppContainer, Drawer, Spin, Table, SingleChart, Utils, Tooltip } from 'knowdesign';
 import moment from 'moment';
 import api, { MetricType } from '@src/api';
+import { MetricDefaultChartDataType, MetricChartDataType, formatChartData } from '@src/constants/chartConfig';
 import { useParams } from 'react-router-dom';
 import { debounce } from 'lodash';
-import { MetricDefaultChartDataType, MetricChartDataType, formatChartData, getDetailChartConfig } from './config';
+import { getDetailChartConfig } from './config';
 import { UNIT_MAP } from '@src/constants/chartConfig';
 import RenderEmpty from '../RenderEmpty';
 
@@ -50,8 +51,6 @@ interface DataZoomEventProps {
 const DATA_ZOOM_DEFAULT_SCALE = 0.25;
 // 单次向服务器请求数据的范围（默认 6 小时，超过后采集频率间隔会变长），单位: ms
 const DEFAULT_REQUEST_TIME_RANGE = 6 * 60 * 60 * 1000;
-// 采样间隔，影响前端补点逻辑，单位: ms
-const DEFAULT_POINT_INTERVAL = 60 * 1000;
 // 向服务器每轮请求的数量
 const DEFAULT_REQUEST_COUNT = 6;
 // 进入详情页默认展示的时间范围
@@ -376,8 +375,6 @@ const ChartDetail = (props: ChartDetailProps) => {
       global.getMetricDefine || {},
       metricType,
       timeRange,
-      DEFAULT_POINT_INTERVAL,
-      false,
       chartInfo.current.transformUnit
     ) as MetricChartDataType[];
     // 增量填充图表数据
@@ -540,14 +537,7 @@ const ChartDetail = (props: ChartDetailProps) => {
           if (res?.length) {
             // 格式化图表需要的数据
             const formattedMetricData = (
-              formatChartData(
+              formatChartData(res, global.getMetricDefine || {}, metricType, curTimeRange) as MetricChartDataType[]
-                res,
-                global.getMetricDefine || {},
-                metricType,
-                curTimeRange,
-                DEFAULT_POINT_INTERVAL,
-                false
-              ) as MetricChartDataType[]
             )[0];
             // 填充图表数据
             let initFullTimeRange = curTimeRange;

km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx

@@ -1,150 +1,4 @@
-import { getUnit, getDataNumberUnit, getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfig';
+import { getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfig';
-import { MetricType } from '@src/api';
-import { MetricsDefine } from '@src/pages/CommonConfig';
-
-export interface MetricInfo {
-  name: string;
-  desc: string;
-  type: number;
-  set: boolean;
-  support: boolean;
-}
-
-// 接口返回图表原始数据类型
-export interface MetricDefaultChartDataType {
-  metricName: string;
-  metricLines: {
-    name: string;
-    createTime: number;
-    updateTime: number;
-    metricPoints: {
-      aggType: string;
-      timeStamp: number;
-      value: number;
-      createTime: number;
-      updateTime: number;
-    }[];
-  }[];
-}
-
-// 格式化后图表数据类型
-export interface MetricChartDataType {
-  metricName: string;
-  metricUnit: string;
-  metricLines: {
-    name: string;
-    data: (string | number)[][];
-  }[];
-  dragKey?: number;
-}
-
-// 补点
-export const supplementaryPoints = (
-  lines: MetricChartDataType['metricLines'],
-  timeRange: readonly [number, number],
-  interval: number,
-  extraCallback?: (point: [number, 0]) => any[]
-) => {
-  lines.forEach(({ data }) => {
-    // 获取未补点前线条的点的个数
-    let len = data.length;
-    // 记录当前处理到的点的下标值
-    let i = 0;
-
-    for (; i < len; i++) {
-      if (i === 0) {
-        let firstPointTimestamp = data[0][0] as number;
-        while (firstPointTimestamp - interval > timeRange[0]) {
-          const prevPointTimestamp = firstPointTimestamp - interval;
-          data.unshift(extraCallback ? extraCallback([prevPointTimestamp, 0]) : [prevPointTimestamp, 0]);
-          firstPointTimestamp = prevPointTimestamp;
-          len++;
-          i++;
-        }
-      }
-
-      if (i === len - 1) {
-        let lastPointTimestamp = data[i][0] as number;
-        while (lastPointTimestamp + interval < timeRange[1]) {
-          const nextPointTimestamp = lastPointTimestamp + interval;
-          data.push(extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]);
-          lastPointTimestamp = nextPointTimestamp;
-        }
-        break;
-      }
-
-      {
-        let timestamp = data[i][0] as number;
-        while (timestamp + interval < data[i + 1][0]) {
-          const nextPointTimestamp = timestamp + interval;
-          data.splice(i + 1, 0, extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]);
-          timestamp = nextPointTimestamp;
-          len++;
-          i++;
-        }
-      }
-    }
-  });
-};
-
-// 格式化图表数据
-export const formatChartData = (
-  metricData: MetricDefaultChartDataType[],
-  getMetricDefine: (type: MetricType, metric: string) => MetricsDefine[keyof MetricsDefine],
-  metricType: MetricType,
-  timeRange: readonly [number, number],
-  supplementaryInterval: number,
-  needDrag = false,
-  transformUnit: [string, number] = undefined
-): MetricChartDataType[] => {
-  return metricData.map(({ metricName, metricLines }) => {
-    const curMetricInfo = (getMetricDefine && getMetricDefine(metricType, metricName)) || null;
-    const isByteUnit = curMetricInfo?.unit?.toLowerCase().includes('byte');
-    let maxValue = -1;
-
-    const PointsMapMethod = ({ timeStamp, value }: { timeStamp: number; value: string | number }) => {
-      let parsedValue: string | number = Number(value);
-
-      if (Number.isNaN(parsedValue)) {
-        parsedValue = value;
-      } else {
-        // 为避免出现过小的数字影响图表展示效果，图表值统一只保留到小数点后三位
-        parsedValue = parseFloat(parsedValue.toFixed(3));
-        if (maxValue < parsedValue) maxValue = parsedValue;
-      }
-
-      return [timeStamp, parsedValue];
-    };
-
-    const chartData = Object.assign(
-      {
-        metricName,
-        metricUnit: curMetricInfo?.unit || '',
-        metricLines: metricLines
-          .sort((a, b) => Number(a.name < b.name) - 0.5)
-          .map(({ name, metricPoints }) => ({
-            name,
-            data: metricPoints.map(PointsMapMethod),
-          })),
-      },
-      needDrag ? { dragKey: 999 } : {}
-    );
-
-    chartData.metricLines.forEach(({ data }) => data.sort((a, b) => (a[0] as number) - (b[0] as number)));
-    supplementaryPoints(chartData.metricLines, timeRange, supplementaryInterval);
-
-    // 将所有图表点的值按单位进行转换
-    if (maxValue > 0) {
-      const [unitName, unitSize]: [string, number] = transformUnit || isByteUnit ? getUnit(maxValue) : getDataNumberUnit(maxValue);
-      chartData.metricUnit = isByteUnit
-        ? chartData.metricUnit.toLowerCase().replace('byte', unitName)
-        : `${unitName}${chartData.metricUnit}`;
-      chartData.metricLines.forEach(({ data }) => data.forEach((point: any) => (point[1] /= unitSize)));
-    }
-
-    return chartData;
-  });
-};
 
 const seriesCallback = (lines: { name: string; data: [number, string | number][] }[]) => {
   const len = CHART_COLOR_LIST.length;

km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx

@@ -1,14 +1,21 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { arrayMoveImmutable } from 'array-move';
-import { Utils, Empty, IconFont, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesign';
+import { Utils, Empty, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import api, { MetricType } from '@src/api';
+import {
+  MetricInfo,
+  MetricDefaultChartDataType,
+  MetricChartDataType,
+  formatChartData,
+  resolveMetricsRank,
+} from '@src/constants/chartConfig';
 import SingleChartHeader, { KsHeaderOptions } from '../SingleChartHeader';
 import DragGroup from '../DragGroup';
 import ChartDetail from './ChartDetail';
-import { MetricInfo, MetricDefaultChartDataType, MetricChartDataType, formatChartData, getChartConfig } from './config';
+import { getChartConfig } from './config';
 import './index.less';
-import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
 
 interface IcustomScope {
   label: string;
@@ -39,8 +46,8 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
   const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
   const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
   const [gridNum, setGridNum] = useState<number>(12); // 图表列布局
+  const metricRankList = useRef<string[]>([]);
   const chartDetailRef = useRef(null);
-  const chartDragOrder = useRef([]);
   const curFetchingTimestamp = useRef(0);
 
   // 获取节点范围列表
@@ -60,23 +67,33 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
     setScopeList(list);
   };
 
+  // 更新 rank
+  const updateRank = (metricList: MetricInfo[]) => {
+    const { list, listInfo, shouldUpdate } = resolveMetricsRank(metricList);
+    metricRankList.current = list;
+    if (shouldUpdate) {
+      setMetricList(listInfo);
+    }
+  };
+
   // 获取指标列表
   const getMetricList = () => {
     Utils.request(api.getDashboardMetricList(clusterId, dashboardType)).then((res: MetricInfo[] | null) => {
       if (!res) return;
-      const showMetrics = res.filter((metric) => metric.support);
+      const supportMetrics = res.filter((metric) => metric.support);
-      const selectedMetrics = showMetrics.filter((metric) => metric.set).map((metric) => metric.name);
+      const selectedMetrics = supportMetrics.filter((metric) => metric.set).map((metric) => metric.name);
-      setMetricsList(showMetrics);
+      updateRank([...supportMetrics]);
+      setMetricsList(supportMetrics);
       setSelectedMetricNames(selectedMetrics);
     });
   };
 
   // 更新指标
-  const setMetricList = (metricsSet: { [name: string]: boolean }) => {
+  const setMetricList = (metricDetailDTOList: { metric: string; rank: number; set: boolean }[]) => {
     return Utils.request(api.getDashboardMetricList(clusterId, dashboardType), {
       method: 'POST',
       data: {
-        metricsSet,
+        metricDetailDTOList,
       },
     });
   };
@@ -84,10 +101,11 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
   // 根据筛选项获取图表信息
   const getMetricChartData = () => {
     !curHeaderOptions.isAutoReload && setLoading(true);
-    const [startTime, endTime] = curHeaderOptions.rangeTime;
 
+    const [startTime, endTime] = curHeaderOptions.rangeTime;
     const curTimestamp = Date.now();
     curFetchingTimestamp.current = curTimestamp;
+
     Utils.post(api.getDashboardMetricChartData(clusterId, dashboardType), {
       startTime,
       endTime,
@@ -108,36 +126,20 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
           setMetricChartData([]);
         } else {
           // 格式化图表需要的数据
-          const supplementaryInterval = (endTime - startTime > MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL ? 10 : 1) * 60 * 1000;
           const formattedMetricData = formatChartData(
             res,
             global.getMetricDefine || {},
             dashboardType,
-            curHeaderOptions.rangeTime,
+            curHeaderOptions.rangeTime
-            supplementaryInterval,
-            true
           ) as MetricChartDataType[];
-          // 处理图表的拖拽顺序
+          // 指标排序
-          if (chartDragOrder.current && chartDragOrder.current.length) {
+          formattedMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
-            // 根据当前拖拽顺序排列图表数据
-            formattedMetricData.forEach((metric) => {
-              const i = chartDragOrder.current.indexOf(metric.metricName);
-              metric.dragKey = i === -1 ? 999 : i;
-            });
-            formattedMetricData.sort((a, b) => a.dragKey - b.dragKey);
-          }
-          // 更新当前拖拽顺序（处理新增或减少图表的情况）
-          chartDragOrder.current = formattedMetricData.map((data) => data.metricName);
 
           setMetricChartData(formattedMetricData);
         }
         setLoading(false);
       },
-      () => {
+      () => curFetchingTimestamp.current === curTimestamp && setLoading(false)
-        if (curFetchingTimestamp.current === curTimestamp) {
-          setLoading(false);
-        }
-      }
     );
   };
 
@@ -163,11 +165,19 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
 
   // 指标选中项更新回调
   const indicatorChangeCallback = (newMetricNames: (string | number)[]) => {
-    const updateMetrics: { [name: string]: boolean } = {};
+    const updateMetrics: { metric: string; set: boolean; rank: number }[] = [];
     // 需要选中的指标
-    newMetricNames.forEach((name) => !selectedMetricNames.includes(name) && (updateMetrics[name] = true));
+    newMetricNames.forEach(
+      (name) =>
+        !selectedMetricNames.includes(name) &&
+        updateMetrics.push({ metric: name as string, set: true, rank: metricsList.find(({ name: metric }) => metric === name)?.rank })
+    );
     // 取消选中的指标
-    selectedMetricNames.forEach((name) => !newMetricNames.includes(name) && (updateMetrics[name] = false));
+    selectedMetricNames.forEach(
+      (name) =>
+        !newMetricNames.includes(name) &&
+        updateMetrics.push({ metric: name as string, set: false, rank: metricsList.find(({ name: metric }) => metric === name)?.rank })
+    );
 
     const requestPromise = Object.keys(updateMetrics).length ? setMetricList(updateMetrics) : Promise.resolve();
     requestPromise.then(
@@ -186,7 +196,11 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
   // 拖拽结束回调，更新图表顺序，并触发图表的 onDrag 事件（ 设置为 false ），允许同步展示图表的 tooltip
   const dragEnd = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
     busInstance.emit('onDrag', false);
-    chartDragOrder.current = arrayMoveImmutable(chartDragOrder.current, oldIndex, newIndex);
+    const originFrom = metricRankList.current.indexOf(metricChartData[oldIndex].metricName);
+    const originTarget = metricRankList.current.indexOf(metricChartData[newIndex].metricName);
+    const newList = arrayMoveImmutable(metricRankList.current, originFrom, originTarget);
+    metricRankList.current = newList;
+    setMetricList(newList.map((metric, rank) => ({ metric, rank, set: metricsList.find(({ name }) => metric === name)?.set || false })));
     setMetricChartData(arrayMoveImmutable(metricChartData, oldIndex, newIndex));
   };
 

km-console/packages/layout-clusters-fe/src/components/DragGroup/index.tsx

@@ -1,4 +1,5 @@
-import { Col, IconFont, Row } from 'knowdesign';
+import { Col, Row } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import React from 'react';
 import { SortableContainer, SortableContainerProps, SortableHandle, SortableElement, SortableElementProps } from 'react-sortable-hoc';
 import './index.less';

km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Drawer, Button, Space, Divider, AppContainer, ProTable, IconFont } from 'knowdesign';
+import { Drawer, Button, Space, Divider, AppContainer, ProTable } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { IindicatorSelectModule } from './index';
 import './style/indicator-drawer.less';
 import { useLocation } from 'react-router-dom';

km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Radio, Input, Popover, Space, Checkbox, Row, Col, Button, IconFont } from 'knowdesign';
+import { Radio, Input, Popover, Space, Checkbox, Row, Col, Button } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { InodeScopeModule } from './index';
 import './style/node-scope.less';
 

km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Tooltip, Select, IconFont, Utils, Divider, Button } from 'knowdesign';
+import { Tooltip, Select, Utils, Divider, Button } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import moment from 'moment';
 import { DRangeTime } from 'knowdesign';
 import IndicatorDrawer from './IndicatorDrawer';

km-console/packages/layout-clusters-fe/src/components/TopicJob/PreviewTaskPlan.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button, Divider, Drawer, IconFont, Select, Space, Table, Utils } from 'knowdesign';
+import { Button, Divider, Drawer, Select, Space, Table, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import Api, { MetricType } from '@src/api/index';
 
 const { Option } = Select;

km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx

@@ -18,9 +18,9 @@ import {
   Space,
   Divider,
   Transfer,
-  IconFont,
   Tooltip,
 } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import './index.less';
 import Api, { MetricType } from '@src/api/index';
 import moment from 'moment';

km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts

@@ -1,5 +1,44 @@
 import moment from 'moment';
+import { MetricType } from '@src/api';
+import { MetricsDefine } from '@src/pages/CommonConfig';
 
+export interface MetricInfo {
+  name: string;
+  desc: string;
+  type: number;
+  set: boolean;
+  rank: number | null;
+  support: boolean;
+}
+
+// 接口返回图表原始数据类型
+export interface MetricDefaultChartDataType {
+  metricName: string;
+  metricLines: {
+    name: string;
+    createTime: number;
+    updateTime: number;
+    metricPoints: {
+      aggType: string;
+      timeStamp: number;
+      value: number;
+      createTime: number;
+      updateTime: number;
+    }[];
+  }[];
+}
+
+// 格式化后图表数据类型
+export interface MetricChartDataType {
+  metricName: string;
+  metricUnit: string;
+  metricLines: {
+    name: string;
+    data: (string | number)[][];
+  }[];
+}
+
+// 图表颜色库
 export const CHART_COLOR_LIST = [
   '#556ee6',
   '#94BEF2',
@@ -16,27 +55,176 @@ export const CHART_COLOR_LIST = [
   '#C9E795',
 ];
 
+// 图表存储单位换算
 export const UNIT_MAP = {
   TB: Math.pow(1024, 4),
   GB: Math.pow(1024, 3),
   MB: Math.pow(1024, 2),
   KB: 1024,
 };
+export const getUnit = (value: number) => Object.entries(UNIT_MAP).find(([, size]) => value / size >= 1) || ['Byte', 1];
 
+// 图表数字单位换算
 export const DATA_NUMBER_MAP = {
   十亿: Math.pow(1000, 3),
   百万: Math.pow(1000, 2),
   千: 1000,
 };
-
-export const getUnit = (value: number) => Object.entries(UNIT_MAP).find(([, size]) => value / size >= 1) || ['Byte', 1];
-
 export const getDataNumberUnit = (value: number) => Object.entries(DATA_NUMBER_MAP).find(([, size]) => value / size >= 1) || ['', 1];
 
+// 图表补点间隔计算
+export const SUPPLEMENTARY_INTERVAL_MAP = {
+  '0': 60 * 1000,
+  // 6 小时：10 分钟间隔
+  '21600000': 10 * 60 * 1000,
+  // 24 小时：1 小时间隔
+  '86400000': 60 * 60 * 1000,
+};
+export const getSupplementaryInterval = (range: number) => {
+  return Object.entries(SUPPLEMENTARY_INTERVAL_MAP)
+    .reverse()
+    .find(([curRange]) => range > Number(curRange))[1];
+};
+
+// 处理图表排序
+export const resolveMetricsRank = (metricList: MetricInfo[]) => {
+  const isRanked = metricList.some(({ rank }) => rank !== null);
+  let shouldUpdate = false;
+  let list: string[] = [];
+  if (isRanked) {
+    const rankedMetrics = metricList.filter(({ rank }) => rank !== null).sort((a, b) => a.rank - b.rank);
+    const unRankedMetrics = metricList.filter(({ rank }) => rank === null);
+    // 如果有新增/删除指标的情况，需要触发更新
+    if (unRankedMetrics.length || rankedMetrics.some(({ rank }, i) => rank !== i)) {
+      shouldUpdate = true;
+    }
+    list = [...rankedMetrics.map(({ name }) => name), ...unRankedMetrics.map(({ name }) => name).sort()];
+  } else {
+    shouldUpdate = true;
+    // 按字母先后顺序初始化指标排序
+    list = metricList.map(({ name }) => name).sort();
+  }
+
+  return {
+    list,
+    listInfo: list.map((metric, rank) => ({ metric, rank, set: metricList.find(({ name }) => metric === name)?.set || false })),
+    shouldUpdate,
+  };
+};
+
+// 补点
+export const supplementaryPoints = (
+  lines: MetricChartDataType['metricLines'],
+  timeRange: readonly [number, number],
+  extraCallback?: (point: [number, 0]) => any[]
+): void => {
+  const interval = getSupplementaryInterval(timeRange[1] - timeRange[0]);
+
+  lines.forEach(({ data }) => {
+    // 获取未补点前线条的点的个数
+    let len = data.length;
+    // 记录当前处理到的点的下标值
+    let i = 0;
+
+    for (; i < len; i++) {
+      if (i === 0) {
+        let firstPointTimestamp = data[0][0] as number;
+        while (firstPointTimestamp - interval > timeRange[0]) {
+          const prevPointTimestamp = firstPointTimestamp - interval;
+          data.unshift(extraCallback ? extraCallback([prevPointTimestamp, 0]) : [prevPointTimestamp, 0]);
+          firstPointTimestamp = prevPointTimestamp;
+          len++;
+          i++;
+        }
+      }
+
+      if (i === len - 1) {
+        let lastPointTimestamp = data[i][0] as number;
+        while (lastPointTimestamp + interval < timeRange[1]) {
+          const nextPointTimestamp = lastPointTimestamp + interval;
+          data.push(extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]);
+          lastPointTimestamp = nextPointTimestamp;
+        }
+        break;
+      }
+
+      {
+        let timestamp = data[i][0] as number;
+        while (timestamp + interval < data[i + 1][0]) {
+          const nextPointTimestamp = timestamp + interval;
+          data.splice(i + 1, 0, extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]);
+          timestamp = nextPointTimestamp;
+          len++;
+          i++;
+        }
+      }
+    }
+  });
+};
+
+// 格式化图表数据
+export const formatChartData = (
+  // 图表源数据
+  metricData: MetricDefaultChartDataType[],
+  // 获取指标单位
+  getMetricDefine: (type: MetricType, metric: string) => MetricsDefine[keyof MetricsDefine],
+  // 指标类型
+  metricType: MetricType,
+  // 图表时间范围，用于补点
+  timeRange: readonly [number, number],
+  transformUnit: [string, number] = undefined
+): MetricChartDataType[] => {
+  return metricData.map(({ metricName, metricLines }) => {
+    const curMetricInfo = (getMetricDefine && getMetricDefine(metricType, metricName)) || null;
+    const isByteUnit = curMetricInfo?.unit?.toLowerCase().includes('byte');
+    let maxValue = -1;
+
+    const PointsMapMethod = ({ timeStamp, value }: { timeStamp: number; value: string | number }) => {
+      let parsedValue: string | number = Number(value);
+
+      if (Number.isNaN(parsedValue)) {
+        parsedValue = value;
+      } else {
+        // 为避免出现过小的数字影响图表展示效果，图表值统一保留小数点后三位
+        parsedValue = parseFloat(parsedValue.toFixed(3));
+        if (maxValue < parsedValue) maxValue = parsedValue;
+      }
+
+      return [timeStamp, parsedValue];
+    };
+
+    // 初始化返回结构
+    const chartData = {
+      metricName,
+      metricUnit: curMetricInfo?.unit || '',
+      metricLines: metricLines
+        .sort((a, b) => Number(a.name < b.name) - 0.5)
+        .map(({ name, metricPoints }) => ({
+          name,
+          data: metricPoints.map(PointsMapMethod),
+        })),
+    };
+    // 按时间先后进行对图表点排序
+    chartData.metricLines.forEach(({ data }) => data.sort((a, b) => (a[0] as number) - (b[0] as number)));
+
+    // 图表值单位转换
+    if (maxValue > 0) {
+      const [unitName, unitSize]: [string, number] = transformUnit || isByteUnit ? getUnit(maxValue) : getDataNumberUnit(maxValue);
+      chartData.metricUnit = isByteUnit
+        ? chartData.metricUnit.toLowerCase().replace('byte', unitName)
+        : `${unitName}${chartData.metricUnit}`;
+      chartData.metricLines.forEach(({ data }) => data.forEach((point: any) => (point[1] /= unitSize)));
+    }
+
+    // 补点
+    supplementaryPoints(chartData.metricLines, timeRange);
+
+    return chartData;
+  });
+};
+
 // 图表 tooltip 基础展示样式
 const tooltipFormatter = (date: any, arr: any, tooltip: any) => {
-  // 从大到小排序
-  // arr = arr.sort((a: any, b: any) => b.value - a.value);
   const str = arr
     .map(
       (item: any) => `<div style="margin: 3px 0;">
@@ -121,9 +309,6 @@ export const getBasicChartConfig = (props: any = {}) => {
       itemWidth: 8,
       itemGap: 8,
       textStyle: {
-        // width: 85,
-        // overflow: 'truncate',
-        // ellipsis: '...',
         fontSize: 11,
         color: '#74788D',
       },

km-console/packages/layout-clusters-fe/src/constants/common.ts

@@ -37,9 +37,6 @@ export const SMALL_DRAWER_WIDTH = 480;
 export const MIDDLE_DRAWER_WIDTH = 728;
 export const LARGE_DRAWER_WIDTH = 1080;
 
-// 小间隔（1 分钟）图表点的最大请求时间范围，单位: ms
-export const MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL = 6 * 60 * 60 * 1000;
-
 export const primaryColor = '#556EE6';
 
 export const numberToFixed = (value: number, num = 2) => {

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
+import { ProTable, Utils, AppContainer, SearchInput } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import API from '../../api';
 import { getControllerChangeLogListColumns, defaultPagination } from './config';
 import BrokerDetail from '../BrokerDetail';

km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, IconFont, Divider, message } from 'knowdesign';
+import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, Divider, message } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import Api from '@src/api';
 export const ConfigurationEdit = (props: any) => {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Utils, IconFont, Tooltip } from 'knowdesign';
+import { Utils, Tooltip } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 export const getConfigurationColmns = (arg: any) => {
   const columns: any = [
     {

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Drawer, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
+import { ProTable, Drawer, Utils, AppContainer, SearchInput } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import API from '../../api';
 import { getBrokerListColumns, defaultPagination } from './config';
 import { tableHeaderPrefix } from '@src/constants/common';

km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import { AppContainer, Divider, Drawer, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign';
-import { AppContainer, Divider, Drawer, IconFont, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { DRangeTime } from 'knowdesign';
 import { CHART_COLOR_LIST, getBasicChartConfig } from '@src/constants/chartConfig';
 import Api from '@src/api/index';
 import { hashDataParse } from '@src/constants/common';
 import { ClustersPermissionMap } from '../CommonConfig';
 import ResetOffsetDrawer from './ResetOffsetDrawer';
-import { CheckCircleFilled } from '@ant-design/icons';
 import SwitchTab from '@src/components/SwitchTab';
+import ContentWithCopy from '@src/components/CopyContent';
 
 const { Option } = Select;
 
@@ -44,33 +44,6 @@ const metricWithType = [
   { metricName: 'Lag', metricType: 102 },
 ];
 
-const ContentWithCopy = (props: { content: string }) => {
-  const { content } = props;
-  const [visible, setVisible] = useState(false);
-  return (
-    <CopyToClipboard text={content}>
-      <div className="content-with-copy">
-        <Tooltip title={content}>
-          <span className="content">{content}</span>
-        </Tooltip>
-        {content && (
-          <Tooltip
-            title={
-              <span>
-                <CheckCircleFilled style={{ color: '#00b365' }} /> 复制成功
-              </span>
-            }
-            visible={visible}
-            onVisibleChange={() => setVisible(false)}
-          >
-            <IconFont className="copy-icon" type="icon-fuzhi" onClick={() => setVisible(true)} />
-          </Tooltip>
-        )}
-      </div>
-    </CopyToClipboard>
-  );
-};
-
 export default (props: any) => {
   const { scene } = props;
   const params = useParams<{
@@ -104,6 +77,9 @@ export default (props: any) => {
       title: 'Topic Partition',
       dataIndex: 'partitionId',
       key: 'partitionId',
+      lineClampOne: true,
+      needTooltip: true,
+      width: 180,
       render: (v: string, record: any) => {
         return `${record.topicName}-${v}`;
       },

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
-import { AppContainer, Divider, Form, IconFont, Input, ProTable, Select, Utils } from 'knowdesign';
+import { AppContainer, Divider, Form, Input, ProTable, Select, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import './index.less';
 import Api from '@src/api/index';
 import { getOperatingStateListParams } from './interface';

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
-import { Alert, Badge, Dropdown, IconFont, ProTable, Space, Table, Utils } from 'knowdesign';
+import { Alert, Badge, Dropdown, ProTable, Space, Table, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import Api from '@src/api';
 import { getTaskDetailsColumns, getMoveBalanceColumns } from './config';

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { useParams } from 'react-router-dom';
-import { Button, Drawer, Utils, Descriptions, Tabs, Input, IconFont, message, Spin, InputNumber } from 'knowdesign';
+import { Button, Drawer, Utils, Descriptions, Tabs, Input, message, Spin, InputNumber } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import TaskDetails from './TeskDetails';
 import NodeTraffic from './NodeTraffic';
 import RebalancePlan from './RebalancePlan';

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

@@ -89,12 +89,9 @@ export const getJobsListColumns = (arg?: any) => {
       title: '任务执行对象',
       dataIndex: 'target',
       key: 'target',
+      width: 232,
       render(t: any, r: any) {
-        return (
+        return <TagsWithHide placement="bottom" list={t.split(',')} expandTagContent={(num: any) => `共有${num}个`} />;
-          <div style={{ width: '232px' }}>
-            <TagsWithHide placement="bottom" list={t.split(',')} expandTagContent={(num: any) => `共有${num}个`} />
-          </div>
-        );
       },
     },
     {

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, IconFont, Divider } from 'knowdesign';
+import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, Divider } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import API from '../../api';
 import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';
 import JobsCheck from '@src/components/CardBar/JobsCheck';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx

@@ -12,10 +12,9 @@ import {
   Transfer,
   Select,
   message,
-  IconFont,
   Tooltip,
 } from 'knowdesign';
-
+import { IconFont } from '@knowdesign/icons';
 import CronInput from './CronInput';
 import BalanceEditTable from './BalanceEditTable';
 import PlanDrawer from './PlanDrawer';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceFilter.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Popover, IconFont, Row, Col, Select } from 'knowdesign';
+import { Button, Popover, Row, Col, Select } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined } from '@ant-design/icons';
 
 const balancePrefix = 'custom-popover-balance';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, message, IconFont, InputNumber } from 'knowdesign';
+import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, message, InputNumber } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined } from '@ant-design/icons';
 import api from '../../api';
 import './style/BalanceDrawer.less';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/PlanDrawer.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { message, Drawer, Button, Space, Divider, AppContainer, IconFont } from 'knowdesign';
+import { message, Drawer, Button, Space, Divider, AppContainer } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 
 import RebalancePlan from '../Jobs/RebalancePlan';
 interface PropsType extends React.HTMLAttributes<HTMLDivElement> {

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput, IconFont, Divider } from 'knowdesign';
+import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput, Divider } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import BalanceDrawer from './BalanceDrawer';
 import HistoryDrawer from './HistoryDrawer';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
@@ -133,7 +134,7 @@ const LoadBalance: React.FC = (props: any) => {
       key: 'disk_spec',
       width: '150px',
       render: (text: any, row: any) => {
-        return text !== null ? `${text}GB` : '-';
+        return text !== null ? `${text.toLocaleString()}GB` : '-';
       },
     },
     {
@@ -145,7 +146,10 @@ const LoadBalance: React.FC = (props: any) => {
         return text !== null ? (
           <span>
             <Badge status={row?.disk_status === 0 ? 'success' : 'error'} />
-            {`${getSizeAndUnit(text, 'B').valueWithUnit} (${((row.disk_avg * 100) / Utils.transGBToB(row.disk_spec)).toFixed(2)}%)`}
+            {`${getSizeAndUnit(text, 'B').valueWithUnit.toLocaleString()} (${(
+              (row.disk_avg * 100) /
+              Utils.transGBToB(row.disk_spec)
+            ).toFixed(2)}%)`}
           </span>
         ) : (
           '-'
@@ -158,7 +162,7 @@ const LoadBalance: React.FC = (props: any) => {
       key: 'bytesIn_spec',
       width: '150px',
       render: (text: any, row: any) => {
-        return text !== null ? `${text}MB/s` : '-';
+        return text !== null ? `${text.toLocaleString()}MB/s` : '-';
       },
     },
     {
@@ -170,7 +174,10 @@ const LoadBalance: React.FC = (props: any) => {
         return text !== null ? (
           <span>
             <Badge status={row?.bytesIn_status === 0 ? 'success' : 'error'} />
-            {`${getSizeAndUnit(text, 'B/s').valueWithUnit} (${((row.bytesIn_avg * 100) / (row.bytesIn_spec * 1024 * 1024)).toFixed(2)}%)`}
+            {`${getSizeAndUnit(text, 'B/s').valueWithUnit.toLocaleString()} (${(
+              (row.bytesIn_avg * 100) /
+              (row.bytesIn_spec * 1024 * 1024)
+            ).toFixed(2)}%)`}
           </span>
         ) : (
           '-'
@@ -183,7 +190,7 @@ const LoadBalance: React.FC = (props: any) => {
       key: 'bytesOut_spec',
       width: '150px',
       render: (text: any, row: any) => {
-        return text !== null ? `${text}MB/s` : '-';
+        return text !== null ? `${text.toLocaleString()}MB/s` : '-';
       },
     },
     {
@@ -196,7 +203,10 @@ const LoadBalance: React.FC = (props: any) => {
         return text !== null ? (
           <span>
             <Badge status={row?.bytesOut_status === 0 ? 'success' : 'error'} />
-            {`${getSizeAndUnit(text, 'B/s').valueWithUnit} (${((row.bytesOut_avg * 100) / (row.bytesOut_spec * 1024 * 1024)).toFixed(2)}%)`}
+            {`${getSizeAndUnit(text, 'B/s').valueWithUnit.toLocaleString()} (${(
+              (row.bytesOut_avg * 100) /
+              (row.bytesOut_spec * 1024 * 1024)
+            ).toFixed(2)}%)`}
           </span>
         ) : (
           '-'

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Slider, Input, Select, Checkbox, Button, Utils, Spin, IconFont, AppContainer } from 'knowdesign';
+import { Slider, Input, Select, Checkbox, Button, Utils, Spin, AppContainer } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import API from '@src/api';
 import TourGuide, { MultiPageSteps } from '@src/components/TourGuide';
 import './index.less';

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

@@ -1,4 +1,5 @@
-import { AppContainer, Divider, Form, IconFont, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Form, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import moment from 'moment';
 import API from '@src/api';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -16,6 +17,10 @@ import { SearchParams } from './HomePage';
 
 const DEFAULT_PAGE_SIZE = 10;
 
+enum ClusterRunState {
+  Raft = 2,
+}
+
 const DeleteCluster = React.forwardRef((_, ref) => {
   const intl = useIntl();
   const [form] = Form.useForm();
@@ -245,6 +250,7 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
       metricPoints.push(line);
     });
 
+    const runState = itemData.runState;
     const {
       Brokers: brokers,
       Zookeepers: zks,
@@ -345,18 +351,21 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
                   </div>
                   <div className="indicator-left-item-value">{brokers}</div>
                 </div>
-                <div className="indicator-left-item">
+                {/* 2: raft 模式 无zk */}
-                  <div className="indicator-left-item-title">
+                {runState !== ClusterRunState.Raft && (
-                    <span
+                  <div className="indicator-left-item">
-                      className="indicator-left-item-title-dot"
+                    <div className="indicator-left-item-title">
-                      style={{
+                      <span
-                        background: zookeepersAvailable === -1 ? '#e9e7e7' : zookeepersAvailable === 0 ? '#FF7066' : '#34C38F',
+                        className="indicator-left-item-title-dot"
-                      }}
+                        style={{
-                    ></span>
+                          background: zookeepersAvailable === -1 ? '#e9e7e7' : zookeepersAvailable === 0 ? '#FF7066' : '#34C38F',
-                    ZK
+                        }}
+                      ></span>
+                      ZK
+                    </div>
+                    <div className="indicator-left-item-value">{zookeepersAvailable === -1 ? '-' : zks}</div>
                   </div>
-                  <div className="indicator-left-item-value">{zookeepersAvailable === -1 ? '-' : zks}</div>
+                )}
-                </div>
               </div>
               <div className="indicator-right">
                 {metricPoints.map((row, index) => {

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils, IconFont, Divider } from 'knowdesign';
+import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils, Divider } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import ACLsCardBar from '@src/components/CardBar/ACLsCardBar';
 import api from '@src/api';
 import { tableHeaderPrefix } from '@src/constants/common';

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

@@ -14,9 +14,9 @@ import {
   Utils,
   Checkbox,
   Tooltip,
-  IconFont,
   Alert,
 } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined, EyeInvisibleOutlined, EyeOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less';
 import api from '@src/api';

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

@@ -1,30 +1,26 @@
-import { Col, Row, SingleChart, IconFont, Utils, Modal, Spin, Empty, AppContainer, Tooltip } from 'knowdesign';
+import { Col, Row, SingleChart, Utils, Modal, Spin, Empty, AppContainer, Tooltip } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import React, { useEffect, useRef, useState } from 'react';
+import { arrayMoveImmutable } from 'array-move';
 import api from '@src/api';
-import { getChartConfig } from './config';
-import './index.less';
 import { useParams } from 'react-router-dom';
 import {
   MetricDefaultChartDataType,
   MetricChartDataType,
   formatChartData,
   supplementaryPoints,
-} from '@src/components/DashboardDragChart/config';
+  resolveMetricsRank,
+  MetricInfo,
+} from '@src/constants/chartConfig';
 import { MetricType } from '@src/api';
 import { getDataNumberUnit, getUnit } from '@src/constants/chartConfig';
 import SingleChartHeader, { KsHeaderOptions } from '@src/components/SingleChartHeader';
-import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
 import RenderEmpty from '@src/components/RenderEmpty';
 import DragGroup from '@src/components/DragGroup';
+import { getChartConfig } from './config';
+import './index.less';
 
 type ChartFilterOptions = Omit<KsHeaderOptions, 'gridNum'>;
-interface MetricInfo {
-  type: number;
-  name: string;
-  desc: string;
-  set: boolean;
-  support: boolean;
-}
 
 interface MessagesInDefaultData {
   aggType: string | null;
@@ -71,8 +67,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
   const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
   const [defaultChartLoading, setDefaultChartLoading] = useState<boolean>(true);
   const [chartLoading, setChartLoading] = useState<boolean>(true);
-  const [showChartDetailModal, setShowChartDetailModal] = useState<boolean>(false);
+  const metricRankList = useRef<string[]>([]);
-  const [chartDetail, setChartDetail] = useState<any>();
   const curFetchingTimestamp = useRef({
     messagesIn: 0,
     other: 0,
@@ -91,36 +86,53 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
     });
   };
 
+  // 更新 rank
+  const updateRank = (metricList: MetricInfo[]) => {
+    const { list, listInfo, shouldUpdate } = resolveMetricsRank(metricList);
+    metricRankList.current = list;
+    if (shouldUpdate) {
+      updateMetricList(listInfo);
+    }
+  };
+
   // 获取指标列表
   const getMetricList = () => {
     Utils.request(api.getDashboardMetricList(clusterId, MetricType.Cluster)).then((res: MetricInfo[] | null) => {
       if (!res) return;
-      const showMetrics = res.filter((metric) => metric.support);
+      const supportMetrics = res.filter((metric) => metric.support);
-      const selectedMetrics = showMetrics.filter((metric) => metric.set).map((metric) => metric.name);
+      const selectedMetrics = supportMetrics.filter((metric) => metric.set).map((metric) => metric.name);
       !selectedMetrics.includes(DEFAULT_METRIC) && selectedMetrics.push(DEFAULT_METRIC);
-      setMetricList(showMetrics);
+      updateRank([...supportMetrics]);
+      setMetricList(supportMetrics);
       setSelectedMetricNames(selectedMetrics);
     });
   };
 
   // 更新指标
-  const updateMetricList = (metricsSet: { [name: string]: boolean }) => {
+  const updateMetricList = (metricDetailDTOList: { metric: string; rank: number; set: boolean }[]) => {
     return Utils.request(api.getDashboardMetricList(clusterId, MetricType.Cluster), {
       method: 'POST',
       data: {
-        metricsSet,
+        metricDetailDTOList,
       },
     });
   };
 
   // 指标选中项更新回调
   const indicatorChangeCallback = (newMetricNames: (string | number)[]) => {
-    const updateMetrics: { [name: string]: boolean } = {};
+    const updateMetrics: { metric: string; set: boolean; rank: number }[] = [];
     // 需要选中的指标
-    newMetricNames.forEach((name) => !selectedMetricNames.includes(name) && (updateMetrics[name] = true));
+    newMetricNames.forEach(
+      (name) =>
+        !selectedMetricNames.includes(name) &&
+        updateMetrics.push({ metric: name as string, set: true, rank: metricList.find(({ name: metric }) => metric === name)?.rank })
+    );
     // 取消选中的指标
-    selectedMetricNames.forEach((name) => !newMetricNames.includes(name) && (updateMetrics[name] = false));
+    selectedMetricNames.forEach(
-
+      (name) =>
+        !newMetricNames.includes(name) &&
+        updateMetrics.push({ metric: name as string, set: false, rank: metricList.find(({ name: metric }) => metric === name)?.rank })
+    );
     const requestPromise = Object.keys(updateMetrics).length ? updateMetricList(updateMetrics) : Promise.resolve();
     requestPromise.then(
       () => getMetricList(),
@@ -156,15 +168,16 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           return;
         }
 
-        const supplementaryInterval = (endTime - startTime > MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL ? 10 : 1) * 60 * 1000;
         const formattedMetricData: MetricChartDataType[] = formatChartData(
           res,
           global.getMetricDefine || {},
           MetricType.Cluster,
-          curHeaderOptions.rangeTime,
+          curHeaderOptions.rangeTime
-          supplementaryInterval
         );
         formattedMetricData.forEach((data) => (data.metricLines[0].name = data.metricName));
+        // 指标排序
+        formattedMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
+
         setMetricDataList(formattedMetricData);
         setChartLoading(false);
       },
@@ -242,9 +255,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
             ...info,
             value: 0,
           }));
-          const supplementaryInterval =
+          supplementaryPoints([line], curHeaderOptions.rangeTime, (point) => {
-            (curHeaderOptions.rangeTime[1] - curHeaderOptions.rangeTime[0] > MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL ? 10 : 1) * 60 * 1000;
-          supplementaryPoints([line], curHeaderOptions.rangeTime, supplementaryInterval, (point) => {
             point.push(extraMetrics as any);
             return point;
           });
@@ -263,6 +274,22 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
     targetNode && targetNode.addEventListener('click', () => busInstance.emit('chartResize'));
   };
 
+  // 拖拽开始回调，触发图表的 onDrag 事件（ 设置为 true ），禁止同步展示图表的 tooltip
+  const dragStart = () => {
+    busInstance.emit('onDrag', true);
+  };
+
+  // 拖拽结束回调，更新图表顺序，并触发图表的 onDrag 事件（ 设置为 false ），允许同步展示图表的 tooltip
+  const dragEnd = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
+    busInstance.emit('onDrag', false);
+    const originFrom = metricRankList.current.indexOf(metricDataList[oldIndex].metricName);
+    const originTarget = metricRankList.current.indexOf(metricDataList[newIndex].metricName);
+    const newList = arrayMoveImmutable(metricRankList.current, originFrom, originTarget);
+    metricRankList.current = newList;
+    updateMetricList(newList.map((metric, rank) => ({ metric, rank, set: metricList.find(({ name }) => metric === name)?.set || false })));
+    setMetricDataList(arrayMoveImmutable(metricDataList, oldIndex, newIndex));
+  };
+
   useEffect(() => {
     getMetricData();
   }, [selectedMetricNames]);
@@ -359,10 +386,10 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
                   <div className="no-group-con">
                     <DragGroup
                       sortableContainerProps={{
-                        onSortStart: () => 0,
+                        onSortStart: dragStart,
-                        onSortEnd: () => 0,
+                        onSortEnd: dragEnd,
                         axis: 'xy',
-                        useDragHandle: false,
+                        useDragHandle: true,
                       }}
                       gridProps={{
                         span: 12,

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

@@ -1,4 +1,5 @@
-import { AppContainer, Divider, IconFont, Progress, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Progress, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import React, { useEffect, useState } from 'react';
 import AccessClusters from '../MutliClusterPage/AccessCluster';
 import './index.less';

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

@@ -2,7 +2,8 @@ import moment from 'moment';
 import React from 'react';
 import { timeFormat } from '../../constants/common';
 import TagsWithHide from '../../components/TagsWithHide/index';
-import { Form, IconFont, InputNumber, Tooltip } from 'knowdesign';
+import { Form, InputNumber, Tooltip } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { Link } from 'react-router-dom';
 import { systemKey } from '../../constants/menu';
 

km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { DownloadOutlined } from '@ant-design/icons';
-import { AppContainer, Divider, IconFont, message, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, message, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import * as React from 'react';
 import moment from 'moment';
 import { timeFormat } from '../../constants/common';

km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { useState } from 'react';
-import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, message, IconFont, Select } from 'knowdesign';
+import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, message, Select } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import './style/edit-table.less';
 import { CheckOutlined, CloseOutlined, PlusSquareOutlined } from '@ant-design/icons';
 

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

@@ -1,5 +1,6 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { IconFont, Switch, Tooltip } from 'knowdesign';
+import { Switch, Tooltip } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 import moment from 'moment';
 import React from 'react';

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { useEffect, useState } from 'react';
-import { AppContainer, Button, Empty, IconFont, List, Popover, ProTable, Radio, Spin, Utils } from 'knowdesign';
+import { AppContainer, Button, Empty, List, Popover, ProTable, Radio, Spin, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined } from '@ant-design/icons';
 import api, { MetricType } from '@src/api';
 import { useParams } from 'react-router-dom';

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Drawer, Form, Input, Space, Button, Utils, Row, Col, IconFont, Divider, message } from 'knowdesign';
+import { Drawer, Form, Input, Space, Button, Utils, Row, Col, Divider, message } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import Api from '@src/api';
 export const ConfigurationEdit = (props: any) => {

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Alert, Button, Checkbox, Form, IconFont, Input, ProTable, Select, Tooltip, Utils } from 'knowdesign';
+import { Alert, Button, Checkbox, Form, Input, ProTable, Select, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import Api from '@src/api';
 import { useParams, useHistory } from 'react-router-dom';
 import { getTopicMessagesColmns } from './config';

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import moment from 'moment';
 import { timeFormat } from '../../constants/common';
-import { IconFont, Tooltip } from 'knowdesign';
+import { message, Tooltip, Utils } from 'knowdesign';
-
+import { IconFont } from '@knowdesign/icons';
+import ContentWithCopy from '@src/components/CopyContent';
 const aclOperationType: any = {
   0: 'UNKNOWN',
   1: 'ANY',
@@ -80,6 +81,7 @@ export const getTopicMessagesColmns = () => {
       title: 'Offset',
       dataIndex: 'offset',
       key: 'offset',
+      render: (t: number) => (t ? t.toLocaleString() : '-'),
     },
     {
       title: 'Timestamp',
@@ -100,8 +102,9 @@ export const getTopicMessagesColmns = () => {
       dataIndex: 'value',
       key: 'value',
       width: 280,
-      lineClampTwo: true,
+      render: (t: string) => {
-      needTooltip: true,
+        return t ? <ContentWithCopy content={t} /> : '-';
+      },
     },
     {
       title: 'Header',

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Button, Form, IconFont, Input, Modal, notification, Utils } from 'knowdesign';
+import { Button, Form, Input, Modal, notification, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import Api from '@src/api/index';
 
 // eslint-disable-next-line react/display-name

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

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { AppContainer, Button, Divider, Drawer, Form, InputNumber, notification, SingleChart, Space, Spin, Utils } from 'knowdesign';
 import Api, { MetricType } from '@src/api/index';
 import { getBasicChartConfig, getUnit } from '@src/constants/chartConfig';
-import { formatChartData, MetricDefaultChartDataType } from '@src/components/DashboardDragChart/config';
+import { formatChartData, MetricDefaultChartDataType } from '@src/constants/chartConfig';
 
 const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
   const [global] = AppContainer.useGlobalValue();
@@ -74,8 +74,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
         ],
         global?.getMetricDefine || {},
         MetricType.Topic,
-        [startStamp, endStamp],
+        [startStamp, endStamp]
-        10 * 60 * 1000
       );
 
       setMinByteInOut(minByteInOut < empiricalMinValue ? empiricalMinValue : minByteInOut);

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

@@ -1,7 +1,8 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { AppContainer, IconFont, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button, Divider } from 'knowdesign';
+import { AppContainer, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button, Divider } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import Create from './Create';
 import './index.less';
 import Api from '@src/api/index';
@@ -90,11 +91,11 @@ const AutoPage = (props: any) => {
     const orgVal = record?.latestMetrics?.metrics?.[metricName];
     if (orgVal !== undefined) {
       if (metricName === 'HealthScore') {
-        return Math.round(orgVal);
+        return Math.round(orgVal).toLocaleString();
       } else if (metricName === 'LogSize') {
-        return Number(Utils.formatAssignSize(orgVal, 'MB'));
+        return Number(Utils.formatAssignSize(orgVal, 'MB')).toLocaleString();
       } else {
-        return Number(Utils.formatAssignSize(orgVal, 'KB'));
+        return Number(Utils.formatAssignSize(orgVal, 'KB')).toLocaleString();
         // return Utils.formatAssignSize(orgVal, 'KB');
       }
     }

km-console/packages/layout-clusters-fe/src/style-addition.less

@@ -655,4 +655,4 @@
 
 .@{ant-prefix}-empty-img-default{
   width: 100% !important;
-}
+}

km-core/src/main/java/com/xiaojukeji/know/streaming/km/core/service/group/impl/GroupMetricServiceImpl.java

@@ -90,23 +90,31 @@ public class GroupMetricServiceImpl extends BaseMetricService implements GroupMe
 
     @Override
     public Result<List<GroupMetrics>> collectGroupMetricsFromKafka(Long clusterId, String groupName, List<String> metrics) {
-        List<GroupMetrics>          allGroupMetrics         = new ArrayList<>();
+        List<GroupMetrics> allGroupMetrics = new ArrayList<>();
-        Map<String, GroupMetrics>   topicPartitionGroupMap  = new HashMap<>();
+        Map<String, GroupMetrics> topicPartitionGroupMap = new HashMap<>();
 
         GroupMetrics groupMetrics = new GroupMetrics(clusterId, groupName, true);
-        for(String metric : metrics){
+        Set<String> existMetricSet = new HashSet<>();
-            if(null != groupMetrics.getMetrics().get(metric)){continue;}
+        for (String metric : metrics) {
+            if (existMetricSet.contains(metric)) {
+                continue;
+            }
 
             Result<List<GroupMetrics>> ret = collectGroupMetricsFromKafka(clusterId, groupName, metric);
-            if(null != ret && ret.successful()){
+            if (null != ret && ret.successful()) {
                 List<GroupMetrics> groupMetricsList = ret.getData();
-                for(GroupMetrics gm : groupMetricsList){
+
-                    if(gm.isBGroupMetric()){
+                for (GroupMetrics gm : groupMetricsList) {
+
+                    //记录已存在的指标
+                    existMetricSet.addAll(gm.getMetrics().keySet());
+
+                    if (gm.isBGroupMetric()) {
                         groupMetrics.getMetrics().putAll(gm.getMetrics());
-                    }else {
+                    } else {
                         GroupMetrics topicGroupMetric = topicPartitionGroupMap.getOrDefault(
                                 gm.getTopic() + gm.getPartitionId(),
-                                     new GroupMetrics(clusterId, groupName, false));
+                                new GroupMetrics(clusterId, gm.getPartitionId(), gm.getTopic(), groupName, false));
 
                         topicGroupMetric.getMetrics().putAll(gm.getMetrics());
                         topicPartitionGroupMap.put(gm.getTopic() + gm.getPartitionId(), topicGroupMetric);

km-persistence/src/main/java/com/xiaojukeji/know/streaming/km/persistence/es/ESOpClient.java

@@ -392,10 +392,7 @@ public class ESOpClient {
         return false;
     }
 
-    /**
+    public boolean templateExist(String indexTemplateName){
-     * 创建索引模板
-     */
-    public boolean createIndexTemplateIfNotExist(String indexTemplateName, String config) {
         ESClient esClient = null;
 
         try {
@@ -410,6 +407,29 @@ public class ESOpClient {
             if (null != templateConfig) {
                 return true;
             }
+        } catch (Exception e) {
+            LOGGER.warn( "method=templateExist||indexTemplateName={}||msg=exception!",
+                    indexTemplateName, e);
+        } finally {
+            if (esClient != null) {
+                this.returnESClientToPool(esClient);
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * 创建索引模板
+     */
+    public boolean createIndexTemplateIfNotExist(String indexTemplateName, String config) {
+        ESClient esClient = null;
+
+        try {
+            esClient = this.getESClientFromPool();
+
+            //存在模板就返回，不存在就创建
+            if(templateExist(indexTemplateName)){return true;}
 
             // 创建新的模板
             ESIndicesPutTemplateResponse response = esClient.admin().indices().preparePutTemplate( indexTemplateName )
@@ -417,8 +437,7 @@ public class ESOpClient {
 
             return response.getAcknowledged();
         } catch (Exception e) {
-            LOGGER.warn(
+            LOGGER.warn( "method=createIndexTemplateIfNotExist||indexTemplateName={}||config={}||msg=exception!",
-                    "class=ESOpClient||method=createIndexTemplateIfNotExist||indexTemplateName={}||config={}||msg=exception!",
                     indexTemplateName, config, e
             );
         } finally {

km-rest/src/main/java/com/xiaojukeji/know/streaming/km/rest/api/v3/version/VersionController.java

@@ -11,9 +11,11 @@ import com.xiaojukeji.know.streaming.km.common.constant.Constant;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
 import javax.servlet.http.HttpServletRequest;
+import javax.validation.Valid;
 import java.util.List;
 import java.util.Map;
 import java.util.SortedMap;
@@ -67,7 +69,7 @@ public class VersionController {
     @PostMapping(value = "clusters/{clusterId}/types/{type}/user-metric-config")
     @ResponseBody
     public Result<Void> updateUserMetricItem(@PathVariable Long clusterId, @PathVariable Integer type,
-                                             @RequestBody  UserMetricConfigDTO userMetricConfigDTO, HttpServletRequest request){
+                                             @Validated @RequestBody UserMetricConfigDTO userMetricConfigDTO, HttpServletRequest request) {
         return versionControlManager.updateUserMetricItem(clusterId, type, userMetricConfigDTO, HttpRequestUtil.getOperator(request));
     }
 }