From 1f49b3b56fe1c26f72904f88b1806120c9552938 Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Fri, 5 Jun 2020 17:45:31 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-316=20fix:=20alert=20message=20current=20?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E5=A4=84=E7=90=86labels=E4=B8=BA=E7=A9=BA?= =?UTF-8?q?=E7=9A=84=E6=83=85=E5=86=B5=20&=20alert=20message=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A0=E9=98=88=E5=80=BC=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts/chart-alert-list.vue | 45 ++++++++++ .../components/charts/line-chart-block.vue | 14 +++- .../src/components/page/alert/list.vue | 82 ++++++++++++++++--- 3 files changed, 125 insertions(+), 16 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index a18342d06..800913aae 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -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 += "{"; diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index d166d32b1..4895f539c 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -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) { //设置高度 diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue index 8eed75afa..b6bc100c9 100644 --- a/nezha-fronted/src/components/page/alert/list.vue +++ b/nezha-fronted/src/components/page/alert/list.vue @@ -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,22 +661,32 @@ } }); }, - promQueryParamConvert(obj) { - return "(" + obj.alertRule.expr + ") and (" + function(){ - let q = "{"; - for (let k in obj.labels) { - if (k != 'alertname' && k != 'severity') { + 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) { q += k; q += "="; q += ("'" + obj.labels[k] + "',"); + }; + if (q.length > 1) { + q = q.substring(0, q.length-1); } - }; - if (q.length > 1) { - q = q.substring(0, q.length-1); - } - q += "}"; - return q; - }() + ")"; + q += "}"; + return q; + }() + ")"; + } + return result; }, //asset弹框控制 tabControl(data) {