style：去除expression temp的快速选择的阴影改为图标

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="moban" unicode="&#58884;" d="M679-0.5H246.7c-39.7 0-72 31.8-72 70.9V614.3c0 39.1 32.3 70.9 72 70.9H679c39.7 0 72-31.8 72-70.9v-543.8c0-39.1-32.3-71-72-71zM246.7 637.9c-13.3 0-24-10.6-24-23.6v-543.8c0-13 10.8-23.6 24-23.6H679c13.3 0 24 10.6 24 23.6V614.3c0 13-10.8 23.6-24 23.6H246.7z m72.1-94.5H607v-23.6H318.8v23.6zM619 507.9H306.8v47.3H619v-47.3z m-288.2 23.7H595 330.8z m-12-82.8H607v-23.6H318.8v23.6zM619 413.3H306.8v47.3H619v-47.3zM330.8 437H595 330.8z m444.5-354.7v47.3c13.1 0 23.8 10.7 23.8 23.8V696.9c0 13.1-10.7 23.8-23.8 23.8H342.6c-13.1 0-23.8-10.7-23.8-23.8h-48c0 39.2 32.2 71.1 71.8 71.1h432.7c39.6 0 71.8-31.9 71.8-71.1v-543.5c0-39.2-32.2-71.1-71.8-71.1zM318.8 354.2H607v-23.6H318.8v23.6zM619 318.7H306.8V366H619v-47.3z m-288.2 23.7H595 330.8z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="chaoshi" unicode="&#59133;" d="M757.82562345 339.48597884000003a201.95579891 201.95579891 0 0 0 201.50486092-202.47115675c0-111.83262109-90.18759766-202.47115673-201.50486092-202.47115673a201.95579891 201.95579891 0 0 0-201.44044109 202.47115673c0 111.76820125 90.18759766 202.47115673 201.44044109 202.47115675zM506.58874414 834.93798828c246.08330193 0 445.59115226-200.47414528 445.59115226-447.8458422a30.92146168 30.92146168 0 0 0-61.58524576-0.70861646v0.70861646c0 213.16482878-171.93621321 385.8740783-383.94148666 385.8740783-212.06969416 0-383.94148753-172.70924951-383.94148754-385.8740783 0-210.97455867 168.45754811-382.39541406 377.56393586-385.8740783h6.37755168a30.92146168 30.92146168 0 0 0 30.79262288-30.92146254 30.92146168 30.92146168 0 0 0-30.79262288-31.05030136C260.56986205-60.75369611999997 61.06201172 139.84928882999998 61.06201172 387.09214608 61.06201172 634.463843 260.56986205 834.93798828 506.65316398 834.93798828z m251.23687931-543.05817756a154.4140515 154.4140515 0 0 1-153.96311351-154.86498863 154.4140515 154.4140515 0 0 1 153.96311351-154.86498948 154.4140515 154.4140515 0 0 1 154.09195232 154.86498948 154.4140515 154.4140515 0 0 1-154.09195232 154.80056879z m80.65348007-138.2447029a26.15440332 26.15440332 0 1 0 0-52.43764631H677.23656322a26.15440332 26.15440332 0 0 0-26.02556452 26.28324299c0 14.43001562 11.65996785 26.15440332 26.02556452 26.15440332h161.2425403z m-326.09258537 488.30142148a32.20985668 32.20985668 0 0 0 32.20985668-32.27427565v-256.26161701c0-10.30715389-4.83147819-19.45475333-12.23974552-25.38136703a31.56565918 31.56565918 0 0 0-22.9978374-9.98505557h-0.12883968l-255.10206169 0.45093798a32.01659717 32.01659717 0 0 0-0.19325951 64.03319434h0.06441983l226.24203045-0.38651815V609.66225365a32.20985668 32.20985668 0 0 0 32.20985668 32.33869549z"  horiz-adv-x="1024" />
 
     

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

@@ -66,7 +66,7 @@
         <el-form-item :label='$t("alert.silence.matcher")' prop="matcher" class="matcher">
           <div class="matcher-type">
             <div class="matcher-type-title">Alert rule</div>
-            <el-select v-model="editAlertSilence.ruleId" filterable @change="matcherChange" :popper-append-to-body="false" size="small" class="matcher-type-content">
+            <el-select v-model="editAlertSilence.ruleId" filterable @change="matcherChange" :popper-append-to-body="false" size="small" class="matcher-type-content" clearable>
               <el-option
                 v-for="item in ruleList"
                 :key="item.id"
@@ -96,6 +96,7 @@
 
                 <template v-slot:trigger>
                   <el-input class="panel-name" placeholder="" readonly="readonly" v-model="editAlertSilence.name" size="small">
+                    <span slot="suffix" class="el-input__icon el-icon-circle-close el-input__clear" @click.stop="clearValue"></span>
                   </el-input>
                 </template>
               </select-alert-silence>
