8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2025-12-24 03:42:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Optimize]Overview指标卡片展示逻辑

Browse Source
This commit is contained in:
wyb
2023-02-10 17:11:23 +08:00
committed by lucasun
parent a0371ab88b
commit 5c6911e398
4 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
km-console/.eslintrc.js
View File

@@ -30,5 +30,6 @@ module.exports = {
'prettier/prettier': 2, // 这项配置 对于不符合prettier规范的写法，eslint会提示报错
'no-console': 1,
'react/display-name': 0,
'@typescript-eslint/explicit-module-boundary-types': 'off',
},
};

45
km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx
View File

@@ -24,7 +24,6 @@ const ChartList = (props: ChartListProps) => {
const { loading, gridNum, data, autoReload, busInstance, dragCallback, onExpand } = props;
const [global] = AppContainer.useGlobalValue();
const [chartData, setChartData] = useState(data);
// 拖拽开始回调，触发图表的 onDrag 事件（ 设置为 true ），禁止同步展示图表的 tooltip
const dragStart = () => {
busInstance.emit('onDrag', true);
@@ -105,23 +104,33 @@ const ChartList = (props: ChartListProps) => {
</span>
</Tooltip>
</div>
<div className="expand-icon-box" onClick={() => onExpand(metricName, metricType)}>
<IconFont type="icon-chuangkoufangda" className="expand-icon" />
</div>
<SingleChart
chartKey={metricName}
chartTypeProp="line"
showHeader={false}
wrapStyle={{
width: 'auto',
height: 222,
}}
connectEventName={`${metricType}BoardDragChart`}
eventBus={busInstance}
propChartData={metricLines}
optionMergeProps={{ replaceMerge: autoReload ? ['xAxis'] : ['series'] }}
{...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length, showLegend)}
/>
{metricLines?.length > 0 && (
<div className="expand-icon-box" onClick={() => onExpand(metricName, metricType)}>
<IconFont type="icon-chuangkoufangda" className="expand-icon" />
</div>
)}
{metricLines?.length > 0 ? (
<SingleChart
chartKey={metricName}
chartTypeProp="line"
showHeader={false}
wrapStyle={{
width: 'auto',
height: 222,
}}
connectEventName={`${metricType}BoardDragChart`}
eventBus={busInstance}
propChartData={metricLines}
optionMergeProps={{ replaceMerge: autoReload ? ['xAxis'] : ['series'] }}
{...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length, showLegend)}
/>
) : (
<Empty
description="指标采集失败，请刷新或联系管理员排查"
image={Empty.PRESENTED_IMAGE_CUSTOM}
style={{ padding: '40px 0' }}
/>
)}
</div>
);
})}

6
km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less
View File

@@ -89,4 +89,10 @@
background: #F8F9FA;
}
}
}
.checkbox-content-margin {
.dcloud-checkbox-wrapper {
margin-right: 20px;
}
}

43
km-console/packages/layout-clusters-fe/src/pages/ConnectDashboard/index.tsx
View File

@@ -103,17 +103,53 @@ const DraggableCharts = (): JSX.Element => {
MetricType.Connect,
curHeaderOptions.rangeTime
) as FormattedMetricData[];
// todo 将指标筛选选中但是没有返回的指标插入chartData中
const newConnectClusterData: any = [];
metricList[MetricType.Connect]?.forEach((item) => {
if (connectClusterData && connectClusterData.some((key) => item === key.metricName)) {
newConnectClusterData.push(null);
} else {
const chartData: any = {
metricName: item,
metricType: MetricType.Connect,
metricUnit: global.getMetricDefine(MetricType.Connect, item)?.unit || '',
metricLines: [],
showLegend: false,
targetUnit: undefined,
};
newConnectClusterData.push(chartData);
}
});
const connectorData = formatChartData(
res[1],
global.getMetricDefine || {},
MetricType.Connectors,
curHeaderOptions.rangeTime
) as FormattedMetricData[];
// todo 将指标筛选选中但是没有返回的指标插入chartData中
const newConnectorData: any = [];
metricList[MetricType.Connectors]?.forEach((item) => {
if (connectorData && connectorData.some((key) => item === key.metricName)) {
newConnectorData.push(null);
} else {
const chartData: any = {
metricName: item,
metricType: MetricType.Connectors,
metricUnit: global.getMetricDefine(MetricType.Connectors, item)?.unit || '',
metricLines: [],
showLegend: false,
targetUnit: undefined,
};
newConnectorData.push(chartData);
}
});
// 指标排序
const formattedMetricData = [...connectClusterData, ...connectorData];
const nullDataMetricData = [...newConnectClusterData, ...newConnectorData].filter((item) => item !== null);
formattedMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
setMetricChartData(formattedMetricData);
nullDataMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
setMetricChartData([...formattedMetricData, ...nullDataMetricData]);
} else {
setMetricChartData([]);
}
@@ -186,6 +222,9 @@ const DraggableCharts = (): JSX.Element => {
if (Object.values(metricList).some((list) => list.length) && curHeaderOptions) {
setLoading(true);
getMetricChartData();
} else {
setMetricChartData([]);
setLoading(false);
}
}, [metricList]);