feat: alertMessage 详情开发
This commit is contained in:
zhangyu
@@ -0,0 +1,31 @@
|
||||
.chart-fullscreen.nz-dialog .panel-chart--fullscreen{
|
||||
.alert-message-info-header{
|
||||
border-bottom: 1px solid rgba(0,0,0,0.09);;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.alert-message-info-box{
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.info-box-left{
|
||||
width: 66%;
|
||||
min-width: 500px;
|
||||
min-height: 600px;
|
||||
margin-right: 20px;
|
||||
.nz-chart {
|
||||
height: 36%;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid $--border-color-light;
|
||||
}
|
||||
.alert-message-info-tab{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.info-box-right{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
@import './common/alert/alertLabel.scss';
|
||||
@import './common/alert/alertRuleInfo.scss';
|
||||
@import './common/alert/selectAlertSilence.scss';
|
||||
@import './common/alert/alertMessageInfo.scss';
|
||||
@import './common/alert/alertDaysInfo.scss';
|
||||
@import './common/bottomBox/bottomBox.scss';
|
||||
@import './common/bottomBox/panelTabNew.scss';
|
||||
|
||||
@@ -26,7 +26,10 @@
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
<div class="chart-header__title" :title="chartInfo.name">{{chartInfo.name}}</div>
|
||||
<div class="chart-header__title" :title="chartInfo.name">
|
||||
<slot name="title-icon"></slot>
|
||||
{{chartInfo.name}}
|
||||
</div>
|
||||
<div class="chart-header__tools">
|
||||
<span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
|
||||
<el-tooltip :content="chartInfo.remark" effect="light" placement="top">
|
||||
|
||||
@@ -72,6 +72,15 @@ export default {
|
||||
methods: {
|
||||
initChart (chartOptions = this.chartOption) {
|
||||
const chartOption = lodash.cloneDeep(chartOptions)
|
||||
if (this.chartInfo.isAlertMessage) {
|
||||
chartOption.title = {
|
||||
show: true,
|
||||
text: this.$t('project.endpoint.dialogTitle'),
|
||||
top: 20
|
||||
}
|
||||
chartOption.grid.top = 70
|
||||
chartOption.toolbox.top = 20
|
||||
}
|
||||
this.legends = []
|
||||
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
|
||||
if (!this.series.length) {
|
||||
|
||||
330
nezha-fronted/src/components/common/alert/alertMessageInfo.vue
Normal file
330
nezha-fronted/src/components/common/alert/alertMessageInfo.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<!-- chart外层箱子 -->
|
||||
<div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)" v-my-loading="loading">
|
||||
<!-- 全屏的header-->
|
||||
<chart-screen-header
|
||||
v-if="isFullscreen"
|
||||
:is-group="isGroup(chartInfo.type)"
|
||||
:isError="isError"
|
||||
:from="from"
|
||||
:chartData="chartData"
|
||||
:chart-info="chartInfo"
|
||||
:showAllData.sync="showAllData"
|
||||
:allDataLength="allDataLength"
|
||||
@loadMore="loadMore"
|
||||
@refresh="refresh"
|
||||
@dateChange="dateChange"
|
||||
@close="showFullscreen"
|
||||
class="alert-message-info-header"
|
||||
>
|
||||
<span slot="title-icon"> active </span>
|
||||
</chart-screen-header>
|
||||
<!-- chart -->
|
||||
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
|
||||
<div class="alert-message-info-box">
|
||||
<div class="info-box-left">
|
||||
<chart
|
||||
ref="chart"
|
||||
:chart-data="chartData"
|
||||
:chart-info="chartInfo"
|
||||
:panelLock="panelLock"
|
||||
:filter="filter"
|
||||
:from="from"
|
||||
@refreshLogs="refreshLogs"
|
||||
:show-header="showHeader"
|
||||
:isError="isError"
|
||||
:loading="loading"
|
||||
:minusTime="minusTime"
|
||||
:multipleTime="multipleTime"
|
||||
:isFullscreen="isFullscreen"
|
||||
:showAllData="showAllData"
|
||||
v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
|
||||
></chart>
|
||||
<alertMessageInfoTab class="alert-message-info-tab">
|
||||
</alertMessageInfoTab>
|
||||
</div>
|
||||
<div class="info-box-right">
|
||||
时间
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
|
||||
import chart from '@/components/chart/chart'
|
||||
import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from '@/components/chart/chart/tools'
|
||||
import { chartType, fromRoute } from '@/components/common/js/constants'
|
||||
import bus from '@/libs/bus'
|
||||
import axios from 'axios'
|
||||
import chartTempData from '@/components/charts/chartTempData'
|
||||
import logsData from '@/components/chart/logsData'
|
||||
import lodash from 'lodash'
|
||||
import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'
|
||||
|
||||
export default {
|
||||
name: 'panelChart',
|
||||
components: {
|
||||
alertMessageInfoTab,
|
||||
chart,
|
||||
ChartScreenHeader
|
||||
},
|
||||
props: {
|
||||
chartInfo: Object, // 其中的param json串已转化为对象
|
||||
timeRange: Array, // 时间范围
|
||||
isFullscreen: Boolean,
|
||||
panelLock: Boolean,
|
||||
chartDetailInfo: Object,
|
||||
from: String,
|
||||
filter: {},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
loading: true,
|
||||
isError: false,
|
||||
multipleTime: false,
|
||||
minusTime: '',
|
||||
showAllData: false,
|
||||
allDataLength: 0,
|
||||
severityData: this.$store.getters.severityData,
|
||||
severityDataWeight: this.$store.getters.severityDataWeight
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerH () {
|
||||
return this.$store.getters.getHeaderH
|
||||
},
|
||||
headerHPadding () {
|
||||
return this.$store.getters.getHeaderHPadding
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isGroup,
|
||||
dateChange (filter, multipleTime) {
|
||||
this.loading = true
|
||||
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
|
||||
let startTime = bus.formateTimeToTime(filter.start_time)
|
||||
let endTime = bus.formateTimeToTime(filter.end_time)
|
||||
const step = bus.getStep(startTime, endTime)
|
||||
startTime = this.$stringTimeParseToUnix(startTime)
|
||||
endTime = this.$stringTimeParseToUnix(endTime)
|
||||
const elements = this.chartInfo.elements || []
|
||||
if (multipleTime.length) {
|
||||
const minusTime = (new Date(bus.formateTimeToTime(filter.start_time)).getTime() - new Date(bus.formateTimeToTime(multipleTime[0])).getTime())
|
||||
this.minusTime = minusTime
|
||||
this.multipleTime = true
|
||||
} else {
|
||||
this.minusTime = ''
|
||||
this.multipleTime = false
|
||||
}
|
||||
this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
|
||||
},
|
||||
// 参数 isRefresh 标识是否是刷新操作
|
||||
getChartData (isRefresh, params) {
|
||||
this.loading = true
|
||||
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
if (isRefresh) { // 刷新则视情况更新时间范围
|
||||
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
||||
const origin = new Date(this.timeRange[1])
|
||||
const numInterval = now.getTime() - origin.getTime()
|
||||
if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
|
||||
startTime = bus.getNewTime(bus.formateTimeToTime(this.timeRange[0]), numInterval)
|
||||
endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
|
||||
} else {
|
||||
startTime = bus.formateTimeToTime(this.timeRange[0])
|
||||
endTime = bus.formateTimeToTime(this.timeRange[1])
|
||||
}
|
||||
} else {
|
||||
startTime = bus.formateTimeToTime(this.timeRange[0])
|
||||
endTime = bus.formateTimeToTime(this.timeRange[1])
|
||||
}
|
||||
const step = bus.getStep(startTime, endTime)
|
||||
startTime = this.$stringTimeParseToUnix(startTime)
|
||||
endTime = this.$stringTimeParseToUnix(endTime)
|
||||
const elements = this.chartInfo.elements || []
|
||||
this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
|
||||
},
|
||||
query (elements, startTime, endTime, step, params) {
|
||||
this.isError = false
|
||||
this.allDataLength = 0
|
||||
try {
|
||||
switch (this.chartInfo.datasource) {
|
||||
case 'metrics':
|
||||
case 'logs': {
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
setTimeout(() => {
|
||||
this.chartData = [chartTempData.data.result]
|
||||
this.chartData.forEach(item => {
|
||||
item.forEach(children => {
|
||||
children.elements = elements[0]
|
||||
})
|
||||
})
|
||||
this.loading = false
|
||||
}, 100)
|
||||
return
|
||||
}
|
||||
let urlPre = ''
|
||||
if (this.chartInfo.datasource === 'metrics') {
|
||||
urlPre += '/prom'
|
||||
} else if (this.chartInfo.datasource === 'logs') {
|
||||
urlPre += '/logs/loki'
|
||||
}
|
||||
let requests = elements.map((element) => {
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
return chartTempData
|
||||
}
|
||||
let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${step}`
|
||||
if (isTimeSeries(this.chartInfo.type)) {
|
||||
query += `&nullType=${this.chartInfo.param.nullType || 'null'}`
|
||||
}
|
||||
if (element.filter) {
|
||||
query += `&filter=${element.filter}`
|
||||
}
|
||||
if (this.chartInfo.datasource === 'logs') {
|
||||
query += '&format=1'
|
||||
if (!params || params.descending) {
|
||||
this.chartInfo.descending = true
|
||||
query += '&direction=backward'
|
||||
} else {
|
||||
this.chartInfo.descending = false
|
||||
query += '&direction=forward'
|
||||
}
|
||||
}
|
||||
// if (isChartPie(this.chartInfo.type)) {
|
||||
// query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
|
||||
// }
|
||||
query += `&query=${encodeURIComponent(element.expression)}`
|
||||
return this.$get(query)
|
||||
})
|
||||
if (this.multipleTime) {
|
||||
const multipleRequests = elements.map((element) => {
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
return chartTempData
|
||||
}
|
||||
let query = `${urlPre}/api/v1/query_range?start=${startTime - this.minusTime / 1000}&end=${endTime - this.minusTime / 1000}&step=${step}`
|
||||
if (isTimeSeries(this.chartInfo.type)) {
|
||||
query += `&nullType=${this.chartInfo.param.nullType || 'null'}`
|
||||
}
|
||||
if (element.filter) {
|
||||
query += `&filter=${element.filter}`
|
||||
}
|
||||
if (this.chartInfo.datasource === 'logs') {
|
||||
query += '&format=1'
|
||||
}
|
||||
// if (isChartPie(this.chartInfo.type)) {
|
||||
// query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
|
||||
// }
|
||||
query += `&query=${encodeURIComponent(element.expression)}`
|
||||
return this.$get(query)
|
||||
})
|
||||
requests = requests.concat(multipleRequests)
|
||||
}
|
||||
const chartData = []
|
||||
axios.all(requests).then((res) => {
|
||||
res.forEach((r, rIndex) => {
|
||||
if (rIndex < elements.length) {
|
||||
if (r.status === 'success') {
|
||||
r.data.result.forEach(item => {
|
||||
item.elements = elements[rIndex]
|
||||
this.allDataLength++
|
||||
})
|
||||
chartData.push(r.data.result)
|
||||
} else {
|
||||
chartData.push({ error: r.msg || r.error || r })
|
||||
this.isError = true
|
||||
}
|
||||
} else {
|
||||
if (r.status === 'success') {
|
||||
r.data.result.forEach(item => {
|
||||
this.allDataLength++
|
||||
item.values.forEach(values => {
|
||||
values[0] = values[0] + this.minusTime / 1000
|
||||
})
|
||||
})
|
||||
chartData.push(r.data.result)
|
||||
} else {
|
||||
chartData.push({ error: r.msg || r.error || r })
|
||||
this.isError = true
|
||||
}
|
||||
}
|
||||
})
|
||||
this.chartData = chartData
|
||||
if (this.chartInfo.type === 'log') {
|
||||
this.logChartDataFormat()
|
||||
}
|
||||
}).catch(res => {
|
||||
console.info(res)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.$refs.chart.resize()
|
||||
},
|
||||
refresh () {
|
||||
this.getChartData(true)
|
||||
},
|
||||
refreshLogs (params) {
|
||||
this.getChartData(true, params)
|
||||
},
|
||||
logChartDataFormat () {
|
||||
this.chartData.forEach((item, index) => {
|
||||
const elements = this.chartInfo.elements[index]
|
||||
item.forEach(row => {
|
||||
row.elements = elements
|
||||
})
|
||||
})
|
||||
},
|
||||
showMultiple (type) {
|
||||
switch (type) {
|
||||
case 'line' :
|
||||
case 'area' :
|
||||
case 'point' :
|
||||
return true
|
||||
default: return false
|
||||
}
|
||||
},
|
||||
loadMore () {
|
||||
this.showAllData = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
|
||||
})
|
||||
},
|
||||
showFullscreen (show) {
|
||||
this.$emit('showFullscreen', show, this.chartInfo)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeRange: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.refresh()
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
// console.log(n)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.chartInfo.loaded && this.getChartData()
|
||||
this.showAllData = !this.showMultiple(this.chartInfo.type)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'alertMessageInfoTab',
|
||||
data () {
|
||||
return {
|
||||
activeName: '',
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -113,7 +113,7 @@
|
||||
fullscreen
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<panel-chart
|
||||
<alertMessageInfo
|
||||
:ref="'chart-fullscreen' + chartInfo.id"
|
||||
:chart-info="chartInfo"
|
||||
:from="fromRoute.alertMessage"
|
||||
@@ -121,7 +121,7 @@
|
||||
:is-fullscreen="true"
|
||||
:time-range="searchTimeDialog"
|
||||
@showFullscreen="showFullscreen"
|
||||
></panel-chart>
|
||||
></alertMessageInfo>
|
||||
</el-dialog>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
|
||||
@@ -157,7 +157,7 @@ import { alertMessage as alertMessageConstant, fromRoute } from '@/components/co
|
||||
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
|
||||
import clickSearch from '@/components/common/labelFilter/clickSearch'
|
||||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
import panelChart from '@/components/chart/panelChart'
|
||||
import alertMessageInfo from '@/components/common/alert/alertMessageInfo'
|
||||
import lineData from '@/components/chart/defaultLineData'
|
||||
import logData from '@/components/chart/defaultLogData'
|
||||
import lodash from 'lodash'
|
||||
@@ -172,7 +172,7 @@ export default {
|
||||
deleteButton,
|
||||
alertSilenceBox,
|
||||
clickSearch,
|
||||
panelChart
|
||||
alertMessageInfo
|
||||
},
|
||||
mixins: [dataListMixin, routerPathParams],
|
||||
data () {
|
||||
@@ -578,9 +578,6 @@ export default {
|
||||
})
|
||||
},
|
||||
messageDetail (row) {
|
||||
if (row.alertRule.type == 3) {
|
||||
return
|
||||
}
|
||||
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
|
||||
this.currentMsg = { ...row, alertRule: { ...res.data } }
|
||||
this.$nextTick(() => {
|
||||
@@ -606,8 +603,9 @@ export default {
|
||||
},
|
||||
queryDate () {
|
||||
this.chartLoading = true
|
||||
let chartInfo = {}
|
||||
if (this.currentMsg.alertRule.type === 1) {
|
||||
const chartInfo = lodash.cloneDeep(lineData)
|
||||
chartInfo = lodash.cloneDeep(lineData)
|
||||
chartInfo.elements = [{}]
|
||||
if (!isNaN(this.currentMsg.alertRule.threshold)) {
|
||||
chartInfo.param.enable.thresholds = true
|
||||
@@ -616,12 +614,8 @@ export default {
|
||||
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) {
|
||||
const chartInfo = lodash.cloneDeep(logData)
|
||||
chartInfo = lodash.cloneDeep(logData)
|
||||
chartInfo.elements = [{}]
|
||||
if (!isNaN(this.currentMsg.alertRule.threshold)) {
|
||||
chartInfo.param.enable.thresholds = true
|
||||
@@ -630,11 +624,13 @@ export default {
|
||||
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.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 }) {
|
||||
const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000)
|
||||
|
||||
Reference in New Issue
Block a user