feat：module上滑添加 message tab
This commit is contained in:
zhangyu
@@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div class="full-width-height">
|
||||
<nz-bottom-data-list
|
||||
:api="url"
|
||||
:custom-table-title.sync="tools.customTableTitle"
|
||||
:layout="['searchInput', 'elementSet']"
|
||||
:search-msg="searchMsg"
|
||||
:tabs="tabs"
|
||||
:targetTab="targetTab"
|
||||
@changeTab="changeTab"
|
||||
class="full-width-height"
|
||||
>
|
||||
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
|
||||
<template v-slot>
|
||||
<alertMessageTable
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:now-time="nowTime"
|
||||
:table-data="tableData"
|
||||
@del="del"
|
||||
@edit="edit"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
|
||||
@toDelete="toDeleteMessage"
|
||||
></alertMessageTable>
|
||||
</template>
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-bottom-data-list>
|
||||
<transition name="right-box">
|
||||
<edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import subDataListMixin from '@/components/common/mixin/subDataList'
|
||||
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
||||
import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
|
||||
import axios from 'axios'
|
||||
import bus from '@/libs/bus'
|
||||
import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
|
||||
// import {getTime} from "@/components/common/js/tools";
|
||||
// import chartDataFormat from "@/components/charts/chartDataFormat";
|
||||
|
||||
export default {
|
||||
name: 'alertMessageTab',
|
||||
mixins: [dataListMixin, subDataListMixin],
|
||||
components: {
|
||||
nzBottomDataList,
|
||||
EditEndpointBoxNew,
|
||||
alertMessageTable
|
||||
},
|
||||
props: {
|
||||
from: String
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
console.log(n)
|
||||
if (n) {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: 'alert/message',
|
||||
tableId: 'alertMessageModule', // 需要分页的table的id，用于记录每页数量
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 2,
|
||||
name: this.$t('alert.alertName'),
|
||||
type: 'input',
|
||||
label: 'alertName',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 20,
|
||||
name: this.$t('project.project.project'),
|
||||
type: 'project',
|
||||
label: 'project',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 21,
|
||||
name: this.$t('project.module.module'),
|
||||
type: 'module',
|
||||
label: 'module',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 22,
|
||||
name: this.$t('project.endpoint.endpoint'),
|
||||
type: 'input',
|
||||
label: 'endpointId',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 4,
|
||||
name: this.$t('alert.severity'),
|
||||
type: 'selectString',
|
||||
label: 'severity',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 11,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 12,
|
||||
name: this.$t('alert.list.state'),
|
||||
type: 'select',
|
||||
label: 'alertMessageState',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
name: this.$t('alert.list.id'),
|
||||
type: 'id',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 27,
|
||||
name: this.$t('config.dc.dc'),
|
||||
type: 'idc',
|
||||
label: 'idcId',
|
||||
disabled: false,
|
||||
readonly: true
|
||||
}]
|
||||
},
|
||||
rightBox: {
|
||||
editShow: false,
|
||||
show: false
|
||||
},
|
||||
fromBottom: true,
|
||||
// 导出相关
|
||||
importBox: { show: false, title: this.$t('overall.exportExcel') },
|
||||
deleteBox: { show: false, ids: '', remark: '', state: 2 },
|
||||
// 详情相关
|
||||
graphShow: false,
|
||||
chartDatas: [],
|
||||
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
|
||||
legend: [],
|
||||
searchTime: [],
|
||||
searchTimeSelect: bus.getTimezontDateRange(),
|
||||
currentMsg: {},
|
||||
chartUnit: 5,
|
||||
requestIndex: 0,
|
||||
viewAssetState: false,
|
||||
nowTime: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
labelsSort (obj) {
|
||||
const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
|
||||
const labels = JSON.parse(JSON.stringify(obj))
|
||||
const result = []
|
||||
for (const key of buildIn) {
|
||||
if (key in labels) {
|
||||
result.push({ label: key, value: labels[key] })
|
||||
delete labels[key]
|
||||
}
|
||||
}
|
||||
Object.keys(labels).sort().forEach(key => {
|
||||
result.push({ label: key, value: labels[key] })
|
||||
})
|
||||
return result
|
||||
},
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
queryChartDate () {
|
||||
const $temp = this
|
||||
const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
|
||||
const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
|
||||
this.searchTime = [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 = []
|
||||
const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
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: alias,
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
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()
|
||||
})
|
||||
} catch (err) {
|
||||
this.$message.error(err)
|
||||
this.$refs.messageChart.endLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getTableData () {
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
if (this.searchTime && this.searchTime.length > 1) {
|
||||
this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTime[0]))
|
||||
this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTime[1]))
|
||||
} else {
|
||||
delete this.searchLabel.startAt
|
||||
delete this.searchLabel.endAt
|
||||
}
|
||||
this.tools.loading = true
|
||||
this.searchLabel.moduleIds = this.obj.id
|
||||
this.$get(this.url, this.searchLabel).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code == 200) {
|
||||
this.nowTime = this.utcTimeToTimezoneStr(response.time)
|
||||
this.tableData = response.data.list
|
||||
const axiosAll = []
|
||||
this.$nextTick(() => {
|
||||
this.tableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels)
|
||||
if (!this.isBuildIn(item.alertRule)) {
|
||||
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.tableData[index].current = current
|
||||
})
|
||||
this.$set(this.tableData, [...this.tableData])
|
||||
})
|
||||
})
|
||||
this.deleteBox.ids = ''
|
||||
this.pageObj.total = response.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
promQueryParamConvert (obj) {
|
||||
let r = '(' + obj.alertRule.expr + ')'
|
||||
let intoLabels = false
|
||||
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') {
|
||||
intoLabels = true
|
||||
group += k
|
||||
group += '='
|
||||
group += ("'" + obj.labels[k] + "',")
|
||||
by += k
|
||||
by += ','
|
||||
}
|
||||
}
|
||||
if (intoLabels) {
|
||||
group = group.substring(0, group.length - 1)
|
||||
by = by.substring(0, by.length - 1)
|
||||
group += '})'
|
||||
by += ')'
|
||||
return group + by + ')'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}())
|
||||
}
|
||||
return r
|
||||
},
|
||||
// asset弹框控制
|
||||
tabControl (data) {
|
||||
if (data === 'close') {
|
||||
this.viewAssetState = false
|
||||
this.$refs.assetEditUnit.tabView = false
|
||||
}
|
||||
},
|
||||
openedDialog () {
|
||||
this.$refs.remarkForm.clearValidate()
|
||||
},
|
||||
openDelMessageBox () {
|
||||
if (this.batchDeleteObjs.length < 1) return
|
||||
if (this.$refs.alertMessageTable) {
|
||||
this.$refs.alertMessageTable.toDeleteMessage(false)
|
||||
}
|
||||
},
|
||||
toDeleteMessage (obj) {
|
||||
if (obj) {
|
||||
this.deleteBox.ids = obj.id + ''
|
||||
}
|
||||
this.deleteBox.show = true
|
||||
},
|
||||
deleteMessage () {
|
||||
this.$refs.remarkForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.$put(this.url, this.deleteBox).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||||
this.deleteBox.ids = []
|
||||
this.deleteBox.show = false
|
||||
this.getTableData()
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
selectChange (s) {
|
||||
const ids = []
|
||||
this.deleteBox.ids = ''
|
||||
s.forEach(item => {
|
||||
ids.push(item.id)
|
||||
})
|
||||
this.deleteBox.ids = ids.join(',')
|
||||
},
|
||||
showExportDialog () {
|
||||
this.importBox.show = true
|
||||
},
|
||||
closeDialog () {
|
||||
this.importBox.show = false
|
||||
this.deleteBox.show = false
|
||||
},
|
||||
dialogClose () {
|
||||
this.graphShow = false
|
||||
},
|
||||
exportCur () {
|
||||
const searchLabel = Object.assign({}, this.searchLabel)
|
||||
this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
|
||||
this.exportExcel(searchLabel)
|
||||
this.closeDialog()
|
||||
},
|
||||
exportAll () {
|
||||
const temp = JSON.parse(JSON.stringify(this.searchLabel))
|
||||
temp.pageSize = -1
|
||||
this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
|
||||
this.exportExcel(temp)
|
||||
this.closeDialog()
|
||||
},
|
||||
getTimeString () {
|
||||
const split = '-'
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = this.formatNum(date.getMonth() + 1)
|
||||
const day = this.formatNum(date.getDate())
|
||||
const hours = this.formatNum(date.getHours())
|
||||
const minutes = this.formatNum(date.getMinutes())
|
||||
const seconds = this.formatNum(date.getSeconds())
|
||||
return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
|
||||
},
|
||||
formatNum (num) {
|
||||
return num > 9 ? num : '0' + num
|
||||
},
|
||||
exportExcel (params) {
|
||||
for (const item in params) {
|
||||
if (params[item]) {
|
||||
if (item === 'alertMessageState') {
|
||||
this.$set(params, 'state', params[item])
|
||||
} else {
|
||||
this.$set(params, item, params[item])
|
||||
}
|
||||
}
|
||||
}
|
||||
const temp = this
|
||||
if (!params) {
|
||||
params = temp.params
|
||||
}
|
||||
axios.get('alert/message/export', { responseType: 'blob', params: params }).then(res => {
|
||||
const fileName = 'alert-message-' + temp.getTimeString() + '.xlsx'
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
// 兼容ie11
|
||||
const blobObject = new Blob([res.data])
|
||||
window.navigator.msSaveOrOpenBlob(blobObject, fileName)
|
||||
} else {
|
||||
const url = URL.createObjectURL(new Blob([res.data]))
|
||||
const a = document.createElement('a')
|
||||
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
|
||||
a.href = url
|
||||
a.download = fileName
|
||||
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)
|
||||
})
|
||||
},
|
||||
showTagDetail (data, key) {
|
||||
let open = false
|
||||
if (key == 'asset' || key == 'project' || key == 'module' || key == 'endpoint' || key == 'datacenter') {
|
||||
open = true
|
||||
}
|
||||
if (open) {
|
||||
const labelList = []
|
||||
const detailList = []
|
||||
for (const item in data) {
|
||||
if (item == 'asset' || item == 'project' || item == 'module' || item == 'endpoint' || item == 'dc') {
|
||||
labelList.push(item)
|
||||
detailList.push(data[item])
|
||||
}
|
||||
}
|
||||
this.bottomBox.showSubList = true
|
||||
this.tabList = labelList
|
||||
}
|
||||
},
|
||||
search (searchObj) {
|
||||
let orderBy = ''
|
||||
if (this.searchLabel.orderBy) {
|
||||
orderBy = this.searchLabel.orderBy
|
||||
}
|
||||
this.searchLabel = {}
|
||||
this.pageObj.pageNo = 1
|
||||
for (const item in searchObj) {
|
||||
if (searchObj[item]) {
|
||||
if (item == 'alertMessageState') {
|
||||
this.$set(this.searchLabel, 'state', searchObj[item])
|
||||
} else {
|
||||
this.$set(this.searchLabel, item, searchObj[item])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (orderBy) {
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
}
|
||||
this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0
|
||||
this.getTableData()
|
||||
},
|
||||
fillProject (module) {
|
||||
this.$get('project', { id: module.projectId }).then(response => {
|
||||
if (response.code == 200) {
|
||||
module.project = response.data.list[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
closeViews () {
|
||||
this.$refs.alertConfigBox.show(false, false)
|
||||
this.$refs.projectBox.show(false, false)
|
||||
this.$refs.moduleBox.show(false, false)
|
||||
this.viewAssetState = false
|
||||
},
|
||||
// 数据排序
|
||||
tableDataSort (item) {
|
||||
let orderBy = ''
|
||||
if (item.order === 'ascending') {
|
||||
orderBy = item.prop
|
||||
}
|
||||
if (item.order === 'descending') {
|
||||
orderBy = '-' + item.prop
|
||||
}
|
||||
this.pageObj.orderBy = orderBy
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.full-width-height{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user