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

NEZ-2023 feat：chart支持根据variable值显示隐藏

Browse Source
This commit is contained in:
zyh
2022-07-15 15:06:56 +08:00
parent c2191a77e8
commit 3dd3768b18
13 changed files with 666 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -223,6 +223,10 @@
}
}
.chart__canvas {
div{
width: 100% !important;
height: 100% !important;
}
.nz-chart__tooltip {
.row__label,.row__value {
color: $--color-text-regular;
@@ -586,3 +590,9 @@
}
}
}
.opacityItem{
opacity: 0;
}
.hiddenItem{
box-shadow: $--chart-shadow;
}

1
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -239,6 +239,7 @@ $--chart-border-color: $--border-color-light;
/* 13.panel */
$--chart-title-hover-background-color: #323238;
$--chart-box-border-color: $--border-color-light;
$--chart-shadow: -1px 0 8px -3px rgba(0,0,0,0.8);
/* 14.popover */
$--popover-background-color: $--background-color-empty;

1
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -235,6 +235,7 @@ $--chart-border-color: $--color-text-label;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;
$--chart-box-border-color: $--border-color-light;
$--chart-shadow: -1px 0 8px -3px #ccc;
/* 14.popover */
$--popover-background-color: $--color-text-label;

103
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -31,7 +31,8 @@
:isGroup="isGroup"
:class="{
'group-hide-header':item.type === 'group' && item.param.collapse,
'opacityItem': item.static
'opacityItem': item.static,
'hiddenItem': showHidden[item.id]==='hidden'
}"
:ref="'grid-item' + item.id"
:isResizable = "item.type === 'group' ? false: null"
@@ -44,6 +45,7 @@
@container-resized="containerResizedEvent"
>
<panel-chart
v-show="showHidden[item.id]!=='hidden'"
:ref="'chart' + item.id"
@edit-chart="$emit('edit-chart', item)"
:chart-info="item"
@@ -55,6 +57,7 @@
:chart-detail-info="chartDetailInfo"
@refreshPanel="refreshPanel"
@showFullscreen="showFullscreen"
:showHidden="showHidden"
></panel-chart>
</grid-item>
</grid-layout>
@@ -148,6 +151,9 @@ export default {
},
panelLock () {
return this.$store.getters.getPanelLock
},
variablesArr () {
return this.$store.state.panel.variablesArr
}
},
data () {
@@ -170,7 +176,9 @@ export default {
chartInfo: {}
},
scrollTop: 0,
scrollTopTimer: null
scrollTopTimer: null,
// 变量比较结果 图表是否显示/隐藏
showHidden: {}
}
},
methods: {
@@ -431,6 +439,76 @@ export default {
}
})
}
},
// 比较变量 图表是否显示/隐藏
compareVariables () {
if (!this.panelLock) {
return false
}
const isRegExp = (v) => {
let isReg
try {
isReg = eval(v) instanceof RegExp
} catch (e) {
isReg = false
}
return isReg
}
this.showHidden = {}
this.dataList.forEach(item => {
const visibility = this.$loadsh.get(item, 'param.enable.visibility', false)
const varName = this.$loadsh.get(item, 'param.visibility.varName')
const operator = this.$loadsh.get(item, 'param.visibility.operator')
const varValue = this.$loadsh.get(item, 'param.visibility.varValue')
const result = this.$loadsh.get(item, 'param.visibility.result')
// 相反结果 若result为show则contraryResult为hidden
const contraryResult = result === 'show' ? 'hidden' : 'show'
// 是否启用显示隐藏功能
if (visibility) {
this.variablesArr.forEach(subItem => {
// 判断当前图表的变量
if (subItem.name === varName) {
let flag = false
switch (operator) {
case 'equal': {
flag = subItem.checked.some(value => {
return value == varValue
})
break
}
case 'notEqual': {
flag = subItem.checked.some(value => {
return value != varValue
})
// 判断选中的值是否为空
if (!subItem.checked.length) {
flag = true
}
break
}
case 'match': {
flag = subItem.checked.some(value => {
const reg = isRegExp(varValue) ? eval(varValue) : new RegExp(varValue)
return value.match(eval(reg))
})
break
}
case 'contains': {
flag = subItem.checked.some(value => {
return value.includes(varValue)
})
break
}
}
if (flag === true) {
this.showHidden[item.id] = result
} else {
this.showHidden[item.id] = contraryResult
}
}
})
}
})
}
},
created () {
@@ -456,12 +534,29 @@ export default {
// 监听查看模式变化
'$store.state.panel.mode': {
immediate: true,
handler (val) {
handler () {
setTimeout(() => {
this.resize()
})
}
},
// 监听变量数组
variablesArr: {
handler () {
// 比较变量 图表是否显示/隐藏
this.compareVariables()
}
},
panelLock: {
handler (flag) {
if (!flag) {
this.showHidden = {}
} else {
// 比较变量 图表是否显示/隐藏
this.compareVariables()
}
}
},
dataList: {
immediate: true,
deep: true,
@@ -526,6 +621,8 @@ export default {
}
this.$nextTick(() => {
this.copyDataList = JSON.parse(JSON.stringify(tempList))
// 比较变量 图表是否显示/隐藏
this.compareVariables()
tempList = null
setTimeout(() => {
this.gridLayoutShow = true

18
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -101,6 +101,10 @@ export default {
variablesInit: {
type: Boolean,
default: true
},
// 变量比较结果 图表是否显示/隐藏
showHidden: {
type: Object
}
},
data () {
@@ -152,6 +156,10 @@ export default {
},
// 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
// 如果图表被隐藏了 则不请求数据
if (this.showHidden && this.showHidden[this.chartInfo.id] === 'hidden') {
return
}
if (!this.variablesInit) { // 变量未加载完成 不请求数据
return
}
@@ -757,6 +765,16 @@ export default {
this.chartInfo.loaded && this.getChartData(true)
}
}
},
// 监听图表显示 重新请求数据渲染图表
showHidden: {
handler (n, o) {
const newVal = n[this.chartInfo.id]
const oldVal = o[this.chartInfo.id]
if ((newVal === 'show' || newVal === undefined) && oldVal === 'hidden') {
this.getChartData(true)
}
}
}
},
mounted () {

1
nezha-fronted/src/components/common/mixin/editRigthBox.js
View File

@@ -50,7 +50,6 @@ export default {
}, 1000)
},
messageShow (msg, route, params, showNext = false, nextText = '', emit) {
// 如果存在弹框 则先清理掉
this.messageParams.route = route
this.messageParams.params = params
this.messageParams.emit = emit

1
nezha-fronted/src/components/common/panel/panelVariables.vue
View File

@@ -69,7 +69,6 @@ export default {
},
watch: {
labelArrs: {
immediate: true,
handler (n) {
this.labelArr = this.labelArrs.map(item => {
return {

154
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -715,6 +715,105 @@
</el-row>
</transition>
</div>
<!-- visibility -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.showHidden')}}</span>
<el-switch
v-model="chartConfig.param.enable.visibility"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.visibility"
class="form-items--half-width-group"
>
<!-- Variable name -->
<el-form-item
:label="$t('dashboard.panel.variableName')"
class="form-item--half-width"
prop="param.visibility.varName"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.varName"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
filterable
allow-create
default-first-option
>
<el-option
v-for="item in variables"
:key="item.name"
:label="$t(item.name)"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<!-- Operator -->
<el-form-item
:label="$t('alert.config.operator')"
class="form-item--half-width"
prop="param.visibility.operator"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.operator"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in operatorList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- Value -->
<el-form-item
:label="$t('overall.value')"
class="form-item--half-width"
prop="param.visibility.varValue"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-input
:placeholder="$t('overall.placeHolder')"
size="small"
v-model="chartConfig.param.visibility.varValue"
@change="change">
</el-input>
</el-form-item>
<!-- Result -->
<el-form-item
:label="$t('dashboard.panel.chartForm.result')"
class="form-item--half-width"
prop="param.visibility.result"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.result"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option label="Show" value="show"></el-option>
<el-option label="Hidden" value="hidden"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</el-form>
</div>
</template>
@@ -850,7 +949,15 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
this.$nextTick(() => {
@@ -874,7 +981,15 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
@@ -896,7 +1011,15 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
@@ -915,7 +1038,15 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
@@ -925,7 +1056,20 @@ export default {
}
this.chartConfig.param = {
link: this.chartConfig.param.link,
limit: 100
limit: 100,
enable: {
legend: true,
valueMapping: false,
thresholds: false,
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
}

75
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -80,16 +80,16 @@
</div>
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
<el-tab-pane :label="$t('overall.metrics')" name="metrics">
<chart-config ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
<chart-config :variables="variables" ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane :label="$t('overall.logs')" name="logs">
<chart-config ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
<chart-config :variables="variables" ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane :label="$t('overall.system')" name="system">
<system-chart-config ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
<system-chart-config :variables="variables" ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane :label="$t('overall.misc')" name="misc">
<other-chart-config ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
<other-chart-config :variables="variables" ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
</el-tabs>
</el-form>
@@ -162,6 +162,12 @@ export default {
fromEndpoint: {
type: Boolean,
default: false
},
variables: {
type: Array,
default: () => {
return []
}
}
},
mixins: [rz, editRigthBox],
@@ -370,10 +376,17 @@ export default {
enable: {
thresholds: false,
legend: true,
valueMapping: false
valueMapping: false,
visibility: false
},
thresholds: [{ value: undefined, color: '#eeeeeeff' }],
showHeader: this.editChart.param.showHeader
showHeader: this.editChart.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
}
}
@@ -384,15 +397,22 @@ export default {
height: 4,
unit: 2,
type: 'log',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
param: {
enable: {
thresholds: false,
legend: true,
valueMapping: false
valueMapping: false,
visibility: false
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
param: {
limit: 100,
showHeader: this.editChart.param.showHeader
showHeader: this.editChart.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
}
}
@@ -413,7 +433,8 @@ export default {
enable: {
thresholds: false,
legend: true,
valueMapping: false
valueMapping: false,
visibility: false
},
datasource: [{
name: 'System',
@@ -428,7 +449,13 @@ export default {
}
],
valueMapping: [],
showHeader: this.editChart.param.showHeader
showHeader: this.editChart.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
}
delete this.editChart.elements
@@ -439,14 +466,21 @@ export default {
span: 4,
height: 4,
type: 'url',
param: {
enable: {
thresholds: false,
legend: true,
valueMapping: false
valueMapping: false,
visibility: false
},
param: {
url: '',
showHeader: this.editChart.param.showHeader
showHeader: this.editChart.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
}
delete this.editChart.elements
@@ -524,7 +558,16 @@ export default {
obj.param.enable = {
thresholds: false,
legend: false,
valueMapping: false
valueMapping: false,
visibility: false
}
}
if (!obj.param.visibility) {
obj.param.visibility = {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
// this.editChart.varType = 1

159
nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
View File

@@ -148,6 +148,105 @@
<el-form-item v-if="isText(chartConfig.type)" :rules="{ required: true, message: $t('validate.required'), trigger: 'change' }" prop="param.text">
<rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
</el-form-item>
<!-- visibility -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.showHidden')}}</span>
<el-switch
v-model="chartConfig.param.enable.visibility"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.visibility"
class="form-items--half-width-group"
>
<!-- Variable name -->
<el-form-item
:label="$t('dashboard.panel.variableName')"
class="form-item--half-width"
prop="param.visibility.varName"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.varName"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
filterable
allow-create
default-first-option
>
<el-option
v-for="item in variables"
:key="item.name"
:label="$t(item.name)"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<!-- Operator -->
<el-form-item
:label="$t('alert.config.operator')"
class="form-item--half-width"
prop="param.visibility.operator"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.operator"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in operatorList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- Value -->
<el-form-item
:label="$t('overall.value')"
class="form-item--half-width"
prop="param.visibility.varValue"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-input
:placeholder="$t('overall.placeHolder')"
size="small"
v-model="chartConfig.param.visibility.varValue"
@change="change">
</el-input>
</el-form-item>
<!-- Result -->
<el-form-item
:label="$t('dashboard.panel.chartForm.result')"
class="form-item--half-width"
prop="param.visibility.result"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.result"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option label="Show" value="show"></el-option>
<el-option label="Hidden" value="hidden"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</el-form>
</div>
</template>
@@ -218,31 +317,81 @@ export default {
this.chartConfig.span = 12
this.chartConfig.param = {
link: this.chartConfig.param.link,
collapse: true
collapse: true,
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'text':
this.chartConfig.param = {
link: this.chartConfig.param.link,
text: ''
text: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'diagram':
this.chartConfig.param = {
link: this.chartConfig.param.link,
topo: ''
topo: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'url':
this.chartConfig.param = {
link: this.chartConfig.param.link,
url: ''
url: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'clock':
this.chartConfig.param = {
link: this.chartConfig.param.link,
timeType: 'local'
timeType: 'local',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
}

31
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -12,7 +12,13 @@ const rz = {
}
export default {
props: {
params: {}
params: {},
variables: {
type: Array,
default: () => {
return []
}
}
},
data () {
return {
@@ -34,6 +40,21 @@ export default {
value: 'zero'
}],
statisticsList: this.$CONSTANTS.statisticsList,
operatorList: [
{
label: 'equal',
value: 'equal'
}, {
label: 'not equal',
value: 'notEqual'
}, {
label: 'match',
value: 'match'
}, {
label: 'contains',
value: 'contains'
}
],
legendPositionList: [
{
label: this.$t('overall.bottom'),
@@ -611,5 +632,13 @@ export default {
this.chartConfig.param[key][index].error = false
this.$forceUpdate()
}
},
watch: {
params: {
deep: true,
handler (n) {
this.chartConfig.param.showHeader = n.param.showHeader
}
}
}
}

135
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -670,6 +670,105 @@
</el-row>
</transition>
</div>
<!-- visibility -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.showHidden')}}</span>
<el-switch
v-model="chartConfig.param.enable.visibility"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.visibility"
class="form-items--half-width-group"
>
<!-- Variable name -->
<el-form-item
:label="$t('dashboard.panel.variableName')"
class="form-item--half-width"
prop="param.visibility.varName"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.varName"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
filterable
allow-create
default-first-option
>
<el-option
v-for="item in variables"
:key="item.name"
:label="$t(item.name)"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<!-- Operator -->
<el-form-item
:label="$t('alert.config.operator')"
class="form-item--half-width"
prop="param.visibility.operator"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.operator"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in operatorList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- Value -->
<el-form-item
:label="$t('overall.value')"
class="form-item--half-width"
prop="param.visibility.varValue"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-input
:placeholder="$t('overall.placeHolder')"
size="small"
v-model="chartConfig.param.visibility.varValue"
@change="change">
</el-input>
</el-form-item>
<!-- Result -->
<el-form-item
:label="$t('dashboard.panel.chartForm.result')"
class="form-item--half-width"
prop="param.visibility.result"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.result"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option label="Show" value="show"></el-option>
<el-option label="Hidden" value="hidden"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</el-form>
</div>
</template>
@@ -801,9 +900,17 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
datasource: [...this.chartConfig.param.datasource]
datasource: [...this.chartConfig.param.datasource],
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'bar':
@@ -824,9 +931,17 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
datasource: [...this.chartConfig.param.datasource]
datasource: [...this.chartConfig.param.datasource],
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'table':
@@ -843,9 +958,17 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
datasource: [...this.chartConfig.param.datasource]
datasource: [...this.chartConfig.param.datasource],
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
}

12
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -127,6 +127,7 @@
:from="fromRoute.panel"
:panel-data="panelData"
:show-panel="showPanel"
:variables="variables"
@close="closeChartBox"
@reload="panelReload"
@reloadOnlyPanel="panelReloadOnlyPanel"
@@ -225,11 +226,18 @@ export default {
enable: {
legend: true,
valueMapping: false,
thresholds: false
thresholds: false,
visibility: false
},
thresholdShow: true,
thresholds: [{ value: undefined, color: randomcolor() }],
showHeader: 1
showHeader: 1,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
panel: '',