ref: 调整前端面板监测数据格式，优化传输大小

rition-center/api/src/main/java/rition/backend/api/v1/dto/response/MetricDataResponse.java

@@ -1,12 +1,11 @@
 package rition.backend.api.v1.dto.response;
 
-import com.baomidou.mybatisplus.annotation.TableField;
-import com.baomidou.mybatisplus.extension.handlers.JacksonTypeHandler;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import java.util.List;
 import java.util.Map;
 
 @Data
@@ -17,11 +16,14 @@ public class MetricDataResponse {
     /**
      * 监控指标值，使用json格式存储
      */
-    @TableField(typeHandler = JacksonTypeHandler.class)
+    private Map<String, MetricDataResponseItem> metricData;
-    private Map<String, Double> metricData;
 
-    /**
+    @Data
-     * create_time
+    @Builder
-     */
+    @NoArgsConstructor
-    private Long time;
+    @AllArgsConstructor
+    public static class MetricDataResponseItem {
+        private List<Long> time;
+        private List<Double> value;
+    }
 }

rition-center/api/src/main/java/rition/backend/api/v1/panel/MetricsViewController.java

@@ -2,7 +2,10 @@ package rition.backend.api.v1.panel;
 
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.data.redis.core.RedisTemplate;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
 import rition.backend.api.v1.dto.request.MetricDataRequest;
 import rition.backend.api.v1.dto.response.MetricDataResponse;
 import rition.backend.api.v1.dto.response.Response;
@@ -12,9 +15,7 @@ import rition.common.data.enums.Constants;
 import rition.service.panel.MetricService;
 
 import java.time.Instant;
-import java.util.ArrayList;
+import java.util.*;
-import java.util.HashSet;
-import java.util.List;
 
 @Slf4j
 @RestController
@@ -30,7 +31,10 @@ public class MetricsViewController {
     }
 
     @PostMapping("/list")
-    public Response<List<MetricDataResponse>> getMetrics(@RequestBody MetricDataRequest metricDataRequest) {
+    public Response<MetricDataResponse> getMetrics(@RequestBody MetricDataRequest metricDataRequest) {
+        MetricDataResponse metricDataResponse = new MetricDataResponse();
+        metricDataResponse.setMetricData(new HashMap<>(metricDataRequest.getMetricItems().size()));
+
         // 如果未给定范围参数，则使用最近一小时的数据
         if (metricDataRequest.getStart() == null || metricDataRequest.getEnd() == null) {
             List<Object> recentMetricDataList =
@@ -38,19 +42,28 @@ public class MetricsViewController {
                             Constants.RedisKeys.RECENT_METRIC_CACHE, 0, Constants.MAX_METRIC_CACHE_NUM
                     );
             if (recentMetricDataList == null) {
-                return Response.success(new ArrayList<>());
+                return Response.success(MetricDataResponse.builder().metricData(new HashMap<>()).build());
+            }
+
+            for (String metricItem : metricDataRequest.getMetricItems()) {
+                metricDataResponse.getMetricData().put(metricItem, MetricDataResponse.MetricDataResponseItem.builder()
+                        .time(new ArrayList<>(recentMetricDataList.size()))
+                        .value(new ArrayList<>(recentMetricDataList.size()))
+                        .build()
+                );
             }
 
-            List<MetricDataResponse> responseList = new ArrayList<>(recentMetricDataList.size());
             for (Object recentMetricData : recentMetricDataList) {
-                var data = (MetricDataDto) recentMetricData;
+                var metricDataDto = (MetricDataDto) recentMetricData;
-                responseList.add(MetricDataResponse.builder()
+                Map<String, Double> data = metricDataDto.getData();
-                        .metricData(data.getData())
+                for (String metric : data.keySet()) {
-                        .time(data.getTimestamp())
+                    var metricResponseData = metricDataResponse.getMetricData().get(metric);
-                        .build());
+                    metricResponseData.getTime().add(metricDataDto.getTimestamp());
+                    metricResponseData.getValue().add(data.get(metric));
+                }
             }
 
-            return Response.success(responseList);
+            return Response.success(metricDataResponse);
         }
 
         var entityResult = metricService.getMetricDataRange(
@@ -61,16 +74,25 @@ public class MetricsViewController {
         );
 
         // 转换数据
-        List<MetricDataResponse> responseList = new ArrayList<>(entityResult.size());
+
-        for (MetricRecordEntity entity : entityResult) {
+        for (String metricItem : metricDataRequest.getMetricItems()) {
-            responseList.add(MetricDataResponse.builder()
+            metricDataResponse.getMetricData().put(metricItem, MetricDataResponse.MetricDataResponseItem.builder()
-                    .metricData(entity.getMetricData())
+                    .time(new ArrayList<>(entityResult.size()))
-                    .time(entity.getTime().toEpochMilli())
+                    .value(new ArrayList<>(entityResult.size()))
                     .build()
             );
         }
 
-        return Response.success(responseList);
+        for (MetricRecordEntity entity : entityResult) {
+            var data = entity.getMetricData();
+            for (String metric : data.keySet()) {
+                var metricResponseData = metricDataResponse.getMetricData().get(metric);
+                metricResponseData.getTime().add(entity.getTime().toEpochMilli());
+                metricResponseData.getValue().add(data.get(metric));
+            }
+        }
+
+        return Response.success(metricDataResponse);
     }
 
 

rition-panel/src/pages/MetricPage.vue

@@ -143,10 +143,11 @@ function getMetricData() {
         })
       }
 
-      for (const dataItem of response.data) {
+      const data = response.data.metricData
-        for (const metricItem in dataItem.metricData) {
+      for (const metric in data) {
-          const value = dataItem.metricData[metricItem]
+        const metricDataItem = data[metric]
-          metricOptionsMap.get(metricItem).series[0].data.push([dataItem.time / 1000, value])
+        for (let i = 0; i < metricDataItem.time.length; i++) {
+          metricOptionsMap.get(metric).series[0].data.push([metricDataItem.time[i], metricDataItem.value[i]])
         }
       }