Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

nezha-fronted/src/assets/stylus/main.scss

@@ -1779,7 +1779,7 @@ li{
   line-height: 25px !important;
 }
 
-.el-textarea textarea {
+.el-textarea:not(.not-fixed-height) textarea {
   height: 140px !important;
 }
 .nz-message .el-textarea textarea {

nezha-fronted/src/components/charts/chart-detail.vue

@@ -390,6 +390,7 @@
             show:true,
           }
         });
+        console.info(labels)
         return labels;
       },
       replaceSplit(key){

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -67,7 +67,7 @@
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
 
-    <chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+    <chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
   </div>
 </template>
 
@@ -186,8 +186,9 @@
       },
       /*图表相关操作--start*/
       toAddChart: function () {
+        this.rightBox.show = true;
         this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-        this.$refs.addChartModal.show(true);
+        //this.$refs.addChartModal.show(true);
         this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
       },
       // 切换tab

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

@@ -28,10 +28,17 @@
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
           </el-form-item>
           <!--expr-->
-          <el-form-item :label="$t('alert.config.expr')" prop="expr">
+          <!--<el-form-item :label="$t('alert.config.expr')" prop="expr">
             <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
-          </el-form-item>
+          </el-form-item>-->
+          <promql-input
+            ref="promql"
+            :expression-list.sync="expressions"
+            :index="0"
+            :styleType="2"
+            :plugins="['metric-input']"
+          ></promql-input>
           <!--operator-->
           <el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
             <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder=""  size="small">
@@ -122,14 +129,22 @@
 
 <script>
   import chartDataFormat from "../../charts/chartDataFormat";
