From bea2ceaa8bbf928ea22b701bf79b0459f7e00b32 Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Wed, 29 Jul 2020 18:41:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:explore=20=E8=87=AA=E5=8A=A8=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E6=A1=86=E5=A2=9E=E5=8A=A0history=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/language/cn.js | 1 + .../src/components/common/language/en.js | 1 + .../page/dashboard/explore/editor.vue | 33 ++++++-- .../page/dashboard/explore/explore.vue | 84 ++++++++++++++++++- .../page/dashboard/explore/promqlInput.vue | 14 ++-- 5 files changed, 120 insertions(+), 13 deletions(-) diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index ff8f31e1b..667d498c5 100644 --- 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: "编辑", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 13d038c06..7f164a354 100644 --- 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',//'编辑' diff --git a/nezha-fronted/src/components/page/dashboard/explore/editor.vue b/nezha-fronted/src/components/page/dashboard/explore/editor.vue index e5d802a4e..8e826262a 100644 --- 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){ diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue index 57849f787..ac0ab8f61 100644 --- 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) { diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue index e9fc679b6..e66392c7a 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue @@ -8,12 +8,12 @@ Metric   - +
- +
{{errorMsg}}
{{appendMsg}}
@@ -31,7 +31,7 @@
- +
{{errorMsg}}
{{appendMsg}}
@@ -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=""; + } } },