From 40c1ebea2062ef1fb4da1af10f35ad908b4a53fc Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Tue, 23 Mar 2021 17:36:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E5=8E=8B=E5=8A=9B=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PerformancePressureConfig.vue  | 59 +++++++++++--------
 .../components/PerformancePressureConfig.vue  | 53 ++++++++++-------
 2 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue
index 6ef4fc1ef0..ee9ebb5d74 100644
--- a/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue
+++ b/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue
@@ -1,16 +1,25 @@
 <template>
   <div v-loading="result.loading" class="pressure-config-container">
     <el-row>
-      <el-col>
-        <ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-collapse v-model="activeNames">
-        <el-collapse-item :title="threadGroup.attributes.testname" :name="index"
-                          v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
-                          :key="index">
-          <el-col :span="10">
+      <el-col :span="10">
+
+        <el-collapse v-model="activeNames" accordion>
+          <el-collapse-item :name="index"
+                            v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
+                            :key="index">
+            <template slot="title">
+              <div style="padding-right: 10px">
+                {{ threadGroup.attributes.testname }}
+              </div>
+              <el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'DURATION'">
+                {{ $t('load_test.thread_num') }}{{ threadGroup.threadNumber }},
+                {{ $t('load_test.duration') }}: {{ threadGroup.duration }} {{ getUnitLabel(threadGroup) }}
+              </el-tag>
+              <el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'ITERATION'">
+                {{ $t('load_test.thread_num') }} {{ threadGroup.threadNumber }},
+                {{ $t('load_test.iterate_num') }} {{ threadGroup.iterateNum }}
+              </el-tag>
+            </template>
             <el-form :inline="true">
               <el-form-item :label="$t('load_test.thread_num')">
                 <el-input-number
@@ -34,7 +43,7 @@
                     :disabled="true"
                     v-model="threadGroup.duration"
                     :min="1"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
                 <el-form-item>
@@ -51,7 +60,7 @@
                   <el-input-number
                     :disabled="true"
                     v-model="threadGroup.rpsLimit"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     :min="1"
                     size="mini"/>
                 </el-form-item>
@@ -63,7 +72,7 @@
                       :min="1"
                       :max="threadGroup.duration"
                       v-model="threadGroup.rampUpTime"
-                      @change="calculateChart(threadGroup)"
+                      @change="calculateTotalChart(threadGroup)"
                       size="mini"/>
                   </el-form-item>
                   <el-form-item :label="$t('load_test.ramp_up_time_minutes', [getUnitLabel(threadGroup)])">
@@ -72,7 +81,7 @@
                       :min="1"
                       :max="Math.min(threadGroup.threadNumber, threadGroup.rampUpTime)"
                       v-model="threadGroup.step"
-                      @change="calculateChart(threadGroup)"
+                      @change="calculateTotalChart(threadGroup)"
                       size="mini"/>
                   </el-form-item>
                   <el-form-item :label="$t('load_test.ramp_up_time_times')"/>
@@ -96,7 +105,7 @@
                     :disabled="true"
                     v-model="threadGroup.iterateNum"
                     :min="1"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
                 <br>
@@ -106,7 +115,7 @@
                   <el-input-number
                     :disabled="true || !threadGroup.rpsLimitEnable"
                     v-model="threadGroup.rpsLimit"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     :min="1"
                     size="mini"/>
                 </el-form-item>
@@ -116,19 +125,18 @@
                     :disabled="true"
                     :min="1"
                     v-model="threadGroup.iterateRampUp"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
                 <el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
               </div>
             </el-form>
-          </el-col>
-          <el-col :span="14">
-            <div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
-            <ms-chart class="chart-container" :options="threadGroup.options" :autoresize="true"></ms-chart>
-          </el-col>
-        </el-collapse-item>
-      </el-collapse>
+          </el-collapse-item>
+        </el-collapse>
+      </el-col>
+      <el-col :span="14">
+        <ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -240,8 +248,7 @@ export default {
               break;
           }
         });
