feat:时间选择&定时刷新抽取为组件

nezha-fronted/src/assets/stylus/main.scss

@@ -254,6 +254,10 @@ li{
 .nz-btn:focus {
   outline: 0;
 }
+.nz-btn .nz-btn-text{
+  font-weight: 500;
+  white-space: nowrap;
+}
 .nz-btn.nz-btn-disabled {
   background-image: none;
   color: #e5e5e5;

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

@@ -0,0 +1,227 @@
+<template>
+  <div class="interval-refresh">
+    <el-date-picker size="mini" ref="calendar"
+                    format="yyyy/MM/dd HH:mm:ss"
+                    @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')"
+                    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">
+      <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>
+    </div>
+  </div>
+</template>
+
+<script>
+  import bus from "../../libs/bus";
+
+  export default {
+    name: "intervalRefresh",
+    model:{
+      event:'change',
+      prop:'timeRange'
+    },
+    props:{
+      refreshDataFunc:{
+        required:true,
+        type:Function
+      },
+      timeRange:{
+        type:Array,
+        required: true,
+      }
+    },
+    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: [{
+          value: -1,
+          name: this.$t("dashboard.panel.refreshInterval.never"),
+        }, {
+          value: 30,
+          name: '30s',
+        }, {
+          value: 60,
+          name: '1m',
+        }, {
+          value: 300,
+          name: '5m',
+        }, {
+          value: 900,
+          name: '15m',
+        }, {
+          value: 1800,
+          name: '30m',
+        }],
+        interval: -1,
+      }
+    },
+    created(){
+      this.searchTime=this.timeFormate(this.timeRange)
+      this.$emit('change',this.searchTime)
+    },
+    methods:{
+      selectInterval(val) {
+        this.visible = false;
+        clearInterval(this.intervalTimer);
+        if (val) {
+          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分钟，则
+            this.getIntervalData(interval);
+          }
+          this.intervalTimer = setInterval(() => {
+            this.getIntervalData(this.interval.value);
+          }, val.value * 1000);
+        }
+      },
+      getIntervalData(interval) { //interval:结束时间到现在的秒数
+        const start = new Date(this.searchTime[0]);
+        const end = new Date(this.searchTime[1]);
+        start.setSeconds(start.getSeconds() + interval);
+        end.setSeconds(end.getSeconds() + interval);
+
+        this.searchTime = this.timeFormate([start,end])
+        //刷新数据
+        this.refreshDataFunc();
+      },
+      timeFormate(timeRange){
+        const startTime = bus.timeFormate(timeRange[0], 'yyyy-MM-dd hh:mm:ss');
+        const endTime = bus.timeFormate(timeRange[1], 'yyyy-MM-dd hh:mm:ss');
+        return [startTime, endTime];
+      },
+      dateChange(time) {
+        let timeRange=this.timeFormate(time);
+        this.$emit('change',timeRange)
+        this.refreshDataFunc();
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.interval-refresh{
+  display: flex;
+}
+.popover_ul{
+  text-align: center;
+}
+.popover_ul li {
+  padding: 10px 3px;
+  cursor: pointer;
+}
+.popover_ul li:hover {
+  background: $dropdown-hover-background-color !important;
+  color: $global-text-color-active !important;
+}
+</style>
+<style>
+  .interval-refresh-popover{
+    min-width: unset !important;
+  }
+</style>

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

@@ -168,7 +168,7 @@ const cn = {
       lastSevenDay: "最近7天",
       lastThirtyDay: "最近30天",
       refreshInterval: {
-        never: "从不",
+        never: "关闭",
         oneMinute: "1分钟",
         threeMinutes: "3分钟",
         fiveMinutes: "5分钟",
@@ -196,7 +196,9 @@ const cn = {
       saveChartToPanel: "保存图表到看板"
     },
     metricPreview: {
-      title: "探索"
+      title: "探索",
+      inputTip:'输入PromQL查询语句',
+      runQuery:'查询',
     },
     refresh: "刷新",
     edit: "编辑",

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

@@ -174,7 +174,7 @@ const en = {
       lastSevenDay:'Last 7 days',
       lastThirtyDay:'Last 30 days',
       refreshInterval:{
-        never:'Never', //'从不'
+        never:'OFF', //'从不'
         oneMinute:'1 minute', // 1 minute
         threeMinutes:'3 minutes', //'3分钟'
         fiveMinutes:'5 minutes', //'5分钟'
@@ -202,7 +202,8 @@ const en = {
     },
     metricPreview:{
       title:'Explore',
-      inputTip:'Enter a PromQL query'
+      inputTip:'Enter a PromQL query',
+      runQuery:'Run query',
     },
     refresh:'Refresh',//'刷新'
     edit:'Edit',//'编辑'

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

@@ -11,7 +11,6 @@
       </div>
       <div slot="content-right" class="slot-content">
         <div class="main-list main-and-sub-transition">
-          <el-scrollbar style="height: 100%">
             <!-- 顶部工具栏 -->
             <div class="top-tools" style="z-index: 1">
               <button :disabled="saveDisabled" type="button" @click="saveChart"
@@ -19,60 +18,33 @@
                       :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">
+              <interval-refresh :refresh-data-func="expressionChange" v-model="filterTime">
-                <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
+                <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
-                        class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="expressionChange">
+              </interval-refresh>
-                  <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-                </button>
-                <el-popover
-                  v-model="visible" placement="bottom-start" width="200" trigger="click">
-                  <ul class="popover_ul">
-                    <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                        @click="selectInterval(i.value)">
-                      {{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">
-                    <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
-                  </button>
-                </el-popover>
             </div>
-
+            <div style="height: 100%;width: 100%;" >
-              <el-date-picker size="mini" ref="calendar"
+              <el-scrollbar style="height: 100%" class="el-scrollbar-large">
-                              format="yyyy/MM/dd HH:mm"
+              <div class="expression-room right-margin" style="padding-top: 5px">
-                              @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')"
-                              style="margin-right: 20px"
-                              align="right">
-              </el-date-picker>
-            </div>
-            <div class="expression-room">
                 <!--坑，这个index居然是从1开始-->
                 <promql-input
                   v-for="index of promqlKeys.length"
                   :id="promqlKeys[index-1]"
                   :key="promqlKeys[index-1]"
                   :expression-list="expressions"
-                :index="index"
+                  :index="index-1"
                   @change="expressionChange"
                   @addExpression="addExpression"
                   @removeExpression="removeExpression"
                 ></promql-input>
               </div>
-            <div class="chart-view " v-show="!showIntroduce"
+              <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="chart-room">
                   <chart ref="exploreChart"></chart>
                 </div>
               </div>
-            <div class="table-view " v-show="!showIntroduce"
+              <div class="table-view right-margin" 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">
@@ -94,7 +66,7 @@
                       show-overflow-tooltip
                       min-width="110px"
                     ></el-table-column>
-                  <el-table-column width="28">
+                    <el-table-column width="28" v-if="showTableLabels.length>0">
                       <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>
@@ -106,7 +78,7 @@
                               :append-to-body="false"></pagination>
                 </div>
               </div>
-            <div class="introduce-view" v-show="showIntroduce">
+              <div class="introduce-view right-margin" v-show="showIntroduce">
                 <div class="info-room">
                   <div class="col-md-9 doc-content">
                     <h2 >
@@ -202,6 +174,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               </div>
           </el-scrollbar>
             </div>
+
+        </div>
         <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess"></chart-box>
         <element-set
           :allowed-all="true"
@@ -235,9 +209,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         promqlCount: 1,
         promqlKeys: [],
         expressions: [''],
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+        filterTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-        filterTime: {},
-        visible: false,
         showIntroduce: true,
         defaultChartVisible: true,
         defaultTableVisible: true,
@@ -253,112 +225,11 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         tableLabels: [],
         showTableLabels: [],
         tableLoading: false,
-        intervalTimer: null,
-        intervalList: [{
-          value: 0,
-          name: this.$t("dashboard.panel.refreshInterval.never"),
-        }, {
-          value: 60,
-          name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
-        }, {
-          value: 180,
-          name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
-        }, {
-          value: 300,
-          name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
-        }, {
-          value: 600,
-          name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
-        }],
-        interval: 0,
         saveDisabled: true,
         panelData: [],
-        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);
-                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]);
-              }
-            }],
-        },
       }
     },
     created() {
-      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());
     },
