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

Merge remote-tracking branch 'origin/dev-3.2' into dev-3.2

Browse Source
This commit is contained in:
chenjinsong
2021-12-02 21:46:18 +08:00
parent 49f4320723 98a55dfa3a
commit e55dbb116d
12 changed files with 1736 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/assets/css/common.scss
View File

@@ -186,14 +186,14 @@ td .nz-icon-gear:before{
box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color !important;
}
.el-input__count-inner {
background-color: $--input-background-color !important;
background-color: $--background-color-empty !important;
}
.el-textarea {
.el-textarea__inner {
background-color: $--background-color-empty !important;
}
.el-input__count {
background-color: $--input-background-color !important;
background-color: $--background-color-empty !important;
}
}
@@ -219,6 +219,7 @@ td .nz-icon-gear:before{
}
.el-message-box {
background-color: $--background-color-empty !important;
border: 1px solid $--border-color-light;
.el-button:nth-of-type(1) {
background-color: $--button-light-hover-background-color;
border: 1px solid $--button-light-border-color;
@@ -327,3 +328,17 @@ td .nz-icon-gear:before{
background-color: $--background-color-empty;
border-color: $--border-color-light;
}
/* 颜色选择器 */
.vc-sketch {
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
margin-top: 6px;
.vc-input__input {
background-color: $--project-input-background-color;
color: $--color-text-regular;
box-shadow: inset 0 0 0 1px $--border-color-light;
}
.vc-sketch-presets {
border-top: none;
}
}

50
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -7,6 +7,16 @@
font-size: 14px;
.el-form {
padding-top: 0px;
.thresholds-from-item{
margin-bottom: 0;
flex: 1;
}
.el-form-item__error {
padding-top: 0;
}
.el-input-number--small {
width: 100%;
}
}
.chart-title-config {
border: 1px solid $--border-color-light;
@@ -46,6 +56,12 @@
margin-bottom: 10px;
align-items: center;
justify-items: center;
.el-form-item__content{
display: flex;
align-items: center;
justify-items: center;
width: 100%;
}
.el-input-number--small{
display: inline-block;
flex: 1;
@@ -90,5 +106,39 @@
border-bottom: none;
margin-bottom: 10px;
}
.vue-tags-input{
display: inline-block;
width: 100%;
.ti-input{
padding: 1px 3px;
}
}
.system-chart-config {
display: flex;
height: 150px;
align-items: center;
margin-bottom: 10px;
}
.system-chart-config-left{
width: 40%;
height: 100%;
overflow-y: auto;
.system-chart-item {
font-size: 14px;
padding: 3px 5px;
}
.system-chart-item:hover{
color: $--color-primary;
background: $--background-color-base !important;
}
.system-chart-item.is-select{
color: $--color-text-secondary;
}
}
.system-chart-config-right{
flex: 1;
margin-left: 10px;
height: 100%;
}
}
}

23
nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
View File

@@ -77,19 +77,6 @@
height: 36px;
color: $--color-text-primary;
}
.vc-sketch {
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
margin-top: 6px;
.vc-input__input {
background-color: $--project-input-background-color;
color: $--color-text-regular;
box-shadow: inset 0 0 0 1px $--border-color-light;
}
.vc-sketch-presets {
border-top: none;
}
}
}
.project-calendar .el-input__inner {
height: 24px;
@@ -131,3 +118,13 @@
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
}
.el-collapse {
border-bottom: 1px solid $--border-color-light;
border-top: 1px solid $--border-color-light;
}
.el-collapse-item__header:nth-of-type(1) {
border-bottom: none;
}
.el-collapse-item__header {
border-bottom: 1px solid $--border-color-light;
}

780
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue Normal file
View File

