multiple ms_teams_webhook_url

johnsusek · May 8, 2023 · 9fcd0af · 9fcd0af
1 parent f3c2222
commit 9fcd0af
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 13 deletions.
diff --git a/src/components/config/alert/ConfigAlertMsTeams.vue b/src/components/config/alert/ConfigAlertMsTeams.vue
@@ -1,12 +1,55 @@
 <template>
   <div>
-    <el-form-item label="Team webhook" prop="msTeamsWebhookUrl" required>
-      <el-input v-model="msTeamsWebhookUrl" :disabled="viewOnly" />
-      <label>
-        See<a href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook">
-          https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook</a>
-      </label>
-    </el-form-item>
+    <el-popover v-model="popMsTeaMsWebhookUrlVisible" :class="{ 'is-invalid': !popMsTeamsWebhookUrlValid }">
+      <template v-slot:reference>
+        <span class="pop-trigger">
+          <el-tooltip v-if="msTeamsWebhookUrl.length" :content="msTeamsWebhookUrl.join(', ')" placement="top">
+            <span>Tags ({{ msTeamsWebhookUrl.length }})</span>
+          </el-tooltip>
+          <span v-else>Tags ({{ msTeamsWebhookUrl.length }})</span>
+        </span>
+      </template>
+      <template>
+        <el-form
+          ref="msTeamsWebhookUrl"
+          :model="$store.state.config.alert"
+          label-position="top"
+          style="width: 360px"
+          @submit.native.prevent>
+          <el-form-item
+            v-for="(entry, index) in msTeamsWebhookUrl"
+            :key="index"
+            :prop="'msTeamsWebhookUrl.' + index"
+            :disabled="viewOnly"
+            class="el-form-item-list"
+            label=""
+            required>
+            <el-row :gutter="5" type="flex" justify="space-between">
+              <el-col :span="20">
+                <el-input
+                  v-model="msTeamsWebhookUrl[index]"
+                  :disabled="viewOnly"
+                  placeholder="Tags"
+                  @input="(val) => updateMsTeamsWebhookUrl(val, index)" />
+              </el-col>
+              <el-col :span="4">
+                <el-button
+                  :disabled="viewOnly"
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                  plain
+                  @click="removeMsTeamsWebhookUrlEntry(entry)" />
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </el-form>
+
+        <el-button :disabled="viewOnly" class="m-n-sm" @click="addMsTeamsWebhookUrlEntry">
+          Add msTeamsWebhookUrls
+        </el-button>
+      </template>
+    </el-popover>
 
     <el-form-item label="Color" prop="msTeamsThemeColor" required>
       <el-color-picker v-model="msTeamsThemeColor" :disabled="viewOnly" />
