feat：bottom alertMessage 替换图表组件
This commit is contained in:
zhangyu
@@ -120,37 +120,6 @@
|
||||
@showFullscreen="showFullscreen"
|
||||
></panel-chart>
|
||||
</el-dialog>
|
||||
<!-- <el-dialog id="viewGraphDialog"-->
|
||||
<!-- :modal-append-to-body='false'-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- :title="$t('overall.detail')"-->
|
||||
<!-- :visible.sync="graphShow"-->
|
||||
<!-- class="line-chart-block-modal nz-dialog endpoint-dialog"-->
|
||||
<!-- width="90%"-->
|
||||
<!-- @close="dialogClose">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-if="isError"-->
|
||||
<!-- placement="top-start"-->
|
||||
<!-- :close-delay=10-->
|
||||
<!-- trigger="hover"-->
|
||||
<!-- popper-class="chart-error-popper">-->
|
||||
<!-- <div >{{errorContent}}</div>-->
|
||||
<!-- <span slot="reference" class="panel-info-corner panel-info-corner--error">-->
|
||||
<!-- <i class="nz-icon nz-icon-warning fa-model" ></i>-->
|
||||
<!-- <span class="panel-info-corner-inner"></span>-->
|
||||
<!-- </span>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- <div slot="title">-->
|
||||
<!-- {{$t("project.endpoint.dialogTitle")}}-->
|
||||
<!-- <div class="float-right panel-calendar dialog-tool" style="display: flex">-->
|
||||
<!-- <pick-time v-model="searchTimeDialog" :refresh-data-func="queryDate" :use-chart-unit="false" :use-refresh="false" style="height: 28px;"></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"
|
||||
@@ -614,126 +583,6 @@ export default {
|
||||
this.showFullscreen(true, chartInfo)
|
||||
}
|
||||
},
|
||||
queryChartDate () {
|
||||
const $temp = this
|
||||
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.searchTimeDialog = [start, end]
|
||||
const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
|
||||
let step = '15s'
|
||||
if (timeDiff < 1) {
|
||||
step = '15s'
|
||||
} else if (timeDiff < 7) {
|
||||
step = '5m'
|
||||
} else if (timeDiff < 30) {
|
||||
step = '10m'
|
||||
} else {
|
||||
step = '30m'
|
||||
}
|
||||
if (this.$refs.messageChart) {
|
||||
this.$refs.messageChart.startLoading()
|
||||
const axiosArr = []
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))))
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
this.chartLoading = false
|
||||
try {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status === 200) {
|
||||
if (response.data.status === 'success') {
|
||||
const queryData = response.data.data.result[0]
|
||||
if (queryData) {
|
||||
const chartData = {
|
||||
type: 'line',
|
||||
symbol: 'none', // 去掉点
|
||||
smooth: 0.2, // 曲线变平滑
|
||||
name: '',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['circle', 'circle'],
|
||||
label: {
|
||||
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
|
||||
formatter (params) {
|
||||
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#d64f40',
|
||||
width: 2,
|
||||
type: 'dotted'
|
||||
},
|
||||
data: [{
|
||||
yAxis: Number(this.currentMsg.alertRule.threshold)
|
||||
}]
|
||||
},
|
||||
markArea: {
|
||||
itemStyle: {
|
||||
color: '#d64f40',
|
||||
opacity: 0.1
|
||||
},
|
||||
data: [this.returnMarkArea()]
|
||||
}
|
||||
}
|
||||
if (this.currentMsg.alertRule.operator == '==' || this.currentMsg.alertRule.operator == '!=') {
|
||||
delete chartData.markArea
|
||||
}
|
||||
let alias = chartData.name
|
||||
chartData.name += '{'
|
||||
alias += '{'
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
const label = item
|
||||
const value = queryData.metric[label]
|
||||
chartData.name += label + "='" + value + "',"
|
||||
})
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
|
||||
chartData.name += '}'
|
||||
const legend = {
|
||||
name: chartData.name,
|
||||
alias: chartData.name,
|
||||
isGray: false
|
||||
}
|
||||
this.legend.push(legend)
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)]
|
||||
})
|
||||
this.chartDatas.push(chartData)
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
}
|
||||
} else {
|
||||
this.$refs.messageChart.endLoading()
|
||||
this.chartLoading = false
|
||||
this.isError = true
|
||||
if (response.msg) {
|
||||
this.errorContent = response.msg
|
||||
} else if (response.error) {
|
||||
this.errorContent = response.error
|
||||
} else {
|
||||
this.errorContent = response
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$refs.messageChart.setRandomColors(this.chartDatas.length)
|
||||
this.$refs.messageChart.setLegend(this.legend)
|
||||
this.$refs.messageChart.setSeries(this.chartDatas)
|
||||
this.$refs.messageChart.endLoading()
|
||||
this.$refs.messageChart.resize()
|
||||
})
|
||||
} catch (err) {
|
||||
// this.$message.error(err)
|
||||
this.$refs.messageChart.endLoading()
|
||||
this.chartLoading = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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())
|
||||
@@ -774,33 +623,6 @@ export default {
|
||||
reader.readAsText(error.response.data)
|
||||
})
|
||||
},
|
||||
queryLogData (limit) { // log的chart和table是一个请求
|
||||
if (!limit) {
|
||||
limit = 100
|
||||
}
|
||||
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=' + encodeURIComponent(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))).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) {
|
||||
|
||||
Reference in New Issue
Block a user