@@ -0,0 +1,780 @@
<template>
<div class="chart-config">
<el-form
ref="chartForm"
:model="chartConfig"
:rules="rules"
label-position= "top"
label-width="120px"
>
<div
v-if="chartConfig.elements"
>
<el-form-item
:key="index"
class="element-item form-row-item thresholds-from-item"
style=""
v-for="index of chartConfig.elements.length"
:prop="'elements.' + (index -1) + '.expression'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1]?'':'is-active'" @click="showExpression(index)"></i>
<span>
{{expressionName[index-1]}}
<!-- 名称修改 暂未实现-->
</span>
</span>
<span>
<span @click="addExpression('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition name="el-zoom-in-top">
<el-row v-show="expressionsShow[index-1]">
<promql-input
:from-father-data="true"
:metricOptionsParent="metricOptions"
:expression-list="expressions"
:id="promqlKeys[index-1]"
:index="index-1"
:required = 'true'
:type="promqlType"
:key="promqlKeys[index-1]"
:plugins="['metric-selector', 'metric-input', 'remove']"
:ref="'promql-'+(index-1)"
:showRemove="false"
:styleType="2"
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<el-row style="margin-top: 18px">
<el-col class="legend-title">
<span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
<div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 160px);">
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
</el-row>
</el-row>
</transition>
</el-form-item>
</div>
<!--title-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
</div>
<div class="form-items--half-width-group">
<!-- type -->
<el-form-item
:label="$t('dashboard.panel.chartForm.type')"
class="form-item--half-width"
prop="type"
>
<el-select
id="chart-box-type"
v-model="chartConfig.type"
:disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartType"
@change="chartTypeChange">
<el-option
v-for="item in chartTypeList"
:key="item.id"
:disabled="
item.id==='group' && chartConfig.isGroup"
:label="item.name"
:value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- unit -->
<el-form-item
v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)"
:label="$t('dashboard.panel.chartForm.unit')"
class="form-item--half-width"
prop="unit"
>
<el-cascader id="chart-box-unit"
v-model="chartConfig.unit"
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="width: 100%"
@change="unitSelected"
>
</el-cascader>
</el-form-item>
<!-- index -->
<el-form-item
v-show="isTable(chartConfig.type)"
:label="$t('dashboard.panel.chartForm.tableIndex')"
class="form-item--half-width"
prop="param.index"
>
<vue-tags-input
v-model="chartConfig.param.indexs"
:maxlength="32"
:placeholder="$t('overall.addParameter')"
:tags="chartConfig.param.tags"
@tags-changed="(newTags)=>{tagsChange(newTags)}"
/>
</el-form-item>
<!-- limit -->
<el-form-item
v-show="isLog(chartConfig.type)"
:label="$t('dashboard.panel.chartForm.limit')"
class="form-item--half-width"
prop="param.limit">
<el-input-number
size="small"
placeholder=""
v-model="chartConfig.param.limit"
:controls="false"
@change="change"/>
</el-form-item>
<!--width-->
<el-form-item
:label="$t('dashboard.panel.chartForm.width')"
class="form-item--half-width"
prop="span">
<el-select
id="chart-box-span"
v-model="chartConfig.span"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--height-->
<el-form-item
:label="$t('dashboard.panel.chartForm.high')"
class="form-item--half-width"
prop="height">
<!-- 由px改为span -->
<el-select
id="chart-box-height"
v-model="chartConfig.height"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item"
>
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--stack-->
<el-form-item
:label="$t('dashboard.panel.chartForm.stack')"
class="form-item--half-width"
prop="param.stack"
v-if="isStackShow(chartConfig.type)"
>
<el-select
id="chart-box-height"
v-model="chartConfig.param.stack"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option :value="1" label="true">
</el-option>
<el-option :value="0" label="false">
</el-option>
</el-select>
</el-form-item>
<!--statistics-->
<el-form-item
v-if="isStatisticsShow(chartConfig.type)"
:label="$t('dashboard.panel.chartForm.statistics')"
class="form-item--half-width"
prop="param.statistics"
>
<el-select
id="chart-box-statistics"
v-model="chartConfig.param.statistics"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change, $forceUpdate()"
>
<el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
<span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- nullType -->
<el-form-item
:label='"Null value"'
class="form-item--half-width"
prop="param.nullType"
v-if="!isLog(chartConfig.type)"
>
<el-select
id="chart-box-nullType"
v-model="chartConfig.param.nullType"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change, $forceUpdate()"
>
<el-option
v-for="item in nullTypeList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</div>
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
<el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.legend.show"
class="form-items--half-width-group"
>
<el-form-item
:label="$t('dashboard.panel.chartForm.legendPosition')"
class="form-item--half-width"
prop="param.legend.placement"
>
<el-select
id="chart-box-legend-show"
v-model="chartConfig.param.legend.placement"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change, $forceUpdate()"
>
<el-option
v-for="item in legendPositionList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.chartForm.legendValues')"
class="form-item--half-width"
prop="param.legend.values"
>
<el-select
id="chart-box-legend-value"
v-model="chartConfig.param.legend.values"
multiple
collapse-tags
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change, $forceUpdate()"
>
<el-option
v-for="item in statisticsList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
<!--thresholdConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
<el-switch
v-model="chartConfig.param.thresholdShow"
size="small"
@change="thresholdShowChange"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.thresholdShow">
<el-form-item
v-for="(item,index) in chartConfig.param.thresholds"
:key="index"
class="thresholds-item"
:prop="'param.thresholds.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<nezhaColor
:value-arr="[{name:'thresholds',value:item.color}]"
:show-text="false"
:color-val="item.color"
@colorChange="(color,key)=>{colorChange(color,key,index)}"
/>
<el-input-number
size="small"
style="margin-top: 3px"
placeholder=""
v-model="item.value"
:controls="false"
@blur="sortThresholds"
@change="change"
/>
<span
@click="delThresholds(index)"
class="del-thresholds-icon"
>
<i class="nz-icon nz-icon-delete" />
</span>
</el-form-item>
<div @click="addThresholds" class="thresholds-add">
Add thresholds
</div>
</el-row>
</transition>
</div>
<!-- valueMapping -->
<div v-if="isShowValueMapping(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
v-model="chartConfig.param.valueMapping.show"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<div
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
:key="index"
>
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span v-if="item.type === 'value'">
{{item.value}}
</span>
<span v-if="item.type === 'range'">
{{item.from}} -> {{item.to}}
</span>
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span>
</span>
<span>
<span @click="addMapping('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row
v-show="item.show"
:key="1"
class="thresholds-item"
>
<div>
<el-select
v-model="item.type"
size="small"
style="width: 100px"
@change="(val)=>{mappingItemChange(index,val)}"
>
<el-option
v-for="item in mappingTypeList"
:value="item.value"
:label="item.label"
:key="item.value"/>
</el-select>
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + 'value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model="item.value"
placeholder="value"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + 'from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model="item.from"
placeholder="from"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + 'to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model="item.to"
placeholder="to"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + 'regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
<el-input
size="small"
v-model="item.regx"
placeholder="regx"
></el-input>
</el-form-item>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row>
</transition-group>
</div>
<div @click="addMapping" class="thresholds-add">
Add valueMapping
</div>
</el-row>
</transition>
</div>
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
</div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index">
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.value}}
</span>
</span>
</span>
<span>
<span @click="addColumns('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>Title</div>
</div>
<el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input size="small" v-model="item.title" placeholder="regx"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>Unit</div>
</div>
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="width: 100%"
@change="unitSelected"
>
</el-cascader>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
</el-form-item>
</el-row>
</transition-group>
</div>
<div @click="addColumns" class="thresholds-add">
Add Colums
</div>
</div>
</el-form>
</div>
</template>
<script>
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import nezhaColor from '@/components/common/nezhaColor'
import promqlInputMixin from '@/components/common/mixin/promqlInput'
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import VueTagsInput from '@johmun/vue-tags-input'
export default {
name: 'chartConfig',
components: {
promqlInput,
nezhaColor,
VueTagsInput
},
props: {
type: {
type: String,
default: 'metrics'
}
},
watch: {
type: {
immediate: true,
handler (n) {
this.beforeInit()
}
}
},
mixins: [promqlInputMixin, publicConfig, chartTypeShow],
computed: {},
data () {
return {
rules: {
'param.limit': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
},
promqlType: 'log',
chartTypeList: [
{
id: 'line',
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
},
{
id: 'stackArea',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
id: 'point',
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
},
{
id: 'treemap',
name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
},
{
id: 'pie',
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
},
{
id: 'log',
name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
},
{
id: 'table',
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
}
]
}
},
methods: {
beforeInit () {
this.promqlType = this.type
this.chartTypeList = this[this.type + 'ChartTypeList']
},
init () {
this.chartConfig = JSON.parse(JSON.stringify(this.params))
// 重置相关属性
this.promqlCount = 0
this.promqlKeys = []
this.elementIds = []
this.expressions = []
this.expressionsShow = []
this.legends = []
if (!this.chartConfig.elements.length) {
this.addExpression()
} else {
this.chartConfig.elements.forEach(item => {
this.addExpression(item)
})
}
},
chartTypeChange (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
this.chartConfig.param = {
stack: 0,
nullType: this.chartConfig.param.nullType,
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
thresholds: []
}
this.$nextTick(() => {
this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
})
break
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
statistics: 'last',
valueMapping: {
show: true,
mapping: []
}
}
break
case 'table':
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
statistics: 'last',
columns: [],
tags: [],
indexs: ''
}
break
case 'log':
this.chartConfig.param = {
limit: 100
}
break
}
this.change()
},
sortThresholds () {
if (this.param && this.param.thresholds.length > 1) {
this.param.thresholds = this.chartConfig.param.thresholds.sort((a, b) => {
const value1 = a.value
const value2 = b.value
return value1 - value2
})
}
this.change()
},
thresholdShowChange () {
// if (this.chartConfig.param.thresholdShow) {
//
// } else {
//
// }
this.change()
},
addThresholds () {
this.chartConfig.param.thresholds.push({
value: undefined,
color: '#eeeeeeff'
})
this.change()
},
delThresholds (index) {
if (this.chartConfig.param.thresholds.length === 1) {
return
}
this.chartConfig.param.thresholds.splice(index, 1)
this.change()
}
},
created () {
this.init()
}
}
</script>
<style scoped>
</style>

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

