([]);
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 selectedMetrics = showMetrics.filter((metric) => metric.set).map((metric) => metric.name);
+ const supportMetrics = res.filter((metric) => metric.support);
+ 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,
- supplementaryInterval
+ curHeaderOptions.rangeTime
);
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 =
- (curHeaderOptions.rangeTime[1] - curHeaderOptions.rangeTime[0] > MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL ? 10 : 1) * 60 * 1000;
- supplementaryPoints([line], curHeaderOptions.rangeTime, supplementaryInterval, (point) => {
+ supplementaryPoints([line], curHeaderOptions.rangeTime, (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 => {
0,
- onSortEnd: () => 0,
+ onSortStart: dragStart,
+ onSortEnd: dragEnd,
axis: 'xy',
- useDragHandle: false,
+ useDragHandle: true,
}}
gridProps={{
span: 12,
diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx
index 5a428b5b..bd5989d9 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx
index b2d9eb0c..6ab6e317 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx
index d74d723f..be43d454 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx
index 49e2568d..a5300af2 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
index 97589f32..3e34ad67 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
index 1c40cd66..9b3a12a0 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx
index a2638384..7fc4ab80 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx
+++ b/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) => {
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx
index 1e1f6582..450cb59b 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx
+++ b/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';
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
index 03a93181..aa1e25d3 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
+++ b/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,
- needTooltip: true,
+ render: (t: string) => {
+ return t ? : '-';
+ },
},
{
title: 'Header',
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx
index 9a3c6157..75af2070 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx
+++ b/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
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
index 0c814e43..b17a41ab 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
@@ -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],
- 10 * 60 * 1000
+ [startStamp, endStamp]
);
setMinByteInOut(minByteInOut < empiricalMinValue ? empiricalMinValue : minByteInOut);
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
index 692da9c2..60d7dd72 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+++ b/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');
}
}
diff --git a/km-console/packages/layout-clusters-fe/src/style-addition.less b/km-console/packages/layout-clusters-fe/src/style-addition.less
index e2c1eb34..451c31bf 100644
--- a/km-console/packages/layout-clusters-fe/src/style-addition.less
+++ b/km-console/packages/layout-clusters-fe/src/style-addition.less
@@ -655,4 +655,4 @@
.@{ant-prefix}-empty-img-default{
width: 100% !important;
-}
\ No newline at end of file
+}