refactor(性能测试): 性能测试压力预览图修改

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

@@ -348,25 +348,45 @@ export default {
         let threadInc2 = Math.ceil(tg.threadNumber / tg.step);
         let inc2count = tg.threadNumber - tg.step * threadInc1;
         for (let j = 0; j <= tg.duration; j++) {
-
-          if (j > timePeriod) {
-            timePeriod += timeInc;
-            if (inc2count > 0) {
-              threadPeriod = threadPeriod + threadInc2;
-              inc2count--;
-            } else {
-              threadPeriod = threadPeriod + threadInc1;
-            }
-            if (threadPeriod > tg.threadNumber) {
-              threadPeriod = tg.threadNumber;
-            }
-          }
           // x 轴
           let xAxis = handler.options.xAxis.data;
           if (xAxis.indexOf(j) < 0) {
             xAxis.push(j);
           }
-          seriesData.data.push(threadPeriod);
+
+          if (tg.tgType === 'ThreadGroup') {
+            seriesData.step = undefined;
+
+            if (j === 0) {
+              seriesData.data.push([0, 0]);
+            }
+            if (j > tg.rampUpTime) {
+              xAxis.push(tg.duration);
+
+              seriesData.data.push([j, tg.threadNumber]);
+              seriesData.data.push([tg.duration, tg.threadNumber]);
+              break;
+            }
+          } else {
+            seriesData.step = 'start';
+            if (j > timePeriod) {
+              timePeriod += timeInc;
+              if (inc2count > 0) {
+                threadPeriod = threadPeriod + threadInc2;
+                inc2count--;
+              } else {
+                threadPeriod = threadPeriod + threadInc1;
+              }
+              if (threadPeriod > tg.threadNumber) {
+                threadPeriod = tg.threadNumber;
+                // 预热结束
+                xAxis.push(tg.duration);
+                seriesData.data.push([tg.duration, threadPeriod]);
+                break;
+              }
+            }
+            seriesData.data.push([j, threadPeriod]);
+          }
         }
         handler.options.series.push(seriesData);
       }
