feat: Cluster 图表去掉放大功能

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.less

@@ -1,53 +1,20 @@
-.cluster-container-border {
+.cluster-detail-container-border {
-  background: #ffffff;
+  background: #fff;
   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);
   border-radius: 12px;
 }
 
 .cluster-detail-container {
-  width: 100%;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    height: 36px;
-
-    .refresh-icon-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 22px;
-      height: 22px;
-      border-radius: 50%;
-      cursor: pointer;
-
-      .refresh-icon {
-        font-size: 14px;
-        color: #74788d;
-      }
-
-      &:hover {
-        background: #21252904;
-
-        .refresh-icon {
-          color: #495057;
-        }
-      }
-    }
-  }
-
   &-main {
     .header-chart-container {
-      width: 100%;
       height: 244px;
       margin-bottom: 12px;
-      .cluster-container-border();
+      .cluster-detail-container-border();
       .dcloud-spin.dcloud-spin-spinning {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 100%;
+        height: 100%;
-        height: 244px;
       }
     }
 
@@ -61,7 +28,7 @@
         flex: 1;
         height: 100%;
         overflow: hidden;
-        .cluster-container-border();
+        .cluster-detail-container-border();
         > div {
           width: 100%;
           height: 100%;
@@ -73,65 +40,64 @@
           justify-content: center;
           align-items: center;
         }
-
-        .chart-box {
-          position: relative;
-          width: 100%;
-          height: 244px;
-          background: #f8f9fa;
-          border-radius: 8px;
-
-          .expand-icon-box {
-            position: absolute;
-            z-index: 1000;
-            top: 14px;
-            right: 16px;
-            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;
-              }
-            }
-          }
-        }
       }
 
       .config-change-records-container {
         width: 240px;
         height: 100%;
         margin-left: 12px;
-        .cluster-container-border();
+        .cluster-detail-container-border();
       }
     }
   }
+}
 
-  .chart-box-title {
+.cluster-detail-chart-box {
-    padding: 18px 0 0 20px;
+  position: relative;
-    font-family: @font-family-bold;
+  width: 100%;
-    line-height: 16px;
+  height: 244px;
-    .name {
+  background: #f8f9fa;
-      font-size: 14px;
+  border-radius: 8px;
-      color: #212529;
+
+  .expand-icon-box {
+    position: absolute;
+    z-index: 1000;
+    top: 14px;
+    right: 16px;
+    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;
     }
-    .unit {
+
-      font-size: 12px;
+    &:hover {
-      color: #495057;
+      background: rgba(33, 37, 41, 0.06);
-    }
+      .expand-icon {
-    > span {
+        color: #74788d;
-      cursor: pointer;
+      }
     }
   }
 }
+.cluster-detail-chart-box-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;
+  }
+}

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx

@@ -15,6 +15,7 @@ import { getDataNumberUnit, getUnit } from '@src/constants/chartConfig';
 import SingleChartHeader, { KsHeaderOptions } from '@src/components/SingleChartHeader';
 import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
 import RenderEmpty from '@src/components/RenderEmpty';
