gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：dashboard支持定义变量页面搭建

Browse Source
This commit is contained in:
zyh
2022-06-24 17:54:23 +08:00
parent 71a4a9ecfa 17ccc04942
commit c447e540d4
13 changed files with 918 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

471
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -14,6 +14,261 @@
<el-form-item :label='$t("overall.name")' prop="name">
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
<el-input
v-model="editPanel.remark"
maxlength="256"
size="small" :rows="2"
show-word-limit
type="textarea">
</el-input>
</el-form-item>
<!-- chartShare -->
<el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
<el-select v-model="editPanel.param.chartShare" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option value="none" label="Default">
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
</el-option>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
</el-option>
<el-option value="tooltip" label="Share tooltip">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
</el-option>
</el-select>
<div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
</el-form-item>
<!-- variable -->
<div
class="variable-box"
>
<div class="form__sub-title" style="margin-bottom:0px">
<span>{{$t('dashboard.panel.variables')}}</span>
</div>
<el-row
:key="index"
v-for="(item,index) of editPanel.param.variables"
>
<div class="variable-title">
<span class="variable-title-left">
<i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
<span v-show="item.collapse">{{item.name}}</span>
</span>
<span style="display:flex;align-items:center">
<span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
<i v-if="item.show" class="nz-icon nz-icon-mimakejian"></i>
<i v-else class="nz-icon nz-icon-mimabukejian"></i>
</span>
<span @click="addVariable()" style="margin-right: 6px">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span @click="copyVariable(item)" style="margin-right: 6px">
<i class="nz-icon nz-icon-override"></i>
</span>
<span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px">
<i class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition name="el-zoom-in-top">
<div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
<!-- Name -->
<el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
:rules="[
{ required: true, message: $t('validate.required'), trigger: 'blur'},
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
{ validator: variableValidator,trigger: 'blur'},
]"
>
<el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
</el-form-item>
<!-- Type -->
<el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-select
v-model="item.type"
:placeholder="$t('overall.placeHolder')"
size="small"
@change="variableTypeChange(index)"
>
<el-option label="Query" value="query"></el-option>
<el-option label="Custom" value="custom"></el-option>
</el-select>
</el-form-item>
<!-- Custom values -->
<el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
<el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
</el-form-item>
<!-- Query expression -->
<el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.queryExpression')" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
<el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
</el-form-item>
<!-- Regex -->
<el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
<el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
</el-form-item>
<!-- Multi-value -->
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
<div slot="label">
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
<span>{{$t('dashboard.panel.multiTip')}}</span>
<span slot="reference">
{{$t('dashboard.panel.multi')}}
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</span>
</el-popover>
</div>
<el-select
v-model="item.multi"
size="small"
>
<el-option label="Enabled" :value="true"></el-option>
<el-option label="Disabled" :value="false"></el-option>
</el-select>
</el-form-item>
<!-- All option -->
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
<div slot="label">
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
<span>{{$t('dashboard.panel.allOptionTip')}}</span>
<span slot="reference">
{{$t('dashboard.panel.allOption')}}
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</span>
</el-popover>
</div>
<el-select
v-model="item.allOption"
size="small"
>
<el-option label="Enabled" :value="true"></el-option>
<el-option label="Disabled" :value="false"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</el-row>
<div @click="addVariable()" class="add-variable">{{$t('dashboard.panel.addVariable')}}</div>
</div>
<!-- Report -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.report')}}</span>
<el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
</div>
<div v-if="editPanel.param.report.enable">
<transition name="el-zoom-in-top" >
<div class="form-items--half-width-group">
<el-form-item
:label="$t('backup.start')"
class="form-item--half-width"
prop="param.report.schedule.stime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.stime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.endAt')"
class="form-item--half-width"
prop="param.report.schedule.etime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.etime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="param.report.range.unit">
<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-group>
</el-form-item>
<el-form-item
:label="$t('backup.schedule')"
prop="param.report.schedule.type"
class="form-tabs">
<el-tabs
v-model="editPanel.param.report.schedule.type"
type="card"
@tab-click="datasourceChange"
class="backups-info-tab"
>
<el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
<el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
<el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item
v-if="isShow === 2 || isShow === 3 ? true :false"
:label="$t('backup.RepeatEvery')"
prop="param.report.schedule.repeat"
class="form-day-week">
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 3 ? true :false">
<template slot="append">{{ $t("backup.week") }}</template>
</el-input>
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 2 ? true :false">
<template slot="append">{{ $t("backup.day") }}</template>
</el-input>
</el-form-item>
<el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
<el-checkbox-group
v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item,index) in week"
:label="index + 1"
:key="index"
>{{item}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="isShow === 4 ? true : false"
:label="$t('backup.DayOfMonth')"
prop="nums"
class="check-month_box"
id="day-of-month"
>
<el-checkbox-group v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item, index) in month"
:label="index === 31 ? -1 : index + 1"
:key="item"
>{{ item }}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
<el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</div>
</el-form>
</div>
</div>
@@ -32,6 +287,8 @@
<script>
import editRigthBox from '../mixin/editRigthBox'
import bus from '@/libs/bus'
import { arrLength, datePicker } from '@/components/common/js/validate'
export default {
name: 'panelBox',
props: {
@@ -44,14 +301,166 @@ export default {
return {
url: 'visual/panel',
editPanel: {},
isShow: 0,
userData: [],
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
'param.report.range.unit': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'param.report.schedule.type': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'param.report.schedule.repeat': [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
'param.report.schedule.stime': [{
required: true,
message: this.$t('validate.required')
}, { validator: datePicker, trigger: 'blur' }],
'param.report.receivers': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' },
{ validator: arrLength }
]
},
week: [
this.$t('week.Mon'),
this.$t('week.Tue'),
this.$t('week.Wed'),
this.$t('week.Thu'),
this.$t('week.Fri'),
this.$t('week.Sat'),
this.$t('week.Sun')
],
month: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
'Last'
],
dateFormatStr: localStorage.getItem('nz-default-dateFormat')
? localStorage.getItem('nz-default-dateFormat')
: 'YYYY-MM-DD HH:ss:mm'
}
},
created () {
this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
if (this.editPanel.id) {
this.isShow = Number(this.editPanel.param.report.schedule.type)
this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
if (this.editPanel.param.report.schedule.stime !== '') {
this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
} else {
this.editPanel.param.report.schedule.stime = ''
}
if (this.editPanel.param.report.schedule.etime !== '') {
this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
} else {
this.editPanel.param.report.schedule.etime = ''
}
}
},
mounted () {
this.getUserData()
},
methods: {
// 变量类型改变 清空数据
variableTypeChange (index) {
this.$set(this.editPanel.param.variables[index], 'customOptions', '')
this.$set(this.editPanel.param.variables[index], 'expression', '')
this.$set(this.editPanel.param.variables[index], 'regex', '')
},
// 变量名校验 防止重复
variableValidator (rule, value, callback) {
const nameArr = this.editPanel.param.variables.map(item => item.name)
const findIndex = nameArr.indexOf(value)
const lastIndex = nameArr.lastIndexOf(value)
setTimeout(() => {
if (findIndex !== lastIndex) {
callback(new Error(this.$t('error.nameDuplicate')))
} else {
callback()
}
}, 100)
},
// 展开 折叠变量
dropVariable (index, item) {
this.$set(this.editPanel.param.variables[index], 'collapse', !item.collapse)
this.$refs.form.clearValidate('param.variables.' + index + '.name')
this.$refs.form.clearValidate('param.variables.' + index + '.customOptions')
this.$refs.form.clearValidate('param.variables.' + index + '.expression')
},
// 显示 隐藏变量
showVariable (index, item) {
this.$set(this.editPanel.param.variables[index], 'show', !item.show)
},
// 添加变量
addVariable () {
const temp = {
show: true,
type: 'custom',
multi: false,
allOption: false
}
this.editPanel.param.variables.push(temp)
},
// 复制变量
copyVariable (item) {
const temp = JSON.parse(JSON.stringify(item))
temp.name = temp.name ? temp.name + '_copy' : ''
this.editPanel.param.variables.push(temp)
},
// 删除复制变量
removeVariable (index) {
this.editPanel.param.variables.splice(index, 1)
},
getUserData () {
return new Promise(resolve => {
this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
resolve()
})
})
},
datasourceChange (tab) {
this.isShow = Number(tab.name)
if (this.editPanel.param.report.schedule.nums) {
this.editPanel.param.report.schedule.nums = []
this.editPanel.param.report.schedule.repeat = 1
}
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
@@ -63,6 +472,40 @@ export default {
/* 保存 */
save () {
// 保存时把collapse属性删除 再传入后台
const variables = this.editPanel.param.variables.map((item) => {
const temp = JSON.parse(JSON.stringify(item))
delete temp.collapse
return temp
})
const params = {
id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name,
type: 'dashboard',
pid: 0,
remark: this.editPanel.remark,
param: {
report: {
enable: this.editPanel.param.report.enable,
range: {
type: 'previous',
interval: 1,
unit: this.editPanel.param.report.range.unit
},
schedule: {
type: Number(this.editPanel.param.report.schedule.type),
repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
nums: this.editPanel.param.report.schedule.nums,
stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
},
receivers: this.editPanel.param.report.receivers
},
chartShare: this.editPanel.param.chartShare,
variables
}
}
const editParam = JSON.parse(JSON.stringify(params))
if (this.prevent_opt.save) {
return
}
@@ -70,7 +513,7 @@ export default {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.editPanel.id) {
this.$put(this.url, this.editPanel).then(response => {
this.$put(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -80,7 +523,7 @@ export default {
}
})
} else {
this.$post(this.url, this.editPanel).then(response => {
this.$post(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -126,6 +569,30 @@ export default {
handler (n, o) {
this.isEdit = true
this.editPanel = JSON.parse(JSON.stringify(n))
// 如果是空数组 则添加一条变量数据
if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
const temp = [{
show: true,
type: 'custom',
multi: false,
allOption: false
}]
this.$set(this.editPanel.param, 'variables', temp)
}
}
},
'editPanel.param.report.schedule.stime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.stime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
},
'editPanel.param.report.schedule.etime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.etime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
}
}