feat:explore 自动提示框增加history记录

2020-07-29 18:41:40 +08:00
parent 6ffb217cc7
commit bea2ceaa8b
5 changed files with 120 additions and 13 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -242,6 +242,7 @@ const cn = {
      title: "探索",
      inputTip:'输入PromQL查询语句',
      runQuery:'查询',
+      historyTip:'{hour}小时内查询了{time}次',
    },
    refresh: "刷新",
    edit: "编辑",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -247,6 +247,7 @@ const en = {
      title:'Explore',
      inputTip:'Enter a PromQL query',
      runQuery:'Run query',
+      historyTip:'Queried {time} times in the last {hour}h',
    },
    refresh:'Refresh',//'刷新'
    edit:'Edit',//'编辑'
--- a/nezha-fronted/src/components/page/dashboard/explore/editor.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/editor.vue
@@ -29,7 +29,8 @@
    props: {
      value: String,
      metricList:{type:Array},
-      styleType: Number
+      styleType: Number,
+      historyParam:Object
    },
    model:{
      prop:'value',
@@ -66,16 +67,12 @@
        detailItem:{},
        formatTimer:null,
        userChangeTimer:null,
-        keyDownTimer:null,
      }
    },
    created(){
      this.queryMetrics();
    },
    methods:{
-      test() {
-        console.info(1)
-      },
      userChange:function(char,operation,newContent,oldContent){
        this.changeSuggestions('type')
        this.dealSpecilChar(char,operation);
@@ -86,7 +83,7 @@
        }
        this.filterItems(newContent);
      },
