feat：添加silence的复制功能以及样式的修改

2021-03-12 18:04:17 +08:00
parent 9f489ae29d
commit 67c0243049
5 changed files with 153 additions and 62 deletions
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -298,7 +298,10 @@ export function calcDurationByStringTime(startTime, endTime) {
 export function calcDurationByStringTimeB(startTime, endTime) {
  let durationSecond = stringTimeParseToUnix(endTime)-stringTimeParseToUnix(startTime);
  let result = `${durationSecond%60}s`;
-  if (durationSecond > 60*60) {
+  if(durationSecond > 60*60 *24){
+    result = `${(Math.floor(durationSecond/3600))%24}h`
+    result = `${Math.floor(durationSecond/(60*60*24))}d ${result}`;
+  } else if (durationSecond > 60*60) {
    result = `${(Math.floor(durationSecond/60))%60}m`
    result = `${Math.floor(durationSecond/(60*60))}h ${result}`;
  }else if(durationSecond > 60) {
@@ -464,6 +467,17 @@ export const tableSet = {
  //是否需要排序
  sortableShow(prop,from){
    switch(prop){
+      case 'state':
+        if( from === 'operationlog' ||from === 'alertSilence'){
+          return false
+        }
+      case 'id':
+      case 'startAt':
+        if( from === 'alertSilence' ){
+          return false
+        }
+      case 'state':
+      case 'id':
      case 'alertRule':
      case 'severity':
      case 'startAt':
@@ -502,18 +516,6 @@ export const tableSet = {
      case 'idc':
      case 'alertNum':
        return'custom';
-      case 'state':
-        if( from === 'operationlog' ){
-          return false
-        }else{
-          return'custom'
-        }
-      case 'id':
-        if( from === 'alertSilence' ){
-          return false
-        }else{
-          return'custom'
-        }
      default : return false;
    }
  },
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1362,10 +1362,6 @@
                pen:data,
                pens:null,
              };
-              if(data.data.expressArr.length===0){
-                data.data.expressArr.push('');
-                data.data.legends.push('');
-              }
              this.$nextTick(()=>{
                if(this.$refs.CanvasProps){
                  if(this.penId!==data.id){
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -33,16 +33,35 @@
            </el-radio-group>
          </div>
          <div class="datepicker">
+            <div class="datepicker-box">
+              <span class="datepicker-title">start time</span>
              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
-                            format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="editAlertSilence.time"
-                            type="datetimerange"
+                              format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
+                              :picker-options="optionsStartAt"
+                              type="datetime"
+                              :clearable="false"
                              popper-class="panel-time-picker-popper"
-                            :range-separator="$t('dashboard.panel.to')"
-                            :start-placeholder="$t('dashboard.panel.startTime')"
-                            :end-placeholder="$t('dashboard.panel.endTime')" align="right"
+                              :placeholder="$t('dashboard.panel.startTime')"
+                              align="right"
              >
              </el-date-picker>
            </div>
+            <div style="width: 50px;text-align: center">{{$t('dashboard.panel.to')}}</div>
+            <div class="datepicker-box">
+              <span class="datepicker-title">end time</span>
+              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+                              format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
+                              :picker-options="optionsEndAt"
+                              type="datetime"
+                              :clearable="false"
+                              popper-class="panel-time-picker-popper"
+                              :placeholder="$t('dashboard.panel.startTime')"
+                              align="right"
+              >
+              </el-date-picker>
+            </div>
+            <!--( :range-separator="")-->
+          </div>
        </el-form-item>

        <el-form-item :label='$t("alert.silence.matcher")' prop="matcher" class="matcher">
@@ -140,11 +159,11 @@
          if(obj.linkId==-1){
            obj.linkId=null;
          }
+          console.log(obj);
          this.editAlertSilence=Object.assign(this.editAlertSilence,obj);
-          console.log(this.editAlertSilence);
-          this.editAlertSilence.time=[];
-          this.editAlertSilence.time.push(this.editAlertSilence.startAt);
-          this.editAlertSilence.time.push(this.editAlertSilence.endAt);
+          this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
+          this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
+          this.editAlertSilence.time=this.startAtTamp;
          this.rangeTimeCallback();
          this.typeChange(this.editAlertSilence.type,obj.linkId);
          if(obj.linkId || obj.ruleId){
@@ -154,6 +173,16 @@
      }
    },
    data(){
+      let that=this;
+      let validate = (rule, value, callback) => {
+        if(!this.editAlertSilence.startAt){
+          callback(new Error('请选择开始时间!'));
+        }else if(!this.editAlertSilence.endAt){
+          callback(new Error('请选择结束时间!'));
+        } else{
+          callback();
+        }
+      };
      return {
        editAlertSilence:{
          id:'',
@@ -169,7 +198,9 @@
        },
        rules:{
          time: [
-            { required: true, message: this.$t('alert.silence.selectTime'), trigger: 'change' },
+            // { required: true, message: this.$t('alert.silence.selectTime'), trigger: 'change' },
+            { required: true, trigger: 'change'},
+            { validator: validate, trigger: 'change' }
          ],
          matcher:[
            { required: true, message: this.$t('alert.silence.selectMather'), trigger: 'change' },
@@ -192,6 +223,19 @@
        projectData:null,
        moduleData:null,
        endpointData:null,
+        startAtTamp:'',
+        endAtTamp:'',
+        optionsEndAt:{
+          disabledDate(date,val){
+            console.log( that.startAtTamp,val);
+            return date.getTime() <= that.startAtTamp - 24*60*60*1000;
+          },
+        },
+        optionsStartAt:{
+          disabledDate(date){
+            return date.getTime() >= that.endAtTamp - 60*60*1000 ;
+          },
+        }
      }
    },
    mounted(){
@@ -214,9 +258,12 @@
        this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId ;
        console.log(this.editAlertSilence);
        this.$refs.alertSilenceForm.validate((valid)=>{
-          this.editAlertSilence.startAt=this.editAlertSilence.time[0];
-          this.editAlertSilence.state=1;
-          this.editAlertSilence.endAt=this.editAlertSilence.time[1];
+          if(this.endAtTamp < this.startAtTamp){
+            this.$message({
+              message: '结束时间必须大于开始时间',
+              type: 'error'
+            });
+          }
          let params={...this.editAlertSilence};
          delete  params.time;
          delete  params.matcher;
@@ -279,16 +326,19 @@
          }
        })
      },
-      dateChange(val){
-        if(val){
-          this.editAlertSilence.time[0]=bus.timeFormate(val[0],'yyyy-MM-dd hh:mm:ss');
-          this.editAlertSilence.time[1]=bus.timeFormate(val[1],'yyyy-MM-dd hh:mm:ss');
+      dateChange(val,type){
+        console.log(val)
+        if(type==='startAt'){
+          this.startAtTamp=new Date(val).getTime();
+        } else if(type==='endAt'){
+          this.endAtTamp=new Date(val).getTime();
        }
+        this.$forceUpdate
        this.rangeTimeCallback()
      },
      rangeTimeCallback(){
        if(this.editAlertSilence.time){
-          let num=new Date(this.editAlertSilence.time[1]).getTime() - new Date(this.editAlertSilence.time[0]).getTime();
+          let num=new Date(this.editAlertSilence.endAt).getTime() - new Date(this.editAlertSilence.startAt).getTime();
          this.rangeTime=num/(60*60*1000);//以小时为单位
        }else{
          this.rangeTime=null;
@@ -296,7 +346,11 @@
      },
      rangeTimeChange(val){
        let arr=[bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),bus.timeFormate(bus.getOffsetTimezoneData(val*1),'yyyy-MM-dd hh:mm:ss')]
-        this.$set(this.editAlertSilence,'time',arr)
+        this.$set(this.editAlertSilence,'startAt',arr[0]);
+        this.$set(this.editAlertSilence,'endAt',arr[1]);
+        this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
+        this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
+        this.$forceUpdate
      },
      matcherChange(val){
        this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
@@ -310,16 +364,16 @@
          this.editAlertSilence.name=val.name;
        }
        if(this.editAlertSilence.type==='asset'){
-          this.editAlertSilence.name=val.idc.name+'/'+val.sn
+          this.editAlertSilence.name=val.sn
        }
        if(this.editAlertSilence.type==='project'){
          this.editAlertSilence.name=val.name;
        }
        if(this.editAlertSilence.type==='module'){
-          this.editAlertSilence.name=val.project.name +'/'+val.name;
+          this.editAlertSilence.name=val.name;
        }
        if(this.editAlertSilence.type==='endpoint'){
-          this.editAlertSilence.name=val.project.name +'/'+val.module.name+'/'+val.name;
+          this.editAlertSilence.name=val.name;
        }


@@ -442,10 +496,6 @@
        }

      },
-      returnOnj(obj){
-        console.log(obj);
-        return {...obj,name:''}
-      }
    }
  }
 </script>
@@ -466,6 +516,22 @@

    .datepicker {
      margin-top: 20px;
+      display: flex;
+      .datepicker-box{
+        flex: 1;
+        position: relative;
+        /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
+          width: 100%;
+        }
+        /deep/ .el-input__inner{
+          text-align: center;
+        }
+        .datepicker-title{
+          position: absolute;
+          left: 15px;
+          z-index: 1;
+        }
+      }
    }
  }
  .matcher{
--- a/nezha-fronted/src/components/page/alert/silence.vue
+++ b/nezha-fronted/src/components/page/alert/silence.vue
@@ -64,26 +64,26 @@
        <template slot-scope="scope" :column="item">
          <div v-if="item.prop == 'option'" class="content-right-options">
            <span :id="'alert-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)"
-                  class="content-right-option" v-has="'alert_silence_modify'" v-if="scope.row.buildIn != 1"><i
-              class="nz-icon nz-icon-edit"></i>
+                  class="content-right-option" v-has="'alert_silence_modify'" v-if="scope.row.state!==3">
+              <i class="nz-icon nz-icon-edit"></i>
            </span>
            <span
              :id="'alert-del-'+scope.row.id"
              :title="$t('overall.delete')"
              @click="overtime(scope.row)"
              class="content-right-option"
-              v-if="scope.row.state===1"
+              v-if="scope.row.state!==3"
              v-has="'alert_silence_delete'">
              <i  class="nz-icon nz-icon-chaoshi"></i>
            </span>
            <span
-              :id="'alert-del-'+scope.row.id"
-              :title="$t('overall.delete')"
-              @click="del(scope.row)"
+              :id="'alert-copy-'+scope.row.id"
+              :title="$t('overall.copy')"
+              @click="copyRow(scope.row,'alertSilence')"
              class="content-right-option"
-              v-if="scope.row.state===2"
-              v-has="'alert_silence_delete'">
-              <i  class="nz-icon nz-icon-delete"></i>
+              v-if="scope.row.state===3"
+              v-has="'alertsilence_save'">
+              <i  class="nz-icon nz-icon-override"></i>
            </span>
          </div>
          <template v-else-if="item.prop == 'duration'">
@@ -108,8 +108,8 @@
            </div>
          </template>
          <template v-else-if="item.prop == 'state'">
-            <span v-if="scope.row.state===1" class="silence-active">active</span>
-            <span v-if="scope.row.state===2" class="silence-pending">pending</span>
+            <span v-if="scope.row.state===1" class="silence-pending">pending</span>
+            <span v-if="scope.row.state===2" class="silence-active">active</span>
            <span v-if="scope.row.state===3" class="silence-expired">expired</span>
          </template>
          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
@@ -511,9 +511,10 @@
  }
  .nz-silence-tag-box{
    width: 100%;
+    height: 100%;
    .nz-silence-tag{
-      float: left;
-      margin-top: 5px;
+      /*float: left;*/
+      /*margin-top: 5px;*/
    }
  }
  .nz-silence-tag{
@@ -572,11 +573,11 @@
    padding: 0 5px;
  }
  .silence-expired{
-    background: #FFE3DC;
+    background: #9e9c98;
    border-radius: 4px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
-    color: #EC7F66;
+    color: #ffffff;
    line-height: 14px;
    font-weight: 400;
    padding: 0 5px;
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -187,6 +187,32 @@ Vue.mixin({
    translation(key) {
      return i18n.t(key);
    },
+    copyRow(row,rightBoxValKey,idKey= 'id',show = false,format,callback){
+      /*
+      row 表格当前行
+      rightBoxValKey 右侧弹窗绑定的 data
+      idKey 当前数据的唯一标识
+      show 打开对应的弹窗 函数
+      format 是否需要对当前行进行处理
+      callBack 回调
+      */
+      let rowCopy={...row};
+      if(format){
+        rowCopy=format(rowCopy)
+      }
+      delete rowCopy[idKey];
+      this[rightBoxValKey]=rowCopy;
+      if(typeof show==='function'){
+        show()
+      }else if(typeof show==='string'){
+        this[show]=true
+      }  else {
+        this['rightBox']['show']=true;
+      }
+      if(callback){
+        callback()
+      }
+    },
  },
  computed: {
    getMenuList() {