@@ -255,6 +256,17 @@
           delete  params.time;
           delete  params.matcher;
           if(valid){
+            params={
+              id:params.id,
+              endAt:params.endAt,
+              startAt:params.startAt,
+              linkId:params.linkId,
+              linkName:params.linkName,
+              reason:params.reason,
+              ruleId:params.ruleId,
+              name:params.name,
+              type:params.type,
+            }
             if(this.editAlertSilence.id){
               this.$put('/alert/silence',params).then(response=>{
                 this.prevent_opt.save=false;
@@ -364,6 +376,10 @@
 
 
 
+      },
+      clearValue(){
+        this.editAlertSilence.name='';
+        this.editAlertSilence.linkId='';
       },
       typeChange(val,linkId){
         let firstArr=[]

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

@@ -14,8 +14,9 @@
                                  :options="metricOptions" @change="metricChange">
 
                 <template slot-scope="{ node, data }">
-                  <div :class="['nz-cascade',data.temp?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">{{
+                  <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
-                    data.label }}
+                    <i class="nz-icon nz-icon-moban"></i>
+                    {{data.label}}
                   </div>
                 </template>
 
@@ -48,8 +49,9 @@
                                    :props="{emitPath:false}" :options="metricOptions" @change="metricChange">
 
                   <template slot-scope="{ node, data }">
-                    <div :class="['nz-cascade',data.temp?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">{{
+                    <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
-                      data.label }}
+                      <i class="nz-icon nz-icon-moban"></i>
+                      {{data.label}}
                     </div>
                   </template>
 
@@ -103,7 +105,7 @@
         <el-form-item prop="expression">
           <el-input v-model="tempBox.expression" size="small" disabled></el-input>
         </el-form-item>
-        <span class="temp-form-box-title">Variable</span>
+        <span class="temp-form-box-title" v-if="tempBox.vars.length">Variable</span>
         <el-form-item v-for="(item,index) in tempBox.vars"  :prop="item" :key="index">
           <el-row>
             <el-col :span="6" class="temp-form-box-col">
@@ -111,10 +113,24 @@
             </el-col>
             <el-col :span="17" v-if="format(item).key">
               <!--<el-input v-model="tempBox[item]" :id="'tempBox'+item"  size="small"></el-input>-->
-              <el-select v-model="tempBox[item]" size="small" style="width: 100%" :popper-class="'nz-temp-box'">
+              <!--<el-select v-model="tempBox[item]" size="small" style="width: 100%" :popper-class="'nz-temp-box'">-->
-                <el-option v-for="(item1,index) in format(item).arr" :key="index" :label="item1[format(item).value]" :value="item1[format(item).value]">
+                <!--<el-option v-for="(item1,index) in format(item).arr" :key="index" :label="item1[format(item).value]" :value="item1[format(item).value]">-->
-                </el-option>
+                <!--</el-option>-->
-              </el-select>
+              <!--</el-select>-->
+              <select-alert-silence :filter-silence="filterSilence" :silence-data="format(item).arr" :panel-lock="false" :placement="'bottom-start'" :typeContentLoading="typeContentLoading"
+                                    @selectSilence="(val)=>{silenceChange(val,item)}" ref="selectPanel" style="width: 300px;">
+                <template v-slot:header>
+                  <div class="panel-select-header">
+                    <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterSilence" id="panel-list-search"></el-input>
+                  </div>
+                </template>
+
+                <template v-slot:trigger>
+                  <el-input class="panel-name" placeholder="" readonly="readonly" v-model="tempBox[item]" size="small">
+                    <span slot="suffix" class="el-input__icon el-icon-circle-close el-input__clear" @click.stop="clearValue(item)"></span>
+                  </el-input>
+                </template>
+              </select-alert-silence>
             </el-col>
             <el-col :span="17" v-else>
               <el-input v-model="tempBox[item]" :id="'tempBox'+item"  size="small"></el-input>
@@ -138,11 +154,12 @@
 
 <script>
   import editor from './editor'
-
+  import selectAlertSilence from '../../../common/alert/selectAlertSilence'
   export default {
     name:"promqlInput",
     components:{
-      'editor':editor
+      'editor':editor,
+      selectAlertSilence
     },
     props:{
       index:{type:Number},
@@ -160,7 +177,8 @@
       showTemp:{
         type:Boolean,
         default:true
-      }
+      },
+      typeContentLoading:false,
       //metricOptions: {type: Array},
       //metricStore: {type: Array}
     },
@@ -185,11 +203,11 @@
         endpointOption:[],
         datacenterOption:[],
         projectOption:[],
+        filterSilence:'',
       }
     },
     created(){
       this.queryMetrics();
-      this.getAllOptins();
     },
     methods:{
       closeDropdown(){
@@ -313,11 +331,16 @@
               if(res.code===200){
                 res.data.vars.forEach(item=>{
                   res.data[item]='';
+                  let arr=item.split('.')
+                  let keyword=arr[0].toLowerCase();
+                  this.getAllOptins(keyword,keyword+'Option');
+
                 });
                 this.tempBox={
                   ...this.tempBox,
                   ...res.data,
                 };
+
                 setTimeout(()=>{
                   this.tempBoxShow=true;
                 },100)
@@ -352,6 +375,13 @@
             return
           }
 
+          if(this.tempBox.vars.length==0){
+            this.tempBoxShow=false;
+            this.expressionList[this.index]= params.expression;
+            this.$emit('change', params.expression);
+            return
+          }
+
           this.$post('/expression/tmpl/render',params).then(res=>{
             if(res.code===200){
               this.tempBoxShow=false;
@@ -384,34 +414,95 @@
             }
         }
       },
-      getAllOptins(){
+      getAllOptins(key,arr){
-        this.$get('idc',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.datacenterOption=response.data.list;
-          }
-        });
-        this.$get('asset',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.assetOption=response.data.list;
-          }
-        });
-        this.$get('project',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.projectOption=response.data.list;
-          }
-        });
-        this.$get('module',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.moduleOption=response.data.list;
-          }
-        });
-        this.$get('endpoint',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.endpointOption=response.data.list;
-          }
-        });
 
 
+
+        switch(key){
+          case 'asset':
+            this.$get('asset',{pageNo:1,pageSize:-1}).then(response=>{
+              if(response.code==200){
+                let arr=[];
+                response.data.list.forEach(asset=>{
+                  asset.name=asset.sn;
+                  let idcF=arr.find(idc=>idc.id===asset.idc.id);
+                  if(idcF){
+                    idcF.children.push(asset);
+                  } else{
+                    let idc={...asset.idc};
+                    idc.children=[asset];
+                    arr.push(idc);
+                  }
+                });
+                this.assetOption=arr;
+              }
+            });
+            break;
+          case 'module':
+            this.$get('module',{pageNo:1,pageSize:-1}).then(response=>{
+              if(response.code==200){
+                let arr=[];
+                response.data.list.forEach(module=>{
+                  let projectF=arr.find(project=>project.id===module.project.id)
+                  if(projectF){
+                    projectF.children.push(module);
+                  } else{
+                    let project={...module.project};
+                    project.children=[module];
+                    arr.push(project);
+                  }
+                });
+                this.moduleOption=arr;
+              }
+            });
+            break;
+          case 'endpoint':
+            this.$get('endpoint',{pageNo:1,pageSize:-1}).then(response=>{
+              if(response.code==200){
+                let arr=[];
+                response.data.list.forEach(item=>{
+                  item.name=item.host;
+                  let projectF = arr.find(project=>item.project.id===project.id);
+                  if(projectF){
+                    let moduleF = projectF.children.find(module=>module.id===item.module.id);
+                    if(moduleF){
+                      moduleF.children.push(item)
+                    } else{
+                      projectF.children.push({...item.module,children:[item]});
+                    }
+                  } else {
+                    let project={...item.project};
+                    project.children=[{...item.module,children:[item]}]
+                    arr.push(project);
+                  }
+                });
+                this.endpointOption=arr;
+              }
+            });
+            break;
+          case 'datacenter':
+            this.$get('idc',{pageNo:1,pageSize:-1}).then(response=>{
+              if(response.code==200){
+                this.datacenterOption=response.data.list;
+              }
+            });
+            break;
+          case 'project':
+            this.$get('project',{pageNo:1,pageSize:-1}).then(response=>{
+              if(response.code==200){
+                this.projectOption=response.data.list;
+              }
+            });
+            break;
+          default:
+            break;
+        }
+      },
+      silenceChange(val,key){
+        this.tempBox[key]=val.name;
+      },
+      clearValue(key){
+        this.tempBox[key]='';
       },
       tempBoxClose(){
         this.cascaderValue="";
@@ -532,9 +623,13 @@
   .nz-cascade {
     padding: 0 20px 0 30px;
   }
+  .nz-cascade .nz-icon-moban {
+    display: none;
+  }
 
-  .nz-cascade-temp {
+  .nz-cascade-temp .nz-icon-moban{
-    background: #F8F9FB;
+    display: inline-block;
+    /*background: #F8F9FB;*/
   }
   .temp-form-box{
     width: 480px;

nezha-fronted/src/main.js

@@ -197,6 +197,9 @@ Vue.mixin({
       callBack 回调
       */
       let rowCopy={...row};
+      if(rowCopy.name){
+        rowCopy.name = 'Copy from ' + rowCopy.name;
+      }
       if(format){
         rowCopy=format(rowCopy)
       }

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "1.2.2020.11.10.14.10"}
+{"baseUrl":"", "version": "1.2.2020.11.10.14.10"}