Port : Add "limit to tags" option for alerts

src/i18n/locales/de.json

@@ -351,6 +351,7 @@
     "affected_projects": "Betroffene Projekte",
     "age": "Alter",
     "age_tooltip": "Alter im ISO-8601-Periodenformat (z. B. P1Y = 1 Jahr; P2Y3M = 2 Jahre, 3 Monate)",
+    "alerts_tagged_with": "Benachrichtigungen mit dem Tag {tag}",
     "aliases": "Aliase",
     "analysis": "Analyse",
     "analysis_details_tooltip": "Details (Erklärung, Details zur Problemumgehung und andere Informationen zu den Auswirkungen)",

src/i18n/locales/en.json

@@ -149,7 +149,7 @@
     "ldap_users": "LDAP Users",
     "limit_to": "Limit To",
     "limit_to_projects": "Limit to projects",
-    "limit_to_tags": "Limit to Tags",
+    "limit_to_tags": "Limit to tags",
     "maintenance": "Maintenance",
     "managed_users": "Managed Users",
     "mapped_ldap_groups": "Mapped LDAP groups",
@@ -351,6 +351,7 @@
     "affected_projects": "Affected Projects",
     "age": "Age",
     "age_tooltip": "Age in ISO-8601 period format (e.g. P1Y = 1 Year; P2Y3M = 2 Years, 3 Months)",
+    "alerts_tagged_with": "Alerts tagged with {tag}",
     "aliases": "Aliases",
     "analysis": "Analysis",
     "analysis_details_tooltip": "Details (explanation, workaround details, and other impact information)",

src/i18n/locales/es.json

@@ -351,6 +351,7 @@
     "affected_projects": "Proyectos afectados",
     "age": "Edad",
     "age_tooltip": "Edad en formato de período ISO-8601 (por ejemplo, P1Y = 1 año; P2Y3M = 2 años, 3 meses)",
+    "alerts_tagged_with": "Alertas etiquetadas con {tag}",
     "aliases": "Alias",
     "analysis": "Análisis",
     "analysis_details_tooltip": "Detalles (explicación, detalles de la solución alternativa y otra información sobre el impacto)",

src/i18n/locales/fr.json

@@ -351,6 +351,7 @@
     "affected_projects": "Projets concernés",
     "age": "Âge",
     "age_tooltip": "Âge au format de période ISO-8601 (par exemple, P1Y = 1 an ; P2Y3M = 2 ans, 3 mois)",
+    "alerts_tagged_with": "Alertes marquées avec {tag}",
     "aliases": "Alias",
     "analysis": "Analyse",
     "analysis_details_tooltip": "Détails (explication, détails de la solution de contournement et autres informations sur l'impact)",

src/i18n/locales/hi.json

@@ -351,6 +351,7 @@
     "affected_projects": "प्रभावित परियोजनाएँ",
     "age": "आयु",
     "age_tooltip": "ISO-8601 अवधि प्रारूप में आयु (उदाहरणार्थ P1Y = 1 वर्ष; P2Y3M = 2 वर्ष, 3 माह)",
+    "alerts_tagged_with": "अलर्ट {टैग} के साथ टैग किए गए",
     "aliases": "उपनाम",
     "analysis": "विश्लेषण",
     "analysis_details_tooltip": "विवरण (स्पष्टीकरण, समाधान विवरण, और अन्य प्रभाव जानकारी)",

src/i18n/locales/it.json

@@ -351,6 +351,7 @@
     "affected_projects": "Progetti interessati",
     "age": "Età",
     "age_tooltip": "Età nel formato periodo ISO-8601 (ad esempio P1Y = 1 anno; P2Y3M = 2 anni, 3 mesi)",
+    "alerts_tagged_with": "Avvisi contrassegnati con {tag}",
     "aliases": "Alias",
     "analysis": "Analisi",
     "analysis_details_tooltip": "Dettagli (spiegazione, dettagli della soluzione alternativa e altre informazioni sull'impatto)",

src/i18n/locales/ja.json

@@ -351,6 +351,7 @@
     "affected_projects": "影響を受けるプロジェクト",
     "age": "年",
     "age_tooltip": "ISO-8601 期間形式の年齢 (例: P1Y = 1 年、P2Y3M = 2 年 3 か月)",
+    "alerts_tagged_with": "{tag} でタグ付けされたアラート",
     "aliases": "エイリアス",
     "analysis": "分析",
     "analysis_details_tooltip": "詳細（説明、回避策の詳細、その他の影響情報）",

src/i18n/locales/pl.json

