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

feat：alertMessage 添加 info

Browse Source
This commit is contained in:
zhangyu
2022-04-01 15:43:14 +08:00
parent e47e353566
commit 9c4e2a9525
9 changed files with 99 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
View File

@@ -73,6 +73,8 @@
font-size: 16px; font-size: 16px;
color: $--color-text-primary; color: $--color-text-primary;
font-weight: 600; font-weight: 600;
display: flex;
justify-content: space-between;
#time-line-scope{ #time-line-scope{
//float: right; //float: right;
} }
@@ -93,7 +95,7 @@
top: -14px; top: -14px;
} }
} }
.el-timeline-item:last-child .el-timeline-item__tail{ .el-timeline-item.last .el-timeline-item__tail{
display: block; display: block;
top: -100%; top: -100%;
} }
@@ -112,12 +114,20 @@
margin: 0; margin: 0;
padding: 10px 0; padding: 10px 0;
} }
.el-timeline-item__node {
z-index: 1;
}
.time-line-item-header{ .time-line-item-header{
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
font-weight: 400; font-weight: 400;
} }
} }
.load-more-box{
display: flex;
justify-content: center;
align-items: center;
}
} }
.table-no-data { .table-no-data {
width: 100%; width: 100%;

57
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -318,7 +318,8 @@ export default {
return { return {
alertLabelData: null, alertLabelData: null,
loading: true, loading: true,
heightList: 0 heightList: 0,
boxWidth: 0
} }
}, },
watch: { watch: {
@@ -347,29 +348,45 @@ export default {
calcPosition () { calcPosition () {
return function (position) { return function (position) {
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
const leftOffSetView = this.detailList ? -80 : 10 const clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth
const leftOffSet = this.detailList ? -80 : 10 let leftOffSetView = 0
const topOffSet = this.detailList ? 60 : 22 let leftOffSet = this.detailList ? -80 : 10
if (position.top > clientHeight / 2) { let topOffSet = this.detailList ? 60 : 22
return { let topOffSetView = 0
left: `${position.left + position.width + leftOffSet}px`, let labelPosition = {
top: `${position.top - this.heightList + topOffSet}px` top: 0,
left: 0,
right: 0
}
if (this.alertTableDialog) {
let dialog = document.querySelector('#dialog-alert-massage .el-dialog')
if (!dialog) {
dialog = document.querySelector('#viewGraphDialog .el-dialog')
} }
} else if (this.alertTableDialog) {
const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
const dialogHeight = dialog.getBoundingClientRect() const dialogHeight = dialog.getBoundingClientRect()
if (dialogHeight) { console.log(dialogHeight, 'dialogHeight')
return { leftOffSet = leftOffSet - dialogHeight.x
left: `${position.left + position.width + 10 - dialogHeight.x}px`, leftOffSetView = dialogHeight.x
top: `${position.top - dialogHeight.y}px` topOffSet = topOffSet - dialogHeight.y
} topOffSetView = topOffSet
}
if (position.top > clientHeight / 2) {
labelPosition = {
left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top - this.heightList - topOffSetView}px`
} }
} else { } else {
return { labelPosition = {
left: `${position.left + position.width + leftOffSetView}px`, left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top}px` top: `${position.top + topOffSet}px`
} }
} }
if (position.left > clientWidth / 2) {
delete labelPosition.left
labelPosition.right = (clientWidth - position.left - leftOffSetView) + 'px'
}
return labelPosition
} }
}, },
calcHeight () { calcHeight () {
@@ -486,8 +503,10 @@ export default {
mounted () { mounted () {
if (this.$refs.alertLabels) { if (this.$refs.alertLabels) {
this.heightList = this.$refs.alertLabels.getBoundingClientRect().height this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
} else { } else {
this.heightList = '' this.heightList = 0
this.boxWidth = 0
} }
}, },
beforeDestroy () { beforeDestroy () {

5
nezha-fronted/src/components/common/alert/alertMessageInfo.vue
View File

@@ -25,6 +25,7 @@
<div class="info-box-left"> <div class="info-box-left">
<chart <chart
ref="chart" ref="chart"
v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
:chart-data="chartData" :chart-data="chartData"
:chart-info="chartInfo" :chart-info="chartInfo"
:panelLock="panelLock" :panelLock="panelLock"
@@ -38,7 +39,6 @@
:multipleTime="multipleTime" :multipleTime="multipleTime"
:isFullscreen="isFullscreen" :isFullscreen="isFullscreen"
:showAllData="showAllData" :showAllData="showAllData"
v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
></chart> ></chart>
<alertMessageInfoTab <alertMessageInfoTab
class="alert-message-info-tab" class="alert-message-info-tab"
@@ -131,7 +131,8 @@ export default {
this.minusTime = '' this.minusTime = ''
this.multipleTime = false this.multipleTime = false
} }
this.chartInfo.loaded && this.query(elements, startTime, endTime, step) this.time = [startTime, endTime]
this.chartInfo.loaded && this.chartInfo.alertRule.type !== 3 && this.query(elements, startTime, endTime, step)
}, },
// 参数 isRefresh 标识是否是刷新操作 // 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh, params) { getChartData (isRefresh, params) {

1
nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
View File

@@ -11,6 +11,7 @@
v-if="item.key !=='alertRule'" v-if="item.key !=='alertRule'"
:id="infoData[item.key].id" :id="infoData[item.key].id"
:that="findData2(item.key)" :that="findData2(item.key)"
:alertTableDialog="true"
:type="item.key"/> :type="item.key"/>
<alertRuleInfo <alertRuleInfo
v-else v-else

37
nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div style="height: 100%;width: 100%"> <div style="height: 100%;width: 100%">
<div class="time-line-header"> <div class="time-line-header">
{{$t('alert.relatedAlerts')}} <span>{{$t('alert.relatedAlerts')}}</span>
<el-select <el-select
id="time-line-scope" id="time-line-scope"
v-model="scope" v-model="scope"
@@ -21,14 +21,16 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<el-timeline v-my-loading="loading" v-if="!noData"> <el-timeline v-my-loading="loading" v-if="!noData && timeLineData.length">
<el-timeline-item <el-timeline-item
v-for="(item,index) in timeLineData" v-for="(item,index) in timeLineData"
:key="item.id" :key="item.id"
:class="{ :class="{
'only': timeLineData.length === 1 , 'only': timeLineData.length === 1 ,
'has-time': item.startAt 'has-time': item.startAt,
'last': index === timeLineData.length-1 && index !==0
}" }"
:color="item.severity.color"
:timestamp="item.startAt?item.startAt: ''" :timestamp="item.startAt?item.startAt: ''"
placement="top"> placement="top">
<div > <div >
@@ -54,8 +56,10 @@
</div> </div>
</div> </div>
</el-timeline-item> </el-timeline-item>
<!-- <div @click="getTimeLineData" v-if="timeLineData.length === total">加载更多</div>--> <div v-if="timeLineData.length >= total">{{$t('overall.noMoreData')}}}</div>
<!-- <div v-else>没有更多了</div>--> <div v-else class="load-more-box">
<el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}}</el-button>
</div>
</el-timeline> </el-timeline>
<div class="table-no-data" v-else> <div class="table-no-data" v-else>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
@@ -65,6 +69,7 @@
</div> </div>
<alertLabel <alertLabel
v-if="alertLabelShow" v-if="alertLabelShow"
:alertTableDialog="true"
:id="alertLabelId" :id="alertLabelId"
:that="alertLabelObj" :that="alertLabelObj"
:type="alertLabelType" :type="alertLabelType"
@@ -93,10 +98,12 @@ export default {
}, },
watch: { watch: {
time: { time: {
immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
if (n && n.length) { if (n && n.length) {
this.getTimeLineData(1) this.pageNo = 1
this.getTimeLineData()
} }
} }
} }
@@ -140,7 +147,7 @@ export default {
} }
}, },
mounted () { mounted () {
this.getTimeLineData(1) // this.getTimeLineData(1)
const dateFormatStr = localStorage.getItem('nz-default-dateFormat') const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
if (dateFormatStr) { if (dateFormatStr) {
this.dateFormatStr = dateFormatStr.split(' ')[0] this.dateFormatStr = dateFormatStr.split(' ')[0]
@@ -149,29 +156,29 @@ export default {
} }
}, },
methods: { methods: {
getTimeLineData (pageNo = this.pageNo) { getTimeLineData () {
this.noData = false this.noData = false
this.loading = true this.loading = true
const params = { const params = {
pageNo: pageNo, pageNo: this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize,
scope: this.scope.join(','), scope: this.scope.join(','),
id: this.infoData.id, id: this.infoData.id,
state: '', state: '',
startAt: this.time[1], startAt: this.timezoneToUtcTimeStr(this.time[0] * 1000, 'YYYY-MM-DD HH:mm:ss'),
endAt: this.time[0], endAt: this.timezoneToUtcTimeStr(this.time[1] * 1000, 'YYYY-MM-DD HH:mm:ss'),
orderBy: '-startAt' orderBy: '-startAt'
} }
this.$get('/alert/message/rel', params).then(res => { this.$get('/alert/message/rel', params).then(res => {
this.loading = false this.loading = false
if (res.code === 200) { if (res.code === 200) {
this.total = res.data.total this.total = res.data.total
if (pageNo == 1) { if (this.pageNo == 1) {
this.timeLineData = res.data.list this.timeLineData = res.data.list
} else { } else {
this.timeLineData.push(...res.data.list) this.timeLineData.push(...res.data.list)
} }
this.disposeTime(pageNo) this.disposeTime(this.pageNo)
this.noData = false this.noData = false
this.pageNo++ this.pageNo++
} else { } else {
@@ -186,6 +193,7 @@ export default {
let i = (pageNo - 1) * this.pageSize let i = (pageNo - 1) * this.pageSize
for (i; i < this.timeLineData.length; i++) { for (i; i < this.timeLineData.length; i++) {
const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr) const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
this.timeLineData[i].color = '#fa8'
if (this.lastDataTime !== lastDataTime) { if (this.lastDataTime !== lastDataTime) {
this.lastDataTime = lastDataTime this.lastDataTime = lastDataTime
this.timeLineData[i].startAt = lastDataTime this.timeLineData[i].startAt = lastDataTime
@@ -196,7 +204,8 @@ export default {
}, },
changeScope (value) { changeScope (value) {
console.log(value) console.log(value)
this.getTimeLineData(1) this.pageNo = 1
this.getTimeLineData()
} }
} }
} }

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

@@ -90,7 +90,7 @@
fullscreen fullscreen
:modal-append-to-body="false" :modal-append-to-body="false"
> >
<panel-chart <alertMessageInfo
:ref="'chart-fullscreen' + chartInfo.id" :ref="'chart-fullscreen' + chartInfo.id"
:chart-info="chartInfo" :chart-info="chartInfo"
:from="fromRoute.alertMessage" :from="fromRoute.alertMessage"
@@ -98,7 +98,7 @@
:is-fullscreen="true" :is-fullscreen="true"
:time-range="searchTime" :time-range="searchTime"
@showFullscreen="showFullscreen" @showFullscreen="showFullscreen"
></panel-chart> ></alertMessageInfo>
</el-dialog> </el-dialog>
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')" <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
:visible.sync="dialogShowText" :visible.sync="dialogShowText"
@@ -131,6 +131,7 @@ import chart from '@/components/page/dashboard/overview/chart'
import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants' import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox' import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin' import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
import alertMessageInfo from '@/components/common/alert/alertMessageInfo'
import panelChart from '@/components/chart/panelChart' import panelChart from '@/components/chart/panelChart'
import lodash from 'lodash' import lodash from 'lodash'
import lineData from '@/components/chart/defaultLineData' import lineData from '@/components/chart/defaultLineData'
@@ -144,7 +145,8 @@ export default {
alertMessageTable, alertMessageTable,
alertSilenceBox, alertSilenceBox,
chart, chart,
panelChart panelChart,
alertMessageInfo
}, },
props: { props: {
from: String from: String
@@ -426,9 +428,6 @@ export default {
this.deleteBox.show = true this.deleteBox.show = true
}, },
messageDetail (row) { messageDetail (row) {
if (row.alertRule.type == 3) {
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 } }
this.$nextTick(() => { this.$nextTick(() => {
@@ -635,8 +634,9 @@ export default {
}, },
queryDate () { queryDate () {
this.chartLoading = true this.chartLoading = true
if (this.currentMsg.alertRule.type === 1) { let chartInfo = {}
const chartInfo = lodash.cloneDeep(lineData) if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) {
chartInfo = lodash.cloneDeep(lineData)
chartInfo.elements = [{}] chartInfo.elements = [{}]
if (!isNaN(this.currentMsg.alertRule.threshold)) { if (!isNaN(this.currentMsg.alertRule.threshold)) {
chartInfo.param.enable.thresholds = true chartInfo.param.enable.thresholds = true
@@ -645,12 +645,8 @@ export default {
color: '#d64f40' color: '#d64f40'
}] }]
} }
chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')
chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
chartInfo.unit = this.currentMsg.alertRule.unit
this.showFullscreen(true, chartInfo)
} else if (this.currentMsg.alertRule.type === 2) { } else if (this.currentMsg.alertRule.type === 2) {
const chartInfo = lodash.cloneDeep(logData) chartInfo = lodash.cloneDeep(logData)
chartInfo.elements = [{}] chartInfo.elements = [{}]
if (!isNaN(this.currentMsg.alertRule.threshold)) { if (!isNaN(this.currentMsg.alertRule.threshold)) {
chartInfo.param.enable.thresholds = true chartInfo.param.enable.thresholds = true
@@ -659,11 +655,14 @@ export default {
color: '#d64f40' color: '#d64f40'
}] }]
} }
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)))
chartInfo.unit = this.currentMsg.alertRule.unit
this.showFullscreen(true, chartInfo)
} }
chartInfo.id = this.currentMsg.id
chartInfo.name = this.currentMsg.alertRule.name
chartInfo.isAlertMessage = true
chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
chartInfo.elements && (chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))))
chartInfo.unit = this.currentMsg.alertRule.unit
this.showFullscreen(true, chartInfo)
}, },
exportLog ({ limit, descending }) { exportLog ({ limit, descending }) {
const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h') const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')

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

@@ -101,7 +101,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)"><i class="nz-icon nz-icon-view1"></i></button> <button v-if="scope.row.alertRule" 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>

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

@@ -604,7 +604,7 @@ export default {
queryDate () { queryDate () {
this.chartLoading = true this.chartLoading = true
let chartInfo = {} let chartInfo = {}
if (this.currentMsg.alertRule.type === 1) { if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) {
chartInfo = lodash.cloneDeep(lineData) chartInfo = lodash.cloneDeep(lineData)
chartInfo.elements = [{}] chartInfo.elements = [{}]
if (!isNaN(this.currentMsg.alertRule.threshold)) { if (!isNaN(this.currentMsg.alertRule.threshold)) {

10
nezha-fronted/src/main.js
View File

@@ -98,24 +98,24 @@ Vue.mixin({
} }
}, },
methods: { methods: {
utcTimeToTimezone: function (time) { utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间 返回时间戳
if (time) { if (time) {
return bus.UTCTimeToConfigTimezone(time) return bus.UTCTimeToConfigTimezone(time)
} }
}, },
utcTimeToTimezoneStr: function (time) { utcTimeToTimezoneStr: function (time) { // 将utc时间 转为系统设者的时间 返回String
if (time) { if (time) {
return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss') return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss')
} else { } else {
return '-' return '-'
} }
}, },
timezoneToUtcTime: function (time) { timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
if (time) { if (time) {
return bus.configTimezoneToUTCTime(time) return bus.configTimezoneToUTCTime(time)
} }
}, },
timezoneToUtcTimeStr: function (time, fmt) { timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
if (!fmt) { if (!fmt) {
fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss' fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
} }
@@ -123,7 +123,7 @@ Vue.mixin({
return bus.timeFormate(this.timezoneToUtcTime(time), fmt) return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
} }
}, },
timestampStr: function (time, fmt) { timestampStr: function (time, fmt) { // 将utc时间 转为系统设者的时间 返回String
const date = new Date(time) const date = new Date(time)
const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果 const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
const dateStr = new Date(time).getTime() + localOffset const dateStr = new Date(time).getTime() + localOffset