From 229523c24f300afa80d37d6b3519e9ef13ecd12f Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Wed, 4 Aug 2021 22:50:16 +0900
Subject: [PATCH 1/6] Kibana Discover 7.14 support

---
 src/components/config/ConfigKibanaDiscover.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/config/ConfigKibanaDiscover.vue b/src/components/config/ConfigKibanaDiscover.vue
index b492f96c..0ea76367 100644
--- a/src/components/config/ConfigKibanaDiscover.vue
+++ b/src/components/config/ConfigKibanaDiscover.vue
@@ -216,6 +216,9 @@ export default {
       }, {
         code: '7.13',
         name: '7.13'
+      }, {
+        code: '7.14',
+        name: '7.14'
       }],
     };
   },

From f521f8c7396d0b4c3b7da2e831cb50da398a577b Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Thu, 5 Aug 2021 00:03:27 +0900
Subject: [PATCH 2/6] scan_entire_timeframe support

---
 .../config/ConfigScanEntireTimeframe.vue      | 48 +++++++++++++++++++
 src/components/config/alert/ConfigAlert.vue   |  6 +++
 src/registration.js                           |  2 +
 src/store/config/alert.js                     |  8 ++++
 src/store/config/index.js                     | 16 +++++++
 5 files changed, 80 insertions(+)
 create mode 100644 src/components/config/ConfigScanEntireTimeframe.vue

