- 
- 
- 
- 
+
+
+
+
+
+
+ {{$t('project.topology.chartName')}}
+
+
+
+
+
+
+
-
-
- {{$t('project.topology.chartName')}}
-
-
-
-
-
-
-
-
+
{{$t('project.topology.unit')}}
@@ -110,10 +105,11 @@
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
+ :projectRightBox="true"
>
-
+
{{$t('dashboard.panel.chartForm.legend')}}
@@ -172,11 +168,12 @@
lineId:n.id,
width:n.width,
lineName:n.label,
+ name:[],
};
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
- this.name[index]=item.name;
+ this.form.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
@@ -191,7 +188,7 @@
data(){
return{
form:{
- arrows:'',
+ arrows:'0',
label:'',
color:'#1e90ff',
lineName:'',
@@ -199,6 +196,7 @@
width:'',
type:'',
roundness:'',
+ name:[],
},
predefineColors: [
'#ff4500',
@@ -209,18 +207,18 @@
'#1e90ff',
'#c71585',
],
+ showPicker:false,
unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[],
expressions: [],
promqlCount:0,
elementIds:[],
legends:[],
- name:[],
unit:[],
rules:{
- arrows: [
- { required: true, message: '', trigger: 'change' },
- ],
+ // arrows: [
+ // { required: true, message: '', trigger: 'change' },
+ // ],
lineName: [
{ required: true, message: '', trigger: 'change' },
],
@@ -249,7 +247,7 @@
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
- "name": this.name[index],
+ "name": this.form.name[index],
"unit": this.unit[index],
"metric": this.expressions[index],
"legend": this.legends[index],
@@ -265,7 +263,7 @@
addExpression() {
this.expressions.push('');
this.legends.push('');
- this.name.push('');
+ this.form.name.push('');
this.unit.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
@@ -275,7 +273,7 @@
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
- this.name.splice(index, 1);
+ this.form.name.splice(index, 1);
this.unit.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
@@ -301,6 +299,7 @@
this.esc();
},
colorPickerClick(){
+ this.showPicker=true;
this.$refs['colorPicker'].showPicker=true;
},
colorChange(val){
@@ -313,6 +312,9 @@
let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
+ },
+ colorOut(){
+ this.showPicker=false;
}
},
@@ -345,7 +347,7 @@
border-radius: 5px;
display: flex;
align-items: center;
- width: calc(100% - 30px);
+ width: calc(100% - 60px);
height: 30px;
}
.color-show-left{
@@ -372,7 +374,7 @@
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
- width: calc(100% - 30px);
+ width: calc(100% - 60px);
}
.arrows /deep/ .el-input__inner{
display: none;
@@ -384,6 +386,52 @@
/deep/ .el-select{
width: 262px;
}
+ .line-option{
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .line-option > div{
+ width: 50%;
+ }
+ .line-option .line-width .el-input{
+ width: clac(100% - 60px);
+ }
+ /deep/ .el-select .el-input .el-select__caret{
+ vertical-align: middle;
+ }
+ .color-arrows{
+ color: #C0C4CC;
+ position: absolute;
+ right: 65px;
+ }
+ .color-arrows .nz-icon{
+ font-size: 14px;
+ }
+ .element-item{
+ padding: 20px 0;
+ border-bottom: 1px dashed #dfe7f2;
+ width: 100%;
+ }
+ .element-item.expr /deep/ .el-form-item__content{
+ position: relative;
+ margin-left: 0 !important;
+ }
+ .element-item.expr /deep/ .el-form-item__content .el-row{
+ margin-bottom: 0;
+ }
+ .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
+ left: 120px;
+ }
+ .expr-title{
+ width: 120px;
+ padding-right: 20px;
+ text-align: right;
+ color: #666;
+ opacity: 0.6;
+ font-size: 14px;
+ letter-spacing: 0;
+ line-height: 22px;
+ }
.el-row {
margin-bottom: 20px;
line-height: 32px;
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 75c4582f6..a12087676 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -165,10 +165,12 @@
NodeArr(n){
if(n.length===2){
this.lineData={
- arrows:'',
+ arrows:'0',
label:'',
color:'#1e90ff',
lineId:'',
+ width:'1',
+ dashed:'[5,5]',
id:'',
};
this.addLineShow=true;
@@ -634,7 +636,6 @@
},
//工具栏点击后显示对应内容
popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
- // console.log(key);
this.popDataShow={
endpoint:false,
asset:false,
@@ -645,7 +646,6 @@
main:false,
};
if(key&&!this.editVisNetwork){
- // console.log(this.lineData);
if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId;
this.totalArray=this.nodesArray;
@@ -685,7 +685,6 @@
let this_=this;
this.init('modal');
this.network.on("click", function (params) {
- console.log(params);
this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate('',true);
@@ -725,7 +724,6 @@
this_.isLineAdd=false;
}
if(!this_.editVisNetwork){
- console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total')
}else{
@@ -816,7 +814,6 @@
setTimeout(()=>{
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
- console.log(this_.zoom);
this_.modelTopUpdate();
this_.selNodeArrUpdate();
if(this_.networkPopShow){
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index ea124e857..90b731f36 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -24,7 +24,7 @@
- Metric
+ Metric
@@ -66,7 +66,8 @@
plugins: {type: Array},
styleType: Number,
historyParam:{type:Object},
- showRemove:{type:Boolean,default:true}
+ showRemove:{type:Boolean,default:true},
+ projectRightBox:{type:Boolean,default:false}
},
data(){
return {
@@ -245,6 +246,16 @@
z-index: 2100;
background-color: #FFF;
}
+ .expr-title{
+ width: 120px;
+ padding-right: 20px;
+ text-align: right;
+ color: #666;
+ opacity: 0.6;
+ font-size: 14px;
+ letter-spacing: 0;
+ line-height: 22px;
+ }
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {{form.color}}
+
+
+
+
-
-
- {{form.color}}
-
-
-
-
-
-
+
+
+
+
+
{{$t('alert.config.expr')}}
-