NEZ-343 feat: expr（部分）

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,19 @@
             <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']"
+            @change="expressionChange"
+            @removeExpression="removeExpression"
+          ></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 +131,18 @@
 
 <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 {
+        expressions: [],
         alertRule: {id: '', receiverShow: [], receiver: ''},
         rightBox: {show: false, isEdit: false, title: ''},
         rules:{

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{
@@ -180,7 +181,7 @@
               <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="index of promqlKeys.length" :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"
                             :pointer="index"
                             :metric-list="metricList"
@@ -210,7 +211,7 @@
                   </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-input v-model="legends[index-1]" type="text" size="small"></el-input>
                 </el-col>
               </el-row>
             </el-row>

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

@@ -1,7 +1,7 @@
 <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">
@@ -28,7 +28,8 @@
     name: "editor",
     props: {
       value: String,
-      metricList:{type:Array}
+      metricList:{type:Array},
+      styleType: Number
     },
     model:{
       prop:'value',
@@ -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);
@@ -896,8 +900,27 @@
     padding: 0;
   }
   .ql-editor{
-    padding:10px 10px !important;
+    padding:10px !important;
     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

@@ -193,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"
@@ -227,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: [''],
@@ -445,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,40 +2,53 @@
     <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
       <div class="query-row">
         <div class="query-input">
+          <!--explore页面的样式-->
           <template v-if="styleType == 1">
-            <div class="metricBtn" v-if="plugins.indexOf('metric') > -1">
+            <div class="metric-btn" 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>
                 <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>
             </div>
-            <div class="inputBox" @click="dropDownVisible=false">
+            <div class="input-box" @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>-->
-              <editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
+              <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>
           </template>
+          <!--right-box里的样式-->
           <template v-if="styleType == 2">
-            <el-row v-if="plugins.indexOf('metric') > -1">
+            <el-row v-if="plugins.indexOf('metric') > -1" style="width: 100%;">
               <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-dropdown class="metric-selector">
+                  <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>
               </el-col>
               <el-col style="width: calc(100% - 120px);">
-                <el-input v-model="legends[index-1]" type="text" size="mini"></el-input>
+                <div class="input-box" @click="dropDownVisible=false">
+                  <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" 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>
-
+      <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>
     </div>
 </template>
 
@@ -163,7 +176,7 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .promqlInput{
     position: relative;
     height: 36px;
@@ -174,12 +187,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{
@@ -203,11 +216,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{
@@ -231,7 +244,7 @@
     position:relative;
     z-index: 2100;
   }
-  .inputBox .el-input__inner{
+  .input-box .el-input__inner{
     height: 36px;
   }
 </style>