@@ -445,20 +465,39 @@ export default {
       for (let i = 0; i <= handler.duration; i++) {
         // x 轴
         handler.options.xAxis.data.push(i);
-        if (i > timePeriod) {
+        if (handler.tgType === 'ThreadGroup') {
-          timePeriod += timeInc;
+          handler.options.series[0].step = undefined;
-          if (inc2count > 0) {
+
-            threadPeriod = threadPeriod + threadInc2;
+          if (i === 0) {
-            inc2count--;
+            handler.options.series[0].data.push([0, 0]);
-          } else {
-            threadPeriod = threadPeriod + threadInc1;
           }
-          if (threadPeriod > handler.threadNumber) {
+          if (i > handler.rampUpTime) {
-            threadPeriod = handler.threadNumber;
+            handler.options.xAxis.data.push(handler.duration);
+
+            handler.options.series[0].data.push([i, handler.threadNumber]);
+            handler.options.series[0].data.push([handler.duration, handler.threadNumber]);
+            break;
           }
-          handler.options.series[0].data.push(threadPeriod);
         } else {
-          handler.options.series[0].data.push(threadPeriod);
+          handler.options.series[0].step = 'start';
+          if (i > timePeriod) {
+            timePeriod += timeInc;
+            if (inc2count > 0) {
+              threadPeriod = threadPeriod + threadInc2;
+              inc2count--;
+            } else {
+              threadPeriod = threadPeriod + threadInc1;
+            }
+            if (threadPeriod > handler.threadNumber) {
+              threadPeriod = handler.threadNumber;
+              handler.options.xAxis.data.push(handler.duration);
+              handler.options.series[0].data.push([handler.duration, handler.threadNumber]);
+              break;
+            }
+            handler.options.series[0].data.push([i, threadPeriod]);
+          } else {
+            handler.options.series[0].data.push([i, threadPeriod]);
+          }
         }
       }
       this.calculateTotalChart();

frontend/src/business/components/performance/test/EditPerformanceTest.vue

@@ -28,6 +28,7 @@
         <el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('load_test.basic_config')">
             <performance-basic-config :is-read-only="isReadOnly" :test="test" ref="basicConfig"
+                                      @tgTypeChange="tgTypeChange"
                                       @fileChange="fileChange"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('load_test.pressure_config')">
@@ -129,12 +130,12 @@ export default {
         let file = new File([blob], apiTest.jmx.name);
         this.$refs.basicConfig.beforeUploadJmx(file);
         this.$refs.basicConfig.handleUpload({file: file});
-        if(JSON.stringify(apiTest.jmx.attachFiles) != "{}"){
+        if (JSON.stringify(apiTest.jmx.attachFiles) != "{}") {
           let attachFiles = [];
-            for(let fileID in apiTest.jmx.attachFiles){
+          for (let fileID in apiTest.jmx.attachFiles) {
-              attachFiles.push(fileID);
+            attachFiles.push(fileID);
-            }
+          }
-          if(attachFiles.length > 0){
+          if (attachFiles.length > 0) {
             this.$refs.basicConfig.selectAttachFileById(attachFiles);
           }
         }
@@ -229,18 +230,18 @@ export default {
       var bytes = new Array();
       var len, c;
       len = str.length;
-      for(var i = 0; i < len; i++) {
+      for (var i = 0; i < len; i++) {
         c = str.charCodeAt(i);
-        if(c >= 0x010000 && c <= 0x10FFFF) {
+        if (c >= 0x010000 && c <= 0x10FFFF) {
           bytes.push(((c >> 18) & 0x07) | 0xF0);
           bytes.push(((c >> 12) & 0x3F) | 0x80);
           bytes.push(((c >> 6) & 0x3F) | 0x80);
           bytes.push((c & 0x3F) | 0x80);
-        } else if(c >= 0x000800 && c <= 0x00FFFF) {
+        } else if (c >= 0x000800 && c <= 0x00FFFF) {
           bytes.push(((c >> 12) & 0x0F) | 0xE0);
           bytes.push(((c >> 6) & 0x3F) | 0x80);
           bytes.push((c & 0x3F) | 0x80);
-        } else if(c >= 0x000080 && c <= 0x0007FF) {
+        } else if (c >= 0x000080 && c <= 0x0007FF) {
           bytes.push(((c >> 6) & 0x1F) | 0xC0);
           bytes.push((c & 0x3F) | 0x80);
         } else {
@@ -347,6 +348,10 @@ export default {
       threadGroups.forEach(tg => {
         handler.calculateChart(tg);
       })
+    },
+    tgTypeChange(threadGroup) {
+      let handler = this.$refs.pressureConfig;
+      handler.calculateChart(threadGroup);
     }
   }
 }

frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue

@@ -46,7 +46,7 @@
       <el-table-column
         label="ThreadGroup">
         <template v-slot:default="{row}">
-          <el-select v-model="row.tgType" :placeholder="$t('commons.please_select')" size="small">
+          <el-select v-model="row.tgType" :placeholder="$t('commons.please_select')" size="small" @change="tgTypeChange(row)">
             <el-option v-for="tg in threadGroupForSelect" :key="tg.tagName" :label="tg.name"
                        :value="tg.testclass"></el-option>
           </el-select>
@@ -377,6 +377,9 @@ export default {
     threadGroupDisable(row) {
       return this.threadGroups.filter(tg => tg.enabled == 'true').length === 1 && row.enabled == 'true';
     },
+    tgTypeChange(row) {
+      this.$emit("tgTypeChange", row);
+    },
     handleExceed() {
       this.$error(this.$t('load_test.file_size_limit'));
     },

frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue

@@ -42,10 +42,12 @@
               <br>
               <div v-if="threadGroup.threadType === 'DURATION'">
                 <el-form-item :label="$t('load_test.duration')">
+                  <!-- 最多两天的测试时长 -->
                   <el-input-number
                     :disabled="isReadOnly"
                     v-model="threadGroup.duration"
                     :min="1"
+                    :max="172800"
                     @change="calculateChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
@@ -349,7 +351,6 @@ export default {
           name: handler.threadGroups[i].attributes.testname,
           data: [],
           type: 'line',
-          step: 'start',
           smooth: false,
           symbolSize: 5,
           showSymbol: false,
@@ -390,25 +391,44 @@ export default {
         let threadInc2 = Math.ceil(tg.threadNumber / tg.step);
         let inc2count = tg.threadNumber - tg.step * threadInc1;
         for (let j = 0; j <= tg.duration; j++) {
-
-          if (j > timePeriod) {
-            timePeriod += timeInc;
-            if (inc2count > 0) {
-              threadPeriod = threadPeriod + threadInc2;
-              inc2count--;
-            } else {
-              threadPeriod = threadPeriod + threadInc1;
-            }
-            if (threadPeriod > tg.threadNumber) {
-              threadPeriod = tg.threadNumber;
-            }
-          }
           // x 轴
           let xAxis = handler.options.xAxis.data;
           if (xAxis.indexOf(j) < 0) {
             xAxis.push(j);
           }
-          seriesData.data.push(threadPeriod);
+          if (tg.tgType === 'ThreadGroup') {
+            seriesData.step = undefined;
+
+            if (j === 0) {
+              seriesData.data.push([0, 0]);
+            }
+            if (j > tg.rampUpTime) {
+              xAxis.push(tg.duration);
+
+              seriesData.data.push([j, tg.threadNumber]);
+              seriesData.data.push([tg.duration, tg.threadNumber]);
+              break;
+            }
+          } else {
+            seriesData.step = 'start';
+            if (j > timePeriod) {
+              timePeriod += timeInc;
+              if (inc2count > 0) {
+                threadPeriod = threadPeriod + threadInc2;
+                inc2count--;
+              } else {
+                threadPeriod = threadPeriod + threadInc1;
+              }
+              if (threadPeriod > tg.threadNumber) {
+                threadPeriod = tg.threadNumber;
+                // 预热结束
+                xAxis.push(tg.duration);
+                seriesData.data.push([tg.duration, threadPeriod]);
+                break;
+              }
+            }
+            seriesData.data.push([j, threadPeriod]);
+          }
         }
         handler.options.series.push(seriesData);
       }
@@ -492,20 +512,40 @@ export default {
       for (let i = 0; i <= handler.duration; i++) {
         // x 轴
         handler.options.xAxis.data.push(i);
-        if (i > timePeriod) {
+
-          timePeriod += timeInc;
+        if (handler.tgType === 'ThreadGroup') {
-          if (inc2count > 0) {
+          handler.options.series[0].step = undefined;
-            threadPeriod = threadPeriod + threadInc2;
+
-            inc2count--;
+          if (i === 0) {
-          } else {
+            handler.options.series[0].data.push([0, 0]);
-            threadPeriod = threadPeriod + threadInc1;
           }
-          if (threadPeriod > handler.threadNumber) {
+          if (i > handler.rampUpTime) {
-            threadPeriod = handler.threadNumber;
+            handler.options.xAxis.data.push(handler.duration);
+
+            handler.options.series[0].data.push([i, handler.threadNumber]);
+            handler.options.series[0].data.push([handler.duration, handler.threadNumber]);
+            break;
           }
-          handler.options.series[0].data.push(threadPeriod);
         } else {
-          handler.options.series[0].data.push(threadPeriod);
+          handler.options.series[0].step = 'start';
+          if (i > timePeriod) {
+            timePeriod += timeInc;
+            if (inc2count > 0) {
+              threadPeriod = threadPeriod + threadInc2;
+              inc2count--;
+            } else {
+              threadPeriod = threadPeriod + threadInc1;
+            }
+            if (threadPeriod > handler.threadNumber) {
+              threadPeriod = handler.threadNumber;
+              handler.options.xAxis.data.push(handler.duration);
+              handler.options.series[0].data.push([handler.duration, handler.threadNumber]);
+              break;
+            }
+            handler.options.series[0].data.push([i, threadPeriod]);
+          } else {
+            handler.options.series[0].data.push([i, threadPeriod]);
+          }
         }
       }
       this.calculateTotalChart();