@@ -15,7 +15,7 @@
<!-- begin--表单-->
<div class="right-box-form-box right-box__container chart-right-box">
<el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
<el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
<el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name">
<el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
</el-form-item>
@@ -59,16 +59,16 @@
</div>
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
<el-tab-pane label="Metrics" name="1">
<metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
<chart-config ref="childrenFrom1" :type="'metrics'" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="Logs" name="2">
<logs-chart-config v-if="editChart.datasource == 2" :params.sync="editChart"/>
<chart-config ref="childrenFrom2" :type="'log'" v-if="editChart.datasource == 2" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="System" name="3">
<system-chart-config v-if="editChart.datasource == 3" :params.sync="editChart"/>
<system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
</el-tab-pane>
<el-tab-pane label="Other" name="4">
<other-chart-config v-if="editChart.datasource == 4" :params.sync="editChart"/>
<el-tab-pane label="Misc" name="4">
<other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
</el-tab-pane>
</el-tabs>
</el-form>
@@ -84,7 +84,7 @@
<button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn">
<span>{{$t('overall.preview')}}</span>
</button>
<button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn">
<button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
@@ -102,8 +102,7 @@ import richTextEditor from '@/components/charts/richTextEditor'
import selectPanel from '@/components/common/popBox/selectPanel'
import nezhaColor from '@/components/common/nezhaColor'
import diagram from '@/components/common/ChartDiagram/diagram'
import metricsChartConfig from '@/components/common/rightBox/chart/metricsChartConfig'
import logsChartConfig from '@/components/common/rightBox/chart/logsChartConfig'
import chartConfig from '@/components/common/rightBox/chart/chartConfig'
import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
const rz = {
@@ -136,8 +135,7 @@ export default {
selectPanel,
nezhaColor,
diagram,
metricsChartConfig,
logsChartConfig,
chartConfig,
systemChartConfig,
otherChartConfig
},
@@ -156,6 +154,8 @@ export default {
groupArr: [],
panelName: '',
rules: {
name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
}
}
},
@@ -171,24 +171,11 @@ export default {
},
// 保存endpoint
save () {
if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true
// 对endpointList进行处理，避免携带过多无用数据
const endpointList = []
this.endpointTableData.forEach((item, index) => {
const endpoint = {
moduleId: item.moduleId,
assetId: item.assetId,
name: item.name,
configs: JSON.stringify(item.configs),
id: item.id
}
endpointList.push(endpoint)
})
this.$refs.addEndpoint.validate((valid) => {
if (valid) {
this.$put('monitor/endpoint', endpointList).then(response => {
this.prevent_opt.save = false
const arr = [this.$refs.chartForm.validate()]
arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
Promise.all(arr).then(res => {
if (this.editChart.id) { // 修改
this.$put('visual/panel/chart', this.editChart).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
@@ -196,11 +183,19 @@ export default {
this.$message.error(response.msg)
}
})
} else { // 新增
this.$post('visual/panel/chart', this.editChart).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.prevent_opt.save = false
return false
this.$message.error(response.msg)
}
})
}
}).catch(res => {
console.log(res)
})
},
selectPanel (panel) {
this.panelName = panel.name
@@ -235,8 +230,7 @@ export default {
}
})
},
datasourceChange (val, e) {
console.log(val, e, this.editChart.datasource)
datasourceChange () {
if (this.editChart.datasource == 1) {
this.editChart = {
...this.editChart,
@@ -250,10 +244,53 @@ export default {
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
thresholds: [{ value: '', color: '#eeeeeeff' }]
thresholds: [{ value: undefined, color: '#eeeeeeff' }]
}
}
}
if (this.editChart.datasource == 2) {
this.editChart = {
...this.editChart,
span: 4,
height: 4,
unit: 2,
type: 'log',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
param: {
limit: 100
}
}
}
if (this.editChart.datasource == 3) {
this.editChart = {
...this.editChart,
span: 4,
height: 4,
unit: 2,
type: 'stat',
param: {
refer: 1,
system: '',
systemGroup: '',
systemSelect: '',
sort: 'desc',
limit: 100
}
}
delete this.editChart.elements
}
if (this.editChart.datasource == 4) {
this.editChart = {
...this.editChart,
span: 4,
height: 4,
type: 'url',
param: {
url: ''
}
}
delete this.editChart.elements
}
},
editChartChange (newEditChart) {
this.editChart = JSON.parse(JSON.stringify(newEditChart))

123
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js Normal file
View File

@@ -0,0 +1,123 @@
export default {
methods: {
isStackShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isStatisticsShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return false
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
isShowLegend (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isShowValueMapping (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
case 'table':
return false
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
isTable (type) {
switch (type) {
case 'table':
return true
case 'line':
case 'stackArea':
case 'point':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isLog (type) {
switch (type) {
case 'log':
return true
case 'table':
case 'line':
case 'stackArea':
case 'point':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isUrl (type) {
switch (type) {
case 'url':
return true
default: return false
}
},
isDiagram (type) {
switch (type) {
case 'diagram':
return true
default: return false
}
},
isText (type) {
switch (type) {
case 'text':
return true
default: return false
}
},
isGroup (type) {
switch (type) {
case 'group':
return true
default: return false
}
}
}
}

15
nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
View File

@@ -1,15 +0,0 @@
<template>
<div>
logs
</div>
</template>
<script>
export default {
name: 'metricsChartConfig'
}
</script>
<style scoped>
</style>

211
nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
View File

@@ -1,9 +1,11 @@
<template>
<div class="chart-config">
<el-form ref="metricschartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
<el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
<div v-if="chartConfig.elements">
<el-row
:key="'ele' + index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
<el-form-item
:key="index" class="element-item form-row-item thresholds-from-item" style="" v-for="index of chartConfig.elements.length"
:prop="'elements.' + (index -1) + '.expression'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
@@ -57,7 +59,7 @@
</el-row>
</el-row>
</transition>
</el-row>
</el-form-item>
</div>
<!--title-->
@@ -83,7 +85,7 @@
</el-form-item>
<!-- unit -->
<el-form-item v-show="chartConfig.type !='text' && chartConfig.type !=='url'&& chartConfig.type !=='group'&& chartConfig.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
<el-form-item v-show="!isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
<el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
@@ -94,6 +96,17 @@
</el-cascader>
</el-form-item>
<!-- index -->
<el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="unit">
<vue-tags-input
v-model="chartConfig.param.indexs"
:maxlength="32"
:placeholder="$t('overall.addParameter')"
:tags="chartConfig.param.tags"
@tags-changed="(newTags)=>{tagsChange(newTags)}"
/>
</el-form-item>
<!--width-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
<el-select id="chart-box-span" v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
@@ -148,12 +161,12 @@
</div>
<transition name="el-zoom-in-top">
<div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
<el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width" prop="nullType">
<el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width" prop="param.legend.placement">
<el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
<el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width" prop="nullType">
<el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width" prop="param.legend.values">
<el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
<el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
</el-option>
@@ -169,14 +182,20 @@
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.thresholdShow">
<div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
<el-form-item
v-for="(item,index) in chartConfig.param.thresholds"
:key="index"
class="thresholds-item"
:prop="'param.thresholds.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
@colorChange="(color,key)=>{colorChange(color,key,index)}"/>
<el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
<span @click="delThresholds(index)" class="del-thresholds-icon">
<i class="nz-icon nz-icon-delete" />
</span>
</div>
</el-form-item>
<div @click="addThresholds" class="thresholds-add">
Add thresholds
</div>
@@ -225,22 +244,36 @@
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row v-show="item.show" :key="1" class="thresholds-item">
<el-row
v-show="item.show"
:key="1"
class="thresholds-item"
>
<div>
<el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
<el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
</el-select>
</div>
<el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
<el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
<el-form-item v-if="item.type === 'value'" :prop="'param.valueMapping.mapping.' + index + 'value'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input-number :controls="false" size="small" v-model="item.value" placeholder="value"></el-input-number>
</el-form-item>
<el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'from'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input-number :controls="false" size="small" v-model="item.from" placeholder="from"></el-input-number>
</el-form-item>
<el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'to'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input-number :controls="false" size="small" v-model="item.to" placeholder="to"></el-input-number>
</el-form-item>
<el-form-item v-if="item.type === 'regx'" :prop="'param.valueMapping.mapping.' + index + 'regx'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input size="small" v-model="item.regx" placeholder="regx"></el-input>
</el-form-item>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row>
</transition-group>
@@ -254,7 +287,63 @@
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
</div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index">
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.value}}
</span>
</span>
</span>
<span>
<span @click="addColumns('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>Title</div>
</div>
<el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input size="small" v-model="item.title" placeholder="regx"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>Unit</div>
</div>
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
@change="unitSelected"
>
</el-cascader>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
</el-form-item>
</el-row>
</transition-group>
</div>
<div @click="addColumns" class="thresholds-add">
Add Colums
</div>
</div>
</el-form>
</div>
@@ -265,6 +354,8 @@ import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import nezhaColor from '@/components/common/nezhaColor'
import promqlInputMixin from '@/components/common/mixin/promqlInput'
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import VueTagsInput from '@johmun/vue-tags-input'
export default {
name: 'metricsChartConfig',
props: {
@@ -272,9 +363,10 @@ export default {
},
components: {
promqlInput,
nezhaColor
nezhaColor,
VueTagsInput
},
mixins: [promqlInputMixin, publicConfig],
mixins: [promqlInputMixin, publicConfig, chartTypeShow],
computed: {},
data () {
return {
@@ -352,7 +444,7 @@ export default {
thresholds: []
}
this.$nextTick(() => {
this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
})
break
case 'singleStat':
@@ -372,7 +464,9 @@ export default {
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
statistics: 'last',
column: []
columns: [],
tags: [],
indexs: ''
}
break
}
@@ -398,7 +492,7 @@ export default {
},
addThresholds () {
this.chartConfig.param.thresholds.push({
value: '',
value: undefined,
color: '#eeeeeeff'
})
this.change()
@@ -409,81 +503,6 @@ export default {
}
this.chartConfig.param.thresholds.splice(index, 1)
this.change()
},
isStackShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isStatisticsShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return false
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
isShowLegend (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isShowValueMapping (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
case 'table':
return false
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
isTable (type) {
switch (type) {
case 'table':
return true
case 'line':
case 'stackArea':
case 'point':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
}
},
created () {

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

@@ -1,12 +1,205 @@
<template>
<div>
other
<div class="chart-config">
<el-form
ref="chartForm"
:model="chartConfig"
:rules="rules"
label-position= "top"
label-width="120px"
>
<!--title-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
</div>
<div class="form-items--half-width-group">
<!-- type -->
<el-form-item
:label="$t('dashboard.panel.chartForm.type')"
class="form-item--half-width"
prop="type"
>
<el-select
id="chart-box-type"
v-model="chartConfig.type"
:disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartType"
@change="chartTypeChange">
<el-option
v-for="item in chartTypeList"
:key="item.id"
:disabled="item.id==='group' && chartConfig.isGroup"
:label="item.name"
:value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--Default collapse-->
<el-form-item class="form-item--half-width" v-if="isGroup(chartConfig.type)" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
<el-switch id="chart-box-collapse"
v-model="chartConfig.param.collapse"
:active-value="true"
:inactive-value="false"
size="small"/>
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="!isGroup(chartConfig.type)">
<!--width-->
<el-form-item
:label="$t('dashboard.panel.chartForm.width')"
class="form-item--half-width"
prop="span">
<el-select
id="chart-box-span"
v-model="chartConfig.span"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--height-->
<el-form-item
:label="$t('dashboard.panel.chartForm.high')"
class="form-item--half-width"
prop="height">
<!-- 由px改为span -->
<el-select
id="chart-box-height"
v-model="chartConfig.height"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item"
>
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
<!--content-->
<div v-if="!isGroup(chartConfig.type)" class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.content')}}</span>
<span style="cursor: pointer" v-if="isDiagram(chartConfig.type)"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
</div>
<!--url-->
<el-form-item v-if="isUrl(chartConfig.type)" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
<el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
</el-form-item>
<!--topoData-->
<el-form-item v-if="isDiagram(chartConfig.type)" >
<div class="topology-box">
<div class="topology-mc"></div>
<diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
</div>
</el-form-item>
<!--topplogy-->
<diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
<!--text-->
<rich-text-editor v-if="isText(chartConfig.type)" ref="richTextEditor" :edit-data="chartConfig.param.text"></rich-text-editor>
</el-form>
</div>
</template>
<script>
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import diagram from '@/components/common/ChartDiagram/diagram'
import richTextEditor from '@/components/charts/richTextEditor'
export default {
name: 'otherChartConfig'
name: 'otherChartConfig',
mixins: [publicConfig, chartTypeShow],
components: {
diagram,
richTextEditor
},
data () {
return {
rules: {},
topologyDialog: false,
chartTypeList: [
{
id: 'url',
name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
},
{
id: 'text',
name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
},
{
id: 'diagram',
name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
},
{
id: 'group',
name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
}
]
}
},
methods: {
init () {
this.chartConfig = JSON.parse(JSON.stringify(this.params))
},
chartTypeChange (type) {
switch (type) {
case 'group':
this.chartConfig.span = 12
this.chartConfig.param = {
collapse: false
}
break
case 'text':
this.chartConfig.param = {
text: ''
}
break
case 'diagram':
this.chartConfig.param = {
topo: ''
}
break
case 'url':
this.chartConfig.param = {
url: ''
}
break
}
this.change()
},
topologyDialogChange (flag, data) {
this.topologyDialog = flag
if (data) {
this.chartConfig.param.topo = data
this.change()
}
}
},
created () {
this.init()
}
}
</script>

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

@@ -8,6 +8,9 @@ const rz = {
}
}
export default {
props: {
params: {}
},
data () {
return {
language: localStorage.getItem('nz-language'),
@@ -61,6 +64,88 @@ export default {
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
],
metricsChartTypeList: [
{
id: 'line',
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
},
{
id: 'stackArea',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
id: 'point',
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
},
{
id: 'treemap',
name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
},
{
id: 'pie',
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
},
{
id: 'table',
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
}
],
logChartTypeList: [
{
id: 'line',
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
},
{
id: 'stackArea',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
id: 'point',
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
},
{
id: 'treemap',
name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
},
{
id: 'pie',
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
},
{
id: 'log',
name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
},
{
id: 'table',
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
}
]
}
},
@@ -141,7 +226,8 @@ export default {
this.expressions.push(this.expressions[index])
this.legends.push(this.legends[index])
this.promqlKeys.push(getUUID())
this.expressionName(this.transformNumToLetter(0))
const expressionName = this.getExpressionName()
this.expressionName.push(expressionName)
this.elementIds.push('')
this.expressionsShow.push(true)
this.promqlCount++
@@ -210,11 +296,12 @@ export default {
this.change()
},
colorChange (val, key, index) {
console.log(val, key, index)
if (key === 'thresholds') {
this.chartConfig.param.thresholds[index].color = val
}
if (key === 'bac') {
console.log(this.chartConfig.param.valueMapping.mapping,this.chartConfig.param.valueMapping.mapping[0],this.chartConfig.param.valueMapping.mapping[index])
console.log(this.chartConfig.param.valueMapping.mapping, this.chartConfig.param.valueMapping.mapping[0], this.chartConfig.param.valueMapping.mapping[index])
this.chartConfig.param.valueMapping.mapping[index].color.bac = val
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
}
@@ -228,6 +315,29 @@ export default {
this.$nextTick(() => {
this.$emit('change', this.chartConfig)
})
},
addColumns () {
this.chartConfig.param.columns.push({
title: '',
show: true,
unit: 2,
display: ''
})
this.change()
},
copyColumns (index) {
this.chartConfig.param.columns.push({ ...this.chartConfig.param.columns[index] })
this.change()
},
removeColumns (index) {
this.chartConfig.param.columns.splice(index, 1)
this.change()
},
showColumns (index) {
this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
},
tagsChange (newTags) {
// this.chartConfig.param.indexs = newTags.map(item => item.text)
}
}
}

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

@@ -1,12 +1,268 @@
<template>
<div>
system
<div class="chart-config">
<el-form
ref="chartForm"
:model="chartConfig"
:rules="rules"
label-position= "top"
label-width="120px"
>
<div class="system-chart-config" v-loading="loading">
<div class="system-chart-config-left">
<ul>
<li
v-for="(item,index) in systemData"
:key="index"
class="system-chart-item"
:class="item.name === chartConfig.param.system ? 'is-select' : ''"
@click="changeSystem(item)"
>{{item.name}}</li>
</ul>
</div>
<div class="system-chart-config-right">
<div class="form-items--half-width-group">
<el-form-item
:label="$t('dashboard.panel.chartForm.group')"
class="form-item--half-width"
prop="param.systemGroup"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<el-select size="small">
</el-select>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.chartForm.select')"
class="form-item--half-width"
prop="param.stack"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<el-input size="small"/>
</el-form-item>
</div>
<div class="form-items--half-width-group">
<el-form-item
:label="$t('dashboard.panel.chartForm.sort')"
class="form-item--half-width"
prop="param.sort"
>
<el-select
id="chart-box-height"
v-model="chartConfig.param.sort"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option :value="'desc'" :label="$t('dashboard.explore.descending')">
</el-option>
<el-option :value="'asc'" :label="$t('dashboard.explore.ascending')">
</el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.chartForm.limit')"
class="form-item--half-width"
prop="param.limit"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<el-input-number :controls="false" v-model="chartConfig.param.limit" size="small"/>
</el-form-item>
</div>
</div>
</div>
<!--title-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
</div>
<div class="form-items--half-width-group">
<!-- type -->
<el-form-item
:label="$t('dashboard.panel.chartForm.type')"
class="form-item--half-width"
prop="type"
>
<el-select
id="chart-box-type"
v-model="chartConfig.type"
:disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartType"
@change="chartTypeChange">
<el-option
v-for="item in chartTypeList"
:key="item.id"
:disabled="item.id==='group' && chartConfig.isGroup"
:label="item.name"
:value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--refer-->
<el-form-item
:label="$t('dashboard.panel.chartForm.refer')"
class="form-item--half-width"
prop="param.stack"
>
<el-select
id="chart-box-height"
v-model="chartConfig.param.refer"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option :value="1" label="true">
</el-option>
<el-option :value="0" label="false">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="form-items--half-width-group">
<!--width-->
<el-form-item
:label="$t('dashboard.panel.chartForm.width')"
class="form-item--half-width"
prop="span">
<el-select
id="chart-box-span"
v-model="chartConfig.span"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--height-->
<el-form-item
:label="$t('dashboard.panel.chartForm.high')"
class="form-item--half-width"
prop="height">
<!-- 由px改为span -->
<el-select
id="chart-box-height"
v-model="chartConfig.height"
:disabled="chartConfig.type === 'group'"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartSpan"
@change="change"
>
<el-option
v-for="item in spanList"
:key="item"
:label="'span-' + item"
:value="item"
>
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
export default {
name: 'systemChartConfig'
name: 'systemChartConfig',
mixins: [publicConfig, chartTypeShow],
data () {
return {
systemData: [],
loading: false,
rules: {},
chartTypeList: [
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'pie',
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
}
]
}
},
methods: {
init () {
this.chartConfig = JSON.parse(JSON.stringify(this.params))
},
getSystemData () {
this.loading = true
this.$get('/mock/getSystemData').then(res => {
this.loading = false
if (res.code === 200) {
this.systemData = res.data.list
if (res.data.list.length) {
this.chartConfig.param.system = res.data.list[0].name
}
} else {
this.$message.error(res.msg)
}
})
},
chartTypeChange (type) {
switch (type) {
case 'group':
this.chartConfig.height = ''
this.chartConfig.span = 12
this.chartConfig.param = {
collapse: false
}
break
case 'text':
this.chartConfig.param = {
text: ''
}
break
case 'diagram':
this.chartConfig.param = {
topo: ''
}
break
case 'url':
this.chartConfig.param = {
url: ''
}
break
}
this.change()
},
changeSystem (item) {
this.chartConfig.param.system = item.name
}
},
created () {
this.init()
},
mounted () {
this.getSystemData()
}
}
</script>

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

@@ -199,7 +199,7 @@ export default {
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
thresholds: [{ value: '', color: '#eeeeeeff' }]
thresholds: [{ value: undefined, color: '#eeeeeeff' }]
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
panel: '',