Add mattermost_emoji_override

package.json

@@ -21,34 +21,34 @@
     "@fortawesome/free-brands-svg-icons": "6.2.0",
     "@fortawesome/free-regular-svg-icons": "6.2.0",
     "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@fortawesome/vue-fontawesome": "2.0.8",
+    "@fortawesome/vue-fontawesome": "2.0.9",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "1.1.3",
     "browser-bunyan": "1.8.0",
     "canvas": "^2.10.2",
     "change-case": "4.1.2",
     "comma-number": "2.1.0",
-    "core-js": "^3.26.0",
+    "core-js": "^3.26.1",
     "cron-ui": "1.0.3",
     "debounce": "1.2.1",
     "echarts": "^5.4.0",
     "element-ui": "2.15.10",
-    "emoji-mart-vue-fast": "^11.2.0",
+    "emoji-mart-vue-fast": "^12.0.1",
     "js-yaml": "4.1.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "4.4.2",
     "lodash.throttle": "4.1.1",
     "moment": "2.29.4",
-    "moment-timezone": "0.5.38",
+    "moment-timezone": "0.5.39",
     "normalize.css": "8.0.1",
     "prettycron": "0.10.0",
     "prismjs": "1.29.0",
-    "sass": "^1.56.0",
+    "sass": "^1.56.1",
     "sass-loader": "^10.1.0",
     "semver": "7.3.8",
     "string-format": "2.0.0",
     "validator": "^13.7.0",
-    "vue": "^2.7.13",
+    "vue": "^2.7.14",
     "vue-at": "2.5.0-beta.2",
     "vue-cron-editor-buefy": "^0.2.17",
     "vue-echarts": "6.2.3",
@@ -77,7 +77,7 @@
     "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.21.2",
     "babel-plugin-istanbul": "6.1.1",
-    "chai": "4.3.6",
+    "chai": "4.3.7",
     "coverage-istanbul-loader": "^3.0.5",
     "cross-env": "7.0.3",
     "cypress": "^10.11.0",
@@ -89,7 +89,7 @@
     "localstorage-polyfill": "1.0.1",
     "mutationobserver-simple-polyfill": "0.0.2",
     "nyc": "15.1.0",
