From 92666b759b7458f2c0165ee7faa7e54682e2c290 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Thu, 23 Apr 2020 16:45:59 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:explore=20bug=E4=BF=AE=E5=A4=8D=20&&?=
 =?UTF-8?q?=20project=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/elementSet.vue      |  14 +-
 .../page/dashboard/explore/explore.vue        | 487 ++++++++++++++----
 .../page/dashboard/explore/promqlInput.vue    |   4 +-
 .../src/components/page/project/project.vue   |  27 +-
 4 files changed, 423 insertions(+), 109 deletions(-)

diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index 2e2c58f4f..9a4e5271b 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -20,12 +20,12 @@
           v-for="(item,index) in dropColRes"
           :key="index"
           class="elementset-label"
-          :class="index==0 || index == 1 ? 'elementset-label-disabled' : ''"
+          :class="!allowedAll&&(index==0 || index == 1) ? 'elementset-label-disabled' : ''"
           :title="item.visibility == 'disabled' ? other.inDevelopment : ''"
           @click="addcol(item,index)"
           :id="'element-set-el-'+index"
         >
-          <i class="el-icon-check" v-if="index==0||index==1||item.visibility=='disabled'"></i>
+          <i class="el-icon-check" v-if="!allowedAll&&(index==0||index==1||item.visibility=='disabled')"></i>
           <i v-else class="el-icon-check" v-show="item.show"></i>
           <span>{{item.label}}</span>
         </div>
