Merge remote-tracking branch 'origin/codeCheck' into codeCheck

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%;

nezha-fronted/src/components/charts/chart-list.vue

@@ -587,6 +587,7 @@ export default {
               let errorMsg = "";
               res.forEach((response, innerPos) => {
                 if (response.status === 'success') {
+                  errorMsg = "";
                   if (response.data.result) {
                     // console.log(response.data.result)
                     // 循环处理每个elements下获取的数据列

nezha-fronted/src/components/charts/chart-table.scss

@@ -78,46 +78,6 @@
     text-align: center;
     width: 100%;
     line-height: 28px;
-    .panel-info-corner {
-      color: #767980;
-      cursor: pointer;
-      position: absolute;
-      display: none;
-      left: 0;
-      width: 28px;
-      height: 28px;
-      z-index: 2;
-      top: 0;
-    }
-    .panel-info-corner--error {
-      display: block;
-      color: #fff;
-    }
-    .panel-info-corner .fa {
-      position: relative;
-      top: -6px;
-      left: -6px;
-      font-size: 75%;
-      z-index: 3;
-    }
-    .fa {
-      display: inline-block;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .panel-info-corner--error .panel-info-corner-inner {
-      border-left: 28px solid #e02f44;
-      border-right: none;
-      border-bottom: 28px solid rgba(0,0,0,0);
-    }
-    .panel-info-corner-inner {
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
     .nz-chart-top{
       width:100%;
     }

nezha-fronted/src/components/charts/chart-table.vue

@@ -20,7 +20,7 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
-            close-delay="10"
+            :close-delay=10
             placement="top-start"
             trigger="hover"
             popper-class="chart-error-popper">
@@ -72,8 +72,10 @@
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
               <div class="float-right panel-calendar dialog-tool">
+                <!--
                 <el-date-picker prefix-icon=" " size="mini" class="nz-dashboard-picker" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-                </el-date-picker>
+                </el-date-picker>-->
+                <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
@@ -112,11 +114,13 @@ import bus from '../../libs/bus';
 import {Loading} from 'element-ui';
 import chartDataFormat from './chartDataFormat'
 import loading from "../common/loading";
+import timePicker from '../common/timePicker'
 
 export default {
     name: 'chartTable',
   components: {
     'loading': loading,
+    'time-picker':timePicker
   },
     props: {
         // 看板id
@@ -216,7 +220,7 @@ export default {
             }],
             searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
             oldSearchTime: [],
-            pickerOptions: {
+            /*pickerOptions: {
                 shortcuts: [{
                     text: this.$t("dashboard.panel.recOne"),
                     onClick(picker) {
@@ -295,7 +299,7 @@ export default {
                         picker.$emit('pick', [start, end]);
                     }
                 }]
-            },
+            },*/
         };
     },
     created() {
@@ -543,6 +547,7 @@ export default {
             //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
             //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
             //this.showTable = false;
+            this.searchTime = [...time];
             this.seriesItemScreen = [];
             for(let i=0;i<8;i++){
               this.seriesItemScreen.push({//表格数据
@@ -568,8 +573,12 @@ export default {
             //this.searchTime = this.oldSearchTime;
           //alert(JSON.stringify(this.oldSearchTime));
             this.searchTime = [];
-            this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+            //this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = this.oldSearchTime[1];
+            //this.searchTime[1] = this.oldSearchTime[1];
+            this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+            this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+            this.$refs.calendarPanel.setCustomTime(this.searchTime);
+
             this.seriesItemScreen = this.seriesItem;
             this.screenModal = true;
             //this.startLoading('screen');

nezha-fronted/src/components/charts/chartPreview.vue

@@ -28,9 +28,24 @@
                :modal-append-to-body='false'
                @close="handleClose"
                @opened="initDialog">
+      <el-popover
+        v-if="isError"
+        placement="top-start"
+        :close-delay=10
+        trigger="hover"
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
+        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa-model" ></i>
+              <span class="panel-info-corner-inner"></span>
+          </span>
+      </el-popover>
       <div slot="title">
         <span class="nz-dialog-title">{{chart.title}}</span>
         <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url'">
+
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
+          <!--
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
@@ -41,7 +56,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>
+          </el-date-picker>-->
         </div>
       </div>
 
@@ -96,11 +111,13 @@
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import timePicker from '../common/timePicker'
 
   export default {
     name: 'chartPreview',
     components: {
       'loading': loading,
+      'time-picker':timePicker
     },
     props: {
       panelId:Number,
@@ -111,6 +128,8 @@
         //data: {}, // 该图表信息,chartItem
         dailogWidth:'80%',
         //seriesItem: [], // 保存信息
+        isError:false,
+        errorContent:'',
         seriesItemScreen:[],
         pageSizes:[50,100,200],
         screenPageObj:{
@@ -149,13 +168,17 @@
         showLegend:true,
         tableShow:true,
         urlShow:true,
-        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+        searchTime: [
+          new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
+          new Date(bus.computeTimezone(new Date().getTime()))
+        ],
         //oldSearchTime:[],
         minHeight:200,
         chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:50,
         legendHeight:80,
         //oldChartBoxCss:'',
+        /*
         pickerOptions: {
           shortcuts: [
             {
@@ -236,7 +259,7 @@
                 picker.$emit('pick', [start, end]);
               }
             }]
-        },
+        },*/
       };
     },
     computed: {
@@ -245,7 +268,9 @@
     methods: {
       // 全屏查看
       show(chartInfo) {
-        this.searchTime = [new Date().setHours(new Date().getHours()-1),new Date()];
+        this.isError = false;
+        this.searchTime = [new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
+          new Date(bus.computeTimezone(new Date().getTime()))];
         this.chart=chartInfo;
 
         let chartType= chartInfo.type;
@@ -388,6 +413,8 @@ console.log('=======',this.chart);
                 };
                 res.forEach((response, innerPos) => {
                   if (response.status === 'success') {
+                    this.isError = false;
+                    this.errorContent = "";
                     if (response.data.result) {
                       // console.log(response.data.result)
                       // 循环处理每个elements下获取的数据列
@@ -472,12 +499,14 @@ console.log('=======',this.chart);
                       });
                     }
                   }else{
+                    alert('error')
+                    this.isError = true;
                     if(response.msg){
-                      this.$message.error(response.msg);
+                      this.errorContent = response.msg;
                     }else if(response.error){
-                      this.$message.error(response.error);
+                      this.errorContent = response.error;
                     }else {
-                      this.$message.error(response);
+                      this.errorContent = response;
                     }
                   }
                 });
@@ -940,6 +969,7 @@ console.log('=======',this.chart);
       },
       */
       dateChange(time) {
+        this.searchTime = [...time];
         let chartType = this.chart.type;
         if (chartType === 'table') {
           this.seriesItemScreen = [];
@@ -997,6 +1027,8 @@ console.log('=======',this.chart);
               }
               res.forEach((response,pos) => {
                 if (response.status === 'success') {
+                  this.isError = false;
+                  this.errorContent = "";
                   if (response.data.result) {
                     // 循环处理每个elements下获取的数据列
                     response.data.result.forEach((queryItem,innerPos) => {
@@ -1063,6 +1095,15 @@ console.log('=======',this.chart);
                       }
                     });
                   }
+                }else{
+                  this.isError = true;
+                  if(response.msg){
+                    this.errorContent = response.msg;
+                  }else if(response.error){
+                    this.errorContent = response.error;
+                  }else {
+                    this.errorContent = response;
+                  }
                 }
               });
               this.initChart(this.chart,series, this.$refs.screenShowArea,legend);

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -74,8 +74,62 @@
     }
   }
 }
+.panel-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.panel-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.panel-info-corner .fa {
+  position: relative;
+  top: -6px;
+  left: -6px;
+  font-size: 75%;
+  z-index: 3;
+}
+.panel-info-corner .fa-model {
+  position: relative;
+  top: -3px;
+  left: 4px;
+  font-size: 75%;
+  z-index: 3;
+}
+.fa , .fa-model{
+  display: inline-block;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.panel-info-corner--error .panel-info-corner-inner {
+  border-left: 28px solid #e02f44;
+  border-right: none;
+  border-bottom: 28px solid rgba(0,0,0,0);
+}
+.panel-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
 .chart-error-popper[x-placement^=top] .popper__arrow::after {
   border-top-color: #e02f44;
+  bottom:0px;
+}
+.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e02f44;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
 }
 .chart-error-popper{
   background-color:#e02f44;
@@ -123,46 +177,6 @@
      text-align: center;
      width: 100%;
      line-height: 28px;
-    .panel-info-corner {
-      color: #767980;
-      cursor: pointer;
-      position: absolute;
-      display: none;
-      left: 0;
-      width: 28px;
-      height: 28px;
-      z-index: 2;
-      top: 0;
-    }
-    .panel-info-corner--error {
-      display: block;
-      color: #fff;
-    }
-    .panel-info-corner .fa {
-      position: relative;
-      top: -6px;
-      left: -6px;
-      font-size: 75%;
-      z-index: 3;
-    }
-    .fa {
-      display: inline-block;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .panel-info-corner--error .panel-info-corner-inner {
-      border-left: 28px solid #e02f44;
-      border-right: none;
-      border-bottom: 28px solid rgba(0,0,0,0);
-    }
-    .panel-info-corner-inner {
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
 
     .nz-chart-top{
       width:100%;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -27,7 +27,7 @@
       <el-popover
         v-if="isError"
         placement="top-start"
-        close-delay="10"
+        :close-delay=10
         trigger="hover"
         popper-class="chart-error-popper">
         <div >{{errorContent}}</div>
@@ -91,11 +91,27 @@
                :visible.sync="screenModal"
                width="90%"
                @close="screenModal = false"
+               style="margin-top: 1vh !important;"
                @opened="initDialog">
+      <el-popover
+        v-if="isError"
+        placement="top-start"
+        :close-delay=10
+        trigger="hover"
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
+        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa-model" ></i>
+              <span class="panel-info-corner-inner"></span>
+          </span>
+      </el-popover>
       <div slot="title" >
         <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
         <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
         <div class="float-right panel-calendar dialog-tool">
+
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+          <!--
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
@@ -106,7 +122,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>
+          </el-date-picker>-->
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
@@ -133,11 +149,13 @@
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import timePicker from '../common/timePicker'
 
   export default {
     name: 'lineChartBlock',
     components: {
       'loading': loading,
+      'time-picker':timePicker
     },
     props: {
       editChartId: {
@@ -215,7 +233,7 @@
         chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:28,
         legendHeight:80,
-        pickerOptions: {
+        /*pickerOptions: {
           shortcuts: [
             {
               text:  this.$t("dashboard.panel.recOne"),
@@ -295,7 +313,7 @@
                 picker.$emit('pick', [start, end]);
               }
             }]
-        },
+        },*/
       };
     },
     computed: {
@@ -1268,7 +1286,10 @@
         // 初始化同步时间
         this.filter.start_time = this.stableFilter.start_time;
         this.filter.end_time = this.stableFilter.end_time;
-        this.searchTime = this.oldSearchTime;
+        //this.searchTime = this.oldSearchTime;
+        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+        this.$refs.calendarPanel.setCustomTime(this.searchTime);
         this.screenModal = true;
         this.isGreyScreen=[];
 
@@ -1283,6 +1304,7 @@
         //this.dateChange();
       },
       dateChange(time) {
+        this.searchTime = [...time];
         this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
         this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         this.echartModalStore.clear();
@@ -1345,6 +1367,8 @@
               }
               res.forEach((response,pos) => {
                 if (response.status === 'success') {
+                  this.isError = false;
+                  this.errorContent = "";
                   if (response.data.result) {
                     // 循环处理每个elements下获取的数据列
                     response.data.result.forEach((queryItem,innerPos) => {
@@ -1428,6 +1452,15 @@
                       }
                     });
                   }
+                }else{
+                  this.isError = true;
+                  if(response.msg){
+                    this.errorContent = response.msg;
+                  }else if(response.error){
+                    this.errorContent = response.error;
+                  }else {
+                    this.errorContent = response;
+                  }
                 }
               });
               /*

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="$toTop('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>
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;"></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 = '';
+          let type = 'expert';
-          if (this.selectedEndpoints[i].type == '1') {
+          // if (this.selectedEndpoints[i].type == '1') {
-            type = 'expert';
+          //   type = 'expert';
-          } else if (this.selectedEndpoints[i].type == '2') {
+          // } else if (this.selectedEndpoints[i].type == '2') {
-            type = 'normal';
+          //   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;

nezha-fronted/src/components/common/language/en.js

@@ -152,7 +152,7 @@ const en = {
       },
       startTime:'Start time', //'开始时间'
       endTime:'End time',//'结束时间'
-      to:'To', //To
+      to:'to', //To
       recOne:'Last 1 hour', //'最近1小时'
       recFour:'Last 4 hours',//'最近4小时'
       recOneDay:'Last 1 day',//'最近1日'

nezha-fronted/src/components/common/pickTime.vue

@@ -1,41 +1,33 @@
 <template>
-  <div class="interval-refresh">
+  <div class="interval-refresh ">
-    <el-date-picker size="mini" ref="calendar"
+    <time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
-                    format="yyyy/MM/dd HH:mm:ss"
+      <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
-                    @change="dateChange"
+        <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
-                    v-model="searchTime"
+          <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
-                    type="datetimerange"
+          <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
-                    :picker-options="pickerOptions"
-                    :range-separator="$t('dashboard.panel.to')"
-                    :start-placeholder="$t('dashboard.panel.startTime')"
-                    :end-placeholder="$t('dashboard.panel.endTime')"
-                    style="margin-right: 20px"
-                    align="right">
-    </el-date-picker>
-    <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh">
-      <button style="border-right: 1px solid rgba(162,162,162,0.50);height: 100%" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
-        <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
-        <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
-      </button>
-      <el-popover v-model="visible" placement="bottom-start" :width="50" trigger="click" popper-class="interval-refresh-popover" >
-        <ul class="popover_ul">
-          <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i)">
-            {{i.name}}
-          </li>
-        </ul>
-        <button type="button" style="border-radius: 0 4px 4px 0;height: 100%" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-          <span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
         </button>
-      </el-popover>
+        <el-popover v-model="visible" placement="bottom-start" :width="50" trigger="click" popper-class="interval-refresh-popover" >
-    </div>
+          <ul class="popover_ul">
+            <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i)">
+              {{i.name}}
+            </li>
+          </ul>
+          <button type="button" style="border-radius: 0 4px 4px 0;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+            <span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
+          </button>
+        </el-popover>
+      </div>
   </div>
 </template>
 
 <script>
   import bus from "../../libs/bus";
-
+  import timePicker from "./timePicker";
   export default {
     name: "intervalRefresh",
+    components:{
+      'time-picker':timePicker,
+    },
     model:{
       event:'change',
       prop:'timeRange'
@@ -57,88 +49,6 @@
     data(){
       return{
         searchTime:[],
-        pickerOptions: {
-          shortcuts: [
-            {
-              text: this.$t("dashboard.panel.recOne"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setHours(start.getHours() - 1);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recFour"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setHours(start.getHours() - 4);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recOneDay"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 1);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.yesterday"),
-              onClick(picker) {
-                const start = new Date();
-                const end = new Date();
-                start.setDate(start.getDate() - 1);
-                start.setHours(0);
-                start.setMinutes(0);
-                start.setSeconds(0);
-                end.setDate(end.getDate() - 1);
-                end.setHours(23);
-                end.setMinutes(59);
-                end.setSeconds(59);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recSevenDay"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 7);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recOneMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 30);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.curMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(1);
-                start.setHours(0);
-                start.setMinutes(0);
-                start.setSeconds(0)
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.lastMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(1);
-                start.setMonth(start.getMonth() - 1);
-                end.setDate(0);
-                start.setStart();
-                end.setEnd();
-                picker.$emit('pick', [start, end]);
-              }
-            }],
-        },
         visible: false,
         intervalTimer: null,
         intervalList: [{
@@ -171,12 +81,12 @@
       selectInterval(val) {
         this.visible = false;
         clearInterval(this.intervalTimer);
+        this.interval = val;
         if (val && val.value != -1) {
-          this.interval = val;
           const start = new Date(this.searchTime[1]);
           const now = new Date();
           const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
+          if (interval >= 60) { //如果结束时间到现在超过30s，则
             this.getIntervalData(interval);
           }
           this.intervalTimer = setInterval(() => {
@@ -191,6 +101,8 @@
         end.setSeconds(end.getSeconds() + interval);
 
         this.searchTime = this.timeFormate([start,end])
+        this.$refs.timePicker.setCostomTime(this.searchTime);
+        this.$emit('change',this.searchTime)
         //刷新数据
         this.refreshDataFunc();
       },
@@ -200,8 +112,8 @@
         return [startTime, endTime];
       },
       dateChange(time) {
-        let timeRange=this.timeFormate(time);
+        this.searchTime=time;
-        this.$emit('change',timeRange)
+        this.$emit('change',this.searchTime)
         this.refreshDataFunc();
       },
     }
@@ -211,6 +123,10 @@
 <style scoped lang="scss">
 .interval-refresh{
   display: flex;
+  align-items: center;
+}
+.interval-refresh .time-picker{
+  margin-right: 20px;
 }
 .popover_ul{
   text-align: center;

nezha-fronted/src/components/common/timePicker.vue

@@ -12,10 +12,10 @@
     line-height:24px;
     padding-left:5px;
     margin-left:0px;
-    margin-top: 3px;
+    margin-top: 0px !important;
     text-align:left;
     border-radius:4px;
-    width:160px;
+    min-width:120px;
     height:24px;
     border:solid 1px  #d8dce1;
     white-space: nowrap;
@@ -29,10 +29,56 @@
     line-height:22px;
     text-align:center;
   }
+  .panel-time-picker-hidden{
+    width:0px;
+    padding:0px !important;
+    visibility: hidden;
+  }
+  .time-picker-button{
+    padding: 0 1px !important;
+    height:24px !important;
+    margin-top:0px !important;
+  }
+
+  .time-picker-left-button{
+    margin-right: 4px;
+  }
+
+  .time-picker-right-button{
+    margin-left: 4px;
+  }
+  .calendar-popover-text {}
+</style>
+<style lang="scss">
+  .panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
+    left: 85% !important;
+  }
+  .panel-time-picker-popper[x-placement^=bottom] {
+  }
+
+  .panel-time-picker-popper .el-date-table td.today span {
+    color: #FFF !important;
+  }
+
+  .panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
+    display:none;
+  }
 </style>
 <template>
   <div class="calendar top-tools" id="panel-calender">
-    <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
+    <el-date-picker prefix-icon=" " class="panel-time-picker-hidden hidden" size="mini" ref="calendar"
+                    format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange"
+                    popper-class="panel-time-picker-popper"
+                    :range-separator="$t('dashboard.panel.to')"
+                    :start-placeholder="$t('dashboard.panel.startTime')"
+                    :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+    </el-date-picker>
+    <!--
+    <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
+            class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
+      <i style="font-size: 12px" class="el-icon-arrow-right"></i>
+    </button>-->
+    <el-dropdown @command="timeChange" ref="timePickerDropdown"   class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
       <el-popover
         placement="bottom-end"
         min-width="120px"
@@ -41,19 +87,19 @@
         trigger="hover"
         id="panel-calender-popover">
         <el-row  :gutter="10" class="calendar-popover">
-          <el-col :span="24">{{searchTime[0]}}</el-col>
+          <el-col :span="24" class="calendar-popover-text">{{searchTime[0]}}</el-col>
         </el-row>
         <el-row  :gutter="10" class="calendar-popover">
-          <el-col :span="24">to</el-col>
+          <el-col :span="24" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
         </el-row>
         <el-row  :gutter="10" class="calendar-popover">
-          <el-col :span="24">{{searchTime[1]}}</el-col>
+          <el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
-        </el-row>
-        <el-row  :gutter="10" class="el-dropdown-link" slot="reference">
-          <el-col :span="3" ><i class="el-icon-time"></i></el-col>
-          <el-col :span="17" class="panel-list-title" >{{showTime.text}}</el-col>
-          <el-col :span="4" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
         </el-row>
+        <div  class="el-dropdown-link" slot="reference">
+          <i class="el-icon-time" style="width:20px;"></i>
+          <span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
+          <i class="el-icon-arrow-down el-icon--right"  style="padding-left:0px !important;width:20px;"></i>
+        </div>
       </el-popover>
       <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
         <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>  -->
@@ -63,12 +109,11 @@
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-    <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+    <!--
-                    format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+    <button type="button" style="border-radius: 1px 1px 1px 1px" @click="left()" v-show="isCustom"
-                    :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
+            class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-left-button" >
-                    :start-placeholder="$t('dashboard.panel.startTime')"
+      <i style="font-size: 12px" class="el-icon-arrow-left"></i>
-                    :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+    </button>-->
-    </el-date-picker>
   </div>
 </template>
 
@@ -82,6 +127,7 @@ export default {
   data() {
     return {
       isPopoverDisabled:false,
+      isCustom:false,
       searchTime:[
         bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
         bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
@@ -90,10 +136,6 @@ export default {
         id: 1,
         text: this.$t("dashboard.panel.lastFiveMin"),
       },
-      oldTime:{
-        id: 1,
-        text: this.$t("dashboard.panel.lastFiveMin"),
-      },
       timeData: [
         {
           id:0,
@@ -169,34 +211,91 @@ export default {
     };
   },
   methods: {
-    timeChange(val) {
+    dateChange(val){
-      this.showTime = val;
+      let startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss');
+      let endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss');
+      this.$set(this.searchTime, 0, startTime);
+      this.$set(this.searchTime, 1, endTime);
 
+      //let timerPicker = document.querySelector('#timePickerContent');
+      //timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
+      this.$set(this.showTime, 'id', 0);
+      this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      /*
+            let tipElementList = document.getElementsByClassName('calendar-popover-text');
+            if(tipElementList && tipElementList.length===3){
+              console.log('-0-0-0',tipElementList);
+              tipElementList[0].innerHTML = this.searchTime[0];
+              tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
+              tipElementList[2].innerHTML = this.searchTime[1];
+              console.log('-0-0-2',tipElementList);
+            }*/
+      this.$emit('change', this.searchTime);
+
+    },
+    setCustomTime(timeGroup){
+      if(timeGroup.length===2){
+        this.$set(this.searchTime, 0, timeGroup[0]);
+        this.$set(this.searchTime, 1, timeGroup[1]);
+
+        this.$set(this.showTime, 'id', 0);
+        this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      }
+    },
+    //left(){},
+    //right(){},
+    timeChange(val) {
+      this.$set(this.showTime, 'id', val.id);
+      this.$set(this.showTime, 'text', val.text);
       if (!val) {
+        this.isCustom = false;
         return false;
       }else {
-        let id = val.id;
-        if(id===0){
-
-        }else {
-          this.oldTime = val;
-        }
         this.setSearchTime(val.type,val.value);
+        //let timerPicker = document.querySelector('#timePickerContent');
+        //timerPicker.innerText = val.text;
+/*
+        let tipElementList = document.getElementsByClassName('calendar-popover-text');
+        if(tipElementList && tipElementList.length===3){
+          tipElementList[0].innerHTML = this.searchTime[0];
+          tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
+          tipElementList[2].innerHTML = this.searchTime[1];
+        }*/
+
+        let id = val.id;
+        if(id===0){//custom
+          this.isCustom = true;
+          this.$refs.calendar.focus();
+        }else {
+          this.isCustom = false;
+          this.$emit('change', this.searchTime);
+        }
       }
-      this.$emit('change', this.searchTime);
     },
     setSearchTime(type,val){
       if(type==='minute'){
-        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss'),
+        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-        this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        this.$set(this.searchTime, 0, startTime);
+        this.$set(this.searchTime, 1, endTime);
       }else if(type==='hour'){
-        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss'),
+        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        this.$set(this.searchTime, 0, startTime);
+        this.$set(this.searchTime, 1, endTime);
       }else if(type==='date'){
-        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss'),
+        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+        this.$set(this.searchTime, 0, startTime);
+        this.$set(this.searchTime, 1, endTime);
       }
     },
+    setCostomTime:function(costomTime){
+      this.searchTime=Object.assign(costomTime);
+      let val=Object.assign(this.timeData[0]);
+      this.$set(this.showTime, 'id', val.id);
+      this.$set(this.showTime, 'text', val.text);
+    },
     popoverClick(val){
       if(val){
         this.isPopoverDisabled = true;
@@ -204,7 +303,24 @@ export default {
         this.isPopoverDisabled = false;
       }
     },
-  }
+  },
+  mounted: function () {
+    /*
+    if(this.isCustom){
+      if(this.timeGroup.length===2){
+        this.$set(this.searchTime, 0, this.timeGroup[0]);
+        this.$set(this.searchTime, 1, this.timeGroup[1]);
+
+        this.$set(this.showTime, 'id', 0);
+        this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      }
+    }else{
+      let timeObj = this.timeData.find((item)=>{return item.id===this.timeDataId});
+      this.$set(this.showTime, 'id', this.timeDataId);
+      this.$set(this.showTime, 'text', timeObj.text);
+      this.setSearchTime(timeObj.type,timeObj.value);
+    }*/
+  },
 };
 </script>
 

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -13,14 +13,16 @@
         <div class="main-list main-and-sub-transition">
             <!-- 顶部工具栏 -->
             <div class="top-tools" style="z-index: 1">
-              <button :disabled="saveDisabled" type="button" @click="saveChart"
+              <div class="top-tool-main-right">
-                      class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
+                <pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
-                      :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
+                  <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
-                {{$t('dashboard.metric.saveChart')}}
+                </pick-time>
-              </button>
+                <button :disabled="saveDisabled" type="button" @click="saveChart"
-              <pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
+                        class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
-                <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
+                        :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
-              </pick-time>
+                  {{$t('dashboard.metric.saveChart')}}
+                </button>
+              </div>
             </div>
             <div style="height: calc(100% - 50px);width: 100%;" >
               <el-scrollbar style="height: 100%" class="el-scrollbar-large">
@@ -28,6 +30,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"
@@ -39,7 +42,7 @@
               </div>
               <div class="chart-view right-margin" 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="view-title" @click="changeChartVisible" style="float: left"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
                 <div class="chart-room">
                   <chart ref="exploreChart"></chart>
                 </div>
@@ -209,7 +212,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         promqlCount: 1,
         promqlKeys: [],
         expressions: [''],
-        filterTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+        filterTime: [
+          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
+          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
+        ],
         showIntroduce: true,
         defaultChartVisible: true,
         defaultTableVisible: true,
@@ -250,9 +256,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 +275,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 +297,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);
+                if(series.length>0){
-                this.$refs.exploreChart.setRandomColors(series.length)
+                  this.$refs.exploreChart.setLegend(legend);
-                this.$refs.exploreChart.setSeries(series)
+                  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 +365,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);
+                  console.log(tData.length)
-                  this.pageObj.total = this.storedTableData.length;
+                  if(tData.length>0){
-                  this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
+                    this.storedTableData = Object.assign([], tData);
-                  this.tableLabels = Object.assign([], tLabels);
+                    this.pageObj.total = this.storedTableData.length;
-                  this.showTableLabels = Object.assign([], tLabels);
+                    this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
-                  this.dropCol = Object.assign([], tLabels);
+                    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 +470,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

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;

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -41,15 +41,14 @@
 
           <div class="panel-calendar margin-r-20">
             <div class="block">
-              <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
+              <!--
+<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
                               :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
                               :start-placeholder="$t('dashboard.panel.startTime')"
                               :end-placeholder="$t('dashboard.panel.endTime')" align="right">
               </el-date-picker>
-              <!--
-
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
               -->
             </div>
           </div>
@@ -104,7 +103,7 @@
   import ChartBox from "./chartBox";
   import ChartList from '../../charts/chart-list';
   import bus from '../../../libs/bus';
-  //import timePicker from '../../common/timePicker'
+  import timePicker from '../../common/timePicker'
 
   export default {
     name: "panel",
@@ -116,6 +115,7 @@
           show: false,
           title: this.$t('dashboard.panel.createPanelTitle')
         },
+        /*
         pickerOptions: {
           shortcuts: [{
             text: this.$t("dashboard.panel.recOne"),
@@ -195,7 +195,7 @@
               picker.$emit('pick', [start, end]);
             }
           }]
-        },
+        },*/
         searchTime: [
           new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
           new Date(bus.computeTimezone(new Date().getTime()))
@@ -278,7 +278,7 @@
     components: {
       'chart-box': ChartBox,
       'chart-list': ChartList,
-      //'time-picker':timePicker
+      'time-picker':timePicker
     },
     methods: {
       //刷新
@@ -838,7 +838,6 @@
   .nz-dashboard-picker {
   }
 
-
 </style>
 <style lang="scss">
   .panel .top-tools input {

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;