-      dealSpecilChar:function(char,operation){
+      dealSpecilChar:function(char,operation){//控制括号的成对添加和删除
        // console.log('specil char',char)
        if(/^[\{\(\[\,]$/g.test(char)){
          if(operation=='insert'){
@@ -251,6 +248,15 @@
      },
      queryTypeInfos:function(){
        this.noStyleSuggestions={};
+        if(this.historyParam&&this.historyParam.useHistory){
+          let username=sessionStorage.getItem("nz-username");
+          let historyJson=localStorage.getItem(this.historyParam.key);
+          if(historyJson && historyJson != 'undefined' && historyJson != ''){
+            let historyObj=JSON.parse(historyJson);
+            let history = historyObj[username];
+            this.$set(this.noStyleSuggestions,'history',history);
+          }
+        }
        this.$set(this.noStyleSuggestions,'metrics',this.tempStoreMetric)
        // this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
        this.$set(this.noStyleSuggestions,'functions',suggestions.getFunctions())
@@ -377,8 +383,19 @@
          this.handleFunctionClick(item);
        }else if(type  == 'range'){
          this.handleRangeClick(item);
+        }else if(type == 'history'){
+          this.handleHistoryClick(item)
        }
      },
+      handleHistoryClick:function(item){
+        this.setContent(item.insertText);
+
+        this.showType=false;
+        this.quill.blur();
+        this.$nextTick(()=>{
+          this.$emit('on-blur');
+        })
+      },
      handleRangeClick:function(item){
        this.quill.setSelection(this.pivotalCursorIndex,this.cursorIndex-this.pivotalCursorIndex,'api');
        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
@@ -499,12 +516,14 @@
            this.handleRangeClick({insertText:insertText})
          }else if(type == 'functions'){
            this.handleFunctionClick({insertText:insertText})
+          }else if(type ==  'history'){
+            this.handleHistoryClick({insertText:insertText})
          }

        }
      },

-      filterItems:function(input){
+      filterItems:function(input){ //过滤下拉选显示
        let suggestions=this.deepClone(this.noStyleSuggestions)

        for(let key in suggestions){
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -36,6 +36,7 @@
                  :expression-list="expressions"
                  :index="index-1"
                  :styleType="1"
+                  :history-param="historyParam"
                  :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
                  @change="expressionChange"
                  @addExpression="addExpression"
@@ -236,7 +237,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
        promqlKeys: [],
        expressions: [''],
        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())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),'yyyy-MM-dd hh:mm:ss'),
          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
        ],
        showIntroduce: true,
@@ -257,6 +258,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
        saveDisabled: true,
        panelData: [],
        chartUnit:0,
+        historyParam:{useHistory:true,key:'expore-history'}
      }
    },
    created() {
@@ -426,9 +428,89 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
          }, 200)
      },
      expressionChange: function () {
+        console.log(this.filterTime)
        if (this.expressions && this.expressions.length >= 1) {
          this.queryTableData();
          this.queryChartData()
+          this.storeHistory();
+        }
+      },
+      storeHistory:function(){
+        let expire=24;
+        let historyJson=localStorage.getItem(this.historyParam.key);
+        let expressions=this.expressions.filter(item=>{
+          return item&&item != '';
+        })
+        let username=sessionStorage.getItem("nz-username");
+        if(historyJson && historyJson != 'undefined' && historyJson != ''){
+          let historyObj=JSON.parse(historyJson);
+          let history = historyObj[username];
+          if(history){
+            //过滤过期表达式
+            history=history.filter(item=>{
+              return item.time + item.expire >= new Date().getTime();
+            })
+            let repeat=history.filter(item=>{
+              return expressions.includes(item.insertText)
+            })
+            let old=history.filter(item=>{
+              return !expressions.includes(item.insertText)
+            })
+
+            let freshExpression=expressions.filter(item=>{
+              let find=history.find(t=>{return t.insertText == item});
+              return !find
+            })
+
+            repeat=repeat.map(item=>{
+              item.time=new Date().getTime();
+              item.num+=1;
+              item.documentation=this.$t('dashboard.metricPreview.historyTip',{time:item.num,hour:24});
+              return item;
+            })
+
+            let fresh=freshExpression.map(item=>{
+              return{
+                label:item,
+                insertText:item,
+                documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
+                num:1,
+                time:new Date().getTime(),
+                expire:expire * 60 * 60 * 1000
+              }
+            })
+
+            historyObj[username]=fresh.concat(repeat).concat(old);
+          }else{
+            let history=expressions.map(item=>{
+              return {
+                label:item,
+                insertText:item,
+                documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
+                num:1,
+                time:new Date().getTime(),
+                expire:expire * 60 * 60 * 1000
+              }
+            })
+            historyObj[username]=history;
+          }
+          localStorage.setItem(this.historyParam.key,JSON.stringify(historyObj))
+        }else{
+          let history=expressions.map(item=>{
+            return {
+              label:item,
+              insertText:item,
+              documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
+              num:1,
+              time:new Date().getTime(),
+              expire:expire * 60 * 60 * 1000
+            }
+          })
+          if(history&&history.length>0){
+            let stored={};
+            stored[username]=history;
+            localStorage.setItem(this.historyParam.key,JSON.stringify(stored))
+          }
        }
      },
      addExpression: function (index) {
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -8,12 +8,12 @@
              <el-dropdown class="metric-selector">
                <el-dropdown-menu style="display: none"></el-dropdown-menu>
                <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
-                <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
+                <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange" ></el-cascader-panel>
              </el-dropdown>
            </div>
            <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
              <!--            <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>-->
-              <editor :styleType="styleType" :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+              <editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
              <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>
@@ -31,7 +31,7 @@
              </el-col>
              <el-col style="width: calc(100% - 120px); height: 100%;">
                <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
-                  <editor :styleType="styleType" :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+                  <editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
                  <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>
@@ -64,7 +64,8 @@
        index:{type:Number},
        expressionList:{},
        plugins: {type: Array},
-        styleType: Number
+        styleType: Number,
+        historyParam:{type:Object}
      },
      data(){
        return {
@@ -79,7 +80,6 @@
      },
      created() {
        this.queryMetrics();
-
      },
      methods:{
        clearExpression:function(){
@@ -170,6 +170,10 @@
        dropDownVisible:function(n,o){
          if(this.$refs.metricSelector){
            this.$refs.metricSelector.dropDownVisible=n;
+            console.log(this.cascaderValue)
+            if(!this.expressionList[this.index]||this.expressionList[this.index] == ''){
+              this.cascaderValue="";
+            }
          }
        },