temp: 暴雨预警，先提交闪人回家做

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/page/dashboard/chartBox.vue

@@ -169,7 +169,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 +180,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">
-              <chart-metric ref="chartTag"
+            <el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="index of promqlKeys.length" :key="'ele' + index">
+              <!--<chart-metric ref="chartTag"
                             :pointer="index"
                             :metric-list="metricList"
                             :metricCascaderList="metricCascaderList"
@@ -187,7 +190,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', '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="mini"></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 +245,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 +275,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 +317,7 @@
             url:'',
             threshold:'',
           },
-          elements:{
-            id: '',
-            expression: '',
-            type: '',
-            legend:'',
-          },
+          elements:[],
           panel: '',
           sync: 0
         },
@@ -352,20 +389,21 @@
     components:{
       'chart-metric':ChartMetric,
       'chart-preview':chartPreview,
-      'alert-chart-param':alertChartParam
+      'alert-chart-param':alertChartParam,
+      'promql-input': promqlInput,
     },
     mounted() {
-
-    },
-    methods: {
-      show(show) {
       if(this.showPanel){
         this.panelName2 = this.showPanel.name;
       }
-        this.rightBox.show = show;
+      this.rightBox.show = true;
       this.isUrl = false;
       this.isSingleStat = false;
+      this.$nextTick(() => {
+        this.initElements();
+      });
     },
+    methods: {
       clickos() {
         this.esc();
       },
@@ -415,6 +453,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 +528,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 +658,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")});
@@ -736,14 +797,21 @@
       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]});
+            });
           }
+          this.addCharts();
         }else {
           this.$refs.chartForm.validate((valid) => {
             const params = {
@@ -898,13 +966,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 +984,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 +998,7 @@
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
           // 指标
-          this.elements = [];
+          /*this.elements = [];
           bus.chartAddInfo.metricTarget = [];
           data.elements.forEach((item, index) => {
             this.elements.push(index);
@@ -947,7 +1016,7 @@
                 item.setMdata(data.elements[index]);
               });
             }
-          });
+          });*/
         }
       },
 
@@ -1087,7 +1156,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

@@ -75,13 +75,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 +134,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 +183,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 +213,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 +238,7 @@
 
           }
         }else{
-          console.log('mo match metric')
+          //console.log('mo match metric')
           this.queryTypeInfos();
         }
       },
@@ -273,7 +273,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 +308,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 +343,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 +357,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 +504,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 +534,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 +566,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 +590,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 +652,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 +664,7 @@
       registerKeydown:function(){
         let $temp=this;
         document.addEventListener('keydown',function(event){
-          console.log('keydown',event)
+          //console.log('keydown',event)
           $temp.toggleSelect(event);
         })
 
@@ -745,11 +745,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 +780,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();
         }

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', 'add', 'remove']"
                   @change="expressionChange"
                   @addExpression="addExpression"
                   @removeExpression="removeExpression"

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

@@ -2,7 +2,8 @@
     <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
       <div class="query-row">
         <div class="query-input">
-          <div class="metricBtn">
+          <template v-if="styleType == 1">
+            <div class="metricBtn" v-if="plugins.indexOf('metric') > -1">
               <el-dropdown class="metric-selector" >
                 <el-dropdown-menu style="display: none"></el-dropdown-menu>
                 <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>
@@ -10,17 +11,28 @@
               </el-dropdown>
             </div>
             <div class="inputBox" @click="dropDownVisible=false">
-<!--            <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>-->
+              <!--            <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 :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>
+          </template>
+          <template v-if="styleType == 2">
+            <el-row v-if="plugins.indexOf('metric') > -1">
+              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                Metric&nbsp;<i class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+              </el-col>
+              <el-col style="width: calc(100% - 120px);">
+                <el-input v-model="legends[index-1]" type="text" size="mini"></el-input>
+              </el-col>
+            </el-row>
+          </template>
         </div>
       </div>
       <div style="margin-left: 5px">
         <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="removeExpression"><i class="el-icon-minus"></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" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
         </div>
       </div>
 
@@ -36,7 +48,9 @@
       },
       props:{
         index:{type:Number},
-        expressionList:{}
+        expressionList:{},
+        plugins: {type: Array},
+        styleType: Number
       },
       data(){
         return {

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>
 
@@ -289,9 +289,11 @@
       },
       /*图表相关操作--start*/
       toAddChart: function () {
+        this.rightBox.show = true;
+        this.$nextTick(() => {
           this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-        this.$refs.addChartModal.show(true);
           this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
+        });
       },
       scrollbarHeightHandler() {
         setTimeout(() => {
@@ -315,9 +317,11 @@
       },
       // 编辑图表信息,打开编辑弹窗
       editData(data) {
+        this.rightBox.show = true;
+        this.$nextTick(() => {
           this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
-        this.$refs.addChartModal.show(true);
           this.$refs.addChartModal.editData(data, this.showPanel.id);
+        });
       },
       // 移除图表:弹出确认框询问
       removeData(data,from) {