fix：metric为空时 不显示tooltip 以及alert rule ecpr为必填

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tooltip-box" style="display: flex;" v-if="isChart||chartData.tooltipShow">
+  <div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressArr.length">
     <span class="temp-dom"></span>
     <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
       <line-chart-block v-show="isChart || chartData.type !== 'table'"

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -184,7 +184,7 @@
 
 
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" v-has="'project_topo_save'"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
@@ -485,6 +485,7 @@
         previewShow:false,
         penId:undefined,
         penToolTipScale:1,
+        oldScale:1,
       };
     },
     components:{
@@ -662,7 +663,8 @@
               let position={
                 x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
                 y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-              }
+              };
+              this.oldScale=getTopology(this.topologyIndex).data.scale;
               getTopology(this.topologyIndex).data.pens.forEach(item=>{
                 if(flag){
                   return
@@ -672,10 +674,8 @@
                   flag=true
                 }
               });
-              if(this.fromOverView){
+              getTopology(this.topologyIndex).centerView(20);
-                getTopology(this.topologyIndex).centerView(20);
+              this.penToolTipScale = getTopology(this.topologyIndex).data.scale;
-              }
-              this.penToolTipScale= getTopology(this.topologyIndex).data.scale;
               setTimeout(()=>{
                 getTopology(this.topologyIndex).data.pens.forEach(item=>{
                   if(item.animatePlay){
@@ -1757,6 +1757,9 @@
               }
             })
           });
+          if(this.penToolTipScale==getTopology(this.topologyIndex).data.scale){
+            getTopology(this.topologyIndex).data.scale=this.oldScale;
+          }
           this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
             this.prevent_opt.save=false;
             if(res.code===200){
@@ -1851,9 +1854,7 @@
               flag=true
             }
           });
-          if(this.fromOverView){
+          getTopology(this.topologyIndex).centerView(20);
-            getTopology(this.topologyIndex).centerView(20);
-          }
           this.getNodesArr();
         },100)
       },

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -20,16 +20,18 @@
         <el-form-item :label='$t("alert.config.name")' prop="alertName">
           <el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small" id="alert-box-input-name"></el-input>
         </el-form-item>
-        <div style="width: calc(100% - 15px);margin-left: 15px">
+        <el-form-item style="width: calc(100% - 15px);margin-left: 15px" :label-width="'0'" prop="expr">
           <promql-input
             ref="promql"
             :expression-list.sync="expressions"
             :index="0"
             :styleType="2"
+            :required="true"
+            @change="metricChange"
             :plugins="['metric-input']"
             id="alert-box-input-promql"
           ></promql-input>
-        </div>
+        </el-form-item>
         <!--threshold-->
         <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
           <el-input type="text" placeholder="" v-model="editAlertRule.threshold" size="small" id="alert-box-input-threshold">
@@ -142,7 +144,7 @@
             {required:true,message:this.$t('validate.required'),trigger:'blur'}
           ],
           expr:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
+            {required:true,message:this.$t('validate.required'),trigger:'change'}
           ],
           last:[
             {required:true,message:this.$t('validate.required'),trigger:'blur'},
@@ -266,6 +268,9 @@
           }
         })
       },
+      metricChange(val){
+        this.editAlertRule.expr=val;
+      }
     },
     mounted() {
       this.getUserList();

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'auto'}">
+    <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'auto','margin-bottom':required?'0':'18px'}">
       <div class="query-row">
         <div class="query-input">
           <!--explore页面的样式-->
@@ -14,7 +14,7 @@
             <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
               <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
               <!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
-              <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"></el-input>
+              <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId" @input="metricKeyDown"></el-input>
               <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
               <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
             </div>
@@ -28,12 +28,12 @@
                   <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
                   <el-cascader-panel v-if="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
                 </el-dropdown>
-                <label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
+                <label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}<sup v-if="required" style="color: #f56c6c">*</sup></label>
               </el-col>
               <el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
                 <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
                   <!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
-                  <el-input v-model="expressionList[index]" @change="metricChange"></el-input>
+                  <el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"></el-input>
                   <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
                   <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
                 </div>
@@ -72,6 +72,9 @@
         projectRightBox:{type:Boolean,default:false},
         metricOptionsParent:{type:Array},
         inputId:String,
+        required:{
+          type:Boolean,default:false
+        }
         //metricOptions: {type: Array},
         //metricStore: {type: Array}
       },
@@ -140,6 +143,11 @@
           this.dropDownVisible=false;
           this.$emit('change',value)
         },
+        metricKeyDown(val){
+          if(this.required){
+            this.metricChange(val);
+          }
+        },
         expressionChange:function(){
           this.$emit('change')
         },