From 06f988caac43055a59cac3d34dd38fed39e05256 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 30 Apr 2021 18:54:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20explore=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    |  5 +-
 .../components/page/dashboard/chartBox.vue    |  2 +-
 .../page/dashboard/explore/explore.vue        | 42 ++++----
 .../page/dashboard/explore/promqlInput.vue    | 96 ++++++++-----------
 4 files changed, 68 insertions(+), 77 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 781862751..e64359a59 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -53,7 +53,10 @@
     }
     .top-tool-btn-group {
       display: flex;
-
+      .top-tool-btn:not(:last-of-type):not(:first-of-type) {
+        border-left: none;
+        border-radius: 0;
+      }
       .top-tool-btn:first-of-type:not(:last-of-type) {
         border-radius: $--button-border-radius 0 0 $--button-border-radius;
       }
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 620f4ddd1..522c4afad 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -300,7 +300,7 @@
                 @change="expressionChange"
                 @removeExpression="removeExpression"
               ></promql-input>
-              <el-row>
+              <el-row style="margin-top: 18px">
                 <el-col class="legend-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover placement="top" trigger="hover" width="211">
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index a676b657c..a8bc43bad 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="explore list-page">
     <div class="main-list">
-      <div class="main-container">
+      <div class="main-container" style="overflow: auto;">
         <!-- 顶部工具栏 -->
         <div class="top-tools" style="z-index: 1">
           <div class="top-tool-left"></div>
@@ -16,26 +16,24 @@
             </button>
           </div>
         </div>
-        <div class="top-tools" style="width: 100%;box-sizing: border-box; padding-left: 10px;">
-          <div id="explore-promql-box" class="expression-room">
-            <!--坑，这个index居然是从1开始-->
-            <promql-input
-              v-for="index of promqlKeys.length"
-              :id="promqlKeys[index-1]"
-              :key="promqlKeys[index-1]"
-              :ref="'promql-'+(index-1)"
-              :expression-list="expressions"
-              :index="index-1"
-              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
-              :styleType="1"
-              @addExpression="addExpression"
-              @change="expressionChange"
-              @copyExpression="copyExpression"
-              @removeExpression="removeExpression"
-            ></promql-input>
-          </div>
+        <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
+          <!--坑，这个index居然是从1开始-->
+          <promql-input
+            v-for="index of promqlKeys.length"
+            :id="promqlKeys[index-1]"
+            :key="promqlKeys[index-1]"
+            :ref="'promql-'+(index-1)"
+            :expression-list="expressions"
+            :index="index-1"
+            :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
+            :styleType="1"
+            @addExpression="addExpression"
+            @change="expressionChange"
+            @copyExpression="copyExpression"
+            @removeExpression="removeExpression"
+          ></promql-input>
         </div>
-        <div ref="scrollWrap" style="height: 100%; overflow: auto;">
+        <div ref="scrollWrap" class="nz-table2" style="height: auto; padding-bottom: 10px;">
           <div class="chart-view right-margin" v-show="!showIntroduce"
                :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
             <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div>
@@ -725,7 +723,6 @@ export default {
     padding: 24px;
     background-color: #e9edf2;
     border-top: 3px solid #3274d9;
-    margin-bottom: 16px;
     -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
     box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
     -webkit-box-flex: 1;
@@ -919,4 +916,7 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .explore .promqlInput:not(:first-of-type) {
+    margin-top: 10px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 87f6adbc9..ec2277db1 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -1,38 +1,45 @@
 <template>
   <div class="promqlInput">
     <div class="query-row">
-      <div class="query-input">
-        <!--explore页面的样式-->
-        <template v-if="styleType == 1">
-          <div v-if="plugins.indexOf('metric-selector') > -1">
-            <el-dropdown class="metric-selector">
-              <el-dropdown-menu style="display: none"></el-dropdown-menu>
-              <button class="top-tool-btn" type="button" @click="toggleDropdown">Metric
-                &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></button>
-              <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
-                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
-                                 :options="metricOptions" @change="metricChange">
+      <!--explore页面的样式-->
+      <template v-if="styleType == 1">
+        <div v-if="plugins.indexOf('metric-selector') > -1">
+          <el-dropdown class="metric-selector">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">Metric
+              &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
+            <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
+                               v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
+                               :props="{emitPath:false,}" @change="metricChange">
 
-                <template slot-scope="{ node, data }">
-                  <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
-                    <i class="nz-icon nz-icon-template2"></i>
-                    {{data.label}}
-                  </div>
-                </template>
+              <template slot-scope="{ node, data }">
+                <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
+                  <i class="nz-icon nz-icon-template2"></i>
+                  {{data.label}}
+                </div>
+              </template>
 
-              </el-cascader-panel>
-            </el-dropdown>
-          </div>
-          <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
-            <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
-                      @input="metricKeyDown" type="textarea"
-                      :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
-            <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
-            <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
-          </div>
-        </template>
-        <!--right-box里的样式-->
-        <template v-if="styleType == 2">
+            </el-cascader-panel>
+          </el-dropdown>
+        </div>
+        <div v-if="plugins.indexOf('metric-input') > -1" class="input-box" @click="dropDownVisible=false">
+          <el-input :id="inputId" v-model="expressionList[index]" :autosize="{ minRows: 1, maxRows: 6}"
+                    class="not-fixed-height no-resize" type="textarea"
+                    @input="metricKeyDown" @keyup.enter.native="expressionChange"></el-input>
+          <div v-if="errorMsg" class="append-msg error"><span>{{errorMsg}}</span></div>
+          <div v-if="appendMsg" class="append-msg error"><span>{{appendMsg}}</span></div>
+        </div>
+        <div class="top-tool-btn-group">
+          <button v-if="plugins.indexOf('add') > -1" class="top-tool-btn"
+               @click="addExpression"><i class="nz-icon nz-icon-plus"></i></button>
+          <button v-if="plugins.indexOf('copy') > -1" class="top-tool-btn"
+               @click="copyExpression"><i class="nz-icon nz-icon-override"></i></button>
+          <button v-if="plugins.indexOf('remove') > -1" class="top-tool-btn"
+               @click="removeExpression"><i class="nz-icon nz-icon-minus"></i></button>
+        </div>
+      </template>
+      <!--right-box里的样式-->
+      <template v-if="styleType == 2">
           <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
                   style="width: 100%;">
             <el-col
@@ -69,17 +76,6 @@
             </el-col>
           </el-row>
         </template>
-      </div>
-    </div>
-    <div v-if="styleType == 1" style="margin-left: 10px">
-      <div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
-        <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"
-             v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
-        <div @click="copyExpression" class="option nz-btn nz-btn-size-normal nz-btn-style-light"
-             v-if="plugins.indexOf('copy') > -1"><i class="nz-icon nz-icon-override"></i></div>
-        <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"
-             v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
-      </div>
     </div>
     <div v-if="styleType == 2&&showRemove">
       <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i>
@@ -548,10 +544,11 @@ export default {
     position: relative;
     width: 100%;
     display: flex;
-    margin-bottom: 18px;
   }
 
   .promqlInput .query-row {
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
   }
 
@@ -564,10 +561,6 @@ export default {
   .input-box .error {
     color: #F56C6C;
   }
-  .query-row .query-input {
-    display: flex;
-    justify-content: flex-start;
-  }
 
   .promqlInput .query-options {
     /*display: flex;*/
@@ -589,14 +582,9 @@ export default {
     background-color:   rgb(247, 248, 250);
   }
 
-  .query-input .metric-btn {
-    width: 100px;
-    margin-right: 10px;
-  }
-
-  .query-input .input-box {
-    width: 100%;
-    height: 100%;
+  .query-row .input-box {
+    flex: auto;
+    margin: 0 10px;
   }
 
   .metric-btn {