fix: 修复性能测试自定义监控显示图表bug (#7187)

fix: 修复性能测试自定义监控显示图表bug

backend/src/main/java/io/metersphere/performance/service/MetricQueryService.java

@@ -32,6 +32,7 @@ import org.springframework.web.client.RestTemplate;
 import javax.annotation.Resource;
 import java.text.DecimalFormat;
 import java.util.*;
+import java.util.stream.Collectors;
 
 @Service
 @Transactional(rollbackFor = Exception.class)
@@ -216,17 +217,29 @@ public class MetricQueryService {
 
     private void getRequest(Monitor monitor, List<MetricDataRequest> list) {
         if (CollectionUtils.isNotEmpty(monitor.getMonitorConfig())) {
-            monitor.getMonitorConfig().forEach(c -> {
+            List<MonitorItem> collect = monitor.getMonitorConfig().stream()
-                if (StringUtils.isBlank(c.getValue())) {
+                    .filter(c -> StringUtils.isNotBlank(c.getValue())).collect(Collectors.toList());
-                    return;
+            if (CollectionUtils.isNotEmpty(collect)) {
-                }
+                collect.forEach(c -> {
-                MetricDataRequest request = new MetricDataRequest();
+                    MetricDataRequest request = new MetricDataRequest();
-                String promQL = c.getValue();
+                    String promQL = c.getValue();
-                request.setPromQL(promQL);
+                    request.setPromQL(promQL);
-                request.setSeriesName(c.getName());
+                    request.setSeriesName(c.getName());
-                request.setInstance(monitor.getIp() + ":" + monitor.getPort());
+                    request.setInstance(monitor.getIp() + ":" + monitor.getPort());
-                list.add(request);
+                    list.add(request);
-            });
+                });
+            } else {
+                Map<String, String> map = MetricQuery.getMetricQueryMap();
+                Set<String> set = map.keySet();
+                set.forEach(s -> {
+                    MetricDataRequest request = new MetricDataRequest();
+                    String promQL = map.get(s);
+                    request.setPromQL(promQL);
+                    request.setSeriesName(s);
+                    request.setInstance(monitor.getIp() + ":" + monitor.getPort());
+                    list.add(request);
+                });
+            }
         } else {
             Map<String, String> map = MetricQuery.getMetricQueryMap();
             Set<String> set = map.keySet();

frontend/src/business/components/performance/report/components/MonitorCard.vue

@@ -4,11 +4,11 @@
       <el-col :span="4">
         <div>
           <el-select v-model="currentInstance" placeholder="" size="small" style="width: 100%"
-                     @change="handleChecked(currentInstance)">
+                     @change="getResource(currentInstance)">
             <el-option
-              v-for="item in instances"
+                v-for="item in instances"
-              :key="item.ip+item.port"
+                :key="item.ip+item.port"
-              :value="item.ip+':'+item.port">
+                :value="item.ip+':'+item.port">
               {{ item.ip }} {{ item.name }}
             </el-option>
           </el-select>
@@ -35,47 +35,47 @@
         <el-row>
           <el-col :offset="2" :span="20">
             <el-table
-              :data="tableData"
+                :data="tableData"
-              stripe
+                stripe
-              border
+                border
-              style="width: 100%">
+                style="width: 100%">
               <el-table-column label="Label" align="center">
                 <el-table-column
-                  prop="label"
+                    prop="label"
-                  label="Label"
+                    label="Label"
-                  sortable>
+                    sortable>
                 </el-table-column>
               </el-table-column>
               <el-table-column label="Aggregate" align="center">
                 <el-table-column
-                  prop="avg"
+                    prop="avg"
-                  label="Avg."
+                    label="Avg."
-                  width="100"
+                    width="100"
-                  sortable
+                    sortable
                 />
                 <el-table-column
-                  prop="min"
+                    prop="min"
-                  label="Min."
+                    label="Min."
-                  width="100"
+                    width="100"
-                  sortable
+                    sortable
                 />
                 <el-table-column
-                  prop="max"
+                    prop="max"
-                  label="Max."
+                    label="Max."
-                  width="100"
+                    width="100"
-                  sortable
+                    sortable
                 />
               </el-table-column>
               <el-table-column label="Range" align="center">
                 <el-table-column
-                  prop="startTime"
+                    prop="startTime"
-                  label="Start"
+                    label="Start"
-                  width="160"
+                    width="160"
                 />
                 <el-table-column
-                  prop="endTime"
+                    prop="endTime"
-                  label="End"
+                    label="End"
-                  width="160"
+                    width="160"
                 />
               </el-table-column>
             </el-table>
@@ -173,20 +173,22 @@ export default {
     this.getResource();
   },
   methods: {
-    getResource() {
+    getResource(currentInstance) {
       // this.init = true;
       if (this.planReportTemplate) {
         this.instances = this.planReportTemplate.reportResource;
-        this.currentInstance = this.instances[0].ip + ":" + this.instances[0].port;
+        this.currentInstance = currentInstance || this.instances[0].ip + ":" + this.instances[0].port;
         this.data = this.planReportTemplate.metricData;
         this.totalOption = this.getOption(this.currentInstance);
       } else if (this.isShare) {
         getSharePerformanceMetricQueryResource(this.shareId, this.id).then(response => {
           this.instances = response.data.data;
-          if (!this.currentInstance) {
+          if (currentInstance) {
-            this.currentInstance = this.instances[0].ip + ":" + this.instances[0].port;
+            this.currentInstance = currentInstance;
-            this.handleChecked(this.currentInstance);
+          } else {
+            this.currentInstance = this.currentInstance || this.instances[0].ip + ":" + this.instances[0].port;
           }
+          this.handleChecked(this.currentInstance);
           getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
             if (result) {
               this.data = result.data.data;
@@ -198,10 +200,12 @@ export default {
       } else {
         getPerformanceMetricQueryResource(this.id).then(response => {
           this.instances = response.data.data;
-          if (!this.currentInstance) {
+          if (currentInstance) {
-            this.currentInstance = this.instances[0].ip + ":" + this.instances[0].port;
+            this.currentInstance = currentInstance;
-            this.handleChecked(this.currentInstance);
+          } else {
+            this.currentInstance = this.currentInstance || this.instances[0].ip + ":" + this.instances[0].port;
           }
+          this.handleChecked(this.currentInstance);
           getPerformanceMetricQuery(this.id).then(result => {
             if (result) {
               this.data = result.data.data;
@@ -219,10 +223,14 @@ export default {
       if (curr.monitorConfig) {
         this.checkList = [];
         this.checkOptions = curr.monitorConfig.filter(mc => mc.value && mc.name)
-          .map(mc => {
+            .map(mc => {
-            this.checkList.push(mc.name);
+              this.checkList.push(mc.name);
-            return {key: mc.name, label: mc.name,};
+              return {key: mc.name, label: mc.name,};
-          });
+            });
+        if (this.checkList.length === 0) {
+          this.checkList = checkList;
+          this.checkOptions = checkOptions;
+        }
       } else {
         this.checkOptions = checkOptions;
         this.checkList = checkList;