diff --git a/src/components/config/ConfigScanEntireTimeframe.vue b/src/components/config/ConfigScanEntireTimeframe.vue
new file mode 100644
index 00000000..8308f78b
--- /dev/null
+++ b/src/components/config/ConfigScanEntireTimeframe.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="24">
+      <el-form-item label="scan entire timeframe">
+        <el-switch
+          id="scanEntireTimeframe"
+          v-model="scanEntireTimeframe"
+          :disabled="viewOnly"
+          @change="changeScanEntireTimeframe" />
+        <label>
+          If true, when ElastAlert 2 starts, it will always start querying at the current time minus the timeframe.
+          timeframe must exist in the rule.
+        </label>
+      </el-form-item>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props: ['viewOnly'],
+
+  computed: {
+    scanEntireTimeframe: {
+      get() {
+        return this.$store.state.config.alert.scanEntireTimeframe;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SCAN_ENTIRE_TIMEFRAME', value);
+      }
+    }
+  },
+
+  mounted() {
+    this.scanEntireTimeframe = this.$store.state.config.alert.scanEntireTimeframe;
+  },
+
+  methods: {
+    changeScanEntireTimeframe(val) {
+      if (val) {
+        this.scanEntireTimeframe = true;
+      } else {
+        this.scanEntireTimeframe = false;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/config/alert/ConfigAlert.vue b/src/components/config/alert/ConfigAlert.vue
index 1d643350..62c543a7 100644
--- a/src/components/config/alert/ConfigAlert.vue
+++ b/src/components/config/alert/ConfigAlert.vue
@@ -73,6 +73,12 @@
       </el-col>
     </el-row>
 
+    <el-row class="m-s-sm">
+      <el-col :span="24">
+        <ConfigScanEntireTimeframe ref="scanEntireTimeframe" :view-only="viewOnly" />
+      </el-col>
+    </el-row>
+
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigOwner ref="configOwner" :view-only="viewOnly" />
diff --git a/src/registration.js b/src/registration.js
index b6c2e84a..f9ca5891 100644
--- a/src/registration.js
+++ b/src/registration.js
@@ -21,6 +21,7 @@ import ConfigPriority from '@/components/config/ConfigPriority.vue';
 import ConfigDescription from '@/components/config/ConfigDescription.vue';
 import ConfigSettings from '@/components/config/ConfigSettings.vue';
 import ConfigCondition from '@/components/config/ConfigCondition.vue';
+import ConfigScanEntireTimeframe from '@/components/config/ConfigScanEntireTimeframe.vue';
 
 Vue.component('Bulb', Bulb);
 Vue.component('DateTime', DateTime);
@@ -34,6 +35,7 @@ Vue.component('ConfigOwner', ConfigOwner);
 Vue.component('ConfigPriority', ConfigPriority);
 Vue.component('ConfigDescription', ConfigDescription);
 Vue.component('ConfigCondition', ConfigCondition);
+Vue.component('ConfigScanEntireTimeframe', ConfigScanEntireTimeframe);
 Vue.component('DefinitionTable', DefinitionTable);
 Vue.component('ElastalertTimePicker', ElastalertTimePicker);
 Vue.component('ESChart', ESChart);
diff --git a/src/store/config/alert.js b/src/store/config/alert.js
index 0d8ad200..2699f596 100644
--- a/src/store/config/alert.js
+++ b/src/store/config/alert.js
@@ -139,6 +139,9 @@ function initialState() {
     useOwner: false,
     configOwner: '',
 
+    /* scanEntireTimeframe */
+    scanEntireTimeframe: false,
+
     /* Jira */
     jiraProject: '',
     jiraIssueType: '',
@@ -1217,6 +1220,11 @@ export default {
       state.kibanaDiscoverColumns[index] = entry;
     },
 
+    /* scan_entire_timeframe */
+    UPDATE_SCAN_ENTIRE_TIMEFRAME(state, scanEntireTimeframe) {
+      state.scanEntireTimeframe = scanEntireTimeframe;
+    },
+
     UPDATE_REALERT(state, realert) {
       state.realert = realert;
     },
diff --git a/src/store/config/index.js b/src/store/config/index.js
index 1326d30b..bd54d5ee 100644
--- a/src/store/config/index.js
+++ b/src/store/config/index.js
@@ -204,6 +204,9 @@ export default {
         commit('alert/UPDATE_KIBANA_DISCOVER_FROM_TIMEDELTA', config.kibana_discover_from_timedelta);
         commit('alert/UPDATE_KIBANA_DISCOVER_TO_TIMEDELTA', config.kibana_discover_to_timedelta);
 
+        /* scan_entire_timeframe */
+        commit('alert/UPDATE_SCAN_ENTIRE_TIMEFRAME', config.scan_entire_timeframe);
+
         /* Description */
         commit('alert/UPDATE_DESCRIPTION', config.description);
 
@@ -1723,6 +1726,17 @@ export default {
       return config;
     },
 
+    // scan_entire_timeframe
+    scanEntireTimeframe(state) {
+      let config = {};
+
+      if (state.alert.scanEntireTimeframe) {
+        config.scan_entire_timeframe = state.alert.scanEntireTimeframe;
+      }
+
+      return config;
+    },
+
     // Priority
     priority(state) {
       let config = {};
@@ -2396,6 +2410,8 @@ export default {
 
       config = { ...config, ...getters.owner };
 
+      config = { ...config, ...getters.scanEntireTimeframe };
+
       // Sort the keys in the object so it appears alphabetically in the UI
       let conf = {};
 

From c056b227f5d13547ada8e716888d3f63cbe7883c Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Sun, 15 Aug 2021 19:20:47 +0900
Subject: [PATCH 3/6] Split up ConfigAlert into multiple files

---
 config/elastalert.yaml                        |    4 +-
 src/components/config/ConfigCondition.vue     |   10 +-
 src/components/config/alert/ConfigAlert.vue   | 4123 +----------------
 .../config/alert/ConfigAlertAlerta.vue        |  327 ++
 .../config/alert/ConfigAlertAmazonSes.vue     |  284 ++
 .../config/alert/ConfigAlertAmazonSns.vue     |  136 +
 .../config/alert/ConfigAlertChatwork.vue      |   65 +
 .../config/alert/ConfigAlertCommand.vue       |  191 +
 .../config/alert/ConfigAlertDatadog.vue       |   57 +
 .../config/alert/ConfigAlertDiscord.vue       |  163 +
 .../config/alert/ConfigAlertEmail.vue         |  310 ++
 .../config/alert/ConfigAlertExotel.vue        |  113 +
 .../config/alert/ConfigAlertGitter.vue        |  136 +
 .../config/alert/ConfigAlertGoogleChat.vue    |  138 +
 .../config/alert/ConfigAlertHttpPost.vue      |  104 +
 .../config/alert/ConfigAlertJira.vue          |   78 +
 .../config/alert/ConfigAlertLineNotify.vue    |   46 +
 .../config/alert/ConfigAlertMattermost.vue    |  430 ++
 .../config/alert/ConfigAlertMsTeams.vue       |  120 +
 .../config/alert/ConfigAlertPagerTree.vue     |   89 +
 .../config/alert/ConfigAlertRocketChat.vue    |  358 ++
 .../config/alert/ConfigAlertServiceNow.vue    |  257 +
 .../config/alert/ConfigAlertSlack.vue         |  549 +++
 .../config/alert/ConfigAlertStomp.vue         |  141 +
 .../config/alert/ConfigAlertTelegram.vue      |  101 +
 .../config/alert/ConfigAlertTheHive.vue       |  273 ++
 .../config/alert/ConfigAlertTwilio.vue        |  132 +
 .../config/alert/ConfigAlertVictorOps.vue     |  155 +
 .../config/alert/ConfigAlertZabbix.vue        |   95 +
 src/registration.js                           |   52 +
 30 files changed, 5070 insertions(+), 3967 deletions(-)
 create mode 100644 src/components/config/alert/ConfigAlertAlerta.vue
 create mode 100644 src/components/config/alert/ConfigAlertAmazonSes.vue
 create mode 100644 src/components/config/alert/ConfigAlertAmazonSns.vue
 create mode 100644 src/components/config/alert/ConfigAlertChatwork.vue
 create mode 100644 src/components/config/alert/ConfigAlertCommand.vue
 create mode 100644 src/components/config/alert/ConfigAlertDatadog.vue
 create mode 100644 src/components/config/alert/ConfigAlertDiscord.vue
 create mode 100644 src/components/config/alert/ConfigAlertEmail.vue
 create mode 100644 src/components/config/alert/ConfigAlertExotel.vue
 create mode 100644 src/components/config/alert/ConfigAlertGitter.vue
 create mode 100644 src/components/config/alert/ConfigAlertGoogleChat.vue
 create mode 100644 src/components/config/alert/ConfigAlertHttpPost.vue
 create mode 100644 src/components/config/alert/ConfigAlertJira.vue
 create mode 100644 src/components/config/alert/ConfigAlertLineNotify.vue
 create mode 100644 src/components/config/alert/ConfigAlertMattermost.vue
 create mode 100644 src/components/config/alert/ConfigAlertMsTeams.vue
 create mode 100644 src/components/config/alert/ConfigAlertPagerTree.vue
 create mode 100644 src/components/config/alert/ConfigAlertRocketChat.vue
 create mode 100644 src/components/config/alert/ConfigAlertServiceNow.vue
 create mode 100644 src/components/config/alert/ConfigAlertSlack.vue
 create mode 100644 src/components/config/alert/ConfigAlertStomp.vue
 create mode 100644 src/components/config/alert/ConfigAlertTelegram.vue
 create mode 100644 src/components/config/alert/ConfigAlertTheHive.vue
 create mode 100644 src/components/config/alert/ConfigAlertTwilio.vue
 create mode 100644 src/components/config/alert/ConfigAlertVictorOps.vue
 create mode 100644 src/components/config/alert/ConfigAlertZabbix.vue

diff --git a/config/elastalert.yaml b/config/elastalert.yaml
index efc230f5..02cdd1c6 100644
--- a/config/elastalert.yaml
+++ b/config/elastalert.yaml
@@ -9,12 +9,12 @@ es_port: 9200
 # Any .yaml file will be loaded as a rule
 rules_folder: rules
 
-# How often ElastAlert will query elasticsearch
+# How often ElastAlert 2 will query elasticsearch
 # The unit can be anything from weeks to seconds
 run_every:
   seconds: 60
 
-# ElastAlert will buffer results from the most recent
+# ElastAlert 2 will buffer results from the most recent
 # period of time, in case some log sources are not in real time
 buffer_time:
   minutes: 1
diff --git a/src/components/config/ConfigCondition.vue b/src/components/config/ConfigCondition.vue
index d9ccddbf..3d7df9bf 100644
--- a/src/components/config/ConfigCondition.vue
+++ b/src/components/config/ConfigCondition.vue
@@ -669,7 +669,7 @@
                 :disabled="useTermsQuery"
                 @input="refreshOptionsPop" />
               <label>
-                If true, ElastAlert will poll Elasticsearch using the count api,
+                If true, ElastAlert 2 will poll Elasticsearch using the count api,
                 and not download all of the matching documents.
                 This is useful is you care only about numbers and not the actual data.
                 It should also be used if you expect a large number of query hits, in the order of
@@ -681,18 +681,18 @@
           <el-form-item v-if="type !== 'spike'" :class="{ 'm-n-sm': type === 'new_term' }" label="Use terms query">
             <el-switch v-model="useTermsQuery" :disabled="useCountQuery" @input="refreshOptionsPop" />
             <label v-if="type === 'new_term'">
-              If true, ElastAlert will use aggregation queries to get terms instead of regular search queries.
+              If true, ElastAlert 2 will use aggregation queries to get terms instead of regular search queries.
               This is faster than regular searching if there is a large number of documents.
               <span v-if="useTermsQuery">
                 When using use_terms_query, make sure that the field you are using is not analyzed.
                 If it is, the results of each terms query may return tokens rather than full values.
-                ElastAlert will by default turn on use_keyword_postfix, which attempts to use the non-analyzed version
+                ElastAlert 2 will by default turn on use_keyword_postfix, which attempts to use the non-analyzed version
                 (.keyword or .raw) to gather initial terms. These will not match the partial values and result
                 in false positives.
               </span>
             </label>
             <label v-else>
-              If true, ElastAlert will make an aggregation query against Elasticsearch
+              If true, ElastAlert 2 will make an aggregation query against Elasticsearch
               to get counts of documents matching each unique value of "query key". This
               must be used with "query key" and "doc type". This will only return a maximum
               of "terms size", default 50, unique terms.
@@ -735,7 +735,7 @@
           <el-form-item label="Use keyword postfix">
             <el-switch id="useKeywordPostfix" v-model="useKeywordPostfix" />
             <label>
-              If true, ElastAlert will automatically try to add .keyword (ES5+) or
+              If true, ElastAlert 2 will automatically try to add .keyword (ES5+) or
               .raw to the fields when making an initial query.
               These are non-analyzed fields added by Logstash.
               If the field used is analyzed, the initial query will return only the tokenized values,
diff --git a/src/components/config/alert/ConfigAlert.vue b/src/components/config/alert/ConfigAlert.vue
index 62c543a7..ef011731 100644
--- a/src/components/config/alert/ConfigAlert.vue
+++ b/src/components/config/alert/ConfigAlert.vue
@@ -35,13 +35,14 @@
       </el-col>
     </el-row>
 
-    <!-- time_window_change  -->
+    <!-- time_window_change -->
     <el-row class="m-s-sm">
       <el-col :span="19">
         <ConfigTimeWindowFeature ref="timeWindowFeature" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
+    <!-- Limit Excecution -->
     <el-row class="m-s-sm">
       <el-col :span="enableLimitExcecution ? 6 : 24">
         <el-form-item label="Limit Excecution">
@@ -67,30 +68,35 @@
       </el-col>
     </el-row>
 
+    <!-- KibanaDiscover -->
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigKibanaDiscover ref="kibanaDiscover" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
+    <!-- ScanEntireTimeframe -->
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigScanEntireTimeframe ref="scanEntireTimeframe" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
+    <!-- Owner -->
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigOwner ref="configOwner" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
+    <!-- Priority -->
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigPriority ref="configPriority" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
+    <!-- Description -->
     <el-row class="m-s-sm">
       <el-col :span="24">
         <ConfigDescription ref="configDescription" :view-only="viewOnly" />
@@ -119,10 +125,10 @@
           Telegram
         </el-checkbox>
         <el-checkbox id="destinationJira" label="jira" border>
-          JIRA
+          Jira
         </el-checkbox>
         <el-checkbox id="destinationGoogleChats" label="googlechat" border>
-          GOOGLE CHAT
+          Google Chat
         </el-checkbox>
         <el-checkbox id="destinationlineNotify" label="linenotify" border>
           LineNotify
@@ -200,3690 +206,308 @@
           class="m-s-lg" />
       </el-tab-pane>
 
+      <!-- Slack -->
       <el-tab-pane v-if="alert.includes('slack')">
         <template slot="label">
           <icon :icon="['fab', 'slack']" size="1x" /> Slack
         </template>
-        <el-form-item label="Channel or username" prop="slackChannelOverride" required>
-          <el-input id="slackChannelOverride" v-model="slackChannelOverride" :disabled="viewOnly" />
-          <label>
-            The @username or #channel to send the alert. Tip: Create new channels
-            for your alerts, to have fine-grained control of Slack notifications.
-          </label>
-        </el-form-item>
-
-        <praeco-form-item label="Post as" prop="slackUsernameOverride" required>
-          <el-input id="slackUsernameOverride" v-model="slackUsernameOverride" :disabled="viewOnly" />
-          <label>This is the username that will appear in Slack for the alert</label>
-        </praeco-form-item>
-
-        <praeco-form-item
-          v-if="!(viewOnly && !slackEmojiOverride)"
-          :class="{ 'disabled': viewOnly }"
-          label="Icon"
-          prop="slackEmojiOverride">
-          <picker
-            :emoji="slackEmojiOverride || 'arrow_up'"
-            :title="slackEmojiOverride || 'Pick your icon...'"
-            color="#189acc"
-            @select="addEmoji" />
-        </praeco-form-item>
-
-        <el-form-item label="Message color" prop="slackMsgColor" required>
-          <el-radio-group v-model="slackMsgColor" :disabled="viewOnly">
-            <el-radio id="slackMsgColorDanger" label="danger" border class="slack-danger">
-              Danger
-            </el-radio>
-            <el-radio id="slackMsgColorWarning" label="warning" border class="slack-warning">
-              Warning
-            </el-radio>
-            <el-radio id="slackMsgColorGood" label="good" border class="slack-good">
-              Good
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="Parse Override" prop="slackParseOverride">
-          <el-radio-group v-model="slackParseOverride" :disabled="viewOnly">
-            <el-radio id="slackParseOverrideNone" label="none" border>
-              none
-            </el-radio>
-            <el-radio id="slackParseOverrideFull" label="full" border>
-              full
-            </el-radio>
-          </el-radio-group>
-          <label>By default the notification message is escaped ‘none’. You can also use ‘full’.</label>
-        </el-form-item>
-
-        <el-form-item label="Text String" prop="slackTextString">
-          <el-input id="slackTextString" v-model="slackTextString" :disabled="viewOnly" />
-          <label>Notification message you want to add.</label>
-        </el-form-item>
-
-        <el-form-item label="Ignore SSL Errors" prop="slackIgnoreSslErrors">
-          <el-switch
-            id="slackIgnoreSslErrors"
-            v-model="slackIgnoreSslErrors"
-            :disabled="viewOnly"
-            @change="changeSlackIgnoreSslErrors" />
-        </el-form-item>
-
-        <el-form-item label="Icon URL Override" prop="slackIconUrlOverride">
-          <el-input id="slackIconUrlOverride" v-model="slackIconUrlOverride" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will use the default webhook icon when posting to the channel.
-            You can provide icon_url to use custom image.
-            Provide absolute address of the picture or Base64 data url.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="CA Certs" prop="slackCaCerts">
-          <el-switch
-            id="slackCaCerts"
-            v-model="slackCaCerts"
-            :disabled="viewOnly"
-            @change="changeSlackCaCerts" />
-        </el-form-item>
-
-        <el-form-item label="Timeout" prop="slackTimeout">
-          <el-input-number id="slackTimeout" v-model="slackTimeout" :disabled="viewOnly" />
-          <label>
-            You can specify a timeout value, in seconds, for making communicating with Slack.
-            The default is 10. If a timeout occurs, the alert will be retried next time elastalert cycles.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Attach Kibana Discover URL" prop="slackAttachKibanaDiscoverUrl">
-          <el-switch
-            id="slackAttachKibanaDiscoverUrl"
-            v-model="slackAttachKibanaDiscoverUrl"
-            :disabled="viewOnly"
-            @change="changeSlackAttachKibanaDiscoverUrl" />
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Color" prop="slackKibanaDiscoverColor">
-          <el-color-picker
-            v-model="slackKibanaDiscoverColor" :disabled="viewOnly" />
-          <label>The color of the Kibana Discover url attachment.</label>
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Title" prop="slackKibanaDiscoverTitle">
-          <el-input v-model="slackKibanaDiscoverTitle" :disabled="viewOnly" />
-          <label>The title of the Kibana Discover url attachment.</label>
-        </el-form-item>
-
-        <el-form-item label="Proxy" prop="slackProxy">
-          <el-input id="slackProxy" v-model="slackProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to Slack.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Footer" prop="slackFooter">
-          <el-input v-model="slackFooter" :disabled="viewOnly" />
-          <label>Add a static footer text for alert.</label>
-        </el-form-item>
-
-        <el-form-item label="Footer Icon" prop="slackFooterIcon">
-          <el-input v-model="slackFooterIcon" :disabled="viewOnly" />
-          <label>A Public Url for a footer icon.</label>
-        </el-form-item>
-
-        <el-form-item label="Image URL" prop="slackImageUrl">
-          <el-input v-model="slackImageUrl" :disabled="viewOnly" />
-          <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG).</label>
-        </el-form-item>
-
-        <el-form-item label="Thumb URL" prop="slackThumbUrl">
-          <el-input v-model="slackThumbUrl" :disabled="viewOnly" />
-          <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG) that is displayed as thumbnail.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Name" prop="slackAuthorName">
-          <el-input v-model="slackAuthorName" :disabled="viewOnly" />
-          <label>An optional name used to identify the author.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Link" prop="slackAuthorLink">
-          <el-input v-model="slackAuthorLink" :disabled="viewOnly" />
-          <label>An optional URL used to hyperlink the author_name.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Icon" prop="slackAuthorIcon">
-          <el-input v-model="slackAuthorIcon" :disabled="viewOnly" />
-          <label>An optional URL used to display a 16x16 pixel icon beside the author_name.</label>
-        </el-form-item>
-
-        <el-form-item label="Msg Pretext" prop="slackMsgPretext">
-          <el-input v-model="slackMsgPretext" :disabled="viewOnly" />
-          <label>You can set the message attachment pretext using this option.</label>
-        </el-form-item>
+        <ConfigAlertSlack ref="slack" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Email -->
       <el-tab-pane v-if="alert.includes('email')">
         <span slot="label"><icon icon="envelope" size="1x" /> Email</span>
-        <praeco-form-item
-          v-if="!viewOnly || fromAddr"
-          :value="fromAddr"
-          label="From address"
-          prop="fromAddr">
-          <el-input v-model="fromAddr" :disabled="viewOnly" />
-          <label>
-            This sets the From header in the email.
-            By default, the from address is ElastAlert@
-            and the domain will be set by the smtp server.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item
-          v-if="!viewOnly || replyTo"
-          :value="replyTo"
-          label="Reply to"
-          prop="replyTo">
-          <el-input v-model="replyTo" :disabled="viewOnly" />
-          <label>
-            This sets the Reply-To header in the email.
-            By default, the from address is ElastAlert@ and the
-            domain will be set by the smtp server.
-          </label>
-        </praeco-form-item>
-
-        <el-form-item label="To" prop="email" required>
-          <el-input v-model="email" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item v-if="!viewOnly || cc" label="CC" prop="cc">
-          <el-input v-model="cc" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item v-if="!viewOnly || bcc" label="BCC" prop="bcc">
-          <el-input v-model="bcc" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item label="SMTP SSL" prop="smtpSsl">
-          <el-switch
-            id="smtpSsl"
-            v-model="smtpSsl"
-            :disabled="viewOnly"
-            @change="changeSmtpSsl" />
-          <label>
-            Connect the SMTP host using TLS, defaults to false.
-            If smtp_ssl is not used, ElastAlert will still attempt STARTTLS.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="SMTP Host" prop="smtpHost">
-          <el-input v-model="smtpHost" :disabled="viewOnly" />
-          <label>The SMTP host to use, defaults to localhost.</label>
-        </el-form-item>
-
-        <el-form-item label="SMTP Port" prop="smtpPort">
-          <el-input-number id="smtpPort" v-model="smtpPort" :disabled="viewOnly" />
-          <label>The port to use. Default is 25.</label>
-        </el-form-item>
-
-        <el-form-item label="SMTP Auth File" prop="smtpAuthFile">
-          <el-input v-model="smtpAuthFile" :disabled="viewOnly" />
-          <label>
-            The path to a file which contains SMTP authentication credentials.
-            The path can be either absolute or relative to the given rule.
-            It should be YAML formatted and contain two fields, user and password.
-            If this is not present, no authentication will be attempted.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="SMTP Key File" prop="smtpKeyFile">
-          <el-input v-model="smtpKeyFile" :disabled="viewOnly" />
-          <label>Connect the SMTP host using the given path to a TLS key file, default to None.</label>
-        </el-form-item>
-
-        <el-form-item label="SMTP Cert File" prop="smtpCertFile">
-          <el-input v-model="smtpCertFile" :disabled="viewOnly" />
-          <label> Connect the SMTP host using the given path to a TLS certificate file, default to None.</label>
-        </el-form-item>
-
-        <el-form-item label="Email From Field" prop="emailFromField">
-          <el-input v-model="emailFromField" :disabled="viewOnly" />
-        </el-form-item>
-
-        <el-form-item label="Email Add Domain" prop="emailAddDomain">
-          <el-input v-model="emailAddDomain" :disabled="viewOnly" />
-        </el-form-item>
+        <ConfigAlertEmail ref="email" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- HTTP POST -->
       <el-tab-pane v-if="alert.includes('post')" label="HTTP">
         <span slot="label"><icon icon="globe" /> HTTP</span>
-        <el-form-item label="HTTP POST URL" prop="httpPostUrl" required>
-          <el-input v-model="httpPostUrl" :disabled="viewOnly" />
-          <label>JSON results will be POSTed to this URL</label>
-        </el-form-item>
-
-        <el-form-item label="Timeout" prop="httpPostTimeout">
-          <el-input-number id="httpPostTimeout" v-model="httpPostTimeout" :disabled="viewOnly" />
-          <label>
-            The timeout value, in seconds, for making the post.
-            The default is 10.
-            If a timeout occurs, the alert will be retried next time elastalert cycles.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Proxy" prop="httpPostProxy">
-          <el-input id="httpPostProxy" v-model="httpPostProxy" :disabled="viewOnly" />
-          <label>URL of proxy, if required.</label>
-        </el-form-item>
+        <ConfigAlertHttpPost ref="post" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- MS Teams -->
       <el-tab-pane v-if="alert.includes('ms_teams')">
         <template slot="label">
           <icon :icon="['fab', 'microsoft']" size="1x" /> MS Teams
         </template>
-        <el-form-item label="Team webhook" prop="ms_teamsWebhookUrl" required>
-          <el-input id="ms_teamsWebhookUrl" v-model="ms_teamsWebhookUrl" :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-form-item label="Color" prop="ms_teamsThemeColor" required>
-          <el-color-picker id="ms_teamsThemeColor" v-model="ms_teamsThemeColor" :disabled="viewOnly" />
-        </el-form-item>
-
-        <el-form-item label="Alert Summary" prop="ms_teamsAlertSummary" required>
-          <el-input id="ms_teamsAlertSummary" v-model="ms_teamsAlertSummary" :disabled="viewOnly" />
-          <label>
-            Summary should be configured according to MS documentation, although it seems not displayed by Teams currently.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Alert Fixed Width" prop="ms_teamsAlertFixedWidth">
-          <el-switch
-            id="ms_teamsAlertFixedWidth"
-            v-model="ms_teamsAlertFixedWidth"
-            :disabled="viewOnly"
-            @change="changemsTeamsAlertFixedWidth" />
-          <label>
-            By default this is False and the notification will be sent to MS Teams as-is.
-            Teams supports a partial Markdown implementation, which means asterisk, underscore and other characters may be interpreted as Markdown.
-            Currenlty, Teams does not fully implement code blocks. Setting this attribute to True will enable line by line code blocks.
-            It is recommended to enable this to get clearer notifications in Teams.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Proxy" prop="ms_teamsProxy">
-          <el-input id="ms_teamsProxy" v-model="ms_teamsProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to MS Teams.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </el-form-item>
+        <ConfigAlertMsTeams ref="ms_teams" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Telegram -->
       <el-tab-pane v-if="alert.includes('telegram')">
         <template slot="label">
           <icon :icon="['fab', 'telegram']" size="1x" /> Telegram
         </template>
-
-        <praeco-form-item label="Room ID" prop="telegramRoomId" required>
-          <el-input id="telegramRoomId" v-model="telegramRoomId" :disabled="viewOnly" />
-          <label>
-            Unique identifier for the target chat or username of the
-            target channel using telegram chat_id (in the format “-xxxxxxxx”)
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy" prop="telegramProxy">
-          <el-input id="telegramProxy" v-model="telegramProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to Telegram.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy Login" prop="telegramProxyLogin">
-          <el-input id="telegramProxyLogin" v-model="telegramProxyLogin" :disabled="viewOnly" />
-          <label>The Telegram proxy auth username.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy Password" prop="telegramProxyPass">
-          <el-input id="telegramProxyPass" v-model="telegramProxyPass" :disabled="viewOnly" />
-          <label>The Telegram proxy auth password.</label>
-        </praeco-form-item>
+        <ConfigAlertTelegram ref="telegram" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Jira -->
       <el-tab-pane v-if="alert.includes('jira')">
         <template slot="label">
-          <icon :icon="['fab', 'jira']" size="1x" /> JIRA
+          <icon :icon="['fab', 'jira']" size="1x" /> Jira
         </template>
-
-        <praeco-form-item label="Project" prop="jiraProject" required>
-          <el-input id="jiraProject" v-model="jiraProject" :disabled="viewOnly" />
-          <label>Jira project</label>
-        </praeco-form-item>
-        <praeco-form-item label="Issue type" prop="jiraIssueType" required>
-          <el-input id="jiraIssueType" v-model="jiraIssueType" :disabled="viewOnly" />
-          <label>Jira issue type (Bug, Integration Bug, etc...)</label>
-        </praeco-form-item>
-        <praeco-form-item label="Components" prop="jiraComponents">
-          <el-input id="jiraComponents" v-model="jiraComponents" :disabled="viewOnly" />
-          <label>Jira issue components</label>
-        </praeco-form-item>
+        <ConfigAlertJira ref="jira" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Google Chat -->
       <el-tab-pane v-if="alert.includes('googlechat')">
         <template slot="label">
-          GOOGLE CHAT
+          Google Chat
         </template>
-
-        <praeco-form-item label="GoogleChat Webhook" prop="googleChatWebhookUrl" required>
-          <el-input id="googleChatWebhookUrl" v-model="googleChatWebhookUrl" :disabled="viewOnly" />
-          <label>Google Webhook Url</label>
-        </praeco-form-item>
-        <praeco-form-item label="GoogleChat Format" prop="googleChatFormat" required>
-          <el-radio-group v-model="googleChatFormat" :disabled="viewOnly">
-            <el-radio id="googleChatFormatBasic" label="basic" border>
-              basic
-            </el-radio>
-            <el-radio id="googleChatFormatCard" label="card" border>
-              card
-            </el-radio>
-          </el-radio-group>
-        </praeco-form-item>
-
-        <div v-if="googleChatFormat === 'card'">
-          <praeco-form-item label="Header Title" prop="googleChatHeaderTitle">
-            <el-input id="googleChatHeaderTitle" v-model="googleChatHeaderTitle" :disabled="viewOnly" />
-            <label>GoogleChat Header Title</label>
-          </praeco-form-item>
-
-          <praeco-form-item label="Header Subtitle" prop="googleChatHeaderSubtitle">
-            <el-input id="googleChatHeaderSubtitle" v-model="googleChatHeaderSubtitle" :disabled="viewOnly" />
-            <label>Sets the text for the card header subtitle.</label>
-          </praeco-form-item>
-
-          <praeco-form-item label="Header Image" prop="googleChatHeaderImage">
-            <el-input id="googleChatHeaderImage" v-model="googleChatHeaderImage" :disabled="viewOnly" />
-            <label>URL for the card header icon.</label>
-          </praeco-form-item>
-
-          <praeco-form-item label="Footer Kibanalink" prop="googleFooterKibanalink">
-            <el-input id="googleFooterKibanalink" v-model="googleFooterKibanalink" :disabled="viewOnly" />
-            <label>URL to Kibana to include in the card footer.</label>
-          </praeco-form-item>
-        </div>
+        <ConfigAlertGoogleChat ref="googlechat" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Line Notify -->
       <el-tab-pane v-if="alert.includes('linenotify')">
         <template slot="label">
           <icon :icon="['fab', 'line']" size="1x" /> Line Notify
         </template>
-
-        <praeco-form-item label="Access Token" prop="linenotifyAccessToken" required>
-          <el-input id="linenotifyAccessToken" v-model="linenotifyAccessToken" :disabled="viewOnly" />
-          <label>The access token that you got from https://notify-bot.line.me/my/</label>
-        </praeco-form-item>
+        <ConfigAlertLineNotify ref="linenotify" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Mattermost -->
       <el-tab-pane v-if="alert.includes('mattermost')">
         <template slot="label">
           Mattermost
         </template>
-        <el-form-item label="Channel or username" prop="mattermostChannelOverride" required>
-          <el-input id="mattermostChannelOverride" v-model="mattermostChannelOverride" :disabled="viewOnly" />
-          <label>
-            The @username or #channel to send the alert. Tip: Create new channels
-            for your alerts, to have fine-grained control of Mattermost notifications.
-          </label>
-        </el-form-item>
-
-        <praeco-form-item label="Post as" prop="mattermostUsernameOverride" required>
-          <el-input id="mattermostUsernameOverride" v-model="mattermostUsernameOverride" :disabled="viewOnly" />
-          <label>This is the username that will appear in Mattermost for the alert</label>
-        </praeco-form-item>
-
-        <el-form-item label="Message color" prop="mattermostMsgColor" required>
-          <el-radio-group v-model="mattermostMsgColor" :disabled="viewOnly">
-            <el-radio id="mattermostMsgColorDanger" label="danger" border class="mattermost-danger">
-              Danger
-            </el-radio>
-            <el-radio id="mattermostMsgColorWarning" label="warning" border class="mattermost-warning">
-              Warning
-            </el-radio>
-            <el-radio id="mattermostMsgColorGood" label="good" border class="mattermost-good">
-              Good
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="Ignore SSL Errors" prop="mattermostIgnoreSslErrors">
-          <el-switch
-            id="mattermostIgnoreSslErrors"
-            v-model="mattermostIgnoreSslErrors"
-            :disabled="viewOnly"
-            @change="changeMattermostIgnoreSslErrors" />
-        </el-form-item>
-
-        <el-form-item label="Icon URL Override" prop="mattermostIconUrlOverride">
-          <el-input id="mattermostIconUrlOverride" v-model="mattermostIconUrlOverride" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will use the default webhook icon when posting to the channel.
-            You can provide icon_url to use custom image.
-            Provide absolute address of the picture or Base64 data url.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Msg Pretext" prop="mattermostMsgPretext">
-          <el-input id="mattermostMsgPretext" v-model="mattermostMsgPretext" :disabled="viewOnly" />
-          <label>You can set the message attachment pretext using this option.</label>
-        </el-form-item>
-
-        <el-form-item label="Proxy" prop="mattermostProxy">
-          <el-input id="mattermostProxy" v-model="mattermostProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to Mattermost.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Title" prop="mattermostTitle">
-          <el-input v-model="mattermostTitle" :disabled="viewOnly" />
-          <label>Sets a title for the message, this shows up as a blue text at the start of the message.</label>
-        </el-form-item>
-
-        <el-form-item label="Title Link" prop="mattermostTitleLink">
-          <el-input v-model="mattermostTitleLink" :disabled="viewOnly" />
-          <label>You can add a link in your Mattermost notification by setting this to a valid URL.</label>
-        </el-form-item>
-
-        <el-form-item label="Footer" prop="mattermostFooter">
-          <el-input v-model="mattermostFooter" :disabled="viewOnly" />
-          <label>Add a static footer text for alert.</label>
-        </el-form-item>
-
-        <el-form-item label="Footer Icon" prop="mattermostFooterIcon">
-          <el-input v-model="mattermostFooterIcon" :disabled="viewOnly" />
-          <label>A Public Url for a footer icon.</label>
-        </el-form-item>
-
-        <el-form-item label="Image URL" prop="mattermostImageUrl">
-          <el-input v-model="mattermostImageUrl" :disabled="viewOnly" />
-          <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG).</label>
-        </el-form-item>
-
-        <el-form-item label="Thumb URL" prop="mattermostThumbUrl">
-          <el-input v-model="mattermostThumbUrl" :disabled="viewOnly" />
-          <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG) that is displayed as thumbnail.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Name" prop="mattermostAuthorName">
-          <el-input v-model="mattermostAuthorName" :disabled="viewOnly" />
-          <label>An optional name used to identify the author.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Link" prop="mattermostAuthorLink">
-          <el-input v-model="mattermostAuthorLink" :disabled="viewOnly" />
-          <label>An optional URL used to hyperlink the author_name.</label>
-        </el-form-item>
-
-        <el-form-item label="Author Icon" prop="mattermostAuthorIcon">
-          <el-input v-model="mattermostAuthorIcon" :disabled="viewOnly" />
-          <label>An optional URL used to display a 16x16 pixel icon beside the author_name.</label>
-        </el-form-item>
-
-        <el-form-item label="Attach Kibana Discover URL" prop="mattermostAttachKibanaDiscoverUrl">
-          <el-switch
-            id="mattermostAttachKibanaDiscoverUrl"
-            v-model="mattermostAttachKibanaDiscoverUrl"
-            :disabled="viewOnly"
-            @change="changeMattermostAttachKibanaDiscoverUrl" />
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Color" prop="mattermostKibanaDiscoverColor">
-          <el-color-picker
-            v-model="mattermostKibanaDiscoverColor" :disabled="viewOnly" />
-          <label>The color of the Kibana Discover url attachment.</label>
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Title" prop="mattermostKibanaDiscoverTitle">
-          <el-input v-model="mattermostKibanaDiscoverTitle" :disabled="viewOnly" />
-          <label>The title of the Kibana Discover url attachment.</label>
-        </el-form-item>
+        <ConfigAlertMattermost ref="mattermost" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Command -->
       <el-tab-pane v-if="alert.includes('command')">
         <template slot="label">
           Command
         </template>
-
-        <el-popover v-model="popCommandVisible" :class="{ 'is-invalid': !popCommandValid }">
-          <span slot="reference" class="pop-trigger">
-            <el-tooltip v-if="command.length" :content="command.join(', ')" placement="top">
-              <span>Command ({{ command.length }})</span>
-            </el-tooltip>
-            <span v-else>Command ({{ command.length }})</span>
-          </span>
-          <template>
-            <el-form
-              ref="command"
-              :model="$store.state.config.alert"
-              label-position="top"
-              style="width: 360px"
-              @submit.native.prevent>
-              <el-form-item
-                v-for="(entry, index) in command"
-                :key="index"
-                :prop="'command.' + 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="command[index]"
-                      :disabled="viewOnly"
-                      placeholder="Tags"
-                      @input="(val) => updateCommand(val, index)" />
-                  </el-col>
-                  <el-col :span="4">
-                    <el-button
-                      :disabled="viewOnly"
-                      type="danger"
-                      icon="el-icon-delete"
-                      circle
-                      plain
-                      @click="removeCommandEntry(entry)" />
-                  </el-col>
-                </el-row>
-              </el-form-item>
-            </el-form>
-
-            <el-button :disabled="viewOnly" class="m-n-sm" @click="addCommandEntry">
-              Add command
-            </el-button>
-          </template>
-        </el-popover>
-
-        <el-form-item label="Pipe Match Json" prop="pipeMatchJson">
-          <el-switch
-            id="pipeMatchJson"
-            v-model="pipeMatchJson"
-            :disabled="viewOnly"
-            @change="changePipeMatchJson" />
-          <label>
-            If true, the match will be converted to JSON and passed to stdin of the command.
-            Note that this will cause ElastAlert to block until the command exits or sends an EOF to stdout.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Pipe Alert Text" prop="pipeAlertText">
-          <el-switch
-            id="pipeAlertText"
-            v-model="pipeAlertText"
-            :disabled="viewOnly"
-            @change="changePipeAlertText" />
-          <label>
-            If true, the standard alert body text will be passed to stdin of the command.
-            Note that this will cause ElastAlert to block until the command exits or sends an EOF to stdout.
-            It cannot be used at the same time as pipe_match_json.
-          </label>
-        </el-form-item>
+        <ConfigAlertCommand ref="command" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Gitter -->
       <el-tab-pane v-if="alert.includes('gitter')">
         <template slot="label">
           <icon :icon="['fab', 'gitter']" size="1x" /> Gitter
         </template>
-
-        <praeco-form-item label="Webhook URL" prop="gitterWebhookUrl" required>
-          <el-input id="gitterWebhookUrl" v-model="gitterWebhookUrl" :disabled="viewOnly" />
-          <label>
-            The webhook URL that includes your auth data and the ID of the channel (room) you want to post to.
-            Go to the Integration Settings of the channel: (example  https://gitter.im/ORGA/CHANNEL#integrations ) ,
-            click ‘CUSTOM’ and copy the resulting URL.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Message level" prop="gitterMsgLevel" required>
-          <el-radio-group v-model="gitterMsgLevel" :disabled="viewOnly">
-            <el-radio id="gitterMsgLevelError" label="error" border class="gitter-error">
-              Error
-            </el-radio>
-            <el-radio id="gitterMsgLevelInfo" label="info" border class="gitter-info">
-              Info
-            </el-radio>
-          </el-radio-group>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy" prop="gitterProxy">
-          <el-input id="gitterProxy" v-model="gitterProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to Gitter.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </praeco-form-item>
+        <ConfigAlertGitter ref="gitter" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Amazon SNS -->
       <el-tab-pane v-if="alert.includes('sns')">
         <template slot="label">
           <icon :icon="['fab', 'aws']" size="1x" /> Amazon SNS
         </template>
-        <el-radio id="groupSns" v-model="groupSns" :disabled="viewOnly" label="profile" border @change="changeSns">
-          Profile
-        </el-radio>
-        <el-radio id="groupSns" v-model="groupSns" :disabled="viewOnly" label="notProfile" border @change="changeSns">
-          NotProfile
-        </el-radio>
-
-        <div v-if="groupSns === 'notProfile'">
-          <praeco-form-item label="TopicArn" prop="snsTopicArn" required>
-            <el-input id="snsTopicArn" v-model="snsTopicArn" :disabled="viewOnly" />
-            <label>The SNS topic’s ARN. For example, arn:aws:sns:us-east-1:123456789:somesnstopic</label>
-          </praeco-form-item>
-          <praeco-form-item label="SnsAwsAccessKeyId" prop="snsAwsAccessKeyId" required>
-            <el-input id="snsAwsAccessKeyId" v-model="snsAwsAccessKeyId" :disabled="viewOnly" />
-            <label>An access key to connect to Amazon SNS with.</label>
-          </praeco-form-item>
-          <praeco-form-item label="SnsAwsSecretAccessKey" prop="snsAwsSecretAccessKey" required>
-            <el-input id="snsAwsSecretAccessKey" v-model="snsAwsSecretAccessKey" :disabled="viewOnly" />
-            <label>The secret key associated with the access key.</label>
-          </praeco-form-item>
-          <praeco-form-item label="SnsAwsRegion" prop="snsAwsRegion" required>
-            <el-input id="snsAwsRegion" v-model="snsAwsRegion" :disabled="viewOnly" />
-            <label>The AWS region in which the Amazon SNS resource is located. For example, us-east-1</label>
-          </praeco-form-item>
-        </div>
-        <div v-if="groupSns === 'profile'">
-          <praeco-form-item label="TopicArn" prop="snsTopicArn" required>
-            <el-input id="snsTopicArn" v-model="snsTopicArn" :disabled="viewOnly" />
-            <label>The Amazon SNS topic’s ARN. For example, arn:aws:sns:us-east-1:123456789:somesnstopic</label>
-          </praeco-form-item>
-          <praeco-form-item label="SnsAwsProfile" prop="snsAwsProfile" required>
-            <el-input id="snsAwsProfile" v-model="snsAwsProfile" :disabled="viewOnly" />
-            <label>The AWS profile to use. If none specified, the default will be used.</label>
-          </praeco-form-item>
-        </div>
+        <ConfigAlertAmazonSns ref="sns" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Amazon SES -->
       <el-tab-pane v-if="alert.includes('ses')">
         <template slot="label">
           <icon :icon="['fab', 'aws']" size="1x" /> Amazon SES
         </template>
-
-        <el-radio id="groupSes" v-model="groupSes" :disabled="viewOnly" label="profile" border @change="changeSes">
-          Profile
-        </el-radio>
-        <el-radio id="groupSes" v-model="groupSes" :disabled="viewOnly" label="notProfile" border @change="changeSes">
-          NotProfile
-        </el-radio>
-
-        <div v-if="groupSes === 'notProfile'">
-          <praeco-form-item label="SesAwsAccessKeyId" prop="sesAwsAccessKeyId" required>
-            <el-input id="sesAwsAccessKeyId" v-model="sesAwsAccessKeyId" :disabled="viewOnly" />
-            <label>An access key to connect to Amazon SES with.</label>
-          </praeco-form-item>
-          <praeco-form-item label="SesAwsSecretAccessKey" prop="sesAwsSecretAccessKey" required>
-            <el-input id="sesAwsSecretAccessKey" v-model="sesAwsSecretAccessKey" :disabled="viewOnly" />
-            <label>The secret key associated with the access key.</label>
-          </praeco-form-item>
-          <praeco-form-item label="SesAwsRegion" prop="sesAwsRegion" required>
-            <el-input id="sesAwsRegion" v-model="sesAwsRegion" :disabled="viewOnly" />
-            <label>The AWS region in which the Amazon SES resource is located. For example, us-east-1</label>
-          </praeco-form-item>
-        </div>
-        <div v-if="groupSes === 'profile'">
-          <praeco-form-item label="SesAwsProfile" prop="sesAwsProfile" required>
-            <el-input id="sesAwsProfile" v-model="sesAwsProfile" :disabled="viewOnly" />
-            <label>The AWS profile to use. If none specified, the default will be used.</label>
-          </praeco-form-item>
-        </div>
-
-        <praeco-form-item
-          v-if="!viewOnly || sesFromAddr"
-          :value="sesFromAddr"
-          label="From address"
-          prop="sesFromAddr">
-          <el-input v-model="sesFromAddr" :disabled="viewOnly" />
-          <label>
-            This sets the From header in the email.
-            By default, the from address is ElastAlert@
-            and the domain will be set by the smtp server.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item
-          v-if="!viewOnly || sesEmailReplyTo"
-          :value="sesEmailReplyTo"
-          label="Reply to"
-          prop="sesEmailReplyTo">
-          <el-input v-model="sesEmailReplyTo" :disabled="viewOnly" />
-          <label>
-            This sets the Reply-To header in the email.
-            By default, the from address is ElastAlert@ and the
-            domain will be set by the smtp server.
-          </label>
-        </praeco-form-item>
-
-        <el-form-item label="To" prop="sesEmail" required>
-          <el-input v-model="sesEmail" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item v-if="!viewOnly || sesCc" label="CC" prop="sesCc">
-          <el-input v-model="sesCc" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item v-if="!viewOnly || sesBcc" label="BCC" prop="sesBcc">
-          <el-input v-model="sesBcc" :disabled="viewOnly" />
-          <label>Comma separated list of email addresses</label>
-        </el-form-item>
-
-        <el-form-item label="Email From Field" prop="sesEmailFromField">
-          <el-input v-model="sesEmailFromField" :disabled="viewOnly" />
-        </el-form-item>
-
-        <el-form-item label="Email Add Domain" prop="sesEmailAddDomain">
-          <el-input v-model="sesEmailAddDomain" :disabled="viewOnly" />
-        </el-form-item>
+        <ConfigAlertAmazonSes ref="ses" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Zabbix -->
       <el-tab-pane v-if="alert.includes('zabbix')">
         <template slot="label">
           Zabbix
         </template>
-        <praeco-form-item label="Zbx Sender Host" prop="zbxSenderHost" required>
-          <el-input id="zbxSenderHost" v-model="zbxSenderHost" :disabled="viewOnly" />
-          <label>The address where zabbix server is running.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Zbx Sender Port" prop="zbxSenderPort" required>
-          <el-input-number id="zbxSenderPort" v-model="zbxSenderPort" :disabled="viewOnly" />
-          <label>The port where zabbix server is listenning.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="ZbxHost" prop="zbxHost" required>
-          <el-input id="zbxHost" v-model="zbxHost" :disabled="viewOnly" />
-          <label>This field setup the host in zabbix that receives the value sent by Elastalert.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="ZbxKey" prop="zbxKey" required>
-          <el-input id="zbxKey" v-model="zbxKey" :disabled="viewOnly" />
-          <label>This field setup the key in the host that receives the value sent by Elastalert.</label>
-        </praeco-form-item>
+        <ConfigAlertZabbix ref="zabbix" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Twilio -->
       <el-tab-pane v-if="alert.includes('twilio')">
         <template slot="label">
           Twilio
         </template>
-        <el-radio id="groupTwilio" v-model="groupTwilio" :disabled="viewOnly" label="sms" border @change="changeTwilio">
-          SMS
-        </el-radio>
-        <el-radio id="groupTwilio" v-model="groupTwilio" :disabled="viewOnly" label="copilot" border @change="changeTwilio">
-          Copilot
-        </el-radio>
-
-        <praeco-form-item label="Twilio Account Sid" prop="twilioAccountSid" required>
-          <el-input id="twilioAccountSid" v-model="twilioAccountSid" :disabled="viewOnly" />
-          <label>This is sid of your twilio account.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Twilio Auth Token" prop="twilioAuth" required>
-          <el-input id="twilioAuth" v-model="twilioAuth" :disabled="viewOnly" />
-          <label>Auth token assosiated with your twilio account.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Twilio To Number" prop="twilioToNumber" required>
-          <el-input id="twilioToNumber" v-model="twilioToNumber" :disabled="viewOnly" />
-          <label>The phone number where you would like send the notification. </label>
-        </praeco-form-item>
-
-        <div v-if="groupTwilio === 'sms'">
-          <praeco-form-item label="Twilio From Number" prop="twilioFromNumber" required>
-            <el-input id="twilioFromNumber" v-model="twilioFromNumber" :disabled="viewOnly" />
-            <label>Your twilio phone number from which message will be sent. </label>
-          </praeco-form-item>
-        </div>
-
-        <div v-if="groupTwilio === 'copilot'">
-          <praeco-form-item label="Twilio Message Service Sid" prop="twilioMessageServiceSid" required>
-            <el-input id="twilioMessageServiceSid" v-model="twilioMessageServiceSid" :disabled="viewOnly" />
-            <label>The SID of your twilio message service.</label>
-          </praeco-form-item>
-        </div>
+        <ConfigAlertTwilio ref="twilio" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- PagerTree -->
       <el-tab-pane v-if="alert.includes('pagertree')">
         <template slot="label">
           PagerTree
         </template>
-
-        <praeco-form-item label="Integration URL" prop="pagertreeIntegrationUrl" required>
-          <el-input id="pagertreeIntegrationUrl" v-model="pagertreeIntegrationUrl" :disabled="viewOnly" />
-          <label>URL generated by PagerTree for the integration.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy" prop="pagertreeProxy" required>
-          <el-input id="pagertreeProxy" v-model="pagertreeProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to PagerTree.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </praeco-form-item>
+        <ConfigAlertPagerTree ref="pagertree" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Exotel -->
       <el-tab-pane v-if="alert.includes('exotel')">
         <template slot="label">
           Exotel
         </template>
-
-        <praeco-form-item label="Account Sid" prop="exotelAccountSid" required>
-          <el-input id="exotelAccountSid" v-model="exotelAccountSid" :disabled="viewOnly" />
-          <label>This is sid of your Exotel account.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Auth Token" prop="exotelAuthToken" required>
-          <el-input id="exotelAuthToken" v-model="exotelAuthToken" :disabled="viewOnly" />
-          <label>Auth token assosiated with your Exotel account.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Number" prop="exotelToNumber" required>
-          <el-input id="exotelToNumber" v-model="exotelToNumber" :disabled="viewOnly" />
-          <label>The phone number where you would like send the notification.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="From Number" prop="exotelFromNumber" required>
-          <el-input id="exotelFromNumber" v-model="exotelFromNumber" :disabled="viewOnly" />
-          <label>Your exophone number from which message will be sent.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Message Body" prop="exotelMessageBody">
-          <el-input id="exotelMessageBody" v-model="exotelMessageBody" :disabled="viewOnly" />
-          <label>Message you want to send in the sms, is you don’t specify this argument only the rule name is sent</label>
-        </praeco-form-item>
+        <ConfigAlertExotel ref="exotel" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Stomp -->
       <el-tab-pane v-if="alert.includes('stomp')">
         <template slot="label">
           Stomp
         </template>
-
-        <praeco-form-item label="Host Name" prop="stompHostname" required>
-          <el-input id="stompHostname" v-model="stompHostname" :disabled="viewOnly" />
-          <label>The STOMP host to use, defaults to localhost.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Host Port" prop="stompHostport" required>
-          <el-input id="stompHostport" v-model="stompHostport" :disabled="viewOnly" />
-          <label>The STOMP port to use, defaults to 61613.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Login" prop="stompLogin" required>
-          <el-input id="stompLogin" v-model="stompLogin" :disabled="viewOnly" />
-          <label>The STOMP login to use, defaults to admin.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Password" prop="stompPassword" required>
-          <el-input id="stompPassword" v-model="stompPassword" :disabled="viewOnly" />
-          <label>The STOMP password to use, defaults to admin.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Destination" prop="stompDestination">
-          <el-input id="stompDestination" v-model="stompDestination" :disabled="viewOnly" />
-          <label>The STOMP destination to use, defaults to /queue/ALERT</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="SSL" prop="stompSsl">
-          <el-switch
-            id="stompSsl"
-            v-model="stompSsl"
-            :disabled="viewOnly"
-            @change="changestompSsl" />
-          <label>Connect the STOMP host using TLS.</label>
-        </praeco-form-item>
+        <ConfigAlertStomp ref="stomp" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- VictorOps -->
       <el-tab-pane v-if="alert.includes('victorops')">
         <template slot="label">
           VictorOps
         </template>
-
-        <praeco-form-item label="Api Key" prop="victoropsApiKey" required>
-          <el-input id="victoropsApiKey" v-model="victoropsApiKey" :disabled="viewOnly" />
-          <label>API key generated under the ‘REST Endpoint’ in the Integrations settings.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Routing Key" prop="victoropsRoutingKey" required>
-          <el-input id="victoropsRoutingKey" v-model="victoropsRoutingKey" :disabled="viewOnly" />
-          <label>VictorOps routing key to route the alert to.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Message Type" prop="victoropsMessageType" required>
-          <el-radio-group v-model="victoropsMessageType" :disabled="viewOnly">
-            <el-radio id="victoropsMessageTypeInfo" label="INFO" border>
-              INFO
-            </el-radio>
-            <el-radio id="victoropsMessageTypeWarning" label="WARNING" border>
-              WARNING
-            </el-radio>
-            <el-radio id="victoropsMessageTypeAcknowledgement" label="ACKNOWLEDGEMENT" border>
-              ACKNOWLEDGEMENT
-            </el-radio>
-            <el-radio id="victoropsMessageTypeCritical" label="CRITICAL" border>
-              CRITICAL
-            </el-radio>
-            <el-radio id="victoropsMessageTypeRecovery" label="RECOVERY" border>
-              RECOVERY
-            </el-radio>
-          </el-radio-group>
-          <label>
-            VictorOps field to specify severity level.
-            Must be one of the following: INFO, WARNING, ACKNOWLEDGEMENT, CRITICAL, RECOVERY
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Entity Id" prop="victoropsEntityId">
-          <el-input id="victoropsEntityId" v-model="victoropsEntityId" :disabled="viewOnly" />
-          <label>
-            The identity of the incident used by VictorOps to correlate incidents throughout the alert lifecycle.
-            If not defined, VictorOps will assign a random string to each alert.
-            /label>
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Entity Display Name" prop="victoropsEntityDisplayName">
-          <el-input id="victoropsEntityDisplayName" v-model="victoropsEntityDisplayName" :disabled="viewOnly" />
-          <label>Human-readable name of alerting entity to summarize incidents without affecting the life-cycle workflow.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy" prop="victoropsProxy">
-          <el-input id="victoropsProxy" v-model="victoropsProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to VictorOps.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </praeco-form-item>
+        <ConfigAlertVictorOps ref="victorops" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- ServiceNow -->
       <el-tab-pane v-if="alert.includes('servicenow')">
         <template slot="label">
           ServiceNow
         </template>
-
-        <praeco-form-item label="Username" prop="serviceNowUsername" required>
-          <el-input id="serviceNowUsername" v-model="serviceNowUsername" :disabled="viewOnly" />
-          <label>The ServiceNow Username to access the api.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Password" prop="serviceNowPassword" required>
-          <el-input id="serviceNowPassword" v-model="serviceNowPassword" :disabled="viewOnly" />
-          <label>The ServiceNow password to access the api.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="REST URL" prop="servicenowRestUrl" required>
-          <el-input id="servicenowRestUrl" v-model="servicenowRestUrl" :disabled="viewOnly" />
-          <label>The ServiceNow RestApi url.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="ShortDescription" prop="servicenowShortDescription" required>
-          <el-input id="servicenowShortDescription" v-model="servicenowShortDescription" :disabled="viewOnly" />
-          <label>The ServiceNow password to access the api.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Comments" prop="servicenowComments" required>
-          <el-input id="servicenowComments" v-model="servicenowComments" :disabled="viewOnly" />
-          <label>Comments to be attached to the incident, this is the equivilant of work notes.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="AssignmentGroup" prop="servicenowAssignmentGroup" required>
-          <el-input id="servicenowAssignmentGroup" v-model="servicenowAssignmentGroup" :disabled="viewOnly" />
-          <label>The group to assign the incident to.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Category" prop="servicenowCategory" required>
-          <el-input id="servicenowCategory" v-model="servicenowCategory" :disabled="viewOnly" />
-          <label>The category to attach the incident to, use an existing category.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Subcategory" prop="servicenowSubcategory" required>
-          <el-input id="servicenowSubcategory" v-model="servicenowSubcategory" :disabled="viewOnly" />
-          <label>The subcategory to attach the incident to, use an existing subcategory.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="CmdbCi" prop="servicenowCmdbCi" required>
-          <el-input id="servicenowCmdbCi" v-model="servicenowCmdbCi" :disabled="viewOnly" />
-          <label>The configuration item to attach the incident to.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="CallerId" prop="servicenowCallerId" required>
-          <el-input id="servicenowCallerId" v-model="servicenowCallerId" :disabled="viewOnly" />
-          <label>The caller id (email address) of the user that created the incident.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Proxy" prop="servicenowProxy">
-          <el-input id="servicenowProxy" v-model="servicenowProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert will not use a network proxy to send notifications to ServiceNow.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Impact" prop="servicenowImpact">
-          <el-input-number id="servicenowImpact" v-model="servicenowImpact" :disabled="viewOnly" :min="1" :max="3" />
-          <label>
-            An integer 1, 2, or 3 representing high, medium, and low respectively.
-            This measures the effect of an incident on business processes.
-          </label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Urgency" prop="servicenowUrgency">
-          <el-input-number id="servicenowUrgency" v-model="servicenowUrgency" :disabled="viewOnly" :min="1" :max="3" />
-          <label>
-            An integer 1, 2, or 3 representing high, medium, and low respecitvely.
-            This measures how long this incident can be delayed until there is a significant business impact.
-          </label>
-        </praeco-form-item>
+        <ConfigAlertServiceNow ref="servicenow" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Chatwork -->
       <el-tab-pane v-if="alert.includes('chatwork')">
         <template slot="label">
           Chatwork
         </template>
-
-        <praeco-form-item label="Api Key" prop="chatworkApikey" required>
-          <el-input id="chatworkApikey" v-model="chatworkApikey" :disabled="viewOnly" />
-          <label>ChatWork API KEY.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Room Id" prop="chatworkRoomId" required>
-          <el-input id="chatworkRoomId" v-model="chatworkRoomId" :disabled="viewOnly" />
-          <label>
-            The ID of the room you are talking to in Chatwork.
-            How to find the room ID is the part of the number after "rid" at the end of the URL of the browser.
-          </label>
-        </praeco-form-item>
+        <ConfigAlertChatwork ref="chatwork" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- Discord -->
       <el-tab-pane v-if="alert.includes('discord')">
         <template slot="label">
           Discord
         </template>
-
-        <praeco-form-item label="WebhookURL" prop="discordWebhookUrl" required>
-          <el-input id="discordWebhookUrl" v-model="discordWebhookUrl" :disabled="viewOnly" />
-          <label>The webhook URL.</label>
-        </praeco-form-item>
-
-        <praeco-form-item
-          v-if="!(viewOnly && !discordEmojiTitle)"
-          :class="{ 'disabled': viewOnly }"
-          label="Icon"
-          prop="discordEmojiTitle">
-          <picker
-            :emoji="discordEmojiTitle || 'arrow_up'"
-            :title="discordEmojiTitle || 'Pick your icon...'"
-            color="#189acc"
-            @select="addDiscordEmoji" />
-        </praeco-form-item>
-
-        <praeco-form-item label="Discord Embed Footer" prop="discordEmbedFooter">
-          <el-input id="discordEmbedFooter" v-model="discordEmbedFooter" :disabled="viewOnly" />
-          <label>embed footer.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Embed IconUrl" prop="discordEmbedIconUrl">
-          <el-input id="discordEmbedIconUrl" v-model="discordEmbedIconUrl" :disabled="viewOnly" />
-          <label>
-            You can provide icon_url to use custom image.
-            Provide absolute address of the pciture.(exampmle : http://domain/picure.png)
-          </label>
-        </praeco-form-item>
+        <ConfigAlertDiscord ref="discord" :view-only="viewOnly" />
       </el-tab-pane>
 
+      <!-- TheHive -->
       <el-tab-pane v-if="alert.includes('hivealerter')">
         <template slot="label">
           TheHive
         </template>
+        <ConfigAlertTheHive ref="hivealerter" :view-only="viewOnly" />
+      </el-tab-pane>
 
-        <praeco-form-item label="Hive Alert Config Title" prop="hiveAlertConfigTitle">
-          <el-input id="hiveAlertConfigTitle" v-model="hiveAlertConfigTitle" :disabled="viewOnly" />
-          <label>Alert's description.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Hive Alert Config Type" prop="hiveAlertConfigType">
-          <el-input id="hiveAlertConfigType" v-model="hiveAlertConfigType" :disabled="viewOnly" />
-          <label>Alert's type.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Hive Alert Config Source" prop="hiveAlertConfigSource">
-          <el-input id="hiveAlertConfigSource" v-model="hiveAlertConfigSource" :disabled="viewOnly" />
-          <label>Alert's source.</label>
-        </praeco-form-item>
+      <!-- Alerta -->
+      <el-tab-pane v-if="alert.includes('alerta')">
+        <template slot="label">
+          Alerta
+        </template>
+        <ConfigAlertAlerta ref="alerta" :view-only="viewOnly" />
+      </el-tab-pane>
 
-        <praeco-form-item label="Hive Alert Config Description" prop="hiveAlertConfigDescription">
-          <el-input id="hiveAlertConfigDescription" v-model="hiveAlertConfigDescription" :disabled="viewOnly" />
-          <label>Alert's description.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Hive Alert Config Severity" prop="hiveAlertConfigSeverity">
-          <el-input-number id="hiveAlertConfigSeverity" v-model.number="hiveAlertConfigSeverity" :min="1" :max="4" :disabled="viewOnly" />
-          <label>Alert's severity: 1, 2, 3, 4 for LOW, MEDIUM, HIGH, CRTICAL.</label>
-        </praeco-form-item>
-
-        <el-popover v-model="pophiveAlertConfigTagsVisible" :class="{ 'is-invalid': !pophiveAlertConfigTagsValid }">
-          <span slot="reference" class="pop-trigger">
-            <el-tooltip v-if="hiveAlertConfigTags.length" :content="hiveAlertConfigTags.join(', ')" placement="top">
-              <span>Tags ({{ hiveAlertConfigTags.length }})</span>
-            </el-tooltip>
-            <span v-else>Tags ({{ hiveAlertConfigTags.length }})</span>
-          </span>
-          <template>
-            <el-form
-              ref="hiveAlertConfigTags"
-              :model="$store.state.config.alert"
-              label-position="top"
-              style="width: 360px"
-              @submit.native.prevent>
-              <el-form-item
-                v-for="(entry, index) in hiveAlertConfigTags"
-                :key="index"
-                :prop="'hiveAlertConfigTags.' + 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="hiveAlertConfigTags[index]"
-                      :disabled="viewOnly"
-                      placeholder="Tags"
-                      @input="(val) => updateHiveAlertConfigTags(val, index)" />
-                  </el-col>
-                  <el-col :span="4">
-                    <el-button
-                      :disabled="viewOnly"
-                      type="danger"
-                      icon="el-icon-delete"
-                      circle
-                      plain
-                      @click="removeHiveAlertConfigTagsEntry(entry)" />
-                  </el-col>
-                </el-row>
-              </el-form-item>
-            </el-form>
-
-            <el-button :disabled="viewOnly" class="m-n-sm" @click="addHiveAlertConfigTagsEntry">
-              Add tags
-            </el-button>
-          </template>
-        </el-popover>
-
-        <praeco-form-item label="Hive Alert Config Tlp" prop="hiveAlertConfigTlp">
-          <el-input-number id="hiveAlertConfigTlp" v-model.number="hiveAlertConfigTlp" :min="0" :max="3" :disabled="viewOnly" />
-          <label>Alert's TLP: 0, 1, 2, 3 for WHITE, GREEN, AMBER, RED.</label>
-        </praeco-form-item>
-
-        <praeco-form-item label="Hive Alert Config Status" prop="hiveAlertConfigStatus">
-          <el-radio-group v-model="hiveAlertConfigStatus" :disabled="viewOnly">
-            <el-radio id="hiveAlertConfigStatusWaiting" label="Waiting" border>
-              Waiting
-            </el-radio>
-            <el-radio id="hiveAlertConfigStatusInProgress" label="InProgress" border>
-              InProgress
-            </el-radio>
-            <el-radio id="hiveAlertConfigStatusCancel" label="Cancel" border>
-              Cancel
-            </el-radio>
-            <el-radio id="hiveAlertConfigStatusCompleted" label="Completed" border>
-              Completed
-            </el-radio>
-          </el-radio-group>
-          <label>Task's status: Waiting, InProgress, Cancel, Completed.</label>
-        </praeco-form-item>
-
-        <el-form-item label="Hive Alert Config Follow" prop="hiveAlertConfigFollow">
-          <el-switch
-            id="hiveAlertConfigFollow"
-            v-model="hiveAlertConfigFollow"
-            :disabled="viewOnly"
-            @change="changeHiveAlertConfigFollow" />
-        </el-form-item>
-      </el-tab-pane>
-
-      <el-tab-pane v-if="alert.includes('alerta')">
-        <template slot="label">
-          Alerta
-        </template>
-
-        <el-form-item label="API URL" prop="alertaApiUrl" required>
-          <el-input id="alertaApiUrl" v-model="alertaApiUrl" :disabled="viewOnly" />
-          <label>API server URL.</label>
-        </el-form-item>
-
-        <el-form-item label="API Key" prop="alertaApiKey">
-          <el-input id="alertaApiKey" v-model="alertaApiKey" :disabled="viewOnly" />
-          <label>
-            This is the api key for alerta server, sent in an Authorization HTTP header.
-            If not defined, no Authorization header is sent.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Severity" prop="alertaSeverity">
-          <el-select
-            v-model="alertaSeverity"
-            :disabled="viewOnly"
-            placeholder=""
-            class="el-select-wide">
-            <el-option
-              v-for="v in alertaSeverityOptions"
-              :key="v.code"
-              :label="v.name"
-              :value="v.code" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="Resource" prop="alertaResource">
-          <el-input id="alertaResource" v-model="alertaResource" :disabled="viewOnly" />
-          <label>If true and query_key is present, this will override alerta_resource field with the query_key value (Can be useful if query_key is a hostname).</label>
-        </el-form-item>
-
-        <el-form-item label="Text" prop="alertaText">
-          <el-input id="alertaText" v-model="alertaText" :disabled="viewOnly" />
-          <label>
-            This is the api key for alerta server, sent in an Authorization HTTP header.
-            If not defined, no Authorization header is sent.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Event" prop="alertaEvent">
-          <el-input id="alertaEvent" v-model="alertaEvent" :disabled="viewOnly" />
-          <label>Defaults to “elastalert”.</label>
-        </el-form-item>
-
-        <el-form-item label="Group" prop="alertaGroup">
-          <el-input id="alertaGroup" v-model="alertaGroup" :disabled="viewOnly" />
-          <label>Defaults to “”.</label>
-        </el-form-item>
-
-        <el-popover v-model="popAlertaTagsVisible" :class="{ 'is-invalid': !popAlertaTagsValid }">
-          <span slot="reference" class="pop-trigger">
-            <el-tooltip v-if="alertaTags.length" :content="alertaTags.join(', ')" placement="top">
-              <span>Tags ({{ alertaTags.length }})</span>
-            </el-tooltip>
-            <span v-else>Tags ({{ alertaTags.length }})</span>
-          </span>
-          <template>
-            <el-form
-              ref="alertaTags"
-              :model="$store.state.config.alert"
-              label-position="top"
-              style="width: 360px"
-              @submit.native.prevent>
-              <el-form-item
-                v-for="(entry, index) in alertaTags"
-                :key="index"
-                :prop="'alertaTags.' + 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="alertaTags[index]"
-                      :disabled="viewOnly"
-                      placeholder="Tags"
-                      @input="(val) => updateAlertaTags(val, index)" />
-                  </el-col>
-                  <el-col :span="4">
-                    <el-button
-                      :disabled="viewOnly"
-                      type="danger"
-                      icon="el-icon-delete"
-                      circle
-                      plain
-                      @click="removeAlertaTagsEntry(entry)" />
-                  </el-col>
-                </el-row>
-              </el-form-item>
-            </el-form>
-
-            <el-button :disabled="viewOnly" class="m-n-sm" @click="addAlertaTagsEntry">
-              Add tags
-            </el-button>
-          </template>
-        </el-popover>
-
-        <el-form-item label="Environment" prop="alertaEnvironment">
-          <el-input id="alertaEnvironment" v-model="alertaEnvironment" :disabled="viewOnly" />
-          <label>Defaults to “Production”.</label>
-        </el-form-item>
-      </el-tab-pane>
-
-      <el-tab-pane v-if="alert.includes('datadog')">
-        <template slot="label">
-          Datadog
-        </template>
-
-        <el-form-item label="API KEY" prop="datadogApiKey" required>
-          <el-input id="datadogApiKey" v-model="datadogApiKey" :disabled="viewOnly" />
-          <label>Datadog API key.</label>
-        </el-form-item>
-
-        <el-form-item label="APP KEY" prop="datadogAppKey" required>
-          <el-input id="datadogAppKey" v-model="datadogAppKey" :disabled="viewOnly" />
-          <label>Datadog application key.</label>
-        </el-form-item>
-      </el-tab-pane>
-
-      <el-tab-pane v-if="alert.includes('rocketchat')">
-        <template slot="label">
-          <icon :icon="['fab', 'rocketchat']" size="1x" /> Rocket.Chat
-        </template>
-        <el-form-item label="Channel or username" prop="rocketChatChannelOverride" required>
-          <el-input id="rocketChatChannelOverride" v-model="rocketChatChannelOverride" :disabled="viewOnly" />
-          <label>
-            The @username or #channel to send the alert. Tip: Create new channels
-            for your alerts, to have fine-grained control of Slack notifications.
-          </label>
-        </el-form-item>
-
-        <praeco-form-item label="Post as" prop="rocketChatUsernameOverride" required>
-          <el-input id="rocketChatUsernameOverride" v-model="rocketChatUsernameOverride" :disabled="viewOnly" />
-          <label>This is the username that will appear in Slack for the alert</label>
-        </praeco-form-item>
-
-        <praeco-form-item
-          v-if="!(viewOnly && !rocketChatEmojiOverride)"
-          :class="{ 'disabled': viewOnly }"
-          label="Icon"
-          prop="rocketChatEmojiOverride">
-          <picker
-            :emoji="rocketChatEmojiOverride || 'arrow_up'"
-            :title="rocketChatEmojiOverride || 'Pick your icon...'"
-            color="#189acc"
-            @select="addEmoji" />
-        </praeco-form-item>
-
-        <el-form-item label="Message color" prop="rocketChatMsgColor" required>
-          <el-radio-group v-model="rocketChatMsgColor" :disabled="viewOnly">
-            <el-radio id="rocketChatMsgColorDanger" label="danger" border class="rocketChat-danger">
-              Danger
-            </el-radio>
-            <el-radio id="rocketChatMsgColorWarning" label="warning" border class="rocketChat-warning">
-              Warning
-            </el-radio>
-            <el-radio id="rocketChatMsgColorGood" label="good" border class="rocketChat-good">
-              Good
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="Text String" prop="rocketChatTextString">
-          <el-input id="rocketChatTextString" v-model="rocketChatTextString" :disabled="viewOnly" />
-          <label>Notification message you want to add.</label>
-        </el-form-item>
-
-        <el-form-item label="Proxy" prop="rocketChatProxy">
-          <el-input id="rocketChatProxy" v-model="rocketChatProxy" :disabled="viewOnly" />
-          <label>
-            By default ElastAlert2 will not use a network proxy to send notifications to Slack.
-            Set this option using hostname:port if you need to use a proxy.
-          </label>
-        </el-form-item>
-
-        <el-form-item label="Attach Kibana Discover URL" prop="rocketChatAttachKibanaDiscoverUrl">
-          <el-switch
-            id="rocketChatAttachKibanaDiscoverUrl"
-            v-model="rocketChatAttachKibanaDiscoverUrl"
-            :disabled="viewOnly"
-            @change="changeRocketChatAttachKibanaDiscoverUrl" />
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Color" prop="rocketChatKibanaDiscoverColor">
-          <el-color-picker
-            v-model="rocketChatKibanaDiscoverColor" :disabled="viewOnly" />
-          <label>The color of the Kibana Discover url attachment.</label>
-        </el-form-item>
-
-        <el-form-item label="Kibana Discover Title" prop="rocketChatKibanaDiscoverTitle">
-          <el-input v-model="rocketChatKibanaDiscoverTitle" :disabled="viewOnly" />
-          <label>The title of the Kibana Discover url attachment.</label>
-        </el-form-item>
-
-        <el-form-item label="Ignore SSL Errors" prop="rocketChatIgnoreSslErrors">
-          <el-switch
-            id="rocketChatIgnoreSslErrors"
-            v-model="rocketChatIgnoreSslErrors"
-            :disabled="viewOnly"
-            @change="changeRocketChatIgnoreSslErrors" />
-        </el-form-item>
-
-        <el-form-item label="CA Certs" prop="rocketChatCaCerts">
-          <el-switch
-            id="rocketChatCaCerts"
-            v-model="rocketChatCaCerts"
-            :disabled="viewOnly"
-            @change="changeRocketChatCaCerts" />
-        </el-form-item>
-
-        <el-form-item label="Timeout" prop="rocketChatTimeout">
-          <el-input-number id="rocketChatTimeout" v-model="rocketChatTimeout" :disabled="viewOnly" />
-          <label>
-            You can specify a timeout value, in seconds, for making communicating with Rocket.Chat.
-            The default is 10. If a timeout occurs, the alert will be retried next time elastalert cycles.
-          </label>
-        </el-form-item>
-      </el-tab-pane>
-    </el-tabs>
-  </el-form>
-</template>
-
-<script>
-import VueCronEditorBuefy from 'vue-cron-editor-buefy';
-import * as EmailValidator from 'email-validator';
-import validUrl from 'valid-url';
-import { Picker } from 'emoji-mart-vue';
-import ConfigAlertSubjectBody from './ConfigAlertSubjectBody';
-
-let validateSlackDestination = (rule, value, callback) => {
-  if (value.length < 2) {
-    callback(new Error('Please enter a @username or #channel'));
-  } else if (!value.startsWith('@') && !value.startsWith('#')) {
-    callback(new Error('Please enter a @username or #channel'));
-  } else {
-    callback();
-  }
-};
-
-let validateEmail = (rule, value, callback) => {
-  if (!value || EmailValidator.validate(value)) {
-    callback();
-  } else {
-    callback(new Error('Invalid email address'));
-  }
-};
-
-let validateUrl = (rule, value, callback) => {
-  if (validUrl.isUri(value)) {
-    try {
-      let url = new URL(value);
-      if (['http:', 'https:'].includes(url.protocol)) {
-        callback();
-      } else {
-        callback(new Error('Invalid URL'));
-      }
-    } catch (error) {
-      callback(new Error('Invalid URL'));
-    }
-  } else {
-    callback(new Error('Invalid URL'));
-  }
-};
-
-let validateEmailCommaSeparated = (rule, value, callback) => {
-  let emails = [];
-
-  if (value) emails = value.split(',');
-
-  emails.forEach(email => {
-    if (
-      email
-      && !EmailValidator.validate(email.trim())
-    ) {
-      return callback(new Error('Invalid email address'));
-    }
-  });
-
-  return callback();
-};
-
-export default {
-  components: {
-    ConfigAlertSubjectBody,
-    VueCronEditorBuefy,
-    Picker
-  },
-
-  props: ['viewOnly'],
-
-  data() {
-    let groupSnsValue = 'profile';
-    if (typeof this.$store.state.config.alert.snsAwsProfile === 'undefined' || this.$store.state.config.alert.snsAwsProfile === '') {
-      groupSnsValue = 'notProfile';
-    }
-    let groupSesValue = 'profile';
-    if (typeof this.$store.state.config.alert.sesAwsProfile === 'undefined' || this.$store.state.config.alert.sesAwsProfile === '') {
-      groupSesValue = 'notProfile';
-    }
-    let groupTwilioValue = 'copilot';
-    if (typeof this.$store.state.config.alert.twilio_message_service_sid === 'undefined' || this.$store.state.config.alert.twilio_message_service_sid === '') {
-      groupTwilioValue = 'sms';
-    }
-    return {
-      enableLimitExcecution: false,
-      popAlertaTagsVisible: false,
-      popAlertaTagsValid: true,
-      popHiveAlertConfigTagsVisible: false,
-      popHiveAlertConfigTagsValid: true,
-      popCommandVisible: false,
-      popCommandValid: true,
-      groupSns: groupSnsValue,
-      groupSes: groupSesValue,
-      groupTwilio: groupTwilioValue,
-      visibleTabPane: '',
-      alertaSeverityOptions: [{
-        code: 'unknown',
-        name: 'unknown'
-      }, {
-        code: 'security',
-        name: 'security'
-      }, {
-        code: 'debug',
-        name: 'debug'
-      }, {
-        code: 'informational',
-        name: 'informational'
-      }, {
-        code: 'ok',
-        name: 'ok'
-      }, {
-        code: 'normal',
-        name: 'normal'
-      }, {
-        code: 'cleared',
-        name: 'cleared'
-      }, {
-        code: 'indeterminate',
-        name: 'indeterminate'
-      }, {
-        code: 'warning',
-        name: 'warning'
-      }, {
-        code: 'minor',
-        name: 'minor'
-      }, {
-        code: 'major',
-        name: 'major'
-      }, {
-        code: 'critical',
-        name: 'critical'
-      }],
-      rules: {
-        alert: [
-          {
-            required: true,
-            message: 'You must choose at least one alert type'
-          }
-        ],
-        slackChannelOverride: [
-          {
-            validator: validateSlackDestination,
-            trigger: 'change'
-          }
-        ],
-        mattermostChannelOverride: [
-          {
-            validator: validateSlackDestination,
-            trigger: 'change'
-          }
-        ],
-        rocketChatChannelOverride: [
-          {
-            validator: validateSlackDestination,
-            trigger: 'change'
-          }
-        ],
-        fromAddr: [
-          {
-            validator: validateEmail,
-            trigger: 'change'
-          }
-        ],
-        replyTo: [
-          {
-            validator: validateEmail,
-            trigger: 'change'
-          }
-        ],
-        email: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ],
-        cc: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ],
-        bcc: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ],
-        httpPostUrl: [
-          {
-            validator: validateUrl,
-            trigger: ['change', 'blur']
-          }
-        ],
-        pagertreeIntegrationUrl: [
-          {
-            validator: validateUrl,
-            trigger: ['change', 'blur']
-          }
-        ],
-        discordWebhookUrl: [
-          {
-            validator: validateUrl,
-            trigger: ['change', 'blur']
-          }
-        ],
-        gitterWebhookUrl: [
-          {
-            validator: validateUrl,
-            trigger: ['change', 'blur']
-          }
-        ],
-        alertaApiUrl: [
-          {
-            validator: validateUrl,
-            trigger: ['change', 'blur']
-          }
-        ],
-        sesFromAddr: [
-          {
-            validator: validateEmail,
-            trigger: 'change'
-          }
-        ],
-        sesEmailReplyTo: [
-          {
-            validator: validateEmail,
-            trigger: 'change'
-          }
-        ],
-        sesEmail: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ],
-        sesCc: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ],
-        sesBcc: [
-          {
-            validator: validateEmailCommaSeparated,
-            trigger: 'change'
-          }
-        ]
-      }
-    };
-  },
-
-  computed: {
-    aggregationSchedule: {
-      get() {
-        return this.$store.state.config.alert.aggregationSchedule;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_AGGREGATION_SCHEDULE', value);
-      }
-    },
-
-    limitExcecution: {
-      get() {
-        return this.$store.state.config.alert.limitExcecution;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_LIMIT_EXCECUTION', value);
-      }
-    },
-
-    httpPostUrl: {
-      get() {
-        return this.$store.state.config.alert.httpPostUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HTTP_POST_URL', value);
-      }
-    },
-
-    httpPostTimeout: {
-      get() {
-        return this.$store.state.config.alert.httpPostTimeout;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_HTTP_POST_TIMEOUT',
-          value
-        );
-      }
-    },
-
-    httpPostProxy: {
-      get() {
-        return this.$store.state.config.alert.httpPostProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_HTTP_POST_PROXY',
-          value
-        );
-      }
-    },
-
-    fromAddr: {
-      get() {
-        return this.$store.state.config.alert.fromAddr;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_FROM_ADDR', value);
-      }
-    },
-
-    replyTo: {
-      get() {
-        return this.$store.state.config.alert.replyTo;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_REPLY_TO', value);
-      }
-    },
-
-    email: {
-      get() {
-        return this.$store.state.config.alert.email;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_EMAIL', value);
-      }
-    },
-
-    cc: {
-      get() {
-        return this.$store.state.config.alert.cc;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_CC', value);
-      }
-    },
-
-    bcc: {
-      get() {
-        return this.$store.state.config.alert.bcc;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_BCC', value);
-      }
-    },
-
-    smtpSsl: {
-      get() {
-        return this.$store.state.config.alert.smtpSsl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_SSL', value);
-      }
-    },
-
-    smtpHost: {
-      get() {
-        return this.$store.state.config.alert.smtpHost;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_HOST', value);
-      }
-    },
-
-    smtpPort: {
-      get() {
-        return this.$store.state.config.alert.smtpPort;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_PORT', value);
-      }
-    },
-
-    smtpAuthFile: {
-      get() {
-        return this.$store.state.config.alert.smtpAuthFile;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_AUTH_FILE', value);
-      }
-    },
-
-    smtpKeyFile: {
-      get() {
-        return this.$store.state.config.alert.smtpKeyFile;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_KEY_FILE', value);
-      }
-    },
-
-    smtpCertFile: {
-      get() {
-        return this.$store.state.config.alert.smtpCertFile;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SMTP_CERT_FILE', value);
-      }
-    },
-
-    emailFromField: {
-      get() {
-        return this.$store.state.config.alert.emailFromField;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_EMAIL_FROM_FIELD', value);
-      }
-    },
-
-    emailAddDomain: {
-      get() {
-        return this.$store.state.config.alert.emailAddDomain;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_EMAIL_ADD_DOMAIN', value);
-      }
-    },
-
-    // TODO:
-    // emailFormat: {
-    //   get() {
-    //     return this.$store.state.config.alert.emailFormat;
-    //   },
-    //   set(value) {
-    //     this.$store.commit('config/alert/UPDATE_EMAIL_FORMAT', value);
-    //   }
-    // },
-
-    telegramRoomId: {
-      get() {
-        return this.$store.state.config.alert.telegramRoomId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TELEGRAM_ROOM_ID',
-          value
-        );
-      }
-    },
-
-    telegramProxy: {
-      get() {
-        return this.$store.state.config.alert.telegramProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TELEGRAM_PROXY',
-          value
-        );
-      }
-    },
-
-    telegramProxyLogin: {
-      get() {
-        return this.$store.state.config.alert.telegramProxyLogin;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TELEGRAM_PROXY_LOGIN',
-          value
-        );
-      }
-    },
-
-    telegramProxyPass: {
-      get() {
-        return this.$store.state.config.alert.telegramProxyPass;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TELEGRAM_PROXY_PASS',
-          value
-        );
-      }
-    },
-
-    exotelAccountSid: {
-      get() {
-        return this.$store.state.config.alert.exotelAccountSid;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_EXOTEL_ACCOUNT_SID',
-          value
-        );
-      }
-    },
-
-    exotelAuthToken: {
-      get() {
-        return this.$store.state.config.alert.exotelAuthToken;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_EXOTEL_AUTH_TOKEN',
-          value
-        );
-      }
-    },
-
-    exotelToNumber: {
-      get() {
-        return this.$store.state.config.alert.exotelToNumber;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_EXOTEL_TO_NUMBER',
-          value
-        );
-      }
-    },
-
-    exotelFromNumber: {
-      get() {
-        return this.$store.state.config.alert.exotelFromNumber;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_EXOTEL_FROM_NUMBER',
-          value
-        );
-      }
-    },
-
-    exotelMessageBody: {
-      get() {
-        return this.$store.state.config.alert.exotelMessageBody;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_EXOTEL_MESSAGE_BODY',
-          value
-        );
-      }
-    },
-
-    twilioAccountSid: {
-      get() {
-        return this.$store.state.config.alert.twilioAccountSid;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TWILIO_ACCOUNT_SID',
-          value
-        );
-      }
-    },
-
-    twilioAuth: {
-      get() {
-        return this.$store.state.config.alert.twilioAuth;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TWILIO_AUTH_TOKEN',
-          value
-        );
-      }
-    },
-
-    twilioToNumber: {
-      get() {
-        return this.$store.state.config.alert.twilioToNumber;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TWILIO_TO_NUMBER',
-          value
-        );
-      }
-    },
-
-    twilioFromNumber: {
-      get() {
-        return this.$store.state.config.alert.twilioFromNumber;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TWILIO_FROM_NUMBER',
-          value
-        );
-      }
-    },
-
-    twilioMessageServiceSid: {
-      get() {
-        return this.$store.state.config.alert.twilioMessageServiceSid;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_TWILIO_MESSAGE_SERVICE_SID',
-          value
-        );
-      }
-    },
-
-    pagertreeIntegrationUrl: {
-      get() {
-        return this.$store.state.config.alert.pagertreeIntegrationUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_PAGERTREE_INTEGRATION_URL',
-          value
-        );
-      }
-    },
-
-    pagertreeProxy: {
-      get() {
-        return this.$store.state.config.alert.pagertreeProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_PAGERTREE_PAGERTREE_PROXY',
-          value
-        );
-      }
-    },
-
-    snsTopicArn: {
-      get() {
-        return this.$store.state.config.alert.snsTopicArn;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SNS_TOPIC_ARN',
-          value
-        );
-      }
-    },
-
-    snsAwsAccessKeyId: {
-      get() {
-        return this.$store.state.config.alert.snsAwsAccessKeyId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SNS_AWS_ACCESS_KEY_ID',
-          value
-        );
-      }
-    },
-
-    snsAwsSecretAccessKey: {
-      get() {
-        return this.$store.state.config.alert.snsAwsSecretAccessKey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SNS_AWS_SECRET_ACCESS_KEY',
-          value
-        );
-      }
-    },
-
-    snsAwsRegion: {
-      get() {
-        return this.$store.state.config.alert.snsAwsRegion;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SNS_AWS_REGION',
-          value
-        );
-      }
-    },
-
-    snsAwsProfile: {
-      get() {
-        return this.$store.state.config.alert.snsAwsProfile;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SNS_AWS_PROFILE',
-          value
-        );
-      }
-    },
-
-    sesFromAddr: {
-      get() {
-        return this.$store.state.config.alert.sesFromAddr;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_FROM_ADDR', value);
-      }
-    },
-
-    sesEmailReplyTo: {
-      get() {
-        return this.$store.state.config.alert.sesEmailReplyTo;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_EMAIL_REPLY_TO', value);
-      }
-    },
-
-    sesEmail: {
-      get() {
-        return this.$store.state.config.alert.sesEmail;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_EMAIL', value);
-      }
-    },
-
-    sesCc: {
-      get() {
-        return this.$store.state.config.alert.sesCc;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_CC', value);
-      }
-    },
-
-    sesBcc: {
-      get() {
-        return this.$store.state.config.alert.sesBcc;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_BCC', value);
-      }
-    },
-
-    sesEmailFromField: {
-      get() {
-        return this.$store.state.config.alert.sesEmailFromField;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_EMAIL_FROM_FIELD', value);
-      }
-    },
-
-    sesEmailAddDomain: {
-      get() {
-        return this.$store.state.config.alert.sesEmailAddDomain;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SES_EMAIL_ADD_DOMAIN', value);
-      }
-    },
-
-    sesAwsAccessKeyId: {
-      get() {
-        return this.$store.state.config.alert.sesAwsAccessKeyId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SES_AWS_ACCESS_KEY_ID',
-          value
-        );
-      }
-    },
-
-    sesAwsSecretAccessKey: {
-      get() {
-        return this.$store.state.config.alert.sesAwsSecretAccessKey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SES_AWS_SECRET_ACCESS_KEY',
-          value
-        );
-      }
-    },
-
-    sesAwsRegion: {
-      get() {
-        return this.$store.state.config.alert.sesAwsRegion;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SES_AWS_REGION',
-          value
-        );
-      }
-    },
-
-    sesAwsProfile: {
-      get() {
-        return this.$store.state.config.alert.sesAwsProfile;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SES_AWS_PROFILE',
-          value
-        );
-      }
-    },
-
-    zbxSenderHost: {
-      get() {
-        return this.$store.state.config.alert.zbxSenderHost;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ZBX_SENDER_HOST',
-          value
-        );
-      }
-    },
-
-    zbxSenderPort: {
-      get() {
-        return this.$store.state.config.alert.zbxSenderPort;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ZBX_SENDER_PORT',
-          value
-        );
-      }
-    },
-
-    zbxHost: {
-      get() {
-        return this.$store.state.config.alert.zbxHost;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ZBX_HOST',
-          value
-        );
-      }
-    },
-
-    zbxKey: {
-      get() {
-        return this.$store.state.config.alert.zbxKey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ZBX_KEY',
-          value
-        );
-      }
-    },
-
-    linenotifyAccessToken: {
-      get() {
-        return this.$store.state.config.alert.linenotifyAccessToken;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_LINENOTIFY_ACCESS_TOKEN',
-          value
-        );
-      }
-    },
-
-    command: {
-      get() {
-        return this.$store.state.config.alert.command;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_COMMAND',
-          value
-        );
-      }
-    },
-
-    pipeMatchJson: {
-      get() {
-        return this.$store.state.config.alert.pipeMatchJson;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_PIPE_MATCH_JSON',
-          value
-        );
-      }
-    },
-
-    pipeAlertText: {
-      get() {
-        return this.$store.state.config.alert.pipeAlertText;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_PIPE_ALERT_TEXT',
-          value
-        );
-      }
-    },
-
-    gitterWebhookUrl: {
-      get() {
-        return this.$store.state.config.alert.gitterWebhookUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_GITTER_WEBHOOK_URL', value);
-      }
-    },
-
-    gitterMsgLevel: {
-      get() {
-        return this.$store.state.config.alert.gitterMsgLevel;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_GITTER_MSG_LEVEL', value);
-      }
-    },
-
-    gitterProxy: {
-      get() {
-        return this.$store.state.config.alert.gitterProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GITTER_PROXY',
-          value
-        );
-      }
-    },
-
-    jiraIssueType: {
-      get() {
-        return this.$store.state.config.alert.jiraIssueType;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_JIRA_ISSUE_TYPE',
-          value
-        );
-      }
-    },
-
-    jiraProject: {
-      get() {
-        return this.$store.state.config.alert.jiraProject;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_JIRA_PROJECT',
-          value
-        );
-      }
-    },
-
-    jiraComponents: {
-      get() {
-        return this.$store.state.config.alert.jiraComponents;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_JIRA_COMPONENTS',
-          value
-        );
-      }
-    },
-
-    discordWebhookUrl: {
-      get() {
-        return this.$store.state.config.alert.discordWebhookUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_DISCORD_WEBHOOK_URL',
-          value
-        );
-      }
-    },
-
-    discordEmojiTitle: {
-      get() {
-        return this.$store.state.config.alert.discordEmojiTitle;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_DISCORD_EMOJI_TITLE',
-          value
-        );
-      }
-    },
-
-    discordEmbedFooter: {
-      get() {
-        return this.$store.state.config.alert.discordEmbedFooter;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_DISCORD_EMBED_FOOTER',
-          value
-        );
-      }
-    },
-
-    discordEmbedIconUrl: {
-      get() {
-        return this.$store.state.config.alert.discordEmbedIconUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_DISCORD_EMBED_ICON_URL',
-          value
-        );
-      }
-    },
-
-    chatworkApikey: {
-      get() {
-        return this.$store.state.config.alert.chatworkApikey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_CHATWORK_API_KEY',
-          value
-        );
-      }
-    },
-    chatworkRoomId: {
-      get() {
-        return this.$store.state.config.alert.chatworkRoomId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_CHATWORK_ROOM_ID',
-          value
-        );
-      }
-    },
-
-    serviceNowUsername: {
-      get() {
-        return this.$store.state.config.alert.serviceNowUsername;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_USERNAME',
-          value
-        );
-      }
-    },
-
-    serviceNowPassword: {
-      get() {
-        return this.$store.state.config.alert.serviceNowPassword;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_PASSWORD',
-          value
-        );
-      }
-    },
-
-    servicenowRestUrl: {
-      get() {
-        return this.$store.state.config.alert.servicenowRestUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_REST_URL',
-          value
-        );
-      }
-    },
-
-    servicenowShortDescription: {
-      get() {
-        return this.$store.state.config.alert.servicenowShortDescription;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_SHORT_DESCRIPTION',
-          value
-        );
-      }
-    },
-
-    servicenowComments: {
-      get() {
-        return this.$store.state.config.alert.servicenowComments;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_COMMENTS',
-          value
-        );
-      }
-    },
-
-    servicenowAssignmentGroup: {
-      get() {
-        return this.$store.state.config.alert.servicenowAssignmentGroup;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_ASSIGNMENT_GROUP',
-          value
-        );
-      }
-    },
-
-    servicenowCategory: {
-      get() {
-        return this.$store.state.config.alert.servicenowCategory;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_CATEGORY',
-          value
-        );
-      }
-    },
-
-    servicenowSubcategory: {
-      get() {
-        return this.$store.state.config.alert.servicenowSubcategory;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_SUBCATEGORY',
-          value
-        );
-      }
-    },
-
-    servicenowCmdbCi: {
-      get() {
-        return this.$store.state.config.alert.servicenowCmdbCi;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_CMDB_CI',
-          value
-        );
-      }
-    },
-
-    servicenowCallerId: {
-      get() {
-        return this.$store.state.config.alert.servicenowCallerId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_CALLER_ID',
-          value
-        );
-      }
-    },
-
-    servicenowProxy: {
-      get() {
-        return this.$store.state.config.alert.servicenowProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_PROXY',
-          value
-        );
-      }
-    },
-
-    servicenowImpact: {
-      get() {
-        return this.$store.state.config.alert.servicenowImpact;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_IMPACT',
-          value
-        );
-      }
-    },
-
-    servicenowUrgency: {
-      get() {
-        return this.$store.state.config.alert.servicenowUrgency;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SERVICENOW_URGENCY',
-          value
-        );
-      }
-    },
-
-    victoropsApiKey: {
-      get() {
-        return this.$store.state.config.alert.victoropsApiKey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_API_KEY',
-          value
-        );
-      }
-    },
-
-    victoropsRoutingKey: {
-      get() {
-        return this.$store.state.config.alert.victoropsRoutingKey;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_ROUTING_KEY',
-          value
-        );
-      }
-    },
-
-    victoropsMessageType: {
-      get() {
-        return this.$store.state.config.alert.victoropsMessageType;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_MESSAGE_TYPE',
-          value
-        );
-      }
-    },
-
-    victoropsEntityId: {
-      get() {
-        return this.$store.state.config.alert.victoropsEntityId;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_ENTITY_ID',
-          value
-        );
-      }
-    },
-
-    victoropsEntityDisplayName: {
-      get() {
-        return this.$store.state.config.alert.victoropsEntityDisplayName;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_ENTITY_DISPLAY_NAME',
-          value
-        );
-      }
-    },
-
-    victoropsProxy: {
-      get() {
-        return this.$store.state.config.alert.victoropsProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_VICTOROPS_PROXY',
-          value
-        );
-      }
-    },
-
-    stompHostname: {
-      get() {
-        return this.$store.state.config.alert.stompHostname;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_HOSTNAME',
-          value
-        );
-      }
-    },
-
-    stompHostport: {
-      get() {
-        return this.$store.state.config.alert.stompHostport;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_HOSTPORT',
-          value
-        );
-      }
-    },
-
-    stompLogin: {
-      get() {
-        return this.$store.state.config.alert.stompLogin;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_LOGIN',
-          value
-        );
-      }
-    },
-
-    stompPassword: {
-      get() {
-        return this.$store.state.config.alert.stompPassword;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_PASSWORD',
-          value
-        );
-      }
-    },
-
-    stompDestination: {
-      get() {
-        return this.$store.state.config.alert.stompDestination;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_DESTINATION',
-          value
-        );
-      }
-    },
-
-    stompSsl: {
-      get() {
-        return this.$store.state.config.alert.stompSsl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_STOMP_SSL',
-          value
-        );
-      }
-    },
-
-    googleChatWebhookUrl: {
-      get() {
-        return this.$store.state.config.alert.googleChatWebhookUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLE_CHAT_WEBHOOK_URL',
-          value
-        );
-      }
-    },
-
-    googleChatFormat: {
-      get() {
-        return this.$store.state.config.alert.googleChatFormat;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLE_CHAT_FORMAT',
-          value
-        );
-      }
-    },
-
-    googleChatHeaderTitle: {
-      get() {
-        return this.$store.state.config.alert.googleChatHeaderTitle;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLE_CHAT_HEADER_TITLE',
-          value
-        );
-      }
-    },
-
-    googleChatHeaderSubtitle: {
-      get() {
-        return this.$store.state.config.alert.googleChatHeaderSubtitle;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLECHAT_HEADER_SUBTITLE',
-          value
-        );
-      }
-    },
-
-    googleChatHeaderImage: {
-      get() {
-        return this.$store.state.config.alert.googleChatHeaderImage;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLECHAT_HEADER_IMAGE',
-          value
-        );
-      }
-    },
-
-    googleFooterKibanalink: {
-      get() {
-        return this.$store.state.config.alert.googleFooterKibanalink;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_GOOGLECHAT_FOOTER_KIBANALINK',
-          value
-        );
-      }
-    },
-
-    slackChannelOverride: {
-      get() {
-        return this.$store.state.config.alert.slackChannelOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_CHANNEL_OVERRIDE', value);
-      }
-    },
-
-    slackUsernameOverride: {
-      get() {
-        return this.$store.state.config.alert.slackUsernameOverride;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_USERNAME_OVERRIDE',
-          value
-        );
-      }
-    },
-
-    slackEmojiOverride: {
-      get() {
-        return this.$store.state.config.alert.slackEmojiOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_EMOJI_OVERRIDE', value);
-      }
-    },
-
-    slackParseOverride: {
-      get() {
-        return this.$store.state.config.alert.slackParseOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_PARSE_OVERRIDE', value);
-      }
-    },
-
-    slackTextString: {
-      get() {
-        return this.$store.state.config.alert.slackTextString;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_TEXT_STRING',
-          value
-        );
-      }
-    },
-
-    slackIgnoreSslErrors: {
-      get() {
-        return this.$store.state.config.alert.slackIgnoreSslErrors;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_IGNORE_SSL_ERRORS',
-          value
-        );
-      }
-    },
-
-    slackIconUrlOverride: {
-      get() {
-        return this.$store.state.config.alert.slackIconUrlOverride;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_ICON_URL_OVERRIDE',
-          value
-        );
-      }
-    },
-
-    slackCaCerts: {
-      get() {
-        return this.$store.state.config.alert.slackCaCerts;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_CA_CERTS',
-          value
-        );
-      }
-    },
-
-    slackTimeout: {
-      get() {
-        return this.$store.state.config.alert.slackTimeout;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_TIMEOUT',
-          value
-        );
-      }
-    },
-
-    slackMsgColor: {
-      get() {
-        return this.$store.state.config.alert.slackMsgColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_MSG_COLOR', value);
-      }
-    },
-
-    slackAttachKibanaDiscoverUrl: {
-      get() {
-        return this.$store.state.config.alert.slackAttachKibanaDiscoverUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_ATTACH_KIBANA_DISCOVER_URL', value);
-      }
-    },
-
-    slackKibanaDiscoverColor: {
-      get() {
-        return this.$store.state.config.alert.slackKibanaDiscoverColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_KIBANA_DISCOVER_COLOR', value);
-      }
-    },
-
-    slackKibanaDiscoverTitle: {
-      get() {
-        return this.$store.state.config.alert.slackKibanaDiscoverTitle;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_SLACK_KIBANA_DISCOVER_TITLE', value);
-      }
-    },
-
-    slackProxy: {
-      get() {
-        return this.$store.state.config.alert.slackProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_PROXY',
-          value
-        );
-      }
-    },
-
-    slackFooter: {
-      get() {
-        return this.$store.state.config.alert.slackFooter;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_FOOTER',
-          value
-        );
-      }
-    },
-
-    slackFooterIcon: {
-      get() {
-        return this.$store.state.config.alert.slackFooterIcon;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_FOOTER_ICON',
-          value
-        );
-      }
-    },
-
-    slackImageUrl: {
-      get() {
-        return this.$store.state.config.alert.slackImageUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_IMAGE_URL',
-          value
-        );
-      }
-    },
-
-    slackThumbUrl: {
-      get() {
-        return this.$store.state.config.alert.slackThumbUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_THUMB_URL',
-          value
-        );
-      }
-    },
-
-    slackAuthorName: {
-      get() {
-        return this.$store.state.config.alert.slackAuthorName;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_AUTHOR_NAME',
-          value
-        );
-      }
-    },
-
-    slackAuthorLink: {
-      get() {
-        return this.$store.state.config.alert.slackAuthorLink;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_AUTHOR_LINK',
-          value
-        );
-      }
-    },
-
-    slackAuthorIcon: {
-      get() {
-        return this.$store.state.config.alert.slackAuthorIcon;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_AUTHOR_ICON',
-          value
-        );
-      }
-    },
-
-    slackMsgPretext: {
-      get() {
-        return this.$store.state.config.alert.slackMsgPretext;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_SLACK_MSG_PRETEXT',
-          value
-        );
-      }
-    },
-
-    mattermostChannelOverride: {
-      get() {
-        return this.$store.state.config.alert.mattermostChannelOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MATTERMOST_CHANNEL_OVERRIDE', value);
-      }
-    },
-
-    mattermostUsernameOverride: {
-      get() {
-        return this.$store.state.config.alert.mattermostUsernameOverride;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_USERNAME_OVERRIDE',
-          value
-        );
-      }
-    },
-
-    mattermostMsgColor: {
-      get() {
-        return this.$store.state.config.alert.mattermostMsgColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MATTERMOST_MSG_COLOR', value);
-      }
-    },
-
-    mattermostIconUrlOverride: {
-      get() {
-        return this.$store.state.config.alert.mattermostIconUrlOverride;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_ICON_URL_OVERRIDE',
-          value
-        );
-      }
-    },
-
-    mattermostMsgPretext: {
-      get() {
-        return this.$store.state.config.alert.mattermostMsgPretext;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_MSG_PRETEXT',
-          value
-        );
-      }
-    },
-
-    mattermostIgnoreSslErrors: {
-      get() {
-        return this.$store.state.config.alert.mattermostIgnoreSslErrors;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_IGNORE_SSL_ERRORS',
-          value
-        );
-      }
-    },
-
-    mattermostProxy: {
-      get() {
-        return this.$store.state.config.alert.mattermostProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_PROXY',
-          value
-        );
-      }
-    },
-
-    mattermostTitle: {
-      get() {
-        return this.$store.state.config.alert.mattermostTitle;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_TITLE',
-          value
-        );
-      }
-    },
-
-    mattermostTitleLink: {
-      get() {
-        return this.$store.state.config.alert.mattermostTitleLink;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_TITLE_LINK',
-          value
-        );
-      }
-    },
-
-    mattermostFooter: {
-      get() {
-        return this.$store.state.config.alert.mattermostFooter;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_FOOTER',
-          value
-        );
-      }
-    },
-
-    mattermostFooterIcon: {
-      get() {
-        return this.$store.state.config.alert.mattermostFooterIcon;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_FOOTER_ICON',
-          value
-        );
-      }
-    },
-
-    mattermostImageUrl: {
-      get() {
-        return this.$store.state.config.alert.mattermostImageUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_IMAGE_URL',
-          value
-        );
-      }
-    },
-
-    mattermostThumbUrl: {
-      get() {
-        return this.$store.state.config.alert.mattermostThumbUrl;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_THUMB_URL',
-          value
-        );
-      }
-    },
-
-    mattermostAuthorName: {
-      get() {
-        return this.$store.state.config.alert.mattermostAuthorName;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_AUTHOR_NAME',
-          value
-        );
-      }
-    },
-
-    mattermostAuthorLink: {
-      get() {
-        return this.$store.state.config.alert.mattermostAuthorLink;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_AUTHOR_LINK',
-          value
-        );
-      }
-    },
-
-    mattermostAuthorIcon: {
-      get() {
-        return this.$store.state.config.alert.mattermostAuthorIcon;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_MATTERMOST_AUTHOR_ICON',
-          value
-        );
-      }
-    },
-
-    mattermostAttachKibanaDiscoverUrl: {
-      get() {
-        return this.$store.state.config.alert.mattermostAttachKibanaDiscoverUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MATTERMOST_ATTACH_KIBANA_DISCOVER_URL', value);
-      }
-    },
-
-    mattermostKibanaDiscoverColor: {
-      get() {
-        return this.$store.state.config.alert.mattermostKibanaDiscoverColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MATTERMOST_KIBANA_DISCOVER_COLOR', value);
-      }
-    },
-
-    mattermostKibanaDiscoverTitle: {
-      get() {
-        return this.$store.state.config.alert.mattermostKibanaDiscoverTitle;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MATTERMOST_KIBANA_DISCOVER_TITLE', value);
-      }
-    },
-
-    rocketChatChannelOverride: {
-      get() {
-        return this.$store.state.config.alert.rocketChatChannelOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_CHANNEL_OVERRIDE', value);
-      }
-    },
-
-    rocketChatUsernameOverride: {
-      get() {
-        return this.$store.state.config.alert.rocketChatUsernameOverride;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_USERNAME_OVERRIDE',
-          value
-        );
-      }
-    },
-
-    rocketChatEmojiOverride: {
-      get() {
-        return this.$store.state.config.alert.rocketChatEmojiOverride;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_EMOJI_OVERRIDE', value);
-      }
-    },
-
-    rocketChatTextString: {
-      get() {
-        return this.$store.state.config.alert.rocketChatTextString;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_TEXT_STRING',
-          value
-        );
-      }
-    },
-
-    rocketChatMsgColor: {
-      get() {
-        return this.$store.state.config.alert.rocketChatMsgColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_MSG_COLOR', value);
-      }
-    },
-
-    rocketChatProxy: {
-      get() {
-        return this.$store.state.config.alert.rocketChatProxy;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_PROXY',
-          value
-        );
-      }
-    },
-
-    rocketChatAttachKibanaDiscoverUrl: {
-      get() {
-        return this.$store.state.config.alert.rocketChatAttachKibanaDiscoverUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_ATTACH_KIBANA_DISCOVER_URL', value);
-      }
-    },
-
-    rocketChatKibanaDiscoverColor: {
-      get() {
-        return this.$store.state.config.alert.rocketChatKibanaDiscoverColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_KIBANA_DISCOVER_COLOR', value);
-      }
-    },
-
-    rocketChatKibanaDiscoverTitle: {
-      get() {
-        return this.$store.state.config.alert.rocketChatKibanaDiscoverTitle;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_KIBANA_DISCOVER_TITLE', value);
-      }
-    },
-
-    ms_teamsWebhookUrl: {
-      get() {
-        return this.$store.state.config.alert.ms_teamsWebhookUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MS_TEAMS_WEBHOOK_URL', value);
-      }
-    },
-
-    rocketChatIgnoreSslErrors: {
-      get() {
-        return this.$store.state.config.alert.rocketChatIgnoreSslErrors;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_IGNORE_SSL_ERRORS',
-          value
-        );
-      }
-    },
-
-    rocketChatCaCerts: {
-      get() {
-        return this.$store.state.config.alert.rocketChatCaCerts;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_CA_CERTS',
-          value
-        );
-      }
-    },
-    rocketChatTimeout: {
-      get() {
-        return this.$store.state.config.alert.rocketChatTimeout;
-      },
-      set(value) {
-        this.$store.commit(
-          'config/alert/UPDATE_ROCKET_CHAT_TIMEOUT',
-          value
-        );
-      }
-    },
-
-    ms_teamsThemeColor: {
-      get() {
-        return this.$store.state.config.alert.ms_teamsThemeColor;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MS_TEAMS_THEME_COLOR', value);
-      }
-    },
-
-    ms_teamsAlertFixedWidth: {
-      get() {
-        return this.$store.state.config.alert.ms_teamsAlertFixedWidth;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MS_TEAMS_ALERT_FIXED_WIDTH', value);
-      }
-    },
-
-    ms_teamsAlertSummary: {
-      get() {
-        return this.$store.state.config.alert.ms_teamsAlertSummary;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MS_TEAMS_ALERT_SUMMARY', value);
-      }
-    },
-
-    ms_teamsProxy: {
-      get() {
-        return this.$store.state.config.alert.ms_teamsProxy;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_MS_TEAMS_PROXY', value);
-      }
-    },
-
-    hiveAlertConfigTitle: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigTitle;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TITLE', value);
-      }
-    },
-
-    hiveAlertConfigType: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigType;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TYPE', value);
-      }
-    },
-
-    hiveAlertConfigSource: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigSource;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_SOURCE', value);
-      }
-    },
-
-    hiveAlertConfigDescription: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigDescription;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_DESCRIPTION', value);
-      }
-    },
-
-    hiveAlertConfigSeverity: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigSeverity;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_SEVERITY', value);
-      }
-    },
-
-    hiveAlertConfigTags: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigTags;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TAGS', value);
-      }
-    },
-
-    hiveAlertConfigTlp: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigTlp;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TLP', value);
-      }
-    },
-
-    hiveAlertConfigStatus: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigStatus;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_STATUS', value);
-      }
-    },
-
-    hiveAlertConfigFollow: {
-      get() {
-        return this.$store.state.config.alert.hiveAlertConfigFollow;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_FOLLOW', value);
-      }
-    },
-
-    alertaApiUrl: {
-      get() {
-        return this.$store.state.config.alert.alertaApiUrl;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_API_URL', value);
-      }
-    },
-
-    alertaApiKey: {
-      get() {
-        return this.$store.state.config.alert.alertaApiKey;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_API_KEY', value);
-      }
-    },
-
-    alertaSeverity: {
-      get() {
-        return this.$store.state.config.alert.alertaSeverity;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_SEVERITY', value);
-      }
-    },
-
-    alertaResource: {
-      get() {
-        return this.$store.state.config.alert.alertaResource;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_RESOURCE', value);
-      }
-    },
+      <!-- Datadog -->
+      <el-tab-pane v-if="alert.includes('datadog')">
+        <template slot="label">
+          Datadog
+        </template>
+        <ConfigAlertDatadog ref="datadog" :view-only="viewOnly" />
+      </el-tab-pane>
 
