Refactor MS-Teams notification to use AdaptiveCards (#4538)

server/notification-providers/teams.js

@@ -1,6 +1,7 @@
 const NotificationProvider = require("./notification-provider");
 const axios = require("axios");
-const { DOWN, UP } = require("../../src/util");
+const { setting } = require("../util-server");
+const { DOWN, UP, getMonitorRelativeURL } = require("../../src/util");
 
 class Teams extends NotificationProvider {
     name = "teams";
@@ -9,89 +10,172 @@ class Teams extends NotificationProvider {
      * Generate the message to send
      * @param {const} status The status constant
      * @param {string} monitorName Name of monitor
+     * @param {boolean} withStatusSymbol If the status should be prepended as symbol
      * @returns {string} Status message
      */
-    _statusMessageFactory = (status, monitorName) => {
+    _statusMessageFactory = (status, monitorName, withStatusSymbol) => {
         if (status === DOWN) {
-            return `🔴 Application [${monitorName}] went down`;
+            return (withStatusSymbol ? "🔴 " : "") + `[${monitorName}] went down`;
         } else if (status === UP) {
-            return `✅ Application [${monitorName}] is back online`;
+            return (withStatusSymbol ? "✅ " : "") + `[${monitorName}] is back online`;
         }
         return "Notification";
     };
 
     /**
-     * Select theme color to use based on status
+     * Select the style to use based on status
      * @param {const} status The status constant
-     * @returns {string} Selected color in hex RGB format
+     * @returns {string} Selected style for adaptive cards
      */
-    _getThemeColor = (status) => {
+    _getStyle = (status) => {
         if (status === DOWN) {
-            return "ff0000";
+            return "attention";
         }
         if (status === UP) {
-            return "00e804";
+            return "good";
         }
-        return "008cff";
+        return "emphasis";
     };
 
     /**
      * Generate payload for notification
      * @param {object} args Method arguments
-     * @param {const} args.status The status of the monitor
+     * @param {object} args.heartbeatJSON Heartbeat details
-     * @param {string} args.monitorMessage Message to send
+     * @param {string} args.monitorName Name of the monitor affected
-     * @param {string} args.monitorName Name of monitor affected
+     * @param {string} args.monitorUrl URL of the monitor affected
-     * @param {string} args.monitorUrl URL of monitor affected
+     * @param {string} args.dashboardUrl URL of the dashboard affected
      * @returns {object} Notification payload
      */
     _notificationPayloadFactory = ({
-        status,
+        heartbeatJSON,
-        monitorMessage,
         monitorName,
         monitorUrl,
+        dashboardUrl,
     }) => {
-        const notificationMessage = this._statusMessageFactory(
+        const status = heartbeatJSON?.status;
-            status,
-            monitorName
-        );
-
         const facts = [];
+        const actions = [];
+
+        if (dashboardUrl) {
+            actions.push({
+                "type": "Action.OpenUrl",
+                "title": "Visit Uptime Kuma",
+                "url": dashboardUrl
+            });
+        }
+
+        if (heartbeatJSON?.msg) {
+            facts.push({
+                title: "Description",
+                value: heartbeatJSON.msg,
+            });
+        }
 
         if (monitorName) {
             facts.push({
-                name: "Monitor",
+                title: "Monitor",
                 value: monitorName,
             });
         }
 
         if (monitorUrl && monitorUrl !== "https://") {
             facts.push({
-                name: "URL",
+                title: "URL",
-                value: monitorUrl,
+                // format URL as markdown syntax, to be clickable
+                value: `[${monitorUrl}](${monitorUrl})`,
+            });
+            actions.push({
+                "type": "Action.OpenUrl",
+                "title": "Visit Monitor URL",
+                "url": monitorUrl
             });
         }
 
-        return {
+        if (heartbeatJSON?.localDateTime) {
-            "@context": "https://schema.org/extensions",
+            facts.push({
-            "@type": "MessageCard",
+                title: "Time",
-            themeColor: this._getThemeColor(status),
+                value: heartbeatJSON.localDateTime + (heartbeatJSON.timezone ? ` (${heartbeatJSON.timezone})` : ""),
-            summary: notificationMessage,
+            });
-            sections: [
+        }
+
+        const payload = {
+            "type": "message",
+            // message with status prefix as notification text
+            "summary": this._statusMessageFactory(status, monitorName, true),
+            "attachments": [
+                {
+                    "contentType": "application/vnd.microsoft.card.adaptive",
+                    "contentUrl": "",
+                    "content": {
+                        "type": "AdaptiveCard",
+                        "body": [
+                            {
+                                "type": "Container",
+                                "verticalContentAlignment": "Center",
+                                "items": [
+                                    {
+                                        "type": "ColumnSet",
+                                        "style": this._getStyle(status),
+                                        "columns": [
+                                            {
+                                                "type": "Column",
+                                                "width": "auto",
+                                                "verticalContentAlignment": "Center",
+                                                "items": [
                                                     {
-                    activityImage:
+                                                        "type": "Image",
-                        "https://raw.githubusercontent.com/louislam/uptime-kuma/master/public/icon.png",
+                                                        "width": "32px",
-                    activityTitle: "**Uptime Kuma**",
+                                                        "style": "Person",
+                                                        "url": "https://raw.githubusercontent.com/louislam/uptime-kuma/master/public/icon.png",
+                                                        "altText": "Uptime Kuma Logo"
+                                                    }
+                                                ]
                                             },
                                             {
-                    activityTitle: notificationMessage,
+                                                "type": "Column",
+                                                "width": "stretch",
+                                                "items": [
+                                                    {
+                                                        "type": "TextBlock",
+                                                        "size": "Medium",
+                                                        "weight": "Bolder",
+                                                        "text": `**${this._statusMessageFactory(status, monitorName, false)}**`,
                                                     },
                                                     {
-                    activityTitle: "**Description**",
+                                                        "type": "TextBlock",
-                    text: monitorMessage,
+                                                        "size": "Small",
-                    facts,
+                                                        "weight": "Default",
+                                                        "text": "Uptime Kuma Alert",
+                                                        "isSubtle": true,
+                                                        "spacing": "None"
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
                             },
+                            {
+                                "type": "FactSet",
+                                "separator": false,
+                                "facts": facts
+                            }
                         ],
+                        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+                        "version": "1.5"
+                    }
+                }
+            ]
         };
+
+        if (actions) {
+            payload.attachments[0].content.body.push({
+                "type": "ActionSet",
+                "actions": actions,
+            });
+        }
+
+        return payload;
     };
 
     /**
@@ -112,7 +196,9 @@ class Teams extends NotificationProvider {
      */
     _handleGeneralNotification = (webhookUrl, msg) => {
         const payload = this._notificationPayloadFactory({
-            monitorMessage: msg
+            heartbeatJSON: {
+                msg: msg
+            }
         });
 
         return this._sendNotification(webhookUrl, payload);
@@ -130,26 +216,32 @@ class Teams extends NotificationProvider {
                 return okMsg;
             }
 
-            let url;
+            let monitorUrl;
 
             switch (monitorJSON["type"]) {
                 case "http":
                 case "keywork":
-                    url = monitorJSON["url"];
+                    monitorUrl = monitorJSON["url"];
                     break;
                 case "docker":
-                    url = monitorJSON["docker_host"];
+                    monitorUrl = monitorJSON["docker_host"];
                     break;
                 default:
-                    url = monitorJSON["hostname"];
+                    monitorUrl = monitorJSON["hostname"];
                     break;
             }
 
+            const baseURL = await setting("primaryBaseURL");
+            let dashboardUrl;
+            if (baseURL) {
+                dashboardUrl = baseURL + getMonitorRelativeURL(monitorJSON.id);
+            }
+
             const payload = this._notificationPayloadFactory({
-                monitorMessage: heartbeatJSON.msg,
+                heartbeatJSON: heartbeatJSON,
                 monitorName: monitorJSON.name,
-                monitorUrl: url,
+                monitorUrl: monitorUrl,
-                status: heartbeatJSON.status,
+                dashboardUrl: dashboardUrl,
             });
 
             await this._sendNotification(notification.webhookUrl, payload);