+
{
{messagesInMetricData.data && (
<>
-
+
{
@@ -354,14 +382,25 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
-
- {metricDataList.length ? (
- metricDataList.map((data: any, i: number) => {
- const { metricName, metricUnit, metricLines } = data;
- return (
-
-
-
+ {metricDataList.length ? (
+
+
+ {metricDataList.map((data: any, i: number) => {
+ const { metricName, metricUnit, metricLines } = data;
+ return (
+
+
{
@@ -379,15 +418,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
-
{
- setChartDetail(data);
- setShowChartDetailModal(true);
- }}
- >
-
-
{
})}
/>
-
- );
- })
- ) : chartLoading ? (
- <>>
- ) : (
-
- )}
-
+ );
+ })}
+
+
+ ) : chartLoading ? (
+ <>>
+ ) : (
+
+ )}
@@ -421,35 +451,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
{props.children}
-
- {/* 图表详情 */}
- setShowChartDetailModal(false)}
- >
-
-
setShowChartDetailModal(false)}>
-
-
- {chartDetail && (
-
- )}
-
-
);
};
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/SingleClusterDetail/index.less b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less
index 7baae7b8..3fa013de 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less
@@ -231,9 +231,10 @@
}
.chart-panel {
- flex: 1;
+ flex: auto;
margin-left: 12px;
margin-right: 10px;
+ overflow: hidden;
}
.change-log-panel {
diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
index e4b4b2c6..59e679b3 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx
@@ -21,11 +21,9 @@ const SingleClusterDetail = (): JSX.Element => {
>
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/TestingConsumer/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
index d27f8d4e..fc529e9d 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx
@@ -268,6 +268,7 @@ export const getFormConfig = (topicMetaData: any, info = {} as any, partitionLis
type: FormItemType.inputNumber,
attrs: {
min: 1,
+ max: 1000,
},
invisible: !info?.needMsgNum,
rules: [
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 81503271..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';
@@ -152,6 +153,7 @@ export const getFormConfig = (params: any) => {
rules: [{ required: true, message: '请输入' }],
attrs: {
min: 0,
+ max: 1000,
style: { width: 232 },
},
},
@@ -391,7 +393,7 @@ export const getTableColumns = () => {
{
title: 'time',
dataIndex: 'costTimeUnitMs',
- width: 60,
+ width: 100,
},
];
};
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 eecf792a..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';
@@ -10,7 +11,7 @@ const defaultParams: any = {
maxRecords: 100,
pullTimeoutUnitMs: 5000,
// filterPartitionId: 1,
- filterOffsetReset: 0
+ filterOffsetReset: 0,
};
const defaultpaPagination = {
current: 1,
@@ -32,8 +33,8 @@ const TopicMessages = (props: any) => {
// 获取消息开始位置
const offsetResetList = [
- { 'label': 'latest', value: 0 },
- { 'label': 'earliest', value: 1 }
+ { label: 'latest', value: 0 },
+ { label: 'earliest', value: 1 },
];
// 默认排序
@@ -99,10 +100,10 @@ const TopicMessages = (props: any) => {
const onTableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
setPagination(pagination);
// 只有排序事件时,触发重新请求后端数据
- if(extra.action === 'sort') {
+ if (extra.action === 'sort') {
setSorter({
sortField: sorter.field || '',
- sortType: sorter.order ? sorter.order.substring(0, sorter.order.indexOf('end')) : ''
+ sortType: sorter.order ? sorter.order.substring(0, sorter.order.indexOf('end')) : '',
});
}
// const asc = sorter?.order && sorter?.order === 'ascend' ? true : false;
@@ -137,11 +138,11 @@ const TopicMessages = (props: any) => {
@@ -172,7 +173,14 @@ const TopicMessages = (props: any) => {
style={{ margin: '12px 0 4px', padding: '7px 12px', background: '#FFF9E6' }}
message={
- 此处展示Topic最近的100条messages,若想获取其他messages,可前往
Produce&Consume进行操作
+ 此处展示 Topic 最近的 100 条 messages。
+ {process.env.BUSINESS_VERSION ? (
+
+ 若想获取其他 messages,可前往 Produce&Consume 进行操作
+
+ ) : (
+ ''
+ )}
}
type="warning"
@@ -194,7 +202,7 @@ const TopicMessages = (props: any) => {
bordered: false,
onChange: onTableChange,
scroll: { x: 'max-content' },
- sortDirections: ['descend', 'ascend', 'default']
+ sortDirections: ['descend', 'ascend', 'default'],
},
}}
/>
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/Create.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx
index 218b0754..288b99c7 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx
@@ -218,10 +218,10 @@ export default (props: any) => {
-
+
-
+
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.less b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
index 669e85fb..453363c6 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
@@ -1,48 +1,9 @@
-.operation-bar {
- // height: 60px;
+.internal-switch {
display: flex;
- justify-content: space-between;
align-items: center;
- margin-bottom: 10px;
- .left {
- display: flex;
- align-items: center;
- .divider {
- margin-left: 8px;
- margin-right: 8px;
- width: 1px;
- height: 20px;
- background-color: #ced4da;
- }
- .internal-switch {
- display: flex;
- align-items: center;
- > span {
- margin-left: 4px;
- color: #74788d;
- }
- }
- }
- .right {
- display: flex;
- align-items: center;
- .dcloud-form-item {
- margin-bottom: 0;
- }
- .search-input {
- width: 248px;
- margin-right: 8px;
- }
- .search-input-short {
- width: 120px;
- margin-right: 8px;
- }
- .batch-btn {
- margin-right: 8px;
- }
- .add-btn {
- width: 117px;
- }
+ > span {
+ margin-left: 4px;
+ color: #74788d;
}
}
.operation-list {
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 5bce3d6c..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 } 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';
@@ -16,6 +17,7 @@ import SmallChart from '@src/components/SmallChart';
import ReplicaMove from '@src/components/TopicJob/ReplicaMove';
import { formatAssignSize } from '../Jobs/config';
import { DownOutlined } from '@ant-design/icons';
+import { tableHeaderPrefix } from '@src/constants/common';
const { Option } = Select;
@@ -66,6 +68,7 @@ const AutoPage = (props: any) => {
// params.sortField = sortObj.sortField;
// params.sortType = sortObj.sortType || 'desc';
// }
+ setTopicListLoading(true);
Utils.post(Api.getTopicsList(Number(routeParams.clusterId)), params)
.then((data: any) => {
setTopicListLoading(false);
@@ -79,7 +82,6 @@ const AutoPage = (props: any) => {
});
};
useEffect(() => {
- setTopicListLoading(true);
getTopicsList();
}, [sortObj, showInternalTopics, searchKeywords, pageIndex, pageSize]);
@@ -89,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');
}
}
@@ -285,26 +287,17 @@ const AutoPage = (props: any) => {