diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index ee014f733..82939707b 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -53,20 +53,24 @@
- +
@@ -81,13 +85,18 @@ :id="'tableContainer'+chartIndex" :tableData="storedScreanTableData" :loading="loadingTable" - :tableHeight="'95%'" + :height="'calc(100% - 0px)'" + :customTableTitle="tableTitle" :tableId="''" :projectAlertId="'tableContainer'+chartIndex" @tableDataSort="tableDataSort" - @deleteMessage="deleteMessage" - ref="alertListScreenTable" - :showTopBtn="false" + @del="deleteMessage" + @messageDetail="messageDetail" + ref="alertListTable" + :form="'chartList'" + :fromPath="'/alertList'" + style="height: calc(100% - 50px)" + :showOption="false" > @@ -117,7 +126,7 @@
{{$t("project.endpoint.dialogTitle")}}
- +
@@ -238,7 +247,7 @@ export default { label: this.$t('alert.list.labels'), prop: 'labels', show: true, - width: 200 + width: 300 }, { label: this.$t('alert.severity'), prop: 'severity', @@ -265,15 +274,6 @@ export default { 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 } ], tablelable: [], @@ -283,6 +283,7 @@ export default { showTopBtn: false, graphShow: false, chartDatas: [], + searchTimeDialog: [], chartUnit: 5, deleteBox: { show: false, ids: '', remark: '', state: 2 }, isPreview: false, @@ -394,17 +395,22 @@ export default { }) this.deleteBox.ids = ids.join(',') }, - deleteMessage (deleltebox, cb) { - this.$put('alert/message', deleltebox).then(res => { - if (res.code === 200) { - this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) - this.deleteBox.show = false - this.deleteBox.ids = '' - this.getAlertList() - cb() - } else { - this.$message.error(res.msg) - } + deleteMessage (row) { + const self = this + this.$confirm(this.$t('tip.confirmDelete'), { + confirmButtonText: this.$t('tip.yes'), + cancelButtonText: this.$t('tip.no'), + type: 'warning' + }).then(() => { + this.$delete('alert/message' + '?ids=' + row.id + '&state=3').then(response => { + if (response.code === 200) { + self.delFlag = true + this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) + self.getAlertList() + } else { + this.$message.error(response.msg) + } + }) }) }, chartUnitChange: function (unit) { @@ -413,11 +419,20 @@ export default { this.queryChartDate() }) }, + messageDetail (row) { + this.$get('/alert/rule/' + row.alertRule.id).then(res => { + this.currentMsg = { ...row, alertRule: { ...res.data } } + this.graphShow = true + this.$nextTick(() => { + this.queryChartDate() + }) + }) + }, queryChartDate () { const $temp = this - const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h') - const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h') - this.searchTime = [start, end] + const start = this.searchTime[0] ? this.searchTime[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 30 * 60 * 1000) + const end = this.searchTime[1] ? this.searchTime[1] : bus.computeTimezoneTime(new Date().getTime()) + this.searchTimeDialog = [start, end] const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60) let step = '15s' if (timeDiff < 1) { @@ -568,37 +583,6 @@ export default { if (response.code == 200) { this.storedTableData = response.data.list this.storedScreanTableData = response.data.list - const axiosAll = [] - this.$nextTick(() => { - this.storedTableData.forEach((item) => { - item.labels = JSON.parse(item.labels) - if (item.alertRule.buildIn != 1) { - const 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 = [] - const 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 = '' @@ -708,24 +692,36 @@ export default { this.getAlerScreetList() }, promQueryParamConvert (obj) { - if (obj) { - return '(' + obj.alertRule.expr + ') and (' + (function () { - let q = '{' + let r = '(' + obj.alertRule.expr + ')' + let intoLabels = false + obj.labels = JSON.parse(obj.labels) + if (Object.keys(obj.labels).length > 0) { + r += (function () { + let group = ' and ' + '(group({' + let by = ' by (' + for (const k in obj.labels) { - if (k != 'alertname' && k != 'severity') { - q += k - q += '=' - q += ("'" + obj.labels[k] + "',") + if (k != 'alertname' && k != 'severity' && k != 'severity_id') { + intoLabels = true + group += k + group += '=' + group += ("'" + obj.labels[k] + "',") + by += k + by += ',' } - }; - if (q.length > 1) { - q = q.substring(0, q.length - 1) } - q += '}' - return q - }()) + ')' + if (intoLabels) { + group = group.substring(0, group.length - 1) + by = by.substring(0, by.length - 1) + group += '})' + by += ')' + return group + by + ')' + } else { + return '' + } + }()) } - return '' + return r }, elementsetShow (s, e) { const eventfixed = { diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue index 71f6a7ced..3de48a053 100644 --- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue @@ -101,6 +101,7 @@ @@ -140,6 +141,10 @@ export default { props: { nowTime: { type: String + }, + showOption: { + type: Boolean, + default: true } }, mixins: [table, bus], @@ -520,9 +525,9 @@ export default { return 'alert-message-list-labels' } else if (row.column.label == this.$t('alert.list.state')) { if (row.row.state == 1) { - return 'danger' + return '' } else if (row.row.state == 2) { - return 'success' + return '' } } else { return '' diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue index 1ab830d31..5e64115ed 100644 --- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue @@ -57,7 +57,7 @@ - + - + - + + + {{item.name}} + + + @@ -36,15 +41,18 @@ export default { }, data () { return { + alertPriority: [], parameters: { select: [], alertRule: '', level: '', - state: '' + state: '1' }, options: [], props: { - checkStrictly: true + checkStrictly: true, + label: 'name', + value: 'id' // lazy:true, // lazyLoad:$temp.lazyLoadFunc, }, @@ -56,6 +64,7 @@ export default { created () { this.queryAlertRules() this.queryOptionsData() + this.queryPriority() }, methods: { saveParam: function (opType = 'save') { @@ -118,81 +127,9 @@ export default { } }, queryOptionsData: function () { - const param = { - pageSize: -1 - } - this.$get('endpoint', param).then(response => { - /* - * { - * project-1:{ - * data:{}, - * module-1:{ - * data:{}, - * endpoints:[] - * } - * } - * } - * */ + this.$get('/monitor/endpoint/tree').then(response => { if (response.code == 200) { - const data = response.data.list - const result = new Map() - data.forEach(item => { - let project = result.get('project-' + item.project.id) - if (!project) { - project = new Map() - project.set('data', item.project) - const module = new Map() - module.set('data', item.module) - module.set('endpoints', [item]) - project.set('module-' + item.module.id, module) - result.set('project-' + item.project.id, project) - } else { - let module = project.get('module-' + item.module.id) - if (!module) { - module = new Map() - module.set('data', item.module) - module.set('endpoints', [item]) - project.set('module-' + item.module.id, module) - result.set('project-' + item.project.id, project) - } else { - const endpoints = module.get('endpoints') - endpoints.push(item) - module.set('endpoints', endpoints) - project.set('module-' + item.module.id, module) - result.set('project-' + item.project.id, project) - } - } - }) - - result.forEach((project, projectKey) => { - const option = {} - project.forEach((value, moduleKey) => { - if (moduleKey == 'data') { - option.label = value.name - option.value = value.id - } else { - const module = value - const moduleData = module.get('data') - let endpoints = module.get('endpoints') - endpoints = endpoints.map(item => { - return { label: item.asset.host, value: item.id } - }) - /* //测试代码 - for (let i = 1; i < 16; i++) { - endpoints.push({label: '114.51.41.' + i, value: i+8887}); - } */ - if (!option.children) { - option.children = [] - } - option.children.push({ - label: moduleData.name, - value: moduleData.id, - children: endpoints - }) - } - }) - this.options.push(option) - }) + this.options = response.data.list } else { console.error(response.msg) this.$message.error(response.msg) @@ -211,6 +148,19 @@ export default { this.$message.error(response.msg) } }) + }, + queryPriority: function () { + const param = { + pageSize: -1 + } + this.$get('alert/severity', param).then(response => { + if (response.code == 200) { + this.alertPriority = response.data.list + } else { + console.error(response.msg) + this.$message.error(response.msg) + } + }) } }, mounted () { @@ -234,6 +184,17 @@ export default { .alert-chart-param-form .form-item{ width: 100%; } +.severity-circle{ + position: absolute; + left: 10px; + top: 0; +} +.severity-box{ + position: relative; +} +.severity-box /deep/ .el-select .el-input__inner{ + padding-left: 25px; +}