feat：alertMessage 支持logs（100%）
This commit is contained in:
zhangyu
@@ -60,12 +60,13 @@
|
||||
:id="'tableContainer'+chartIndex"
|
||||
:tableData="storedTableData"
|
||||
:loading="loadingTable"
|
||||
:height="'calc(100% - 0px)'"
|
||||
:height="'calc(100% - 46px)'"
|
||||
:customTableTitle="tableTitle"
|
||||
:tableId="''"
|
||||
:projectAlertId="'tableContainer'+chartIndex"
|
||||
@tableDataSort="tableDataSort"
|
||||
@del="deleteMessage"
|
||||
@showText="showText"
|
||||
@messageDetail="messageDetail"
|
||||
ref="alertListTable"
|
||||
:form="'chartList'"
|
||||
@@ -88,7 +89,7 @@
|
||||
:id="'tableContainer'+chartIndex"
|
||||
:tableData="storedScreanTableData"
|
||||
:loading="loadingTable"
|
||||
:height="'calc(100% - 0px)'"
|
||||
:height="'calc(100% - 20px)'"
|
||||
:customTableTitle="tableTitle"
|
||||
:tableId="''"
|
||||
:projectAlertId="'tableContainer'+chartIndex"
|
||||
@@ -129,10 +130,28 @@
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTimeDialog" style="height: 28px;" @unitChange="chartUnitChange" id="alert-sub-chart"></pick-time>
|
||||
<pick-time :refresh-data-func="queryDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTimeDialog" style="height: 28px;" id="alert-sub-chart"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;height: 100%" v-loading="chartLoading">
|
||||
<chart v-if="resultType === 'matrix'" ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>
|
||||
<log-tab v-if="resultType === 'streamsFormat'" ref="logDetailScreen" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
|
||||
:visible.sync="dialogShowText"
|
||||
width="96%" @close="dialogShowText = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{$t('alert.config.trbShot')}}</span>
|
||||
</div>
|
||||
<div class="rich-text-screen-container" >
|
||||
<div id="chartScreenContainer" ref="chartScreenContainer" class="text-content" >
|
||||
<el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
|
||||
<div style="height: 100%;" v-html="dialogText" ></div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable&&!isLock"></span>
|
||||
@@ -296,7 +315,12 @@ export default {
|
||||
chartUnit: 5,
|
||||
deleteBox: { show: false, ids: '', remark: '', state: 2 },
|
||||
isPreview: false,
|
||||
ps: null
|
||||
ps: null,
|
||||
resultType: '',
|
||||
logData: [],
|
||||
chartLoading: false,
|
||||
dialogShowText: false,
|
||||
dialogText: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -389,7 +413,7 @@ export default {
|
||||
this.currentMsg = obj
|
||||
this.chartUnit = obj.alertRule.unit ? obj.alertRule.unit : 5
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
this.queryDate()
|
||||
})
|
||||
},
|
||||
dialogClose () {
|
||||
@@ -433,7 +457,7 @@ export default {
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
this.queryDate()
|
||||
})
|
||||
},
|
||||
messageDetail (row) {
|
||||
@@ -441,7 +465,7 @@ export default {
|
||||
this.currentMsg = { ...row, alertRule: { ...res.data } }
|
||||
this.graphShow = true
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
this.queryDate()
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -471,6 +495,7 @@ export default {
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
this.chartLoading = false
|
||||
try {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
@@ -891,7 +916,168 @@ export default {
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
this.getAlertList()
|
||||
},
|
||||
|
||||
queryDate () {
|
||||
this.chartLoading = true
|
||||
if (this.currentMsg.alertRule.type === 1) {
|
||||
this.resultType = 'matrix'
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
})
|
||||
} else if (this.currentMsg.alertRule.type === 2) {
|
||||
this.queryLogData(1000)
|
||||
}
|
||||
},
|
||||
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())
|
||||
const params = {
|
||||
logql: this.expressions,
|
||||
start: start,
|
||||
end: end,
|
||||
direction: descending ? 'backward' : 'forward',
|
||||
limit
|
||||
}
|
||||
axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
// 兼容ie11
|
||||
const blobObject = new Blob([res.data])
|
||||
window.navigator.msSaveOrOpenBlob(blobObject, 'log')
|
||||
} else {
|
||||
const url = URL.createObjectURL(new Blob([res.data]))
|
||||
const a = document.createElement('a')
|
||||
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
|
||||
a.href = url
|
||||
a.download = 'log'
|
||||
a.target = '_blank'
|
||||
a.click()
|
||||
a.remove() // 将a标签移除
|
||||
}
|
||||
}, error => {
|
||||
const $self = this
|
||||
const reader = new FileReader()
|
||||
reader.onload = function (event) {
|
||||
const responseText = reader.result
|
||||
const exception = JSON.parse(responseText)
|
||||
if (exception.message) {
|
||||
$self.$message.error(exception.message)
|
||||
} else {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
reader.readAsText(error.response.data)
|
||||
})
|
||||
},
|
||||
queryLogData (limit) { // log的chart和table是一个请求
|
||||
if (!limit) {
|
||||
limit = 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())
|
||||
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.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) {
|
||||
this.$refs.messageChart.startLoading()
|
||||
const queryExpression = []
|
||||
let series = []
|
||||
const legend = []
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item !== '') {
|
||||
queryExpression.push(item)
|
||||
}
|
||||
})
|
||||
this.logData.forEach((response, index) => {
|
||||
if (response.resultType === 'matrix') {
|
||||
const data = response.result
|
||||
if (!data || data.length < 1) {
|
||||
return
|
||||
}
|
||||
data.forEach((result, i) => {
|
||||
const seriesItem = {
|
||||
name: '',
|
||||
symbol: 'emptyCircle', // 去掉点
|
||||
symbolSize: [2, 2],
|
||||
showSymbol: false,
|
||||
smooth: 0.2, // 曲线变平滑
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: 'line'
|
||||
}
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
return [item[0] * 1000, item[1]]
|
||||
})
|
||||
let host = ''// up,
|
||||
let alias = ''
|
||||
if (result.metric && Object.keys(result.metric).length > 0) {
|
||||
const metric = Object.keys(result.metric)
|
||||
if (metric.__name__) {
|
||||
host = `${metric.__name__}{`// up,
|
||||
}
|
||||
metric.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${result.metric[tag]}",`
|
||||
}
|
||||
})
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1)
|
||||
}
|
||||
if (metric.__name__) {
|
||||
host += '}'
|
||||
}
|
||||
// 处理legend别名
|
||||
// alias = this.dealLegendAlias(host, this.chartData.elements[index].legend)
|
||||
if (!alias || alias === '') {
|
||||
alias = host
|
||||
}
|
||||
} else {
|
||||
alias = queryExpression[index]
|
||||
}
|
||||
seriesItem.name = alias + '-' + index
|
||||
series.push(seriesItem)
|
||||
legend.push({ name: seriesItem.name, alias: alias, isGray: false })
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.messageChart.setLegend(legend)
|
||||
this.$refs.messageChart.setRandomColors(series.length)
|
||||
if (!series.length) {
|
||||
series = ''
|
||||
}
|
||||
this.$refs.messageChart.setSeries(series)
|
||||
this.defaultChartVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.messageChart.endLoading()
|
||||
this.$refs.messageChart.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
showText (row) {
|
||||
this.dialogShowText = true
|
||||
this.dialogText = row.alertRule.trbShot
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 是否存在分页缓存
|
||||
|
||||
Reference in New Issue
Block a user