-    alertaText: {
-      get() {
-        return this.$store.state.config.alert.alertaText;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_TEXT', value);
-      }
-    },
+      <!-- Rocket.Chat -->
+      <el-tab-pane v-if="alert.includes('rocketchat')">
+        <template slot="label">
+          <icon :icon="['fab', 'rocketchat']" size="1x" /> Rocket.Chat
+        </template>
+        <ConfigAlertRocketChat ref="rocketchat" :view-only="viewOnly" />
+      </el-tab-pane>
+    </el-tabs>
+  </el-form>
+</template>
 
-    alertaEvent: {
-      get() {
-        return this.$store.state.config.alert.alertaEvent;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_EVENT', value);
-      }
-    },
+<script>
+import VueCronEditorBuefy from 'vue-cron-editor-buefy';
+import ConfigAlertSubjectBody from './ConfigAlertSubjectBody';
+import ConfigAlertAlerta from './ConfigAlertAlerta';
+import ConfigAlertAmazonSes from './ConfigAlertAmazonSes';
+import ConfigAlertAmazonSns from './ConfigAlertAmazonSns';
+import ConfigAlertChatwork from './ConfigAlertChatwork';
+import ConfigAlertCommand from './ConfigAlertCommand';
+import ConfigAlertDatadog from './ConfigAlertDatadog';
+import ConfigAlertDiscord from './ConfigAlertDiscord';
+import ConfigAlertEmail from './ConfigAlertEmail';
+import ConfigAlertExotel from './ConfigAlertExotel';
+import ConfigAlertGitter from './ConfigAlertGitter';
+import ConfigAlertGoogleChat from './ConfigAlertGoogleChat';
+import ConfigAlertHttpPost from './ConfigAlertHttpPost';
+import ConfigAlertJira from './ConfigAlertJira';
+import ConfigAlertLineNotify from './ConfigAlertLineNotify';
+import ConfigAlertMattermost from './ConfigAlertMattermost';
+import ConfigAlertMsTeams from './ConfigAlertMsTeams';
+import ConfigAlertPagerTree from './ConfigAlertPagerTree';
+import ConfigAlertRocketChat from './ConfigAlertRocketChat';
+import ConfigAlertServiceNow from './ConfigAlertServiceNow';
+import ConfigAlertSlack from './ConfigAlertSlack';
+import ConfigAlertStomp from './ConfigAlertStomp';
+import ConfigAlertTelegram from './ConfigAlertTelegram';
+import ConfigAlertTheHive from './ConfigAlertTheHive';
+import ConfigAlertTwilio from './ConfigAlertTwilio';
+import ConfigAlertVictorOps from './ConfigAlertVictorOps';
+import ConfigAlertZabbix from './ConfigAlertZabbix';
 
