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,8 +40,19 @@
           justify-content: center;
           align-items: center;
         }
+      }
 
-        .chart-box {
+      .config-change-records-container {
+        width: 240px;
+        height: 100%;
+        margin-left: 12px;
+        .cluster-detail-container-border();
+      }
+    }
+  }
+}
+
+.cluster-detail-chart-box {
   position: relative;
   width: 100%;
   height: 244px;
@@ -107,18 +85,7 @@
     }
   }
 }
-      }
+.cluster-detail-chart-box-title {
-
-      .config-change-records-container {
-        width: 240px;
-        height: 100%;
-        margin-left: 12px;
-        .cluster-container-border();
-      }
-    }
-  }
-
-  .chart-box-title {
   padding: 18px 0 0 20px;
   font-family: @font-family-bold;
   line-height: 16px;
@@ -134,4 +101,3 @@
     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.map((data: any, i: number) => {
+                  <div className="no-group-con">
+                    <DragGroup
+                      sortableContainerProps={{
+                        onSortStart: () => 0,
+                        onSortEnd: () => 0,
+                        axis: 'xy',
+                        useDragHandle: false,
+                      }}
+                      gridProps={{
+                        span: 12,
+                        gutter: [16, 16],
+                      }}
+                    >
+                      {metricDataList.map((data: any, i: number) => {
                         const { metricName, metricUnit, metricLines } = data;
                         return (
-                        <Col key={metricName} span={12}>
+                          <div key={metricName} className="cluster-detail-chart-box">
-                          <div className="chart-box">
+                            <div className="cluster-detail-chart-box-title">
-                            <div className="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>
+                  </div>
                 ) : chartLoading ? (
                   <></>
                 ) : (
                   <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,13 +21,11 @@ const SingleClusterDetail = (): JSX.Element => {
         </div>
         <div className="cluster-detail">
           <LeftSider />
-          <div className="chart-panel">
           <ChartPanel>
             <ChangeLog />
           </ChartPanel>
         </div>
       </div>
-      </div>
     </>
   );
 };