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

NEZ-316 fix: alert message current 查询处理labels为空的情况 & alert message图表添加阈值提示

Browse Source
This commit is contained in:
wangwenrui
2020-06-05 17:45:31 +08:00
parent 930e3bfe04
commit 1f49b3b56f
3 changed files with 125 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -513,6 +513,16 @@ export default {
return value
}
},
computeDistance:function(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+(width+5));
},
detail(obj) {
this.chartDatas = [];
this.legend = [];
@@ -568,6 +578,7 @@ export default {
})
},
queryChartDate() {
let $temp=this;
let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
this.searchTime = [start, end];
@@ -607,6 +618,40 @@ export default {
width: 1,
opacity: 0.9
},
markLine: {
silent: true,
symbol: ['circle', 'circle'],
label: {
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
formatter: function (params) {
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
}
},
lineStyle: {
color:'#d64f40',
width:2,
type:'dotted'
},
data: [{
yAxis: Number(this.currentMsg.alertRule.threshold)
}, ]
},
markArea:{
itemStyle:{
color:'#d64f40',
opacity:0.2
},
data:[
[
{
yAxis: this.currentMsg.alertRule.threshold
},
{
yAxis: this.currentMsg.alertRule.operator==">="||this.currentMsg.alertRule.operator=='>'?'max':'min'
}
]
]
}
};
chartData.name += "{";
alias += "{";

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

@@ -1146,6 +1146,7 @@
}
},
lineStyle:{
color:'#d64f40',
width:2,
type:'dotted'
},
@@ -1236,10 +1237,15 @@
});
});
},
computeDistance:function(value){
let temp=value+'';
let length=temp.length *12 -20;
return Number('-'+length)
computeDistance:function(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+width);
},
showLoad(chartItem) {
//设置高度

66
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -492,6 +492,7 @@
}
},
queryChartDate() {
let $temp=this;
let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
this.searchTime = [start, end];
@@ -528,7 +529,44 @@
width: 1,
opacity: 0.9
},
markLine: {
silent: true,
symbol: ['circle', 'circle'],
label: {
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
formatter: function (params) {
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
}
},
lineStyle: {
color:'#d64f40',
width:2,
type:'dotted'
},
data: [{
yAxis: Number(this.currentMsg.alertRule.threshold)
}, ]
},
markArea:{
itemStyle:{
color:'#d64f40',
opacity:0.2
},
data:[
[
{
yAxis: this.currentMsg.alertRule.threshold
},
{
yAxis: this.currentMsg.alertRule.operator==">="||this.currentMsg.alertRule.operator=='>'?'max':'min'
}
]
]
}
};
if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){
delete chartData.markArea;
}
chartData.name += "{";
alias += "{";
Object.keys(queryData.metric).forEach((item, index) => {
@@ -568,6 +606,16 @@
}
})
},
computeDistance:function(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+(width+5));
},
detail(obj) {
this.chartDatas = [];
this.legend = [];
@@ -613,15 +661,23 @@
}
});
},
promQueryParamConvert(obj) {
return "(" + obj.alertRule.expr + ") and (" + function(){
promQueryParamConvert(obj){
let result="(" + obj.alertRule.expr + ")";
if(obj.labels){
if(obj.labels.alertname){
delete obj.labels.alertname;
}
if(obj.labels.severity){
delete obj.labels.severity;
}
}
if(Object.keys(obj.labels).length>0){
result+=" and ("+function(){
let q = "{";
for (let k in obj.labels) {
if (k != 'alertname' && k != 'severity') {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
}
};
if (q.length > 1) {
q = q.substring(0, q.length-1);
@@ -629,6 +685,8 @@
q += "}";
return q;
}() + ")";
}
return result;
},
//asset弹框控制
tabControl(data) {