feat : 添加alertMessageinfo detail

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -73,6 +73,23 @@
     .el-tabs__nav{
       border: none;
     }
+    .info-box-header{
+      height: 100%;
+      overflow-y: auto;
+    }
+    .info-box-title{
+      font-size: 16px;
+      color: $--color-text-primary;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+    .info-box-content{
+      font-size: 14px;
+      color: #666666;
+      font-weight: 400;
+      width: 100%;
+      margin-bottom: 40px;
+    }
   }
 }
 

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

@@ -1,21 +1,42 @@
 <template>
-  <div class="">
+  <div class="info-box-header">
     <div v-for="item in cardNames" :key="item.key" v-if="infoData[item.key]">
-      <div>{{item.label}}</div>
+      <div class="info-box-title">{{item.label}}</div>
-      <div v-if="item.key === 'summary' || item.key === 'remark'">
+      <div v-if="item.key === 'summary' || item.key === 'remark'" class="info-box-content">
         {{infoData[item.key]}}
       </div>
-      <div v-if="item.key==='labels'">
+      <div v-if="item.key==='labels'" class="info-box-content">
-        labels
+         <span v-for="(item, i) in labelsSort(infoData.labels)" :key="i">
+            <span
+              @mouseenter="labelHover(infoData, item.label, true, true, $event)"
+              @mouseleave="labelHover(infoData, item.label, false, true,)">
+              <nz-alert-tag
+                v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
+                :label="item.label"
+                :type="tagType(item.label)"
+                style="margin: 5px 0 5px 5px;"
+              >
+               {{item.value}}
+              </nz-alert-tag>
+            </span>
+          </span>
       </div>
-      <div v-if="item.key==='startAt'">
+      <div v-if="item.key==='startAt'" class="info-box-content">
         {{utcTimeToTimezoneStr(infoData[item.key])}}
       </div>
     </div>
+    <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+    ></alertLabel>
   </div>
 </template>
 
 <script>
+import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageInfoDetail',
   props: {
@@ -23,6 +44,7 @@ export default {
       type: Object
     }
   },
+  mixins: [alertMessageLabelMixin, alertLabelMixin],
   data () {
     return {
       cardNames: [

nezha-fronted/src/components/common/alert/alertMessageLabelMixin.js

@@ -0,0 +1,67 @@
+import nzAlertTag from '@/components/page/alert/nzAlertTag'
+export default {
+  components: {
+    nzAlertTag
+  },
+  data () {
+    return {
+      exclusiveLabels: ['_id', 'severity', '__name__']
+    }
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
+      }
+    },
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.projectName')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
+          }
+        }
+        return key + '：' + value
+      }
+    }
+  },
+  methods: {
+    labelsSort (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'datacenter', 'project', 'parent_asset', 'user']
+      if (typeof obj === 'string') obj = JSON.parse(obj)
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of this.exclusiveLabels) {
+        Object.keys(labels).forEach(labelsKey => {
+          if (labelsKey.indexOf(key) !== -1) {
+            delete labels[labelsKey]
+          }
+        })
+      }
+      for (const key of buildIn) {
+        if (key in labels) {
+          if (key === 'datacenter') {
+            result.push({ label: 'dc', value: labels.datacenter })
+            delete labels.datacenter
+          } else {
+            result.push({ label: key, value: labels[key] })
+          }
+          delete labels[key]
+        }
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+        delete labels[key]
+      })
+      return result
+    }
+  }
+}

nezha-fronted/src/components/common/mixin/alertLabelMixin.js

@@ -1,4 +1,8 @@
+import alertLabel from '@/components/common/alert/alertLabel'
 export default {
+  components: {
+    alertLabel
+  },
   data () {
     return {
       alertLabelShow: false,

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

@@ -139,19 +139,16 @@
 import bus from '../../../../libs/bus'
 import axios from 'axios'
 import table from '@/components/common/mixin/table'
-import nzAlertTag from '../../../page/alert/nzAlertTag'
 import chartDataFormat from '../../../charts/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
-import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
 export default {
   name: 'alertMessageTable',
   components: {
-    nzAlertTag,
     alertRuleInfo: alertRuleInfo,
-    alertLabel: alertLabel
   },
   props: {
     nowTime: {
@@ -165,7 +162,7 @@ export default {
     loading: Boolean,
     chartAlertList: Boolean
   },
-  mixins: [table, bus, alertLabelMixin],
+  mixins: [table, bus, alertLabelMixin, alertMessageLabelMixin],
   data () {
     return {
       /* 二级列表相关 */
@@ -176,7 +173,6 @@ export default {
       graphShow: false,
       chartDatas: [],
       sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'dc'],
-      exclusiveLabels: ['_id', 'severity', '__name__'],
       legend: [],
       searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
       currentMsg: {},
@@ -254,29 +250,6 @@ export default {
     }
   },
   computed: {
-    tagType () {
-      return (key) => {
-        if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') {
-          return 'normal'
-        } else {
-          return 'info'
-        }
-      }
-    },
-    tagValue () {
-      return (key, value) => {
-        if (key == 'type') {
-          if (value == 1) {
-            value = this.$t('project.project.projectName')
-          } else if (value == 2) {
-            value = this.$t('module.module.module')
-          } else if (value == 3) {
-            value = this.$t('asset.asset')
-          }
-        }
-        return key + '：' + value
-      }
-    },
     getDuration () {
       return function (record) {
         if (record.endAt) {
@@ -297,35 +270,6 @@ export default {
         }
       })
     },
-    labelsSort (obj) {
-      const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'datacenter', 'project', 'parent_asset', 'user']
-      if (typeof obj === 'string') obj = JSON.parse(obj)
-      const labels = JSON.parse(JSON.stringify(obj))
-      const result = []
-      for (const key of this.exclusiveLabels) {
-        Object.keys(labels).forEach(labelsKey => {
-          if (labelsKey.indexOf(key) !== -1) {
-            delete labels[labelsKey]
-          }
-        })
-      }
-      for (const key of buildIn) {
-        if (key in labels) {
-          if (key === 'datacenter') {
-            result.push({ label: 'dc', value: labels.datacenter })
-            delete labels.datacenter
-          } else {
-            result.push({ label: key, value: labels[key] })
-          }
-          delete labels[key]
-        }
-      }
-      Object.keys(labels).sort().forEach(key => {
-        result.push({ label: key, value: labels[key] })
-        delete labels[key]
-      })
-      return result
-    },
     chartUnitChange: function (unit) {
       this.chartUnit = unit
       this.$nextTick(() => {