fix; 修改 alertMessage 不显示图标的问题， alert rule的校验问题以及 alertRuleTanle的翻页功能

2021-09-09 10:30:03 +08:00
parent 524e3297aa
commit 07a1d6f234
6 changed files with 28 additions and 16 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -718,7 +718,7 @@ export default {
          let by = ' by ('

          for (const k in obj.labels) {
-            if (k != 'alertname' && k != 'severity' && k != 'severity_id') {
+            if (k != 'alertname' && k != 'severity' && k != 'severity_id' && k != 'rule_type') {
              intoLabels = true
              group += k
              group += '='
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -380,7 +380,7 @@ export default {
          let by = ' by ('

          for (const k in obj.labels) {
-            if (k != 'alertname' && k != 'severity' && k != 'severity_id') {
+            if (k != 'alertname' && k != 'severity' && k != 'severity_id' && k != 'rule_type') {
              intoLabels = true
              group += k
              group += '='
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -20,7 +20,7 @@
          <!--type-->
          <el-form-item :label="$t('overall.type')" prop="type" class="half-form-item">
            <el-select
-              v-model="fromData.status"
+              v-model="editAlertRule.type"
              class="right-box__select"
              popper-class="right-box-select-dropdown prevent-clickoutside"
              size="small"
@@ -81,7 +81,14 @@
            <el-input id="alert-box-input-oid" v-model="editAlertRule.expr" size="small" type="text"></el-input>
          </el-form-item>
          <!--threshold-->
-          <el-form-item :label="$t('alert.config.threshold')" prop="threshold" class="half-form-item" style="display: inline-block;">
+          <el-form-item
+            :label="$t('alert.config.threshold')"
+            prop="threshold" class="half-form-item"
+            style="display: inline-block;"
+            :rules="[
+              { required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
+              { validator: nzNumber, trigger: 'blur' }
+             ]">
            <el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text" :disabled="!showSnmpTrap">
              <el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="prevent-clickoutside" size="small" :disabled="!showSnmpTrap">
                <el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -89,7 +96,7 @@
            </el-input>
          </el-form-item>
          <!--unit-->
-          <el-form-item :label="$t('alert.config.unit')" class="half-form-item" prop="unit">
+          <el-form-item :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
            <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
                         placeholder=""
                         popper-class="no-style-class unit-popper-class"
@@ -396,13 +403,6 @@ export default {
        ],
        operator: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        unit: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        threshold: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: nzNumber, trigger: 'blur' }
        ]
      },
      operators: [
@@ -464,6 +464,7 @@ export default {
    }
  },
  methods: {
+    nzNumber: nzNumber,
    clickOutside () {
      this.esc(false)
    },
@@ -610,6 +611,7 @@ export default {
          this.showTypeSelect = true // 当 edit 时禁用 type下拉框
          if (n.type === 1) {
            this.fromData.status = 'Metrics'
+            this.showMetrics = true
            this.MetricsType = 1 // 默认保存 type
          } else if (n.type === 2) {
            this.fromData.status = 'Logs'
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -108,7 +108,7 @@
      fixed="right">
      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
      <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <button v-if="scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
        <el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="hover" @command="tableOperation">
          <div class="table-operation-item table-operation-item--more">
            <i class="nz-icon nz-icon-more3"></i>
@@ -160,6 +160,7 @@ export default {
      graphShow: false,
      chartDatas: [],
      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      exclusiveLabels: ['_id', 'severity'],
      legend: [],
      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
      currentMsg: {},
@@ -263,15 +264,23 @@ export default {
      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) {
          result.push({ label: key, value: labels[key] })
          delete labels[key]
        }
      }
-      /* Object.keys(labels).sort().forEach(key => {
+      Object.keys(labels).sort().forEach(key => {
        result.push({ label: key, value: labels[key] })
-      }) */
+        delete labels[key]
+      })
      return result
    },
    chartUnitChange: function (unit) {
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -242,6 +242,7 @@ export default {
      const arr = weekstr.split(',')
      let str = ''
      arr.forEach((item, index) => {
+        if (!item) return
        if (index === arr.length - 1) {
          str += this.weekList[item - 1].label
        } else {
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -476,7 +476,7 @@ export default {
          let by = ' by ('

          for (const k in obj.labels) {
-            if (k != 'alertname' && k != 'severity' && k != 'severity_id') {
+            if (k != 'alertname' && k != 'severity' && k != 'severity_id' && k != 'rule_type') {
              intoLabels = true
              group += k
              group += '='