mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-10 17:12:11 +08:00
初始化3.0.0版本
This commit is contained in:
zengqiao
@@ -0,0 +1,646 @@
|
||||
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
||||
import { AppContainer, Button, Drawer, IconFont, message, Spin, Table, SingleChart, Utils, Tooltip } from 'knowdesign';
|
||||
import moment from 'moment';
|
||||
import api, { MetricType } from '@src/api';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { debounce } from 'lodash';
|
||||
import { MetricDefaultChartDataType, MetricChartDataType, formatChartData, getDetailChartConfig } from './config';
|
||||
import { UNIT_MAP } from '@src/constants/chartConfig';
|
||||
|
||||
interface ChartDetailProps {
|
||||
metricType: MetricType;
|
||||
metricName: string;
|
||||
queryLines: string[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface MetricTableInfo {
|
||||
name: string;
|
||||
avg: number;
|
||||
max: number;
|
||||
min: number;
|
||||
latest: (string | number)[];
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface DataZoomEventProps {
|
||||
type: 'datazoom';
|
||||
// 缩放的开始位置的百分比，0 - 100
|
||||
start: number;
|
||||
// 缩放的结束位置的百分比，0 - 100
|
||||
end: number;
|
||||
}
|
||||
|
||||
// 缩放区默认选中范围比例（0.01～1）
|
||||
const DATA_ZOOM_DEFAULT_SCALE = 0.25;
|
||||
// 选中范围最少展示的时间长度（默认 10 分钟），单位: ms
|
||||
const LEAST_SELECTED_TIME_RANGE = 1 * 60 * 1000;
|
||||
// 单次向服务器请求数据的范围（默认 6 小时，超过后采集频率间隔会变长），单位: ms
|
||||
const DEFAULT_REQUEST_TIME_RANGE = 6 * 60 * 60 * 1000;
|
||||
// 采样间隔，影响前端补点逻辑，单位: ms
|
||||
const DEFAULT_POINT_INTERVAL = 60 * 1000;
|
||||
// 向服务器每轮请求的数量
|
||||
const DEFAULT_REQUEST_COUNT = 6;
|
||||
// 进入详情页默认展示的时间范围
|
||||
const DEFAULT_ENTER_TIME_RANGE = 2 * 60 * 60 * 1000;
|
||||
// 预缓存数据阈值，图表展示数据的开始时间处于前端缓存数据的时间范围的前 40% 时，向服务器请求数据
|
||||
const PRECACHE_THRESHOLD = 0.4;
|
||||
|
||||
// 表格列
|
||||
const colunms = [
|
||||
{
|
||||
title: 'Host',
|
||||
dataIndex: 'name',
|
||||
render(name: string, record: any) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 8, height: 2, marginRight: 4, background: record.color }}></div>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Avg',
|
||||
dataIndex: 'avg',
|
||||
render(num: number) {
|
||||
return num.toFixed(2);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Max',
|
||||
dataIndex: 'max',
|
||||
render(num: number, record: any) {
|
||||
return (
|
||||
<div>
|
||||
<span>{num.toFixed(2)}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Min',
|
||||
dataIndex: 'min',
|
||||
render(num: number, record: any) {
|
||||
return (
|
||||
<div>
|
||||
<span>{num.toFixed(2)}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Latest',
|
||||
dataIndex: 'latest',
|
||||
render(latest: number[]) {
|
||||
return `${latest[1].toFixed(2)}`;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const ChartDetail = (props: ChartDetailProps) => {
|
||||
const [global] = AppContainer.useGlobalValue();
|
||||
const { clusterId } = useParams<{
|
||||
clusterId: string;
|
||||
}>();
|
||||
const { metricType, metricName, queryLines, onClose } = props;
|
||||
|
||||
// 存储图表相关的不需要触发渲染的数据，用于计算图表展示状态并进行操作
|
||||
const chartInfo = useRef(
|
||||
(() => {
|
||||
// 当前时间减去 1 分钟，避免最近一分钟的数据还没采集到时前端多补一个点
|
||||
const curTime = moment().valueOf() - 60 * 1000;
|
||||
const curTimeRange = [curTime - DEFAULT_ENTER_TIME_RANGE, curTime] as const;
|
||||
|
||||
return {
|
||||
chartInstance: undefined as echarts.ECharts,
|
||||
isLoadedFullData: false,
|
||||
fullTimeRange: curTimeRange,
|
||||
fullMetricData: {} as MetricChartDataType,
|
||||
curTimeRange,
|
||||
oldDataZoomOption: {} as any,
|
||||
sliderPos: [0, 0] as readonly [number, number],
|
||||
sliderRange: '',
|
||||
transformUnit: undefined as [string, number],
|
||||
};
|
||||
})()
|
||||
);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
// 当前展示的图表数据
|
||||
const [curMetricData, setCurMetricData] = useState<MetricChartDataType>();
|
||||
// 图表数据的各项计算指标
|
||||
const [tableInfo, setTableInfo] = useState<MetricTableInfo[]>([]);
|
||||
// 选中展示的图表
|
||||
const [selectedLines, setSelectedLines] = useState<string[]>([]);
|
||||
|
||||
// 请求图表数据
|
||||
const getMetricChartData = ([startTime, endTime]: readonly [number, number]) => {
|
||||
return Utils.post(api.getDashboardMetricChartData(clusterId, metricType), {
|
||||
startTime,
|
||||
endTime,
|
||||
metricsNames: [metricName],
|
||||
topNu: null,
|
||||
[metricType === MetricType.Broker ? 'brokerIds' : 'topics']: queryLines,
|
||||
});
|
||||
};
|
||||
|
||||
const onDataZoomDrag = ({ start, end }: DataZoomEventProps) => {
|
||||
// dispatchAction 更新拖拽位置的情况，直接跳出
|
||||
if (!start && !end) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const {
|
||||
fullTimeRange: [fullStartTimestamp, fullEndTimestamp],
|
||||
curTimeRange: [oldStartTimestamp, oldEndTimestamp],
|
||||
oldDataZoomOption,
|
||||
isLoadedFullData,
|
||||
chartInstance,
|
||||
} = chartInfo.current;
|
||||
const { start: oldStart, end: oldEnd, startValue: oldStartSliderPos, endValue: oldEndSliderPos } = oldDataZoomOption;
|
||||
// 获取拖动后左右滑块的绝对位置
|
||||
const newDataZoomOption = (chartInstance.getOption() as any).dataZoom[0];
|
||||
const { startValue: newStartSliderPos, endValue: newEndSliderPos } = newDataZoomOption;
|
||||
// 计算 扩大/缩小 的比例
|
||||
const oldScale = (oldEnd - oldStart) / 100;
|
||||
const newScale = (end - start) / 100;
|
||||
const scaleRate = newScale / oldScale;
|
||||
|
||||
// 如果滑块整体拖动，则只更新拖动后滑块的位（保留小数点后三位是防止低位值的干扰）
|
||||
if (oldScale.toFixed(3) === newScale.toFixed(3)) {
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
sliderPos: [newStartSliderPos, newEndSliderPos],
|
||||
oldDataZoomOption: newDataZoomOption,
|
||||
};
|
||||
renderTableInfo();
|
||||
|
||||
return false;
|
||||
}
|
||||
// 滑块 左侧/右侧 区域所占时间范围
|
||||
const oldLeftTimeRange = oldStartSliderPos - oldStartTimestamp;
|
||||
const oldRightTimeRange = oldEndTimestamp - oldEndSliderPos;
|
||||
let leftExpandTimeRange = oldLeftTimeRange * scaleRate;
|
||||
let rightExpandTimeRange = oldRightTimeRange * scaleRate;
|
||||
let newStartTimestamp, newEndTimestamp;
|
||||
|
||||
if (scaleRate > 1) {
|
||||
// 2. 滑块拖动后缩放比例变大
|
||||
// 扩张后的右侧边界
|
||||
newEndTimestamp = newEndSliderPos + rightExpandTimeRange;
|
||||
let rightOverRange = 0;
|
||||
// 计算右侧是否能扩张这么多
|
||||
if (newEndTimestamp > fullEndTimestamp) {
|
||||
rightOverRange = newEndTimestamp - fullEndTimestamp;
|
||||
newEndTimestamp = fullEndTimestamp;
|
||||
}
|
||||
|
||||
// 扩张后的左侧边界
|
||||
newStartTimestamp = newStartSliderPos - leftExpandTimeRange - rightOverRange;
|
||||
// 在已经加载到全部数据的情况下，如果左侧扩张后的边界大于左侧最终边界，并且右侧边界还能扩张，则向右扩张
|
||||
if (isLoadedFullData && newStartTimestamp < fullStartTimestamp && newEndTimestamp < fullEndTimestamp) {
|
||||
const leftOverRange = fullStartTimestamp - newStartTimestamp;
|
||||
if (newEndTimestamp + leftOverRange >= fullEndTimestamp) {
|
||||
newEndTimestamp = fullEndTimestamp;
|
||||
} else {
|
||||
newEndTimestamp += leftOverRange;
|
||||
}
|
||||
|
||||
newStartTimestamp = fullStartTimestamp;
|
||||
}
|
||||
} else {
|
||||
// 3. 滑块拖动后缩放比例变小
|
||||
// 判断拖动后选择的时间范围并提示
|
||||
if (newEndSliderPos - newStartSliderPos < LEAST_SELECTED_TIME_RANGE) {
|
||||
// TODO: 补充逻辑
|
||||
updateChartData([oldStartTimestamp, oldEndTimestamp], [oldStartSliderPos, oldEndSliderPos]);
|
||||
message.warning(`当前选择范围小于 ${LEAST_SELECTED_TIME_RANGE / 60 / 1000} 分钟，图表可能无数据`);
|
||||
return true;
|
||||
}
|
||||
|
||||
const isOldLarger = oldScale - DATA_ZOOM_DEFAULT_SCALE > 0.01;
|
||||
const isNewLarger = newScale - DATA_ZOOM_DEFAULT_SCALE > 0.01;
|
||||
if (isOldLarger && isNewLarger) {
|
||||
// 如果拖拽前后比例均高于默认比例，则不对图表展示范围进行操作
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
sliderPos: [newStartSliderPos, newEndSliderPos],
|
||||
oldDataZoomOption: newDataZoomOption,
|
||||
};
|
||||
renderTableInfo();
|
||||
return true;
|
||||
} else {
|
||||
// 如果拖拽前比例高于默认比例，拖拽后比例低于默认比例，则重新计算缩放比例，目的是保证拖拽后显示范围占的比例为默认比例
|
||||
if (isOldLarger && !isNewLarger) {
|
||||
const newScaleRate =
|
||||
(((newEndSliderPos - newStartSliderPos) / DATA_ZOOM_DEFAULT_SCALE) * (1 - DATA_ZOOM_DEFAULT_SCALE)) /
|
||||
(oldLeftTimeRange | oldRightTimeRange);
|
||||
leftExpandTimeRange = oldLeftTimeRange * newScaleRate;
|
||||
rightExpandTimeRange = oldRightTimeRange * newScaleRate;
|
||||
}
|
||||
|
||||
newStartTimestamp = newStartSliderPos - leftExpandTimeRange;
|
||||
newEndTimestamp = newEndSliderPos + rightExpandTimeRange;
|
||||
}
|
||||
}
|
||||
|
||||
// 这时已经获取到了 扩张后需要的图表时间范围 和 扩张后的滑块的绝对位置，更新图表数据
|
||||
updateChartData([newStartTimestamp, newEndTimestamp], [newStartSliderPos, newEndSliderPos]);
|
||||
return true;
|
||||
};
|
||||
|
||||
const updateChartData = (timeRange: [number, number], sliderPos: [number, number]) => {
|
||||
const {
|
||||
fullTimeRange: [fullStartTimestamp, fullEndTimestamp],
|
||||
fullMetricData,
|
||||
isLoadedFullData,
|
||||
} = chartInfo.current;
|
||||
let leftBoundaryTimestamp = Math.floor(timeRange[0]);
|
||||
const isNeedCacheExtraData = leftBoundaryTimestamp < fullStartTimestamp + (fullEndTimestamp - fullStartTimestamp) * PRECACHE_THRESHOLD;
|
||||
|
||||
let isRendered = false;
|
||||
// 如果本地存储的数据足够展示或者已经获取到所有数据，则展示数据
|
||||
if (leftBoundaryTimestamp > fullStartTimestamp || isLoadedFullData) {
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
curTimeRange: [leftBoundaryTimestamp > fullStartTimestamp ? leftBoundaryTimestamp : fullStartTimestamp, timeRange[1]],
|
||||
sliderPos,
|
||||
};
|
||||
renderNewMetricData();
|
||||
isRendered = true;
|
||||
}
|
||||
|
||||
if (!isLoadedFullData && isNeedCacheExtraData) {
|
||||
// 向服务器请求新的数据缓存
|
||||
let reqEndTime = fullStartTimestamp;
|
||||
const requestArr: any[] = [];
|
||||
const requestTimeRanges: [number, number][] = [];
|
||||
for (let i = 0; i < DEFAULT_REQUEST_COUNT; i++) {
|
||||
setTimeout(() => {
|
||||
const nextReqEndTime = reqEndTime - DEFAULT_REQUEST_TIME_RANGE;
|
||||
requestArr.unshift(getMetricChartData([nextReqEndTime, reqEndTime]));
|
||||
requestTimeRanges.unshift([nextReqEndTime, reqEndTime]);
|
||||
reqEndTime = nextReqEndTime;
|
||||
|
||||
// 当最后一次请求发送后，处理返回
|
||||
if (i === DEFAULT_REQUEST_COUNT - 1) {
|
||||
Promise.all(requestArr).then((resList) => {
|
||||
let isSettle = -1;
|
||||
// 填充增量的图表数据
|
||||
resList.forEach((res: MetricDefaultChartDataType[], i) => {
|
||||
// 图表没有返回数据的情况
|
||||
if (!res?.length) {
|
||||
if (isSettle === -1) {
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
// 标记数据已经全部加载完毕
|
||||
isLoadedFullData: true,
|
||||
};
|
||||
isSettle = i;
|
||||
}
|
||||
} else {
|
||||
resolveAdditionChartData(res, requestTimeRanges[i]);
|
||||
}
|
||||
});
|
||||
// 更新左侧边界为当前已获取到数据的最小边界
|
||||
const curLocalStartTimestamp = Number(fullMetricData.metricLines.map((line) => line.data[0][0]).sort()[0]);
|
||||
if (leftBoundaryTimestamp < curLocalStartTimestamp) {
|
||||
leftBoundaryTimestamp = curLocalStartTimestamp;
|
||||
}
|
||||
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
fullTimeRange: [reqEndTime - DEFAULT_REQUEST_TIME_RANGE, fullEndTimestamp],
|
||||
sliderPos,
|
||||
};
|
||||
if (!isRendered) {
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
curTimeRange: [leftBoundaryTimestamp, timeRange[1]],
|
||||
};
|
||||
renderNewMetricData();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, i * 10);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理增量图表数据
|
||||
const resolveAdditionChartData = (res: MetricDefaultChartDataType[], timeRange: [number, number]) => {
|
||||
// 格式化图表需要的数据
|
||||
const formattedMetricData = formatChartData(
|
||||
res,
|
||||
global.getMetricDefine || {},
|
||||
metricType,
|
||||
timeRange,
|
||||
DEFAULT_POINT_INTERVAL,
|
||||
false,
|
||||
chartInfo.current.transformUnit
|
||||
) as MetricChartDataType[];
|
||||
// 增量填充图表数据
|
||||
const additionMetricPoints = formattedMetricData[0].metricLines;
|
||||
Object.values(additionMetricPoints).forEach((additionLine) => {
|
||||
const curLines = chartInfo.current.fullMetricData.metricLines;
|
||||
const curLine = curLines.find(({ name: metricName }) => {
|
||||
return additionLine.name === metricName;
|
||||
});
|
||||
if (!curLine) {
|
||||
// 如果没找到，说明是新的节点，直接存储
|
||||
curLines.push(additionLine);
|
||||
} else {
|
||||
curLine.data = additionLine.data.concat(curLine.data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 根据需要展示的时间范围过滤出对应的数据展示
|
||||
const renderNewMetricData = () => {
|
||||
const { fullMetricData, curTimeRange } = chartInfo.current;
|
||||
const newMetricData = { ...fullMetricData };
|
||||
newMetricData.metricLines = [...newMetricData.metricLines];
|
||||
newMetricData.metricLines.forEach((line, i) => {
|
||||
line = {
|
||||
...line,
|
||||
};
|
||||
line.data = [...line.data];
|
||||
line.data = line.data.filter((point) => {
|
||||
const result = curTimeRange[0] <= point[0] && point[0] <= curTimeRange[1];
|
||||
return result;
|
||||
});
|
||||
newMetricData.metricLines[i] = line;
|
||||
});
|
||||
// 只过滤出当前时间段有数据点的线条，确保 Table 统一展示
|
||||
newMetricData.metricLines = newMetricData.metricLines.filter((line) => line.data.length);
|
||||
setCurMetricData(newMetricData);
|
||||
};
|
||||
|
||||
// 计算当前选中范围
|
||||
const calculateSliderRange = () => {
|
||||
const { sliderPos } = chartInfo.current;
|
||||
let minutes = Number(((sliderPos[1] - sliderPos[0]) / 60 / 1000).toFixed(2));
|
||||
let hours = 0;
|
||||
let days = 0;
|
||||
if (minutes > 60) {
|
||||
hours = Math.floor(minutes / 60);
|
||||
minutes = Number((minutes % 60).toFixed(2));
|
||||
}
|
||||
if (hours > 24) {
|
||||
days = Math.floor(hours / 24);
|
||||
hours = Number((hours % 24).toFixed(2));
|
||||
}
|
||||
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
sliderRange: ` 当前选中范围: ${days > 0 ? `${days} 天 ` : ''}${hours > 0 ? `${hours} 小时 ` : ''}${minutes} 分钟`,
|
||||
};
|
||||
};
|
||||
|
||||
// 遍历图表，获取需要的指标数据，展示到 Table
|
||||
const renderTableInfo = () => {
|
||||
const tableData: MetricTableInfo[] = [];
|
||||
const { sliderPos, chartInstance } = chartInfo.current;
|
||||
const { color }: any = chartInstance.getOption();
|
||||
|
||||
curMetricData.metricLines.forEach(({ name, data }, i) => {
|
||||
const lineInfo: MetricTableInfo = {
|
||||
name,
|
||||
avg: -1,
|
||||
max: -1,
|
||||
min: Number.MAX_SAFE_INTEGER,
|
||||
latest: ['0', -1],
|
||||
color: color[i % color.length],
|
||||
};
|
||||
|
||||
const curShowPoints = data.filter((point) => sliderPos[0] < point[0] && point[0] < sliderPos[1]);
|
||||
// 如果该节点在当前时间范围无数据，直接退出
|
||||
if (!curShowPoints.length) {
|
||||
return false;
|
||||
}
|
||||
const all = curShowPoints.reduce((pre: number, cur) => {
|
||||
const curVal = cur[1] as number;
|
||||
|
||||
if (curVal > lineInfo.max) {
|
||||
lineInfo.max = curVal;
|
||||
}
|
||||
if (curVal < lineInfo.min) {
|
||||
lineInfo.min = curVal;
|
||||
}
|
||||
|
||||
pre += curVal;
|
||||
return pre;
|
||||
}, 0);
|
||||
|
||||
lineInfo.avg = all / curShowPoints.length;
|
||||
lineInfo.latest = curShowPoints[curShowPoints.length - 1];
|
||||
tableData.push(lineInfo);
|
||||
return true;
|
||||
});
|
||||
|
||||
calculateSliderRange();
|
||||
setTableInfo(tableData);
|
||||
setSelectedLines(tableData.map((line) => line.name));
|
||||
};
|
||||
|
||||
const tableLineChange = (keys: string[]) => {
|
||||
const updatedLines: { [name: string]: boolean } = {};
|
||||
selectedLines.forEach((name) => !keys.includes(name) && (updatedLines[name] = false));
|
||||
keys.forEach((name) => !selectedLines.includes(name) && (updatedLines[name] = true));
|
||||
|
||||
// 更新
|
||||
Object.keys(updatedLines).forEach((name) => {
|
||||
chartInfo.current.chartInstance.dispatchAction({
|
||||
type: 'legendToggleSelect',
|
||||
// 图例名称
|
||||
name: name,
|
||||
});
|
||||
});
|
||||
|
||||
setSelectedLines(keys);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (curMetricData) {
|
||||
setTimeout(() => {
|
||||
// 新的图表数据渲染后，更新图表拖拽轴信息
|
||||
chartInfo.current.oldDataZoomOption = (chartInfo.current.chartInstance.getOption() as any).dataZoom[0];
|
||||
});
|
||||
renderTableInfo();
|
||||
}
|
||||
}, [curMetricData]);
|
||||
|
||||
// 进入详情时，首次获取数据
|
||||
useEffect(() => {
|
||||
if (metricType && metricName) {
|
||||
setLoading(true);
|
||||
const { curTimeRange } = chartInfo.current;
|
||||
getMetricChartData(curTimeRange).then((res: any[] | null) => {
|
||||
// 如果图表返回数据
|
||||
if (res?.length) {
|
||||
// 格式化图表需要的数据
|
||||
const formattedMetricData = (
|
||||
formatChartData(
|
||||
res,
|
||||
global.getMetricDefine || {},
|
||||
metricType,
|
||||
curTimeRange,
|
||||
DEFAULT_POINT_INTERVAL,
|
||||
false
|
||||
) as MetricChartDataType[]
|
||||
)[0];
|
||||
// 填充图表数据
|
||||
let initFullTimeRange = curTimeRange;
|
||||
const pointsOfFirstLine = formattedMetricData.metricLines.find((line) => line.data.length).data;
|
||||
if (pointsOfFirstLine) {
|
||||
initFullTimeRange = [pointsOfFirstLine[0][0] as number, pointsOfFirstLine[pointsOfFirstLine.length - 1][0] as number] as const;
|
||||
}
|
||||
|
||||
// 获取单位保存起来
|
||||
let transformUnit = undefined;
|
||||
Object.entries(UNIT_MAP).forEach((unit) => {
|
||||
if (formattedMetricData.metricUnit.includes(unit[0])) {
|
||||
transformUnit = unit;
|
||||
}
|
||||
});
|
||||
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
fullMetricData: formattedMetricData,
|
||||
fullTimeRange: [...initFullTimeRange],
|
||||
curTimeRange: [...initFullTimeRange],
|
||||
sliderPos: [
|
||||
initFullTimeRange[1] - (initFullTimeRange[1] - initFullTimeRange[0]) * DATA_ZOOM_DEFAULT_SCALE,
|
||||
initFullTimeRange[1],
|
||||
],
|
||||
transformUnit,
|
||||
};
|
||||
setCurMetricData(formattedMetricData);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const debounced = debounce(onDataZoomDrag, 300);
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<div className="chart-detail-modal-container">
|
||||
{curMetricData && (
|
||||
<>
|
||||
<div className="detail-title">
|
||||
<div className="left">
|
||||
<div className="title">
|
||||
<Tooltip
|
||||
placement="bottomLeft"
|
||||
title={() => {
|
||||
let content = '';
|
||||
const metricDefine = global.getMetricDefine(metricType, curMetricData.metricName);
|
||||
if (metricDefine) {
|
||||
content = metricDefine.desc;
|
||||
}
|
||||
return content;
|
||||
}}
|
||||
>
|
||||
<span style={{ cursor: 'pointer' }}>
|
||||
<span>{curMetricData.metricName}</span> <span className="unit">({curMetricData.metricUnit}) </span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="info">{chartInfo.current.sliderRange}</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<Button type="text" size="small" onClick={onClose}>
|
||||
<IconFont type="icon-guanbi" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<SingleChart
|
||||
chartTypeProp="line"
|
||||
wrapStyle={{
|
||||
width: 'auto',
|
||||
height: 462,
|
||||
}}
|
||||
onEvents={{
|
||||
dataZoom: (record: any) => {
|
||||
debounced(record);
|
||||
},
|
||||
}}
|
||||
propChartData={curMetricData.metricLines}
|
||||
optionMergeProps={{ notMerge: true }}
|
||||
getChartInstance={(chartInstance) => {
|
||||
chartInfo.current = {
|
||||
...chartInfo.current,
|
||||
chartInstance,
|
||||
};
|
||||
}}
|
||||
{...getDetailChartConfig(`${curMetricData.metricName}{unit|（${curMetricData.metricUnit}）}`, chartInfo.current.sliderPos)}
|
||||
/>
|
||||
<Table
|
||||
className="detail-table"
|
||||
rowKey="name"
|
||||
rowSelection={{
|
||||
// hideSelectAll: true,
|
||||
preserveSelectedRowKeys: true,
|
||||
selectedRowKeys: selectedLines,
|
||||
// getCheckboxProps: (record) => {
|
||||
// return selectedLines.length <= 1 && selectedLines.includes(record.name)
|
||||
// ? {
|
||||
// disabled: true,
|
||||
// }
|
||||
// : {};
|
||||
// },
|
||||
selections: [Table.SELECTION_INVERT, Table.SELECTION_NONE],
|
||||
onChange: (keys: string[]) => tableLineChange(keys),
|
||||
}}
|
||||
scroll={{
|
||||
x: 'max-content',
|
||||
y: 'calc(100vh - 582px)',
|
||||
}}
|
||||
dataSource={tableInfo}
|
||||
columns={colunms as any}
|
||||
pagination={false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const ChartDrawer = forwardRef((_, ref) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [dashboardType, setDashboardType] = useState<MetricType>();
|
||||
const [metricName, setMetricName] = useState<string>();
|
||||
const [queryLines, setQueryLines] = useState<string[]>([]);
|
||||
|
||||
const onOpen = (dashboardType: MetricType, metricName: string, queryLines: string[]) => {
|
||||
setDashboardType(dashboardType);
|
||||
setMetricName(metricName);
|
||||
setQueryLines(queryLines);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setVisible(false);
|
||||
setDashboardType(undefined);
|
||||
setMetricName(undefined);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
onOpen,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Drawer width={1080} visible={visible} footer={null} closable={false} maskClosable={false} destroyOnClose={true} onClose={onClose}>
|
||||
{dashboardType && metricName && (
|
||||
<ChartDetail metricType={dashboardType} metricName={metricName} queryLines={queryLines} onClose={onClose} />
|
||||
)}
|
||||
</Drawer>
|
||||
);
|
||||
});
|
||||
|
||||
export default ChartDrawer;
|
||||
@@ -0,0 +1,198 @@
|
||||
import { getUnit, getDataNumberUnit, getBasicChartConfig } 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;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const timestamp = data[i][0] as number;
|
||||
// 数组第一个点和最后一个点单独处理
|
||||
if (i === 0) {
|
||||
let firstPointTimestamp = data[0][0] as number;
|
||||
while (firstPointTimestamp - interval > timeRange[0]) {
|
||||
const prePointTimestamp = firstPointTimestamp - interval;
|
||||
data.unshift(extraCallback ? extraCallback([prePointTimestamp, 0]) : [prePointTimestamp, 0]);
|
||||
len++;
|
||||
i++;
|
||||
firstPointTimestamp = prePointTimestamp;
|
||||
}
|
||||
}
|
||||
if (i === len - 1) {
|
||||
let lastPointTimestamp = data[len - 1][0] as number;
|
||||
while (lastPointTimestamp + interval < timeRange[1]) {
|
||||
const next = lastPointTimestamp + interval;
|
||||
data.push(extraCallback ? extraCallback([next, 0]) : [next, 0]);
|
||||
lastPointTimestamp = next;
|
||||
}
|
||||
} else if (timestamp + interval < data[i + 1][0]) {
|
||||
data.splice(i + 1, 0, extraCallback ? extraCallback([timestamp + interval, 0]) : [timestamp + interval, 0]);
|
||||
len++;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 格式化图表数据
|
||||
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][] }[]) => {
|
||||
// series 配置
|
||||
return lines.map((line) => {
|
||||
return {
|
||||
...line,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
},
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 4,
|
||||
// emphasis: {
|
||||
// focus: 'self',
|
||||
// },
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 返回图表配置
|
||||
export const getChartConfig = (title: string, metricLength: number) => {
|
||||
return {
|
||||
option: getBasicChartConfig({
|
||||
title: { show: false },
|
||||
grid: { top: 24 },
|
||||
tooltip: { enterable: metricLength > 9, legendContextMaxHeight: 192 },
|
||||
// xAxis: {
|
||||
// type: 'time',
|
||||
// boundaryGap: ['5%', '5%'],
|
||||
// },
|
||||
}),
|
||||
seriesCallback,
|
||||
};
|
||||
};
|
||||
|
||||
export const getDetailChartConfig = (title: string, sliderPos: readonly [number, number]) => {
|
||||
return {
|
||||
option: getBasicChartConfig({
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
startValue: sliderPos[0],
|
||||
endValue: sliderPos[1],
|
||||
zoomOnMouseWheel: false,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 0,
|
||||
},
|
||||
],
|
||||
}),
|
||||
seriesCallback,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
.topic-dashboard {
|
||||
height: calc(100% - 160px);
|
||||
padding-bottom: 10px;
|
||||
.ks-chart-container-header {
|
||||
margin-top: 12px;
|
||||
}
|
||||
&-container {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
.drag-sort-item:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dashboard-drag-item-box {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 262px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
|
||||
&-title {
|
||||
padding: 18px 0 0 20px;
|
||||
font-family: @font-family-bold;
|
||||
line-height: 16px;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
}
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #495057;
|
||||
}
|
||||
> span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.expand-icon-box {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 14px;
|
||||
right: 44px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
.expand-icon {
|
||||
color: #adb5bc;
|
||||
line-height: 24px;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(33, 37, 41, 0.06);
|
||||
.expand-icon {
|
||||
color: #74788d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-detail-modal-container {
|
||||
position: relative;
|
||||
.expand-icon-box {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 14px;
|
||||
right: 44px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
.expand-icon {
|
||||
color: #adb5bc;
|
||||
line-height: 24px;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(33, 37, 41, 0.04);
|
||||
.expand-icon {
|
||||
color: #74788d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-family: @font-family-bold;
|
||||
font-size: 18px;
|
||||
color: #495057;
|
||||
letter-spacing: 0;
|
||||
.unit {
|
||||
font-family: @font-family-bold;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { arrayMoveImmutable } from 'array-move';
|
||||
import { Utils, Empty, IconFont, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesign';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import api, { MetricType } from '@src/api';
|
||||
import SingleChartHeader, { KsHeaderOptions } from '../SingleChartHeader';
|
||||
import DragGroup from '../DragGroup';
|
||||
import ChartDetail from './ChartDetail';
|
||||
import { MetricInfo, MetricDefaultChartDataType, MetricChartDataType, formatChartData, getChartConfig } from './config';
|
||||
import './index.less';
|
||||
import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
|
||||
|
||||
interface IcustomScope {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
type ChartFilterOptions = Omit<KsHeaderOptions, 'gridNum'>;
|
||||
|
||||
type PropsType = {
|
||||
type: MetricType;
|
||||
};
|
||||
|
||||
const { EventBus } = Utils;
|
||||
const busInstance = new EventBus();
|
||||
|
||||
const DRAG_GROUP_GUTTER_NUM: [number, number] = [16, 16];
|
||||
|
||||
const DashboardDragChart = (props: PropsType): JSX.Element => {
|
||||
const [global] = AppContainer.useGlobalValue();
|
||||
const { type: dashboardType } = props;
|
||||
const { clusterId } = useParams<{
|
||||
clusterId: string;
|
||||
}>();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [scopeList, setScopeList] = useState<IcustomScope[]>([]); // 节点范围列表
|
||||
const [metricsList, setMetricsList] = useState<MetricInfo[]>([]); // 指标列表
|
||||
const [selectedMetricNames, setSelectedMetricNames] = useState<(string | number)[]>([]); // 默认选中的指标的列表
|
||||
const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
|
||||
const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
|
||||
const [gridNum, setGridNum] = useState<number>(8); // 图表列布局
|
||||
const chartDetailRef = useRef(null);
|
||||
const chartDragOrder = useRef([]);
|
||||
const curFetchingTimestamp = useRef(0);
|
||||
|
||||
// 获取节点范围列表
|
||||
const getScopeList = async () => {
|
||||
const res: any = await Utils.request(api.getDashboardMetadata(clusterId, dashboardType));
|
||||
const list = res.map((item: any) => {
|
||||
return dashboardType === MetricType.Broker
|
||||
? {
|
||||
label: item.host,
|
||||
value: item.brokerId,
|
||||
}
|
||||
: {
|
||||
label: item.topicName,
|
||||
value: item.topicName,
|
||||
};
|
||||
});
|
||||
setScopeList(list);
|
||||
};
|
||||
|
||||
// 获取指标列表
|
||||
const getMetricList = () => {
|
||||
Utils.request(api.getDashboardMetricList(clusterId, dashboardType)).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);
|
||||
setMetricsList(showMetrics);
|
||||
setSelectedMetricNames(selectedMetrics);
|
||||
});
|
||||
};
|
||||
|
||||
// 更新指标
|
||||
const setMetricList = (metricsSet: { [name: string]: boolean }) => {
|
||||
return Utils.request(api.getDashboardMetricList(clusterId, dashboardType), {
|
||||
method: 'POST',
|
||||
data: {
|
||||
metricsSet,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 根据筛选项获取图表信息
|
||||
const getMetricChartData = () => {
|
||||
!curHeaderOptions.isAutoReload && setLoading(true);
|
||||
const [startTime, endTime] = curHeaderOptions.rangeTime;
|
||||
|
||||
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) => {
|
||||
// 如果当前请求不是最新请求，则不做任何操作
|
||||
if (curFetchingTimestamp.current !== curTimestamp) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (res === null) {
|
||||
// 结果为 null 时，不展示图表
|
||||
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,
|
||||
supplementaryInterval,
|
||||
true
|
||||
) as MetricChartDataType[];
|
||||
// 处理图表的拖拽顺序
|
||||
if (chartDragOrder.current && chartDragOrder.current.length) {
|
||||
// 根据当前拖拽顺序排列图表数据
|
||||
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);
|
||||
},
|
||||
() => {
|
||||
if (curFetchingTimestamp.current === curTimestamp) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// 筛选项变化或者点击刷新按钮
|
||||
const ksHeaderChange = (ksOptions: KsHeaderOptions) => {
|
||||
// 重新渲染图表
|
||||
if (gridNum !== ksOptions.gridNum) {
|
||||
setGridNum(ksOptions.gridNum || 8);
|
||||
busInstance.emit('chartResize');
|
||||
} else {
|
||||
// 如果为相对时间，则当前时间减去 1 分钟，避免最近一分钟的数据还没采集到时前端多补一个点
|
||||
if (ksOptions.isRelativeRangeTime) {
|
||||
ksOptions.rangeTime = ksOptions.rangeTime.map((timestamp) => timestamp - 60 * 1000) as [number, number];
|
||||
}
|
||||
setCurHeaderOptions({
|
||||
isRelativeRangeTime: ksOptions.isRelativeRangeTime,
|
||||
isAutoReload: ksOptions.isAutoReload,
|
||||
rangeTime: ksOptions.rangeTime,
|
||||
scopeData: ksOptions.scopeData,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 指标选中项更新回调
|
||||
const indicatorChangeCallback = (newMetricNames: (string | number)[]) => {
|
||||
const updateMetrics: { [name: string]: boolean } = {};
|
||||
// 需要选中的指标
|
||||
newMetricNames.forEach((name) => !selectedMetricNames.includes(name) && (updateMetrics[name] = true));
|
||||
// 取消选中的指标
|
||||
selectedMetricNames.forEach((name) => !newMetricNames.includes(name) && (updateMetrics[name] = false));
|
||||
|
||||
const requestPromise = Object.keys(updateMetrics).length ? setMetricList(updateMetrics) : Promise.resolve();
|
||||
requestPromise.then(
|
||||
() => getMetricList(),
|
||||
() => getMetricList()
|
||||
);
|
||||
|
||||
return requestPromise;
|
||||
};
|
||||
|
||||
// 拖拽开始回调，触发图表的 onDrag 事件（ 设置为 true ），禁止同步展示图表的 tooltip
|
||||
const dragStart = () => {
|
||||
busInstance.emit('onDrag', true);
|
||||
};
|
||||
|
||||
// 拖拽结束回调，更新图表顺序，并触发图表的 onDrag 事件（ 设置为 false ），允许同步展示图表的 tooltip
|
||||
const dragEnd = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
|
||||
busInstance.emit('onDrag', false);
|
||||
chartDragOrder.current = arrayMoveImmutable(chartDragOrder.current, oldIndex, newIndex);
|
||||
setMetricChartData(arrayMoveImmutable(metricChartData, oldIndex, newIndex));
|
||||
};
|
||||
|
||||
// 监听盒子宽度变化，重置图表宽度
|
||||
const observeDashboardWidthChange = () => {
|
||||
const targetNode = document.getElementsByClassName('dcd-two-columns-layout-sider-footer')[0];
|
||||
targetNode && targetNode.addEventListener('click', () => busInstance.emit('chartResize'));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedMetricNames.length && curHeaderOptions) {
|
||||
getMetricChartData();
|
||||
}
|
||||
}, [curHeaderOptions, selectedMetricNames]);
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化页面，获取 scope 和 metric 信息
|
||||
getScopeList();
|
||||
getMetricList();
|
||||
|
||||
setTimeout(() => observeDashboardWidthChange());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="dashboard-drag-chart" className="topic-dashboard">
|
||||
<SingleChartHeader
|
||||
onChange={ksHeaderChange}
|
||||
nodeScopeModule={{
|
||||
customScopeList: scopeList,
|
||||
scopeName: `自定义 ${dashboardType === MetricType.Broker ? 'Broker' : 'Topic'} 范围`,
|
||||
showSearch: dashboardType === MetricType.Topic,
|
||||
}}
|
||||
indicatorSelectModule={{
|
||||
hide: false,
|
||||
metricType: dashboardType,
|
||||
tableData: metricsList,
|
||||
selectedRows: selectedMetricNames,
|
||||
submitCallback: indicatorChangeCallback,
|
||||
}}
|
||||
/>
|
||||
<div className="topic-dashboard-container">
|
||||
<Spin spinning={loading} style={{ height: 400 }}>
|
||||
{metricChartData && metricChartData.length ? (
|
||||
<div className="no-group-con">
|
||||
<DragGroup
|
||||
sortableContainerProps={{
|
||||
onSortStart: dragStart,
|
||||
onSortEnd: dragEnd,
|
||||
axis: 'xy',
|
||||
useDragHandle: true,
|
||||
}}
|
||||
gridProps={{
|
||||
span: gridNum,
|
||||
gutter: DRAG_GROUP_GUTTER_NUM,
|
||||
}}
|
||||
>
|
||||
{metricChartData.map((data) => {
|
||||
const { metricName, metricUnit, metricLines } = data;
|
||||
|
||||
return (
|
||||
<div key={metricName} className="dashboard-drag-item-box">
|
||||
<div className="dashboard-drag-item-box-title">
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
title={() => {
|
||||
let content = '';
|
||||
const metricDefine = global.getMetricDefine(dashboardType, metricName);
|
||||
if (metricDefine) {
|
||||
content = metricDefine.desc;
|
||||
}
|
||||
return content;
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<span className="name">{metricName}</span>
|
||||
<span className="unit">（{metricUnit}）</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className="expand-icon-box"
|
||||
onClick={() => {
|
||||
const linesName = scopeList.map((item) => item.value);
|
||||
chartDetailRef.current.onOpen(dashboardType, metricName, linesName);
|
||||
}}
|
||||
>
|
||||
<IconFont type="icon-chuangkoufangda" className="expand-icon" />
|
||||
</div>
|
||||
<SingleChart
|
||||
chartKey={metricName}
|
||||
chartTypeProp="line"
|
||||
showHeader={false}
|
||||
wrapStyle={{
|
||||
width: 'auto',
|
||||
height: 222,
|
||||
}}
|
||||
connectEventName={`${dashboardType}BoardDragChart`}
|
||||
eventBus={busInstance}
|
||||
propChartData={metricLines}
|
||||
optionMergeProps={{ replaceMerge: curHeaderOptions.isAutoReload ? ['xAxis'] : ['series'] }}
|
||||
{...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</DragGroup>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<></>
|
||||
) : (
|
||||
<Empty description="数据为空，请选择指标或刷新" image={Empty.PRESENTED_IMAGE_CUSTOM} style={{ padding: '100px 0' }} />
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
{/* 图表详情 */}
|
||||
<ChartDetail ref={chartDetailRef} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardDragChart;
|
||||
Reference in New Issue
Block a user