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

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

@@ -242,6 +242,7 @@ const cn = {
       title: "探索",
       inputTip:'输入PromQL查询语句',
       runQuery:'查询',
+      historyTip:'{hour}小时内查询了{time}次',
     },
     refresh: "刷新",
     edit: "编辑",

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',//'编辑'

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){

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) {

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="";
+            }
           }
         },