@@ -381,7 +252,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
             let requestArr = [];
             this.expressions.forEach((item, index) => {
               if (item != '') {
-                requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime.startTime + '&end=' + this.filterTime.endTime + '&step=15'))
+                let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
+                requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime[0] + '&end=' + this.filterTime[1] + '&step='+step))
               }
             })
             if (requestArr.length > 0) {
@@ -500,47 +372,15 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         this.promqlCount++;
       },
       removeExpression: function (index) {
+        console.log(this.expressions)
+        console.log(this.promqlKeys)
+        console.log(this.promqlCount)
         if (this.promqlCount > 1) {
           this.expressions.splice(index, 1);
           this.promqlKeys.splice(index, 1);
           this.promqlCount--;
         }
       },
-      dateChange(time) {
-        this.filterTime.startTime = bus.timeFormate(time[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filterTime.endTime = bus.timeFormate(time[1], 'yyyy-MM-dd hh:mm:ss');
-        this.expressionChange();
-      },
-      //定期刷新
-      selectInterval(val) {
-        this.visible = false;
-        clearInterval(this.intervalTimer);
-        if (val) {
-          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分钟，则
-            this.getIntervalData(interval);
-          }
-          this.intervalTimer = setInterval(() => {
-            this.getIntervalData(this.interval);
-          }, val * 1000);
-        }
-      },
-      getIntervalData(interval) { //interval:结束时间到现在的秒数
-        const start = new Date(this.searchTime[0]);
-        const end = new Date(this.searchTime[1]);
-        start.setSeconds(start.getSeconds() + interval);
-        end.setSeconds(end.getSeconds() + interval);
-        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
-        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
-        this.searchTime = [startTime, endTime];
-        this.filterTime.startTime = startTime;
-        this.filterTime.endTime = endTime;
-        //刷新数据
-        this.expressionChange();
-      },
       changeChartVisible: function () {
         this.chartVisible = !this.chartVisible;
       },
@@ -708,7 +548,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     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-flex: 1;
@@ -733,17 +572,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     border: 1px solid #c7d0d9;
     border-radius: 4px;
   }