-    alertaGroup: {
-      get() {
-        return this.$store.state.config.alert.alertaGroup;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_GROUP', value);
-      }
-    },
+export default {
+  components: {
+    ConfigAlertSubjectBody,
+    ConfigAlertAlerta,
+    ConfigAlertAmazonSes,
+    ConfigAlertAmazonSns,
+    ConfigAlertChatwork,
+    ConfigAlertCommand,
+    ConfigAlertDatadog,
+    ConfigAlertDiscord,
+    ConfigAlertEmail,
+    ConfigAlertExotel,
+    ConfigAlertGitter,
+    ConfigAlertGoogleChat,
+    ConfigAlertHttpPost,
+    ConfigAlertJira,
+    ConfigAlertLineNotify,
+    ConfigAlertMattermost,
+    ConfigAlertMsTeams,
+    ConfigAlertPagerTree,
+    ConfigAlertRocketChat,
+    ConfigAlertServiceNow,
+    ConfigAlertSlack,
+    ConfigAlertStomp,
+    ConfigAlertTelegram,
+    ConfigAlertTheHive,
+    ConfigAlertTwilio,
+    ConfigAlertVictorOps,
+    ConfigAlertZabbix,
+    VueCronEditorBuefy
+  },
 
-    alertaTags: {
-      get() {
-        return this.$store.state.config.alert.alertaTags;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_TAGS', value);
-      }
-    },
+  props: ['viewOnly'],
 
-    alertaEnvironment: {
-      get() {
-        return this.$store.state.config.alert.alertaEnvironment;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_ALERTA_ENVIRONMENT', value);
+  data() {
+    return {
+      enableLimitExcecution: false,
+      visibleTabPane: '',
+      rules: {
+        alert: [
+          {
+            required: true,
+            message: 'You must choose at least one alert type'
+          }
+        ]
       }
-    },
+    };
+  },
 
-    datadogApiKey: {
+  computed: {
+    aggregationSchedule: {
       get() {
-        return this.$store.state.config.alert.datadogApiKey;
+        return this.$store.state.config.alert.aggregationSchedule;
       },
       set(value) {
-        this.$store.commit('config/alert/UPDATE_DATADOG_API_KEY', value);
+        this.$store.commit('config/alert/UPDATE_AGGREGATION_SCHEDULE', value);
       }
     },
 
-    datadogAppKey: {
+    limitExcecution: {
       get() {
-        return this.$store.state.config.alert.datadogAppKey;
+        return this.$store.state.config.alert.limitExcecution;
       },
       set(value) {
-        this.$store.commit('config/alert/UPDATE_DATADOG_APP_KEY', value);
+        this.$store.commit('config/alert/UPDATE_LIMIT_EXCECUTION', value);
       }
     },
 
@@ -3913,33 +537,6 @@ export default {
   },
 
   methods: {
-    addEmoji(value) {
-      this.slackEmojiOverride = value.colons;
-    },
-
-    addDiscordEmoji(value) {
-      this.discordEmojiTitle = value.colons;
-    },
-
-    changeSns() {
-      this.snsAwsAccessKeyId = '';
-      this.snsAwsSecretAccessKey = '';
-      this.snsAwsRegion = '';
-      this.snsAwsProfile = '';
-    },
-
-    changeSes() {
-      this.sesAwsAccessKeyId = '';
-      this.sesAwsSecretAccessKey = '';
-      this.sesAwsRegion = '';
-      this.sesAwsProfile = '';
-    },
-
-    changeTwilio() {
-      this.twilioFromNumber = '';
-      this.twilioMessageServiceSid = '';
-    },
-
     changeLimitExcecution(val) {
       if (val) {
         this.enableLimitExcecution = true;
@@ -3949,81 +546,8 @@ export default {
       }
     },
 
-    changeHiveAlertConfigFollow(val) {
-      if (val) {
-        this.hiveAlertConfigFollow = true;
-      } else {
-        this.hiveAlertConfigFollow = false;
-      }
-    },
-
-    changeSmtpSsl(val) {
-      if (val) {
-        this.smtpSsl = true;
-      } else {
-        this.smtpSsl = false;
-      }
-    },
-
-    changeSlackIgnoreSslErrors(val) {
-      if (val) {
-        this.slackIgnoreSslErrors = true;
-      } else {
-        this.slackIgnoreSslErrors = false;
-      }
-    },
-
-    changeMattermostIgnoreSslErrors(val) {
-      if (val) {
-        this.mattermostIgnoreSslErrors = true;
-      } else {
-        this.mattermostIgnoreSslErrors = false;
-      }
-    },
-
-    changestompSsl(val) {
-      if (val) {
-        this.stompSsl = true;
-      } else {
-        this.stompSsl = false;
-      }
-    },
-
-    changemsTeamsAlertFixedWidth(val) {
-      if (val) {
-        this.ms_teamsAlertFixedWidth = true;
-      } else {
-        this.ms_teamsAlertFixedWidth = false;
-      }
-    },
-
-    changeRocketChatIgnoreSslErrors(val) {
-      if (val) {
-        this.rocketChatIgnoreSslErrors = true;
-      } else {
-        this.rocketChatIgnoreSslErrors = false;
-      }
-    },
-
-    changeRocketChatCaCerts(val) {
-      if (val) {
-        this.rocketChatCaCerts = true;
-      } else {
-        this.rocketChatCaCerts = false;
-      }
-    },
-
     async validate() {
       try {
-        if (this.$refs.hiveAlertConfigTags) {
-          await this.validateHiveAlertConfigTags();
-        }
-        if (this.$refs.command) {
-          await this.validateCommand();
-        }
-        if (this.$refs.alertaTags) {
-          await this.validateAlertaTags();
-        }
         this.$emit('validate', true);
         return true;
       } catch (error) {
@@ -4032,155 +556,9 @@ export default {
       }
     },
 
-    async validateHiveAlertConfigTags() {
-      if (!this.hiveAlertConfigTags.length) {
-        this.popHiveAlertConfigTagsValid = false;
-        return;
-      }
-      try {
-        this.popHiveAlertConfigTagsValid = await this.$refs.hiveAlertConfigTags.validate();
-      } catch (error) {
-        this.popHiveAlertConfigTagsValid = false;
-        throw error;
-      }
-    },
-
-    updateHiveAlertConfigTags(entry, index) {
-      if (Number.isNaN(entry)) return;
-      this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TAGS_ENTRY', {
-        entry,
-        index
-      });
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    removeHiveAlertConfigTagsEntry(entry) {
-      this.$store.commit('config/alert/REMOVE_HIVE_ALERT_CONFIG_TAGS_ENTRY', entry);
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    addHiveAlertConfigTagsEntry() {
-      this.$store.commit('config/alert/ADD_HIVE_ALERT_CONFIG_TAGS_ENTRY');
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    async validateCommand() {
-      if (!this.command.length) {
-        this.popCommandValid = false;
-        return;
-      }
-      try {
-        this.popCommandValid = await this.$refs.command.validate();
-      } catch (error) {
-        this.popCommandValid = false;
-        throw error;
-      }
-    },
-
-    updateCommand(entry, index) {
-      if (Number.isNaN(entry)) return;
-      this.$store.commit('config/alert/UPDATE_COMMAND_ENTRY', {
-        entry,
-        index
-      });
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    removeCommandEntry(entry) {
-      this.$store.commit('config/alert/REMOVE_COMMAND_ENTRY', entry);
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    addCommandEntry() {
-      this.$store.commit('config/alert/ADD_COMMAND_ENTRY');
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    async validateAlertaTags() {
-      if (!this.alertaTags.length) {
-        this.popAlertaTagsValid = false;
-        return;
-      }
-      try {
-        this.popAlertaTagsValid = await this.$refs.alertaTags.validate();
-      } catch (error) {
-        this.popAlertaTagsValid = false;
-        throw error;
-      }
-    },
-
-    updateAlertaTags(entry, index) {
-      if (Number.isNaN(entry)) return;
-      this.$store.commit('config/alert/UPDATE_ALERTA_TAGS_ENTRY', {
-        entry,
-        index
-      });
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    removeAlertaTagsEntry(entry) {
-      this.$store.commit('config/alert/REMOVE_ALERTA_TAGS_ENTRY', entry);
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
-    addAlertaTagsEntry() {
-      this.$store.commit('config/alert/ADD_ALERTA_TAGS_ENTRY');
-      this.$nextTick(() => {
-        this.validate();
-      });
-    },
-
     updateRealert(value) {
       this.realert = {};
       this.$set(this.realert, Object.keys(value)[0], Object.values(value)[0]);
-    },
-
-    changeRocketChatAttachKibanaDiscoverUrl(val) {
-      if (val) {
-        this.rocketChatAttachKibanaDiscoverUrl = true;
-      } else {
-        this.rocketChatAttachKibanaDiscoverUrl = false;
-      }
-    },
-
-    changeMattermostAttachKibanaDiscoverUrl(val) {
-      if (val) {
-        this.mattermostAttachKibanaDiscoverUrl = true;
-      } else {
-        this.mattermostAttachKibanaDiscoverUrl = false;
-      }
-    },
-
-    changeSlackAttachKibanaDiscoverUrl(val) {
-      if (val) {
-        this.slackAttachKibanaDiscoverUrl = true;
-      } else {
-        this.slackAttachKibanaDiscoverUrl = false;
-      }
-    },
-
-    changeSlackCaCerts(val) {
-      if (val) {
-        this.slackCaCerts = true;
-      } else {
-        this.slackCaCerts = false;
-      }
     }
   }
 };
@@ -4194,37 +572,6 @@ export default {
 </style>
 
 <style lang="scss">
-.disabled {
-  .emoji-mart {
-    height: auto !important;
-    border: 0 !important;
-  }
-
-  .emoji-mart-title-label,
-  .emoji-mart-bar:first-child,
-  .emoji-mart-search,
-  .emoji-mart-scroll,
-  .emoji-mart-preview-skins {
-    display: none;
-  }
-
-  .emoji-mart-bar {
-    border: 0 !important;
-  }
-
-  .emoji-mart-preview {
-    height: 45px !important;
-  }
-
-  .emoji-mart-preview-emoji {
-    left: 0 !important;
-  }
-
-  .emoji-mart-preview-data {
-    left: 56px !important;
-  }
-}
-
 .atwho-view {
   max-height: 220px;
   height: 220px;
@@ -4236,150 +583,6 @@ export default {
   pointer-events: none;
 }
 
-:not(.is-disabled) {
-  &.slack-danger .el-radio__inner:hover {
-    border-color: red;
-  }
-
-  &.slack-danger .el-radio__input.is-checked .el-radio__inner {
-    border-color: red;
-    background: red;
-  }
-
-  &.slack-danger .el-radio__input.is-checked + .el-radio__label,
-  &.slack-danger {
-    color: red !important;
-    border-color: red !important;
-  }
-
-  &.slack-warning .el-radio__inner:hover {
-    border-color: orange;
-  }
-
-  &.slack-warning .el-radio__input.is-checked .el-radio__inner {
-    border-color: orange;
-    background: orange;
-  }
-
-  &.slack-warning .el-radio__input.is-checked + .el-radio__label,
-  &.slack-warning {
-    color: orange !important;
-    border-color: orange !important;
-  }
-
-  &.slack-good .el-radio__inner:hover {
-    border-color: green;
-  }
-
-  &.slack-good .el-radio__input.is-checked .el-radio__inner {
-    border-color: green;
-    background: green;
-  }
-
-  &.slack-good .el-radio__input.is-checked + .el-radio__label,
-  &.slack-good {
-    color: green !important;
-    border-color: green !important;
-  }
-
-  &.mattermost-danger .el-radio__inner:hover {
-    border-color: red;
-  }
-  &.mattermost-danger .el-radio__input.is-checked .el-radio__inner {
-    border-color: red;
-    background: red;
-  }
-  &.mattermost-danger .el-radio__input.is-checked + .el-radio__label,
-  &.mattermost-danger {
-    color: red !important;
-    border-color: red !important;
-  }
-  &.mattermost-warning .el-radio__inner:hover {
-    border-color: orange;
-  }
-  &.mattermost-warning .el-radio__input.is-checked .el-radio__inner {
-    border-color: orange;
-    background: orange;
-  }
-  &.mattermost-warning .el-radio__input.is-checked + .el-radio__label,
-  &.mattermost-warning {
-    color: orange !important;
-    border-color: orange !important;
-  }
-  &.mattermost-good .el-radio__inner:hover {
-    border-color: green;
-  }
-  &.mattermost-good .el-radio__input.is-checked .el-radio__inner {
-    border-color: green;
-    background: green;
-  }
-  &.mattermost-good .el-radio__input.is-checked + .el-radio__label,
-  &.mattermost-good {
-    color: green !important;
-    border-color: green !important;
-  }
-  &.rocketChat-danger .el-radio__inner:hover {
-    border-color: red;
-  }
-  &.rocketChat-danger .el-radio__input.is-checked .el-radio__inner {
-    border-color: red;
-    background: red;
-  }
-  &.rocketChat-danger .el-radio__input.is-checked + .el-radio__label,
-  &.rocketChat-danger {
-    color: red !important;
-    border-color: red !important;
-  }
-  &.rocketChat-warning .el-radio__inner:hover {
-    border-color: orange;
-  }
-  &.rocketChat-warning .el-radio__input.is-checked .el-radio__inner {
-    border-color: orange;
-    background: orange;
-  }
-  &.rocketChat-warning .el-radio__input.is-checked + .el-radio__label,
-  &.rocketChat-warning {
-    color: orange !important;
-    border-color: orange !important;
-  }
-  &.rocketChat-good .el-radio__inner:hover {
-    border-color: green;
-  }
-  &.rocketChat-good .el-radio__input.is-checked .el-radio__inner {
-    border-color: green;
-    background: green;
-  }
-  &.rocketChat-good .el-radio__input.is-checked + .el-radio__label,
-  &.rocketChat-good {
-    color: green !important;
-    border-color: green !important;
-  }
-  &.gitter-error .el-radio__inner:hover {
-    border-color: red;
-  }
-  &.gitter-error .el-radio__input.is-checked .el-radio__inner {
-    border-color: red;
-    background: red;
-  }
-  &.gitter-error .el-radio__input.is-checked + .el-radio__label,
-  &.gitter-error {
-    color: red !important;
-    border-color: red !important;
-  }
-  &.gitter-info .el-radio__inner:hover {
-    border-color: blue;
-  }
-  &.gitter-info .el-radio__input.is-checked .el-radio__inner {
-    border-color: green;
-    background: blue;
-  }
-  &.gitter-info .el-radio__input.is-checked + .el-radio__label,
-  &.gitter-info {
-    color: green !important;
-    border-color: blue !important;
-  }
-}
-
 .limit-excecution {
   margin: 0 auto;
   min-height: 20vh;
diff --git a/src/components/config/alert/ConfigAlertAlerta.vue b/src/components/config/alert/ConfigAlertAlerta.vue
new file mode 100644
index 00000000..622757a7
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertAlerta.vue
@@ -0,0 +1,327 @@
+.<template>
+  <div>
+    <el-form-item label="API URL" prop="alertaApiUrl" required>
+      <el-input id="alertaApiUrl" v-model="alertaApiUrl" :disabled="viewOnly" />
+      <label>API server URL.</label>
+    </el-form-item>
+
+    <el-form-item label="API Key" prop="alertaApiKey">
+      <el-input id="alertaApiKey" v-model="alertaApiKey" :disabled="viewOnly" />
+      <label>
+        This is the api key for alerta server, sent in an Authorization HTTP header.
+        If not defined, no Authorization header is sent.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Severity" prop="alertaSeverity">
+      <el-select
+        v-model="alertaSeverity"
+        :disabled="viewOnly"
+        placeholder=""
+        class="el-select-wide">
+        <el-option
+          v-for="v in alertaSeverityOptions"
+          :key="v.code"
+          :label="v.name"
+          :value="v.code" />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="Resource" prop="alertaResource">
+      <el-input id="alertaResource" v-model="alertaResource" :disabled="viewOnly" />
+      <label>If true and query_key is present, this will override alerta_resource field with the query_key value (Can be useful if query_key is a hostname).</label>
+    </el-form-item>
+
+    <el-form-item label="Text" prop="alertaText">
+      <el-input id="alertaText" v-model="alertaText" :disabled="viewOnly" />
+      <label>
+        This is the api key for alerta server, sent in an Authorization HTTP header.
+        If not defined, no Authorization header is sent.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Event" prop="alertaEvent">
+      <el-input id="alertaEvent" v-model="alertaEvent" :disabled="viewOnly" />
+      <label>Defaults to “elastalert”.</label>
+    </el-form-item>
+
+    <el-form-item label="Group" prop="alertaGroup">
+      <el-input id="alertaGroup" v-model="alertaGroup" :disabled="viewOnly" />
+      <label>Defaults to “”.</label>
+    </el-form-item>
+
+    <el-popover v-model="popAlertaTagsVisible" :class="{ 'is-invalid': !popAlertaTagsValid }">
+      <span slot="reference" class="pop-trigger">
+        <el-tooltip v-if="alertaTags.length" :content="alertaTags.join(', ')" placement="top">
+          <span>Tags ({{ alertaTags.length }})</span>
+        </el-tooltip>
+        <span v-else>Tags ({{ alertaTags.length }})</span>
+      </span>
+      <template>
+        <el-form
+          ref="alertaTags"
+          :model="$store.state.config.alert"
+          label-position="top"
+          style="width: 360px"
+          @submit.native.prevent>
+          <el-form-item
+            v-for="(entry, index) in alertaTags"
+            :key="index"
+            :prop="'alertaTags.' + 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="alertaTags[index]"
+                  :disabled="viewOnly"
+                  placeholder="Tags"
+                  @input="(val) => updateAlertaTags(val, index)" />
+              </el-col>
+              <el-col :span="4">
+                <el-button
+                  :disabled="viewOnly"
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                  plain
+                  @click="removeAlertaTagsEntry(entry)" />
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </el-form>
+
+        <el-button :disabled="viewOnly" class="m-n-sm" @click="addAlertaTagsEntry">
+          Add tags
+        </el-button>
+      </template>
+    </el-popover>
+
+    <el-form-item label="Environment" prop="alertaEnvironment">
+      <el-input id="alertaEnvironment" v-model="alertaEnvironment" :disabled="viewOnly" />
+      <label>Defaults to “Production”.</label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      popAlertaTagsVisible: false,
+      popAlertaTagsValid: true,
+      alertaSeverityOptions: [{
+        code: 'unknown',
+        name: 'unknown'
+      }, {
+        code: 'security',
+        name: 'security'
+      }, {
+        code: 'debug',
+        name: 'debug'
+      }, {
+        code: 'informational',
+        name: 'informational'
+      }, {
+        code: 'ok',
+        name: 'ok'
+      }, {
+        code: 'normal',
+        name: 'normal'
+      }, {
+        code: 'cleared',
+        name: 'cleared'
+      }, {
+        code: 'indeterminate',
+        name: 'indeterminate'
+      }, {
+        code: 'warning',
+        name: 'warning'
+      }, {
+        code: 'minor',
+        name: 'minor'
+      }, {
+        code: 'major',
+        name: 'major'
+      }, {
+        code: 'critical',
+        name: 'critical'
+      }],
+      rules: {
+        alertaApiUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    alertaApiUrl: {
+      get() {
+        return this.$store.state.config.alert.alertaApiUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_API_URL', value);
+      }
+    },
+
+    alertaApiKey: {
+      get() {
+        return this.$store.state.config.alert.alertaApiKey;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_API_KEY', value);
+      }
+    },
+
+    alertaSeverity: {
+      get() {
+        return this.$store.state.config.alert.alertaSeverity;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_SEVERITY', value);
+      }
+    },
+
+    alertaResource: {
+      get() {
+        return this.$store.state.config.alert.alertaResource;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_RESOURCE', value);
+      }
+    },
+
+    alertaText: {
+      get() {
+        return this.$store.state.config.alert.alertaText;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_TEXT', value);
+      }
+    },
+
+    alertaEvent: {
+      get() {
+        return this.$store.state.config.alert.alertaEvent;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_EVENT', value);
+      }
+    },
+
+    alertaGroup: {
+      get() {
+        return this.$store.state.config.alert.alertaGroup;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_GROUP', value);
+      }
+    },
+
+    alertaTags: {
+      get() {
+        return this.$store.state.config.alert.alertaTags;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_TAGS', value);
+      }
+    },
+
+    alertaEnvironment: {
+      get() {
+        return this.$store.state.config.alert.alertaEnvironment;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ALERTA_ENVIRONMENT', value);
+      }
+    }
+  },
+
+  methods: {
+    async validate() {
+      try {
+        if (this.$refs.alertaTags) {
+          await this.validateAlertaTags();
+        }
+        this.$emit('validate', true);
+        return true;
+      } catch (error) {
+        this.$emit('validate', false);
+        return false;
+      }
+    },
+
+    async validateAlertaTags() {
+      if (!this.alertaTags.length) {
+        this.popAlertaTagsValid = false;
+        return;
+      }
+      try {
+        this.popAlertaTagsValid = await this.$refs.alertaTags.validate();
+      } catch (error) {
+        this.popAlertaTagsValid = false;
+        throw error;
+      }
+    },
+
+    updateAlertaTags(entry, index) {
+      if (Number.isNaN(entry)) return;
+      this.$store.commit('config/alert/UPDATE_ALERTA_TAGS_ENTRY', {
+        entry,
+        index
+      });
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    removeAlertaTagsEntry(entry) {
+      this.$store.commit('config/alert/REMOVE_ALERTA_TAGS_ENTRY', entry);
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    addAlertaTagsEntry() {
+      this.$store.commit('config/alert/ADD_ALERTA_TAGS_ENTRY');
+      this.$nextTick(() => {
+        this.validate();
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertAmazonSes.vue b/src/components/config/alert/ConfigAlertAmazonSes.vue
new file mode 100644
index 00000000..2e18aaf7
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertAmazonSes.vue
@@ -0,0 +1,284 @@
+.<template>
+  <div>
+    <el-radio id="groupSes" v-model="groupSes" :disabled="viewOnly" label="profile" border @change="changeSes">
+      Profile
+    </el-radio>
+    <el-radio id="groupSes" v-model="groupSes" :disabled="viewOnly" label="notProfile" border @change="changeSes">
+      NotProfile
+    </el-radio>
+
+    <div v-if="groupSes === 'notProfile'">
+      <praeco-form-item label="SesAwsAccessKeyId" prop="sesAwsAccessKeyId" required>
+        <el-input id="sesAwsAccessKeyId" v-model="sesAwsAccessKeyId" :disabled="viewOnly" />
+        <label>An access key to connect to Amazon SES with.</label>
+      </praeco-form-item>
+      <praeco-form-item label="SesAwsSecretAccessKey" prop="sesAwsSecretAccessKey" required>
+        <el-input id="sesAwsSecretAccessKey" v-model="sesAwsSecretAccessKey" :disabled="viewOnly" />
+        <label>The secret key associated with the access key.</label>
+      </praeco-form-item>
+      <praeco-form-item label="SesAwsRegion" prop="sesAwsRegion" required>
+        <el-input id="sesAwsRegion" v-model="sesAwsRegion" :disabled="viewOnly" />
+        <label>The AWS region in which the Amazon SES resource is located. For example, us-east-1</label>
+      </praeco-form-item>
+    </div>
+    <div v-if="groupSes === 'profile'">
+      <praeco-form-item label="SesAwsProfile" prop="sesAwsProfile" required>
+        <el-input id="sesAwsProfile" v-model="sesAwsProfile" :disabled="viewOnly" />
+        <label>The AWS profile to use. If none specified, the default will be used.</label>
+      </praeco-form-item>
+    </div>
+
+    <praeco-form-item
+      v-if="!viewOnly || sesFromAddr"
+      :value="sesFromAddr"
+      label="From address"
+      prop="sesFromAddr">
+      <el-input v-model="sesFromAddr" :disabled="viewOnly" />
+      <label>
+        This sets the From header in the email.
+        By default, the from address is ElastAlert2@
+        and the domain will be set by the smtp server.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item
+      v-if="!viewOnly || sesEmailReplyTo"
+      :value="sesEmailReplyTo"
+      label="Reply to"
+      prop="sesEmailReplyTo">
+      <el-input v-model="sesEmailReplyTo" :disabled="viewOnly" />
+      <label>
+        This sets the Reply-To header in the email.
+        By default, the from address is ElastAlert2@ and the
+        domain will be set by the smtp server.
+      </label>
+    </praeco-form-item>
+
+    <el-form-item label="To" prop="sesEmail" required>
+      <el-input v-model="sesEmail" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item v-if="!viewOnly || sesCc" label="CC" prop="sesCc">
+      <el-input v-model="sesCc" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item v-if="!viewOnly || sesBcc" label="BCC" prop="sesBcc">
+      <el-input v-model="sesBcc" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item label="Email From Field" prop="sesEmailFromField">
+      <el-input v-model="sesEmailFromField" :disabled="viewOnly" />
+    </el-form-item>
+
+    <el-form-item label="Email Add Domain" prop="sesEmailAddDomain">
+      <el-input v-model="sesEmailAddDomain" :disabled="viewOnly" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import * as EmailValidator from 'email-validator';
+
+let validateEmail = (rule, value, callback) => {
+  if (!value || EmailValidator.validate(value)) {
+    callback();
+  } else {
+    callback(new Error('Invalid email address'));
+  }
+};
+
+let validateEmailCommaSeparated = (rule, value, callback) => {
+  let emails = [];
+
+  if (value) emails = value.split(',');
+
+  emails.forEach(email => {
+    if (
+      email
+      && !EmailValidator.validate(email.trim())
+    ) {
+      return callback(new Error('Invalid email address'));
+    }
+  });
+
+  return callback();
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    let groupSesValue = 'profile';
+    if (typeof this.$store.state.config.alert.sesAwsProfile === 'undefined' || this.$store.state.config.alert.sesAwsProfile === '') {
+      groupSesValue = 'notProfile';
+    }
+    return {
+      groupSes: groupSesValue,
+      rules: {
+        sesFromAddr: [
+          {
+            validator: validateEmail,
+            trigger: 'change'
+          }
+        ],
+        sesEmailReplyTo: [
+          {
+            validator: validateEmail,
+            trigger: 'change'
+          }
+        ],
+        sesEmail: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ],
+        sesCc: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ],
+        sesBcc: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    sesFromAddr: {
+      get() {
+        return this.$store.state.config.alert.sesFromAddr;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_FROM_ADDR', value);
+      }
+    },
+
+    sesEmailReplyTo: {
+      get() {
+        return this.$store.state.config.alert.sesEmailReplyTo;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_EMAIL_REPLY_TO', value);
+      }
+    },
+
+    sesEmail: {
+      get() {
+        return this.$store.state.config.alert.sesEmail;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_EMAIL', value);
+      }
+    },
+
+    sesCc: {
+      get() {
+        return this.$store.state.config.alert.sesCc;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_CC', value);
+      }
+    },
+
+    sesBcc: {
+      get() {
+        return this.$store.state.config.alert.sesBcc;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_BCC', value);
+      }
+    },
+
+    sesEmailFromField: {
+      get() {
+        return this.$store.state.config.alert.sesEmailFromField;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_EMAIL_FROM_FIELD', value);
+      }
+    },
+
+    sesEmailAddDomain: {
+      get() {
+        return this.$store.state.config.alert.sesEmailAddDomain;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SES_EMAIL_ADD_DOMAIN', value);
+      }
+    },
+
+    sesAwsAccessKeyId: {
+      get() {
+        return this.$store.state.config.alert.sesAwsAccessKeyId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SES_AWS_ACCESS_KEY_ID',
+          value
+        );
+      }
+    },
+
+    sesAwsSecretAccessKey: {
+      get() {
+        return this.$store.state.config.alert.sesAwsSecretAccessKey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SES_AWS_SECRET_ACCESS_KEY',
+          value
+        );
+      }
+    },
+
+    sesAwsRegion: {
+      get() {
+        return this.$store.state.config.alert.sesAwsRegion;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SES_AWS_REGION',
+          value
+        );
+      }
+    },
+
+    sesAwsProfile: {
+      get() {
+        return this.$store.state.config.alert.sesAwsProfile;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SES_AWS_PROFILE',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    changeSes() {
+      this.sesAwsAccessKeyId = '';
+      this.sesAwsSecretAccessKey = '';
+      this.sesAwsRegion = '';
+      this.sesAwsProfile = '';
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertAmazonSns.vue b/src/components/config/alert/ConfigAlertAmazonSns.vue
new file mode 100644
index 00000000..5a63e72b
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertAmazonSns.vue
@@ -0,0 +1,136 @@
+.<template>
+  <div>
+    <el-radio id="groupSns" v-model="groupSns" :disabled="viewOnly" label="profile" border @change="changeSns">
+      Profile
+    </el-radio>
+    <el-radio id="groupSns" v-model="groupSns" :disabled="viewOnly" label="notProfile" border @change="changeSns">
+      NotProfile
+    </el-radio>
+
+    <div v-if="groupSns === 'notProfile'">
+      <praeco-form-item label="TopicArn" prop="snsTopicArn" required>
+        <el-input id="snsTopicArn" v-model="snsTopicArn" :disabled="viewOnly" />
+        <label>The SNS topic’s ARN. For example, arn:aws:sns:us-east-1:123456789:somesnstopic</label>
+      </praeco-form-item>
+      <praeco-form-item label="SnsAwsAccessKeyId" prop="snsAwsAccessKeyId" required>
+        <el-input id="snsAwsAccessKeyId" v-model="snsAwsAccessKeyId" :disabled="viewOnly" />
+        <label>An access key to connect to Amazon SNS with.</label>
+      </praeco-form-item>
+      <praeco-form-item label="SnsAwsSecretAccessKey" prop="snsAwsSecretAccessKey" required>
+        <el-input id="snsAwsSecretAccessKey" v-model="snsAwsSecretAccessKey" :disabled="viewOnly" />
+        <label>The secret key associated with the access key.</label>
+      </praeco-form-item>
+      <praeco-form-item label="SnsAwsRegion" prop="snsAwsRegion" required>
+        <el-input id="snsAwsRegion" v-model="snsAwsRegion" :disabled="viewOnly" />
+        <label>The AWS region in which the Amazon SNS resource is located. For example, us-east-1</label>
+      </praeco-form-item>
+    </div>
+    <div v-if="groupSns === 'profile'">
+      <praeco-form-item label="TopicArn" prop="snsTopicArn" required>
+        <el-input id="snsTopicArn" v-model="snsTopicArn" :disabled="viewOnly" />
+        <label>The Amazon SNS topic’s ARN. For example, arn:aws:sns:us-east-1:123456789:somesnstopic</label>
+      </praeco-form-item>
+      <praeco-form-item label="SnsAwsProfile" prop="snsAwsProfile" required>
+        <el-input id="snsAwsProfile" v-model="snsAwsProfile" :disabled="viewOnly" />
+        <label>The AWS profile to use. If none specified, the default will be used.</label>
+      </praeco-form-item>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    let groupSnsValue = 'profile';
+    if (typeof this.$store.state.config.alert.snsAwsProfile === 'undefined' || this.$store.state.config.alert.snsAwsProfile === '') {
+      groupSnsValue = 'notProfile';
+    }
+    return {
+      groupSns: groupSnsValue,
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    snsTopicArn: {
+      get() {
+        return this.$store.state.config.alert.snsTopicArn;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SNS_TOPIC_ARN',
+          value
+        );
+      }
+    },
+
+    snsAwsAccessKeyId: {
+      get() {
+        return this.$store.state.config.alert.snsAwsAccessKeyId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SNS_AWS_ACCESS_KEY_ID',
+          value
+        );
+      }
+    },
+
+    snsAwsSecretAccessKey: {
+      get() {
+        return this.$store.state.config.alert.snsAwsSecretAccessKey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SNS_AWS_SECRET_ACCESS_KEY',
+          value
+        );
+      }
+    },
+
+    snsAwsRegion: {
+      get() {
+        return this.$store.state.config.alert.snsAwsRegion;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SNS_AWS_REGION',
+          value
+        );
+      }
+    },
+
+    snsAwsProfile: {
+      get() {
+        return this.$store.state.config.alert.snsAwsProfile;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SNS_AWS_PROFILE',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    changeSns() {
+      this.snsAwsAccessKeyId = '';
+      this.snsAwsSecretAccessKey = '';
+      this.snsAwsRegion = '';
+      this.snsAwsProfile = '';
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertChatwork.vue b/src/components/config/alert/ConfigAlertChatwork.vue
new file mode 100644
index 00000000..0d8a43a8
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertChatwork.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <praeco-form-item label="Api Key" prop="chatworkApikey" required>
+      <el-input id="chatworkApikey" v-model="chatworkApikey" :disabled="viewOnly" />
+      <label>ChatWork API KEY.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Room Id" prop="chatworkRoomId" required>
+      <el-input id="chatworkRoomId" v-model="chatworkRoomId" :disabled="viewOnly" />
+      <label>
+        The ID of the room you are talking to in Chatwork.
+        How to find the room ID is the part of the number after "rid" at the end of the URL of the browser.
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    chatworkApikey: {
+      get() {
+        return this.$store.state.config.alert.chatworkApikey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_CHATWORK_API_KEY',
+          value
+        );
+      }
+    },
+    chatworkRoomId: {
+      get() {
+        return this.$store.state.config.alert.chatworkRoomId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_CHATWORK_ROOM_ID',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertCommand.vue b/src/components/config/alert/ConfigAlertCommand.vue
new file mode 100644
index 00000000..5042e8a6
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertCommand.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <el-popover v-model="popCommandVisible" :class="{ 'is-invalid': !popCommandValid }">
+      <span slot="reference" class="pop-trigger">
+        <el-tooltip v-if="command.length" :content="command.join(', ')" placement="top">
+          <span>Command ({{ command.length }})</span>
+        </el-tooltip>
+        <span v-else>Command ({{ command.length }})</span>
+      </span>
+      <template>
+        <el-form
+          ref="command"
+          :model="$store.state.config.alert"
+          label-position="top"
+          style="width: 360px"
+          @submit.native.prevent>
+          <el-form-item
+            v-for="(entry, index) in command"
+            :key="index"
+            :prop="'command.' + 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="command[index]"
+                  :disabled="viewOnly"
+                  placeholder="Tags"
+                  @input="(val) => updateCommand(val, index)" />
+              </el-col>
+              <el-col :span="4">
+                <el-button
+                  :disabled="viewOnly"
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                  plain
+                  @click="removeCommandEntry(entry)" />
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </el-form>
+
+        <el-button :disabled="viewOnly" class="m-n-sm" @click="addCommandEntry">
+          Add command
+        </el-button>
+      </template>
+    </el-popover>
+
+    <el-form-item label="Pipe Match Json" prop="pipeMatchJson">
+      <el-switch
+        id="pipeMatchJson"
+        v-model="pipeMatchJson"
+        :disabled="viewOnly"
+        @change="changePipeMatchJson" />
+      <label>
+        If true, the match will be converted to JSON and passed to stdin of the command.
+        Note that this will cause ElastAlert 2 to block until the command exits or sends an EOF to stdout.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Pipe Alert Text" prop="pipeAlertText">
+      <el-switch
+        id="pipeAlertText"
+        v-model="pipeAlertText"
+        :disabled="viewOnly"
+        @change="changePipeAlertText" />
+      <label>
+        If true, the standard alert body text will be passed to stdin of the command.
+        Note that this will cause ElastAlert 2 to block until the command exits or sends an EOF to stdout.
+        It cannot be used at the same time as pipe_match_json.
+      </label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      popCommandVisible: false,
+      popCommandValid: true,
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    command: {
+      get() {
+        return this.$store.state.config.alert.command;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_COMMAND',
+          value
+        );
+      }
+    },
+
+    pipeMatchJson: {
+      get() {
+        return this.$store.state.config.alert.pipeMatchJson;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_PIPE_MATCH_JSON',
+          value
+        );
+      }
+    },
+
+    pipeAlertText: {
+      get() {
+        return this.$store.state.config.alert.pipeAlertText;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_PIPE_ALERT_TEXT',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    async validate() {
+      try {
+        if (this.$refs.command) {
+          await this.validateCommand();
+        }
+        this.$emit('validate', true);
+        return true;
+      } catch (error) {
+        this.$emit('validate', false);
+        return false;
+      }
+    },
+
+    async validateCommand() {
+      if (!this.command.length) {
+        this.popCommandValid = false;
+        return;
+      }
+      try {
+        this.popCommandValid = await this.$refs.command.validate();
+      } catch (error) {
+        this.popCommandValid = false;
+        throw error;
+      }
+    },
+
+    updateCommand(entry, index) {
+      if (Number.isNaN(entry)) return;
+      this.$store.commit('config/alert/UPDATE_COMMAND_ENTRY', {
+        entry,
+        index
+      });
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    removeCommandEntry(entry) {
+      this.$store.commit('config/alert/REMOVE_COMMAND_ENTRY', entry);
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    addCommandEntry() {
+      this.$store.commit('config/alert/ADD_COMMAND_ENTRY');
+      this.$nextTick(() => {
+        this.validate();
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertDatadog.vue b/src/components/config/alert/ConfigAlertDatadog.vue
new file mode 100644
index 00000000..5345fdfa
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertDatadog.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-form-item label="API KEY" prop="datadogApiKey" required>
+      <el-input id="datadogApiKey" v-model="datadogApiKey" :disabled="viewOnly" />
+      <label>Datadog API key.</label>
+    </el-form-item>
+
+    <el-form-item label="APP KEY" prop="datadogAppKey" required>
+      <el-input id="datadogAppKey" v-model="datadogAppKey" :disabled="viewOnly" />
+      <label>Datadog application key.</label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    datadogApiKey: {
+      get() {
+        return this.$store.state.config.alert.datadogApiKey;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_DATADOG_API_KEY', value);
+      }
+    },
+
+    datadogAppKey: {
+      get() {
+        return this.$store.state.config.alert.datadogAppKey;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_DATADOG_APP_KEY', value);
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertDiscord.vue b/src/components/config/alert/ConfigAlertDiscord.vue
new file mode 100644
index 00000000..dc4725ac
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertDiscord.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <praeco-form-item label="WebhookURL" prop="discordWebhookUrl" required>
+      <el-input id="discordWebhookUrl" v-model="discordWebhookUrl" :disabled="viewOnly" />
+      <label>The webhook URL.</label>
+    </praeco-form-item>
+
+    <praeco-form-item
+      v-if="!(viewOnly && !discordEmojiTitle)"
+      :class="{ 'disabled': viewOnly }"
+      label="Icon"
+      prop="discordEmojiTitle">
+      <picker
+        :emoji="discordEmojiTitle || 'arrow_up'"
+        :title="discordEmojiTitle || 'Pick your icon...'"
+        color="#189acc"
+        @select="addDiscordEmoji" />
+    </praeco-form-item>
+
+    <praeco-form-item label="Discord Embed Footer" prop="discordEmbedFooter">
+      <el-input id="discordEmbedFooter" v-model="discordEmbedFooter" :disabled="viewOnly" />
+      <label>embed footer.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Embed IconUrl" prop="discordEmbedIconUrl">
+      <el-input id="discordEmbedIconUrl" v-model="discordEmbedIconUrl" :disabled="viewOnly" />
+      <label>
+        You can provide icon_url to use custom image.
+        Provide absolute address of the pciture.(exampmle : http://domain/picure.png)
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        discordWebhookUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    discordWebhookUrl: {
+      get() {
+        return this.$store.state.config.alert.discordWebhookUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_DISCORD_WEBHOOK_URL',
+          value
+        );
+      }
+    },
+
+    discordEmojiTitle: {
+      get() {
+        return this.$store.state.config.alert.discordEmojiTitle;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_DISCORD_EMOJI_TITLE',
+          value
+        );
+      }
+    },
+
+    discordEmbedFooter: {
+      get() {
+        return this.$store.state.config.alert.discordEmbedFooter;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_DISCORD_EMBED_FOOTER',
+          value
+        );
+      }
+    },
+
+    discordEmbedIconUrl: {
+      get() {
+        return this.$store.state.config.alert.discordEmbedIconUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_DISCORD_EMBED_ICON_URL',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    addDiscordEmoji(value) {
+      this.discordEmojiTitle = value.colons;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.disabled {
+  .emoji-mart {
+    height: auto !important;
+    border: 0 !important;
+  }
+
+  .emoji-mart-title-label,
+  .emoji-mart-bar:first-child,
+  .emoji-mart-search,
+  .emoji-mart-scroll,
+  .emoji-mart-preview-skins {
+    display: none;
+  }
+
+  .emoji-mart-bar {
+    border: 0 !important;
+  }
+
+  .emoji-mart-preview {
+    height: 45px !important;
+  }
+
+  .emoji-mart-preview-emoji {
+    left: 0 !important;
+  }
+
+  .emoji-mart-preview-data {
+    left: 56px !important;
+  }
+}
+</style>
diff --git a/src/components/config/alert/ConfigAlertEmail.vue b/src/components/config/alert/ConfigAlertEmail.vue
new file mode 100644
index 00000000..a7006549
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertEmail.vue
@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <praeco-form-item
+      v-if="!viewOnly || fromAddr"
+      :value="fromAddr"
+      label="From address"
+      prop="fromAddr">
+      <el-input v-model="fromAddr" :disabled="viewOnly" />
+      <label>
+        This sets the From header in the email.
+        By default, the from address is ElastAlert2@
+        and the domain will be set by the smtp server.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item
+      v-if="!viewOnly || replyTo"
+      :value="replyTo"
+      label="Reply to"
+      prop="replyTo">
+      <el-input v-model="replyTo" :disabled="viewOnly" />
+      <label>
+        This sets the Reply-To header in the email.
+        By default, the from address is ElastAlert2@ and the
+        domain will be set by the smtp server.
+      </label>
+    </praeco-form-item>
+
+    <el-form-item label="To" prop="email" required>
+      <el-input v-model="email" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item v-if="!viewOnly || cc" label="CC" prop="cc">
+      <el-input v-model="cc" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item v-if="!viewOnly || bcc" label="BCC" prop="bcc">
+      <el-input v-model="bcc" :disabled="viewOnly" />
+      <label>Comma separated list of email addresses</label>
+    </el-form-item>
+
+    <el-form-item label="SMTP SSL" prop="smtpSsl">
+      <el-switch
+        id="smtpSsl"
+        v-model="smtpSsl"
+        :disabled="viewOnly"
+        @change="changeSmtpSsl" />
+      <label>
+        Connect the SMTP host using TLS, defaults to false.
+        If smtp_ssl is not used, ElastAlert 2 will still attempt STARTTLS.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="SMTP Host" prop="smtpHost">
+      <el-input v-model="smtpHost" :disabled="viewOnly" />
+      <label>The SMTP host to use, defaults to localhost.</label>
+    </el-form-item>
+
+    <el-form-item label="SMTP Port" prop="smtpPort">
+      <el-input-number id="smtpPort" v-model="smtpPort" :disabled="viewOnly" />
+      <label>The port to use. Default is 25.</label>
+    </el-form-item>
+
+    <el-form-item label="SMTP Auth File" prop="smtpAuthFile">
+      <el-input v-model="smtpAuthFile" :disabled="viewOnly" />
+      <label>
+        The path to a file which contains SMTP authentication credentials.
+        The path can be either absolute or relative to the given rule.
+        It should be YAML formatted and contain two fields, user and password.
+        If this is not present, no authentication will be attempted.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="SMTP Key File" prop="smtpKeyFile">
+      <el-input v-model="smtpKeyFile" :disabled="viewOnly" />
+      <label>Connect the SMTP host using the given path to a TLS key file, default to None.</label>
+    </el-form-item>
+
+    <el-form-item label="SMTP Cert File" prop="smtpCertFile">
+      <el-input v-model="smtpCertFile" :disabled="viewOnly" />
+      <label> Connect the SMTP host using the given path to a TLS certificate file, default to None.</label>
+    </el-form-item>
+
+    <el-form-item label="Email From Field" prop="emailFromField">
+      <el-input v-model="emailFromField" :disabled="viewOnly" />
+    </el-form-item>
+
+    <el-form-item label="Email Add Domain" prop="emailAddDomain">
+      <el-input v-model="emailAddDomain" :disabled="viewOnly" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import * as EmailValidator from 'email-validator';
+
+let validateEmail = (rule, value, callback) => {
+  if (!value || EmailValidator.validate(value)) {
+    callback();
+  } else {
+    callback(new Error('Invalid email address'));
+  }
+};
+
+let validateEmailCommaSeparated = (rule, value, callback) => {
+  let emails = [];
+
+  if (value) emails = value.split(',');
+
+  emails.forEach(email => {
+    if (
+      email
+      && !EmailValidator.validate(email.trim())
+    ) {
+      return callback(new Error('Invalid email address'));
+    }
+  });
+
+  return callback();
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        fromAddr: [
+          {
+            validator: validateEmail,
+            trigger: 'change'
+          }
+        ],
+        replyTo: [
+          {
+            validator: validateEmail,
+            trigger: 'change'
+          }
+        ],
+        email: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ],
+        cc: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ],
+        bcc: [
+          {
+            validator: validateEmailCommaSeparated,
+            trigger: 'change'
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    fromAddr: {
+      get() {
+        return this.$store.state.config.alert.fromAddr;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_FROM_ADDR', value);
+      }
+    },
+
+    replyTo: {
+      get() {
+        return this.$store.state.config.alert.replyTo;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_REPLY_TO', value);
+      }
+    },
+
+    email: {
+      get() {
+        return this.$store.state.config.alert.email;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_EMAIL', value);
+      }
+    },
+
+    cc: {
+      get() {
+        return this.$store.state.config.alert.cc;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_CC', value);
+      }
+    },
+
+    bcc: {
+      get() {
+        return this.$store.state.config.alert.bcc;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_BCC', value);
+      }
+    },
+
+    emailFromField: {
+      get() {
+        return this.$store.state.config.alert.emailFromField;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_EMAIL_FROM_FIELD', value);
+      }
+    },
+
+    emailAddDomain: {
+      get() {
+        return this.$store.state.config.alert.emailAddDomain;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_EMAIL_ADD_DOMAIN', value);
+      }
+    },
+
+    smtpSsl: {
+      get() {
+        return this.$store.state.config.alert.smtpSsl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_SSL', value);
+      }
+    },
+
+    smtpHost: {
+      get() {
+        return this.$store.state.config.alert.smtpHost;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_HOST', value);
+      }
+    },
+
+    smtpPort: {
+      get() {
+        return this.$store.state.config.alert.smtpPort;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_PORT', value);
+      }
+    },
+
+    smtpAuthFile: {
+      get() {
+        return this.$store.state.config.alert.smtpAuthFile;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_AUTH_FILE', value);
+      }
+    },
+
+    smtpKeyFile: {
+      get() {
+        return this.$store.state.config.alert.smtpKeyFile;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_KEY_FILE', value);
+      }
+    },
+
+    smtpCertFile: {
+      get() {
+        return this.$store.state.config.alert.smtpCertFile;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SMTP_CERT_FILE', value);
+      }
+    },
+
+    // TODO:
+    // emailFormat: {
+    //   get() {
+    //     return this.$store.state.config.alert.emailFormat;
+    //   },
+    //   set(value) {
+    //     this.$store.commit('config/alert/UPDATE_EMAIL_FORMAT', value);
+    //   }
+    // },
+  },
+
+  methods: {
+    changeSmtpSsl(val) {
+      if (val) {
+        this.smtpSsl = true;
+      } else {
+        this.smtpSsl = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertExotel.vue b/src/components/config/alert/ConfigAlertExotel.vue
new file mode 100644
index 00000000..b89b3bae
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertExotel.vue
@@ -0,0 +1,113 @@
+.<template>
+  <div>
+    <praeco-form-item label="Account Sid" prop="exotelAccountSid" required>
+      <el-input id="exotelAccountSid" v-model="exotelAccountSid" :disabled="viewOnly" />
+      <label>This is sid of your Exotel account.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Auth Token" prop="exotelAuthToken" required>
+      <el-input id="exotelAuthToken" v-model="exotelAuthToken" :disabled="viewOnly" />
+      <label>Auth token assosiated with your Exotel account.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Number" prop="exotelToNumber" required>
+      <el-input id="exotelToNumber" v-model="exotelToNumber" :disabled="viewOnly" />
+      <label>The phone number where you would like send the notification.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="From Number" prop="exotelFromNumber" required>
+      <el-input id="exotelFromNumber" v-model="exotelFromNumber" :disabled="viewOnly" />
+      <label>Your exophone number from which message will be sent.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Message Body" prop="exotelMessageBody">
+      <el-input id="exotelMessageBody" v-model="exotelMessageBody" :disabled="viewOnly" />
+      <label>Message you want to send in the sms, is you don’t specify this argument only the rule name is sent</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    exotelAccountSid: {
+      get() {
+        return this.$store.state.config.alert.exotelAccountSid;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_EXOTEL_ACCOUNT_SID',
+          value
+        );
+      }
+    },
+
+    exotelAuthToken: {
+      get() {
+        return this.$store.state.config.alert.exotelAuthToken;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_EXOTEL_AUTH_TOKEN',
+          value
+        );
+      }
+    },
+
+    exotelToNumber: {
+      get() {
+        return this.$store.state.config.alert.exotelToNumber;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_EXOTEL_TO_NUMBER',
+          value
+        );
+      }
+    },
+
+    exotelFromNumber: {
+      get() {
+        return this.$store.state.config.alert.exotelFromNumber;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_EXOTEL_FROM_NUMBER',
+          value
+        );
+      }
+    },
+
+    exotelMessageBody: {
+      get() {
+        return this.$store.state.config.alert.exotelMessageBody;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_EXOTEL_MESSAGE_BODY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertGitter.vue b/src/components/config/alert/ConfigAlertGitter.vue
new file mode 100644
index 00000000..a0e0e15b
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertGitter.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <praeco-form-item label="Webhook URL" prop="gitterWebhookUrl" required>
+      <el-input id="gitterWebhookUrl" v-model="gitterWebhookUrl" :disabled="viewOnly" />
+      <label>
+        The webhook URL that includes your auth data and the ID of the channel (room) you want to post to.
+        Go to the Integration Settings of the channel: (example  https://gitter.im/ORGA/CHANNEL#integrations ) ,
+        click ‘CUSTOM’ and copy the resulting URL.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Message level" prop="gitterMsgLevel" required>
+      <el-radio-group v-model="gitterMsgLevel" :disabled="viewOnly">
+        <el-radio id="gitterMsgLevelError" label="error" border class="gitter-error">
+          Error
+        </el-radio>
+        <el-radio id="gitterMsgLevelInfo" label="info" border class="gitter-info">
+          Info
+        </el-radio>
+      </el-radio-group>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy" prop="gitterProxy">
+      <el-input id="gitterProxy" v-model="gitterProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to Gitter.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        gitterWebhookUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    gitterWebhookUrl: {
+      get() {
+        return this.$store.state.config.alert.gitterWebhookUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_GITTER_WEBHOOK_URL', value);
+      }
+    },
+
+    gitterMsgLevel: {
+      get() {
+        return this.$store.state.config.alert.gitterMsgLevel;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_GITTER_MSG_LEVEL', value);
+      }
+    },
+
+    gitterProxy: {
+      get() {
+        return this.$store.state.config.alert.gitterProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GITTER_PROXY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+:not(.is-disabled) {
+  &.gitter-error .el-radio__inner:hover {
+    border-color: red;
+  }
+  &.gitter-error .el-radio__input.is-checked .el-radio__inner {
+    border-color: red;
+    background: red;
+  }
+  &.gitter-error .el-radio__input.is-checked + .el-radio__label,
+  &.gitter-error {
+    color: red !important;
+    border-color: red !important;
+  }
+  &.gitter-info .el-radio__inner:hover {
+    border-color: blue;
+  }
+  &.gitter-info .el-radio__input.is-checked .el-radio__inner {
+    border-color: green;
+    background: blue;
+  }
+  &.gitter-info .el-radio__input.is-checked + .el-radio__label,
+  &.gitter-info {
+    color: green !important;
+    border-color: blue !important;
+  }
+}
+</style>
diff --git a/src/components/config/alert/ConfigAlertGoogleChat.vue b/src/components/config/alert/ConfigAlertGoogleChat.vue
new file mode 100644
index 00000000..0cd905c2
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertGoogleChat.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <praeco-form-item label="GoogleChat Webhook" prop="googleChatWebhookUrl" required>
+      <el-input id="googleChatWebhookUrl" v-model="googleChatWebhookUrl" :disabled="viewOnly" />
+      <label>Google Webhook Url</label>
+    </praeco-form-item>
+    <praeco-form-item label="GoogleChat Format" prop="googleChatFormat" required>
+      <el-radio-group v-model="googleChatFormat" :disabled="viewOnly">
+        <el-radio id="googleChatFormatBasic" label="basic" border>
+          basic
+        </el-radio>
+        <el-radio id="googleChatFormatCard" label="card" border>
+          card
+        </el-radio>
+      </el-radio-group>
+    </praeco-form-item>
+
+    <div v-if="googleChatFormat === 'card'">
+      <praeco-form-item label="Header Title" prop="googleChatHeaderTitle">
+        <el-input id="googleChatHeaderTitle" v-model="googleChatHeaderTitle" :disabled="viewOnly" />
+        <label>GoogleChat Header Title</label>
+      </praeco-form-item>
+
+      <praeco-form-item label="Header Subtitle" prop="googleChatHeaderSubtitle">
+        <el-input id="googleChatHeaderSubtitle" v-model="googleChatHeaderSubtitle" :disabled="viewOnly" />
+        <label>Sets the text for the card header subtitle.</label>
+      </praeco-form-item>
+
+      <praeco-form-item label="Header Image" prop="googleChatHeaderImage">
+        <el-input id="googleChatHeaderImage" v-model="googleChatHeaderImage" :disabled="viewOnly" />
+        <label>URL for the card header icon.</label>
+      </praeco-form-item>
+
+      <praeco-form-item label="Footer Kibanalink" prop="googleFooterKibanalink">
+        <el-input id="googleFooterKibanalink" v-model="googleFooterKibanalink" :disabled="viewOnly" />
+        <label>URL to Kibana to include in the card footer.</label>
+      </praeco-form-item>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    googleChatWebhookUrl: {
+      get() {
+        return this.$store.state.config.alert.googleChatWebhookUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLE_CHAT_WEBHOOK_URL',
+          value
+        );
+      }
+    },
+
+    googleChatFormat: {
+      get() {
+        return this.$store.state.config.alert.googleChatFormat;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLE_CHAT_FORMAT',
+          value
+        );
+      }
+    },
+
+    googleChatHeaderTitle: {
+      get() {
+        return this.$store.state.config.alert.googleChatHeaderTitle;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLE_CHAT_HEADER_TITLE',
+          value
+        );
+      }
+    },
+
+    googleChatHeaderSubtitle: {
+      get() {
+        return this.$store.state.config.alert.googleChatHeaderSubtitle;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLECHAT_HEADER_SUBTITLE',
+          value
+        );
+      }
+    },
+
+    googleChatHeaderImage: {
+      get() {
+        return this.$store.state.config.alert.googleChatHeaderImage;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLECHAT_HEADER_IMAGE',
+          value
+        );
+      }
+    },
+
+    googleFooterKibanalink: {
+      get() {
+        return this.$store.state.config.alert.googleFooterKibanalink;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_GOOGLECHAT_FOOTER_KIBANALINK',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertHttpPost.vue b/src/components/config/alert/ConfigAlertHttpPost.vue
new file mode 100644
index 00000000..e6a99683
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertHttpPost.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-form-item label="HTTP POST URL" prop="httpPostUrl" required>
+      <el-input v-model="httpPostUrl" :disabled="viewOnly" />
+      <label>JSON results will be POSTed to this URL</label>
+    </el-form-item>
+
+    <el-form-item label="Timeout" prop="httpPostTimeout">
+      <el-input-number id="httpPostTimeout" v-model="httpPostTimeout" :disabled="viewOnly" />
+      <label>
+        The timeout value, in seconds, for making the post.
+        The default is 10.
+        If a timeout occurs, the alert will be retried next time ElastAlert 2 cycles.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Proxy" prop="httpPostProxy">
+      <el-input id="httpPostProxy" v-model="httpPostProxy" :disabled="viewOnly" />
+      <label>URL of proxy, if required.</label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        httpPostUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    httpPostUrl: {
+      get() {
+        return this.$store.state.config.alert.httpPostUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HTTP_POST_URL', value);
+      }
+    },
+
+    httpPostTimeout: {
+      get() {
+        return this.$store.state.config.alert.httpPostTimeout;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_HTTP_POST_TIMEOUT',
+          value
+        );
+      }
+    },
+
+    httpPostProxy: {
+      get() {
+        return this.$store.state.config.alert.httpPostProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_HTTP_POST_PROXY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertJira.vue b/src/components/config/alert/ConfigAlertJira.vue
new file mode 100644
index 00000000..bdb6b7c7
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertJira.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <praeco-form-item label="Project" prop="jiraProject" required>
+      <el-input id="jiraProject" v-model="jiraProject" :disabled="viewOnly" />
+      <label>Jira project</label>
+    </praeco-form-item>
+    <praeco-form-item label="Issue type" prop="jiraIssueType" required>
+      <el-input id="jiraIssueType" v-model="jiraIssueType" :disabled="viewOnly" />
+      <label>Jira issue type (Bug, Integration Bug, etc...)</label>
+    </praeco-form-item>
+    <praeco-form-item label="Components" prop="jiraComponents">
+      <el-input id="jiraComponents" v-model="jiraComponents" :disabled="viewOnly" />
+      <label>Jira issue components</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    jiraIssueType: {
+      get() {
+        return this.$store.state.config.alert.jiraIssueType;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_JIRA_ISSUE_TYPE',
+          value
+        );
+      }
+    },
+
+    jiraProject: {
+      get() {
+        return this.$store.state.config.alert.jiraProject;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_JIRA_PROJECT',
+          value
+        );
+      }
+    },
+
+    jiraComponents: {
+      get() {
+        return this.$store.state.config.alert.jiraComponents;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_JIRA_COMPONENTS',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertLineNotify.vue b/src/components/config/alert/ConfigAlertLineNotify.vue
new file mode 100644
index 00000000..d8ec2125
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertLineNotify.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <praeco-form-item label="Access Token" prop="linenotifyAccessToken" required>
+      <el-input id="linenotifyAccessToken" v-model="linenotifyAccessToken" :disabled="viewOnly" />
+      <label>The access token that you got from https://notify-bot.line.me/my/</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    linenotifyAccessToken: {
+      get() {
+        return this.$store.state.config.alert.linenotifyAccessToken;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_LINENOTIFY_ACCESS_TOKEN',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertMattermost.vue b/src/components/config/alert/ConfigAlertMattermost.vue
new file mode 100644
index 00000000..6f574159
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertMattermost.vue
@@ -0,0 +1,430 @@
+<template>
+  <div>
+    <el-form-item label="Channel or username" prop="mattermostChannelOverride" required>
+      <el-input id="mattermostChannelOverride" v-model="mattermostChannelOverride" :disabled="viewOnly" />
+      <label>
+        The @username or #channel to send the alert. Tip: Create new channels
+        for your alerts, to have fine-grained control of Mattermost notifications.
+      </label>
+    </el-form-item>
+
+    <praeco-form-item label="Post as" prop="mattermostUsernameOverride" required>
+      <el-input id="mattermostUsernameOverride" v-model="mattermostUsernameOverride" :disabled="viewOnly" />
+      <label>This is the username that will appear in Mattermost for the alert</label>
+    </praeco-form-item>
+
+    <el-form-item label="Message color" prop="mattermostMsgColor" required>
+      <el-radio-group v-model="mattermostMsgColor" :disabled="viewOnly">
+        <el-radio id="mattermostMsgColorDanger" label="danger" border class="mattermost-danger">
+          Danger
+        </el-radio>
+        <el-radio id="mattermostMsgColorWarning" label="warning" border class="mattermost-warning">
+          Warning
+        </el-radio>
+        <el-radio id="mattermostMsgColorGood" label="good" border class="mattermost-good">
+          Good
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item label="Ignore SSL Errors" prop="mattermostIgnoreSslErrors">
+      <el-switch
+        id="mattermostIgnoreSslErrors"
+        v-model="mattermostIgnoreSslErrors"
+        :disabled="viewOnly"
+        @change="changeMattermostIgnoreSslErrors" />
+    </el-form-item>
+
+    <el-form-item label="Icon URL Override" prop="mattermostIconUrlOverride">
+      <el-input id="mattermostIconUrlOverride" v-model="mattermostIconUrlOverride" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will use the default webhook icon when posting to the channel.
+        You can provide icon_url to use custom image.
+        Provide absolute address of the picture or Base64 data url.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Msg Pretext" prop="mattermostMsgPretext">
+      <el-input id="mattermostMsgPretext" v-model="mattermostMsgPretext" :disabled="viewOnly" />
+      <label>You can set the message attachment pretext using this option.</label>
+    </el-form-item>
+
+    <el-form-item label="Proxy" prop="mattermostProxy">
+      <el-input id="mattermostProxy" v-model="mattermostProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to Mattermost.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Title" prop="mattermostTitle">
+      <el-input v-model="mattermostTitle" :disabled="viewOnly" />
+      <label>Sets a title for the message, this shows up as a blue text at the start of the message.</label>
+    </el-form-item>
+
+    <el-form-item label="Title Link" prop="mattermostTitleLink">
+      <el-input v-model="mattermostTitleLink" :disabled="viewOnly" />
+      <label>You can add a link in your Mattermost notification by setting this to a valid URL.</label>
+    </el-form-item>
+
+    <el-form-item label="Footer" prop="mattermostFooter">
+      <el-input v-model="mattermostFooter" :disabled="viewOnly" />
+      <label>Add a static footer text for alert.</label>
+    </el-form-item>
+
+    <el-form-item label="Footer Icon" prop="mattermostFooterIcon">
+      <el-input v-model="mattermostFooterIcon" :disabled="viewOnly" />
+      <label>A Public Url for a footer icon.</label>
+    </el-form-item>
+
+    <el-form-item label="Image URL" prop="mattermostImageUrl">
+      <el-input v-model="mattermostImageUrl" :disabled="viewOnly" />
+      <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG).</label>
+    </el-form-item>
+
+    <el-form-item label="Thumb URL" prop="mattermostThumbUrl">
+      <el-input v-model="mattermostThumbUrl" :disabled="viewOnly" />
+      <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG) that is displayed as thumbnail.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Name" prop="mattermostAuthorName">
+      <el-input v-model="mattermostAuthorName" :disabled="viewOnly" />
+      <label>An optional name used to identify the author.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Link" prop="mattermostAuthorLink">
+      <el-input v-model="mattermostAuthorLink" :disabled="viewOnly" />
+      <label>An optional URL used to hyperlink the author_name.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Icon" prop="mattermostAuthorIcon">
+      <el-input v-model="mattermostAuthorIcon" :disabled="viewOnly" />
+      <label>An optional URL used to display a 16x16 pixel icon beside the author_name.</label>
+    </el-form-item>
+
+    <el-form-item label="Attach Kibana Discover URL" prop="mattermostAttachKibanaDiscoverUrl">
+      <el-switch
+        id="mattermostAttachKibanaDiscoverUrl"
+        v-model="mattermostAttachKibanaDiscoverUrl"
+        :disabled="viewOnly"
+        @change="changeMattermostAttachKibanaDiscoverUrl" />
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Color" prop="mattermostKibanaDiscoverColor">
+      <el-color-picker
+        v-model="mattermostKibanaDiscoverColor" :disabled="viewOnly" />
+      <label>The color of the Kibana Discover url attachment.</label>
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Title" prop="mattermostKibanaDiscoverTitle">
+      <el-input v-model="mattermostKibanaDiscoverTitle" :disabled="viewOnly" />
+      <label>The title of the Kibana Discover url attachment.</label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+let validateMattermostkDestination = (rule, value, callback) => {
+  if (value.length < 2) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else if (!value.startsWith('@') && !value.startsWith('#')) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else {
+    callback();
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        mattermostChannelOverride: [
+          {
+            validator: validateMattermostkDestination,
+            trigger: 'change'
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    mattermostChannelOverride: {
+      get() {
+        return this.$store.state.config.alert.mattermostChannelOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_CHANNEL_OVERRIDE', value);
+      }
+    },
+
+    mattermostUsernameOverride: {
+      get() {
+        return this.$store.state.config.alert.mattermostUsernameOverride;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_USERNAME_OVERRIDE',
+          value
+        );
+      }
+    },
+
+    mattermostMsgColor: {
+      get() {
+        return this.$store.state.config.alert.mattermostMsgColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_MSG_COLOR', value);
+      }
+    },
+
+    mattermostIconUrlOverride: {
+      get() {
+        return this.$store.state.config.alert.mattermostIconUrlOverride;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_ICON_URL_OVERRIDE',
+          value
+        );
+      }
+    },
+
+    mattermostMsgPretext: {
+      get() {
+        return this.$store.state.config.alert.mattermostMsgPretext;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_MSG_PRETEXT',
+          value
+        );
+      }
+    },
+
+    mattermostIgnoreSslErrors: {
+      get() {
+        return this.$store.state.config.alert.mattermostIgnoreSslErrors;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_IGNORE_SSL_ERRORS',
+          value
+        );
+      }
+    },
+
+    mattermostProxy: {
+      get() {
+        return this.$store.state.config.alert.mattermostProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_PROXY',
+          value
+        );
+      }
+    },
+
+    mattermostTitle: {
+      get() {
+        return this.$store.state.config.alert.mattermostTitle;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_TITLE',
+          value
+        );
+      }
+    },
+
+    mattermostTitleLink: {
+      get() {
+        return this.$store.state.config.alert.mattermostTitleLink;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_TITLE_LINK',
+          value
+        );
+      }
+    },
+
+    mattermostFooter: {
+      get() {
+        return this.$store.state.config.alert.mattermostFooter;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_FOOTER',
+          value
+        );
+      }
+    },
+
+    mattermostFooterIcon: {
+      get() {
+        return this.$store.state.config.alert.mattermostFooterIcon;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_FOOTER_ICON',
+          value
+        );
+      }
+    },
+
+    mattermostImageUrl: {
+      get() {
+        return this.$store.state.config.alert.mattermostImageUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_IMAGE_URL',
+          value
+        );
+      }
+    },
+
+    mattermostThumbUrl: {
+      get() {
+        return this.$store.state.config.alert.mattermostThumbUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_THUMB_URL',
+          value
+        );
+      }
+    },
+
+    mattermostAuthorName: {
+      get() {
+        return this.$store.state.config.alert.mattermostAuthorName;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_AUTHOR_NAME',
+          value
+        );
+      }
+    },
+
+    mattermostAuthorLink: {
+      get() {
+        return this.$store.state.config.alert.mattermostAuthorLink;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_AUTHOR_LINK',
+          value
+        );
+      }
+    },
+
+    mattermostAuthorIcon: {
+      get() {
+        return this.$store.state.config.alert.mattermostAuthorIcon;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_MATTERMOST_AUTHOR_ICON',
+          value
+        );
+      }
+    },
+
+    mattermostAttachKibanaDiscoverUrl: {
+      get() {
+        return this.$store.state.config.alert.mattermostAttachKibanaDiscoverUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_ATTACH_KIBANA_DISCOVER_URL', value);
+      }
+    },
+
+    mattermostKibanaDiscoverColor: {
+      get() {
+        return this.$store.state.config.alert.mattermostKibanaDiscoverColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_KIBANA_DISCOVER_COLOR', value);
+      }
+    },
+
+    mattermostKibanaDiscoverTitle: {
+      get() {
+        return this.$store.state.config.alert.mattermostKibanaDiscoverTitle;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_KIBANA_DISCOVER_TITLE', value);
+      }
+    }
+  },
+
+  methods: {
+    changeMattermostIgnoreSslErrors(val) {
+      if (val) {
+        this.mattermostIgnoreSslErrors = true;
+      } else {
+        this.mattermostIgnoreSslErrors = false;
+      }
+    },
+
+    changeMattermostAttachKibanaDiscoverUrl(val) {
+      if (val) {
+        this.mattermostAttachKibanaDiscoverUrl = true;
+      } else {
+        this.mattermostAttachKibanaDiscoverUrl = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+:not(.is-disabled) {
+  &.mattermost-danger .el-radio__inner:hover {
+    border-color: red;
+  }
+  &.mattermost-danger .el-radio__input.is-checked .el-radio__inner {
+    border-color: red;
+    background: red;
+  }
+  &.mattermost-danger .el-radio__input.is-checked + .el-radio__label,
+  &.mattermost-danger {
+    color: red !important;
+    border-color: red !important;
+  }
+  &.mattermost-warning .el-radio__inner:hover {
+    border-color: orange;
+  }
+  &.mattermost-warning .el-radio__input.is-checked .el-radio__inner {
+    border-color: orange;
+    background: orange;
+  }
+  &.mattermost-warning .el-radio__input.is-checked + .el-radio__label,
+  &.mattermost-warning {
+    color: orange !important;
+    border-color: orange !important;
+  }
+  &.mattermost-good .el-radio__inner:hover {
+    border-color: green;
+  }
+  &.mattermost-good .el-radio__input.is-checked .el-radio__inner {
+    border-color: green;
+    background: green;
+  }
+  &.mattermost-good .el-radio__input.is-checked + .el-radio__label,
+  &.mattermost-good {
+    color: green !important;
+    border-color: green !important;
+  }
+}
+</style>
diff --git a/src/components/config/alert/ConfigAlertMsTeams.vue b/src/components/config/alert/ConfigAlertMsTeams.vue
new file mode 100644
index 00000000..e7400f3b
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertMsTeams.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <el-form-item label="Team webhook" prop="ms_teamsWebhookUrl" required>
+      <el-input id="ms_teamsWebhookUrl" v-model="ms_teamsWebhookUrl" :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-form-item label="Color" prop="ms_teamsThemeColor" required>
+      <el-color-picker id="ms_teamsThemeColor" v-model="ms_teamsThemeColor" :disabled="viewOnly" />
+    </el-form-item>
+
+    <el-form-item label="Alert Summary" prop="ms_teamsAlertSummary" required>
+      <el-input id="ms_teamsAlertSummary" v-model="ms_teamsAlertSummary" :disabled="viewOnly" />
+      <label>
+        Summary should be configured according to MS documentation, although it seems not displayed by Teams currently.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Alert Fixed Width" prop="ms_teamsAlertFixedWidth">
+      <el-switch
+        id="ms_teamsAlertFixedWidth"
+        v-model="ms_teamsAlertFixedWidth"
+        :disabled="viewOnly"
+        @change="changemsTeamsAlertFixedWidth" />
+      <label>
+        By default this is False and the notification will be sent to MS Teams as-is.
+        Teams supports a partial Markdown implementation, which means asterisk, underscore and other characters may be interpreted as Markdown.
+        Currenlty, Teams does not fully implement code blocks. Setting this attribute to True will enable line by line code blocks.
+        It is recommended to enable this to get clearer notifications in Teams.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Proxy" prop="ms_teamsProxy">
+      <el-input id="ms_teamsProxy" v-model="ms_teamsProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to MS Teams.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    ms_teamsWebhookUrl: {
+      get() {
+        return this.$store.state.config.alert.ms_teamsWebhookUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MS_TEAMS_WEBHOOK_URL', value);
+      }
+    },
+
+    ms_teamsThemeColor: {
+      get() {
+        return this.$store.state.config.alert.ms_teamsThemeColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MS_TEAMS_THEME_COLOR', value);
+      }
+    },
+
+    ms_teamsAlertFixedWidth: {
+      get() {
+        return this.$store.state.config.alert.ms_teamsAlertFixedWidth;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MS_TEAMS_ALERT_FIXED_WIDTH', value);
+      }
+    },
+
+    ms_teamsAlertSummary: {
+      get() {
+        return this.$store.state.config.alert.ms_teamsAlertSummary;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MS_TEAMS_ALERT_SUMMARY', value);
+      }
+    },
+
+    ms_teamsProxy: {
+      get() {
+        return this.$store.state.config.alert.ms_teamsProxy;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MS_TEAMS_PROXY', value);
+      }
+    }
+  },
+
+  methods: {
+    changemsTeamsAlertFixedWidth(val) {
+      if (val) {
+        this.ms_teamsAlertFixedWidth = true;
+      } else {
+        this.ms_teamsAlertFixedWidth = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertPagerTree.vue b/src/components/config/alert/ConfigAlertPagerTree.vue
new file mode 100644
index 00000000..a03c9aed
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertPagerTree.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <praeco-form-item label="Integration URL" prop="pagertreeIntegrationUrl" required>
+      <el-input id="pagertreeIntegrationUrl" v-model="pagertreeIntegrationUrl" :disabled="viewOnly" />
+      <label>URL generated by PagerTree for the integration.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy" prop="pagertreeProxy" required>
+      <el-input id="pagertreeProxy" v-model="pagertreeProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to PagerTree.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        pagertreeIntegrationUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    pagertreeIntegrationUrl: {
+      get() {
+        return this.$store.state.config.alert.pagertreeIntegrationUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_PAGERTREE_INTEGRATION_URL',
+          value
+        );
+      }
+    },
+
+    pagertreeProxy: {
+      get() {
+        return this.$store.state.config.alert.pagertreeProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_PAGERTREE_PAGERTREE_PROXY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertRocketChat.vue b/src/components/config/alert/ConfigAlertRocketChat.vue
new file mode 100644
index 00000000..53ee9810
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertRocketChat.vue
@@ -0,0 +1,358 @@
+<template>
+  <div>
+    <el-form-item label="Channel or username" prop="rocketChatChannelOverride" required>
+      <el-input id="rocketChatChannelOverride" v-model="rocketChatChannelOverride" :disabled="viewOnly" />
+      <label>
+        The @username or #channel to send the alert. Tip: Create new channels
+        for your alerts, to have fine-grained control of Slack notifications.
+      </label>
+    </el-form-item>
+
+    <praeco-form-item label="Post as" prop="rocketChatUsernameOverride" required>
+      <el-input id="rocketChatUsernameOverride" v-model="rocketChatUsernameOverride" :disabled="viewOnly" />
+      <label>This is the username that will appear in Rocket.Chat for the alert</label>
+    </praeco-form-item>
+
+    <praeco-form-item
+      v-if="!(viewOnly && !rocketChatEmojiOverride)"
+      :class="{ 'disabled': viewOnly }"
+      label="Icon"
+      prop="rocketChatEmojiOverride">
+      <picker
+        :emoji="rocketChatEmojiOverride || 'arrow_up'"
+        :title="rocketChatEmojiOverride || 'Pick your icon...'"
+        color="#189acc"
+        @select="addEmoji" />
+    </praeco-form-item>
+
+    <el-form-item label="Message color" prop="rocketChatMsgColor" required>
+      <el-radio-group v-model="rocketChatMsgColor" :disabled="viewOnly">
+        <el-radio id="rocketChatMsgColorDanger" label="danger" border class="rocketChat-danger">
+          Danger
+        </el-radio>
+        <el-radio id="rocketChatMsgColorWarning" label="warning" border class="rocketChat-warning">
+          Warning
+        </el-radio>
+        <el-radio id="rocketChatMsgColorGood" label="good" border class="rocketChat-good">
+          Good
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item label="Text String" prop="rocketChatTextString">
+      <el-input id="rocketChatTextString" v-model="rocketChatTextString" :disabled="viewOnly" />
+      <label>Notification message you want to add.</label>
+    </el-form-item>
+
+    <el-form-item label="Proxy" prop="rocketChatProxy">
+      <el-input id="rocketChatProxy" v-model="rocketChatProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert2 will not use a network proxy to send notifications to Rocket.Chat.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Attach Kibana Discover URL" prop="rocketChatAttachKibanaDiscoverUrl">
+      <el-switch
+        id="rocketChatAttachKibanaDiscoverUrl"
+        v-model="rocketChatAttachKibanaDiscoverUrl"
+        :disabled="viewOnly"
+        @change="changeRocketChatAttachKibanaDiscoverUrl" />
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Color" prop="rocketChatKibanaDiscoverColor">
+      <el-color-picker
+        v-model="rocketChatKibanaDiscoverColor" :disabled="viewOnly" />
+      <label>The color of the Kibana Discover url attachment.</label>
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Title" prop="rocketChatKibanaDiscoverTitle">
+      <el-input v-model="rocketChatKibanaDiscoverTitle" :disabled="viewOnly" />
+      <label>The title of the Kibana Discover url attachment.</label>
+    </el-form-item>
+
+    <el-form-item label="Ignore SSL Errors" prop="rocketChatIgnoreSslErrors">
+      <el-switch
+        id="rocketChatIgnoreSslErrors"
+        v-model="rocketChatIgnoreSslErrors"
+        :disabled="viewOnly"
+        @change="changeRocketChatIgnoreSslErrors" />
+    </el-form-item>
+
+    <el-form-item label="CA Certs" prop="rocketChatCaCerts">
+      <el-switch
+        id="rocketChatCaCerts"
+        v-model="rocketChatCaCerts"
+        :disabled="viewOnly"
+        @change="changeRocketChatCaCerts" />
+    </el-form-item>
+
+    <el-form-item label="Timeout" prop="rocketChatTimeout">
+      <el-input-number id="rocketChatTimeout" v-model="rocketChatTimeout" :disabled="viewOnly" />
+      <label>
+        You can specify a timeout value, in seconds, for making communicating with Rocket.Chat.
+        The default is 10. If a timeout occurs, the alert will be retried next time ElastAlert 2 cycles.
+      </label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import { Picker } from 'emoji-mart-vue';
+
+let validateRocketChatDestination = (rule, value, callback) => {
+  if (value.length < 2) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else if (!value.startsWith('@') && !value.startsWith('#')) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else {
+    callback();
+  }
+};
+
+export default {
+  components: {
+    Picker
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        rocketChatChannelOverride: [
+          {
+            validator: validateRocketChatDestination,
+            trigger: 'change'
+          }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    rocketChatChannelOverride: {
+      get() {
+        return this.$store.state.config.alert.rocketChatChannelOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_CHANNEL_OVERRIDE', value);
+      }
+    },
+
+    rocketChatUsernameOverride: {
+      get() {
+        return this.$store.state.config.alert.rocketChatUsernameOverride;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_USERNAME_OVERRIDE',
+          value
+        );
+      }
+    },
+
+    rocketChatEmojiOverride: {
+      get() {
+        return this.$store.state.config.alert.rocketChatEmojiOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_EMOJI_OVERRIDE', value);
+      }
+    },
+
+    rocketChatTextString: {
+      get() {
+        return this.$store.state.config.alert.rocketChatTextString;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_TEXT_STRING',
+          value
+        );
+      }
+    },
+
+    rocketChatMsgColor: {
+      get() {
+        return this.$store.state.config.alert.rocketChatMsgColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_MSG_COLOR', value);
+      }
+    },
+
+    rocketChatProxy: {
+      get() {
+        return this.$store.state.config.alert.rocketChatProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_PROXY',
+          value
+        );
+      }
+    },
+
+    rocketChatAttachKibanaDiscoverUrl: {
+      get() {
+        return this.$store.state.config.alert.rocketChatAttachKibanaDiscoverUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_ATTACH_KIBANA_DISCOVER_URL', value);
+      }
+    },
+
+    rocketChatKibanaDiscoverColor: {
+      get() {
+        return this.$store.state.config.alert.rocketChatKibanaDiscoverColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_KIBANA_DISCOVER_COLOR', value);
+      }
+    },
+
+    rocketChatKibanaDiscoverTitle: {
+      get() {
+        return this.$store.state.config.alert.rocketChatKibanaDiscoverTitle;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_ROCKET_CHAT_KIBANA_DISCOVER_TITLE', value);
+      }
+    },
+
+    rocketChatIgnoreSslErrors: {
+      get() {
+        return this.$store.state.config.alert.rocketChatIgnoreSslErrors;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_IGNORE_SSL_ERRORS',
+          value
+        );
+      }
+    },
+
+    rocketChatCaCerts: {
+      get() {
+        return this.$store.state.config.alert.rocketChatCaCerts;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_CA_CERTS',
+          value
+        );
+      }
+    },
+    rocketChatTimeout: {
+      get() {
+        return this.$store.state.config.alert.rocketChatTimeout;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ROCKET_CHAT_TIMEOUT',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    changeRocketChatIgnoreSslErrors(val) {
+      if (val) {
+        this.rocketChatIgnoreSslErrors = true;
+      } else {
+        this.rocketChatIgnoreSslErrors = false;
+      }
+    },
+
+    changeRocketChatCaCerts(val) {
+      if (val) {
+        this.rocketChatCaCerts = true;
+      } else {
+        this.rocketChatCaCerts = false;
+      }
+    },
+
+    changeRocketChatAttachKibanaDiscoverUrl(val) {
+      if (val) {
+        this.rocketChatAttachKibanaDiscoverUrl = true;
+      } else {
+        this.rocketChatAttachKibanaDiscoverUrl = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.disabled {
+  .emoji-mart {
+    height: auto !important;
+    border: 0 !important;
+  }
+
+  .emoji-mart-title-label,
+  .emoji-mart-bar:first-child,
+  .emoji-mart-search,
+  .emoji-mart-scroll,
+  .emoji-mart-preview-skins {
+    display: none;
+  }
+
+  .emoji-mart-bar {
+    border: 0 !important;
+  }
+
+  .emoji-mart-preview {
+    height: 45px !important;
+  }
+
+  .emoji-mart-preview-emoji {
+    left: 0 !important;
+  }
+
+  .emoji-mart-preview-data {
+    left: 56px !important;
+  }
+}
+
+:not(.is-disabled) {
+  &.rocketChat-danger .el-radio__inner:hover {
+    border-color: red;
+  }
+  &.rocketChat-danger .el-radio__input.is-checked .el-radio__inner {
+    border-color: red;
+    background: red;
+  }
+  &.rocketChat-danger .el-radio__input.is-checked + .el-radio__label,
+  &.rocketChat-danger {
+    color: red !important;
+    border-color: red !important;
+  }
+  &.rocketChat-warning .el-radio__inner:hover {
+    border-color: orange;
+  }
+  &.rocketChat-warning .el-radio__input.is-checked .el-radio__inner {
+    border-color: orange;
+    background: orange;
+  }
+  &.rocketChat-warning .el-radio__input.is-checked + .el-radio__label,
+  &.rocketChat-warning {
+    color: orange !important;
+    border-color: orange !important;
+  }
+  &.rocketChat-good .el-radio__inner:hover {
+    border-color: green;
+  }
+  &.rocketChat-good .el-radio__input.is-checked .el-radio__inner {
+    border-color: green;
+    background: green;
+  }
+  &.rocketChat-good .el-radio__input.is-checked + .el-radio__label,
+  &.rocketChat-good {
+    color: green !important;
+    border-color: green !important;
+  }
+}
+</style>
diff --git a/src/components/config/alert/ConfigAlertServiceNow.vue b/src/components/config/alert/ConfigAlertServiceNow.vue
new file mode 100644
index 00000000..50962b0b
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertServiceNow.vue
@@ -0,0 +1,257 @@
+.<template>
+  <div>
+    <praeco-form-item label="Username" prop="serviceNowUsername" required>
+      <el-input id="serviceNowUsername" v-model="serviceNowUsername" :disabled="viewOnly" />
+      <label>The ServiceNow Username to access the api.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Password" prop="serviceNowPassword" required>
+      <el-input id="serviceNowPassword" v-model="serviceNowPassword" :disabled="viewOnly" />
+      <label>The ServiceNow password to access the api.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="REST URL" prop="servicenowRestUrl" required>
+      <el-input id="servicenowRestUrl" v-model="servicenowRestUrl" :disabled="viewOnly" />
+      <label>The ServiceNow RestApi url.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="ShortDescription" prop="servicenowShortDescription" required>
+      <el-input id="servicenowShortDescription" v-model="servicenowShortDescription" :disabled="viewOnly" />
+      <label>The ServiceNow password to access the api.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Comments" prop="servicenowComments" required>
+      <el-input id="servicenowComments" v-model="servicenowComments" :disabled="viewOnly" />
+      <label>Comments to be attached to the incident, this is the equivilant of work notes.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="AssignmentGroup" prop="servicenowAssignmentGroup" required>
+      <el-input id="servicenowAssignmentGroup" v-model="servicenowAssignmentGroup" :disabled="viewOnly" />
+      <label>The group to assign the incident to.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Category" prop="servicenowCategory" required>
+      <el-input id="servicenowCategory" v-model="servicenowCategory" :disabled="viewOnly" />
+      <label>The category to attach the incident to, use an existing category.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Subcategory" prop="servicenowSubcategory" required>
+      <el-input id="servicenowSubcategory" v-model="servicenowSubcategory" :disabled="viewOnly" />
+      <label>The subcategory to attach the incident to, use an existing subcategory.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="CmdbCi" prop="servicenowCmdbCi" required>
+      <el-input id="servicenowCmdbCi" v-model="servicenowCmdbCi" :disabled="viewOnly" />
+      <label>The configuration item to attach the incident to.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="CallerId" prop="servicenowCallerId" required>
+      <el-input id="servicenowCallerId" v-model="servicenowCallerId" :disabled="viewOnly" />
+      <label>The caller id (email address) of the user that created the incident.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy" prop="servicenowProxy">
+      <el-input id="servicenowProxy" v-model="servicenowProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to ServiceNow.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Impact" prop="servicenowImpact">
+      <el-input-number id="servicenowImpact" v-model="servicenowImpact" :disabled="viewOnly" :min="1" :max="3" />
+      <label>
+        An integer 1, 2, or 3 representing high, medium, and low respectively.
+        This measures the effect of an incident on business processes.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Urgency" prop="servicenowUrgency">
+      <el-input-number id="servicenowUrgency" v-model="servicenowUrgency" :disabled="viewOnly" :min="1" :max="3" />
+      <label>
+        An integer 1, 2, or 3 representing high, medium, and low respecitvely.
+        This measures how long this incident can be delayed until there is a significant business impact.
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    serviceNowUsername: {
+      get() {
+        return this.$store.state.config.alert.serviceNowUsername;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_USERNAME',
+          value
+        );
+      }
+    },
+
+    serviceNowPassword: {
+      get() {
+        return this.$store.state.config.alert.serviceNowPassword;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_PASSWORD',
+          value
+        );
+      }
+    },
+
+    servicenowRestUrl: {
+      get() {
+        return this.$store.state.config.alert.servicenowRestUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_REST_URL',
+          value
+        );
+      }
+    },
+
+    servicenowShortDescription: {
+      get() {
+        return this.$store.state.config.alert.servicenowShortDescription;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_SHORT_DESCRIPTION',
+          value
+        );
+      }
+    },
+
+    servicenowComments: {
+      get() {
+        return this.$store.state.config.alert.servicenowComments;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_COMMENTS',
+          value
+        );
+      }
+    },
+
+    servicenowAssignmentGroup: {
+      get() {
+        return this.$store.state.config.alert.servicenowAssignmentGroup;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_ASSIGNMENT_GROUP',
+          value
+        );
+      }
+    },
+
+    servicenowCategory: {
+      get() {
+        return this.$store.state.config.alert.servicenowCategory;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_CATEGORY',
+          value
+        );
+      }
+    },
+
+    servicenowSubcategory: {
+      get() {
+        return this.$store.state.config.alert.servicenowSubcategory;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_SUBCATEGORY',
+          value
+        );
+      }
+    },
+
+    servicenowCmdbCi: {
+      get() {
+        return this.$store.state.config.alert.servicenowCmdbCi;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_CMDB_CI',
+          value
+        );
+      }
+    },
+
+    servicenowCallerId: {
+      get() {
+        return this.$store.state.config.alert.servicenowCallerId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_CALLER_ID',
+          value
+        );
+      }
+    },
+
+    servicenowProxy: {
+      get() {
+        return this.$store.state.config.alert.servicenowProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_PROXY',
+          value
+        );
+      }
+    },
+
+    servicenowImpact: {
+      get() {
+        return this.$store.state.config.alert.servicenowImpact;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_IMPACT',
+          value
+        );
+      }
+    },
+
+    servicenowUrgency: {
+      get() {
+        return this.$store.state.config.alert.servicenowUrgency;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SERVICENOW_URGENCY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertSlack.vue b/src/components/config/alert/ConfigAlertSlack.vue
new file mode 100644
index 00000000..d3e0fc2a
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertSlack.vue
@@ -0,0 +1,549 @@
+<template>
+  <div>
+    <el-form-item label="Channel or username" prop="slackChannelOverride" required>
+      <el-input id="slackChannelOverride" v-model="slackChannelOverride" :disabled="viewOnly" />
+      <label>
+        The @username or #channel to send the alert. Tip: Create new channels
+        for your alerts, to have fine-grained control of Slack notifications.
+      </label>
+    </el-form-item>
+
+    <praeco-form-item label="Post as" prop="slackUsernameOverride" required>
+      <el-input id="slackUsernameOverride" v-model="slackUsernameOverride" :disabled="viewOnly" />
+      <label>This is the username that will appear in Slack for the alert</label>
+    </praeco-form-item>
+
+    <praeco-form-item
+      v-if="!(viewOnly && !slackEmojiOverride)"
+      :class="{ 'disabled': viewOnly }"
+      label="Icon"
+      prop="slackEmojiOverride">
+      <picker
+        :emoji="slackEmojiOverride || 'arrow_up'"
+        :title="slackEmojiOverride || 'Pick your icon...'"
+        color="#189acc"
+        @select="addEmoji" />
+    </praeco-form-item>
+
+    <el-form-item label="Message color" prop="slackMsgColor" required>
+      <el-radio-group v-model="slackMsgColor" :disabled="viewOnly">
+        <el-radio id="slackMsgColorDanger" label="danger" border class="slack-danger">
+          Danger
+        </el-radio>
+        <el-radio id="slackMsgColorWarning" label="warning" border class="slack-warning">
+          Warning
+        </el-radio>
+        <el-radio id="slackMsgColorGood" label="good" border class="slack-good">
+          Good
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item label="Parse Override" prop="slackParseOverride">
+      <el-radio-group v-model="slackParseOverride" :disabled="viewOnly">
+        <el-radio id="slackParseOverrideNone" label="none" border>
+          none
+        </el-radio>
+        <el-radio id="slackParseOverrideFull" label="full" border>
+          full
+        </el-radio>
+      </el-radio-group>
+      <label>By default the notification message is escaped ‘none’. You can also use ‘full’.</label>
+    </el-form-item>
+
+    <el-form-item label="Text String" prop="slackTextString">
+      <el-input id="slackTextString" v-model="slackTextString" :disabled="viewOnly" />
+      <label>Notification message you want to add.</label>
+    </el-form-item>
+
+    <el-form-item label="Ignore SSL Errors" prop="slackIgnoreSslErrors">
+      <el-switch
+        id="slackIgnoreSslErrors"
+        v-model="slackIgnoreSslErrors"
+        :disabled="viewOnly"
+        @change="changeSlackIgnoreSslErrors" />
+    </el-form-item>
+
+    <el-form-item label="Icon URL Override" prop="slackIconUrlOverride">
+      <el-input id="slackIconUrlOverride" v-model="slackIconUrlOverride" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will use the default webhook icon when posting to the channel.
+        You can provide icon_url to use custom image.
+        Provide absolute address of the picture or Base64 data url.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="CA Certs" prop="slackCaCerts">
+      <el-switch
+        id="slackCaCerts"
+        v-model="slackCaCerts"
+        :disabled="viewOnly"
+        @change="changeSlackCaCerts" />
+    </el-form-item>
+
+    <el-form-item label="Timeout" prop="slackTimeout">
+      <el-input-number id="slackTimeout" v-model="slackTimeout" :disabled="viewOnly" />
+      <label>
+        You can specify a timeout value, in seconds, for making communicating with Slack.
+        The default is 10. If a timeout occurs, the alert will be retried next time ElastAlert 2 cycles.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Attach Kibana Discover URL" prop="slackAttachKibanaDiscoverUrl">
+      <el-switch
+        id="slackAttachKibanaDiscoverUrl"
+        v-model="slackAttachKibanaDiscoverUrl"
+        :disabled="viewOnly"
+        @change="changeSlackAttachKibanaDiscoverUrl" />
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Color" prop="slackKibanaDiscoverColor">
+      <el-color-picker
+        v-model="slackKibanaDiscoverColor" :disabled="viewOnly" />
+      <label>The color of the Kibana Discover url attachment.</label>
+    </el-form-item>
+
+    <el-form-item label="Kibana Discover Title" prop="slackKibanaDiscoverTitle">
+      <el-input v-model="slackKibanaDiscoverTitle" :disabled="viewOnly" />
+      <label>The title of the Kibana Discover url attachment.</label>
+    </el-form-item>
+
+    <el-form-item label="Proxy" prop="slackProxy">
+      <el-input id="slackProxy" v-model="slackProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to Slack.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </el-form-item>
+
+    <el-form-item label="Footer" prop="slackFooter">
+      <el-input v-model="slackFooter" :disabled="viewOnly" />
+      <label>Add a static footer text for alert.</label>
+    </el-form-item>
+
+    <el-form-item label="Footer Icon" prop="slackFooterIcon">
+      <el-input v-model="slackFooterIcon" :disabled="viewOnly" />
+      <label>A Public Url for a footer icon.</label>
+    </el-form-item>
+
+    <el-form-item label="Image URL" prop="slackImageUrl">
+      <el-input v-model="slackImageUrl" :disabled="viewOnly" />
+      <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG).</label>
+    </el-form-item>
+
+    <el-form-item label="Thumb URL" prop="slackThumbUrl">
+      <el-input v-model="slackThumbUrl" :disabled="viewOnly" />
+      <label>An optional URL to an image file (GIF, JPEG, PNG, BMP, or SVG) that is displayed as thumbnail.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Name" prop="slackAuthorName">
+      <el-input v-model="slackAuthorName" :disabled="viewOnly" />
+      <label>An optional name used to identify the author.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Link" prop="slackAuthorLink">
+      <el-input v-model="slackAuthorLink" :disabled="viewOnly" />
+      <label>An optional URL used to hyperlink the author_name.</label>
+    </el-form-item>
+
+    <el-form-item label="Author Icon" prop="slackAuthorIcon">
+      <el-input v-model="slackAuthorIcon" :disabled="viewOnly" />
+      <label>An optional URL used to display a 16x16 pixel icon beside the author_name.</label>
+    </el-form-item>
+
+    <el-form-item label="Msg Pretext" prop="slackMsgPretext">
+      <el-input v-model="slackMsgPretext" :disabled="viewOnly" />
+      <label>You can set the message attachment pretext using this option.</label>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import { Picker } from 'emoji-mart-vue';
+
+let validateSlackDestination = (rule, value, callback) => {
+  if (value.length < 2) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else if (!value.startsWith('@') && !value.startsWith('#')) {
+    callback(new Error('Please enter a @username or #channel'));
+  } else {
+    callback();
+  }
+};
+
+export default {
+  components: {
+    Picker
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+        slackChannelOverride: [
+          {
+            validator: validateSlackDestination,
+            trigger: 'change'
+          }
+        ],
+      }
+    };
+  },
+
+  computed: {
+    slackChannelOverride: {
+      get() {
+        return this.$store.state.config.alert.slackChannelOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_CHANNEL_OVERRIDE', value);
+      }
+    },
+
+    slackUsernameOverride: {
+      get() {
+        return this.$store.state.config.alert.slackUsernameOverride;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_USERNAME_OVERRIDE',
+          value
+        );
+      }
+    },
+
+    slackEmojiOverride: {
+      get() {
+        return this.$store.state.config.alert.slackEmojiOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_EMOJI_OVERRIDE', value);
+      }
+    },
+
+    slackParseOverride: {
+      get() {
+        return this.$store.state.config.alert.slackParseOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_PARSE_OVERRIDE', value);
+      }
+    },
+
+    slackTextString: {
+      get() {
+        return this.$store.state.config.alert.slackTextString;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_TEXT_STRING',
+          value
+        );
+      }
+    },
+
+    slackIgnoreSslErrors: {
+      get() {
+        return this.$store.state.config.alert.slackIgnoreSslErrors;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_IGNORE_SSL_ERRORS',
+          value
+        );
+      }
+    },
+
+    slackIconUrlOverride: {
+      get() {
+        return this.$store.state.config.alert.slackIconUrlOverride;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_ICON_URL_OVERRIDE',
+          value
+        );
+      }
+    },
+
+    slackCaCerts: {
+      get() {
+        return this.$store.state.config.alert.slackCaCerts;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_CA_CERTS',
+          value
+        );
+      }
+    },
+
+    slackTimeout: {
+      get() {
+        return this.$store.state.config.alert.slackTimeout;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_TIMEOUT',
+          value
+        );
+      }
+    },
+
+    slackMsgColor: {
+      get() {
+        return this.$store.state.config.alert.slackMsgColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_MSG_COLOR', value);
+      }
+    },
+
+    slackAttachKibanaDiscoverUrl: {
+      get() {
+        return this.$store.state.config.alert.slackAttachKibanaDiscoverUrl;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_ATTACH_KIBANA_DISCOVER_URL', value);
+      }
+    },
+
+    slackKibanaDiscoverColor: {
+      get() {
+        return this.$store.state.config.alert.slackKibanaDiscoverColor;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_KIBANA_DISCOVER_COLOR', value);
+      }
+    },
+
+    slackKibanaDiscoverTitle: {
+      get() {
+        return this.$store.state.config.alert.slackKibanaDiscoverTitle;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_SLACK_KIBANA_DISCOVER_TITLE', value);
+      }
+    },
+
+    slackProxy: {
+      get() {
+        return this.$store.state.config.alert.slackProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_PROXY',
+          value
+        );
+      }
+    },
+
+    slackFooter: {
+      get() {
+        return this.$store.state.config.alert.slackFooter;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_FOOTER',
+          value
+        );
+      }
+    },
+
+    slackFooterIcon: {
+      get() {
+        return this.$store.state.config.alert.slackFooterIcon;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_FOOTER_ICON',
+          value
+        );
+      }
+    },
+
+    slackImageUrl: {
+      get() {
+        return this.$store.state.config.alert.slackImageUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_IMAGE_URL',
+          value
+        );
+      }
+    },
+
+    slackThumbUrl: {
+      get() {
+        return this.$store.state.config.alert.slackThumbUrl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_THUMB_URL',
+          value
+        );
+      }
+    },
+
+    slackAuthorName: {
+      get() {
+        return this.$store.state.config.alert.slackAuthorName;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_AUTHOR_NAME',
+          value
+        );
+      }
+    },
+
+    slackAuthorLink: {
+      get() {
+        return this.$store.state.config.alert.slackAuthorLink;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_AUTHOR_LINK',
+          value
+        );
+      }
+    },
+
+    slackAuthorIcon: {
+      get() {
+        return this.$store.state.config.alert.slackAuthorIcon;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_AUTHOR_ICON',
+          value
+        );
+      }
+    },
+
+    slackMsgPretext: {
+      get() {
+        return this.$store.state.config.alert.slackMsgPretext;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_SLACK_MSG_PRETEXT',
+          value
+        );
+      }
+    },
+  },
+
+  methods: {
+    addEmoji(value) {
+      this.slackEmojiOverride = value.colons;
+    },
+
+    changeSlackIgnoreSslErrors(val) {
+      if (val) {
+        this.slackIgnoreSslErrors = true;
+      } else {
+        this.slackIgnoreSslErrors = false;
+      }
+    },
+
+    changeSlackAttachKibanaDiscoverUrl(val) {
+      if (val) {
+        this.slackAttachKibanaDiscoverUrl = true;
+      } else {
+        this.slackAttachKibanaDiscoverUrl = false;
+      }
+    },
+
+    changeSlackCaCerts(val) {
+      if (val) {
+        this.slackCaCerts = true;
+      } else {
+        this.slackCaCerts = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.disabled {
+  .emoji-mart {
+    height: auto !important;
+    border: 0 !important;
+  }
+
+  .emoji-mart-title-label,
+  .emoji-mart-bar:first-child,
+  .emoji-mart-search,
+  .emoji-mart-scroll,
+  .emoji-mart-preview-skins {
+    display: none;
+  }
+
+  .emoji-mart-bar {
+    border: 0 !important;
+  }
+
+  .emoji-mart-preview {
+    height: 45px !important;
+  }
+
+  .emoji-mart-preview-emoji {
+    left: 0 !important;
+  }
+
+  .emoji-mart-preview-data {
+    left: 56px !important;
+  }
+}
+
+:not(.is-disabled) {
+  &.slack-danger .el-radio__inner:hover {
+    border-color: red;
+  }
+
+  &.slack-danger .el-radio__input.is-checked .el-radio__inner {
+    border-color: red;
+    background: red;
+  }
+
+  &.slack-danger .el-radio__input.is-checked + .el-radio__label,
+  &.slack-danger {
+    color: red !important;
+    border-color: red !important;
+  }
+
+  &.slack-warning .el-radio__inner:hover {
+    border-color: orange;
+  }
+
+  &.slack-warning .el-radio__input.is-checked .el-radio__inner {
+    border-color: orange;
+    background: orange;
+  }
+
+  &.slack-warning .el-radio__input.is-checked + .el-radio__label,
+  &.slack-warning {
+    color: orange !important;
+    border-color: orange !important;
+  }
+
+  &.slack-good .el-radio__inner:hover {
+    border-color: green;
+  }
+
+  &.slack-good .el-radio__input.is-checked .el-radio__inner {
+    border-color: green;
+    background: green;
+  }
+
+  &.slack-good .el-radio__input.is-checked + .el-radio__label,
+  &.slack-good {
+    color: green !important;
+    border-color: green !important;
+  }
+}
+</style>
diff --git a/src/components/config/alert/ConfigAlertStomp.vue b/src/components/config/alert/ConfigAlertStomp.vue
new file mode 100644
index 00000000..8bab617b
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertStomp.vue
@@ -0,0 +1,141 @@
+.<template>
+  <div>
+    <praeco-form-item label="Host Name" prop="stompHostname" required>
+      <el-input id="stompHostname" v-model="stompHostname" :disabled="viewOnly" />
+      <label>The STOMP host to use, defaults to localhost.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Host Port" prop="stompHostport" required>
+      <el-input id="stompHostport" v-model="stompHostport" :disabled="viewOnly" />
+      <label>The STOMP port to use, defaults to 61613.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Login" prop="stompLogin" required>
+      <el-input id="stompLogin" v-model="stompLogin" :disabled="viewOnly" />
+      <label>The STOMP login to use, defaults to admin.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Password" prop="stompPassword" required>
+      <el-input id="stompPassword" v-model="stompPassword" :disabled="viewOnly" />
+      <label>The STOMP password to use, defaults to admin.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Destination" prop="stompDestination">
+      <el-input id="stompDestination" v-model="stompDestination" :disabled="viewOnly" />
+      <label>The STOMP destination to use, defaults to /queue/ALERT</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="SSL" prop="stompSsl">
+      <el-switch
+        id="stompSsl"
+        v-model="stompSsl"
+        :disabled="viewOnly"
+        @change="changestompSsl" />
+      <label>Connect the STOMP host using TLS.</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    stompHostname: {
+      get() {
+        return this.$store.state.config.alert.stompHostname;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_HOSTNAME',
+          value
+        );
+      }
+    },
+
+    stompHostport: {
+      get() {
+        return this.$store.state.config.alert.stompHostport;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_HOSTPORT',
+          value
+        );
+      }
+    },
+
+    stompLogin: {
+      get() {
+        return this.$store.state.config.alert.stompLogin;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_LOGIN',
+          value
+        );
+      }
+    },
+
+    stompPassword: {
+      get() {
+        return this.$store.state.config.alert.stompPassword;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_PASSWORD',
+          value
+        );
+      }
+    },
+
+    stompDestination: {
+      get() {
+        return this.$store.state.config.alert.stompDestination;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_DESTINATION',
+          value
+        );
+      }
+    },
+
+    stompSsl: {
+      get() {
+        return this.$store.state.config.alert.stompSsl;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_STOMP_SSL',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    changestompSsl(val) {
+      if (val) {
+        this.stompSsl = true;
+      } else {
+        this.stompSsl = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/config/alert/ConfigAlertTelegram.vue b/src/components/config/alert/ConfigAlertTelegram.vue
new file mode 100644
index 00000000..2b7d002d
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertTelegram.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <praeco-form-item label="Room ID" prop="telegramRoomId" required>
+      <el-input id="telegramRoomId" v-model="telegramRoomId" :disabled="viewOnly" />
+      <label>
+        Unique identifier for the target chat or username of the
+        target channel using telegram chat_id (in the format “-xxxxxxxx”)
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy" prop="telegramProxy">
+      <el-input id="telegramProxy" v-model="telegramProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to Telegram.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy Login" prop="telegramProxyLogin">
+      <el-input id="telegramProxyLogin" v-model="telegramProxyLogin" :disabled="viewOnly" />
+      <label>The Telegram proxy auth username.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy Password" prop="telegramProxyPass">
+      <el-input id="telegramProxyPass" v-model="telegramProxyPass" :disabled="viewOnly" />
+      <label>The Telegram proxy auth password.</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    telegramRoomId: {
+      get() {
+        return this.$store.state.config.alert.telegramRoomId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TELEGRAM_ROOM_ID',
+          value
+        );
+      }
+    },
+
+    telegramProxy: {
+      get() {
+        return this.$store.state.config.alert.telegramProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TELEGRAM_PROXY',
+          value
+        );
+      }
+    },
+
+    telegramProxyLogin: {
+      get() {
+        return this.$store.state.config.alert.telegramProxyLogin;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TELEGRAM_PROXY_LOGIN',
+          value
+        );
+      }
+    },
+
+    telegramProxyPass: {
+      get() {
+        return this.$store.state.config.alert.telegramProxyPass;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TELEGRAM_PROXY_PASS',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertTheHive.vue b/src/components/config/alert/ConfigAlertTheHive.vue
new file mode 100644
index 00000000..b8ac8c66
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertTheHive.vue
@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <praeco-form-item label="Hive Alert Config Title" prop="hiveAlertConfigTitle">
+      <el-input id="hiveAlertConfigTitle" v-model="hiveAlertConfigTitle" :disabled="viewOnly" />
+      <label>Alert's description.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Hive Alert Config Type" prop="hiveAlertConfigType">
+      <el-input id="hiveAlertConfigType" v-model="hiveAlertConfigType" :disabled="viewOnly" />
+      <label>Alert's type.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Hive Alert Config Source" prop="hiveAlertConfigSource">
+      <el-input id="hiveAlertConfigSource" v-model="hiveAlertConfigSource" :disabled="viewOnly" />
+      <label>Alert's source.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Hive Alert Config Description" prop="hiveAlertConfigDescription">
+      <el-input id="hiveAlertConfigDescription" v-model="hiveAlertConfigDescription" :disabled="viewOnly" />
+      <label>Alert's description.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Hive Alert Config Severity" prop="hiveAlertConfigSeverity">
+      <el-input-number id="hiveAlertConfigSeverity" v-model.number="hiveAlertConfigSeverity" :min="1" :max="4" :disabled="viewOnly" />
+      <label>Alert's severity: 1, 2, 3, 4 for LOW, MEDIUM, HIGH, CRTICAL.</label>
+    </praeco-form-item>
+
+    <el-popover v-model="pophiveAlertConfigTagsVisible" :class="{ 'is-invalid': !pophiveAlertConfigTagsValid }">
+      <span slot="reference" class="pop-trigger">
+        <el-tooltip v-if="hiveAlertConfigTags.length" :content="hiveAlertConfigTags.join(', ')" placement="top">
+          <span>Tags ({{ hiveAlertConfigTags.length }})</span>
+        </el-tooltip>
+        <span v-else>Tags ({{ hiveAlertConfigTags.length }})</span>
+      </span>
+      <template>
+        <el-form
+          ref="hiveAlertConfigTags"
+          :model="$store.state.config.alert"
+          label-position="top"
+          style="width: 360px"
+          @submit.native.prevent>
+          <el-form-item
+            v-for="(entry, index) in hiveAlertConfigTags"
+            :key="index"
+            :prop="'hiveAlertConfigTags.' + 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="hiveAlertConfigTags[index]"
+                  :disabled="viewOnly"
+                  placeholder="Tags"
+                  @input="(val) => updateHiveAlertConfigTags(val, index)" />
+              </el-col>
+              <el-col :span="4">
+                <el-button
+                  :disabled="viewOnly"
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                  plain
+                  @click="removeHiveAlertConfigTagsEntry(entry)" />
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </el-form>
+
+        <el-button :disabled="viewOnly" class="m-n-sm" @click="addHiveAlertConfigTagsEntry">
+          Add tags
+        </el-button>
+      </template>
+    </el-popover>
+
+    <praeco-form-item label="Hive Alert Config Tlp" prop="hiveAlertConfigTlp">
+      <el-input-number id="hiveAlertConfigTlp" v-model.number="hiveAlertConfigTlp" :min="0" :max="3" :disabled="viewOnly" />
+      <label>Alert's TLP: 0, 1, 2, 3 for WHITE, GREEN, AMBER, RED.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Hive Alert Config Status" prop="hiveAlertConfigStatus">
+      <el-radio-group v-model="hiveAlertConfigStatus" :disabled="viewOnly">
+        <el-radio id="hiveAlertConfigStatusWaiting" label="Waiting" border>
+          Waiting
+        </el-radio>
+        <el-radio id="hiveAlertConfigStatusInProgress" label="InProgress" border>
+          InProgress
+        </el-radio>
+        <el-radio id="hiveAlertConfigStatusCancel" label="Cancel" border>
+          Cancel
+        </el-radio>
+        <el-radio id="hiveAlertConfigStatusCompleted" label="Completed" border>
+          Completed
+        </el-radio>
+      </el-radio-group>
+      <label>Task's status: Waiting, InProgress, Cancel, Completed.</label>
+    </praeco-form-item>
+
+    <el-form-item label="Hive Alert Config Follow" prop="hiveAlertConfigFollow">
+      <el-switch
+        id="hiveAlertConfigFollow"
+        v-model="hiveAlertConfigFollow"
+        :disabled="viewOnly"
+        @change="changeHiveAlertConfigFollow" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      popHiveAlertConfigTagsVisible: false,
+      popHiveAlertConfigTagsValid: true,
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    hiveAlertConfigTitle: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigTitle;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TITLE', value);
+      }
+    },
+
+    hiveAlertConfigType: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigType;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TYPE', value);
+      }
+    },
+
+    hiveAlertConfigSource: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigSource;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_SOURCE', value);
+      }
+    },
+
+    hiveAlertConfigDescription: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigDescription;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_DESCRIPTION', value);
+      }
+    },
+
+    hiveAlertConfigSeverity: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigSeverity;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_SEVERITY', value);
+      }
+    },
+
+    hiveAlertConfigTags: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigTags;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TAGS', value);
+      }
+    },
+
+    hiveAlertConfigTlp: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigTlp;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TLP', value);
+      }
+    },
+
+    hiveAlertConfigStatus: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigStatus;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_STATUS', value);
+      }
+    },
+
+    hiveAlertConfigFollow: {
+      get() {
+        return this.$store.state.config.alert.hiveAlertConfigFollow;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_FOLLOW', value);
+      }
+    }
+  },
+
+  methods: {
+    changeHiveAlertConfigFollow(val) {
+      if (val) {
+        this.hiveAlertConfigFollow = true;
+      } else {
+        this.hiveAlertConfigFollow = false;
+      }
+    },
+
+    async validate() {
+      try {
+        if (this.$refs.hiveAlertConfigTags) {
+          await this.validateHiveAlertConfigTags();
+        }
+        this.$emit('validate', true);
+        return true;
+      } catch (error) {
+        this.$emit('validate', false);
+        return false;
+      }
+    },
+
+    async validateHiveAlertConfigTags() {
+      if (!this.hiveAlertConfigTags.length) {
+        this.popHiveAlertConfigTagsValid = false;
+        return;
+      }
+      try {
+        this.popHiveAlertConfigTagsValid = await this.$refs.hiveAlertConfigTags.validate();
+      } catch (error) {
+        this.popHiveAlertConfigTagsValid = false;
+        throw error;
+      }
+    },
+
+    updateHiveAlertConfigTags(entry, index) {
+      if (Number.isNaN(entry)) return;
+      this.$store.commit('config/alert/UPDATE_HIVE_ALERT_CONFIG_TAGS_ENTRY', {
+        entry,
+        index
+      });
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    removeHiveAlertConfigTagsEntry(entry) {
+      this.$store.commit('config/alert/REMOVE_HIVE_ALERT_CONFIG_TAGS_ENTRY', entry);
+      this.$nextTick(() => {
+        this.validate();
+      });
+    },
+
+    addHiveAlertConfigTagsEntry() {
+      this.$store.commit('config/alert/ADD_HIVE_ALERT_CONFIG_TAGS_ENTRY');
+      this.$nextTick(() => {
+        this.validate();
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertTwilio.vue b/src/components/config/alert/ConfigAlertTwilio.vue
new file mode 100644
index 00000000..6b072b72
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertTwilio.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <el-radio id="groupTwilio" v-model="groupTwilio" :disabled="viewOnly" label="sms" border @change="changeTwilio">
+      SMS
+    </el-radio>
+    <el-radio id="groupTwilio" v-model="groupTwilio" :disabled="viewOnly" label="copilot" border @change="changeTwilio">
+      Copilot
+    </el-radio>
+
+    <praeco-form-item label="Twilio Account Sid" prop="twilioAccountSid" required>
+      <el-input id="twilioAccountSid" v-model="twilioAccountSid" :disabled="viewOnly" />
+      <label>This is sid of your twilio account.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Twilio Auth Token" prop="twilioAuth" required>
+      <el-input id="twilioAuth" v-model="twilioAuth" :disabled="viewOnly" />
+      <label>Auth token assosiated with your twilio account.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Twilio To Number" prop="twilioToNumber" required>
+      <el-input id="twilioToNumber" v-model="twilioToNumber" :disabled="viewOnly" />
+      <label>The phone number where you would like send the notification. </label>
+    </praeco-form-item>
+
+    <div v-if="groupTwilio === 'sms'">
+      <praeco-form-item label="Twilio From Number" prop="twilioFromNumber" required>
+        <el-input id="twilioFromNumber" v-model="twilioFromNumber" :disabled="viewOnly" />
+        <label>Your twilio phone number from which message will be sent. </label>
+      </praeco-form-item>
+    </div>
+
+    <div v-if="groupTwilio === 'copilot'">
+      <praeco-form-item label="Twilio Message Service Sid" prop="twilioMessageServiceSid" required>
+        <el-input id="twilioMessageServiceSid" v-model="twilioMessageServiceSid" :disabled="viewOnly" />
+        <label>The SID of your twilio message service.</label>
+      </praeco-form-item>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    let groupTwilioValue = 'copilot';
+    if (typeof this.$store.state.config.alert.twilio_message_service_sid === 'undefined' || this.$store.state.config.alert.twilio_message_service_sid === '') {
+      groupTwilioValue = 'sms';
+    }
+    return {
+      groupTwilio: groupTwilioValue,
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    twilioAccountSid: {
+      get() {
+        return this.$store.state.config.alert.twilioAccountSid;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TWILIO_ACCOUNT_SID',
+          value
+        );
+      }
+    },
+
+    twilioAuth: {
+      get() {
+        return this.$store.state.config.alert.twilioAuth;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TWILIO_AUTH_TOKEN',
+          value
+        );
+      }
+    },
+
+    twilioToNumber: {
+      get() {
+        return this.$store.state.config.alert.twilioToNumber;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TWILIO_TO_NUMBER',
+          value
+        );
+      }
+    },
+
+    twilioFromNumber: {
+      get() {
+        return this.$store.state.config.alert.twilioFromNumber;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TWILIO_FROM_NUMBER',
+          value
+        );
+      }
+    },
+
+    twilioMessageServiceSid: {
+      get() {
+        return this.$store.state.config.alert.twilioMessageServiceSid;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_TWILIO_MESSAGE_SERVICE_SID',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+    changeTwilio() {
+      this.twilioFromNumber = '';
+      this.twilioMessageServiceSid = '';
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertVictorOps.vue b/src/components/config/alert/ConfigAlertVictorOps.vue
new file mode 100644
index 00000000..d0bda66e
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertVictorOps.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <praeco-form-item label="Api Key" prop="victoropsApiKey" required>
+      <el-input id="victoropsApiKey" v-model="victoropsApiKey" :disabled="viewOnly" />
+      <label>API key generated under the ‘REST Endpoint’ in the Integrations settings.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Routing Key" prop="victoropsRoutingKey" required>
+      <el-input id="victoropsRoutingKey" v-model="victoropsRoutingKey" :disabled="viewOnly" />
+      <label>VictorOps routing key to route the alert to.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Message Type" prop="victoropsMessageType" required>
+      <el-radio-group v-model="victoropsMessageType" :disabled="viewOnly">
+        <el-radio id="victoropsMessageTypeInfo" label="INFO" border>
+          INFO
+        </el-radio>
+        <el-radio id="victoropsMessageTypeWarning" label="WARNING" border>
+          WARNING
+        </el-radio>
+        <el-radio id="victoropsMessageTypeAcknowledgement" label="ACKNOWLEDGEMENT" border>
+          ACKNOWLEDGEMENT
+        </el-radio>
+        <el-radio id="victoropsMessageTypeCritical" label="CRITICAL" border>
+          CRITICAL
+        </el-radio>
+        <el-radio id="victoropsMessageTypeRecovery" label="RECOVERY" border>
+          RECOVERY
+        </el-radio>
+      </el-radio-group>
+      <label>
+        VictorOps field to specify severity level.
+        Must be one of the following: INFO, WARNING, ACKNOWLEDGEMENT, CRITICAL, RECOVERY
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Entity Id" prop="victoropsEntityId">
+      <el-input id="victoropsEntityId" v-model="victoropsEntityId" :disabled="viewOnly" />
+      <label>
+        The identity of the incident used by VictorOps to correlate incidents throughout the alert lifecycle.
+        If not defined, VictorOps will assign a random string to each alert.
+        /label>
+      </label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Entity Display Name" prop="victoropsEntityDisplayName">
+      <el-input id="victoropsEntityDisplayName" v-model="victoropsEntityDisplayName" :disabled="viewOnly" />
+      <label>Human-readable name of alerting entity to summarize incidents without affecting the life-cycle workflow.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Proxy" prop="victoropsProxy">
+      <el-input id="victoropsProxy" v-model="victoropsProxy" :disabled="viewOnly" />
+      <label>
+        By default ElastAlert 2 will not use a network proxy to send notifications to VictorOps.
+        Set this option using hostname:port if you need to use a proxy.
+      </label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    victoropsApiKey: {
+      get() {
+        return this.$store.state.config.alert.victoropsApiKey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_API_KEY',
+          value
+        );
+      }
+    },
+
+    victoropsRoutingKey: {
+      get() {
+        return this.$store.state.config.alert.victoropsRoutingKey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_ROUTING_KEY',
+          value
+        );
+      }
+    },
+
+    victoropsMessageType: {
+      get() {
+        return this.$store.state.config.alert.victoropsMessageType;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_MESSAGE_TYPE',
+          value
+        );
+      }
+    },
+
+    victoropsEntityId: {
+      get() {
+        return this.$store.state.config.alert.victoropsEntityId;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_ENTITY_ID',
+          value
+        );
+      }
+    },
+
+    victoropsEntityDisplayName: {
+      get() {
+        return this.$store.state.config.alert.victoropsEntityDisplayName;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_ENTITY_DISPLAY_NAME',
+          value
+        );
+      }
+    },
+
+    victoropsProxy: {
+      get() {
+        return this.$store.state.config.alert.victoropsProxy;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_VICTOROPS_PROXY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/config/alert/ConfigAlertZabbix.vue b/src/components/config/alert/ConfigAlertZabbix.vue
new file mode 100644
index 00000000..5b6f84f3
--- /dev/null
+++ b/src/components/config/alert/ConfigAlertZabbix.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <praeco-form-item label="Zbx Sender Host" prop="zbxSenderHost" required>
+      <el-input id="zbxSenderHost" v-model="zbxSenderHost" :disabled="viewOnly" />
+      <label>The address where zabbix server is running.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="Zbx Sender Port" prop="zbxSenderPort" required>
+      <el-input-number id="zbxSenderPort" v-model="zbxSenderPort" :disabled="viewOnly" />
+      <label>The port where zabbix server is listenning.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="ZbxHost" prop="zbxHost" required>
+      <el-input id="zbxHost" v-model="zbxHost" :disabled="viewOnly" />
+      <label>This field setup the host in zabbix that receives the value sent by ElastAlert 2.</label>
+    </praeco-form-item>
+
+    <praeco-form-item label="ZbxKey" prop="zbxKey" required>
+      <el-input id="zbxKey" v-model="zbxKey" :disabled="viewOnly" />
+      <label>This field setup the key in the host that receives the value sent by ElastAlert 2.</label>
+    </praeco-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      rules: {
+      }
+    };
+  },
+
+  computed: {
+    zbxSenderHost: {
+      get() {
+        return this.$store.state.config.alert.zbxSenderHost;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ZBX_SENDER_HOST',
+          value
+        );
+      }
+    },
+
+    zbxSenderPort: {
+      get() {
+        return this.$store.state.config.alert.zbxSenderPort;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ZBX_SENDER_PORT',
+          value
+        );
+      }
+    },
+
+    zbxHost: {
+      get() {
+        return this.$store.state.config.alert.zbxHost;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ZBX_HOST',
+          value
+        );
+      }
+    },
+
+    zbxKey: {
+      get() {
+        return this.$store.state.config.alert.zbxKey;
+      },
+      set(value) {
+        this.$store.commit(
+          'config/alert/UPDATE_ZBX_KEY',
+          value
+        );
+      }
+    }
+  },
+
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/registration.js b/src/registration.js
index f9ca5891..b01c2c62 100644
--- a/src/registration.js
+++ b/src/registration.js
@@ -14,6 +14,32 @@ import ElastalertTimeView from '@/components/ElastalertTimeView';
 import ConfigQuery from '@/components/config/ConfigQuery.vue';
 import ConfigAggregation from '@/components/config/ConfigAggregation.vue';
 import ConfigAlert from '@/components/config/alert/ConfigAlert.vue';
