diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 5c6c62f9e..807cd289c 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -184,6 +184,9 @@ export default { if (isTimeSeries(this.chartInfo.type)) { query += `&nullType=${this.chartInfo.param.nullType || 'null'}` } + if (element.filter) { + query += `&filter=${element.filter}` + } // if (isChartPie(this.chartInfo.type)) { // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 7bcfdcc82..700297ec3 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -47,36 +47,56 @@ - - -
{{errorContent}}
- - - - - -
- {{$t("project.endpoint.dialogTitle")}} -
- -
-
-
- - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { this.currentMsg = { ...row, alertRule: { ...res.data } } - this.graphShow = true this.$nextTick(() => { this.searchTime = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())] this.queryDate() @@ -683,12 +708,15 @@ export default { queryDate () { this.chartLoading = true if (this.currentMsg.alertRule.type === 1) { - this.resultType = 'matrix' - this.$nextTick(() => { - this.queryChartDate() - }) + const chartInfo = lodash.cloneDeep(lineData) + chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) + chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) + this.showFullscreen(true, chartInfo) } else if (this.currentMsg.alertRule.type === 2) { - this.queryLogData(1000) + const chartInfo = lodash.cloneDeep(logData) + chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) + chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) + this.showFullscreen(true, chartInfo) } }, exportLog ({ limit, descending }) { @@ -841,6 +869,10 @@ export default { showText (row) { this.dialogShowText = true this.dialogText = row.alertRule.trbShot + }, + showFullscreen (show, chartInfo) { + this.chartInfo = chartInfo + this.graphShow = show } } } diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 013c340ad..bee157783 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -120,37 +120,6 @@ @showFullscreen="showFullscreen" > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { - const label = item - const value = queryData.metric[label] - chartData.name += label + "='" + value + "'," - }) - chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name - chartData.name += '}' - const legend = { - name: chartData.name, - alias: chartData.name, - isGray: false - } - this.legend.push(legend) - chartData.data = queryData.values.map((dpsItem, dpsIndex) => { - return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)] - }) - this.chartDatas.push(chartData) - } - } else { - this.$message.error(response.data.error) - } - } else { - this.$refs.messageChart.endLoading() - this.chartLoading = false - this.isError = true - if (response.msg) { - this.errorContent = response.msg - } else if (response.error) { - this.errorContent = response.error - } else { - this.errorContent = response - } - } - }) - 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() - this.$refs.messageChart.resize() - }) - } catch (err) { - // this.$message.error(err) - this.$refs.messageChart.endLoading() - this.chartLoading = false - } - }) - } - }, exportLog ({ limit, descending }) { const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime()) @@ -774,33 +623,6 @@ export default { reader.readAsText(error.response.data) }) }, - queryLogData (limit) { // log的chart和table是一个请求 - if (!limit) { - limit = 100 - } - const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) - const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime()) - this.expressions = [this.currentMsg.alertRule.expr] - this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => { - this.chartLoading = false - const logData = [res.data] - this.resultType = res.data.resultType - this.$nextTick(() => { - if (this.$refs.logDetail) { - this.$refs.logDetail.time = this.chartData.param.time - this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines - this.$refs.logDetail.operations.descending = this.chartData.param.descending - } - // logData.forEach((item, index) => { - // item.result.forEach(result => { - // result.elements = this.expressions[index] - // }) - // }) - this.logData = logData - this.resultType === 'matrix' && this.loadLogGraph() - }) - }) - }, loadLogGraph () { const graphData = this.logData.filter(l => l.resultType === 'matrix') if (graphData && graphData.length > 0) {