feat: add all/and and any/or function for tags in notification rules

gapitio · Nov 25, 2024 · c5a80fa · c5a80fa
1 parent 1da249c
commit c5a80fa
Showing 1 changed file with 119 additions and 37 deletions.
diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
@@ -497,32 +497,84 @@
                 </v-flex>
 
                 <v-flex xs12>
-                  <v-combobox
-                    v-model="editedItem.tags"
-                    :items="currentTags"
-                    :label="$t('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-card>
+                    <v-toolbar>
+                      <v-toolbar-title>Tags</v-toolbar-title>
+
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="
+                          editedItem.tags = [...editedItem.tags, { all: [], any: []}]
+                        "
                       >
-                        <v-icon left>
-                          label
-                        </v-icon>{{ data.item }}
-                      </v-chip>
-                    </template>
-                  </v-combobox>
+                        add
+                        <v-icon>add</v-icon>
+                      </v-btn>
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="editedItem.tags = []"
+                      >
+                        clear
+                        <v-icon>
+                          clear
+                        </v-icon>
+                      </v-btn>
+                    </v-toolbar>
+                    <v-container>
+                      <v-layout
+                        v-for="(tag, index) in editedItem.tags"
+                        :key="index"
+                        wrap
+                        xs12
+                      >
+                        <v-flex xs10>
+                          <v-layout> 
+                            <v-flex xs6>
+                              <v-combobox 
+                                v-model="tag.all"
+                                v-tooltip="'start'"
+                                :items="currentTags"
+                                :label="$t('AND')"
+                                tooltip="test"
+                                chips
+                                multiple
+                                xs4
+                              />
+                            </v-flex>
+                            <v-flex xs6>
+                              <v-combobox
+                                v-model="tag.any"
+                                :items="currentTags"
+                                :label="$t('OR')"
+                                chips
+                                multiple
+                              />
+                            </v-flex>         
+                          </v-layout>
+                        </v-flex>                                                 
+                        <v-flex 
+                          xs2
+                          align-self-center
+                        >
+                          <v-btn
+                            icon
+                            @click="
+                              editedItem.tags.splice(index, 1)
+                            "
+                          >
+                            <v-icon>delete</v-icon>
+                          </v-btn>
+                        </v-flex>
+                        <v-flex>
+                          <v-divider />
+                        </v-flex>
+                      </v-layout>
+                    </v-container>
+                  </v-card>
                 </v-flex>
 
                 <v-flex xs12>
@@ -826,16 +878,46 @@
           <td>{{ props.item.event }}</td>
           <td>{{ props.item.group }}</td>
           <td>
-            <v-chip
-              v-for="tag in props.item.tags"
-              :key="tag"
-              label
-              small
-            >
-              <v-icon left>
-                label
-              </v-icon>{{ tag }}
-            </v-chip>
+            <div style="margin: auto;">
+              <v-container
+                v-for="(tag, index) in props.item.tags"
+                :key="index"
+                grid-list-md
+                style="padding: 1px;"
+              >
+                <v-layout>
+                  <v-flex 
+                    v-if="!emptyArray(tag.all)"
+                    xs12
+                  >
+                    AND:
+                    <v-chip
+                      v-for="severity in tag.all"
+                      :key="severity"
+                      outline
+                      small
+                    >
+                      {{ severity }}
+                    </v-chip>
+                  </v-flex>
+                  <v-flex 
+                    v-if="!emptyArray(tag.any)"
+                    xs12 
+                  >
+                    OR:
+                    <v-chip
+                      v-for="severity in tag.any"
+                      :key="severity"
+                      outline
+                      small
+                    >
+                      {{ severity }}
+                    </v-chip>
+                  </v-flex>
+                </v-layout>
+                <v-divider v-if="index < props.item.tags.length - 1" />
+              </v-container>
+            </div>
           </td>
           <td>
             <v-chip
@@ -1026,7 +1108,6 @@ export default {
       resource: null,
       event: null,
       group: null,
-      tags: [],
       excludedTags: [],
       period: {
         startTime: '',
@@ -1037,7 +1118,8 @@ export default {
       text: '',
       days: [],
       triggers: [],
-      channelId: null
+      channelId: null,
+      tags: []
     },
     rules: {
       required: v => !!v || i18n.t('Required')