NEZ-343 feat: chart、alert-rule侧滑的expr

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

@@ -37,9 +37,7 @@
             :expression-list.sync="expressions"
             :index="0"
             :styleType="2"
-            :plugins="['metric']"
+            :plugins="['metric-input']"
-            @change="expressionChange"
-            @removeExpression="removeExpression"
           ></promql-input>
           <!--operator-->
           <el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
@@ -142,7 +140,11 @@
     },
     data() {
       return {
-        expressions: [],
+        promqlCount: 1,
+        promqlKeys: [0],
+        expressions: [''],
+        legends: [''],
+
         alertRule: {id: '', receiverShow: [], receiver: ''},
         rightBox: {show: false, isEdit: false, title: ''},
         rules:{
@@ -248,6 +250,7 @@
         this.rightBox.isEdit = isEdit;
       },
       save: function() {
+        this.alertRule.expr = this.expressions[0];
         this.$refs.alertRuleForm.validate((valid) => {
           if (valid) {
             this.alertRule.receiver = this.alertRule.receiverShow.join(",");
@@ -353,6 +356,14 @@
             } else if (this.alertRule.type == 3) {
               this.getAssetList();
             }
+            this.expressions = [this.alertRule.expr];
+            this.$nextTick(() => {
+              this.expressions.forEach((ex, index) => {
+                if (ex) {
+                  this.$refs.promql.metricChange(ex);
+                }
+              });
+            });
           }
           if (this.rightBox.show) {
             if (this.rightBox.isEdit && this.alertRule.id) {

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -199,7 +199,7 @@
                 :expression-list.sync="expressions"
                 :index="index-1"
                 :styleType="2"
-                :plugins="['metric', 'remove']"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
                 @change="expressionChange"
                 @removeExpression="removeExpression"
               ></promql-input>

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

@@ -36,7 +36,7 @@
                   :expression-list="expressions"
                   :index="index-1"
                   :styleType="1"
-                  :plugins="['metric', 'add', 'remove']"
+                  :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
                   @change="expressionChange"
                   @addExpression="addExpression"
                   @removeExpression="removeExpression"

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

@@ -20,16 +20,17 @@
           </template>
           <!--right-box里的样式-->
           <template v-if="styleType == 2">
-            <el-row v-if="plugins.indexOf('metric') > -1" style="width: 100%;">
+            <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1" style="width: 100%;">
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                <el-dropdown class="metric-selector">
+                <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
                   <el-dropdown-menu style="display: none"></el-dropdown-menu>
                   <span style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
                   <el-cascader-panel v-show="dropDownVisible" 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>
               </el-col>
               <el-col style="width: calc(100% - 120px);">
-                <div class="input-box" @click="dropDownVisible=false">
+                <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
                   <editor :styleType="styleType" :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
                   <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
                   <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
@@ -47,7 +48,7 @@
       </div>
       <div v-if="styleType == 2">
         <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
-        <div class="option" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
+        <div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
       </div>
     </div>
 </template>