+import ConfigAlertAlerta from '@/components/config/alert/ConfigAlertAlerta.vue';
+import ConfigAlertAmazonSes from '@/components/config/alert/ConfigAlertAmazonSes.vue';
+import ConfigAlertAmazonSns from '@/components/config/alert/ConfigAlertAmazonSns.vue';
+import ConfigAlertChatwork from '@/components/config/alert/ConfigAlertChatwork.vue';
+import ConfigAlertCommand from '@/components/config/alert/ConfigAlertCommand.vue';
+import ConfigAlertDatadog from '@/components/config/alert/ConfigAlertDatadog.vue';
+import ConfigAlertDiscord from '@/components/config/alert/ConfigAlertDiscord.vue';
+import ConfigAlertEmail from '@/components/config/alert/ConfigAlertEmail.vue';
+import ConfigAlertExotel from '@/components/config/alert/ConfigAlertExotel.vue';
+import ConfigAlertGitter from '@/components/config/alert/ConfigAlertGitter.vue';
+import ConfigAlertGoogleChat from '@/components/config/alert/ConfigAlertGoogleChat.vue';
+import ConfigAlertHttpPost from '@/components/config/alert/ConfigAlertHttpPost.vue';
+import ConfigAlertJira from '@/components/config/alert/ConfigAlertJira.vue';
+import ConfigAlertLineNotify from '@/components/config/alert/ConfigAlertLineNotify.vue';
+import ConfigAlertMattermost from '@/components/config/alert/ConfigAlertMattermost.vue';
+import ConfigAlertMsTeams from '@/components/config/alert/ConfigAlertMsTeams.vue';
+import ConfigAlertPagerTree from '@/components/config/alert/ConfigAlertPagerTree.vue';
+import ConfigAlertRocketChat from '@/components/config/alert/ConfigAlertRocketChat.vue';
+import ConfigAlertServiceNow from '@/components/config/alert/ConfigAlertServiceNow.vue';
+import ConfigAlertSlack from '@/components/config/alert/ConfigAlertSlack.vue';
+import ConfigAlertStomp from '@/components/config/alert/ConfigAlertStomp.vue';
+import ConfigAlertTelegram from '@/components/config/alert/ConfigAlertTelegram.vue';
+import ConfigAlertTheHive from '@/components/config/alert/ConfigAlertTheHive.vue';
+import ConfigAlertTwilio from '@/components/config/alert/ConfigAlertTwilio.vue';
+import ConfigAlertVictorOps from '@/components/config/alert/ConfigAlertVictorOps.vue';
+import ConfigAlertZabbix from '@/components/config/alert/ConfigAlertZabbix.vue';
 import ConfigKibanaDiscover from '@/components/config/ConfigKibanaDiscover.vue';
 import ConfigTimeWindowFeature from '@/components/config/ConfigTimeWindowFeature.vue';
 import ConfigOwner from '@/components/config/ConfigOwner.vue';