-        this.calculateChart(this.threadGroups[i]);
-
+        this.calculateTotalChart(this.threadGroups[i]);
       }
     },
     getLoadConfig() {
diff --git a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
index ee4f21d433..7b4db96d6f 100644
--- a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
@@ -14,21 +14,33 @@
             </el-select>
           </el-form-item>
         </el-form>
-        <ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
       </el-col>
     </el-row>
     <el-row>
-      <el-collapse v-model="activeNames">
-        <el-collapse-item :title="threadGroup.attributes.testname" :name="index"
-                          v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
-                          :key="index">
-          <el-col :span="10">
+      <el-col :span="10">
+        <el-collapse v-model="activeNames" accordion>
+          <el-collapse-item :name="index"
+                            v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
+                            :key="index">
+            <template slot="title">
+              <div style="padding-right: 10px">
+                {{ threadGroup.attributes.testname }}
+              </div>
+              <el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'DURATION'">
+                {{ $t('load_test.thread_num') }}{{ threadGroup.threadNumber }},
+                {{ $t('load_test.duration') }}: {{ threadGroup.duration }} {{ getUnitLabel(threadGroup) }}
+              </el-tag>
+              <el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'ITERATION'">
+                {{ $t('load_test.thread_num') }} {{ threadGroup.threadNumber }},
+                {{$t('load_test.iterate_num')}} {{threadGroup.iterateNum}}
+              </el-tag>
+            </template>
             <el-form :inline="true">
               <el-form-item :label="$t('load_test.thread_num')">
                 <el-input-number
                   :disabled="isReadOnly"
                   v-model="threadGroup.threadNumber"
-                  @change="calculateChart(threadGroup)"
+                  @change="calculateTotalChart(threadGroup)"
                   :min="resourcePoolResourceLength"
                   size="mini"/>
               </el-form-item>
@@ -47,7 +59,7 @@
                     v-model="threadGroup.duration"
                     :min="1"
                     :max="9999"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
                 <el-form-item>
@@ -64,7 +76,7 @@
                   <el-input-number
                     :disabled="isReadOnly || !threadGroup.rpsLimitEnable"
                     v-model="threadGroup.rpsLimit"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     :min="1"
                     :max="99999"
                     size="mini"/>
@@ -77,7 +89,7 @@
                       :min="1"
                       :max="threadGroup.duration"
                       v-model="threadGroup.rampUpTime"
-                      @change="calculateChart(threadGroup)"
+                      @change="calculateTotalChart(threadGroup)"
                       size="mini"/>
                   </el-form-item>
                   <el-form-item :label="$t('load_test.ramp_up_time_minutes', [getUnitLabel(threadGroup)])">
@@ -86,7 +98,7 @@
                       :min="1"
                       :max="Math.min(threadGroup.threadNumber, threadGroup.rampUpTime)"
                       v-model="threadGroup.step"
-                      @change="calculateChart(threadGroup)"
+                      @change="calculateTotalChart(threadGroup)"
                       size="mini"/>
                   </el-form-item>
                   <el-form-item :label="$t('load_test.ramp_up_time_times')"/>
@@ -98,7 +110,7 @@
                       :disabled="isReadOnly"
                       :min="1"
                       v-model="threadGroup.rampUpTime"
-                      @change="calculateChart(threadGroup)"
+                      @change="calculateTotalChart(threadGroup)"
                       size="mini"/>
                   </el-form-item>
                   <el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
@@ -112,7 +124,7 @@
                     v-model="threadGroup.iterateNum"
                     :min="1"
                     :max="9999999"
-                    @change="calculateChart(threadGroup)"
+                    @change="calculateTotalChart(threadGroup)"
                     size="mini"/>
                 </el-form-item>
                 <br>
@@ -137,13 +149,12 @@
                 <el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
               </div>
             </el-form>
-          </el-col>
-          <el-col :span="14">
-            <div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
-            <ms-chart class="chart-container" :options="threadGroup.options" :autoresize="true"></ms-chart>
-          </el-col>
-        </el-collapse-item>
-      </el-collapse>
+          </el-collapse-item>
+        </el-collapse>
+      </el-col>
+      <el-col :span="14">
+        <ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -303,8 +314,6 @@ export default {
               this.$set(this.threadGroups[i], "enabled", this.threadGroups[i].enabled || 'true');
               this.$set(this.threadGroups[i], "deleted", this.threadGroups[i].deleted || 'false');
             })
-            this.calculateChart(this.threadGroups[i]);
-
           }
           this.calculateTotalChart();
         }