diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue index 41253dd77..e4c802af2 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue @@ -104,6 +104,11 @@ {{scope.row['state'] == 2 ? "Expired" : ""}} +
{{scope.row.current}}
+
+ + +
{{scope.row[item.prop]}} @@ -147,7 +152,7 @@ - +
@@ -163,6 +168,21 @@
+ + +
+ {{$t("project.endpoint.dialogTitle")}} +
+ +
+
+ + @@ -180,6 +200,12 @@ }, data() { return { + //详情相关 + graphShow: false, + chartDatas: [], + legend: [], + searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], + defaultSearchValue: this.obj.alertNum ? 1 : 0, showElementSet: false, tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量 @@ -237,6 +263,15 @@ label: this.$t('alert.endAt'), prop: 'endAt', show: true, + }, { + label: this.$t('alert.list.current'), + prop: 'current', + show: true + }, { + label: this.$t('overall.option'), + prop: 'option', + show: true, + width: 90 } ], searchMsg: { //给搜索框子组件传递的信息 @@ -432,6 +467,112 @@ } }) }, + queryChartDate(obj) { + 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]; + let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60); + let step = '15s'; + if(timeDiff< 1){ + step='15s'; + }else if(timeDiff < 7){ + step='5m'; + }else if(timeDiff<30){ + step='10m'; + }else{ + step='30m'; + } + let axiosArr=[]; + let queryParam = this.promQueryParamConvert(obj); + axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step)); + this.legend = []; + this.chartDatas = []; + axios.all(axiosArr).then(res =>{ + res.forEach((response,promIndex)=>{ + console.info(response); + if (response.status == 200) { + if(response.data.status == 'success'){ + let queryData=response.data.data.result[0]; + /*if(queryData){ + let chartData={ + type:"line", + symbol:'none', //去掉点 + smooth:true, //曲线变平滑 + }; + chartData.name=queryData.metric.__name__; + let alias=queryData.metric.__name__; + delete queryData.metric.__name__; + chartData.name+="{"; + alias+="{"; + Object.keys(queryData.metric).forEach((item,index)=>{ + let label=item; + let value=queryData.metric[label]; + chartData.name+=label +"='"+value+"',"; + if(!this.sameLabels.some((i)=>{return i == label})){ + alias+=label +"='"+value+"',"; + } + }) + chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name; + alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias; + chartData.name+="}"; + alias+="}"; + if(!/.+\{.+\}/.test(alias)){ + alias=alias.substr(0,alias.length-2); + } + let legend={ + name:chartData.name, + alias:alias, + // showText:this.formatLegend(chartData.name), + isGray:false + } + this.legend.push(legend); + chartData.data=queryData.values.map((dpsItem, dpsIndex) => { + return [dpsItem[0] * 1000, Number(dpsItem[1])]; + }); + this.chartDatas.push(chartData); + }*/ + }else{ + this.$message.error(response.data.error) + console.error(response.data) + } + } + }); + this.$nextTick(()=>{ + this.$refs.messageChart.setRandomColors(this.chartDatas.length) + this.$refs.messageChart.setLegend(this.legend) + this.$refs.messageChart.setSeries(this.chartDatas); + this.$refs.messageChart.endLoading(); + }); + }) + }, + detail(obj) { + this.chartDatas = []; + this.legend = []; + this.graphShow = true; + this.$nextTick(() => { + this.$refs.messageChart.startLoading(); + this.queryChartDate(obj); + }); + }, + dialogClose() { + this.graphShow = false; + }, + del(u) { + this.$confirm(this.$t("tip.confirmDelete"), { + confirmButtonText: this.$t("tip.yes"), + cancelButtonText: this.$t("tip.no"), + type: 'warning' + }).then(() => { + this.$delete("alert/message?ids=" + u.id).then(response => { + if (response.code === 200) { + this.$message({type: 'success', message: this.$t("tip.deleteSuccess")}); + this.getAlertList(); + } else { + this.$message.error(response.msg); + } + }) + }); + }, getAlertList() { this.tableData = []; this.loading = true; @@ -444,12 +585,33 @@ this.tableData = response.data.list; this.tableData.forEach((item) => { item.labels = JSON.parse(item.labels); + let paramStr = JSON.stringify(this.promQueryParamConvert(item)); + this.$get('/prom/api/v1/query' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")).then(response2 => { + console.info(response2) + }); }); this.pageObj.total = response.data.total; } }); }, 1000); }, + promQueryParamConvert(obj) { + return "(" + obj.alertRule.expr + ") 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); + } + q += "}"; + return q; + }() + ")"; + }, pageNo(val) { this.pageObj.pageNo = val; this.getAlertList(); diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue index 789f06eee..9de71ca5c 100644 --- a/nezha-fronted/src/components/page/alert/list.vue +++ b/nezha-fronted/src/components/page/alert/list.vue @@ -120,7 +120,7 @@
{{scope.row.current}}
- +
{{scope.row[item.prop]}} @@ -476,8 +476,8 @@ step='30m'; } let axiosArr=[]; - let queryParam = this.promQueryParamConvert(obj); - axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step)); + let paramStr = JSON.stringify(this.promQueryParamConvert(obj)); + axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")+"&start="+start+"&end="+end+"&step="+step)); this.legend = []; this.chartDatas = []; axios.all(axiosArr).then(res =>{ @@ -486,7 +486,7 @@ if (response.status == 200) { if(response.data.status == 'success'){ let queryData=response.data.data.result[0]; - /*if(queryData){ + if(queryData){ let chartData={ type:"line", symbol:'none', //去掉点 @@ -523,7 +523,7 @@ return [dpsItem[0] * 1000, Number(dpsItem[1])]; }); this.chartDatas.push(chartData); - }*/ + } }else{ this.$message.error(response.data.error) console.error(response.data) @@ -576,7 +576,8 @@ this.tableData = response.data.list; this.tableData.forEach((item) => { item.labels = JSON.parse(item.labels); - this.$get('/prom/api/v1/query', {query: this.promQueryParamConvert(item)}).then(response2 => { + let paramStr = JSON.stringify(this.promQueryParamConvert(item)); + this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")).then(response2 => { console.info(response2) }); }); @@ -588,9 +589,11 @@ return "(" + obj.alertRule.expr + ") and (" + function(){ let q = "{"; for (let k in obj.labels) { - q += k; - q += "="; - q += ("'" + obj.labels[k] + "',"); + if (k != 'alertname' && k != 'severity') { + q += k; + q += "="; + q += ("'" + obj.labels[k] + "',"); + } }; if (q.length > 1) { q = q.substring(0, q.length-1);