@@ -55,7 +55,13 @@
 
 <script>
 export default {
-  props: ["dropCol","tableTitle","path"],
+  // props: ["dropCol","tableTitle","path"],
+  props:{
+    dropCol:{},
+    tableTitle:{},
+    path:{},
+    allowedAll:{default:false},
+  },
   data() {
     return {
       other: this.$t("overall.other"),
@@ -123,7 +129,7 @@ export default {
     },
     //下拉选项选择
     addcol(val, index) {
-      if (index == 0 || index == 1) {
+      if (!this.allowedAll&&(index == 0 || index == 1)) {
         this.dropColRes[index].show = true;
       } else {
         this.dropColRes[index].show = !this.dropColRes[index].show;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 2ecffa97c..b4b1a5c01 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -6,7 +6,7 @@
         <div class="sidebar-info">
           <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
           <div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
-          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.metricPreview.title')}}</div>
+          <div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
         </div>
       </div>
       <div slot="content-right" class="slot-content">
@@ -14,7 +14,9 @@
           <el-scrollbar style="height: 100%">
             <!-- 顶部工具栏 -->
             <div class="top-tools" style="z-index: 1">
-              <button :disabled="saveDisabled" type="button" @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
+              <button :disabled="saveDisabled" type="button" @click="saveChart"
+                      class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
+                      :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
                 {{$t('dashboard.metric.saveChart')}}
               </button>
               <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
@@ -51,9 +53,11 @@
               </el-date-picker>
             </div>
             <div class="expression-room">
+              <!--坑，这个index居然是从1开始-->
               <promql-input
-                v-for="index of promqlCount"
-                :key="expressions[index]"
+                v-for="index of promqlKeys.length"
+                :id="promqlKeys[index-1]"
+                :key="promqlKeys[index-1]"
                 :expression-list="expressions"
                 :index="index"
                 @change="expressionChange"
@@ -61,13 +65,15 @@
                 @removeExpression="removeExpression"
               ></promql-input>
             </div>
-            <div class="chart-view " v-show="!showIntroduce" :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
+            <div class="chart-view " v-show="!showIntroduce"
+                 :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
               <div class="view-title" @click="changeChartVisible"><i class="el-icon-caret-top"></i>&nbsp;graph</div>
               <div class="chart-room">
                 <chart ref="exploreChart"></chart>
               </div>
             </div>
-            <div class="table-view " v-show="!showIntroduce" :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
+            <div class="table-view " v-show="!showIntroduce"
+                 :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
               <div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i>&nbsp;table</div>
               <div class="table-room">
                 <el-table class="nz-table explore-table"
@@ -80,49 +86,131 @@
                           style="width: 100%;">
                   <el-table-column
                     :resizable="false"
-                    v-for="(item, index) in tableLabels"
+                    v-for="(item, index) in showTableLabels"
+                    v-if="item.show"
                     :key="`col-${index}`"
                     :label="item.label"
                     :prop="item.prop"
                     show-overflow-tooltip
                     min-width="110px"
                   ></el-table-column>
+                  <el-table-column width="28">
+                    <template slot="header" slot-scope="scope" :resizable="false">
+                      <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                        <i class="nz-icon nz-icon-gear"></i>
+                      </span>
+                    </template>
+                  </el-table-column>
                 </el-table>
-                <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false"></pagination>
+                <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
+                            :append-to-body="false"></pagination>
               </div>
             </div>
             <div class="introduce-view" v-show="showIntroduce">
               <div class="info-room">
-                <div><h2>PromQL Cheat Sheet</h2>
-                  <div class="cheat-sheet-item">
-                    <div class="cheat-sheet-item__title">Request Rate</div>
-                    <div class="cheat-sheet-item__example"><code>rate(http_request_total[5m])</code></div>
-                    <div class="cheat-sheet-item__label">Given an HTTP request counter, this query calculates the
-                      per-second average request rate over the last 5 minutes.
-                    </div>
-                  </div>
-                  <div class="cheat-sheet-item">
-                    <div class="cheat-sheet-item__title">95th Percentile of Request Latencies</div>
-                    <div class="cheat-sheet-item__example"><code>histogram_quantile(0.95,
-                      sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))</code></div>
-                    <div class="cheat-sheet-item__label">Calculates the 95th percentile of HTTP request rate over 5
-                      minute windows.
-                    </div>
-                  </div>
-                  <div class="cheat-sheet-item">
-                    <div class="cheat-sheet-item__title">Alerts Firing</div>
-                    <div class="cheat-sheet-item__example"><code>sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h]))
-                      by (alertname))</code></div>
-                    <div class="cheat-sheet-item__label">Sums up the alerts that have been firing over the last 24
-                      hours.
-                    </div>
-                  </div>
+                <div class="col-md-9 doc-content">
+                  <h2 >
+                    Simple time series selection
+                  </h2>
+
+                  <p>Return all time series with the metric <code>http_requests_total</code>:</p>
+
+                  <pre><code>http_requests_total</code></pre>
+
+                  <p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
+
+                  <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
+
+                  <p>Return a whole range of time (in this case 5 minutes) for the same vector,
+                    making it a range vector:</p>
+
+                  <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
+
+                  <p>Note that an expression resulting in a range vector cannot be graphed directly,
+                    but viewed in the tabular ("Console") view of the expression browser.</p>
+
+                  <p>Using regular expressions, you could select time series only for jobs whose
+                    name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
+
+                  <pre><code>http_requests_total{job=~".*server"}</code></pre>
+
+                  <p>All regular expressions in Prometheus use RE2 syntax.</p>
+
+                  <p>To select all HTTP status codes except 4xx ones, you could run:</p>
+
+                  <pre><code>http_requests_total{status!~"4.."}</code></pre>
+
+                  <h2 >
+                    Subquery
+                  </h2>
+
+                  <p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
+
+                  <pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
+
+                  <p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
+
+                  <pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
+
+                  <h2 >
+                    Using functions, operators, etc.
+                  </h2>
+
+                  <p>Return the per-second rate for all time series with the <code>http_requests_total</code>
+                    metric name, as measured over the last 5 minutes:</p>
+
+                  <pre><code>rate(http_requests_total[5m])</code></pre>
+
+                  <p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
+                    (fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
+                    want to sum over the rate of all instances, so we get fewer output time series,
+                    but still preserve the <code>job</code> dimension:</p>
+
+                  <pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
+
+                  <p>If we have two different metrics with the same dimensional labels, we can apply
+                    binary operators to them and elements on both sides with the same label set
+                    will get matched and propagated to the output. For example, this expression
+                    returns the unused memory in MiB for every instance (on a fictional cluster
+                    scheduler exposing these metrics about the instances it runs):</p>
+
+                  <pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+
+                  <p>The same expression, but summed by application, could be written like this:</p>
+
+                  <pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+
+                  <p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
+
+                  <pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
+...
+</code></pre>
+
+                  <p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
+
+                  <pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
+
+                  <p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
+
+                  <pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
+
                 </div>
               </div>
             </div>
           </el-scrollbar>
         </div>
-        <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" ></chart-box>
+        <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess"></chart-box>
+        <element-set
+          :allowed-all="true"
+          v-clickoutside="elementsetHide"
+          :dropCol="dropCol"
+          @tablelable="tablelabelEmit"
+          :table-title="tableLabels"
+          ref="elementset"
+        ></element-set>
       </div>
     </left-menu>
   </div>
@@ -134,23 +222,25 @@
   import chart from "../overview/chart";
   import axios from 'axios';
   import chartBox from "../../../page/dashboard/chartBox";
+
   export default {
     name: "explore",
     components: {
       'promql-input': promqlInput,
       'chart': chart,
-      'chart-box':chartBox,
+      'chart-box': chartBox,
     },
     data() {
       return {
         promqlCount: 1,
+        promqlKeys: [],
         expressions: [''],
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
         filterTime: {},
         visible: false,
-        showIntroduce:true,
-        defaultChartVisible:true,
-        defaultTableVisible:true,
+        showIntroduce: true,
+        defaultChartVisible: true,
+        defaultTableVisible: true,
         chartVisible: true,
         tableVisible: true,
         pageObj: {
@@ -158,8 +248,10 @@
           pageSize: 20,
           total: 0
         },
+        dropCol: [],
         tableData: [],
         tableLabels: [],
+        showTableLabels: [],
         tableLoading: false,
         intervalTimer: null,
         intervalList: [{
@@ -179,8 +271,8 @@
           name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
         }],
         interval: 0,
-        saveDisabled:true,
-        panelData:[],
+        saveDisabled: true,
+        panelData: [],
         pickerOptions: {
           shortcuts: [
             {
@@ -268,18 +360,19 @@
       this.filterTime.startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
       this.filterTime.endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
       this.getPanelData();
+      this.promqlKeys.push(this.guid());
     },
     methods: {
       pageNo(val) {
         this.pageObj.pageNo = val;
-        this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
+        this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
       },
       pageSize(val) {
         this.pageObj.pageSize = val;
-        this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
+        this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
       },
-      filterShowData(source,pageObj){
-        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
+      filterShowData(source, pageObj) {
+        return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
       },
       queryChartData: function () {
         this.$refs.exploreChart.startLoading();
@@ -291,9 +384,9 @@
                 requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime.startTime + '&end=' + this.filterTime.endTime + '&step=15'))
               }
             })
-            if(requestArr.length>0){
-              this.showIntroduce=false;
-              this.saveDisabled=false;
+            if (requestArr.length > 0) {
+              this.showIntroduce = false;
+              this.saveDisabled = false;
             }
             axios.all(requestArr).then(res => {
               let series = [];
@@ -313,7 +406,6 @@
                       seriesItem.data = result.values.map((item) => {
                         return [item[0] * 1000, item[1]];
                       })
-                      // console.log(seriesItem);
                       let metric = Object.assign({}, result.metric);
                       seriesItem.name += metric.__name__ + '{';
                       delete metric.__name__;
@@ -330,7 +422,7 @@
                 this.$refs.exploreChart.setLegend(legend);
                 this.$refs.exploreChart.setSeries(series)
               }
-              this.defaultChartVisible=true;
+              this.defaultChartVisible = true;
               this.$refs.exploreChart.endLoading();
             })
           }
@@ -340,15 +432,14 @@
         this.tableLoading = true,
           setTimeout(() => {
             if (this.expressions.length > 0) {
-              console.log(this.expressions)
               let requestArr = [];
               this.expressions.forEach((item, index) => {
                 if (item != '') {
                   requestArr.push(axios.get('/prom/api/v1/query?query=' + item))
                 }
               })
-              if(requestArr.length>0){
-                this.showIntroduce=false;
+              if (requestArr.length > 0) {
+                this.showIntroduce = false;
               }
               axios.all(requestArr).then(res => {
                 let tData = [];
@@ -365,8 +456,9 @@
                           this.$set(metrics, 'value#' + index, result.value[1]);
                           for (let key in metrics) {
                             let label = {
-                              label: key,
-                              prop: key
+                              label: key == '__name__' ? 'metric' : key,
+                              prop: key,
+                              show: true,
                             }
                             let temp = tLabels.find((item, index) => {
                               return item.prop == label.prop
@@ -383,12 +475,14 @@
                       return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
                     })
                   })
-                  this.storedTableData=Object.assign([],tData);
-                  this.pageObj.total=this.storedTableData.length;
-                  this.tableData = this.filterShowData(this.storedTableData,this.pageObj);
-                  this.tableLabels = tLabels;
+                  this.storedTableData = Object.assign([], tData);
+                  this.pageObj.total = this.storedTableData.length;
+                  this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
+                  this.tableLabels = Object.assign([], tLabels);
+                  this.showTableLabels = Object.assign([], tLabels);
+                  this.dropCol = Object.assign([], tLabels);
                 }
-                this.defaultTableVisible=true;
+                this.defaultTableVisible = true;
                 this.tableLoading = false;
               })
             }
@@ -402,11 +496,13 @@
       },
       addExpression: function (index) {
         this.expressions.splice(index + 1, 0, '');
+        this.promqlKeys.splice(index + 1, 0, this.guid());
         this.promqlCount++;
       },
       removeExpression: function (index) {
         if (this.promqlCount > 1) {
           this.expressions.splice(index, 1);
+          this.promqlKeys.splice(index, 1);
           this.promqlCount--;
         }
       },
@@ -445,30 +541,29 @@
         //刷新数据
         this.expressionChange();
       },
-      changeChartVisible:function(){
-        this.chartVisible=!this.chartVisible;
+      changeChartVisible: function () {
+        this.chartVisible = !this.chartVisible;
       },
-      changeTableVisible:function(){
-        this.tableVisible=!this.tableVisible;
+      changeTableVisible: function () {
+        this.tableVisible = !this.tableVisible;
       },
-      saveChart:function(){
+      saveChart: function () {
         this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
         this.$refs.addChartModal.show(true);
         let metricInfo = {};
         metricInfo.elements = [];
         // {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}
-        for(let i = 0; i < this.expressions.length; i++) {
-          if(this.expressions[i] != ''){
+        for (let i = 0; i < this.expressions.length; i++) {
+          if (this.expressions[i] != '') {
             let type = 'expert';
-            metricInfo.metric=this.expressions[i];
+            metricInfo.metric = this.expressions[i];
             metricInfo.elements.push({expression: this.expressions[i], type: type});
           }
         }
-        console.log(metricInfo)
         this.$refs.addChartModal.createData(-1, metricInfo);
       },
       createSuccess(type, response, param, panel) { //添加chart成功
-        this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
+        this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
           type: 'success'
@@ -491,6 +586,45 @@
           }
         });
       },
+      guid() {
+        function S4() {
+          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        }
+
+        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+      },
+      elementsetShow(s, e) {
+        var eventfixed = {
+          shezhi: 0,
+          screen: 0
+        };
+        eventfixed[s] = 1;
+        e.preventDefault();
+        this.$store.commit('setEventfixed', eventfixed);
+        const h = document.documentElement.clientHeight;
+        const w = document.documentElement.clientWidth;
+        const dw = this.$refs.elementset.$el.offsetWidth;
+        const dh = this.$refs.elementset.$el.offsetHeight;
+        let positionx =
+          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
+        console.log(e.clientY + dh)
+        console.log(h)
+        let positiony =
+          e.clientY + dh <= h - 10
+            ? e.clientY + 20
+            : e.clientY + 20 - (e.clientY + dh - h + 30);
+        this.$store.commit('setPosition', {positionx, positiony});
+      },
+      elementsetHide() {
+        //悬浮点击空白隐藏
+        this.$refs.elementset.elementsetHide();
+      },
+      tablelabelEmit(data) {
+        //获取子组件传过来的参数
+        this.$store.commit('setHeaderTable', data);
+        console.log(data)
+        this.showTableLabels = data;
+      },
       jumpTo(data, id) {
         bus.$emit("menu-change", data);
         this.$router.push({
@@ -501,24 +635,28 @@
         });
       },
     },
+    mounted() {
+    },
     watch: {
       promqlCount: function (n, o) {
         this.expressionChange();
       },
-      expressions:{
-        immediate:true,
-        handler:function(n,o){
-          if(this.promqlCount == 1 && (!n[0]|| n[0] =='')){
-            this.showIntroduce=true
-          }else if(this.promqlCount>1){
-            let temp=n.find((item,index)=>{item != ''});
-            if(typeof temp != undefined){
-              this.showIntroduce=false;
-            }else{
-              this.showIntroduce=true;
+      expressions: {
+        immediate: true,
+        handler: function (n, o) {
+          if (n.length == 1 && (!n[0] || n[0] == '')) {
+            this.showIntroduce = true
+          } else if (n.length > 1) {
+            let temp = n.find((item, index) => {
+              return item != ''
+            });
+            if (!temp) {
+              this.showIntroduce = true;
+            } else {
+              this.showIntroduce = false;
             }
-          }else{
-            this.showIntroduce=false;
+          } else {
+            this.showIntroduce = false;
           }
         }
       }
@@ -536,57 +674,66 @@
     height: 500px
   }
 
-  .explore .chart-view, .table-view{
+  .explore .chart-view, .table-view {
     padding: 10px;
     border: 1px solid lightgrey;
     box-sizing: inherit;
     margin-bottom: 5px;
     transition: height 1s;
   }
-  .shrink-view{
+
+  .shrink-view {
     height: 30px;
-    .view-title i{
+
+    .view-title i {
       transform: rotate(180deg);
     }
-    .chart-room,.table-room{
+
+    .chart-room, .table-room {
       height: 0px;
       visibility: hidden;
     }
 
   }
+
   .explore .view-title {
     font-weight: 500;
     margin-right: 8px;
     font-size: 14px;
     box-shadow: none;
   }
-  .introduce-view .info-room{
+
+  .introduce-view .info-room {
     padding: 24px;
     background-color: #e9edf2;
     border-top: 3px solid #3274d9;
     margin-bottom: 16px;
     margin-right: 4px;
-    -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-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;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
   }
+
   .info-room .cheat-sheet-item__title {
     font-size: 21px;
   }
-  .info-room .cheat-sheet-item__label{
+
+  .info-room .cheat-sheet-item__label {
     font-size: 13px;
   }
-  .info-room code{
-    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
+
+  .info-room code {
+    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
     font-size: 11px;
     background-color: #e9edf2;
     color: #52545c;
     border: 1px solid #c7d0d9;
     border-radius: 4px;
   }
+
   .popover_ul li {
     padding: 10px 3px;
     cursor: pointer;
@@ -596,6 +743,164 @@
     background: $dropdown-hover-background-color !important;
     color: $global-text-color-active !important;
   }
+
+  /*外部引用 样式start*/
+  .doc-content {
+    font-size: 16px;
+  }
+
+  .doc-content p, .doc-content.ul, .doc-content .alert {
+    margin: 15px 0 15px 0;
+    line-height: 1.5;
+  }
+
+  .doc-content > h1 {
+    color: #e6522c;
+    font-size: 30px;
+    text-transform: uppercase;
+    margin: 40px 0 10px 0;
+  }
+
+  .doc-content > h1 a {
+    color: #e6522c;
+  }
+
+  .doc-content.blog > h1 {
+    text-transform: none;
+  }
+
+  .doc-content.blog .sponsor-logos > a > img {
+    width: 250px;
+    display: inline-block !important;
+    margin: 15px 55px;
+  }
+
+  .doc-content > h2 {
+    color: #e6522c;
+    font-size: 22px;
+  }
+
+  .doc-content > h2 code {
+    color: #e6522c;
+    background: none;
+  }
+
+  .doc-content > h3 {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .doc-content > h4 {
+    font-weight: bold;
+    font-size: 18px;
+    margin-top: 20px;
+  }
+
+  .doc-content a.header-anchor {
+    padding-left: 15px;
+  }
+
+  .doc-content a.header-anchor:after {
+    content: "\F0C1";
+    font-family: FontAwesome;
+    font-weight: normal;
+    font-size: .8em;
+  }
+
+  .doc-content a.header-anchor:link,
+  .doc-content a.header-anchor:visited {
+    visibility: hidden;
+  }
+
+  .doc-content h1:hover a.header-anchor:hover,
+  .doc-content h2:hover a.header-anchor:hover,
+  .doc-content h3:hover a.header-anchor:hover,
+  .doc-content h4:hover a.header-anchor:hover,
+  .doc-content h5:hover a.header-anchor:hover,
+  .doc-content h6:hover a.header-anchor:hover {
+    color: #000;
+  }
+
+  .doc-content h1:hover a.header-anchor,
+  .doc-content h2:hover a.header-anchor,
+  .doc-content h3:hover a.header-anchor,
+  .doc-content h4:hover a.header-anchor,
+  .doc-content h5:hover a.header-anchor,
+  .doc-content h6:hover a.header-anchor {
+    color: #999;
+    visibility: visible;
+  }
+
+  .doc-content img {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+
+  .doc-content img.orig-size {
+    width: auto;
+    margin-left: 0;
+  }
+
+  .doc-content .open-source-notice {
+    color: #666;
+    background-color: #f5f5f5;
+    text-align: center;
+    padding: 0.8em;
+    margin-top: 1.5em;
+  }
+
+  .toc {
+    padding: 1em;
+    background-color: #f5f5f5;
+  }
+
+  .toc-right {
+    float: right;
+    width: 40%;
+    margin: 0 0 0.5em 0.5em;
+  }
+
+  .toc ul {
+    padding: 0 0 0 1.5em;
+    margin: 0;
+  }
+
+  .toc a code {
+    color: #337ab7;
+    background-color: transparent;
+  }
+
+  pre {
+    border: 1px solid #ddd;
+    border-left: 4px solid #e6522c;
+    border-radius: 0;
+    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+    background-color: #f5f5f5;
+    color: #333;
+    padding: 15px;
+  }
+
+  pre code {
+    white-space: pre;
+  }
+
+  code {
+    color: #333;
+  }
+
+  aside {
+    color: #888;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #aaa;
+  }
+
+  article {
+    margin: 10px 0 60px 0;
+  }
+
+  /*外部引用 样式end*/
 </style>
 <style>
   .explore-table tr td .cell {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 16db86ef1..062a98501 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -6,7 +6,7 @@
             <el-dropdown class="metric-selector">
               <el-dropdown-menu style="display: none"></el-dropdown-menu>
               <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
-              <el-cascader-panel v-show="dropDownVisible"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
+              <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
             </el-dropdown>
 
           </div>
@@ -36,6 +36,7 @@
           dropDownVisible:false,
           metricStore:[],
           metricOptions:[],
+          cascaderValue:'',
         }
       },
       created() {
@@ -45,6 +46,7 @@
       methods:{
         clearExpression:function(){
           this.expressionChange();
+          this.cascaderValue='';
         },
         addExpression:function(){
           this.$emit('addExpression',this.index);
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 5d6340efc..33af29a6c 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -46,7 +46,7 @@
         <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
           <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
             <template slot="title">
-              <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.name+'-'+item.id==currentProjectTitle || item.id==currentProject.id}" @click.stop="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
+              <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.name+'-'+item.id==currentProjectTitle || item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
                 <div class="sidebar-info-item-txt">
                   <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
                     <span slot="reference" class="">
@@ -444,17 +444,17 @@
       },
       projectChange:function(){
         //展开后为避免左侧无数据，显示对应project的第一个module下的endpoint
-        let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
-        if(currentProjectId != ''){
-          currentProjectId=Number.parseInt(currentProjectId);
-          let moduleList=this.getProjectModule(currentProjectId);
-          this.currentModule=moduleList[0];
-          this.currentProject=this.projectList.find((item)=>{
-            return item.id == currentProjectId
-          })
-          this.getEndpointTableData();
-          // this.$store.commit('setProject',null)
-        }
+        // let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
+        // if(currentProjectId != ''){
+        //   currentProjectId=Number.parseInt(currentProjectId);
+        //   let moduleList=this.getProjectModule(currentProjectId);
+        //   this.currentModule=moduleList[0];
+        //   this.currentProject=this.projectList.find((item)=>{
+        //     return item.id == currentProjectId
+        //   })
+        //   this.getEndpointTableData();
+        //   // this.$store.commit('setProject',null)
+        // }
       },
       detailProjectInfo:function(event,project){
         if(event){
@@ -463,7 +463,8 @@
             this.currentProject=project;
             this.$store.commit('setProject',this.currentProject)
           }
-          this.$refs.projectLeft.setActiveNames([]);
+          this.currentModule={};
+          // this.$refs.projectLeft.setActiveNames([]);
         }
       },
       getAllModuleList:function(){

From faae4afb3e5f947ce161ca3c04951f0fac7ecd7e Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Thu, 23 Apr 2020 16:49:56 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix=EF=BC=9Aexplore=E6=8C=87=E5=90=91?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/header.vue                 | 3 ---
 .../src/components/page/dashboard/overview/overview2.vue       | 1 -
 2 files changed, 4 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 8618624b5..b8354c2d7 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -43,9 +43,6 @@
           <div @click="jumpTo('panel')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-2">
-          <div @click="jumpTo('metricPreview')" :class="{'menu-item-active' :activeIndex == 'metricPreview'}">{{$t('dashboard.metricPreview.title')}}</div>
-        </el-menu-item>
-        <el-menu-item index="1-3">
           <div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
       </el-submenu>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 86b0aaeec..d323fb696 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -7,7 +7,6 @@
         <div class="sidebar-info">
           <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
           <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
-          <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
           <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
         </div>
       </div>

From 951d7b423c0e16e159ed57fc226f7e9958ef15af Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Thu, 23 Apr 2020 17:20:18 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix=EF=BC=9Aproject=20=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/page/project/project.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 33af29a6c..80a206214 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -464,6 +464,7 @@
             this.$store.commit('setProject',this.currentProject)
           }
           this.currentModule={};
+          this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
           // this.$refs.projectLeft.setActiveNames([]);
         }
       },