+import DragGroup from '@src/components/DragGroup';
 
 type ChartFilterOptions = Omit<KsHeaderOptions, 'gridNum'>;
 interface MetricInfo {
@@ -279,7 +280,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
   }, []);
 
   return (
-    <div className="cluster-detail-container">
+    <div className="chart-panel cluster-detail-container">
       <SingleChartHeader
         onChange={ksHeaderChange}
         hideNodeScope={true}
@@ -306,7 +307,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <Spin spinning={defaultChartLoading}>
             {messagesInMetricData.data && (
               <>
-                <div className="chart-box-title">
+                <div className="cluster-detail-chart-box-title">
                   <Tooltip
                     placement="topLeft"
                     title={() => {
@@ -354,14 +355,25 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <div className="multiple-chart-container">
             <div className={!metricDataList.length ? 'multiple-chart-container-loading' : ''}>
               <Spin spinning={chartLoading}>
-                <Row gutter={[16, 16]}>
+                {metricDataList.length ? (
-                  {metricDataList.length ? (
+                  <div className="no-group-con">
-                    metricDataList.map((data: any, i: number) => {
+                    <DragGroup
-                      const { metricName, metricUnit, metricLines } = data;
+                      sortableContainerProps={{
-                      return (
+                        onSortStart: () => 0,
-                        <Col key={metricName} span={12}>
+                        onSortEnd: () => 0,
-                          <div className="chart-box">
+                        axis: 'xy',
-                            <div className="chart-box-title">
+                        useDragHandle: false,
+                      }}
+                      gridProps={{
+                        span: 12,
+                        gutter: [16, 16],
+                      }}
+                    >
+                      {metricDataList.map((data: any, i: number) => {
+                        const { metricName, metricUnit, metricLines } = data;
+                        return (
+                          <div key={metricName} className="cluster-detail-chart-box">
+                            <div className="cluster-detail-chart-box-title">
                               <Tooltip
                                 placement="topLeft"
                                 title={() => {
@@ -379,15 +391,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
                                 </span>
                               </Tooltip>
                             </div>
-                            <div
-                              className="expand-icon-box"
-                              onClick={() => {
-                                setChartDetail(data);
-                                setShowChartDetailModal(true);
-                              }}
-                            >
-                              <IconFont type="icon-chuangkoufangda" className="expand-icon" />
-                            </div>
                             <SingleChart
                               chartKey={metricName}
                               showHeader={false}
@@ -405,15 +408,15 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
                               })}
                             />
                           </div>
-                        </Col>
+                        );
-                      );
+                      })}
-                    })
+                    </DragGroup>
-                  ) : chartLoading ? (
+                  </div>
-                    <></>
+                ) : chartLoading ? (
-                  ) : (
+                  <></>
-                    <RenderEmpty message="请先选择指标或刷新" />
+                ) : (
-                  )}
+                  <RenderEmpty message="请先选择指标或刷新" />
-                </Row>
+                )}
               </Spin>
             </div>
           </div>
@@ -421,35 +424,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <div className="config-change-records-container">{props.children}</div>
         </div>
       </div>
-
-      {/* 图表详情 */}
-      <Modal
-        width={1080}
-        visible={showChartDetailModal}
-        centered={true}
-        footer={null}
-        closable={false}
-        onCancel={() => setShowChartDetailModal(false)}
-      >
-        <div className="chart-detail-modal-container">
-          <div className="expand-icon-box" onClick={() => setShowChartDetailModal(false)}>
-            <IconFont type="icon-chuangkousuoxiao" className="expand-icon" />
-          </div>
-          {chartDetail && (
-            <SingleChart
-              chartTypeProp="line"
-              wrapStyle={{
-                width: 'auto',
-                height: 462,
-              }}
-              propChartData={chartDetail.metricLines}
-              {...getChartConfig({
-                metricName: `${chartDetail.metricName}{unit|（${chartDetail.metricUnit}）}`,
-              })}
-            />
-          )}
-        </div>
-      </Modal>
     </div>
   );
 };

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less

@@ -231,9 +231,10 @@
     }
 
     .chart-panel {
-      flex: 1;
+      flex: auto;
       margin-left: 12px;
       margin-right: 10px;
+      overflow: hidden;
     }
 
     .change-log-panel {

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx

@@ -21,11 +21,9 @@ const SingleClusterDetail = (): JSX.Element => {
         </div>
         <div className="cluster-detail">
           <LeftSider />
-          <div className="chart-panel">
+          <ChartPanel>
-            <ChartPanel>
+            <ChangeLog />
-              <ChangeLog />
+          </ChartPanel>
-            </ChartPanel>
-          </div>
         </div>
       </div>
     </>