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

fix：promql 表达式输入框 宽度调整

Browse Source
This commit is contained in:
zhangyu
2022-06-02 10:26:32 +08:00
parent a566919a24
commit c4ed46e956
9 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
View File

@@ -60,7 +60,7 @@
width: 100%; width: 100%;
} }
.query-row .metric-selector-input-box { .query-row .metric-selector-input-box {
width: calc(100% - 120px); width: calc(100% - 120px) !important;
} }
.el-input-number--small { .el-input-number--small {

13
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -137,9 +137,14 @@
z-index: 10; z-index: 10;
} }
/* metric input */ /* metric input */
.metric-selector-input-box { .right-box {
width: calc(100% - 160px) !important; .el-form{
.input-box { .metric-selector-input-box {
margin: 0 !important; width: calc(100% - 120px);
.input-box {
margin: 0 !important;
}
}
} }
} }

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

@@ -33,7 +33,6 @@ export default {
assetAdd.addEventListener('click', this.saveNext) assetAdd.addEventListener('click', this.saveNext)
}, },
saveNext () { saveNext () {
console.log(this.assetId)
this.$router.push({ this.$router.push({
path: this.messageParams.route, path: this.messageParams.route,
query: this.messageParams.params query: this.messageParams.params

16
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -75,9 +75,23 @@ export default {
showText: { showText: {
type: Boolean, type: Boolean,
default: true default: true
},
isTopo: {
type: Boolean,
default: false
}
},
watch: {
valueArr: {
handler (n) {
if (this.isTopo) {
this.keyName = this.valueArr[0].name
this.colors = this.valueArr[0].value || randomcolor() + 'FF'
}
},
deep: true
} }
}, },
watch: {},
data () { data () {
return { return {
colors: '#ffffff', colors: '#ffffff',

29
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -106,7 +106,7 @@
<el-col :span="4" class="thresholds-cell"> <el-col :span="4" class="thresholds-cell">
<span v-if="item.level!==0"> <span v-if="item.level!==0">
<div style="display: inline-block"> <div style="display: inline-block">
<nezhaColor <nezhaColor :isTopo="true"
:color-val="item.color" :color-val="item.color"
:presetColors="predefineColors" :single="false" :presetColors="predefineColors" :single="false"
:value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/> :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/>
@@ -224,6 +224,7 @@
:from-father-data="true" :from-father-data="true"
:metricOptionsParent="metricOptions" :metricOptionsParent="metricOptions"
:id="index" :id="index"
:pqid="'vm'"
:key="index" :key="index"
:ref="'promql-'+index" :ref="'promql-'+index"
:expression-list="selection.pen.data.expressAllArr" :expression-list="selection.pen.data.expressAllArr"
@@ -401,7 +402,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
<div>{{ $t('project.topology.bac') }}</div> <div>{{ $t('project.topology.bac') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]" <nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -409,7 +410,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily">
<div>{{ $t('project.topology.iconColor') }}</div> <div>{{ $t('project.topology.iconColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]" <nezhaColor :isTopo="true" :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -430,7 +431,7 @@
<!--el-input__inner--> <!--el-input__inner-->
</el-select> </el-select>
<div class="gradient-to-color"> <div class="gradient-to-color">
<nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]" <nezhaColor :isTopo="true" :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -636,14 +637,14 @@
<div class="props-pen-item"> <div class="props-pen-item">
<div>{{ $t('project.topology.lineColor') }}</div> <div>{{ $t('project.topology.lineColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]" <nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
<div class="props-pen-item" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
<div>{{ $t('project.topology.arrowColor') }}</div> <div>{{ $t('project.topology.arrowColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]" <nezhaColor :isTopo="true" :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -678,7 +679,7 @@
<div class="props-pen-item"> <div class="props-pen-item">
<div>{{ $t('project.topology.fontColor') }}</div> <div>{{ $t('project.topology.fontColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]" <nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -862,7 +863,7 @@
<!-- <div class="project-content-item half">--> <!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.fontColor')}}</label>--> <!-- <label>{{$t('project.topology.fontColor')}}</label>-->
<!-- <div class="full pr10 h32">--> <!-- <div class="full pr10 h32">-->
<!-- <nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{--> <!-- <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
<!-- changeTopologyOpt(val,key,true)--> <!-- changeTopologyOpt(val,key,true)-->
<!-- }"/>--> <!-- }"/>-->
<!-- </div>--> <!-- </div>-->
@@ -909,7 +910,7 @@
<div class="project-content-item half"> <div class="project-content-item half">
<label>{{ $t('project.topology.bac') }}</label> <label>{{ $t('project.topology.bac') }}</label>
<div class="full pr10 h32"> <div class="full pr10 h32">
<nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{ <nezhaColor :isTopo="true" :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
changeTopologyOpt(val,key,true) changeTopologyOpt(val,key,true)
}"/> }"/>
</div> </div>
@@ -1423,7 +1424,7 @@ export default {
// immediate:false, // immediate:false,
// }, // },
selection: { selection: {
handler () { handler (n) {
// this.loading = false // this.loading = false
if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) { if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
this.selection.pen.data.expressAllArr = [''] this.selection.pen.data.expressAllArr = ['']
@@ -1433,6 +1434,14 @@ export default {
deep: true, deep: true,
immediate: true immediate: true
}, },
'selection.pen.data': {
handler (n) {
// this.loading = false
if (this.selection.pen && JSON.stringify(this.selection.pen.type)) {
this.$emit('change', this.selection.pen)
}
}
},
fromDiagram: { fromDiagram: {
handler () { handler () {
if (this.selection.pen && this.selection.pen.data) { if (this.selection.pen && this.selection.pen.data) {

7
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -1201,6 +1201,9 @@ export default {
} }
if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性 if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
if (data.type === 0 && !data.data.moduleId) { if (data.type === 0 && !data.data.moduleId) {
if (!data.fillStyle) {
data.fillStyle = '#FFFFFF00'
}
data.data = { data.data = {
...data.data, ...data.data,
moduleId: '', moduleId: '',
@@ -1208,8 +1211,8 @@ export default {
show: false, show: false,
error: false, error: false,
animatePlay: false, animatePlay: false,
fillStyle: data.fillStyle, fillStyle: data.fillStyle || '#ffffff',
strokeStyle: data.strokeStyle, strokeStyle: data.strokeStyle || '#ffffff',
gradientColor: '#bae7ff', gradientColor: '#bae7ff',
gradientType: 0, gradientType: 0,
lineWidth: this.nodeDefaultWidth(data.name), lineWidth: this.nodeDefaultWidth(data.name),

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

@@ -930,7 +930,6 @@ export default {
} else if (val.type === 'project') { } else if (val.type === 'project') {
objectInfo.projectIds = val.valnum objectInfo.projectIds = val.valnum
} else if (val.label === 'assetState') { } else if (val.label === 'assetState') {
console.log(val)
objectInfo.state = val.valnum objectInfo.state = val.valnum
} else if (val.label === 'assetType') { } else if (val.label === 'assetType') {
objectInfo.typeIds = val.valnum objectInfo.typeIds = val.valnum

16
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -235,7 +235,7 @@
v-if="plugins.indexOf('metric-input') > -1" v-if="plugins.indexOf('metric-input') > -1"
> >
<div <div
:id="'editor'+index" :id="pqid + 'editor'+index"
v-if="type !== 'log'" v-if="type !== 'log'"
class="not-fixed-height no-resize no-close" class="not-fixed-height no-resize no-close"
> >
@@ -435,6 +435,9 @@ export default {
}, },
props: { props: {
index: { type: Number }, index: { type: Number },
pqid: {
type: String, default: ''
},
expressionList: {}, expressionList: {},
plugins: { type: Array }, plugins: { type: Array },
styleType: Number, styleType: Number,
@@ -654,7 +657,7 @@ export default {
const view = new EditorView({ const view = new EditorView({
state: EditorViewstate, state: EditorViewstate,
// parent: document.getElementById('editor') // parent: document.getElementById('editor')
parent: document.getElementById('editor' + self.index) parent: document.getElementById(this.pqid + 'editor' + self.index)
}) })
self.newView = view self.newView = view
} else { } else {
@@ -663,7 +666,6 @@ export default {
// const to = self.codeMirrorValue.length // const to = self.codeMirrorValue.length
const to = self.oldcCodeLength const to = self.oldcCodeLength
const from = self.oldcCodeLength const from = self.oldcCodeLength
// console.log(from, to)
self.newView.dispatch( self.newView.dispatch(
self.newView.state.update({ self.newView.state.update({
effects: dynamicConfigCompartment.reconfigure(dynamicConfig), effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
@@ -1096,6 +1098,14 @@ export default {
handler (n, o) { handler (n, o) {
// console.log(n, n[this.index]) // console.log(n, n[this.index])
this.codeMirrorValue[this.index] = n[this.index] this.codeMirrorValue[this.index] = n[this.index]
setTimeout(() => {
const text = this.newView.state.doc.toString()
this.newView.dispatch(
this.newView.state.update({
changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
})
)
}, 200)
} }
}, },

13
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -106,10 +106,13 @@
<template v-slot:before> <template v-slot:before>
<div> <div>
<el-dropdown-item> <el-dropdown-item>
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button> <div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item> <el-dropdown-item>
<div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div> <div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</el-dropdown-item> </el-dropdown-item>
</div> </div>
</template> </template>
@@ -365,7 +368,8 @@ export default {
editShow: false, editShow: false,
show: false, show: false,
batchModify: false, batchModify: false,
batchAdd: false batchAdd: false,
batchShow: false
}, },
titleSearch: {}, titleSearch: {},
titleSearchList: { titleSearchList: {
@@ -795,6 +799,9 @@ export default {
batchAdd () { batchAdd () {
this.rightBox.batchAdd = true this.rightBox.batchAdd = true
}, },
batchEdit () {
this.rightBox.batchShow = true
},
rollbackImport () { rollbackImport () {
this.$delete('monitor/endpoint/cancelImport' + '?seq=' + this.importResult.seq).then(response => { this.$delete('monitor/endpoint/cancelImport' + '?seq=' + this.importResult.seq).then(response => {
if (response.code == 200) { if (response.code == 200) {