gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangwenrui
2020-07-29 18:41:40 +08:00
parent 6ffb217cc7
commit bea2ceaa8b
5 changed files with 120 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/common/language/cn.js
View File

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

1
nezha-fronted/src/components/common/language/en.js
View File

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

33
nezha-fronted/src/components/page/dashboard/explore/editor.vue
View File

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

84
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

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

12
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

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