From 3848209eded966ab07fc7aea3b4db10672c5871b Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Sat, 5 Jun 2021 08:17:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/src/business/components/performance/report/components/TestDetails.vue b/frontend/src/business/components/performance/report/components/TestDetails.vue
index e620ebf6d3..c85df5ae42 100644
--- a/frontend/src/business/components/performance/report/components/TestDetails.vue
+++ b/frontend/src/business/components/performance/report/components/TestDetails.vue
@@ -6,44 +6,92 @@
           <el-collapse-item :title="$t('load_test.report.ActiveThreadsChart')" name="users">
             <el-checkbox-group v-model="checkList['ActiveThreadsChart']"
                                @change="handleChecked('ActiveThreadsChart')">
-              <el-checkbox v-for="name in checkOptions['ActiveThreadsChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['ActiveThreadsChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="name in checkOptions['TransactionsChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['TransactionsChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="name in checkOptions['ResponseTimeChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['ResponseTimeChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="name in checkOptions['ResponseTimePercentilesChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['ResponseTimePercentilesChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="code in checkOptions['ResponseCodeChart']" :key="code" :label="code"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['ResponseCodeChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="name in checkOptions['LatencyChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['LatencyChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="code in checkOptions['BytesThroughputChart']" :key="code" :label="code"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['BytesThroughputChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </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-checkbox v-for="name in checkOptions['ErrorsChart']" :key="name" :label="name"/>
+              <el-tooltip class="item" effect="dark"
+                          v-for="name in checkOptions['ErrorsChart']"
+                          :key="name"
+                          :content="name"
+                          placement="top">
+                <el-checkbox :label="name"/>
+              </el-tooltip>
             </el-checkbox-group>
           </el-collapse-item>
         </el-collapse>