From 6d72516a4408ae988ba2ae468f074a7107eb602d Mon Sep 17 00:00:00 2001 From: zhangyu Date: Tue, 1 Dec 2020 10:55:39 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=85=A8=E5=B1=8F=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A0=E6=89=8B=E5=8A=A8=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts/chart-alert-list.vue | 157 +++++++++++++++--- .../components/charts/chart-single-stat.vue | 4 + .../src/components/charts/chart-table.vue | 4 + .../src/components/charts/chart-url.vue | 4 + .../components/charts/line-chart-block.vue | 5 + .../common/alert/alertMessageTable.vue | 6 +- .../common/bottomBox/tabs/alertMessageTab.vue | 3 +- .../src/components/common/timePicker.vue | 21 ++- .../src/components/page/alert/list.vue | 2 +- 9 files changed, 172 insertions(+), 34 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index 343b6754d..df7a220b3 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -52,6 +52,7 @@ ref="alertListTable" :form="'chartList'" :fromPath="'/alertList'" + :showTopBtn="false" > @@ -61,6 +62,7 @@ {{data.title}}
+ @@ -550,30 +553,37 @@ export default { if (response.code == 200) { this.storedTableData = response.data.list; this.storedScreanTableData=response.data.list; - this.storedTableData.forEach((item) => { - item.labels = JSON.parse(item.labels); - let paramStr = JSON.stringify(this.promQueryParamConvert(item)); - if(paramStr&& paramStr !='""'){ - this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => { - let current = []; - if (response2.data && response2.data.result && response2.data.result.length > 0) { - current = response2.data.result[0].value.map((item, i) => { - if (i == 0) { - return bus.computeTimezone(item); - } else { - return parseFloat(item).toFixed(2); - } - }); - } - this.requestIndex+=1; - item.current=current; - if(this.requestIndex===this.storedTableData.length){ - this.$set(item, "current", current); - this.requestIndex=0; - } - }); - } - }); + let axiosAll=[] + this.$nextTick(() => { + this.storedTableData.forEach((item) => { + item.labels = JSON.parse(item.labels); + if(item.alertRule.buildIn != 1){ + let paramStr = JSON.stringify(this.promQueryParamConvert(item)); + axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, ""))) + }else{ + axiosAll.push('') + } + }); + axios.all(axiosAll).then(res=>{ + res.forEach((item,index)=>{ + let current = []; + let response2 = item.data; + if (response2.data && response2.data.result && response2.data.result.length > 0) { + current = response2.data.result[0].value.map((item, i) => { + if (i == 0) { + return bus.computeTimezone(item); + } else { + return parseFloat(item).toFixed(2); + } + }); + }else{ + current=[null,null] + } + this.storedTableData[index].current=current; + }); + this.$set( this.storedTableData,[...this.storedTableData]); + }) + }); this.pageObj.total = response.data.total; this.isError = false; this.errorContent = ''; @@ -588,6 +598,100 @@ export default { } }); }, + getAlerScreetList: function (filterType,isPreview=false,chartInfo) { + this.resize(); + this.loadingTable=true; + this.isPreview = isPreview; + let queryParam={ + pageSize:this.screenPageObj.pageSize, + pageNo:this.screenPageObj.pageNo, + } + let chart; + if(chartInfo){ + chart=Object.assign({},chartInfo) + }else{ + chart=Object.assign({},this.chartInfo) + } + if(chart && chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度 + let param=chart.param; + if(param.endpointId&¶m.endpointId != ''){ + queryParam.endpointId=param.endpointId; + }else{ + if(param.moduleId&¶m.moduleId!=''){ + queryParam.moduleId=param.moduleId; + }else{ + if(param.projectId&¶m.projectId!=''){ + queryParam.projectId=param.projectId; + } + } + } + + if(param.ruleId&¶m.ruleId!=''){ + queryParam.ruleId=param.ruleId; + } + if(param.severity&¶m.severity!=''){ + queryParam.severity=param.severity; + } + if(param.state&¶m.state!=''){ + queryParam.state=param.state; + } + } + if(this.searchLabel.orderBy){ + queryParam.orderBy=this.searchLabel.orderBy; + } + this.startLoading(filterType); + this.$get('/alert/message', queryParam).then(response => { + if (response.code == 200) { + this.storedTableData = response.data.list; + this.storedScreanTableData=response.data.list; + let axiosAll=[] + this.$nextTick(() => { + this.storedScreanTableData.forEach((item) => { + item.labels = JSON.parse(item.labels); + if(item.alertRule.buildIn != 1){ + let paramStr = JSON.stringify(this.promQueryParamConvert(item)); + axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, ""))) + }else{ + axiosAll.push('') + } + }); + axios.all(axiosAll).then(res=>{ + res.forEach((item,index)=>{ + let current = []; + let response2 = item.data; + if (response2.data && response2.data.result && response2.data.result.length > 0) { + current = response2.data.result[0].value.map((item, i) => { + if (i == 0) { + return bus.computeTimezone(item); + } else { + return parseFloat(item).toFixed(2); + } + }); + }else{ + current=[null,null] + } + this.storedScreanTableData[index].current=current; + }) + this.$set(this.storedScreanTableData,[...this.storedScreanTableData]) + }) + }) + this.screenPageObj.total = response.data.total; + this.isError = false; + this.errorContent = ''; + this.divFirstShow = true; + + this.firstShow = true; // 展示操作按键 + this.loadingTable=false; + this.endLoading(filterType); + }else{ + this.isError = true; + this.errorContent = response.msg; + } + }); + }, + screenRefreshChart(){ + this.getAlerScreetList(); + }, promQueryParamConvert(obj) { if(obj){ return "(" + obj.alertRule.expr + ") and (" + function(){ @@ -649,11 +753,11 @@ export default { screenPageNo(val) { this.screenPageObj.pageNo = val; - this.getAlertList(); + this.getAlerScreetList(); }, screenPageSize(val) { this.screenPageObj.pageSize = val; - this.getAlertList(); + this.getAlerScreetList(); }, startLoading(area){ if(area==='showFullScreen'){ @@ -764,6 +868,7 @@ export default { this.screenModal = true; this.deleteBox.ids=[]; this.$refs.alertListTable.$refs.alertListTable.clearSelection(); + this.screenPageObj={...this.pageObj} }, // 设置数据, filter区分 setData(chartItem, seriesItem, panelId, filter,area,errorMsg) { diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue index 795d8b247..6a896cd01 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.vue +++ b/nezha-fronted/src/components/charts/chart-single-stat.vue @@ -55,6 +55,7 @@
+
@@ -319,6 +320,9 @@ export default { this.startLoading(); this.divFirstShow = true; }, + screenRefreshChart(){ + this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart') + }, // 重新请求数据 刷新操作-local refreshChart() { this.dropdownMenuShow=false; diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 0f36998e0..a429d635e 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -81,6 +81,7 @@
+
@@ -297,6 +298,9 @@ this.startLoading(); this.divFirstShow = true; }, + screenRefreshChart(){ + this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart') + }, // 重新请求数据 刷新操作-local refreshChart() { this.dropdownMenuShow = false; diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue index 1ac7447ba..bb8baf6d8 100644 --- a/nezha-fronted/src/components/charts/chart-url.vue +++ b/nezha-fronted/src/components/charts/chart-url.vue @@ -41,6 +41,7 @@
{{chartData.title}} +