From c5a80fa4c23c1b9060960e68aeb6cc06986f2594 Mon Sep 17 00:00:00 2001
From: sbgap <sb@gapit.io>
Date: Mon, 25 Nov 2024 13:29:01 +0100
Subject: [PATCH 1/2] feat: add all/and and any/or function for tags in
 notification rules

---
 src/components/NotificationRuleList.vue | 156 ++++++++++++++++++------
 1 file changed, 119 insertions(+), 37 deletions(-)

diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
index a7153de1..ba9770ae 100644
--- 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')

From a1f2be8874c3cdf35800bbfe32994f7f12f5557b Mon Sep 17 00:00:00 2001
From: sbgap <sb@gapit.io>
Date: Tue, 26 Nov 2024 13:49:04 +0100
Subject: [PATCH 2/2] feat: add and/all and or/any function to excluded tags in
 notification rules

---
 src/components/NotificationRuleList.vue | 164 ++++++++++++++++++------
 1 file changed, 123 insertions(+), 41 deletions(-)

diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
index ba9770ae..1c13b4b5 100644
--- a/src/components/NotificationRuleList.vue
+++ b/src/components/NotificationRuleList.vue
@@ -578,32 +578,84 @@
                 </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-card>
+                    <v-toolbar>
+                      <v-toolbar-title>Excluded Tags</v-toolbar-title>
+
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="
+                          editedItem.excludedTags = [...editedItem.excludedTags, { all: [], any: []}]
+                        "
+                      >
+                        add
+                        <v-icon>add</v-icon>
+                      </v-btn>
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="editedItem.excludedTags = []"
                       >
-                        <v-icon left>
-                          label
-                        </v-icon>{{ data.item }}
-                      </v-chip>
-                    </template>
-                  </v-combobox>
+                        clear
+                        <v-icon>
+                          clear
+                        </v-icon>
+                      </v-btn>
+                    </v-toolbar>
+                    <v-container>
+                      <v-layout
+                        v-for="(tag, index) in editedItem.excludedTags"
+                        :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.excludedTags.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>
@@ -892,12 +944,12 @@
                   >
                     AND:
                     <v-chip
-                      v-for="severity in tag.all"
-                      :key="severity"
+                      v-for="t in tag.all"
+                      :key="t"
                       outline
                       small
                     >
-                      {{ severity }}
+                      {{ t }}
                     </v-chip>
                   </v-flex>
                   <v-flex 
@@ -906,12 +958,12 @@
                   >
                     OR:
                     <v-chip
-                      v-for="severity in tag.any"
-                      :key="severity"
+                      v-for="t in tag.any"
+                      :key="t"
                       outline
                       small
                     >
-                      {{ severity }}
+                      {{ t }}
                     </v-chip>
                   </v-flex>
                 </v-layout>
@@ -920,16 +972,46 @@
             </div>
           </td>
           <td>
-            <v-chip
-              v-for="tag in props.item.excludedTags"
-              :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.excludedTags"
+                :key="index"
+                grid-list-md
+                style="padding: 1px;"
+              >
+                <v-layout>
+                  <v-flex 
+                    v-if="!emptyArray(tag.all)"
+                    xs12
+                  >
+                    AND:
+                    <v-chip
+                      v-for="t in tag.all"
+                      :key="t"
+                      outline
+                      small
+                    >
+                      {{ t }}
+                    </v-chip>
+                  </v-flex>
+                  <v-flex 
+                    v-if="!emptyArray(tag.any)"
+                    xs12 
+                  >
+                    OR:
+                    <v-chip
+                      v-for="t in tag.any"
+                      :key="t"
+                      outline
+                      small
+                    >
+                      {{ t }}
+                    </v-chip>
+                  </v-flex>
+                </v-layout>
+                <v-divider v-if="index < props.item.excludedTags.length - 1" />
+              </v-container>
+            </div>
           </td>
           <td class="text-xs-left">
             {{ props.item.user }}