@@ -27,6 +53,32 @@ Vue.component('Bulb', Bulb);
 Vue.component('DateTime', DateTime);
 Vue.component('ConfigQuery', ConfigQuery);
 Vue.component('ConfigAlert', ConfigAlert);
+Vue.component('ConfigAlertAlerta', ConfigAlertAlerta);
+Vue.component('ConfigAlertAmazonSes', ConfigAlertAmazonSes);
+Vue.component('ConfigAlertAmazonSns', ConfigAlertAmazonSns);
+Vue.component('ConfigAlertChatwork', ConfigAlertChatwork);
+Vue.component('ConfigAlertCommand', ConfigAlertCommand);
+Vue.component('ConfigAlertDatadog', ConfigAlertDatadog);
+Vue.component('ConfigAlertDiscord', ConfigAlertDiscord);
+Vue.component('ConfigAlertEmail', ConfigAlertEmail);
+Vue.component('ConfigAlertExotel', ConfigAlertExotel);
+Vue.component('ConfigAlertGitter', ConfigAlertGitter);
+Vue.component('ConfigAlertGoogleChat', ConfigAlertGoogleChat);
+Vue.component('ConfigAlertHttpPost', ConfigAlertHttpPost);
+Vue.component('ConfigAlertJira', ConfigAlertJira);
+Vue.component('ConfigAlertLineNotify', ConfigAlertLineNotify);
+Vue.component('ConfigAlertMattermost', ConfigAlertMattermost);
+Vue.component('ConfigAlertMsTeams', ConfigAlertMsTeams);
+Vue.component('ConfigAlertPagerTree', ConfigAlertPagerTree);
+Vue.component('ConfigAlertRocketChat', ConfigAlertRocketChat);
+Vue.component('ConfigAlertServiceNow', ConfigAlertServiceNow);
+Vue.component('ConfigAlertSlack', ConfigAlertSlack);
+Vue.component('ConfigAlertStomp', ConfigAlertStomp);
+Vue.component('ConfigAlertTelegram', ConfigAlertTelegram);
+Vue.component('ConfigAlertTheHive', ConfigAlertTheHive);
+Vue.component('ConfigAlertTwilio', ConfigAlertTwilio);
+Vue.component('ConfigAlertVictorOps', ConfigAlertVictorOps);
+Vue.component('ConfigAlertZabbix', ConfigAlertZabbix);
 Vue.component('ConfigAggregation', ConfigAggregation);
 Vue.component('ConfigSettings', ConfigSettings);
 Vue.component('ConfigKibanaDiscover', ConfigKibanaDiscover);