-
+  import promqlInput from "../../page/dashboard/explore/promqlInput";
   export default {
     name: "alertConfigBox",
     props: {
       parentAlertRule: Object
     },
+    components: {
+      'promql-input': promqlInput,
+    },
     data() {
       return {
+        promqlCount: 1,
+        promqlKeys: [0],
+        expressions: [''],
+        legends: [''],
+
         alertRule: {id: '', receiverShow: [], receiver: ''},
         rightBox: {show: false, isEdit: false, title: ''},
         rules:{
@@ -235,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(",");
@@ -340,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

@@ -41,6 +41,7 @@
   .element-item {
     padding: 20px 0;
     border-bottom: 1px dashed #dfe7f2;
+    width: 100%;
   }
   /*metric样式--end*/
   .label-center{
@@ -169,7 +170,10 @@
               <el-input size="mini" type="input"  v-model="chart.param.threshold"></el-input>
             </el-form-item>
 
-            <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
+            <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
+              <span>{{$t('alert.config.expr')}}</span>
+              <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
+            </div>
             <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
             <div v-if="!isUrl" class="line-100"></div>
 
@@ -177,8 +181,8 @@
               <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
             </el-row>
 
-            <el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
+            <el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-              <chart-metric ref="chartTag"
+              <!--<chart-metric ref="chartTag"
                             :pointer="index"
                             :metric-list="metricList"
                             :metricCascaderList="metricCascaderList"
@@ -187,7 +191,29 @@
                             @on-delete-target="deleteTarget"
                             @sub-save-ok="subOk"
                             @on-add-target-success="getTarget"
-              ></chart-metric>
+              ></chart-metric>-->
+              <promql-input
+                :ref="'promql-'+(index-1)"
+                :id="promqlKeys[index-1]"
+                :key="promqlKeys[index-1]"
+                :expression-list.sync="expressions"
+                :index="index-1"
+                :styleType="2"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                @change="expressionChange"
+                @removeExpression="removeExpression"
+              ></promql-input>
+              <el-row>
+                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
+                    <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 120px);">
+                  <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
+                </el-col>
+              </el-row>
             </el-row>
 
             <el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
@@ -220,9 +246,9 @@
               </el-row>
             </el-form-item>
 -->
-            <button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
+            <!--<button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
               <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
-            </button>
+            </button>-->
           </el-form>
         </el-scrollbar>
 
@@ -250,19 +276,36 @@
   import ChartMetric from "./chartMetric";
   import chartDataFormat from '../../charts/chartDataFormat';
   import chartPreview from '../../charts/chartPreview';
+  import {getUUID, resetZIndex} from "../../common/js/common";
   import alertChartParam from "./alertChartParam";
+  import promqlInput from "./explore/promqlInput";
+  var rz = {
+    methods: {
+      rz(e) {
+        resetZIndex(e);
+      }
+    }
+  }
   export default {
     name: "chartBox",
     props: {
       panelData: Array,
       showPanel: Object
     },
+    mixins: [rz],
     data() {
       return {
         rightBox: {
           show: false,
           title: this.$t('dashboard.panel.createChartTitle'),
         },
+
+        promqlCount: 1,
+        promqlKeys: [],
+        elementIds: [],
+        expressions: [],
+        legends: [],
+
         editInfo: {},
         chart: {
           id:'',
@@ -275,12 +318,7 @@
             url:'',
             threshold:'',
           },
-          elements:{
+          elements:[],
-            id: '',
-            expression: '',
-            type: '',
-            legend:'',
-          },
           panel: '',
           sync: 0
         },
@@ -352,20 +390,21 @@
     components:{
       'chart-metric':ChartMetric,
       'chart-preview':chartPreview,
-      'alert-chart-param':alertChartParam
+      'alert-chart-param':alertChartParam,
+      'promql-input': promqlInput,
     },
     mounted() {
-
+      if(this.showPanel){
+        this.panelName2 = this.showPanel.name;
+      }
+      this.rightBox.show = true;
+      this.isUrl = false;
+      this.isSingleStat = false;
+      this.$nextTick(() => {
+        this.initElements();
+      });
     },
     methods: {
-      show(show) {
-        if(this.showPanel){
-          this.panelName2 = this.showPanel.name;
-        }
-        this.rightBox.show = show;
-        this.isUrl = false;
-        this.isSingleStat = false;
-      },
       clickos() {
         this.esc();
       },
@@ -415,6 +454,25 @@
       setUnit:function(unit){
         this.$set(this.chart,'unit',Number.parseInt(unit))
       },
+      expressionChange: function () {
+
+      },
+      addExpression() {
+        this.expressions.push('');
+        this.legends.push('');
+        this.promqlKeys.push(getUUID());
+        this.elementIds.push("");
+        this.promqlCount++;
+      },
+      removeExpression: function (index) {
+        if (this.promqlCount > 1) {
+          this.expressions.splice(index, 1);
+          this.legends.splice(index, 1);
+          this.promqlKeys.splice(index, 1);
+          this.elementIds.splice(index, 1);
+          this.promqlCount--;
+        }
+      },
       save() {
         this.$refs['chartForm'].validate((valid) => {
           if (valid) {
@@ -471,13 +529,17 @@
 
       /*关闭弹框*/
       esc() {
-        if (this.rightBox.show) {
+        this.rightBox.show = false;
+        setTimeout(() => {
+          this.$parent.rightBox.show = false;
+        }, 200);
+        /*if (this.rightBox.show) {
           this.rightBox.show = false;
           //this.editParamBox.show = false;
           this.$refs.chartForm.resetFields();//清空表单
           this.panelName2 = '';
           this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
-        }
+        }*/
       },
 
       /*metric部分相关方法--begin*/
@@ -597,7 +659,7 @@
         let interval = setInterval(() => {
           if (panelId) {
             this.panelId = panelId;
-            this.$post('panel/' + this.panelId + '/charts', params).then(response => {
+            this.$post('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response => {
               if (response.code === 200) {
                 this.esc();
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -624,7 +686,7 @@
       },
       // 更新图表
       updateCharts(params) {
-        this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
+        this.$put('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response2 => {
           if (response2.code === 200) {
             this.esc();
             this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -736,13 +798,24 @@
       confirmAdd() {
         this.elementTarget = []; // 初始化清空参数
         if(this.chart.type!=='url'){
-          if(this.chart.type == 'alertList'){
+          /*if(this.chart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam();
           }else{
             this.$refs.chartTag.forEach((item, index) => {//循环指标列表
               // 触发每个tag组件内部进行校验
               item.saveTarget(index);
             });
+          }*/
+          if (this.expressions[0]) {
+            this.chart.elements = [];
+            this.expressions.forEach((expr, i) => {
+              this.chart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
+            });
+          }
+          if (this.chart.id) {
+            this.updateCharts();
+          } else {
+            this.addCharts();
           }
         }else {
           this.$refs.chartForm.validate((valid) => {
@@ -898,13 +971,14 @@
         this.chart.height = data.height+'';
         this.chart.type = data.type;
         this.chart.unit=data.unit;
+        this.chart.elements = data.elements;
         if(this.chart.type==='url'){
           this.chart.param.url = data.param.url;
           this.setIsUrl();
-          this.elements = [1];
+          //this.elements = [1];
         }else if(this.chart.type==='singleStat'){
           this.setIsSingleStat();
-          this.elements = [];
+          /*this.elements = [];
           bus.chartAddInfo.metricTarget = [];
           data.elements.forEach((item, index) => {
             this.elements.push(index);
@@ -915,11 +989,11 @@
             cSet.forEach((item, index) => {
               item.setMdata(data.elements[index],data.param.statistics);
             });
-          });
+          });*/
         }else if(this.chart.type==='alertLine'){
           this.chart.param=data.param;
           this.setIsAlertList();
-          this.elements=[1];
+          //this.elements=[1];
         }else{
           if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
             this.chart.param.threshold=data.param.threshold;
@@ -929,7 +1003,7 @@
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
           // 指标
-          this.elements = [];
+          /*this.elements = [];
           bus.chartAddInfo.metricTarget = [];
           data.elements.forEach((item, index) => {
             this.elements.push(index);
@@ -947,7 +1021,7 @@
                 item.setMdata(data.elements[index]);
               });
             }
-          });
+          });*/
         }
       },
 
@@ -1087,7 +1161,24 @@
         //this.$refs.chartForm.validate();
       },
       //preview--end
-
+      initElements() {
+        if (!this.chart.elements || this.chart.elements.length == 0) {
+          this.chart.elements = [{expression: "", legend: "", type: "expert"}];
+        }
+        this.chart.elements.forEach(element => {
+          this.promqlKeys.push(getUUID());
+          this.expressions.push(element.expression);
+          this.legends.push(element.legend);
+          this.elementIds.push(element.id);
+        });
+        this.$nextTick(() => {
+          this.expressions.forEach((ex, index) => {
+            if (ex) {
+              this.$refs[`promql-${index}`][0].metricChange(ex);
+            }
+          });
+        });
+      },
     },
     created() {
       this.getSuggestMetric();

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

@@ -1,15 +1,15 @@
 <template>
-  <div class="metric-editor" v-clickoutside="clickout">
+  <div class="metric-editor" v-clickoutside="clickout" :class="{'metric-editor-rb': styleType == 2}">
     <div :id="id" class="editor-core" ref="editor" ></div>
-    <span class="nz-input-append editor-clear" style="padding-top:8px;display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
+    <span class="nz-input-append editor-clear" style="display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
     <div class="metric-editor-popper" :style="{left:popperPos.left+'px'}">
       <div class="metric-popper-main" v-show="showType&&Object.keys(showSuggestions).length>0">
-          <el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
+        <el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
-            <div v-for="(key, index) in orders" >
+          <div v-for="(key, index) in orders" >
-              <div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
+            <div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
-              <div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
+            <div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
-            </div>
+          </div>
-          </el-scrollbar>
+        </el-scrollbar>
       </div>
       <div class="metric-popper-desc" v-if="showType&&Object.keys(showSuggestions).length>0&&showDescription && detailItem && detailItem.documentation">
         <div><b>{{detailItem.insertText}}</b></div>
@@ -28,7 +28,8 @@
     name: "editor",
     props: {
       value: String,
-      metricList:{type:Array}
+      metricList:{type:Array},
+      styleType: Number
     },
     model:{
       prop:'value',
@@ -75,13 +76,13 @@
         this.dealSpecilChar(char,operation);
 
           if(this.pivotalCursorIndex!=0){
-            console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
+            //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
             newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
           }
         this.filterItems(newContent);
       },
       dealSpecilChar:function(char,operation){
-        console.log('specil char',char)
+        //console.log('specil char',char)
         if(/^[\{\(\[\,]$/g.test(char)){
           if(operation=='insert'){
             if(char == '{'||char==','){
@@ -134,7 +135,7 @@
         }
         this.pivotalCursorIndex=tempIndex+1;
 
-        console.log('after del double char',this.pivotalCursorIndex)
+        //console.log('after del double char',this.pivotalCursorIndex)
       },
       changeSuggestions:function(type){
         if(type == 'label'){
@@ -183,7 +184,7 @@
         let rangeReg=/\[\b(\d+[smdwy])\b\]/ig
         if(rangeReg.test(this.content)){
           let matchs=this.globalMatch(rangeReg,this.content);
-          console.log('matchs',matchs)
+          //console.log('matchs',matchs)
           matchs.forEach(item=>{
             this.quill.formatText(item.index+1,item[1].length,{'color':'#9954bb'},'silent')
           })
@@ -213,7 +214,7 @@
                 editExpression=item;
               }
             })
-            console.log('match',match,'isInnerExpress',isInnerExpression)
+            //console.log('match',match,'isInnerExpress',isInnerExpression)
             if(isInnerExpression&&editExpression){
               let expression=editExpression[0];
               let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
@@ -238,7 +239,7 @@
 
           }
         }else{
-          console.log('mo match metric')
+          //console.log('mo match metric')
           this.queryTypeInfos();
         }
       },
@@ -273,7 +274,7 @@
               tempCounter--;
             }
             let label=this.content.substring(boundaryIndex,equalIndex);
-            console.log('label',this.content.substring(boundaryIndex,equalIndex))
+            //console.log('label',this.content.substring(boundaryIndex,equalIndex))
 
             let values=this.labelValues.get(label);
 
@@ -308,7 +309,7 @@
             }
           }
         }
-        console.log('query metric',editMetricExpression)
+        //console.log('query metric',editMetricExpression)
         let metric=/([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0];
         let timeRange=this.getDefaultTimeRange();
         this.$get('/prom/api/v1/series?match[]={__name__="'+metric+'"}&start='+timeRange[0]+"&end="+timeRange[1]).then(response=>{
@@ -343,7 +344,7 @@
 
             this.noStyleSuggestions={labels:labels}
             this.showSuggestions=this.deepClone(this.noStyleSuggestions);
-            console.log('change labels',this.showSuggestions)
+            //console.log('change labels',this.showSuggestions)
           }else{
             this.noStyleSuggestions={};
             this.showSuggestions=this.deepClone(this.noStyleSuggestions)
@@ -357,7 +358,7 @@
         return[(start.getTime()/1000).toFixed(0),(end.getTime()/1000).toFixed(0)]
       },
       handleItemClick:function(type,item,event){
-        console.log(type,item,event)
+        //console.log(type,item,event)
         if(type=='metrics'){
           this.handleMetricClick(item)
         }else if(type == 'labels'){
@@ -504,7 +505,7 @@
           let typeValues=suggestions[key];
           typeValues=typeValues.filter(item=>{
             let index=item.insertText.toLowerCase().indexOf(input.toLowerCase());
-            console.log('index',index,'input',input)
+            //console.log('index',index,'input',input)
             if(index != -1){
               // console.log('item',item.label,'input',input)
               // item.label=item.label.replace(input,`<mark>${input}</mark>`);
@@ -534,7 +535,7 @@
           this.$nextTick(()=>{
             let suggestions=document.querySelectorAll('.popper-item');
             this.storedSuggestions=[...suggestions];
-            console.log('storedSuggestions->',suggestions)
+            //console.log('storedSuggestions->',suggestions)
           })
       },
       setContent:function(value){
@@ -566,14 +567,14 @@
         return new Promise(function(resolve,reject){
           $temp.$nextTick(()=>{
             let range=$temp.quill.getSelection();
-            console.log('range',range)
+            //console.log('range',range)
             if(range&&range.length == 0){
               $temp.cursorIndex=range.index;
-              console.log('current cursor-->',$temp.cursorIndex)
+              //console.log('current cursor-->',$temp.cursorIndex)
 
               if(/^[\{\(\[,= "]$/g.test(char)){
                 $temp.pivotalCursorIndex=$temp.cursorIndex;
-                console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
+                //console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
               }
               resolve();
             }
@@ -590,7 +591,7 @@
       },
       moveScroll:function(){
         let scroll=this.$refs.scroll.wrap;
-        console.log('scroll',scroll)
+        //console.log('scroll',scroll)
         if(scroll){
           let curScroll=scroll.scrollTop;//滚动条当前位置
           let scrollLen=scroll.scrollHeight;//滚动条总长
@@ -652,7 +653,7 @@
       getPosition:function(){
         this.$nextTick(()=>{
           this.popperPos=this.quill.getBounds(this.cursorIndex)
-          console.log('position:',this.popperPos)
+          //console.log('position:',this.popperPos)
         })
       },
       guid() {
@@ -664,7 +665,7 @@
       registerKeydown:function(){
         let $temp=this;
         document.addEventListener('keydown',function(event){
-          console.log('keydown',event)
+          //console.log('keydown',event)
           $temp.toggleSelect(event);
         })
 
@@ -745,11 +746,11 @@
       this.options.modules.keyboard.bindings=bindings;
       this.quill = new Quill(this.$refs.editor, this.options);
       this.quill.on('blur',function(){
-        console.log('quill blur')
+        //console.log('quill blur')
       })
       this.quill.on('text-change',function(delta, oldDelta, source){
         if(source != 'silent'){
-          console.log('delta',delta,'oldDelta',oldDelta,'source',source)
+          //console.log('delta',delta,'oldDelta',oldDelta,'source',source)
           let char='',operation='';
           let oldContent='';
           oldDelta.ops.forEach((item,index)=>{
@@ -780,14 +781,14 @@
           }
           let promise=$temp.storeCursor(char);
           if(source == 'user'){
-            console.log(delta,oldDelta,oldContent)
+            //console.log(delta,oldDelta,oldContent)
             let newContent=$temp.getContent()
             promise.then(()=>{ //存储完光标后再进行后面的操作
               $temp.userChange(char,operation,newContent,oldContent)
             })
           }
           $temp.content=$temp.getContent();
-          console.log('current content-->',$temp.content)
+          //console.log('current content-->',$temp.content)
           $temp.getPosition();
           $temp.formatContent();
         }
@@ -814,7 +815,7 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .metric-editor{
     position: relative;
     height: 36px;
@@ -883,11 +884,14 @@
   .editor-core:hover + .editor-clear{
     display: inline-block !important;
   }
+  .editor-clear {
+    padding-top: 8px;
+  }
   .editor-clear:hover{
     display: inline-block !important;
   }
 </style>
-<style>
+<style lang="scss">
   mark{
     color: rgb(255, 133, 27);
     border-bottom: 1px solid rgb(255, 133, 27);
@@ -895,9 +899,28 @@
     background: inherit;
     padding: 0;
   }
-   .ql-editor{
+  .ql-editor{
-    padding:10px 10px !important;
+    padding:10px !important;
-     overflow: hidden;
+    overflow: hidden;
   }
+  .metric-editor.metric-editor-rb {
+    .editor-clear {
+      padding-top: 4px;
+    }
+    height: 32px;
+    .ql-container.ql-snow {
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      box-sizing: border-box;
+      .ql-editor {
+        padding: 6px 0 !important;
+        >p {
+          padding-left: 15px;
+          font-size: 12px;
+          color: rgb(96, 98, 102);
+        }
+      }
+    }
 
+  }
 </style>

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

@@ -35,6 +35,8 @@
                   :key="promqlKeys[index-1]"
                   :expression-list="expressions"
                   :index="index-1"
+                  :styleType="1"
+                  :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
                   @change="expressionChange"
                   @addExpression="addExpression"
                   @removeExpression="removeExpression"
@@ -191,7 +193,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
             </div>
 
         </div>
-        <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
+        <chart-box v-if="rightBox.show" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
         <element-set
           :allowed-all="true"
           v-clickoutside="elementsetHide"
@@ -225,6 +227,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     },
     data() {
       return {
+        rightBox: { //面板弹出框相关
+          show: false,
+        },
         promqlCount: 1,
         promqlKeys: [],
         expressions: [''],
@@ -443,8 +448,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         this.tableVisible = !this.tableVisible;
       },
       saveChart: function () {
+        this.rightBox.show = true;
         this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-        this.$refs.addChartModal.show(true);
+        //this.$refs.addChartModal.show(true);
         let metricInfo = {};
         metricInfo.elements = [];
         // {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}

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

@@ -2,28 +2,54 @@
     <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
       <div class="query-row">
         <div class="query-input">
-          <div class="metricBtn">
+          <!--explore页面的样式-->
-            <el-dropdown class="metric-selector" >
+          <template v-if="styleType == 1">
-              <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <div class="metric-btn" v-if="plugins.indexOf('metric') > -1">
-              <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
+              <el-dropdown class="metric-selector" >
-              <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
+                <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            </el-dropdown>
+                <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
-          </div>
+                <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
-          <div class="inputBox" @click="dropDownVisible=false">
+              </el-dropdown>
-<!--            <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>-->
+            </div>
-            <editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+            <div class="input-box" @click="dropDownVisible=false">
-            <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
+              <!--            <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>-->
-            <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
+              <editor :styleType="styleType" :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
-          </div>
+              <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>
+          </template>
+          <!--right-box里的样式-->
+          <template v-if="styleType == 2">
+            <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" 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" 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>
+                </div>
+              </el-col>
+            </el-row>
+          </template>
         </div>
       </div>
-      <div style="margin-left: 5px">
+      <div v-if="styleType == 1">
         <div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
-          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"><i class="el-icon-plus"></i></div>
+          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
-          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"><i class="el-icon-minus"></i></div>
+          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
         </div>
       </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" 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>
 
@@ -36,7 +62,9 @@
       },
       props:{
         index:{type:Number},
-        expressionList:{}
+        expressionList:{},
+        plugins: {type: Array},
+        styleType: Number
       },
       data(){
         return {
@@ -149,7 +177,7 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .promqlInput{
     position: relative;
     height: 36px;
@@ -160,12 +188,12 @@
   .promqlInput .query-row{
     width: 100%;
   }
-  .inputBox .append-msg{
+  .input-box .append-msg{
     font-size: 12px;
     line-height: 1;
     padding-top: 4px;
   }
-  .inputBox .error{
+  .input-box .error{
     color: #F56C6C;
   }
   .query-row .query-input{
@@ -189,11 +217,11 @@
   .query-options .option:focus,.query-options .option:hover{
     background-color: #CCD7E4;
   }
-  .query-input .metricBtn{
+  .query-input .metric-btn {
     width: 100px;
     margin-right: 10px;
   }
-  .query-input .inputBox{
+  .query-input .input-box{
     width: 100%;
   }
   .metric-btn{
@@ -217,7 +245,7 @@
     position:relative;
     z-index: 2100;
   }
-  .inputBox .el-input__inner{
+  .input-box .el-input__inner{
     height: 36px;
   }
 </style>

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

@@ -104,7 +104,7 @@
     </left-menu>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
-    <chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+    <chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
   </div>
 </template>
 
@@ -290,9 +290,11 @@
       },
       /*图表相关操作--start*/
       toAddChart: function () {
-        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.rightBox.show = true;
-        this.$refs.addChartModal.show(true);
+        this.$nextTick(() => {
-        this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
+          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+          this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
+        });
       },
       scrollbarHeightHandler() {
         setTimeout(() => {
@@ -316,9 +318,11 @@
       },
       // 编辑图表信息,打开编辑弹窗
       editData(data) {
-        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        this.rightBox.show = true;
-        this.$refs.addChartModal.show(true);
+        this.$nextTick(() => {
-        this.$refs.addChartModal.editData(data, this.showPanel.id);
+          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+          this.$refs.addChartModal.editData(data, this.showPanel.id);
+        });
       },
       // 移除图表:弹出确认框询问
       removeData(data,from) {