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

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',
   },
 };

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) => {
                           </span>
                         </Tooltip>
                       </div>
-                      <div className="expand-icon-box" onClick={() => onExpand(metricName, metricType)}>
+                      {metricLines?.length > 0 && (
-                        <IconFont type="icon-chuangkoufangda" className="expand-icon" />
+                        <div className="expand-icon-box" onClick={() => onExpand(metricName, metricType)}>
-                      </div>
+                          <IconFont type="icon-chuangkoufangda" className="expand-icon" />
-                      <SingleChart
+                        </div>
-                        chartKey={metricName}
+                      )}
-                        chartTypeProp="line"
+                      {metricLines?.length > 0 ? (
-                        showHeader={false}
+                        <SingleChart
-                        wrapStyle={{
+                          chartKey={metricName}
-                          width: 'auto',
+                          chartTypeProp="line"
-                          height: 222,
+                          showHeader={false}
-                        }}
+                          wrapStyle={{
-                        connectEventName={`${metricType}BoardDragChart`}
+                            width: 'auto',
-                        eventBus={busInstance}
+                            height: 222,
-                        propChartData={metricLines}
+                          }}
-                        optionMergeProps={{ replaceMerge: autoReload ? ['xAxis'] : ['series'] }}
+                          connectEventName={`${metricType}BoardDragChart`}
-                        {...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length, showLegend)}
+                          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>
                   );
                 })}

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

@@ -90,3 +90,9 @@
     }
   }
 }
+
+.checkbox-content-margin {
+  .dcloud-checkbox-wrapper {
+    margin-right: 20px;
+  }
+}

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));
-
+          nullDataMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));
-          setMetricChartData(formattedMetricData);
+          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]);