From db4a4abb1f43b9cfdbbc0978e9cfcc79292af666 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Fri, 25 Jun 2021 16:01:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=20=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=85=A8=E9=80=89=E5=92=8C=E5=8F=96=E6=B6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/components/TestDetails.vue         | 144 +++++++++++++++++-
 frontend/src/i18n/en-US.js                    |   1 +
 frontend/src/i18n/zh-CN.js                    |   3 +-
 frontend/src/i18n/zh-TW.js                    |   3 +-
 4 files changed, 142 insertions(+), 9 deletions(-)

diff --git a/frontend/src/business/components/performance/report/components/TestDetails.vue b/frontend/src/business/components/performance/report/components/TestDetails.vue
index d18c808ad0..c2a0c3f1ab 100644
--- a/frontend/src/business/components/performance/report/components/TestDetails.vue
+++ b/frontend/src/business/components/performance/report/components/TestDetails.vue
@@ -4,11 +4,23 @@
       <el-col :span="6">
         <div style="padding-bottom: 5px;">
           <el-link type="primary" @click="resetDefault()">{{ $t('load_test.report.set_default') }}</el-link>
-          &nbsp;/&nbsp;
-          <el-link type="danger" @click="unselectAll()">{{ $t('load_test.report.unselect_all') }}</el-link>
         </div>
         <el-collapse v-model="activeNames" class="test-detail">
-          <el-collapse-item :title="$t('load_test.report.ActiveThreadsChart')" name="users">
+          <el-collapse-item name="users">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.ActiveThreadsChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'ActiveThreadsChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('ActiveThreadsChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['ActiveThreadsChart']"
                                @change="handleChecked('ActiveThreadsChart')">
               <div v-for="name in checkOptions['ActiveThreadsChart']" :key="name">
@@ -21,7 +33,21 @@
               </div>
             </el-checkbox-group>
           </el-collapse-item>
-          <el-collapse-item :title="$t('load_test.report.TransactionsChart')" name="transactions">
+          <el-collapse-item name="transactions">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.TransactionsChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'TransactionsChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('TransactionsChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['TransactionsChart']" @change="handleChecked('TransactionsChart')">
               <div v-for="name in checkOptions['TransactionsChart']"
                    :key="name">
@@ -35,7 +61,21 @@
               </div>
             </el-checkbox-group>
           </el-collapse-item>
-          <el-collapse-item :title="$t('load_test.report.ResponseTimeChart')" name="responseTime">
+          <el-collapse-item name="responseTime">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.ResponseTimeChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'ResponseTimeChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('ResponseTimeChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['ResponseTimeChart']" @change="handleChecked('ResponseTimeChart')">
               <div v-for="name in checkOptions['ResponseTimeChart']"
                    :key="name">
@@ -48,7 +88,21 @@
               </div>
             </el-checkbox-group>
           </el-collapse-item>
-          <el-collapse-item :title="$t('load_test.report.ResponseTimePercentilesChart')" name="responseTimePercentiles">
+          <el-collapse-item name="responseTimePercentiles">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.ResponseTimePercentilesChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'ResponseTimePercentilesChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('ResponseTimePercentilesChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['ResponseTimePercentilesChart']"
                                @change="handleChecked('ResponseTimePercentilesChart')">
               <div v-for="name in checkOptions['ResponseTimePercentilesChart']"
@@ -63,6 +117,20 @@
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ResponseCodeChart')" name="responseCode">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.ResponseCodeChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'ResponseCodeChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('ResponseCodeChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['ResponseCodeChart']" @change="handleChecked('ResponseCodeChart')">
               <div v-for="name in checkOptions['ResponseCodeChart']"
                    :key="name">
@@ -76,6 +144,20 @@
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.LatencyChart')" name="latency">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.LatencyChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'LatencyChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('LatencyChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['LatencyChart']" @change="handleChecked('LatencyChart')">
               <div v-for="name in checkOptions['LatencyChart']"
                    :key="name">
@@ -89,6 +171,20 @@
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.BytesThroughputChart')" name="bytes">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.BytesThroughputChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'BytesThroughputChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('BytesThroughputChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['BytesThroughputChart']"
                                @change="handleChecked('BytesThroughputChart')">
               <div v-for="name in checkOptions['BytesThroughputChart']"
@@ -103,6 +199,20 @@
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ErrorsChart')" name="errors">
+            <template v-slot:title>
+              <div style="width: 100%">
+                <span>{{ $t('load_test.report.ErrorsChart') }}</span>
+                <span style="float:right;">
+                  <el-link type="primary" @click="selectAll( 'ErrorsChart', $event)">
+                    {{ $t('load_test.report.select_all') }}
+                  </el-link>
+                  /
+                  <el-link type="default" @click="unselectAll('ErrorsChart', $event)">
+                     {{ $t('load_test.report.unselect_all') }}
+                  </el-link>
+                </span>
+              </div>
+            </template>
             <el-checkbox-group v-model="checkList['ErrorsChart']" @change="handleChecked('ErrorsChart')">
               <div v-for="name in checkOptions['ErrorsChart']"
                    :key="name">
@@ -229,11 +339,31 @@ export default {
 
       this.getTotalChart();
     },
-    unselectAll() {
+    selectAll(name, e) {
+      if (e) {
+        e.stopPropagation(); // 阻止冒泡
+      }
       this.seriesData = [];
       this.totalOption = {};
       this.baseOption.yAxis = [];
       this.legend = [];
+      this.checkList[name] = this.checkOptions[name];
+
+      this.getTotalChart();
+    },
+    unselectAll(name, e) {
+      if (e) {
+        e.stopPropagation(); // 阻止冒泡
+      }
+      this.seriesData = [];
+      this.totalOption = {};
+      this.baseOption.yAxis = [];
+      this.legend = [];
+      if (name) {
+        this.checkList[name] = [];
+        this.getTotalChart();
+        return;
+      }
       for (const name in this.checkList) {
         this.checkList[name] = [];
       }
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 850bdf9a7c..afe1c3c468 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -655,6 +655,7 @@ export default {
       diff: "Compare",
       set_default: 'Set to Default',
       unselect_all: 'Unselect All',
+      select_all: 'Select All',
       ActiveThreadsChart: 'Users',
       TransactionsChart: 'Req/Trans',
       ErrorsChart: 'Error',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 6ead0d8402..f2f86808b6 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -652,7 +652,8 @@ export default {
     report: {
       diff: "对比",
       set_default: '恢复默认',
-      unselect_all: '取消所有',
+      unselect_all: '取消',
+      select_all: '全选',
       ActiveThreadsChart: '用户数',
       TransactionsChart: '请求/事务数',
       ErrorsChart: '错误',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 71636d262a..6517b07fc3 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -652,7 +652,8 @@ export default {
     report: {
       diff: "對比",
       set_default: '恢復默認',
-      unselect_all: '取消所有',
+      unselect_all: '取消',
+      select_all: '全選',
       ActiveThreadsChart: '用戶數',
       TransactionsChart: '請求/事務數',
       ErrorsChart: '錯誤',