[Slack] restructure alert actions, add 'visit site' button (#3886)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
Co-authored-by: Nelson Chan <3271800+chakflying@users.noreply.github.com>

server/notification-providers/slack.js

@@ -26,6 +26,93 @@ class Slack extends NotificationProvider {
         }
     }
 
+    /**
+     * Builds the actions available in the slack message
+     * @param {string} baseURL Uptime Kuma base URL
+     * @param {object} monitorJSON The monitor config
+     * @returns {Array} The relevant action objects
+     */
+    static buildActions(baseURL, monitorJSON) {
+        const actions = [];
+
+        if (baseURL) {
+            actions.push({
+                "type": "button",
+                "text": {
+                    "type": "plain_text",
+                    "text": "Visit Uptime Kuma",
+                },
+                "value": "Uptime-Kuma",
+                "url": baseURL + getMonitorRelativeURL(monitorJSON.id),
+            });
+
+        }
+
+        if (monitorJSON.url) {
+            actions.push({
+                "type": "button",
+                "text": {
+                    "type": "plain_text",
+                    "text": "Visit site",
+                },
+                "value": "Site",
+                "url": monitorJSON.url,
+            });
+        }
+
+        return actions;
+    }
+
+    /**
+     * Builds the different blocks the Slack message consists of.
+     * @param {string} baseURL Uptime Kuma base URL
+     * @param {object} monitorJSON The monitor object
+     * @param {object} heartbeatJSON The heartbeat object
+     * @param {string} title The message title
+     * @param {string} msg The message body
+     * @returns {Array<object>} The rich content blocks for the Slack message
+     */
+    static buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg) {
+
+        //create an array to dynamically add blocks
+        const blocks = [];
+
+        // the header block
+        blocks.push({
+            "type": "header",
+            "text": {
+                "type": "plain_text",
+                "text": title,
+            },
+        });
+
+        // the body block, containing the details
+        blocks.push({
+            "type": "section",
+            "fields": [
+                {
+                    "type": "mrkdwn",
+                    "text": "*Message*\n" + msg,
+                },
+                {
+                    "type": "mrkdwn",
+                    "text": `*Time (${heartbeatJSON["timezone"]})*\n${heartbeatJSON["localDateTime"]}`,
+                }
+            ],
+        });
+
+        const actions = this.buildActions(baseURL, monitorJSON);
+        if (actions.length > 0) {
+            //the actions block, containing buttons
+            blocks.push({
+                "type": "actions",
+                "elements": actions,
+            });
+        }
+
+        return blocks;
+    }
+
     /**
      * @inheritdoc
      */
@@ -48,35 +135,18 @@ class Slack extends NotificationProvider {
                 return okMsg;
             }
 
-            const textMsg = "Uptime Kuma Alert";
+            const baseURL = await setting("primaryBaseURL");
+
+            const title = "Uptime Kuma Alert";
             let data = {
-                "text": `${textMsg}\n${msg}`,
+                "text": `${title}\n${msg}`,
                 "channel": notification.slackchannel,
                 "username": notification.slackusername,
                 "icon_emoji": notification.slackiconemo,
                 "attachments": [
                     {
                         "color": (heartbeatJSON["status"] === UP) ? "#2eb886" : "#e01e5a",
-                        "blocks": [
+                        "blocks": Slack.buildBlocks(baseURL, monitorJSON, heartbeatJSON, title, msg),
-                            {
-                                "type": "header",
-                                "text": {
-                                    "type": "plain_text",
-                                    "text": textMsg,
-                                },
-                            },
-                            {
-                                "type": "section",
-                                "fields": [{
-                                    "type": "mrkdwn",
-                                    "text": "*Message*\n" + msg,
-                                },
-                                {
-                                    "type": "mrkdwn",
-                                    "text": `*Time (${heartbeatJSON["timezone"]})*\n${heartbeatJSON["localDateTime"]}`,
-                                }],
-                            }
-                        ],
                     }
                 ]
             };
@@ -85,26 +155,6 @@ class Slack extends NotificationProvider {
                 await Slack.deprecateURL(notification.slackbutton);
             }
 
-            const baseURL = await setting("primaryBaseURL");
-
-            // Button
-            if (baseURL) {
-                data.attachments.forEach(element => {
-                    element.blocks.push({
-                        "type": "actions",
-                        "elements": [{
-                            "type": "button",
-                            "text": {
-                                "type": "plain_text",
-                                "text": "Visit Uptime Kuma",
-                            },
-                            "value": "Uptime-Kuma",
-                            "url": baseURL + getMonitorRelativeURL(monitorJSON.id),
-                        }],
-                    });
-                });
-            }
-
             await axios.post(notification.slackwebhookURL, data);
             return okMsg;
         } catch (error) {