feat: add excluded tags for notification rules

src/components/NotificationHistoryList.vue

@@ -38,8 +38,19 @@
             <td>{{ props.item.receiver }}</td>
             <td>{{ props.item.sender }}</td>
             <td>{{ props.item.channel }}</td>
-            <td>{{ props.item.rule }}</td>
-            <td>{{ props.item.alert }}</td>
+            <td
+              class="clickable"
+              @click="findNotificationRule(props.item.rule)"
+            >
+              {{ props.item.rule }}
+            </td>
+            <td
+              class="clickable"
+              @click="findAlert(props.item.alert)"
+            >
+              {{ props.item.alert }}
+            </td>
+            <td>{{ props.item.error }}</td>
             <td>{{ props.item.confirmed }}</td>
             <td>{{ props.item.confirmed_time }}</td>
           </tr>
@@ -83,6 +94,7 @@ export default {
       { text: i18n.t('Channel'), value: 'channel' },
       { text: i18n.t('NotificationRule'), value: 'rule' },
       { text: i18n.t('Alert'), value: 'alert' },
+      { text: i18n.t('Error'), value: 'error' },
       { text: i18n.t('Confirmed'), value: 'confirmed' },
       { text: i18n.t('ConfirmedTime'), value: 'confirmed_time' },
     ],
@@ -150,8 +162,21 @@ export default {
       const config = this.$store.getters.getConfig('colors')
       return config.severity[confirmed ? 'ok' : sent ? 'warning' : 'critical'] || 'white'
     },
+    findAlert(id){
+      this.$router.push({ path: `/alerts?q=id:"${id}"` })
+    },
+    findNotificationRule(id){
+      this.$router.push({ path: `/notificationrules?q=id:"${id}"` })
+    }
   }
 }
 </script>
 
-<style></style>
+<style>
+td.clickable {
+  cursor: pointer;
+  color: #3f51b5;
+  font-weight: 400;
+  text-decoration: underline;
+}
+</style>

src/components/NotificationRuleList.vue

@@ -139,8 +139,8 @@
                   xs8
                 >
                   <v-menu
-                    ref="menu1"
-                    v-model="menu1"
+                    ref="menu2"
+                    v-model="menu2"
                     :close-on-content-click="false"
                     :nudge-right="40"
                     lazy
@@ -159,7 +159,7 @@
                     <v-date-picker
                       v-model="editedItem.reactivateDate"
                       no-title
-                      @input="menu1 = false"
+                      @input="menu2 = false"
                     />
                   </v-menu>
                 </v-flex>
@@ -434,6 +434,35 @@
                   </v-combobox>
                 </v-flex>
 
+                <v-flex xs12>
+                  <v-combobox
+                    v-model="editedItem.excludedTags"
+                    :items="currentTags"
+                    :label="$t('Excluded Tags')"
+                    multiple
+                    chips
+                  >
+                    <template
+                      slot="selection"
+                      slot-scope="data"
+                    >
+                      <v-chip
+                        :key="JSON.stringify(data.item)"
+                        :selected="data.selected"
+                        :disabled="data.disabled"
+                        class="v-chip--select-multi"
+                        label
+                        small
+                        @input="data.parent.selectItem(data.item)"
+                      >
+                        <v-icon left>
+                          label
+                        </v-icon>{{ data.item }}
+                      </v-chip>
+                    </template>
+                  </v-combobox>
+                </v-flex>
+
                 <v-flex xs12>
                   <v-text-field
                     v-model.trim="editedItem.text"
@@ -506,6 +535,7 @@
           hide-details
           :label="$t('Search')"
           @change="setSearch"
+          @click:clear="clearSearch"
         />
       </v-card-title>
 
@@ -618,6 +648,18 @@
               </v-icon>{{ tag }}
             </v-chip>
           </td>
+          <td>
+            <v-chip
+              v-for="tag in props.item.excludedTags"
+              :key="tag"
+              label
+              small
+            >
+              <v-icon left>
+                label
+              </v-icon>{{ tag }}
+            </v-chip>
+          </td>
           <td class="text-xs-left">
             {{ props.item.user }}
           </td>
@@ -727,6 +769,7 @@ export default {
       { text: i18n.t('Event'), value: 'event' },
       { text: i18n.t('Group'), value: 'group' },
       { text: i18n.t('Tags'), value: 'tags' },
+      { text: i18n.t('Excluded Tags'), value: 'excludedTags' },
       { text: i18n.t('User'), value: 'user' },
       { text: 'Text', value: 'text' },
       { text: i18n.t('Actions'), value: 'name', sortable: false }
@@ -746,6 +789,7 @@ export default {
       event: null,
       group: null,
       tags: [],
+      excludedTags: [],
       period: {
         startTime: '',
         endTime: ''
@@ -776,6 +820,7 @@ export default {
       event: null,
       group: null,
       tags: [],
+      excludedTags: [],
       period: {
         startTime: '',
         endTime: ''
@@ -955,6 +1000,13 @@ export default {
   methods: {
     setSearch(query) {
       this.$store.dispatch('notificationRules/updateQuery', {q: query})
+      this.$router.push({query: {...this.$router.query, q: query}})
+      this.refresh_all()
+    },
+    clearSearch() {
+      this.query = null
+      this.$store.dispatch('notificationRules/updateQuery', {})
+      this.$router.push({query: {...this.$router.query, q: undefined}})
       this.refresh_all()
     },
     getNotificationRules() {
@@ -1092,6 +1144,7 @@ export default {
             event: this.editedItem.event,
             group: this.editedItem.group,
             tags: this.editedItem.tags,
+            excludedTags: this.editedItem.excludedTags,
             startTime: sTimeStr,
             endTime: eTimeStr,
             text: this.editedItem.text.replace(/\{([\w\[\]\. ]*)\}/g, '%($1)s'),

src/router.ts

@@ -82,6 +82,9 @@ export function createRouter(basePath): VueRouter {
       {
         path: '/notificationrules',
         name: 'notificationrules',
+        props: route => ({
+          query: route.query
+        }),
         component: () => import(/* webpackChunkName: 'user' */ './views/NotificationRule.vue'),
         meta: {title: 'NotificationRules', requiresAuth: true}
       },

src/views/NotificationRule.vue

@@ -4,14 +4,27 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+<script>
 import NotificationRuleList from '@/components/NotificationRuleList.vue'
 
-@Component({
+export default {
   components: {
     NotificationRuleList
+  },
+  props: {
+    query: {
+      type: Object,
+      required: false,
+      default: () => {}
+    }
+  },
+  created (){
+    this.setSearch(this.query)
+  },
+  methods: {
+    setSearch(query) {
+      this.$store.dispatch('notificationRules/updateQuery', query)
+    }
   }
-})
-export default class NotificationRule extends Vue {}
+}
 </script>