@@ -351,6 +351,7 @@
     "affected_projects": "Projekty, których to dotyczy",
     "age": "Wiek",
     "age_tooltip": "Wiek w formacie okresu ISO-8601 (np. P1Y = 1 rok; P2Y3M = 2 lata, 3 miesiące)",
+    "alerts_tagged_with": "Alerty oznaczone tagiem {tag}",
     "aliases": "Skróty",
     "analysis": "Analiza",
     "analysis_details_tooltip": "Szczegóły (wyjaśnienie, szczegóły obejścia i inne informacje o wpływie)",

src/i18n/locales/pt-BR.json

@@ -351,6 +351,7 @@
     "affected_projects": "Projetos afetados",
     "age": "Idade",
     "age_tooltip": "Idade no formato de período ISO-8601 (por exemplo, P1Y = 1 ano; P2Y3M = 2 anos, 3 meses)",
+    "alerts_tagged_with": "Alertas marcados com {tag}",
     "aliases": "Apelido",
     "analysis": "Análise",
     "analysis_details_tooltip": "Detalhes (explicação, detalhes da solução alternativa e outras informações de impacto)",

src/i18n/locales/pt.json

@@ -351,6 +351,7 @@
     "affected_projects": "Projetos afetados",
     "age": "Idade",
     "age_tooltip": "Idade no formato de período ISO-8601 (por exemplo, P1Y = 1 ano; P2Y3M = 2 anos, 3 meses)",
+    "alerts_tagged_with": "Alertas marcados com {tag}",
     "aliases": "Apelido",
     "analysis": "Análise",
     "analysis_details_tooltip": "Detalhes (explicação, detalhes da solução alternativa e outras informações de impacto)",

src/i18n/locales/ru.json

@@ -351,6 +351,7 @@
     "affected_projects": "Затронутые проекты",
     "age": "Возраст",
     "age_tooltip": "Возраст в формате периода ISO-8601 (например, P1Y = 1 год; P2Y3M = 2 года, 3 месяца).",
+    "alerts_tagged_with": "Оповещения с тегом {tag}",
     "aliases": "Псевдонимы",
     "analysis": "Анализ",
     "analysis_details_tooltip": "Подробности (объяснения, сведения об обходном пути и другая информация о влиянии)",

src/i18n/locales/uk-UA.json

@@ -351,6 +351,7 @@
     "affected_projects": "Постраждалі проекти",
     "age": "Вік",
     "age_tooltip": "Вік у форматі періоду ISO-8601 (наприклад, P1Y = 1 рік; P2Y3M = 2 роки, 3 місяці)",
+    "alerts_tagged_with": "Сповіщення з тегом {tag}",
     "aliases": "Псевдоніми",
     "analysis": "Аналіз",
     "analysis_details_tooltip": "Деталі (пояснення, деталі обхідного шляху та інша інформація про вплив)",

src/i18n/locales/zh.json

@@ -351,6 +351,7 @@
     "affected_projects": "受影响的项目",
     "age": "年龄",
     "age_tooltip": "采用 ISO-8601 时期格式的年龄（例如 P1Y = 1 岁；P2Y3M = 2 岁，3 个月）",
+    "alerts_tagged_with": "带有 {tag} 标记的提醒",
     "aliases": "别名",
     "analysis": "分析",
     "analysis_details_tooltip": "详细信息（解释、解决方法详细信息和其他影响信息）",

src/views/administration/notifications/Alerts.vue

@@ -35,6 +35,7 @@ import SelectTeamModal from '../../administration/accessmanagement/SelectTeamMod
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import BToggleableDisplayButton from '../../components/BToggleableDisplayButton';
 import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
