NEZ-1989 feat：dashboard 展示页面增加 变量
This commit is contained in:
zhangyu
@@ -0,0 +1,43 @@
|
||||
.panel-variables-box{
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
.panel-variables-content{
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.variable-key{
|
||||
margin-right: 5px;
|
||||
border: 1px solid $--border-color-base;
|
||||
color: #33a2e5;
|
||||
padding: 3px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.choose-box {
|
||||
overflow: hidden;
|
||||
width: calc(100% - 7px);
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
border: 1px solid $--border-color-light;
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nz-icon-arrow-down6{
|
||||
font-size: 12px;
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
.choose-box-content{
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 24px);
|
||||
overflow: hidden;
|
||||
min-width: 24px;
|
||||
}
|
||||
}
|
||||
@@ -75,6 +75,7 @@
|
||||
@import './common/searchInput.scss';
|
||||
@import './common/timePicker.scss';
|
||||
@import './common/filterSearch/filterSearch.scss';
|
||||
@import './common/panel/panelVariables.scss';
|
||||
|
||||
@import './layout/container.scss';
|
||||
@import './layout/header.scss';
|
||||
|
||||
@@ -109,7 +109,8 @@ export default {
|
||||
showAllData: false, // 是否显示所有legend
|
||||
allDataLength: 0,
|
||||
severityData: this.$store.getters.severityData, // 告警级别的数据
|
||||
severityDataWeight: this.$store.getters.severityDataWeight
|
||||
severityDataWeight: this.$store.getters.severityDataWeight,
|
||||
myVariables: []
|
||||
// isExportData: false
|
||||
}
|
||||
},
|
||||
@@ -119,6 +120,9 @@ export default {
|
||||
},
|
||||
headerHPadding () { // 50px header + padding 主要用于展开的空group
|
||||
return this.$store.getters.getHeaderHPadding
|
||||
},
|
||||
variablesArr () {
|
||||
return this.$store.getters.getVariablesArr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -144,6 +148,8 @@ export default {
|
||||
},
|
||||
// 参数 isRefresh 标识是否是刷新操作
|
||||
getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
|
||||
this.chartData = []
|
||||
this.myVariables = []
|
||||
this.loading = true
|
||||
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
|
||||
let startTime = ''
|
||||
@@ -223,7 +229,8 @@ export default {
|
||||
// if (isChartPie(this.chartInfo.type)) {
|
||||
// query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
|
||||
// }
|
||||
query += `&query=${encodeURIComponent(element.expression)}`
|
||||
this.myVariables.push(this.variablesReplace(element.expression))
|
||||
query += `&query=${encodeURIComponent(this.variablesReplace(element.expression))}`
|
||||
return this.$get(query)
|
||||
})
|
||||
if (this.multipleTime) {
|
||||
@@ -519,6 +526,16 @@ export default {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
variablesReplace (expression) {
|
||||
let str = expression
|
||||
this.variablesArr.forEach(item => {
|
||||
const reg = new RegExp('\\$' + item.name, 'g') // 后续需要考虑 item,name 使用特殊字符的问题
|
||||
if (reg.test(expression)) {
|
||||
str = str.replace(reg, item.checked.map(label => label.replace(/\"/g, '\\"').replace(/\'/g, "\\'")).join('|'))
|
||||
}
|
||||
})
|
||||
return str
|
||||
},
|
||||
getHexagonFigureData () {
|
||||
return new Promise(resolve => {
|
||||
this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => {
|
||||
@@ -705,6 +722,23 @@ export default {
|
||||
handler (n) {
|
||||
// console.log(n)
|
||||
}
|
||||
},
|
||||
variablesArr: {
|
||||
handler (n) {
|
||||
const elements = this.chartInfo.elements || []
|
||||
const variables = elements.map((element) => {
|
||||
return this.variablesReplace(element.expression)
|
||||
})
|
||||
let flag = false
|
||||
this.myVariables.forEach((item, index) => {
|
||||
if (item !== variables[index]) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.chartInfo.loaded && this.getChartData(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
376
nezha-fronted/src/components/common/panel/panelVariables.vue
Normal file
376
nezha-fronted/src/components/common/panel/panelVariables.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div style="" class="panel-variables-box">
|
||||
<div v-for="(item,index) in labelArr" :key="index" v-if="item.show" class="panel-variables-content" style="display: flex">
|
||||
<div class="variable-key">{{item.name}}</div>
|
||||
<el-popover
|
||||
width="220"
|
||||
trigger="manual"
|
||||
v-model="item.visible"
|
||||
v-clickoutside="close"
|
||||
popper-class="no-style-class ping-popover"
|
||||
>
|
||||
<ul class="pop-list-wrap">
|
||||
<li class="el-dropdown-menu__item" v-if="item.allOption">
|
||||
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="(value)=>{checkAllChange(item)}">{{$t('overall.all')}}</el-checkbox>
|
||||
</li>
|
||||
<ul class="pop-list">
|
||||
<el-checkbox-group v-model="item.checked" @change="(value)=>{checkedChange(item,value)}" v-if="item.multi">
|
||||
<li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value">
|
||||
<el-checkbox :label="value.value" >{{value.label}}</el-checkbox>
|
||||
</li>
|
||||
</el-checkbox-group>
|
||||
<div v-else>
|
||||
<li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
|
||||
<span>{{value.label}} <i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0]"/></span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</ul>
|
||||
<div slot="reference" class="choose-box" @click="triggerVisible(item)">
|
||||
<div class="choose-box-content">
|
||||
{{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
|
||||
</div>
|
||||
<i class="nz-icon nz-icon-arrow-down6"/>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'panelVariables',
|
||||
props: {
|
||||
labelArrs: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
timeRange: Array
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
labelValue: {},
|
||||
labelArr: [],
|
||||
specialKey: [
|
||||
{ name: 'label_names', reg: /^label_names\(\)\s*$/ },
|
||||
{ name: 'label_values', reg: /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]*)\)\s*$/ },
|
||||
{ name: 'metrics', reg: /^metrics\((.+)\)\s*$/ },
|
||||
{ name: 'query_result', reg: /^query_result\((.+)\)\s*$/ }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
labelArrs: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.labelArr = this.labelArrs.map(item => {
|
||||
return {
|
||||
...item,
|
||||
checked: [],
|
||||
checkAll: false,
|
||||
visible: false,
|
||||
isIndeterminate: false
|
||||
}
|
||||
})
|
||||
this.getLabelData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLabelData () {
|
||||
const isRegExp = (v) => {
|
||||
let isReg
|
||||
try {
|
||||
isReg = eval(v) instanceof RegExp
|
||||
} catch (e) {
|
||||
isReg = false
|
||||
}
|
||||
return isReg
|
||||
}
|
||||
const arrPromise = []
|
||||
this.labelValue = {}
|
||||
this.labelArr.forEach((item, index) => {
|
||||
this.labelValue[item.name] = []
|
||||
if (item.type === 'custom') {
|
||||
arrPromise.push('')
|
||||
const arr = item.customOptions.split(',')
|
||||
arr.forEach(key => {
|
||||
key = key.trim()
|
||||
const arr1 = key.split(':')
|
||||
if (arr1.length > 1) {
|
||||
this.labelValue[item.name].push({
|
||||
label: arr1[0],
|
||||
value: arr1.splice(1, arr1.length - 1).join(':')
|
||||
})
|
||||
} else if (arr1.length === 1) {
|
||||
this.labelValue[item.name].push({
|
||||
label: arr1[0],
|
||||
value: arr1[0]
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (item.type === 'query') {
|
||||
let match = item.expression.match(this.specialKey[0].reg)
|
||||
if (match) {
|
||||
arrPromise.push(this.labelNamesQuery())
|
||||
return
|
||||
}
|
||||
match = item.expression.match(this.specialKey[1].reg)
|
||||
if (match) {
|
||||
if (match[1]) {
|
||||
arrPromise.push(this.labelValuesQuery(match[2], match[1]))
|
||||
return
|
||||
} else {
|
||||
arrPromise.push(this.labelValuesQuery(match[2]))
|
||||
return
|
||||
}
|
||||
}
|
||||
match = item.expression.match(this.specialKey[2].reg)
|
||||
console.log(match)
|
||||
if (match) {
|
||||
arrPromise.push(this.metricNameQuery(match[1]))
|
||||
return
|
||||
}
|
||||
match = item.expression.match(this.specialKey[3].reg)
|
||||
if (match) {
|
||||
arrPromise.push(this.queryResultQuery(match[1]))
|
||||
return
|
||||
}
|
||||
arrPromise.push(this.metricNameAndLabelsQuery(item.expression))
|
||||
}
|
||||
})
|
||||
Promise.all(arrPromise).then((res) => {
|
||||
console.log(res)
|
||||
res.forEach((response, index) => {
|
||||
if (response) {
|
||||
if (this.labelArr[index].regex) {
|
||||
const reg = isRegExp(this.labelArr[index].regex) ? eval(this.labelArr[index].regex) : new RegExp(this.labelArr[index].regex, 'g')
|
||||
let arr = []
|
||||
response.forEach(label => {
|
||||
// console.log(reg.test(label.label))
|
||||
if (reg.test(label.label)) {
|
||||
const str = label.label.match(reg)
|
||||
if (str.groups) {
|
||||
arr.push({
|
||||
label: str.groups.text,
|
||||
value: str.groups.value || str.groups.text
|
||||
})
|
||||
} else {
|
||||
arr.push({
|
||||
label: label.label,
|
||||
value: label.label
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
arr = this.$loadsh.uniqBy(arr, 'value')
|
||||
// arr = this.$loadsh.uniqBy(arr, 'label')
|
||||
arr.filter(item => item.value)
|
||||
response = arr
|
||||
}
|
||||
this.labelValue[this.labelArr[index].name] = response
|
||||
}
|
||||
})
|
||||
this.setLabelArrDefault()
|
||||
})
|
||||
},
|
||||
labelNamesQuery () {
|
||||
const params = {
|
||||
start: this.momentStrToTimestamp(this.timeRange[0]) / 1000,
|
||||
end: this.momentStrToTimestamp(this.timeRange[1]) / 1000
|
||||
}
|
||||
|
||||
const url = '/prom/api/v1/labels'
|
||||
return new Promise(resolve => {
|
||||
this.$get(url, params).then(res => {
|
||||
let arr = res.data.map(item => {
|
||||
return {
|
||||
value: item,
|
||||
label: item
|
||||
}
|
||||
})
|
||||
arr = this.$loadsh.uniqBy(arr, 'value')
|
||||
arr.filter(item => item.value)
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
},
|
||||
labelValuesQuery (label, metric) {
|
||||
const start = this.momentStrToTimestamp(this.timeRange[0])
|
||||
const end = this.momentStrToTimestamp(this.timeRange[1])
|
||||
let url = ''
|
||||
if (!metric) {
|
||||
const params = {
|
||||
start: start / 1000,
|
||||
end: end / 1000
|
||||
}
|
||||
// return label values globally
|
||||
url = `/prom/api/v1/label/${label}/values`
|
||||
return new Promise(resolve => {
|
||||
this.$get(url, params).then(res => {
|
||||
let arr = res.data.map(item => {
|
||||
return {
|
||||
value: item,
|
||||
label: item
|
||||
}
|
||||
})
|
||||
arr = this.$loadsh.uniqBy(arr, 'value')
|
||||
arr.filter(item => item.value)
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
const params = {
|
||||
'match[]': metric,
|
||||
start: start / 1000,
|
||||
end: end / 1000
|
||||
}
|
||||
url = '/prom/api/v1/series'
|
||||
return new Promise(resolve => {
|
||||
this.$get(url, params).then(res => {
|
||||
let arr = res.data.map(item => {
|
||||
return {
|
||||
value: item[label],
|
||||
label: item[label]
|
||||
}
|
||||
})
|
||||
arr = this.$loadsh.uniqBy(arr, 'value')
|
||||
arr.filter(item => item.value)
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
metricNameQuery (metricFilterPattern) {
|
||||
const start = this.momentStrToTimestamp(this.timeRange[0])
|
||||
const end = this.momentStrToTimestamp(this.timeRange[1])
|
||||
const params = {
|
||||
start: start / 1000,
|
||||
end: end / 1000
|
||||
}
|
||||
const url = '/prom/api/v1/label/__name__/values'
|
||||
return new Promise(resolve => {
|
||||
this.$get(url, params).then(res => {
|
||||
let arr = res.data
|
||||
arr.filter((metricName) => {
|
||||
const r = new RegExp(metricFilterPattern)
|
||||
return r.test(metricName)
|
||||
})
|
||||
arr = arr.map((matchedMetricName) => {
|
||||
return {
|
||||
value: matchedMetricName,
|
||||
label: matchedMetricName,
|
||||
expandable: true
|
||||
}
|
||||
})
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
},
|
||||
queryResultQuery (query) {
|
||||
const end = this.momentStrToTimestamp(this.timeRange[1]) / 1000
|
||||
const url = '/prom/api/v1/query'
|
||||
return new Promise(resolve => {
|
||||
const params = {
|
||||
end,
|
||||
query: encodeURIComponent(query)
|
||||
}
|
||||
this.$get(url, params).then(res => {
|
||||
console.log(res)
|
||||
const arr = res.data.result.map((metricData) => {
|
||||
let text = metricData.metric.__name__ || ''
|
||||
delete metricData.metric.__name__
|
||||
text += '{'
|
||||
const arr = []
|
||||
Object.keys(metricData.metric).forEach(key => {
|
||||
arr.push(key + '="' + metricData.metric[key] + '"')
|
||||
})
|
||||
text += arr.join(',')
|
||||
text += '}'
|
||||
text += ' ' + metricData.value[1] + ' ' + metricData.value[0] * 1000
|
||||
return {
|
||||
label: text,
|
||||
value: text,
|
||||
expandable: true
|
||||
}
|
||||
})
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
},
|
||||
metricNameAndLabelsQuery (query) {
|
||||
const start = this.momentStrToTimestamp(this.timeRange[0])
|
||||
const end = this.momentStrToTimestamp(this.timeRange[1])
|
||||
const params = {
|
||||
'match[]': query,
|
||||
start: start / 1000,
|
||||
end: end / 1000
|
||||
}
|
||||
const url = '/prom/api/v1/series'
|
||||
return new Promise(resolve => {
|
||||
this.$get(url, params).then(res => {
|
||||
const arr = res.data.map(metric => {
|
||||
return {
|
||||
label: this.getOriginalMetricName(metric),
|
||||
value: this.getOriginalMetricName(metric),
|
||||
expandable: true
|
||||
}
|
||||
})
|
||||
resolve(arr)
|
||||
})
|
||||
})
|
||||
},
|
||||
getOriginalMetricName (labelData) {
|
||||
const metricName = labelData.__name__ || ''
|
||||
delete labelData.__name__
|
||||
const labelPart = Object.entries(labelData)
|
||||
.map((label) => `${label[0]}="${label[1]}"`)
|
||||
.join(',')
|
||||
return `${metricName}{${labelPart}}`
|
||||
},
|
||||
setLabelArrDefault () {
|
||||
this.labelArr.forEach((item, index) => {
|
||||
item.checked = this.labelValue[item.name][0] ? [this.labelValue[item.name][0].value] : []
|
||||
})
|
||||
this.$store.dispatch('dispatchVariablesArr', this.labelArr)
|
||||
},
|
||||
checkAllChange (item) {
|
||||
console.log(item)
|
||||
const allValue = this.labelValue[item.name].map(value => {
|
||||
return value.value
|
||||
})
|
||||
item.checked = item.checkAll ? allValue : []
|
||||
item.isIndeterminate = false
|
||||
this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
|
||||
},
|
||||
checkedChange (item, value) {
|
||||
const checkedCount = value.length
|
||||
item.checkAll = checkedCount === this.labelValue[item.name].length
|
||||
item.isIndeterminate = checkedCount > 0 && checkedCount < this.labelValue[item.name].length
|
||||
this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
|
||||
},
|
||||
selectLabelValue (item, value) {
|
||||
item.checked = [value.value]
|
||||
this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
|
||||
},
|
||||
triggerVisible (item) {
|
||||
this.$nextTick(() => {
|
||||
item.visible = !item.visible
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.labelArr.forEach((item) => {
|
||||
item.visible = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -185,7 +185,7 @@
|
||||
<transition name="el-zoom-in-top" >
|
||||
<div class="form-items--half-width-group">
|
||||
<el-form-item
|
||||
:label="$t('backup.start')"
|
||||
:label="$t('overall.startTime')"
|
||||
class="form-item--half-width"
|
||||
prop="param.report.schedule.stime"
|
||||
>
|
||||
@@ -200,7 +200,7 @@
|
||||
</my-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('dashboard.panel.endAt')"
|
||||
:label="$t('overall.endTime')"
|
||||
class="form-item--half-width"
|
||||
prop="param.report.schedule.etime"
|
||||
>
|
||||
@@ -218,7 +218,7 @@
|
||||
<el-radio-group v-model="editPanel.param.report.range.unit" size="small">
|
||||
<el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
|
||||
<el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
|
||||
<el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
|
||||
<el-radio-button label="month">{{ $t("config.menus.parent") }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
|
||||
@@ -252,7 +252,6 @@ export default {
|
||||
return this.regNum.test(val)
|
||||
},
|
||||
addCabinet (params) {
|
||||
console.log('addCabinet')
|
||||
if (params) {
|
||||
this.cabinet.idcId = params.dcid
|
||||
}
|
||||
@@ -270,7 +269,6 @@ export default {
|
||||
})
|
||||
},
|
||||
closeRightBox (refresh) {
|
||||
console.log('closeRightBox')
|
||||
this.rightBox.show = false
|
||||
this.cabinetBoxShow = false
|
||||
this.$store.dispatch('addCabinet', { dcid: '', cabinetBoxShow: false })
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<div id="tableList" class="table-list" style='overflow-y: unset'>
|
||||
<div class="table-list-box">
|
||||
<div id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading" ref="dashboardScrollbar" style='overflow-y: auto'>
|
||||
<!-- <panel-variables :arr="this.showPanel.variables"></panel-variables>-->
|
||||
<panel-variables :labelArrs="variables" :time-range="searchTime"></panel-variables>
|
||||
<chart-list
|
||||
ref="chartList"
|
||||
name="panel"
|
||||
@@ -159,6 +159,7 @@ import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
|
||||
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
|
||||
import * as echarts from 'echarts'
|
||||
import panelVariables from '@/components/common/panel/panelVariables'
|
||||
// import FileSaver from 'file-saver'
|
||||
// import chartData from './testData'
|
||||
export default {
|
||||
@@ -296,7 +297,8 @@ export default {
|
||||
// 导出html 以及 pdf的弹窗
|
||||
exportBoxShow: false,
|
||||
// 查看模式
|
||||
mode: ''
|
||||
mode: '',
|
||||
variables: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -305,7 +307,8 @@ export default {
|
||||
topToolMoreOptions,
|
||||
selectDashboard,
|
||||
chartTempBox,
|
||||
chartRightBox
|
||||
chartRightBox,
|
||||
panelVariables
|
||||
},
|
||||
computed: {
|
||||
chartRightBoxShow () {
|
||||
@@ -343,6 +346,17 @@ export default {
|
||||
this.filter.searchName = ''
|
||||
// this.$refs.searchInput.select();
|
||||
this.showPanel = val
|
||||
this.showPanel.param = {
|
||||
report:
|
||||
{ enable: true, range: { type: 'previous', interval: 1, unit: 'day' }, schedule: { type: 2, repeat: 1, nums: [], stime: '2022-06-07 15:00:00', etime: '2022-06-19 15:00:00' }, receivers: [1] },
|
||||
chartShare: 'none',
|
||||
variables: [
|
||||
{ show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' }
|
||||
]
|
||||
}
|
||||
this.showPanel.type = 'dashboard'
|
||||
this.filter.panelId = this.showPanel.id
|
||||
this.panelId = this.showPanel.id
|
||||
@@ -395,7 +409,7 @@ export default {
|
||||
this.$get('visual/panel?ids=' + u.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.panel = res.data.list[0]
|
||||
if (!this.panel.param.report) {
|
||||
if (!this.$loadsh.get(this.panel, 'param.report', '')) {
|
||||
this.panel = {
|
||||
...this.panel,
|
||||
param: {
|
||||
@@ -783,8 +797,64 @@ export default {
|
||||
report:
|
||||
{ enable: true, range: { type: 'previous', interval: 1, unit: 'day' }, schedule: { type: 2, repeat: 1, nums: [], stime: '2022-06-07 15:00:00', etime: '2022-06-19 15:00:00' }, receivers: [1] },
|
||||
chartShare: 'none',
|
||||
variables: [{ show: true, type: 'custom', multi: true, allOption: true, name: 'a', customOptions: 'z:1', expression: '', regex: '' }]
|
||||
variables: [
|
||||
{ show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' }
|
||||
]
|
||||
}
|
||||
this.variables = [
|
||||
{ show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{ show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
|
||||
{
|
||||
name: 'bbb',
|
||||
type: 'query',
|
||||
multi: false,
|
||||
allOption: true,
|
||||
expression: 'label_names()',
|
||||
regex: '/a\.*/',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'ccc',
|
||||
type: 'query',
|
||||
multi: false,
|
||||
allOption: true,
|
||||
expression: 'label_values(up, asset)',
|
||||
regex: '',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'ddd',
|
||||
type: 'query',
|
||||
multi: true,
|
||||
allOption: true,
|
||||
expression: 'label_values(asset)',
|
||||
regex: '',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'eeee',
|
||||
type: 'query',
|
||||
multi: false,
|
||||
allOption: true,
|
||||
expression: 'label_values(up, endpoint)',
|
||||
regex: '/.*-(?<text>.*)-(?<value>.*)-.*/',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'fff',
|
||||
type: 'query',
|
||||
multi: false,
|
||||
allOption: true,
|
||||
expression: 'query_result(node_filefd_allocated{module="OLAP-Node-Exporter"})',
|
||||
regex: '/asset="(?<text>[^"]+)\.*\asset_id="(?<value>[^"]+)/',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}).catch((error) => {
|
||||
// console.log('error................'+JSON.stringify(error));
|
||||
if (error) {
|
||||
|
||||
@@ -24,7 +24,8 @@ const panel = {
|
||||
// timeSeries类型图表联动
|
||||
isConnect: 'none',
|
||||
// 当前鼠标所在的图表id
|
||||
currentMousemove: 0
|
||||
currentMousemove: 0,
|
||||
variablesArr: []
|
||||
},
|
||||
mutations: {
|
||||
setShowRightBox (state, flag) {
|
||||
@@ -89,6 +90,9 @@ const panel = {
|
||||
// 设置当前鼠标所在的图表id (timeSeries类型图表联动)
|
||||
setCurrentMousemove (state, value) {
|
||||
state.currentMousemove = value
|
||||
},
|
||||
setVariablesArr (state, value) {
|
||||
state.variablesArr = value
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@@ -139,6 +143,9 @@ const panel = {
|
||||
},
|
||||
getAddCabinetBoxParams (state) {
|
||||
return state.addCabinetBoxParams
|
||||
},
|
||||
getVariablesArr (state) {
|
||||
return state.variablesArr
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@@ -177,6 +184,9 @@ const panel = {
|
||||
showTopology (store, chartInfo) {
|
||||
store.commit('setTopologyChartInfo', chartInfo)
|
||||
store.commit('setTopologyShow', true)
|
||||
},
|
||||
dispatchVariablesArr (store, variablesArr) {
|
||||
store.commit('setVariablesArr', variablesArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user