Skip to content

K
kafka-manager

DiDi / kafka-manager
10 个月 前同步成功

通知 58
Star 6372
Fork 1229
K
kafka-manager

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 62f7d3f7 编写于 作者: G GraceWalk
浏览文件
操作

fix: 图表逻辑 & 展示优化

上级 26e60d8a
隐藏空白更改
内联 并排
Showing with 329 addition and 261 deletion
km-console/packages/layout-clusters-fe/src/api/index.ts
浏览文件 @ 62f7d3f7
......@@ -14,6 +14,7 @@ export enum MetricType {
Broker = 103,
Partition = 104,
Replication = 105,
Zookeeper = 110,
Controls = 901,
}
......@@ -61,6 +62,8 @@ const api = {
phyClusterState: getApi(`/physical-clusters/state`),
getOperatingStateList: (clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/groups-overview`),
getGroupTopicList: (clusterPhyId: number, groupName: string) => getApi(`/clusters/${clusterPhyId}/groups/${groupName}/topics-overview`),
// 物理集群接口
phyCluster: getApi(`/physical-clusters`),
getPhyClusterBasic: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/basic`),
......@@ -127,6 +130,7 @@ const api = {
getApi(`/clusters/${clusterPhyId}/topics/${topicName}/brokers-partitions-summary`),
getTopicPartitionsDetail: (clusterPhyId: string, topicName: string) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/partitions`),
getTopicMessagesList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/records`), // Messages列表
getTopicGroupList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/groups-overview`), // Consumers列表
getTopicMessagesMetadata: (topicName: string, clusterPhyId: number) => getApi(`/clusters//${clusterPhyId}/topics/${topicName}/metadata`), // Messages列表
getTopicACLsList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/acl-Bindings`), // ACLs列表
getTopicConfigs: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/config-topics/${topicName}/configs`), // Configuration列表
......
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx → km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx
浏览文件 @ 62f7d3f7
import React, { useState, useEffect } from 'react';
import { Drawer, Button, Space, Divider, AppContainer, ProTable } from 'knowdesign';
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Drawer, Button, Space, Divider, AppContainer, ProTable, Utils } from 'knowdesign';
import { IconFont } from '@knowdesign/icons';
import { IindicatorSelectModule } from './index';
import { MetricSelect } from './index';
import './style/indicator-drawer.less';
import { useLocation } from 'react-router-dom';
interface PropsType extends React.HTMLAttributes<HTMLDivElement> {
onClose: () => void;
visible: boolean;
isGroup?: boolean; // 是否分组
indicatorSelectModule: IindicatorSelectModule;
metricSelect: MetricSelect;
}
interface MetricInfo {
......@@ -27,25 +24,25 @@ type CategoryData = {
metrics: MetricInfo[];
};
const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => {
const innerColumns = [
{
title: '指标名称',
dataIndex: 'name',
key: 'name',
},
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
},
{
title: '描述',
dataIndex: 'desc',
key: 'desc',
},
];
const expandedRowColumns = [
{
title: '指标名称',
dataIndex: 'name',
key: 'name',
},
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
},
{
title: '描述',
dataIndex: 'desc',
key: 'desc',
},
];
const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => {
return (
<div
style={{
......@@ -62,7 +59,7 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
showHeader: false,
noPagination: true,
rowKey: 'name',
columns: innerColumns,
columns: expandedRowColumns,
dataSource: metrics,
attrs: {
rowSelection: {
......@@ -79,13 +76,14 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
);
};
const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) => {
const MetricSelect = forwardRef(({ metricSelect }: PropsType, ref) => {
const [global] = AppContainer.useGlobalValue();
const { pathname } = useLocation();
const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
const [categoryData, setCategoryData] = useState<CategoryData[]>([]);
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const [childrenSelectedRowKeys, setChildrenSelectedRowKeys] = useState<SelectedMetrics>({});
const [visible, setVisible] = useState<boolean>(false);
const columns = [
{
......@@ -96,13 +94,13 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
];
const formateTableData = () => {
const tableData = indicatorSelectModule.tableData;
const tableData = metricSelect.tableData;
const categoryData: {
[category: string]: MetricInfo[];
} = {};
tableData.forEach(({ name, desc }) => {
const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name);
const metricDefine = global.getMetricDefine(metricSelect?.metricType, name);
const returnData = {
name,
desc,
......@@ -125,12 +123,12 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
};
const formateSelectedKeys = () => {
const newKeys = indicatorSelectModule.selectedRows;
const newKeys = metricSelect.selectedRows;
const result: SelectedMetrics = {};
const selectedCategories: string[] = [];
newKeys.forEach((name: string) => {
const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name);
const metricDefine = global.getMetricDefine(metricSelect?.metricType, name);
if (metricDefine) {
if (!result[metricDefine.category]) {
result[metricDefine.category] = [name];
......@@ -217,10 +215,10 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
const allRowKeys: string[] = [];
Object.entries(childrenSelectedRowKeys).forEach(([, arr]) => allRowKeys.push(...arr));
indicatorSelectModule.submitCallback(allRowKeys).then(
metricSelect.submitCallback(allRowKeys).then(
() => {
setConfirmLoading(false);
onClose();
setVisible(false);
},
() => {
setConfirmLoading(false);
......@@ -231,7 +229,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
const rowSelection = {
selectedRowKeys: selectedCategories,
onChange: rowChange,
// getCheckboxProps: (record: any) => indicatorSelectModule.checkboxProps && indicatorSelectModule.checkboxProps(record),
// getCheckboxProps: (record: any) => metricSelect.checkboxProps && metricSelect.checkboxProps(record),
getCheckboxProps: (record: CategoryData) => {
const isAllSelected = record.metrics.length === childrenSelectedRowKeys[record.category]?.length;
const isNotCheck = !childrenSelectedRowKeys[record.category] || childrenSelectedRowKeys[record.category]?.length === 0;
......@@ -241,25 +239,33 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
},
};
useEffect(formateTableData, [indicatorSelectModule.tableData]);
useEffect(formateTableData, [metricSelect.tableData]);
useEffect(() => {
visible && formateSelectedKeys();
}, [visible, indicatorSelectModule.selectedRows]);
}, [visible, metricSelect.selectedRows]);
useImperativeHandle(
ref,
() => ({
open: () => setVisible(true),
}),
[]
);
return (
<>
<Drawer
className="indicator-drawer"
title={indicatorSelectModule.drawerTitle || '指标筛选'}
title={metricSelect.drawerTitle || '指标筛选'}
width="868px"
forceRender={true}
onClose={onClose}
onClose={() => setVisible(false)}
visible={visible}
maskClosable={false}
extra={
<Space>
<Button size="small" onClick={onClose}>
<Button size="small" onClick={() => setVisible(false)}>
取消
</Button>
<Button
......@@ -281,6 +287,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
rowKey: 'category',
columns: columns,
dataSource: categoryData,
noPagination: true,
attrs: {
rowSelection: rowSelection,
expandable: {
......@@ -319,6 +326,6 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
</Drawer>
</>
);
};
});
export default IndicatorDrawer;
export default MetricSelect;
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx → km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx
浏览文件 @ 62f7d3f7
......@@ -26,6 +26,7 @@ const OptionsDefault = [
const NodeScope = ({ nodeScopeModule, change }: propsType) => {
const {
hasCustomScope,
customScopeList: customList,
scopeName = '',
scopeLabel = '自定义范围',
......@@ -128,51 +129,53 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
</Space>
</Radio.Group>
</div>
<div className="flx_r">
<h6 className="time_title">{scopeLabel}</h6>
<div className="custom-scope">
<div className="check-row">
<Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
全选
</Checkbox>
<Input
className="search-input"
suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
size="small"
placeholder={searchPlaceholder}
onChange={(e) => setScopeSearchValue(e.target.value)}
/>
</div>
<div className="fixed-height">
<Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
<Row gutter={[10, 12]}>
{customList
.filter((item) => item.label.includes(scopeSearchValue))
.map((item) => (
<Col span={12} key={item.value}>
<Checkbox value={item.value}>{item.label}</Checkbox>
</Col>
))}
</Row>
</Checkbox.Group>
</div>
<div className="btn-con">
<Button
type="primary"
size="small"
className="btn-sure"
onClick={customSure}
disabled={checkedListTemp?.length > 0 ? false : true}
>
确定
</Button>
<Button size="small" onClick={customCancel}>
取消
</Button>
{hasCustomScope && (
<div className="flx_r">
<h6 className="time_title">{scopeLabel}</h6>
<div className="custom-scope">
<div className="check-row">
<Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
全选
</Checkbox>
<Input
className="search-input"
suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
size="small"
placeholder={searchPlaceholder}
onChange={(e) => setScopeSearchValue(e.target.value)}
/>
</div>
<div className="fixed-height">
<Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
<Row gutter={[10, 12]}>
{customList
.filter((item) => item.label.includes(scopeSearchValue))
.map((item) => (
<Col span={12} key={item.value}>
<Checkbox value={item.value}>{item.label}</Checkbox>
</Col>
))}
</Row>
</Checkbox.Group>
</div>
<div className="btn-con">
<Button
type="primary"
size="small"
className="btn-sure"
onClick={customSure}
disabled={checkedListTemp?.length > 0 ? false : true}
>
确定
</Button>
<Button size="small" onClick={customCancel}>
取消
</Button>
</div>
</div>
</div>
</div>
)}
</div>
</div>
);
......@@ -185,7 +188,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
visible={popVisible}
content={clickContent}
placement="bottomRight"
overlayClassName="d-node-scope-popover"
overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`}
onVisibleChange={visibleChange}
>
<span className="input-span">
......
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx → km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx
浏览文件 @ 62f7d3f7
import React, { useEffect, useState } from 'react';
import { Tooltip, Select, Utils, Divider, Button } from 'knowdesign';
import React, { useEffect, useRef, useState } from 'react';
import { Select, Divider, Button } from 'knowdesign';
import { IconFont } from '@knowdesign/icons';
import moment from 'moment';
import { DRangeTime } from 'knowdesign';
import IndicatorDrawer from './IndicatorDrawer';
import MetricSelect from './MetricSelect';
import NodeScope from './NodeScope';
import './style/index.less';
......@@ -24,8 +24,8 @@ export interface KsHeaderOptions {
data: number | number[];
};
}
export interface IindicatorSelectModule {
metricType?: MetricType;
export interface MetricSelect {
metricType: MetricType;
hide?: boolean;
drawerTitle?: string;
selectedRows: (string | number)[];
......@@ -47,20 +47,27 @@ export interface IcustomScope {
}
export interface InodeScopeModule {
hasCustomScope: boolean;
customScopeList: IcustomScope[];
scopeName?: string;
scopeLabel?: string;
searchPlaceholder?: string;
change?: () => void;
}
interface PropsType {
indicatorSelectModule?: IindicatorSelectModule;
metricSelect?: MetricSelect;
hideNodeScope?: boolean;
hideGridSelect?: boolean;
nodeScopeModule?: InodeScopeModule;
onChange: (options: KsHeaderOptions) => void;
}
interface ScopeData {
isTop: boolean;
data: any;
}
// 列布局选项
const GRID_SIZE_OPTIONS = [
{
......@@ -77,15 +84,17 @@ const GRID_SIZE_OPTIONS = [
},
];
const SingleChartHeader = ({
indicatorSelectModule,
const MetricOperateBar = ({
metricSelect,
nodeScopeModule = {
hasCustomScope: false,
customScopeList: [],
},
hideNodeScope = false,
hideGridSelect = false,
onChange: onChangeCallback,
}: PropsType): JSX.Element => {
const metricSelectRef = useRef(null);
const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[1].value);
const [rangeTime, setRangeTime] = useState<[number, number]>(() => {
const curTimeStamp = moment().valueOf();
......@@ -93,16 +102,35 @@ const SingleChartHeader = ({
});
const [isRelativeRangeTime, setIsRelativeRangeTime] = useState(true);
const [isAutoReload, setIsAutoReload] = useState(false);
const [indicatorDrawerVisible, setIndicatorDrawerVisible] = useState(false);
const [scopeData, setScopeData] = useState<{
isTop: boolean;
data: any;
}>({
const [scopeData, setScopeData] = useState<ScopeData>({
isTop: true,
data: 5,
});
const sizeChange = (value: number) => setGridNum(value);
const timeChange = (curRangeTime: [number, number], isRelative: boolean) => {
setRangeTime([...curRangeTime]);
setIsRelativeRangeTime(isRelative);
};
const reloadRangeTime = () => {
if (isRelativeRangeTime) {
const timeLen = rangeTime[1] - rangeTime[0] || 0;
const curTimeStamp = moment().valueOf();
setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
} else {
setRangeTime([...rangeTime]);
}
};
const nodeScopeChange = (data: any, isTop?: any) => {
setScopeData({
isTop,
data,
});
};
useEffect(() => {
onChangeCallback({
rangeTime,
......@@ -129,68 +157,37 @@ const SingleChartHeader = ({
};
}, [isRelativeRangeTime, rangeTime]);
const sizeChange = (value: number) => {
setGridNum(value);
};
const timeChange = (curRangeTime: [number, number], isRelative: boolean) => {
setRangeTime([...curRangeTime]);
setIsRelativeRangeTime(isRelative);
};
const reloadRangeTime = () => {
if (isRelativeRangeTime) {
const timeLen = rangeTime[1] - rangeTime[0] || 0;
const curTimeStamp = moment().valueOf();
setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
} else {
setRangeTime([...rangeTime]);
}
};
const openIndicatorDrawer = () => {
setIndicatorDrawerVisible(true);
};
const closeIndicatorDrawer = () => {
setIndicatorDrawerVisible(false);
};
const nodeScopeChange = (data: any, isTop?: any) => {
setScopeData({
isTop,
data,
});
};
return (
<>
<div className="ks-chart-container">
<div className="ks-chart-container-header">
<div className="header-left">
{/* 刷新 */}
<div className="icon-box" onClick={reloadRangeTime}>
<IconFont className="icon" type="icon-shuaxin1" />
</div>
<Divider type="vertical" style={{ height: 20, top: 0 }} />
{/* 时间选择 */}
<DRangeTime timeChange={timeChange} rangeTimeArr={rangeTime} />
</div>
<div className="header-right">
{/* 节点范围 */}
{!hideNodeScope && <NodeScope nodeScopeModule={nodeScopeModule} change={nodeScopeChange} />}
{/* 分栏 */}
{!hideGridSelect && (
<Select className="grid-select" style={{ width: 70 }} value={gridNum} options={GRID_SIZE_OPTIONS} onChange={sizeChange} />
)}
{(!hideNodeScope || !hideGridSelect) && <Divider type="vertical" style={{ height: 20, top: 0 }} />}
<Button type="primary" onClick={openIndicatorDrawer}>
<Button type="primary" onClick={() => metricSelectRef.current.open()}>
指标筛选
</Button>
</div>
</div>
</div>
{!indicatorSelectModule?.hide && (
<IndicatorDrawer visible={indicatorDrawerVisible} onClose={closeIndicatorDrawer} indicatorSelectModule={indicatorSelectModule} />
)}
{/* 指标筛选 */}
{!metricSelect?.hide && <MetricSelect ref={metricSelectRef} metricSelect={metricSelect} />}
</>
);
};
export default SingleChartHeader;
export default MetricOperateBar;
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/indicator-drawer.less → km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/indicator-drawer.less
浏览文件 @ 62f7d3f7
@root-entry-name: 'default';
@import '~knowdesign/es/basic/style/themes/index';
@import '~knowdesign/es/basic/style/mixins/index';
.indicator-drawer{
.dcloud-drawer-body{
padding-top: 2px !important;
}
.indicator-drawer {
.dcloud-drawer-body {
padding-top: 2px !important;
}
}
// .dd-indicator-drawer {
// @drawerItemH: 27px;
// @primary-color: #556ee6;
......
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/node-scope.less → km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/node-scope.less
浏览文件 @ 62f7d3f7
......@@ -63,9 +63,16 @@
}
.@{ant-prefix}-popover-inner-content {
padding: 16px 24px;
width: 479px;
width: 200px;
box-sizing: border-box;
}
&.large-size {
.@{ant-prefix}-popover-inner-content {
padding: 16px 24px;
width: 479px;
box-sizing: border-box;
}
}
&.@{ant-prefix}-popover-placement-bottomRight {
// padding-top: 0;
}
......
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx → km-console/packages/layout-clusters-fe/src/components/DraggableCharts/Detail.tsx
浏览文件 @ 62f7d3f7
......@@ -2,11 +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 { OriginMetricData, FormattedMetricData, formatChartData } from '@src/constants/chartConfig';
import { useParams } from 'react-router-dom';
import { debounce } from 'lodash';
import { getDetailChartConfig } from './config';
import { UNIT_MAP } from '@src/constants/chartConfig';
import RenderEmpty from '../RenderEmpty';
interface ChartDetailProps {
......@@ -35,7 +34,7 @@ interface ChartInfo {
curTimeRange?: readonly [number, number];
sliderPos?: readonly [number, number];
transformUnit?: [string, number];
fullMetricData?: MetricChartDataType;
fullMetricData?: FormattedMetricData;
oldDataZoomOption?: any;
}
......@@ -79,7 +78,7 @@ const ChartDetail = (props: ChartDetailProps) => {
isLoadingAdditionData: false,
isLoadedFullData: false,
fullTimeRange: curTimeRange,
fullMetricData: {} as MetricChartDataType,
fullMetricData: {} as FormattedMetricData,
curTimeRange,
oldDataZoomOption: {},
sliderPos: [0, 0],
......@@ -90,7 +89,7 @@ const ChartDetail = (props: ChartDetailProps) => {
const [loading, setLoading] = useState(false);
// 当前展示的图表数据
const [curMetricData, setCurMetricData] = useState<MetricChartDataType>();
const [curMetricData, setCurMetricData] = useState<FormattedMetricData>();
// 图表数据的各项计算指标
const [tableInfo, setTableInfo] = useState<MetricTableInfo[]>([]);
const [linesStatus, setLinesStatus] = useState<{
......@@ -329,7 +328,7 @@ const ChartDetail = (props: ChartDetailProps) => {
if (i === DEFAULT_REQUEST_COUNT - 1) {
Promise.all(requestArr).then((resList) => {
// 填充增量的图表数据
resList.forEach((res: MetricDefaultChartDataType[], i) => {
resList.forEach((res: OriginMetricData[], i) => {
// 最后一个请求返回数据为空时，认为已获取到全部图表数据
if (!res?.length) {
// 标记数据已经全部加载完毕
......@@ -368,7 +367,7 @@ const ChartDetail = (props: ChartDetailProps) => {
};
// 处理增量图表数据
const resolveAdditionChartData = (res: MetricDefaultChartDataType[], timeRange: [number, number]) => {
const resolveAdditionChartData = (res: OriginMetricData[], timeRange: [number, number]) => {
// 格式化图表需要的数据
const formattedMetricData = formatChartData(
res,
......@@ -376,7 +375,7 @@ const ChartDetail = (props: ChartDetailProps) => {
metricType,
timeRange,
chartInfo.current.transformUnit
) as MetricChartDataType[];
) as FormattedMetricData[];
// 增量填充图表数据
const additionMetricPoints = formattedMetricData[0].metricLines;
Object.values(additionMetricPoints).forEach((additionLine) => {
......@@ -536,9 +535,7 @@ const ChartDetail = (props: ChartDetailProps) => {
// 如果图表返回数据
if (res?.length) {
// 格式化图表需要的数据
const formattedMetricData = (
formatChartData(res, global.getMetricDefine || {}, metricType, curTimeRange) as MetricChartDataType[]
)[0];
const formattedMetricData = formatChartData(res, global.getMetricDefine || {}, metricType, curTimeRange)[0];
// 填充图表数据
let initFullTimeRange = curTimeRange;
const pointsOfFirstLine = formattedMetricData.metricLines.find((line) => line.data.length).data;
......@@ -549,14 +546,6 @@ const ChartDetail = (props: ChartDetailProps) => {
] as const;
}
// 获取单位保存起来
let transformUnit = undefined;
Object.entries(UNIT_MAP).forEach((unit) => {
if (formattedMetricData.metricUnit.includes(unit[0])) {
transformUnit = unit;
}
});
updateChartInfo({
fullMetricData: formattedMetricData,
fullTimeRange: [...initFullTimeRange],
......@@ -565,7 +554,7 @@ const ChartDetail = (props: ChartDetailProps) => {
initFullTimeRange[1] - (initFullTimeRange[1] - initFullTimeRange[0]) * DATA_ZOOM_DEFAULT_SCALE,
initFullTimeRange[1],
],
transformUnit,
transformUnit: formattedMetricData.targetUnit,
});
setCurMetricData(formattedMetricData);
const newLinesStatus: { [lineName: string]: boolean } = {};
......
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx → km-console/packages/layout-clusters-fe/src/components/DraggableCharts/config.tsx
浏览文件 @ 62f7d3f7
import api, { MetricType } from '@src/api';
import { getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfig';
const METRIC_DASHBOARD_REQ_MAP = {
[MetricType.Broker]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Broker),
[MetricType.Topic]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Topic),
[MetricType.Zookeeper]: (clusterId: string) => '',
};
export const getMetricDashboardReq = (clusterId: string, type: MetricType.Broker | MetricType.Topic | MetricType.Zookeeper) =>
METRIC_DASHBOARD_REQ_MAP[type](clusterId);
const seriesCallback = (lines: { name: string; data: [number, string | number][] }[]) => {
const len = CHART_COLOR_LIST.length;
// series 配置
return lines.map((line, i) => {
return {
...line,
z: len - i,
lineStyle: {
width: 1.5,
},
......@@ -13,6 +24,7 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
symbol: 'emptyCircle',
symbolSize: 4,
smooth: 0.25,
color: CHART_COLOR_LIST[i % len],
areaStyle: {
color: {
type: 'linear',
......@@ -38,17 +50,13 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
};
// 返回图表配置
export const getChartConfig = (title: string, metricLength: number) => {
export const getChartConfig = (title: string, metricLength: number, showLegend = true) => {
return {
option: getBasicChartConfig({
title: { show: false },
grid: { top: 24 },
grid: { top: 24, bottom: showLegend ? 40 : 20 },
tooltip: { enterable: metricLength > 9, legendContextMaxHeight: 192 },
color: CHART_COLOR_LIST,
// xAxis: {
// type: 'time',
// boundaryGap: ['5%', '5%'],
// },
legend: { show: showLegend },
}),
seriesCallback,
};
......@@ -67,7 +75,6 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number,
legend: {
show: false,
},
color: CHART_COLOR_LIST,
dataZoom: [
{
type: 'inside',
......
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less → km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.less
浏览文件 @ 62f7d3f7
.topic-dashboard {
height: calc(100% - 160px);
height: calc(100% - 162px);
padding-bottom: 10px;
.ks-chart-container-header {
margin-top: 12px;
......
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx → km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.tsx
浏览文件 @ 62f7d3f7
......@@ -4,17 +4,11 @@ import { Utils, Empty, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesi
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 { MetricInfo, OriginMetricData, FormattedMetricData, formatChartData, resolveMetricsRank } from '@src/constants/chartConfig';
import ChartOperateBar, { KsHeaderOptions } from '../ChartOperateBar';
import DragGroup from '../DragGroup';
import ChartDetail from './ChartDetail';
import { getChartConfig } from './config';
import ChartDetail from './Detail';
import { getChartConfig, getMetricDashboardReq } from './config';
import './index.less';
interface IcustomScope {
......@@ -33,7 +27,7 @@ const busInstance = new EventBus();
const DRAG_GROUP_GUTTER_NUM: [number, number] = [16, 16];
const DashboardDragChart = (props: PropsType): JSX.Element => {
const DraggableCharts = (props: PropsType): JSX.Element => {
const [global] = AppContainer.useGlobalValue();
const { type: dashboardType } = props;
const { clusterId } = useParams<{
......@@ -44,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const [metricsList, setMetricsList] = useState<MetricInfo[]>([]); // 指标列表
const [selectedMetricNames, setSelectedMetricNames] = useState<(string | number)[]>([]); // 默认选中的指标的列表
const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
const [metricChartData, setMetricChartData] = useState<FormattedMetricData[]>([]); // 指标图表数据列表
const [gridNum, setGridNum] = useState<number>(12); // 图表列布局
const metricRankList = useRef<string[]>([]);
const chartDetailRef = useRef(null);
......@@ -85,6 +79,9 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
updateRank([...supportMetrics]);
setMetricsList(supportMetrics);
setSelectedMetricNames(selectedMetrics);
if (!selectedMetrics.length) {
setLoading(false);
}
});
};
......@@ -106,16 +103,24 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const curTimestamp = Date.now();
curFetchingTimestamp.current = curTimestamp;
Utils.post(api.getDashboardMetricChartData(clusterId, dashboardType), {
startTime,
endTime,
metricsNames: selectedMetricNames,
topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
[dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
? null
: curHeaderOptions.scopeData.data,
}).then(
(res: MetricDefaultChartDataType[] | null) => {
const reqBody = Object.assign(
{
startTime,
endTime,
metricsNames: selectedMetricNames,
topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
},
dashboardType === MetricType.Broker || dashboardType === MetricType.Topic
? {
[dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
? null
: curHeaderOptions.scopeData.data,
}
: {}
);
Utils.post(getMetricDashboardReq(clusterId, dashboardType as any), reqBody).then(
(res: OriginMetricData[] | null) => {
// 如果当前请求不是最新请求，则不做任何操作
if (curFetchingTimestamp.current !== curTimestamp) {
return;
......@@ -131,7 +136,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
global.getMetricDefine || {},
dashboardType,
curHeaderOptions.rangeTime
) as MetricChartDataType[];
) as FormattedMetricData[];
// 指标排序
formattedMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
......@@ -164,7 +169,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
};
// 指标选中项更新回调
const indicatorChangeCallback = (newMetricNames: (string | number)[]) => {
const metricSelectCallback = (newMetricNames: (string | number)[]) => {
const updateMetrics: { metric: string; set: boolean; rank: number }[] = [];
// 需要选中的指标
newMetricNames.forEach(
......@@ -218,7 +223,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
useEffect(() => {
// 初始化页面，获取 scope 和 metric 信息
getScopeList();
(dashboardType === MetricType.Broker || dashboardType === MetricType.Topic) && getScopeList();
getMetricList();
setTimeout(() => observeDashboardWidthChange());
......@@ -226,19 +231,22 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
return (
<div id="dashboard-drag-chart" className="topic-dashboard">
<SingleChartHeader
<ChartOperateBar
onChange={ksHeaderChange}
nodeScopeModule={{
hasCustomScope: !(dashboardType === MetricType.Zookeeper),
customScopeList: scopeList,
scopeName: dashboardType === MetricType.Broker ? 'Broker' : 'Topic',
scopeLabel: `自定义 ${dashboardType === MetricType.Broker ? 'Broker' : 'Topic'} 范围`,
scopeName: dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper',
scopeLabel: `自定义 ${
dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper'
} 范围`,
}}
indicatorSelectModule={{
metricSelect={{
hide: false,
metricType: dashboardType,
tableData: metricsList,
selectedRows: selectedMetricNames,
submitCallback: indicatorChangeCallback,
submitCallback: metricSelectCallback,
}}
/>
<div className="topic-dashboard-container">
......@@ -258,7 +266,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
}}
>
{metricChartData.map((data) => {
const { metricName, metricUnit, metricLines } = data;
const { metricName, metricUnit, metricLines, showLegend } = data;
return (
<div key={metricName} className="dashboard-drag-item-box">
......@@ -301,7 +309,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
eventBus={busInstance}
propChartData={metricLines}
optionMergeProps={{ replaceMerge: curHeaderOptions.isAutoReload ? ['xAxis'] : ['series'] }}
{...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length)}
{...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length, showLegend)}
/>
</div>
);
......@@ -321,4 +329,4 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
);
};
export default DashboardDragChart;
export default DraggableCharts;
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
浏览文件 @ 62f7d3f7
......@@ -12,30 +12,38 @@ export interface MetricInfo {
}
// 接口返回图表原始数据类型
export interface MetricDefaultChartDataType {
export interface OriginMetricData {
metricName: string;
metricLines: {
metricLines?: {
name: string;
createTime: number;
updateTime: number;
metricPoints: {
aggType: string;
timeStamp: number;
value: number;
value: string;
createTime: number;
updateTime: number;
}[];
}[];
metricPoints?: {
aggType: string;
name: string;
timeStamp: number;
value: string;
}[];
}
// 格式化后图表数据类型
export interface MetricChartDataType {
export interface FormattedMetricData {
metricName: string;
metricUnit: string;
metricLines: {
name: string;
data: (string | number)[][];
}[];
showLegend: boolean;
targetUnit: [string, number] | undefined;
}
// 图表颜色库
......@@ -55,22 +63,38 @@ export const CHART_COLOR_LIST = [
'#C9E795',
];
// 图表存储单位换算
export const UNIT_MAP = {
// 图表存储单位
export const MEMORY_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 = {
// 图表时间单位
export const TIME_MAP = {
h: 1000 * 60 * 60,
min: 1000 * 60,
s: 1000,
};
// 图表数字单位
export const NUM_MAP = {
十亿: Math.pow(1000, 3),
百万: Math.pow(1000, 2),
千: 1000,
};
export const getDataNumberUnit = (value: number) => Object.entries(DATA_NUMBER_MAP).find(([, size]) => value / size >= 1) || ['', 1];
const calculateUnit = (map: { [unit: string]: number }, targetValue: number) => {
return Object.entries(map).find(([, size]) => targetValue / size >= 1);
};
const getMemoryUnit = (value: number) => calculateUnit(MEMORY_MAP, value) || ['Byte', 1];
const getTimeUnit = (value: number) => calculateUnit(TIME_MAP, value) || ['ms', 1];
const getNumUnit = (value: number) => calculateUnit(NUM_MAP, value) || ['', 1];
export const getDataUnit = {
Memory: getMemoryUnit,
Time: getTimeUnit,
Num: getNumUnit,
};
export type DataUnitType = keyof typeof getDataUnit;
// 图表补点间隔计算
export const SUPPLEMENTARY_INTERVAL_MAP = {
......@@ -112,9 +136,9 @@ export const resolveMetricsRank = (metricList: MetricInfo[]) => {
};
};
// 补点
// 图表补点
export const supplementaryPoints = (
lines: MetricChartDataType['metricLines'],
lines: FormattedMetricData['metricLines'],
timeRange: readonly [number, number],
extraCallback?: (point: [number, 0]) => any[]
): void => {
......@@ -165,19 +189,39 @@ export const supplementaryPoints = (
// 格式化图表数据
export const formatChartData = (
// 图表源数据
metricData: MetricDefaultChartDataType[],
metricsData: OriginMetricData[],
// 获取指标单位
getMetricDefine: (type: MetricType, metric: string) => MetricsDefine[keyof MetricsDefine],
// 指标类型
metricType: MetricType,
// 图表时间范围，用于补点
timeRange: readonly [number, number],
transformUnit: [string, number] = undefined
): MetricChartDataType[] => {
return metricData.map(({ metricName, metricLines }) => {
targetUnit: [string, number] = undefined
): FormattedMetricData[] => {
return metricsData.map((originData) => {
const { metricName } = originData;
const curMetricInfo = (getMetricDefine && getMetricDefine(metricType, metricName)) || null;
const isByteUnit = curMetricInfo?.unit?.toLowerCase().includes('byte');
let showLegend = true;
let metricLines = [];
let maxValue = -1;
let unitType: DataUnitType;
if (originData?.metricLines && originData?.metricLines !== null) {
metricLines = originData.metricLines;
} else {
showLegend = false;
metricLines = [
{
name: metricName,
metricPoints: originData.metricPoints,
},
];
}
{
const originUnit = curMetricInfo?.unit?.toLowerCase();
unitType = originUnit.includes('byte') ? 'Memory' : originUnit.includes('ms') ? 'Time' : 'Num';
}
const PointsMapMethod = ({ timeStamp, value }: { timeStamp: number; value: string | number }) => {
let parsedValue: string | number = Number(value);
......@@ -194,7 +238,7 @@ export const formatChartData = (
};
// 初始化返回结构
const chartData = {
const chartData: FormattedMetricData = {
metricName,
metricUnit: curMetricInfo?.unit || '',
metricLines: metricLines
......@@ -203,17 +247,21 @@ export const formatChartData = (
name,
data: metricPoints.map(PointsMapMethod),
})),
showLegend,
targetUnit: undefined,
};
// 按时间先后进行对图表点排序
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)));
const [unitName, unitSize]: [string, number] = targetUnit || getDataUnit[unitType](maxValue);
chartData.targetUnit = [unitName, unitSize];
chartData.metricUnit =
unitType !== 'Num'
? chartData.metricUnit.toLowerCase().replace(unitType === 'Memory' ? 'byte' : 'ms', unitName)
: `${unitName}${chartData.metricUnit}`;
chartData.metricLines.forEach(({ data }) => data.forEach((point: any) => parseFloat((point[1] /= unitSize).toFixed(3))));
}
// 补点
......@@ -231,7 +279,7 @@ const tooltipFormatter = (date: any, arr: any, tooltip: any) => {
<div style="display:flex;align-items:center;">
<div style="margin-right:4px;width:8px;height:2px;background-color:${item.color};"></div>
<div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
<span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no-wrap;">
<span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
${item.seriesName}
</span>
<span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium; padding-left: 6px;">
......@@ -324,6 +372,7 @@ export const getBasicChartConfig = (props: any = {}) => {
tooltip: false,
...legend,
},
color: CHART_COLOR_LIST,
// 横坐标配置
xAxis: {
type: 'category',
......
km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
浏览文件 @ 62f7d3f7
import React from 'react';
import { MetricType } from '@src/api';
import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
import DashboardDragChart from '@src/components/DashboardDragChart';
import DraggableCharts from '@src/components/DraggableCharts';
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
import { AppContainer } from 'knowdesign';
......@@ -19,7 +19,7 @@ const BrokerDashboard = (): JSX.Element => {
/>
</div>
<BrokerHealthCheck />
<DashboardDragChart type={MetricType.Broker} />
<DraggableCharts type={MetricType.Broker} />
</>
);
};
......
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
浏览文件 @ 62f7d3f7
import { AppContainer, Divider, Form, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
import { AppContainer, Divider, Form, Input, List, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
import message from '@src/components/Message';
import { IconFont } from '@knowdesign/icons';
import moment from 'moment';
import API from '@src/api';
......@@ -11,7 +12,7 @@ import { useIntl } from 'react-intl';
import api, { MetricType } from '@src/api';
import { getHealthClassName, getHealthProcessColor, getHealthText } from '../SingleClusterDetail/config';
import { ClustersPermissionMap } from '../CommonConfig';
import { getUnit, getDataNumberUnit } from '@src/constants/chartConfig';
import { getDataUnit } from '@src/constants/chartConfig';
import SmallChart from '@src/components/SmallChart';
import { SearchParams } from './HomePage';
......@@ -235,14 +236,14 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
// 如果单位是 字节 ，进行单位换算
if (line.unit.toLowerCase().includes('byte')) {
const [unit, size] = getUnit(line.value);
const [unit, size] = getDataUnit['Memory'](line.value);
line.value = Number((line.value / size).toFixed(2));
line.unit = line.unit.toLowerCase().replace('byte', unit);
}
// Messages 指标值特殊处理
if (line.metricName === 'LeaderMessages') {
const [unit, size] = getDataNumberUnit(line.value);
const [unit, size] = getDataUnit['Num'](line.value);
line.value = Number((line.value / size).toFixed(2));
line.unit = unit + line.unit;
}
......
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
浏览文件 @ 62f7d3f7
......@@ -14,7 +14,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
<div style="display:flex;align-items:center;">
<div style="margin-right:4px;width:8px;height:2px;background-color:${params.color};"></div>
<div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
<span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no-wrap;">
<span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
${params.seriesName}
</span>
<span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium;margin-left: 10px;">
......@@ -55,7 +55,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
};
export const getChartConfig = (props: any) => {
const { metricName, lineColor, isDefaultMetric = false } = props;
const { lineColor, isDefaultMetric = false } = props;
return {
option: getBasicChartConfig({
// TODO: time 轴图表联动有问题，先切换为 category
......@@ -63,7 +63,6 @@ export const getChartConfig = (props: any) => {
title: { show: false },
legend: { show: false },
grid: { top: 24, bottom: 12 },
lineColor: [lineColor],
tooltip: isDefaultMetric
? {
formatter: function (params: any) {
......@@ -87,6 +86,7 @@ export const getChartConfig = (props: any) => {
smooth: 0.25,
symbol: 'emptyCircle',
symbolSize: 4,
color: '#556ee6',
// 面积图样式
areaStyle: {
color: lineColor,
......
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
浏览文件 @ 62f7d3f7
......@@ -5,16 +5,16 @@ import { arrayMoveImmutable } from 'array-move';
import api from '@src/api';
import { useParams } from 'react-router-dom';
import {
MetricDefaultChartDataType,
MetricChartDataType,
OriginMetricData,
FormattedMetricData,
formatChartData,
supplementaryPoints,
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 { getDataUnit } from '@src/constants/chartConfig';
import ChartOperateBar, { KsHeaderOptions } from '@src/components/ChartOperateBar';
import RenderEmpty from '@src/components/RenderEmpty';
import DragGroup from '@src/components/DragGroup';
import { getChartConfig } from './config';
......@@ -162,13 +162,13 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
metricsNames: selectedMetricNames.filter((name) => name !== DEFAULT_METRIC),
},
}).then(
(res: MetricDefaultChartDataType[]) => {
(res: OriginMetricData[]) => {
// 如果当前请求不是最新请求，则不做任何操作
if (curFetchingTimestamp.current.messagesIn !== curTimestamp) {
return;
}
const formattedMetricData: MetricChartDataType[] = formatChartData(
const formattedMetricData: FormattedMetricData[] = formatChartData(
res,
global.getMetricDefine || {},
MetricType.Cluster,
......@@ -224,7 +224,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
let valueWithUnit = Number(value);
let unit = ((global.getMetricDefine && global.getMetricDefine(MetricType.Cluster, key)?.unit) || '') as string;
if (unit.toLowerCase().includes('byte')) {
const [unitName, unitSize]: [string, number] = getUnit(Number(value));
const [unitName, unitSize]: [string, number] = getDataUnit['Memory'](Number(value));
unit = unit.toLowerCase().replace('byte', unitName);
valueWithUnit /= unitSize;
}
......@@ -235,7 +235,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
};
return returnValue;
});
return [timeStamp, values.MessagesIn || '0', valuesWithUnit] as [number, number | string, typeof valuesWithUnit];
return [timeStamp, parsedValue || '0', valuesWithUnit] as [number, number | string, typeof valuesWithUnit];
});
result.sort((a, b) => (a[0] as number) - (b[0] as number));
const line = {
......@@ -244,9 +244,9 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
data: result as any,
};
if (maxValue > 0) {
const [unitName, unitSize]: [string, number] = getDataNumberUnit(maxValue);
const [unitName, unitSize]: [string, number] = getDataUnit['Num'](maxValue);
line.unit = `${unitName}${line.unit}`;
result.forEach((point) => ((point[1] as number) /= unitSize));
result.forEach((point) => parseFloat(((point[1] as number) /= unitSize).toFixed(3)));
}
if (result.length) {
......@@ -308,11 +308,11 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
return (
<div className="chart-panel cluster-detail-container">
<SingleChartHeader
<ChartOperateBar
onChange={ksHeaderChange}
hideNodeScope={true}
hideGridSelect={true}
indicatorSelectModule={{
metricSelect={{
hide: false,
metricType: MetricType.Cluster,
tableData: metricList,
......
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
浏览文件 @ 62f7d3f7
/* eslint-disable react/display-name */
import { Button, Divider, Drawer, Form, message, ProTable, Table, Utils } from 'knowdesign';
import { Button, Divider, Drawer, Form, ProTable, Table, Utils } from 'knowdesign';
import message from '@src/components/Message';
import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { getHealthySettingColumn } from './config';
......@@ -34,8 +35,8 @@ const HealthySetting = React.forwardRef((props: any, ref): JSX.Element => {
item.configItem.indexOf('Group Re-Balance') > -1
? 'ReBalance'
: item.configItem.includes('副本未同步')
? 'UNDER_REPLICA'
: item.configItem;
? 'UNDER_REPLICA'
: item.configItem;
values[`weight_${item.configItemName}`] = itemValue?.weight;
values[`value_${item.configItemName}`] = itemValue?.value;
......
km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
浏览文件 @ 62f7d3f7
import React from 'react';
import { MetricType } from '@src/api';
import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
import DashboardDragChart from '@src/components/DashboardDragChart';
import DraggableCharts from '@src/components/DraggableCharts';
import { AppContainer } from 'knowdesign';
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
......@@ -19,7 +19,7 @@ const TopicDashboard = () => {
/>
</div>
<TopicHealthCheck />
<DashboardDragChart type={MetricType.Topic} />
<DraggableCharts type={MetricType.Topic} />
</>
);
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或