From 5c6911e398139c53a4aa0e9d1d37e508098d6402 Mon Sep 17 00:00:00 2001
From: wyb <wangyubo_v@didiglobal.com>
Date: Fri, 10 Feb 2023 17:11:23 +0800
Subject: [PATCH] =?UTF-8?q?[Optimize]Overview=E6=8C=87=E6=A0=87=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 km-console/.eslintrc.js                       |  1 +
 .../components/DraggableCharts/ChartList.tsx  | 45 +++++++++++--------
 .../src/components/TopicJob/index.less        |  6 +++
 .../src/pages/ConnectDashboard/index.tsx      | 43 +++++++++++++++++-
 4 files changed, 75 insertions(+), 20 deletions(-)

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) => {
                           </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>
                   );
                 })}
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]);