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

NEZ-1332 feat： alert message 查看请求参数调整（metrics,logs）

Browse Source
This commit is contained in:
zhangyu
2021-11-24 20:27:15 +08:00
parent e8d1f0f76a
commit 7cf4a696e9
17 changed files with 61 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -497,7 +497,7 @@ export default {
const axiosArr = [] const axiosArr = []
const paramStr = this.currentMsg ? JSON.stringify(this.promQueryParamConvert(this.currentMsg)) : null const paramStr = this.currentMsg ? JSON.stringify(this.promQueryParamConvert(this.currentMsg)) : null
if (paramStr && paramStr.trim() != '""') { if (paramStr && paramStr.trim() != '""') {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\s+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))))
this.legend = [] this.legend = []
this.chartDatas = [] this.chartDatas = []
axios.all(axiosArr).then(res => { axios.all(axiosArr).then(res => {
@@ -771,6 +771,14 @@ export default {
} }
return r return r
}, },
promQueryParamLabels (labels) {
const obj = JSON.parse(labels)
const filterArr = ['alertname', 'severity_id', 'severity', 'rule_type']
filterArr.forEach(key => {
delete obj[key]
})
return JSON.stringify(obj)
},
elementsetShow (s, e) { elementsetShow (s, e) {
const eventfixed = { const eventfixed = {
shezhi: 0, shezhi: 0,
@@ -982,7 +990,7 @@ export default {
const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) 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()) const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime())
this.expressions = [this.currentMsg.alertRule.expr] this.expressions = [this.currentMsg.alertRule.expr]
this.$get('/logs/loki/api/v1/query_range?format=1&query=' + this.currentMsg.alertRule.expr + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit).then(res => { this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => {
this.chartLoading = false this.chartLoading = false
const logData = [res.data] const logData = [res.data]
this.resultType = res.data.resultType this.resultType = res.data.resultType

4
nezha-fronted/src/components/charts/chart-list-group.vue
View File

@@ -749,7 +749,7 @@ export default {
if (chartInfo.type == 'logs') { if (chartInfo.type == 'logs') {
return chartTempData return chartTempData
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {
@@ -1232,7 +1232,7 @@ export default {
chartInfo.param.nullType = chartInfo.param.nullType || 'null' chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType query += '&nullType=' + chartInfo.param.nullType
} }
this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => { this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
if (response.status === 'success') { if (response.status === 'success') {
if (response.data.result) { if (response.data.result) {
const series = { const series = {

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

@@ -1018,7 +1018,7 @@ export default {
if (chartInfo.type == 'logs') { if (chartInfo.type == 'logs') {
return chartTempData return chartTempData
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {

6
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -427,7 +427,7 @@ export default {
chartItem.param.nullType = chartItem.param.nullType || 'null' chartItem.param.nullType = chartItem.param.nullType || 'null'
str += '&nullType=' + chartItem.param.nullType str += '&nullType=' + chartItem.param.nullType
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
}) })
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {
@@ -1669,9 +1669,9 @@ export default {
str += '&nullType=' + chartItem.param.nullType str += '&nullType=' + chartItem.param.nullType
} }
if (chartItem.type === 'table' && chartItem.param && chartItem.param.last == 1) { if (chartItem.type === 'table' && chartItem.param && chartItem.param.last == 1) {
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(endTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(endTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
}) })
// 一个图表 // 一个图表
axios.all(axiosArr).then(res => { axios.all(axiosArr).then(res => {

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

@@ -1651,7 +1651,7 @@ export default {
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较 if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss') startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
@@ -1664,7 +1664,7 @@ export default {
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)) axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
}) })
} }
} else if (type === 'dashboard') { // 概览模式,指标概览中使用 } else if (type === 'dashboard') { // 概览模式,指标概览中使用
@@ -1675,14 +1675,14 @@ export default {
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)] axiosArr = [this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
} else { } else {
let query = this.data.elements[0].expression let query = this.data.elements[0].expression
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)] axiosArr = [this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
} }
} }
// 一个图表 // 一个图表

4
nezha-fronted/src/components/charts/logs.vue
View File

@@ -333,7 +333,7 @@ export default {
const requestArr = [] const requestArr = []
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
if (item != '' && this.from.trim() != fromRoute.chartTemp) { if (item != '' && this.from.trim() != fromRoute.chartTemp) {
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.startTime) + '&end=' + this.$stringTimeParseToUnix(this.endTime) + '&limit=' + limit)) requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(item) + '&start=' + this.$stringTimeParseToUnix(this.startTime) + '&end=' + this.$stringTimeParseToUnix(this.endTime) + '&limit=' + limit))
} else if (item != '' && this.from.trim() == fromRoute.chartTemp) { } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
requestArr.push(logsTempData[index % 2]) requestArr.push(logsTempData[index % 2])
} }
@@ -416,7 +416,7 @@ export default {
const requestArr = [] const requestArr = []
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
if (item != '' && this.from.trim() != fromRoute.chartTemp) { if (item != '' && this.from.trim() != fromRoute.chartTemp) {
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.searchTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.searchTime[1]) + '&limit=' + limit)) requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(item) + '&start=' + this.$stringTimeParseToUnix(this.searchTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.searchTime[1]) + '&limit=' + limit))
} else if (item != '' && this.from.trim() == fromRoute.chartTemp) { } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
requestArr.push(logsTempData[index % 2]) requestArr.push(logsTempData[index % 2])
} }

