From 90bf8a672e0c76d29eebd595142249b4684dd900 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Tue, 22 Jun 2021 11:40:43 +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=E8=AF=A6=E6=83=85=E5=8D=95=E8=A1=8C?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BAlabel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/components/TestDetails.vue         | 140 ++++++++++--------
 1 file changed, 76 insertions(+), 64 deletions(-)

diff --git a/frontend/src/business/components/performance/report/components/TestDetails.vue b/frontend/src/business/components/performance/report/components/TestDetails.vue
index 8b0ad82240..eaff591c14 100644
--- a/frontend/src/business/components/performance/report/components/TestDetails.vue
+++ b/frontend/src/business/components/performance/report/components/TestDetails.vue
@@ -11,100 +11,108 @@
           <el-collapse-item :title="$t('load_test.report.ActiveThreadsChart')" name="users">
             <el-checkbox-group v-model="checkList['ActiveThreadsChart']"
                                @change="handleChecked('ActiveThreadsChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['ActiveThreadsChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['ActiveThreadsChart']" :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.TransactionsChart')" name="transactions">
             <el-checkbox-group v-model="checkList['TransactionsChart']" @change="handleChecked('TransactionsChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['TransactionsChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['TransactionsChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ResponseTimeChart')" name="responseTime">
             <el-checkbox-group v-model="checkList['ResponseTimeChart']" @change="handleChecked('ResponseTimeChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['ResponseTimeChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['ResponseTimeChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ResponseTimePercentilesChart')" name="responseTimePercentiles">
             <el-checkbox-group v-model="checkList['ResponseTimePercentilesChart']"
                                @change="handleChecked('ResponseTimePercentilesChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['ResponseTimePercentilesChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['ResponseTimePercentilesChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ResponseCodeChart')" name="responseCode">
             <el-checkbox-group v-model="checkList['ResponseCodeChart']" @change="handleChecked('ResponseCodeChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['ResponseCodeChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['ResponseCodeChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.LatencyChart')" name="latency">
             <el-checkbox-group v-model="checkList['LatencyChart']" @change="handleChecked('LatencyChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['LatencyChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['LatencyChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.BytesThroughputChart')" name="bytes">
             <el-checkbox-group v-model="checkList['BytesThroughputChart']"
                                @change="handleChecked('BytesThroughputChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['BytesThroughputChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['BytesThroughputChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
           <el-collapse-item :title="$t('load_test.report.ErrorsChart')" name="errors">
             <el-checkbox-group v-model="checkList['ErrorsChart']" @change="handleChecked('ErrorsChart')">
-              <el-tooltip class="item" effect="dark"
-                          v-for="name in checkOptions['ErrorsChart']"
-                          :key="name"
-                          :content="name"
-                          :disabled="name.length < minLength"
-                          placement="top">
-                <el-checkbox :label="name"/>
-              </el-tooltip>
+              <div v-for="name in checkOptions['ErrorsChart']"
+                   :key="name">
+                <el-tooltip class="item" effect="dark"
+                            :content="name"
+                            :disabled="name.length < minLength"
+                            placement="top">
+                  <el-checkbox :label="name"/>
+                </el-tooltip>
+              </div>
             </el-checkbox-group>
           </el-collapse-item>
         </el-collapse>
@@ -435,4 +443,8 @@ export default {
   height: calc(100vh - 345px);
   overflow: auto;
 }
+
+/deep/ .el-checkbox__label {
+  font-size: 10px !important;
+}
 </style>