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

feat： 添加 placeholder

Browse Source
This commit is contained in:
zhangyu
2021-12-03 11:44:45 +08:00
parent c039a9ac61
commit 6eb567a13e
5 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,23 @@
width: 100%;
}
}
.metrics-input-box{
.input-box .el-textarea .el-textarea__inner {
width: 508px;
}
.metric-selector-input-box{
line-height: 32px;
.el-input__count{
right: -38px !important;
}
}
.el-col-24{
line-height: 32px;
}
.el-input--small{
line-height: 32px;
}
}
.chart-title-config {
border: 1px solid $--border-color-light;
border-radius: 2px;
@@ -29,6 +46,9 @@
margin-bottom: 10px;
box-sizing: border-box;
height: 32px;
.nz-icon{
cursor: pointer;
}
.title-content-left{
display: inline-flex;
align-items: center;
@@ -58,6 +78,7 @@
justify-items: center;
.el-form-item__content{
display: flex;
line-height: 32px;
align-items: center;
justify-items: center;
width: 100%;

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

@@ -9,6 +9,7 @@
>
<div
v-if="chartConfig.elements"
class="metrics-input-box"
>
<el-form-item
:key="index"
@@ -27,14 +28,14 @@
</span>
</span>
<span>
<span @click="addExpression('')">
<span @click="addExpression('')" style="margin-right: 5px">
<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 @click="copyExpression(index - 1)" style="margin-right: 5px">
<i 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 @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px">
<i class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
@@ -56,7 +57,7 @@
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<el-row style="margin-top: 18px">
<el-row style="margin-top: 18px;display: flex">
<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">
@@ -64,7 +65,7 @@
<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-col style="flex: 1">
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
</el-row>
@@ -150,7 +151,7 @@
prop="param.limit">
<el-input-number
size="small"
placeholder=""
:placeholder="$t('placeholder.log.limit')"
v-model="chartConfig.param.limit"
:controls="false"
@change="change"/>
@@ -319,7 +320,7 @@
v-model="chartConfig.param.legend.values"
multiple
collapse-tags
placeholder=""
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change, $forceUpdate()"
@@ -363,7 +364,7 @@
<el-input-number
size="small"
style="margin-top: 3px"
placeholder=""
:placeholder="$t('placeholder.chart.threshold')"
v-model="item.value"
:controls="false"
@blur="sortThresholds"
@@ -419,14 +420,14 @@
</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 @click="addMapping('')" style="margin-right: 5px">
<i class="nz-icon nz-icon-create-square"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
<span @click="copyMapping(index)" style="margin-right: 5px">
<i 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 @click="removeMapping(index)" style="margin-right: 5px">
<i class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
@@ -507,7 +508,7 @@
<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-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" 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>
@@ -618,9 +619,6 @@ export default {
data () {
return {
rules: {
'param.limit': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
},
promqlType: 'log',
chartTypeList: [

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

@@ -22,7 +22,7 @@
id="chart-box-type"
v-model="chartConfig.type"
:disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
placeholder=""
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
value-key="chartType"

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

@@ -251,7 +251,7 @@ export default {
this.chartConfig.param.valueMapping.mapping.push({
type: 'value',
show: true,
value: '',
value: undefined,
display: '',
color: {
bac: '#FFFFFFFF',
@@ -276,21 +276,25 @@ export default {
if (mapping.type === 'value') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
value: ''
value: undefined
}
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'value')
if (mapping.type === 'range') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
from: '',
to: ''
from: undefined,
to: undefined
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'from')
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'to')
}
if (mapping.type === 'regx') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
regx: ''
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'regx')
}
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.change()

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

@@ -26,7 +26,7 @@
class="form-item--half-width"
prop="param.systemGroup"
>
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags>
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')">
<el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select>
</el-form-item>
@@ -36,7 +36,7 @@
class="form-item--half-width"
prop="param.systemSelect"
>
<el-select size="small" v-model="chartConfig.param.systemSelect">
<el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')">
<el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select>
</el-form-item>
@@ -67,7 +67,7 @@
class="form-item--half-width"
prop="param.limit"
>
<el-input-number :controls="false" v-model="chartConfig.param.limit" size="small"/>
<el-input-number :controls="false" v-model="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small"/>
</el-form-item>
</div>
</div>