2
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -682,7 +682,7 @@ export default {
}) })
} }
query += '&nullType=' + 'null' query += '&nullType=' + 'null'
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
} }
axiosArr.push({ item, arr }) axiosArr.push({ item, arr })

13
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -264,8 +264,7 @@ export default {
if (this.$refs.messageChart) { if (this.$refs.messageChart) {
this.$refs.messageChart.startLoading() this.$refs.messageChart.startLoading()
const axiosArr = [] const axiosArr = []
const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(this.currentMsg.alertRule.expr.replace(/\s+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))))
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
this.legend = [] this.legend = []
this.chartDatas = [] this.chartDatas = []
axios.all(axiosArr).then(res => { axios.all(axiosArr).then(res => {
@@ -458,6 +457,14 @@ export default {
} }
return r return r
}, },
promQueryParamLabels (labels) {
const obj = JSON.parse(labels)
const filterArr = ['alertname', 'severity_id', 'severity', 'rule_type']
filterArr.forEach(key => {
delete obj[key]
})
return JSON.stringify(obj)
},
// asset弹框控制 // asset弹框控制
tabControl (data) { tabControl (data) {
if (data === 'close') { if (data === 'close') {
@@ -731,7 +738,7 @@ export default {
const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h') const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h') const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
this.expressions = [this.currentMsg.alertRule.expr] this.expressions = [this.currentMsg.alertRule.expr]
this.$get('/logs/loki/api/v1/query_range?format=1&query=' + this.currentMsg.alertRule.expr + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit).then(res => { this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => {
this.chartLoading = false this.chartLoading = false
const logData = [res.data] const logData = [res.data]
this.resultType = res.data.resultType this.resultType = res.data.resultType

6
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -250,7 +250,7 @@ export default {
this.tableData = [] this.tableData = []
this.tableDataCopy = '' this.tableDataCopy = ''
setTimeout(() => { setTimeout(() => {
this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response => { this.$get('/prom/api/v1/query?query=' + escape("{endpoint='" + this.currentEndpoint.id + "'}") + '&time=' + this.formatTime).then(response => {
this.loading = false this.loading = false
if (response.status === 'success') { if (response.status === 'success') {
const results = response.data.result const results = response.data.result
@@ -452,13 +452,13 @@ export default {
} }
const axiosArr = [] const axiosArr = []
for (const endpoint of this.selectedEndpoints) { for (const endpoint of this.selectedEndpoints) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
} }
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较 if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
for (const endpoint of this.selectedEndpoints) { for (const endpoint of this.selectedEndpoints) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
} }
} }
this.legend = [] this.legend = []

2
nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
View File

@@ -115,7 +115,7 @@ export default {
if (item != '') { if (item != '') {
let expr = item let expr = item
this.matchContent && (expr = `${item} ${this.matchSymbol} "${this.matchContent}"`) this.matchContent && (expr = `${item} ${this.matchSymbol} "${this.matchContent}"`)
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + expr + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit)) requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(expr) + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit))
} }
}) })
axios.all(requestArr).then(res => { axios.all(requestArr).then(res => {

2
nezha-fronted/src/components/common/project/L5/topoTooltip.vue
View File

@@ -148,7 +148,7 @@ export default {
if (this.from === fromRoute.chartTemp) { if (this.from === fromRoute.chartTemp) {
return chartTempData return chartTempData
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {

2
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -687,7 +687,7 @@ export default {
}) })
} }
query += '&nullType=' + 'null' query += '&nullType=' + 'null'
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step) return this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
}) })
} }
axiosArr.push({ item, arr }) axiosArr.push({ item, arr })

2
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -113,7 +113,7 @@
fixed="right"> fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div> <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items"> <div slot-scope="scope" class="table-operation-items">
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)" :disabled="scope.row.alertRule.type !== 1" :class="{'table-operation-item--disable': scope.row.alertRule.type !== 1}"><i class="nz-icon nz-icon-view1"></i></button> <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation"> <el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more"> <div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i> <i class="nz-icon nz-icon-more3"></i>

6
nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
View File

@@ -168,7 +168,7 @@ export default {
this.tableData = [] this.tableData = []
this.tableDataCopy = '' this.tableDataCopy = ''
setTimeout(() => { setTimeout(() => {
this.$get("/prom/api/v1/query?query={endpoint_id='" + this.currentEndpoint.id + "'}&time=" + this.$stringTimeParseToUnix(new Date(this.formatTime).getTime())).then(response => { this.$get('/prom/api/v1/query?query=' + escape("{endpoint='" + this.currentEndpoint.id + "'}") + '&time=' + this.$stringTimeParseToUnix(new Date(this.formatTime).getTime())).then(response => {
this.loading = false this.loading = false
if (response.status === 'success') { if (response.status === 'success') {
const results = response.data.result const results = response.data.result
@@ -378,13 +378,13 @@ export default {
} }
const axiosArr = [] const axiosArr = []
for (const endpoint of this.batchDeleteObjs) { for (const endpoint of this.batchDeleteObjs) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
} }
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较 if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
for (const endpoint of this.batchDeleteObjs) { for (const endpoint of this.batchDeleteObjs) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
} }
} }
this.legend = [] this.legend = []

22
nezha-fronted/src/components/page/alert/alertMessage.vue
View File

@@ -462,16 +462,13 @@ export default {
}) })
}, },
messageDetail (row) { messageDetail (row) {
console.log(row)
if (row.alertRule.type == 3) { if (row.alertRule.type == 3) {
return return
} }
this.$get('/alert/rule/' + row.alertRule.id).then(res => { this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } } this.currentMsg = { ...row, alertRule: { ...res.data } }
if (row.alertRule.type !== 1) {
this.graphShow = false
} else {
this.graphShow = true this.graphShow = true
}
this.$nextTick(() => { this.$nextTick(() => {
this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())] this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
this.queryDate() this.queryDate()
@@ -492,7 +489,7 @@ export default {
this.queryChartDate() this.queryChartDate()
}) })
} else if (this.currentMsg.alertRule.type === 2) { } else if (this.currentMsg.alertRule.type === 2) {
this.queryLogData(1000) this.queryLogData(100)
} }
}, },
queryChartDate () { queryChartDate () {
@@ -514,8 +511,7 @@ export default {
if (this.$refs.messageChart) { if (this.$refs.messageChart) {
this.$refs.messageChart.startLoading() this.$refs.messageChart.startLoading()
const axiosArr = [] const axiosArr = []
const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg)) axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + escape(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\s+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))))
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
this.legend = [] this.legend = []
this.chartDatas = [] this.chartDatas = []
axios.all(axiosArr).then(res => { axios.all(axiosArr).then(res => {
@@ -658,12 +654,12 @@ export default {
}, },
queryLogData (limit) { // log的chart和table是一个请求 queryLogData (limit) { // log的chart和table是一个请求
if (!limit) { if (!limit) {
limit = 1000 limit = 100
} }
const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) 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()) const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime())
this.expressions = [this.currentMsg.alertRule.expr] this.expressions = [this.currentMsg.alertRule.expr]
this.$get('/logs/loki/api/v1/query_range?format=1&query=' + this.currentMsg.alertRule.expr + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit).then(res => { this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + escape(unescape(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => {
this.chartLoading = false this.chartLoading = false
const logData = [res.data] const logData = [res.data]
this.resultType = res.data.resultType this.resultType = res.data.resultType
@@ -939,6 +935,14 @@ export default {
} }
return r return r
}, },
promQueryParamLabels (labels) {
const obj = JSON.parse(labels)
const filterArr = ['alertname', 'severity_id', 'severity', 'rule_type']
filterArr.forEach(key => {
delete obj[key]
})
return JSON.stringify(obj)
},
// asset弹框控制 // asset弹框控制
tabControl (data) { tabControl (data) {
if (data === 'close') { if (data === 'close') {

6
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -472,7 +472,7 @@ export default {
const requestArr = [] const requestArr = []
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
if (item != '') { if (item != '') {
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit)) requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + escape(item) + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit))
} }
}) })
if (requestArr.length > 0) { if (requestArr.length > 0) {
@@ -615,7 +615,7 @@ export default {
const step = bus.getStep(this.filterTime[0], this.filterTime[1]) const step = bus.getStep(this.filterTime[0], this.filterTime[1])
promqlInputIndexs.push(index) promqlInputIndexs.push(index)
queryExpression.push(item) queryExpression.push(item)
requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step + '&nullType=null')) requestArr.push(this.$get('/prom/api/v1/query_range?query=' + escape(item) + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step + '&nullType=null'))
} }
}) })
if (requestArr.length > 0) { if (requestArr.length > 0) {
@@ -700,7 +700,7 @@ export default {
const requestArr = [] const requestArr = []
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
if (item !== '') { if (item !== '') {
requestArr.push(this.$get('/prom/api/v1/query?query=' + item)) requestArr.push(this.$get('/prom/api/v1/query?query=' + escape(item)))
} }
}) })
if (requestArr.length > 0) { if (requestArr.length > 0) {

2
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -261,7 +261,7 @@ export default {
this.filter.end_time = endTime this.filter.end_time = endTime
const step = bus.getStep(startTime, endTime) const step = bus.getStep(startTime, endTime)
const query = params.elements[0].expression const query = params.elements[0].expression
this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step).then(response => { this.$get('/prom/api/v1/query_range?query=' + escape(query) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step).then(response => {
this.$refs.metricSet.loading = false this.$refs.metricSet.loading = false
if (response.status === 'success') { if (response.status === 'success') {
if (response.data.result) { if (response.data.result) {