From aa0889c61355993b0a0bbdbf424eb2927da3b028 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 24 Apr 2020 17:41:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:explore=20=E6=B7=BB=E5=8A=A0=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=20&=20endpoint-qu?=
 =?UTF-8?q?ery=20dialog=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  2 +-
 .../bottomBox/tabs/endpointQueryTab.vue       | 31 ++++++-------
 .../page/dashboard/explore/explore.vue        | 43 +++++++++++++------
 .../page/dashboard/explore/promqlInput.vue    | 23 +++++++++-
 .../src/components/page/project/project.vue   |  3 +-
 5 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index cd56f03de..67eeac420 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1451,7 +1451,7 @@ li{
   border-radius: 5px !important;
 }
 .line-chart-block-modal .el-dialog {
-  margin-top: 5% !important;
+  //margin-top: 5% !important;
 }
 .table-chart-dialog .el-dialog {
   height: 80%;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index e5ed9fc82..8c10fdf8b 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -4,6 +4,11 @@
     margin-top: 16px;
   }
 </style>
+<style>
+  .endpoint-dialog .el-dialog__body{
+    height: 100% !important;
+  }
+</style>
 <template>
   <span>
     <div class="sub-top-tools">
@@ -145,7 +150,7 @@
     </el-table>-->
     <button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
 
-    <el-dialog class="line-chart-block-modal nz-dialog"
+    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
                :title="$t('project.endpoint.dialogTitle')"
                :visible.sync="graphShow"
                width="90%"
@@ -153,16 +158,12 @@
                @close="dialogClose">
       <div slot="title">
         {{$t("project.endpoint.dialogTitle")}}
-        <div class="float-right panel-calendar dialog-tool">
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
           <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime"></pick-time>
+           <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>
       <chart ref="endpointChart" ></chart>
-      <div class="line-100 margin-t-10"></div>
-      <div class="chart-bottom">
-        <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
-      </div>
-      <loading  ref="graphLoading"></loading>
     </el-dialog>
 
     <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData"></chart-box>
@@ -224,12 +225,12 @@
         metricInfo.elements = [];
         //console.info("aaa", this.selectedEndpoints)
         for(let i = 0; i < this.selectedEndpoints.length; i++) {
-          let type = '';
-          if (this.selectedEndpoints[i].type == '1') {
-            type = 'expert';
-          } else if (this.selectedEndpoints[i].type == '2') {
-            type = 'normal';
-          }
+          let type = 'expert';
+          // if (this.selectedEndpoints[i].type == '1') {
+          //   type = 'expert';
+          // } else if (this.selectedEndpoints[i].type == '2') {
+          //   type = 'normal';
+          // }
           metricInfo.elements.push({expression: this.selectedEndpoints[i].element, type: type});
         }
         this.$refs.addChartModal.createData(-1, metricInfo);
@@ -418,10 +419,6 @@
           this.$refs.endpointChart.startLoading();
           this.queryChartDate();
         });
-        /*setTimeout(()=> {
-          this.$refs.graphLoading.startLoading();
-          this.queryChartDate();
-        }, 200);*/
       },
       dialogClose:function(){
         this.graphShow=false;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index d98c451c3..da2fd8426 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -28,6 +28,7 @@
                 <!--坑，这个index居然是从1开始-->
                 <promql-input
                   v-for="index of promqlKeys.length"
+                  :ref="'promql-'+(index-1)"
                   :id="promqlKeys[index-1]"
                   :key="promqlKeys[index-1]"
                   :expression-list="expressions"
@@ -250,9 +251,11 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         setTimeout(() => {
           if (this.expressions.length > 0) {
             let requestArr = [];
+            let promqlInputIndexs=[];
             this.expressions.forEach((item, index) => {
               if (item != '') {
                 let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
+                promqlInputIndexs.push(index);
                 requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime[0] + '&end=' + this.filterTime[1] + '&step='+step))
               }
             })
@@ -267,7 +270,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                 res.forEach((response, index) => {
                   if (response.data.status == 'success') {
                     let data = response.data.data.result;
-                    data.forEach((result, index) => {
+                    data.forEach((result, i) => {
                       let seriesItem = {
                         name: '',
                         symbol: 'none',  //去掉点
@@ -289,13 +292,22 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       series.push(seriesItem);
                       legend.push({name: seriesItem.name, alias: null, isGray: false});
                     })
+                  }else{
+                    let promqlIndex=promqlInputIndexs[index];
+                    console.log(response)
+                    this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
                   }
                 })
-                this.$refs.exploreChart.setLegend(legend);
-                this.$refs.exploreChart.setRandomColors(series.length)
-                this.$refs.exploreChart.setSeries(series)
+                if(series.length>0){
+                  this.$refs.exploreChart.setLegend(legend);
+                  this.$refs.exploreChart.setRandomColors(series.length)
+                  this.$refs.exploreChart.setSeries(series)
+                  this.defaultChartVisible = true;
+                }else{
+                  // this.defaultChartVisible = false;
+                }
               }
-              this.defaultChartVisible = true;
+
               this.$refs.exploreChart.endLoading();
             })
           }
@@ -348,14 +360,19 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       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 = Object.assign([], tLabels);
-                  this.showTableLabels = Object.assign([], tLabels);
-                  this.dropCol = Object.assign([], tLabels);
+                  console.log(tData.length)
+                  if(tData.length>0){
+                    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;
+                  }else{
+                    // this.defaultTableVisible = false;
+                  }
                 }
-                this.defaultTableVisible = true;
                 this.tableLoading = false;
               })
             }
@@ -448,8 +465,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         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
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 062a98501..b6c85942e 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="promqlInput">
+    <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
       <div class="query-row">
         <div class="query-input">
           <div class="metricBtn">
@@ -8,10 +8,11 @@
               <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" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
             </el-dropdown>
-
           </div>
           <div class="inputBox">
             <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>
+            <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>
         </div>
       </div>
@@ -21,6 +22,7 @@
           <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"><i class="el-icon-minus"></i></div>
         </div>
       </div>
+
     </div>
 </template>
 
@@ -37,6 +39,8 @@
           metricStore:[],
           metricOptions:[],
           cascaderValue:'',
+          errorMsg:null,
+          appendMsg:null,
         }
       },
       created() {
@@ -118,6 +122,13 @@
         },
         expressionChange:function(){
           this.$emit('change')
+        },
+        setError:function(errMsg){
+          console.log(errMsg)
+          this.errorMsg=errMsg;
+        },
+        setMsg:function(){
+          this.appendMsg
         }
       },
       watch:{
@@ -141,6 +152,14 @@
   .promqlInput .query-row{
     width: 100%;
   }
+  .inputBox .append-msg{
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+  }
+  .inputBox .error{
+    color: #F56C6C;
+  }
   .query-row .query-input{
     display: flex;
     justify-content: flex-start;
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 8054e0acf..c8aae31e1 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="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
+              <div class="sidebar-info-item" :class="{'sidebar-info-item-active': 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="">
@@ -497,6 +497,7 @@
       //左侧module列表选中切换
       changeModule(module) {
         this.currentModule = module;
+        this.currentProject={};
         this.endpointSearchLabel = {moduleId: ''};
         this.$refs.projectSearch.clearSearch();
         this.showSubList = false;