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

perf: chart-box内存优化

Browse Source
This commit is contained in:
陈劲松
2020-11-24 17:31:40 +08:00
committed by chenjinsong
parent 4e9556a1eb
commit 89685a427f
4 changed files with 105 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/.gitignore vendored
View File

@@ -1,7 +1,7 @@
.DS_Store
node_modules/
/dist/
static/Tiles/
/static/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

23
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -188,6 +188,19 @@
</el-row>
<el-row v-if="!isUrl &&!isAlert && editChart.type != 'text'" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
:key="promqlKeys[index-1]"
:expression-list="expressions"
:index="index-1"
:styleType="2"
:plugins="['metric-selector', 'metric-input', 'remove']"
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
<!--
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -202,6 +215,7 @@
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
-->
<el-row>
<template v-if="editChart.type != 'singleStat'">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
@@ -447,7 +461,7 @@
sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
textShow:false,
metricOptions: [],
metricStore: []
//metricStore: []
}
},
components:{
@@ -1394,13 +1408,13 @@
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
this.metricStore.push({label:item,value:item,insertText:item})
//this.metricStore.push({label:item,value:item,insertText:item})
});
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
}
};
if(metricMap.get(key) && metricMap.get(key).length>1){
option.children=metricMap.get(key);
}
@@ -1409,6 +1423,9 @@
}
})
},
getMetricOptions() {
return this.metricOptions;
}
},
created() {
this.getSuggestMetric();

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

@@ -18,6 +18,20 @@
<el-scrollbar style="height: 100%" class="el-scrollbar-large">
<div class="expression-room right-margin" style="padding-top: 5px">
<!--坑，这个index居然是从1开始-->
<promql-input
v-for="index of promqlKeys.length"
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
:key="promqlKeys[index-1]"
:expression-list="expressions"
:index="index-1"
:styleType="1"
:plugins="['metric-selector', 'metric-input', 'add', 'remove']"
@change="expressionChange"
@addExpression="addExpression"
@removeExpression="removeExpression"
></promql-input>
<!--
<promql-input
v-for="index of promqlKeys.length"
:ref="'promql-'+(index-1)"
@@ -32,16 +46,7 @@
@addExpression="addExpression"
@removeExpression="removeExpression"
></promql-input>
<!-- <promql-input-plus-->
<!-- v-for="index of promqlKeys.length"-->
<!-- :ref="'promql-plus'+(index-1)"-->
<!-- :id="promqlKeys[index-1]"-->
<!-- :key="promqlKeys[index-1]"-->
<!-- :index="index-1"-->
<!-- @change="expressionChange"-->
<!-- @addExpression="addExpression"-->
<!-- @removeExpression="removeExpression"-->
<!-- ></promql-input-plus>-->
-->
</div>
<div class="chart-view right-margin" v-show="!showIntroduce"
:class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
@@ -254,10 +259,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
chartUnit:0,
historyParam:{useHistory:true,key:'expore-history'},
chart: {},
metricOptions: []
}
},
created() {
this.getPanelData();
this.queryMetrics();
this.promqlKeys.push(getUUID());
},
methods: {
@@ -607,6 +614,46 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
}
});
},
queryMetrics() {
this.metricOptions = [];
this.$get('prom/api/v1/label/__name__/values').then(response=>{
if(response.status == 'success'){
let metrics = response.data.sort();
let metricMap=new Map();
metrics.forEach((item)=>{
let key='';
if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
key=item.split('_')[0];
}else if(/^_\w*/.test(item)){
key=' ';
}else{
key=item;
}
if(metricMap.get(key)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
}
if(metricMap.get(key) && metricMap.get(key).length>1){
option.children=metricMap.get(key);
}
this.metricOptions.push(option);
}
}
})
},
getMetricOptions() {
return this.metricOptions;
}
},
watch: {
promqlCount: function (n, o) {

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

@@ -13,7 +13,8 @@
</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" :history-param="historyParam" 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>?-->
<el-input v-model="expressionList[index]"></el-input>
<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>
@@ -25,13 +26,14 @@
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-show="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
<el-cascader-panel v-if="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
</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" :historyParam="historyParam" 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>-->
<el-input v-model="expressionList[index]"></el-input>
<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>
@@ -68,14 +70,14 @@
historyParam:{type:Object},
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false},
metricOptions: {type: Array},
metricStore: {type: Array}
//metricOptions: {type: Array},
//metricStore: {type: Array}
},
data(){
return {
dropDownVisible:false,
//metricStore:[],
//metricOptions:[],
metricOptions: [],
cascaderValue:'',
errorMsg:null,
appendMsg:null,
@@ -132,7 +134,7 @@
},
metricChange:function(value){
this.expressionList[this.index]=value;
this.$refs.editor.setContent(value)
//this.$refs.editor.setContent(value)
this.dropDownVisible=false;
this.$emit('change')
},
@@ -140,15 +142,28 @@
this.$emit('change')
},
setError:function(errMsg){
console.log(errMsg)
//console.log(errMsg)
this.errorMsg=errMsg;
},
setMsg:function(){
/*setMsg:function(){
this.appendMsg
}
}*/
},
watch:{
dropDownVisible:function(n,o){
if (this.styleType == 1) {
if (n) {
this.metricOptions = this.$parent.$parent.getMetricOptions();
} else {
this.metricOptions = [];
}
} else if (this.styleType == 2) {
if (n) {
this.metricOptions = this.$parent.$parent.$parent.$parent.getMetricOptions();
} else {
this.metricOptions = [];
}
}
if(this.$refs.metricSelector){
this.$refs.metricSelector.dropDownVisible=n;
if(!this.expressionList[this.index]||this.expressionList[this.index] == ''){