diff --git a/km-console/.eslintrc.js b/km-console/.eslintrc.js index 1e900306..94649d20 100644 --- a/km-console/.eslintrc.js +++ b/km-console/.eslintrc.js @@ -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', }, }; diff --git a/km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx b/km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx index a9d883ae..559aa0a9 100644 --- a/km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx @@ -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) => { -
onExpand(metricName, metricType)}> - -
- + {metricLines?.length > 0 && ( +
onExpand(metricName, metricType)}> + +
+ )} + {metricLines?.length > 0 ? ( + + ) : ( + + )} ); })} diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less b/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less index 794a252e..31c5914c 100644 --- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less +++ b/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less @@ -89,4 +89,10 @@ background: #F8F9FA; } } +} + +.checkbox-content-margin { + .dcloud-checkbox-wrapper { + margin-right: 20px; + } } \ No newline at end of file diff --git a/km-console/packages/layout-clusters-fe/src/pages/ConnectDashboard/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/ConnectDashboard/index.tsx index 8dd47926..f1b4481e 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/ConnectDashboard/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/ConnectDashboard/index.tsx @@ -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]);