-    "vue-template-compiler": "^2.7.13"
+    "vue-template-compiler": "^2.7.14"
   },
   "overrides": {
     "@vue/vue-loader-v15": "npm:vue-loader@^15.10.0"

src/components/config/alert/ConfigAlertMattermost.vue

@@ -13,6 +13,26 @@
       <label>This is the username that will appear in Mattermost for the alert</label>
     </praeco-form-item>
 
+    <div v-show="viewOnly">
+      <emoji
+        :data="emojiIndex"
+        :emoji="mattermostEmojiOverride"
+        :size="32"
+        :disabled="viewOnly" />
+    </div>
+    <div v-if="!viewOnly">
+      <picker
+        :disabled="viewOnly"
+        :data="emojiIndex"
+        color="#189acc"
+        @select="addMattermostEmoji" />
+      <emoji
+        :data="emojiIndex"
+        :emoji="mattermostEmojiOverride"
+        :size="32"
+        :disabled="viewOnly" />
+    </div>
+
     <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">
@@ -124,9 +144,22 @@
 </template>
 
 <script>
+import emojiData from 'emoji-mart-vue-fast/data/all.json';
+import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast';
+
+let emojiIndex = new EmojiIndex(emojiData);
+
 export default {
+  components: {
+    Emoji,
+    Picker
+  },
   props: ['viewOnly'],
-
+  data() {
+    return {
+      emojiIndex,
+    };
+  },
   computed: {
     mattermostChannelOverride: {
       get() {
@@ -149,6 +182,15 @@ export default {
       }
     },
 
+    mattermostEmojiOverride: {
+      get() {
+        return this.$store.state.config.alert.mattermostEmojiOverride;
+      },
+      set(value) {
+        this.$store.commit('config/alert/UPDATE_MATTERMOST_EMOJI_OVERRIDE', value);
+      }
+    },
+
     mattermostMsgColor: {
       get() {
         return this.$store.state.config.alert.mattermostMsgColor;
@@ -357,12 +399,41 @@ export default {
       } else {
         this.mattermostAttachKibanaDiscoverUrl = false;
       }
+    },
+
+    addMattermostEmoji(value) {
+      this.mattermostEmojiOverride = 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;
+  }
+}
 :not(.is-disabled) {
   &.mattermost-danger .el-radio__inner:hover {
     border-color: red;

src/store/config/alert.js

@@ -262,6 +262,7 @@ function initialState() {
     /* Mattermost */
     mattermostChannelOverride: '',
     mattermostUsernameOverride: 'Praeco',
+    mattermostEmojiOverride: ':ghost:',
     mattermostMsgColor: 'danger',
     mattermostIconUrlOverride: '',
     mattermostMsgPretext: '',
@@ -1282,6 +1283,10 @@ export default {
       state.mattermostUsernameOverride = mattermostUsernameOverride;
     },
 
+    UPDATE_MATTERMOST_EMOJI_OVERRIDE(state, mattermostEmojiOverride) {
+      state.mattermostEmojiOverride = mattermostEmojiOverride;
+    },
+
     UPDATE_MATTERMOST_MSG_COLOR(state, mattermostMsgColor) {
       state.mattermostMsgColor = mattermostMsgColor;
     },

src/store/config/index.js

@@ -683,6 +683,12 @@ export default {
           commit('alert/UPDATE_MATTERMOST_USERNAME_OVERRIDE', 'elastalert');
         }
 
+        if (config.mattermost_emoji_override) {
+          commit('alert/UPDATE_MATTERMOST_EMOJI_OVERRIDE', config.mattermost_emoji_override);
+        } else {
+          commit('alert/UPDATE_MATTERMOST_EMOJI_OVERRIDE', ':ghost:');
+        }
+
         if (config.mattermost_msg_color) {
           commit('alert/UPDATE_MATTERMOST_MSG_COLOR', config.mattermost_msg_color);
         } else {
@@ -2471,6 +2477,10 @@ export default {
         config.mattermost_username_override = state.alert.mattermostUsernameOverride;
       }
 
+      if (state.alert.mattermostEmojiOverride) {
+        config.mattermost_emoji_override = state.alert.mattermostEmojiOverride;
+      }
+
       if (state.alert.mattermostMsgColor) {
         config.mattermost_msg_color = state.alert.mattermostMsgColor;
       }

tests/unit/mockData/alert/ruleDataMattermost002.js

@@ -16,9 +16,9 @@ import: BaseRule.config
 index: hannibal-*
 is_enabled: false
 mattermost_channel_override: '#elastalert-debugging'
+mattermost_emoji_override: ':postal_horn:'
 mattermost_username_override: 'elastalert2'
 mattermost_msg_color: 'good'
-mattermost_icon_url_override: 'https://localhost/abc.png'
 mattermost_msg_pretext: 'abc'
 mattermost_ignore_ssl_errors: true
 mattermost_proxy: 'https://hostname:8080'

tests/unit/specs/alert/ConfigYamlMattermost.spec.js

@@ -30,6 +30,7 @@ is_enabled: false
 match_enhancements: []
 mattermost_attach_kibana_discover_url: false
 mattermost_channel_override: "#elastalert-debugging"
+mattermost_emoji_override: ":ghost:"
 mattermost_kibana_discover_color: "#ec4b98"
 mattermost_kibana_discover_title: "Discover in Kibana"
 mattermost_msg_color: "danger"

tests/unit/specs/alert/ConfigYamlMattermost002.spec.js

@@ -33,9 +33,9 @@ mattermost_author_icon: "author_icon"
 mattermost_author_link: "author_link"
 mattermost_author_name: "author_name"
 mattermost_channel_override: "#elastalert-debugging"
+mattermost_emoji_override: ":postal_horn:"
 mattermost_footer: "footer"
 mattermost_footer_icon: "footer_icon"
-mattermost_icon_url_override: "https://localhost/abc.png"
 mattermost_ignore_ssl_errors: true
 mattermost_image_url: "https://localhost/image.png"
 mattermost_kibana_discover_color: "#FFFFFFFF"