From d1fa2284a92eb5f351f91394b0fb6080acf05548 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 11 May 2021 19:43:59 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9alert=20rule=20me?=
 =?UTF-8?q?thods=20receiver=20=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/alertSilenceBox.vue       | 40 ++++++++++++++++---
 .../common/table/alert/alertRuleTable.vue     | 11 ++---
 .../common/table/alert/alertSilenceTable.vue  |  7 ++--
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 065cb18ce..2205b348e 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -64,7 +64,14 @@
         <el-form-item :label='$t("alert.silence.matchers")' prop="matchers" class="matchers">
           <div v-for="(item, index) in editAlertSilence.matchers" :key="index" class="param-box-row">
             <el-form-item class="param-box-row-key" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" :prop="'matchers.' + index + '.name'">
-              <el-input placeholder="key" size="mini" v-model="item.name"></el-input>
+              <el-autocomplete
+                class="inline-input silence-matchers-key"
+                placeholder="key"
+                size="mini"
+                v-model="item.name"
+                :fetch-suggestions="querySearch"
+                @select="handleSelect"
+              ></el-autocomplete>
             </el-form-item>
             <span class="param-box-row-eq">=</span>
             <el-form-item class="param-box-row-value" :prop="'matchers.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" >
@@ -111,7 +118,8 @@
 </template>
 
 <script>
-import bus from '../../../libs/bus'
+import bus from '@/libs/bus'
+import { sameLabels } from '@/components/common/js/constants'
 // import selectAlertSilence from '../alert/selectAlertSilence'
 export default {
   name: 'alertSilenceBox',
@@ -174,8 +182,8 @@ export default {
           { validator: validate, trigger: 'change' }
         ],
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' },
-        ],
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
       },
       rangeTime: '',
       ruleList: [],
@@ -319,6 +327,25 @@ export default {
         this.editAlertSilence.matchers = [{ name: '', value: '', regex: 0 }]
       }
       this.editAlertSilence.matchers.splice(index, 1)
+    },
+    querySearch (queryString, cb) {
+      const labels = sameLabels.map(item=>{
+        return {
+          name :item,
+          value: item
+        }
+      })
+      const results = queryString ? labels.filter(this.createFilter(queryString)) : labels
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (label) => {
+        return (label.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    handleSelect (item) {
+      console.log(item)
     }
   }
 }
@@ -366,7 +393,7 @@ export default {
     }
     /deep/ .el-form-item__error{
       left: 126px;
-      padding-top: 10px;
+      padding-top: 5px;
     }
     .matchers-type{
       display: flex;
@@ -400,6 +427,9 @@ export default {
   /deep/ .silence-matchers-value{
     width: calc(100% - 100px);
   }
+  /deep/ .silence-matchers-key{
+    width: 100%;
+  }
   .silence-matchers-regex{
     margin-left: 10px;
   }
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 5c826a57e..31edd581e 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -94,10 +94,6 @@ export default {
           sortable: 'custom'
         },
         {
-          label: this.$t('alert.method'),
-          prop: 'method',
-          show: true,
-        }, {
           label: this.$t('alert.config.expr'),
           prop: 'expr',
           show: true
@@ -135,7 +131,12 @@ export default {
         }, {
           label: this.$t('alert.config.receiver'),
           prop: 'receivers',
-          show: true
+          show: false
+        },
+        {
+          label: this.$t('alert.notify'),
+          prop: 'method',
+          show: false
         }
       ]
     }
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index b70a3edd6..c06c2295b 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -108,6 +108,7 @@
 import table from '@/components/common/mixin/table'
 import { calcDurationByStringTimeB } from '@/components/common/js/tools'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
+import { sameLabels } from '@/components/common/js/constants'
 export default {
   name: 'alertSilenceTable',
   components: {
@@ -154,7 +155,7 @@ export default {
         }, {
           label: this.$t('alert.silence.upTime'),
           prop: 'utime',
-          show: true,
+          show: false,
           width: 120
         }, {
           label: this.$t('alert.silence.state'),
@@ -176,7 +177,7 @@ export default {
     },
     tagType () {
       return (key) => {
-        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+        if (sameLabels.find(item => item === key)) {
           return 'normal'
         } else {
           return 'info'
@@ -187,7 +188,7 @@ export default {
   methods: {
     labelsSort (obj) {
       obj = obj || []
-      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      const buildIn = sameLabels
       if (typeof obj === 'string') obj = JSON.parse(obj)
       const labels = JSON.parse(JSON.stringify(obj))
       const result = []