+import VueTagsInput from '@johmun/vue-tags-input';
 import { Switch as cSwitch } from '@coreui/vue';
 
 export default {
@@ -170,6 +171,18 @@ export default {
                         <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectProjectModal')"/>
                       </div>
                     </b-form-group>
+                    <b-form-group v-if="limitToVisible" id="tagLimits" :label="this.$t('admin.limit_to_tags')">
+                      <vue-tags-input
+                        id="limitToTagsInput"
+                        v-model="tag"
+                        :tags="tags"
+                        :add-on-key="addOnKeys"
+                        :placeholder="$t('message.add_tag')"
+                        :autocomplete-items="tagsAutoCompleteItems"
+                        @tags-changed="(newTags) => (this.tags = newTags)"
+                        class="mw-100 bg-transparent text-lowercase"
+                      />
+                    </b-form-group>
                   <div v-if="limitToVisible === true">
                       <c-switch id="isNotifyChildrenEnabled" color="primary" v-model="notifyChildren" label v-bind="labelIcon"/>
                       {{ $t('admin.include_active_children') }}
@@ -226,6 +239,7 @@ export default {
               SelectTeamModal,
               BToggleableDisplayButton,
               BInputGroupFormInput,
+              VueTagsInput,
               cSwitch,
             },
             data() {
@@ -248,6 +262,11 @@ export default {
                 projects: row.projects,
                 teams: row.teams,
                 limitToVisible: false,
+                tag: '', // The contents of a tag as its being typed into the vue-tag-input
+                tags: [], // An array of tags bound to the vue-tag-input
+                tagsAutoCompleteItems: [],
+                tagsAutoCompleteDebounce: null,
+                addOnKeys: [9, 13, 32, ':', ';', ','], // Separators used when typing tags into the vue-tag-input
                 labelIcon: {
                   dataOn: '\u2713',
                   dataOff: '\u2715',
@@ -264,29 +283,24 @@ export default {
               };
             },
             created() {
+              this.initializeTags();
               this.parseDestination(this.alert);
               this.parseToken(this.alert);
               this.parseTokenHeader(this.alert);
               this.parseJiraTicketType(this.alert);
             },
             watch: {
-              enabled() {
-                this.updateNotificationRule();
-              },
-              logSuccessfulPublish() {
-                this.updateNotificationRule();
-              },
-              notifyChildren() {
-                this.updateNotificationRule();
-              },
-              notifyOn() {
-                this.updateNotificationRule();
-              },
-              teams() {
-                this.updateNotificationRule();
+              alert() {
+                this.initializeTags();
               },
+              tag: 'searchTags',
             },
             methods: {
+              initializeTags: function () {
+                this.tags = (this.alert.tags || []).map((tag) => ({
+                  text: tag.name,
+                }));
+              },
               formatProjectLabel: function (projectName, projectVersion) {
                 if (projectName && projectVersion) {
                   return projectName + ' ' + projectVersion;
@@ -347,6 +361,9 @@ export default {
                       tokenHeader: this.tokenHeader,
                     }),
                     notifyOn: this.notifyOn,
+                    tags: this.tags.map((tag) => {
+                      return { name: tag.text };
+                    }),
                   })
                   .then((response) => {
                     this.alert = response.data;
@@ -464,6 +481,20 @@ export default {
                     this.$toastr.w(this.$t('condition.unsuccessful_action'));
                   });
               },
+              searchTags: function () {
+                if (!this.tag) {
+                  return;
+                }
+                clearTimeout(this.tagsAutoCompleteDebounce);
+                this.tagsAutoCompleteDebounce = setTimeout(() => {
+                  const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(this.tag)}&pageNumber=1&pageSize=6`;
+                  this.axios.get(url).then((response) => {
+                    this.tagsAutoCompleteItems = response.data.map((tag) => {
+                      return { text: tag.name };
+                    });
+                  });
+                }, 250);
+              },
             },
           });
         },
@@ -486,3 +517,7 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import '../../../assets/scss/vendors/vue-tags-input/vue-tags-input';
+</style>

src/views/portfolio/tags/TagList.vue

@@ -19,6 +19,7 @@ import xssFilters from 'xss-filters';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import bootstrapTableMixin from '@/mixins/bootstrapTableMixin';
+import TaggedNotificationRuleListModal from '@/views/portfolio/tags/TaggedNotificationRuleListModal.vue';
 import TaggedPoliciesListModal from '@/views/portfolio/tags/TaggedPoliciesListModal.vue';
 import TaggedProjectListModal from '@/views/portfolio/tags/TaggedProjectListModal.vue';
 import i18n from '@/i18n';
@@ -127,6 +128,35 @@ export default {
             });
           },
         },
+        {
+          title: this.$t('admin.alerts'),
+          field: 'notificationRuleCount',
+          sortable: true,
+          formatter: (value, row, index) => {
+            if (value === 0) {
+              return value;
+            }
+            return this.vueFormatter({
+              i18n,
+              components: {
+                TaggedNotificationRuleListModal,
+              },
+              mixins: [permissionsMixin],
+              template: `
+                <div>
+                  <b-link v-b-modal="\`taggedNotificationRuleListModal-${index}\`">{{ value }}</b-link>
+                  <tagged-notification-rule-list-modal :tag="tagName" :index="index"/>
+                </div>`,
+              data() {
+                return {
+                  index: index,
+                  tagName: row.name,
+                  value: value,
+                };
+              },
+            });
+          },
+        },
       ],
       data: [],
       options: {