NEZ-994 fix： alert message label x修改

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -116,6 +116,37 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}</div>
       </div>
     </div>
+
+    <div class="alert-label-info" v-if="type==='datacenter'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">name</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Location</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Asset num</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Alert</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">State</div>
+        <div class="alert-label-value">
+          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'oFF'}" class="active-icon"></div>
+          {{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -271,6 +302,16 @@ export default {
           }
         })
       }
+      if (this.type === 'datacenter') {
+        this.$get('dc/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
     },
     alertActiveStr () {
       return this.$t('overall.active')

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -32,6 +32,10 @@
           </span>
         </div>-->
       </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
+        <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju" style="color: #fa901c"></i></div>
+      </div>
     </div>
   </div>
 </template>
@@ -58,6 +62,12 @@ export default {
   computed: {
     calcPosition () {
       return function (position) {
+        if (!position) {
+          return {
+            left: '0px',
+            top: '0px'
+          }
+        }
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
         const elHeight = 50
         if (position.top + elHeight > clientHeight) {
@@ -77,6 +87,13 @@ export default {
       return function (position) {
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
         const elHeight = 50
+        if (!position) {
+          if (elHeight > clientHeight) {
+            return 'alert-rule-abs-Up'
+          } else {
+            return 'alert-rule-abs'
+          }
+        }
         if (position.top + elHeight > clientHeight) {
           return 'alert-rule-tip-Up'
         } else {
@@ -93,6 +110,9 @@ export default {
       } else {
         return value
       }
+    },
+    trbShotShow () {
+      this.$emit('showText')
     }
   },
   mounted () {
@@ -134,6 +154,13 @@ export default {
     left: 0;
     transform: translate(-100%, -50%);
   }
+  .alert-rule-abs {
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
   .alert-rule-tip-Up {
     position: fixed;
     background-color: white;
@@ -158,6 +185,13 @@ export default {
     left: 0;
     transform: translate(-100%, -50%);
   }
+  .alert-rule-abs-Up {
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
   .alert-rule-info{
     border: 1px solid #ebeef5;
     border-bottom: none;

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

@@ -21,7 +21,7 @@
           <el-form-item :label="$t('overall.type')" prop="type" class="half-form-item">
             <el-select
               v-model="editAlertRule.type"
-              class="right-box__select"
+              class="right-box__select half-form-item"
               popper-class="right-box-select-dropdown prevent-clickoutside"
               size="small"
               :disabled="showTypeSelect"
@@ -116,9 +116,9 @@
           <el-form-item :label="$t('alert.config.for')" prop="last"  class="half-form-item" :rules=" [
           { required: !showSnmpTrap, message: this.$t('validate.required'), trigger: 'blur' },
         ]">
-            <el-input-number id="alert-box-input-last" :controls="false" v-model="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">
+            <el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">
               <template slot="append">{{$t('alert.config.second')}}</template>
-            </el-input-number>
+            </el-input>
           </el-form-item>
           <!--autoExpired-->
           <el-form-item :label="$t('alert.config.autoExpired')" prop="autoExpired" class="half-form-item">
@@ -216,6 +216,7 @@
               size="small"
             >
               <el-option
+                style="width: 628px"
                 v-for="item in weekList"
                 :key="item.value"
                 :label="item.label"

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -37,12 +37,16 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'alertRule'">
           <div v-if="scope.row.alertRule.name" >
-            <span
+            <el-popover
-              class="data-column__span"
+              placement="right"
-              @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
+              popper-class="alert-message-tooltip"
-              @mouseleave="alertMessageHover(scope.row.alertRule, false)"
+              style="position: relative"
-            >{{scope.row.alertRule.name}}</span>
+              @show="alertMessageHover(scope.row.alertRule, true)"
-            <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule"></alertRuleInfo>
+              @hide="alertMessageHover(scope.row.alertRule, false)"
+              trigger="hover">
+              <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
+              <span slot="reference" class="data-column__span">{{scope.row.alertRule.name}}</span>
+            </el-popover>
           </div>
           <template v-else>-</template>
         </template>
@@ -86,7 +90,7 @@
               </nz-alert-tag>
             </span>
             <alertLabel
-              v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project'||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
+              v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project' || item.label === 'datacenter' ||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
               :id="scope.row[item.label].id"
               :that="scope.row[item.label]"
               :type="item.label"
@@ -114,7 +118,7 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>
+<!--            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
           </el-dropdown-menu>
@@ -161,7 +165,7 @@ export default {
       graphShow: false,
       chartDatas: [],
       sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
-      exclusiveLabels: ['_id', 'severity'],
+      exclusiveLabels: ['_id', 'severity', '__name__'],
       legend: [],
       searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
       currentMsg: {},
@@ -222,8 +226,12 @@ export default {
   },
   computed: {
     tagType () {
-      return () => {
+      return (key) => {
-        return 'normal'
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
       }
     },
     tagValue () {
@@ -534,6 +542,7 @@ export default {
         case 'module':
         case 'endpoint':
         case 'project':
+        case 'datacenter':
           return false
         default: return true
       }
@@ -557,6 +566,9 @@ export default {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
+        if (type === 'datacenter') {
+          item[type] = item.dc
+        }
         this.$set(item[type], 'position', position)
       }
       this.$set(item[type], 'loading', loading)
@@ -579,7 +591,11 @@ export default {
 }
 
 </script>
-
+<style>
+  .alert-message-tooltip.el-popover{
+    padding: 0 !important;
+  }
+</style>
 <style scoped lang=scss>
   .pointer{
     background: #FA901c;