@@ -76,6 +119,13 @@
 export default {
   props: ['viewOnly'],
 
+  data() {
+    return {
+      popMsTeaMsWebhookUrlVisible: false,
+      popMsTeamsWebhookUrlValid: true,
+    };
+  },
+
   computed: {
     msTeamsWebhookUrl: {
       get() {
@@ -166,6 +216,57 @@ export default {
   },
 
   methods: {
+    async validate() {
+      try {
+        if (this.$refs.msTeamsWebhookUrl) {
+          await this.validateMsTeamsWebhookUrl();
+        }
+        this.$emit('validate', true);
+        return true;
+      } catch (error) {
+        this.$emit('validate', false);
+        return false;
+      }
+    },
+
+    async validateMsTeamsWebhookUrl() {
+      if (!this.msTeamsWebhookUrl.length) {
+        this.popMsTeamsWebhookUrlValid = false;
+        return;
+      }
+      try {
+        this.popMsTeamsWebhookUrlValid = await this.$refs.msTeamsWebhookUrl.validate();
+      } catch (error) {
+        this.popMsTeamsWebhookUrlValid = false;
+        throw error;
+      }
+    },
+
+    updateMsTeamsWebhookUrl(entry, index) {
+      if (Number.isNaN(entry)) return;
+      this.$store.commit('config/alert/UPDATE_MS_TEAMS_WEBHOOK_URL_ENTRY', {
+        entry,
+        index
+      });
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    removeMsTeamsWebhookUrlEntry(entry) {
+      this.$store.commit('config/alert/REMOVE_MS_TEAMS_WEBHOOK_URL_ENTRY', entry);
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    addMsTeamsWebhookUrlEntry() {
+      this.$store.commit('config/alert/ADD_MS_TEAMS_WEBHOOK_URL_ENTRY');
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
     changemsTeamsAlertFixedWidth(val) {
       if (val) {
         this.msTeamsAlertFixedWidth = true;

diff --git a/src/store/config/alert.js b/src/store/config/alert.js
@@ -217,7 +217,7 @@ function initialState() {
     mattermostKibanaDiscoverTitle: 'Discover in Kibana',
 
     /* MS Teams */
-    msTeamsWebhookUrl: '',
+    msTeamsWebhookUrl: [],
     msTeamsThemeColor: '#ff0000',
     msTeamsAlertFixedWidth: false,
     msTeamsAlertSummary: 'ElastAlert Message',
@@ -1271,6 +1271,23 @@ export default {
       state.msTeamsWebhookUrl = msTeamsWebhookUrl;
     },
 
+    ADD_MS_TEAMS_WEBHOOK_URL_ENTRY(state) {
+      state.msTeamsWebhookUrl.push('');
+    },
+
+    ADD_MS_TEAMS_WEBHOOK_URL_ENTRY_VALUE(state, value) {
+      state.msTeamsWebhookUrl.push(value);
+    },
+
+    REMOVE_MS_TEAMS_WEBHOOK_URL_ENTRY(state, entry) {
+      state.msTeamsWebhookUrl = state.msTeamsWebhookUrl.filter(b => b !== entry);
+    },
+
+    UPDATE_MS_TEAMS_WEBHOOK_URL_ENTRY(state, { entry, index }) {
+      if (!state.msTeamsWebhookUrl) return;
+      state.msTeamsWebhookUrl[index] = entry;
+    },
+
     UPDATE_MS_TEAMS_THEME_COLOR(state, msTeamsThemeColor) {
       state.msTeamsThemeColor = msTeamsThemeColor;
     },

diff --git a/src/store/config/index.js b/src/store/config/index.js
@@ -1017,7 +1017,15 @@ export default {
         commit('alert/UPDATE_SLACK_MSG_PRETEXT', config.slack_msg_pretext);
 
         /* MS Teams */
-        commit('alert/UPDATE_MS_TEAMS_WEBHOOK_URL', config.ms_teams_webhook_url);
+        if (typeof (config.ms_teams_webhook_url) === 'string') {
+          let tmpMsTeamsWebhookUrl = [];
+          tmpMsTeamsWebhookUrl.push(config.ms_teams_webhook_url);
+          config.ms_teams_webhook_url = tmpMsTeamsWebhookUrl;
+        }
+        if (config.ms_teams_webhook_url) {
+          commit('alert/UPDATE_MS_TEAMS_WEBHOOK_URL', config.ms_teams_webhook_url);
+        }
+
         commit('alert/UPDATE_MS_TEAMS_THEME_COLOR', config.ms_teams_theme_color);
         commit('alert/UPDATE_MS_TEAMS_ALERT_SUMMARY', config.ms_teams_alert_summary);
         commit('alert/UPDATE_MS_TEAMS_ALERT_FIXED_WIDTH', config.ms_teams_alert_fixed_width);
@@ -1737,7 +1745,7 @@ export default {
     ms_teams(state) {
       let config = {};
 
-      if (state.alert.msTeamsWebhookUrl) {
+      if (state.alert.msTeamsWebhookUrl && state.alert.msTeamsWebhookUrl.length) {
         config.ms_teams_webhook_url = state.alert.msTeamsWebhookUrl;
       }
 

diff --git a/tests/unit/mockData/alert/ruleDataMsTeamsOpt.js b/tests/unit/mockData/alert/ruleDataMsTeamsOpt.js
@@ -22,7 +22,9 @@ ms_teams_ca_certs: true
 ms_teams_kibana_discover_title: Discover in Kibana2
 ms_teams_proxy: hostname:8080
 ms_teams_theme_color: #f0f8ff
-ms_teams_webhook_url: https://xxxxxxxxxxxxxxxxxxxxxx/xxxx
+ms_teams_webhook_url:
+  - a
+  - b
 name: test123
 num_events: 10000
 realert:

diff --git a/tests/unit/specs/alert/ConfigYamlMsTeams.spec.js b/tests/unit/specs/alert/ConfigYamlMsTeams.spec.js
@@ -31,7 +31,8 @@ match_enhancements: []
 ms_teams_alert_summary: "ElastAlert Message"
 ms_teams_attach_kibana_discover_url: false
 ms_teams_kibana_discover_title: "Discover in Kibana"
-ms_teams_webhook_url: "https://xxxxxxxxxxxxxxxxxxxxxx/xxxx"
+ms_teams_webhook_url:
+  - "https://xxxxxxxxxxxxxxxxxxxxxx/xxxx"
 name: "test123"
 num_events: 10000
 realert:

diff --git a/tests/unit/specs/alert/ConfigYamlMsTeamsOpt.spec.js b/tests/unit/specs/alert/ConfigYamlMsTeamsOpt.spec.js
@@ -34,7 +34,9 @@ ms_teams_attach_kibana_discover_url: true
 ms_teams_ca_certs: true
 ms_teams_kibana_discover_title: "Discover in Kibana2"
 ms_teams_proxy: "hostname:8080"
-ms_teams_webhook_url: "https://xxxxxxxxxxxxxxxxxxxxxx/xxxx"
+ms_teams_webhook_url:
+  - "a"
+  - "b"
 name: "test123"
 num_events: 10000
 realert: