feat(slack): Add option to include monitor group name in notifications (#6835)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

server/notification-providers/slack.js

@@ -75,9 +75,10 @@ class Slack extends NotificationProvider {
      * @param {object} heartbeatJSON The heartbeat object
      * @param {string} title The message title
      * @param {string} msg The message body
+     * @param {boolean} includeGroupName Whether to include group name in the message
      * @returns {Array<object>} The rich content blocks for the Slack message
      */
-    buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg) {
+    buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg, includeGroupName) {
         //create an array to dynamically add blocks
         const blocks = [];
 
@@ -91,17 +92,19 @@ class Slack extends NotificationProvider {
         });
 
         // Optional context line for monitor group path (excluding monitor name)
-        const groupPath = monitorJSON?.path?.length > 1 ? monitorJSON.path.slice(0, -1).join(" / ") : "";
-        if (groupPath) {
-            blocks.push({
-                type: "context",
-                elements: [
-                    {
-                        type: "mrkdwn",
-                        text: `_${groupPath}_`,
-                    },
-                ],
-            });
+        if (includeGroupName) {
+            const groupPath = monitorJSON?.path?.length > 1 ? monitorJSON.path.slice(0, -1).join(" / ") : "";
+            if (groupPath) {
+                blocks.push({
+                    type: "context",
+                    elements: [
+                        {
+                            type: "mrkdwn",
+                            text: `_${groupPath}_`,
+                        },
+                    ],
+                });
+            }
         }
 
         // the body block, containing the details
@@ -156,6 +159,31 @@ class Slack extends NotificationProvider {
 
             const baseURL = await setting("primaryBaseURL");
 
+            // Check if templating is enabled
+            if (notification.slackUseTemplate) {
+                const renderedText = await this.renderTemplate(
+                    notification.slackTemplate,
+                    msg,
+                    monitorJSON,
+                    heartbeatJSON
+                );
+
+                let data = {
+                    text: renderedText,
+                    channel: notification.slackchannel,
+                    username: notification.slackusername,
+                    icon_emoji: notification.slackiconemo,
+                };
+
+                await axios.post(notification.slackwebhookURL, data, config);
+                return okMsg;
+            }
+
+            const includeGroupName = notification.slackIncludeGroupName ?? true;
+
+            const groupPath =
+                includeGroupName && monitorJSON?.path?.length > 1 ? monitorJSON.path.slice(0, -1).join(" / ") : "";
+
             const title = monitorJSON?.name || "Uptime Kuma Alert";
             let data = {
                 text: msg,
@@ -168,10 +196,15 @@ class Slack extends NotificationProvider {
             if (notification.slackrichmessage) {
                 data.attachments.push({
                     color: heartbeatJSON["status"] === UP ? "#2eb886" : "#e01e5a",
-                    blocks: this.buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg),
+                    blocks: this.buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg, includeGroupName),
                 });
             } else {
-                data.text = `${title}\n${msg}`;
+                // Include group name in plain text messages if enabled
+                if (includeGroupName && groupPath) {
+                    data.text = `_${groupPath}_\n${title}\n${msg}`;
+                } else {
+                    data.text = `${title}\n${msg}`;
+                }
             }
 
             if (notification.slackbutton) {

src/components/notifications/Slack.vue

@@ -32,6 +32,43 @@
             <label for="slack-text-message" class="form-label">{{ $t("Send rich messages") }}</label>
         </div>
 
+        <div class="mb-3">
+            <div class="form-check form-switch">
+                <input
+                    id="slack-include-group-name"
+                    v-model="$parent.notification.slackIncludeGroupName"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+                <label for="slack-include-group-name" class="form-check-label">{{ $t("slackIncludeGroupName") }}</label>
+            </div>
+            <div class="form-text">
+                {{ $t("slackIncludeGroupNameDescription") }}
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <div class="form-check form-switch">
+                <input v-model="$parent.notification.slackUseTemplate" class="form-check-input" type="checkbox" />
+                <label class="form-check-label">{{ $t("slackUseTemplate") }}</label>
+            </div>
+            <div class="form-text">
+                {{ $t("slackUseTemplateDescription") }}
+            </div>
+        </div>
+
+        <template v-if="$parent.notification.slackUseTemplate">
+            <div class="mb-3">
+                <label class="form-label" for="slack-message-template">{{ $t("Message Template") }}</label>
+                <TemplatedTextarea
+                    id="slack-message-template"
+                    v-model="$parent.notification.slackTemplate"
+                    :required="true"
+                    :placeholder="slackTemplatedTextareaPlaceholder"
+                ></TemplatedTextarea>
+            </div>
+        </template>
+
         <div class="form-text">
             <span style="color: red"><sup>*</sup></span>
             {{ $t("Required") }}
@@ -67,3 +104,29 @@
         </div>
     </div>
 </template>
+
+<script>
+import TemplatedTextarea from "../TemplatedTextarea.vue";
+
+export default {
+    components: {
+        TemplatedTextarea,
+    },
+    computed: {
+        slackTemplatedTextareaPlaceholder() {
+            return this.$t("Example:", [
+                `
+Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}
+{% if monitorJSON and monitorJSON.path and monitorJSON.path.length > 1 %}_{{ monitorJSON.path.slice(0, -1).join(' / ') }}_\n{% endif %}
+{{ msg }}
+                `,
+            ]);
+        },
+    },
+    mounted() {
+        if (typeof this.$parent.notification.slackIncludeGroupName === "undefined") {
+            this.$parent.notification.slackIncludeGroupName = true;
+        }
+    },
+};
+</script>

src/lang/en.json

@@ -863,6 +863,10 @@
     "see Jira Cloud Docs": "see Jira Cloud Docs",
     "Jira Service Management": "Jira Service Management",
     "aboutSlackUsername": "Changes the display name of the message sender. If you want to mention someone, include it in the friendly name instead.",
+    "slackIncludeGroupName": "Include monitor group name",
+    "slackIncludeGroupNameDescription": "If enabled, the monitor group path will be included in notifications to help distinguish monitors with the same name across different groups.",
+    "slackUseTemplate": "Use custom message template",
+    "slackUseTemplateDescription": "If enabled, the message will be sent using a custom template. You can use Liquid templating to include monitor group information via monitorJSON.path or monitorJSON.pathName.",
     "aboutChannelName": "Enter the channel name on {0} Channel Name field if you want to bypass the Webhook channel. Ex: #other-channel",
     "aboutKumaURL": "If you leave the Uptime Kuma URL field blank, it will default to the Project GitHub page.",
     "smtpDkimSettings": "DKIM Settings",