-
+  .right-margin{
-  .popover_ul li {
+    margin-right: 15px;
-    padding: 10px 3px;
-    cursor: pointer;
   }
-
-  .popover_ul li:hover {
-    background: $dropdown-hover-background-color !important;
-    color: $global-text-color-active !important;
-  }
-
   /*外部引用 样式start*/
   .doc-content {
     font-size: 16px;

nezha-fronted/src/components/page/project/project.vue

@@ -457,15 +457,18 @@
         // }
       },
       detailProjectInfo:function(event,project){
+        console.log(event)
         if(event){
           this.pageType='project'
           if(project){
             this.currentProject=project;
-            this.$store.commit('setProject',this.currentProject)
+            // this.$store.commit('setProject',this.currentProject)
           }
           this.currentModule={};
-          this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
+
           // this.$refs.projectLeft.setActiveNames([]);
+        }else{
+          this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
         }
       },
       getAllModuleList:function(){
@@ -744,7 +747,7 @@
       if (pageSize) {
         this.endpointPageObj.pageSize = pageSize
       }
-      this.detailProjectInfo({});
+      this.detailProjectInfo();
       // setTimeout(()=>{
       //   this.getEndpointTableData();
       // }, 200);
@@ -794,7 +797,7 @@
       currentProjectChange:{
         handler(n, o) {
           this.currentProject = Object.assign({}, n);
-          this.detailProjectInfo({});
+          this.detailProjectInfo();
         }
       },
       currentProject(n, o) {

nezha-fronted/src/main.js

@@ -46,6 +46,7 @@ import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
 import leftMenu from "./components/common/leftMenu";
+import intervalRefresh from "./components/common/intervalRefresh";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -69,6 +70,7 @@ Vue.component('loading',loading);
 Vue.component('bottom-box', bottomBox);
 Vue.component('mib-box',mibBox);
 Vue.component('left-menu',leftMenu);
+Vue.component('interval-refresh',intervalRefresh);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;