From 508037b72dcc2475f879d21e61011cb4f2361086 Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Sun, 15 Aug 2021 23:27:25 +0900
Subject: [PATCH 4/6] Split up ConfigAlert into multiple files (2)

---
 .../config/ConfigLimitExcecution.vue          | 72 +++++++++++++++++++
 src/components/config/alert/ConfigAlert.vue   | 49 +------------
 .../config/alert/ConfigAlertMsTeams.vue       | 33 +++++++--
 .../config/alert/ConfigAlertRocketChat.vue    | 10 ++-
 src/registration.js                           |  2 +
 5 files changed, 113 insertions(+), 53 deletions(-)
 create mode 100644 src/components/config/ConfigLimitExcecution.vue

diff --git a/src/components/config/ConfigLimitExcecution.vue b/src/components/config/ConfigLimitExcecution.vue
new file mode 100644
index 00000000..1fd635c9
--- /dev/null
+++ b/src/components/config/ConfigLimitExcecution.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-col :span="enableLimitExcecution ? 6 : 24">
+      <el-form-item label="Limit Excecution">
+        <el-switch
+          id="enableLimitExcecution"
+          v-model="enableLimitExcecution"
+          :disabled="viewOnly"
+          @change="changeLimitExcecution" />
+        <label>Limit Excecution Setting.</label>
+      </el-form-item>
+    </el-col>
+
+    <el-col v-if="enableLimitExcecution" :span="20">
+      <el-form-item label="" prop="limitExcecution">
+        <div v-if="!viewOnly" class="limit-excecution">
+          <VueCronEditorBuefy v-model="limitExcecution" /><br>
+          {{ limitExcecution }}
+        </div>
+        <div v-else>
+          {{ limitExcecution }}
+        </div>
+      </el-form-item>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import VueCronEditorBuefy from 'vue-cron-editor-buefy';
+
+export default {
+  components: {
+    VueCronEditorBuefy
+  },
+
+  props: ['viewOnly'],
+
+  data() {
+    return {
+      enableLimitExcecution: false,
+    };
+  },
+
+  computed: {
+    limitExcecution: {
+      get() {
+        return this.$store.state.config.alert.limitExcecution;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_LIMIT_EXCECUTION', value);
+      }
+    }
+  },
+
+  mounted() {
+    if (this.limitExcecution) {
+      this.enableLimitExcecution = true;
+    }
+  },
+
+  methods: {
+    changeLimitExcecution(val) {
+      if (val) {
+        this.enableLimitExcecution = true;
+      } else {
+        this.enableLimitExcecution = false;
+        this.limitExcecution = '';
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/config/alert/ConfigAlert.vue b/src/components/config/alert/ConfigAlert.vue
index ef011731..b4a21344 100644
--- a/src/components/config/alert/ConfigAlert.vue
+++ b/src/components/config/alert/ConfigAlert.vue
@@ -44,27 +44,8 @@
 
     <!-- Limit Excecution -->
     <el-row class="m-s-sm">
-      <el-col :span="enableLimitExcecution ? 6 : 24">
-        <el-form-item label="Limit Excecution">
-          <el-switch
-            id="enableLimitExcecution"
-            v-model="enableLimitExcecution"
-            :disabled="viewOnly"
-            @change="changeLimitExcecution" />
-          <label>Limit Excecution Setting.</label>
-        </el-form-item>
-      </el-col>
-
-      <el-col v-if="enableLimitExcecution" :span="20">
-        <el-form-item label="" prop="limitExcecution">
-          <div v-if="!viewOnly" class="limit-excecution">
-            <VueCronEditorBuefy v-model="limitExcecution" /><br>
-            {{ limitExcecution }}
-          </div>
-          <div v-else>
-            {{ limitExcecution }}
-          </div>
-        </el-form-item>
+      <el-col :span="24">
+        <ConfigLimitExcecution ref="limitExcecution" :view-only="viewOnly" />
       </el-col>
     </el-row>
 
@@ -414,7 +395,6 @@
 </template>
 
 <script>
-import VueCronEditorBuefy from 'vue-cron-editor-buefy';
 import ConfigAlertSubjectBody from './ConfigAlertSubjectBody';
 import ConfigAlertAlerta from './ConfigAlertAlerta';
 import ConfigAlertAmazonSes from './ConfigAlertAmazonSes';
@@ -471,15 +451,13 @@ export default {
     ConfigAlertTheHive,
     ConfigAlertTwilio,
     ConfigAlertVictorOps,
-    ConfigAlertZabbix,
-    VueCronEditorBuefy
+    ConfigAlertZabbix
   },
 
   props: ['viewOnly'],
 
   data() {
     return {
-      enableLimitExcecution: false,
       visibleTabPane: '',
       rules: {
         alert: [
@@ -502,15 +480,6 @@ export default {
       }
     },
 
-    limitExcecution: {
-      get() {
-        return this.$store.state.config.alert.limitExcecution;
-      },
-      set(value) {
-        this.$store.commit('config/alert/UPDATE_LIMIT_EXCECUTION', value);
-      }
-    },
-
     realert: {
       get() {
         return this.$store.state.config.alert.realert || { minutes: 5 };
@@ -531,21 +500,9 @@ export default {
   },
 
   mounted() {
-    if (this.limitExcecution) {
-      this.enableLimitExcecution = true;
-    }
   },
 
   methods: {
-    changeLimitExcecution(val) {
-      if (val) {
-        this.enableLimitExcecution = true;
-      } else {
-        this.enableLimitExcecution = false;
-        this.limitExcecution = '';
-      }
-    },
-
     async validate() {
       try {
         this.$emit('validate', true);
diff --git a/src/components/config/alert/ConfigAlertMsTeams.vue b/src/components/config/alert/ConfigAlertMsTeams.vue
index e7400f3b..c5fcdef4 100644
--- a/src/components/config/alert/ConfigAlertMsTeams.vue
+++ b/src/components/config/alert/ConfigAlertMsTeams.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form-item label="Team webhook" prop="ms_teamsWebhookUrl" required>
-      <el-input id="ms_teamsWebhookUrl" v-model="ms_teamsWebhookUrl" :disabled="viewOnly" />
+      <el-input v-model="ms_teamsWebhookUrl" :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>
@@ -9,11 +9,11 @@
     </el-form-item>
 
     <el-form-item label="Color" prop="ms_teamsThemeColor" required>
-      <el-color-picker id="ms_teamsThemeColor" v-model="ms_teamsThemeColor" :disabled="viewOnly" />
+      <el-color-picker v-model="ms_teamsThemeColor" :disabled="viewOnly" />
     </el-form-item>
 
     <el-form-item label="Alert Summary" prop="ms_teamsAlertSummary" required>
-      <el-input id="ms_teamsAlertSummary" v-model="ms_teamsAlertSummary" :disabled="viewOnly" />
+      <el-input v-model="ms_teamsAlertSummary" :disabled="viewOnly" />
       <label>
         Summary should be configured according to MS documentation, although it seems not displayed by Teams currently.
       </label>
@@ -34,7 +34,7 @@
     </el-form-item>
 
     <el-form-item label="Proxy" prop="ms_teamsProxy">
-      <el-input id="ms_teamsProxy" v-model="ms_teamsProxy" :disabled="viewOnly" />
+      <el-input v-model="ms_teamsProxy" :disabled="viewOnly" />
       <label>
         By default ElastAlert 2 will not use a network proxy to send notifications to MS Teams.
         Set this option using hostname:port if you need to use a proxy.
@@ -44,6 +44,25 @@
 </template>
 
 <script>
+import validUrl from 'valid-url';
+
+let validateUrl = (rule, value, callback) => {
+  if (validUrl.isUri(value)) {
+    try {
+      let url = new URL(value);
+      if (['http:', 'https:'].includes(url.protocol)) {
+        callback();
+      } else {
+        callback(new Error('Invalid URL'));
+      }
+    } catch (error) {
+      callback(new Error('Invalid URL'));
+    }
+  } else {
+    callback(new Error('Invalid URL'));
+  }
+};
+
 export default {
   components: {
   },
@@ -53,6 +72,12 @@ export default {
   data() {
     return {
       rules: {
+        ms_teamsWebhookUrl: [
+          {
+            validator: validateUrl,
+            trigger: ['change', 'blur']
+          }
+        ]
       }
     };
   },
diff --git a/src/components/config/alert/ConfigAlertRocketChat.vue b/src/components/config/alert/ConfigAlertRocketChat.vue
index 53ee9810..5693b16b 100644
--- a/src/components/config/alert/ConfigAlertRocketChat.vue
+++ b/src/components/config/alert/ConfigAlertRocketChat.vue
@@ -19,10 +19,10 @@
       label="Icon"
       prop="rocketChatEmojiOverride">
       <picker
-        :emoji="rocketChatEmojiOverride || 'arrow_up'"
-        :title="rocketChatEmojiOverride || 'Pick your icon...'"
+        :emoji="rocketChatEmojiOverride"
+        :title="rocketChatEmojiOverride"
         color="#189acc"
-        @select="addEmoji" />
+        @select="addRocketChatEmoji" />
     </praeco-form-item>
 
     <el-form-item label="Message color" prop="rocketChatMsgColor" required>
@@ -258,6 +258,10 @@ export default {
   },
 
   methods: {
+    addRocketChatEmoji(value) {
+      this.rocketChatEmojiOverride = value.colons;
+    },
+
     changeRocketChatIgnoreSslErrors(val) {
       if (val) {
         this.rocketChatIgnoreSslErrors = true;
diff --git a/src/registration.js b/src/registration.js
index b01c2c62..beea9036 100644
--- a/src/registration.js
+++ b/src/registration.js
@@ -48,6 +48,7 @@ import ConfigDescription from '@/components/config/ConfigDescription.vue';
 import ConfigSettings from '@/components/config/ConfigSettings.vue';
 import ConfigCondition from '@/components/config/ConfigCondition.vue';
 import ConfigScanEntireTimeframe from '@/components/config/ConfigScanEntireTimeframe.vue';
+import ConfigLimitExcecution from '@/components/config/ConfigLimitExcecution.vue';
 
 Vue.component('Bulb', Bulb);
 Vue.component('DateTime', DateTime);
@@ -88,6 +89,7 @@ Vue.component('ConfigPriority', ConfigPriority);
 Vue.component('ConfigDescription', ConfigDescription);
 Vue.component('ConfigCondition', ConfigCondition);
 Vue.component('ConfigScanEntireTimeframe', ConfigScanEntireTimeframe);
+Vue.component('ConfigLimitExcecution', ConfigLimitExcecution);
 Vue.component('DefinitionTable', DefinitionTable);
 Vue.component('ElastalertTimePicker', ElastalertTimePicker);
 Vue.component('ESChart', ESChart);

From e569be078f56c83de2b5d883bedd1beb99df52cb Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Wed, 25 Aug 2021 01:16:47 +0900
Subject: [PATCH 5/6] 1.8.9

---
 package.json                  | 2 +-
 src/components/FolderTree.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9dfe5dd3..7f6bae4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "praeco",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/FolderTree.vue b/src/components/FolderTree.vue
index a38b3d00..b7f6e62e 100644
--- a/src/components/FolderTree.vue
+++ b/src/components/FolderTree.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import { loadChildrenOptions } from '@/lib/tree';
 import * as changeCase from 'change-case';
+import { loadChildrenOptions } from '@/lib/tree';
 
 export default {
   props: ['type'],

From fd5f7f91bce160ceb00b3dcca331ef3ac09d6533 Mon Sep 17 00:00:00 2001
From: nsano-rururu <nsano@ae.em-net.ne.jp>
Date: Wed, 25 Aug 2021 23:15:22 +0900
Subject: [PATCH 6/6] Update README

---
 README.md | 72 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 2196718b..57438f1f 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 <img align="left" src="https://user-images.githubusercontent.com/611996/52907999-50fca900-3232-11e9-8aee-40f7dc37ec65.jpg">
 
-**Praeco** is an alerting tool for Elasticsearch – a GUI for [Elastalert 2](https://github.com/jertel/elastalert2), using the [Elastalert API](https://github.com/johnsusek/elastalert-server).
+**Praeco** is an alerting tool for Elasticsearch – a GUI for [ElastAlert 2](https://github.com/jertel/elastalert2), using the [ElastAlert API](https://github.com/johnsusek/elastalert-server).
 
 - Interactively build alerts for your Elasticsearch data using a query builder
 - Preview results in an interactive chart
@@ -63,14 +63,14 @@ You may need to update your config files when a new version comes out. Please se
 
 ## Configuration
 
-Edit `rules/BaseRule.config`, `config/api.config.json`, `config/elastalert.yaml`, and/or `public/praeco.config.json` for advanced configuration options. See the [api docs](https://github.com/johnsusek/elastalert-server#configuration) and the [example Elastalert 2 config](https://github.com/jertel/elastalert/blob/alt/config.yaml.example) for more information.
+Edit `rules/BaseRule.config`, `config/api.config.json`, `config/elastalert.yaml`, and/or `public/praeco.config.json` for advanced configuration options. See the [api docs](https://github.com/johnsusek/elastalert-server#configuration) and the [example ElastAlert 2 config](https://github.com/jertel/elastalert/blob/alt/config.yaml.example) for more information.
 
-Any Elastalert 2 option you put into `rules/BaseRule.config` will be applied to every rule.
+Any ElastAlert 2 option you put into `rules/BaseRule.config` will be applied to every rule.
 
 The following config settings are available in praeco.config.json:
 
 ```
-// Link back to your praeco instance, used in Slack alerts
+// Link back to your Praeco instance, used in Slack alerts
 "appUrl": "http://praeco-app-url:8080",
 
 // A recordatus (https://github.com/johnsusek/recordatus) instance for javascript error reporting
@@ -85,13 +85,13 @@ The following config settings are available in praeco.config.json:
 
 [ElastAlert Server](https://hub.docker.com/r/praecoapp/elastalert-server)
 
-[praeco & elastalert server docker image relations table](https://github.com/johnsusek/praeco/wiki/praeco-&-elastalert-server-docker-image-relations-table)
+[Praeco & elastalert server docker image relations table](https://github.com/johnsusek/praeco/wiki/praeco-&-elastalert-server-docker-image-relations-table)
 
 [praecoapp/elastalert-server ChangeLog](https://github.com/johnsusek/elastalert-server/blob/master/DockerImageLog.md)
 
 ## FAQ
 
-#### Is there a sample to start elasticsearch, kibana, elastalert-server, praeco with docker-compose?
+#### Is there a sample to start elasticsearch, kibana, elastalert-server, Praeco with docker-compose?
 
 [docker compose sample(telegram)](https://github.com/johnsusek/praeco/wiki/docker-compose-sample(telegram))
 
@@ -99,7 +99,7 @@ The following config settings are available in praeco.config.json:
 
 👉 [ElastAlert 2 Alerts support status](https://github.com/johnsusek/praeco/wiki/ElastAlert-2-Alerts-support-status)
 
-#### Will elastalert-server / praeco be supported forever?
+#### Will elastalert-server / Praeco be supported forever?
 
 First of all, please understand that it is open source software.
 If you need generous support, please consider paid support software.
@@ -121,6 +121,26 @@ Not Support
 
 Not Support
 
+#### Does elastalert-server support Amazon Elasticsearch Service?
+
+Not Support
+
+#### Does elastalert-server support Elastic Cloud Cloud ID?
+
+Not Support
+
+#### Does elastalert-server support Elasticsearch ApiKey authentication connections?
+
+Not Support
+
+#### Does elastalert-server support Elasticsearch Bearer authentication connections?
+
+Not Support
+
+#### Does elastalert-server support Elasticsearch proxy connections?
+
+Not Support
+
 #### Mulit-elasticsearch instances
 
 Not Support
@@ -141,10 +161,10 @@ There are no plans to support this at this time.
 
 There are no plans to support this at this time.
 
-#### I can't send an email when I specify a gmail or office365 address in from_addr of Email. Is there a workaround?
+#### I can't send an email when I specify a gmail or Microsoft 365 address in from_addr of Email. Is there a workaround?
 
 - For Gmail, you need to set Allow insecure apps.
-- There is no workaround for office365.
+- There is no workaround for Microsoft 365.
 
 #### Is it possible to raise an alert only during a specific time period?
 
@@ -178,13 +198,17 @@ It can be set with Limit Excecution.
 [Praeco Helm Chart](https://github.com/daichi703n/praeco-helm)<br>
 [Installing Praeco (ElastAlert GUI) into Kubernetes with Helm](https://en-designetwork.daichi703n.com/entry/2020/02/24/praeco-helm-kubernetes)
 
-#### How do I connect to elasticsearch using SSL?
+#### How do I change ElastAlert 2 options, like SSL, user/pass, etc?
+
+Edit `config/elastalert.yaml` and uncomment the appropriate lines.
+
+#### [elastalert-server] How do I connect to elasticsearch using SSL?
 
 Edit `config/api.config.json` and set/add `"es_ssl": true`.<br>
 option `"es_ca_certs"`, `"es_client_cert"`, `"es_client_key"`.<br>
 [configuration](https://github.com/johnsusek/elastalert-server#configuration)
 
-#### How do I connect to elasticsearch with a username and password?
+#### [elastalert-server] How do I connect to elasticsearch with a username and password?
 
 Edit `es_username` and `es_password` in `config/api.config.json` and `config/elastalert.yaml`.
 
@@ -207,10 +231,6 @@ rewrite ^/my-path(/.*)$ $1 last;
 
 Edit `config/elastalert.yaml` and `config/api.config.json` and change the writeback_index values.
 
-#### How do I change elastalert 2 options, like SSL, user/pass, etc?
-
-Edit `config/elastalert.yaml` and uncomment the appropriate lines.
-
 #### How do I run this on Windows?
 
 First, install docker and docker-compose.
@@ -224,9 +244,9 @@ docker-compose.exe up
 
 Replace 1.2.3.4 with your Elasticsearch IP.
 
-#### Can I import my current elastalert 2 rules into praeco?
+#### Can I import my current ElastAlert 2 rules into praeco?
 
-Unfortunately this is not a possibility for two reasons. First, praeco only supports a subset of elastalert 2 features, so only certain rules would work. Second, praeco cannot automatically create the query builder ui from an arbitrary elastalert 2 `filter` entry, due to the potential complexity and combinations of filters someone can put in their rule file.
+Unfortunately this is not a possibility for two reasons. First, praeco only supports a subset of ElastAlert 2 features, so only certain rules would work. Second, praeco cannot automatically create the query builder ui from an arbitrary ElastAlert 2 `filter` entry, due to the potential complexity and combinations of filters someone can put in their rule file.
 
 #### Can I export my praeco rules into another elastalert  2 instance?
 
@@ -260,7 +280,7 @@ First of all, try to test your alert with varying time frames and see if that is
 
 If the test is returning results, but you are not receiving any alerts, check the error log. There may be a problem with your alerter settings. Make sure you edited rules/BaseRule.config and have correct values in there.
 
-If the test is not returning results, even though you think it should, try reading the [elastalert 2 docs](https://elastalert2.readthedocs.io/en/latest/ruletypes.html#rule-types) for your rule type. Compare the yaml from praeco with the options from the docs to make sure the rule is being created as expected. If praeco is generating the wrong yaml, please file an issue.
+If the test is not returning results, even though you think it should, try reading the [ElastAlert 2 docs](https://elastalert2.readthedocs.io/en/latest/ruletypes.html#rule-types) for your rule type. Compare the yaml from praeco with the options from the docs to make sure the rule is being created as expected. If praeco is generating the wrong yaml, please file an issue.
 
 #### Failed to establish a new connection: [Errno 111] Connection refused
 
@@ -376,25 +396,25 @@ Please see https://elastalert2.readthedocs.io/en/latest/ruletypes.html#jira for
 
 ![](https://user-images.githubusercontent.com/611996/52892144-90a19300-3155-11e9-8050-cb4a440411a4.png)
 
-Praeco is a vue.js app (hosted in an nginx docker container) that communicates with the [Elastalert API](https://github.com/johnsusek/elastalert-server) (running in another docker container) to view/edit rules.
-The elastalert api interacts with the included [Elastalert 2](https://github.com/jertel/elastalert2) python daemon directly for various tasks including testing and silencing rules, and indirectly by modifying or creating
+Praeco is a vue.js app (hosted in an nginx docker container) that communicates with the [ElastAlert API](https://github.com/johnsusek/elastalert-server) (running in another docker container) to view/edit rules.
+The elastalert api interacts with the included [ElastAlert 2](https://github.com/jertel/elastalert2) python daemon directly for various tasks including testing and silencing rules, and indirectly by modifying or creating
 rule files in the rules/ directory.
 
 When you run praeco using the quickstart instructions, it runs these two docker containers, per the docker-compose.yml file.
 
 Praeco uses a fork of the elastalert _api server_, which is why the docker image source is [johnsusek/elastalert-server](https://github.com/johnsusek/elastalert-server).
 
-NOTE: Only the _api server_ is a fork, the elastalert 2 daemon itself is built from the `master` branch whenever a new version of the `johnsusek/elastalert-server` docker image is created.
+NOTE: Only the _api server_ is a fork, the ElastAlert 2 daemon itself is built from the `master` branch whenever a new version of the `johnsusek/elastalert-server` docker image is created.
 
 Please see the development section below if you're interested in running these services separately.
 
 ## Manual/Dev installation
 
-NOTE: If you're just interested in developing Praeco UI features locally (and not changing elastalert 2 or the api), you can skip right to Praeco setup and just run the internal Elastalert server with `docker-compose up elastalert-server` .
+NOTE: If you're just interested in developing Praeco UI features locally (and not changing ElastAlert 2 or the api), you can skip right to Praeco setup and just run the internal Elastalert server with `docker-compose up elastalert-server` .
 
 ---
 
-First, you need a local copy of the elastalert api server running, which itself needs elastalert 2. Start by cloning the neccessary repos
+First, you need a local copy of the elastalert api server running, which itself needs ElastAlert 2. Start by cloning the neccessary repos
 
 ```sh
 $ cd
@@ -403,7 +423,7 @@ $ git clone https://github.com/johnsusek/elastalert-server.git
 $ git clone https://github.com/johnsusek/praeco.git
 ```
 
-### Setting up Elastalert 2
+### Setting up ElastAlert 2
 
 **Python Support version**
 
@@ -415,7 +435,7 @@ $ git clone https://github.com/johnsusek/praeco.git
 
 I think it works with 6.x, but I haven't confirmed the operation.
 
-Configure the elastalert 2 `config.yaml` with:
+Configure the ElastAlert 2 `config.yaml` with:
 - Your `es_host`
 - A unique `writeback_index`
 - Change the rules_folder to `rules`
@@ -434,7 +454,7 @@ vi config.yaml
 ### Setting up the API server
 
 Configure the api server `config.json` with:
-- An _absolute path_ to your elastalert 2 folder for `elastalertPath`
+- An _absolute path_ to your ElastAlert 2 folder for `elastalertPath`
 - The address of your elasticsearch instance for `es_host`
 - The same `writeback_index` from the config.yaml