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

feat：添加chart option选项

Browse Source
This commit is contained in:
zhangyu
2020-09-29 09:45:49 +08:00
parent d8b7c475db
commit 03e5937565
3 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -659,23 +659,6 @@
}
this.dataList = [...this.dataTotalList];
// this.dataList.push({ // 拓扑图
// id: -10,
// panelId: 0,
// title: this.$t("alert.config.chart.alertNumTrend"),
// span: 8,
// height: 800,
// type: "topology",
// prev: -11,
// next: -1,
// unit: 1,
// buildIn: 1,
// elements: [{
// id: '',
// expression: `nz_alert_nums{id="${3333}"}`,
// type: ''
// }]
// });
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item,index) => {
@@ -854,6 +837,10 @@
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
let query = encodeURIComponent(filterItem.expression);
if(chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'){//如果是这三个 默认给connected
chartInfo.param.nullType=chartInfo.param.nullType||'connected';
query+='&nullType='+chartInfo.param.nullType;
}
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
});
// 一个图表的所有element单独获取数据
@@ -1249,6 +1236,10 @@
let step = bus.getStep(startTime, endTime);
this.$nextTick(() => {
let query = chartInfo.elements[0].expression;
if(chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'){
chartInfo.param.nullType=chartInfo.param.nullType||'connected';
query+='&nullType='+chartInfo.param.nullType;
}
this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
if (response.status === 'success') {
if (response.data.result) {
@@ -1683,6 +1674,7 @@
mounted() {
this.tempDomInit();
},
};
</script>

14
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -1229,15 +1229,27 @@
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele;
let query = encodeURIComponent(filterItem.expression);
if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
query+='&nullType='+this.chartInfo.param.nullType;
}
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
});
} else if (type === 'dashboard') { // 概览模式,指标概览中使用
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
let query = encodeURIComponent(this.data.title);
if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
query+='&nullType='+this.chartInfo.param.nullType;
}
axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
} else {
let query = encodeURIComponent(this.data.elements[0].expression);
if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
query+='&nullType='+this.chartInfo.param.nullType;
}
axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
}
}
@@ -1677,7 +1689,7 @@
unit,
oldDot
}
}
},
},
mounted() {
this.firstLoad = false;

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

@@ -152,7 +152,13 @@
<el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="editChart.param.url"></el-input>
</el-form-item>
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item">
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='"Null Type"' prop="nullType" class="half-form-item">
<el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown-small" v-model="editChart.param.nullType" placeholder="" size="mini" @change="$forceUpdate()">
<el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item" style="width: 415px">
<el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
</el-form-item>
@@ -374,6 +380,16 @@
elementTarget: [], // 本地保存数据
alertParams:{},
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
nullTypeList:[{
label:'connected',
value:'connected'
},{
label:'null',
value:'null'
},{
label:'zero',
value:'zero'
}],
// 是否为编辑已有信息
isedit: false,
//productId: 0,//不需要这个参数，可以删除
@@ -717,6 +733,7 @@
}
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
params.param.threshold=this.editChart.param.threshold;
params.param.nullType=this.editChart.param.nullType;
} else {
delete params.param.threshold;
}
@@ -993,6 +1010,9 @@
}else{
this.editChart.param.threshold='';
}
if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea')&&data.param){
this.editChart.param.nullType=data.param.nullType;
}
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
// 指标
@@ -1029,7 +1049,8 @@
param.url='';
param.threshold='';
param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'}
param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
param.nullType='connected';
this.$set(this.editChart, "param", param);
this.elements = [1];
this.elementTarget = [];
@@ -1090,7 +1111,7 @@
}else {
this.setIsOtherChart();
if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
this.editChart.param={threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
this.editChart.param={nullType:this.editChart.param.nullType,threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
}
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
@@ -1163,9 +1184,11 @@
}
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
params.param.threshold=this.editChart.param.threshold;
params.param.nullType=this.editChart.param.nullType;
params.param.legendValue=this.editChart.param.legendValue;
} else {
delete params.param.threshold;
delete params.param.nullType;
}
//生成指标数组
const elements = [];
@@ -1254,6 +1277,9 @@
immediate: true,
handler(n) {
this.editChart = JSON.parse(JSON.stringify(n));
if(!n.param.nullType){
this.editChart.param.nullType='connected';
}
if (n.type === 'url') {
this.setIsUrl();
} else if(n.type === 'alertList'){