Merge pull request #3088 from chakflying/feat/webhook-custom-body

Feat: Custom request body for Webhook Notifications

package-lock.json

@@ -41,6 +41,7 @@
                 "jsonwebtoken": "~9.0.0",
                 "jwt-decode": "~3.1.2",
                 "limiter": "~2.1.0",
+                "liquidjs": "^10.7.0",
                 "mongodb": "~4.14.0",
                 "mqtt": "~4.3.7",
                 "mssql": "~8.1.4",
@@ -13139,6 +13140,33 @@
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
             "dev": true
         },
+        "node_modules/liquidjs": {
+            "version": "10.7.1",
+            "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.7.1.tgz",
+            "integrity": "sha512-tl9nWBZrrKcC61yfih3lbtSjAn+k7e0HhwydPjQKI4+metLk927HYBfXfbf6yrCcYjnBnLzk8xMjUF83yknAQQ==",
+            "dependencies": {
+                "commander": "^10.0.0"
+            },
+            "bin": {
+                "liquid": "bin/liquid.js",
+                "liquidjs": "bin/liquid.js"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/liquidjs"
+            }
+        },
+        "node_modules/liquidjs/node_modules/commander": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+            "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+            "engines": {
+                "node": ">=14"
+            }
+        },
         "node_modules/listr2": {
             "version": "3.14.0",
             "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",

package.json

@@ -100,6 +100,7 @@
         "jsonwebtoken": "~9.0.0",
         "jwt-decode": "~3.1.2",
         "limiter": "~2.1.0",
+        "liquidjs": "^10.7.0",
         "mongodb": "~4.14.0",
         "mqtt": "~4.3.7",
         "mssql": "~8.1.4",

server/notification-providers/webhook.js

@@ -1,6 +1,7 @@
 const NotificationProvider = require("./notification-provider");
 const axios = require("axios");
 const FormData = require("form-data");
+const { Liquid } = require("liquidjs");
 
 class Webhook extends NotificationProvider {
 
@@ -15,17 +16,27 @@ class Webhook extends NotificationProvider {
                 monitor: monitorJSON,
                 msg,
             };
-            let finalData;
             let config = {
                 headers: {}
             };
 
             if (notification.webhookContentType === "form-data") {
-                finalData = new FormData();
-                finalData.append("data", JSON.stringify(data));
-                config.headers = finalData.getHeaders();
-            } else {
-                finalData = data;
+                const formData = new FormData();
+                formData.append("data", JSON.stringify(data));
+                config.headers = formData.getHeaders();
+                data = formData;
+            } else if (notification.webhookContentType === "custom") {
+                // Initialize LiquidJS and parse the custom Body Template
+                const engine = new Liquid();
+                const tpl = engine.parse(notification.webhookCustomBody);
+
+                // Insert templated values into Body
+                data = await engine.render(tpl,
+                    {
+                        msg,
+                        heartbeatJSON,
+                        monitorJSON
+                    });
             }
 
             if (notification.webhookAdditionalHeaders) {
@@ -39,7 +50,7 @@ class Webhook extends NotificationProvider {
                 }
             }
 
-            await axios.post(notification.webhookURL, finalData, config);
+            await axios.post(notification.webhookURL, data, config);
             return okMsg;
 
         } catch (error) {

server/server.js

@@ -208,6 +208,7 @@ let needSetup = false;
     });
 
     if (isDev) {
+        app.use(express.urlencoded({ extended: true }));
         app.post("/test-webhook", async (request, response) => {
             log.debug("test", request.headers);
             log.debug("test", request.body);

src/components/notifications/Webhook.vue

@@ -12,61 +12,97 @@
     </div>
 
     <div class="mb-3">
-        <label for="webhook-content-type" class="form-label">{{
-            $t("Content Type")
+        <label for="webhook-request-body" class="form-label">{{
+            $t("Request Body")
         }}</label>
         <select
-            id="webhook-content-type"
+            id="webhook-request-body"
             v-model="$parent.notification.webhookContentType"
             class="form-select"
             required
         >
-            <option value="json">application/json</option>
-            <option value="form-data">multipart/form-data</option>
+            <option value="json">{{ $t("webhookBodyPresetOption", ["application/json"]) }}</option>
+            <option value="form-data">{{ $t("webhookBodyPresetOption", ["multipart/form-data"]) }}</option>
+            <option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
         </select>
 
         <div class="form-text">
+            <div v-if="$parent.notification.webhookContentType == 'json'">
                 <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
+            </div>
+            <div v-if="$parent.notification.webhookContentType == 'form-data'">
                 <i18n-t tag="p" keypath="webhookFormDataDesc">
-                <template #multipart>"multipart/form-data"</template>
+                    <template #multipart>multipart/form-data"</template>
                     <template #decodeFunction>
                         <strong>json_decode($_POST['data'])</strong>
                     </template>
                 </i18n-t>
             </div>
+            <div v-if="$parent.notification.webhookContentType == 'custom'">
+                <i18n-t tag="p" keypath="webhookCustomBodyDesc">
+                    <template #msg>
+                        <code>msg</code>
+                    </template>
+                    <template #heartbeat>
+                        <code>heartbeatJSON</code>
+                    </template>
+                    <template #monitor>
+                        <code>monitorJSON</code>
+                    </template>
+                </i18n-t>
+            </div>
+        </div>
+
+        <textarea
+            v-if="$parent.notification.webhookContentType == 'custom'"
+            id="customBody"
+            v-model="$parent.notification.webhookCustomBody"
+            class="form-control"
+            :placeholder="customBodyPlaceholder"
+        ></textarea>
     </div>
 
     <div class="mb-3">
-        <i18n-t
-            tag="label"
-            class="form-label"
-            for="additionalHeaders"
-            keypath="webhookAdditionalHeadersTitle"
-        >
-        </i18n-t>
+        <div class="form-check form-switch">
+            <input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
+        </div>
+        <div class="form-text">
+            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
+        </div>
         <textarea
+            v-if="showAdditionalHeadersField"
             id="additionalHeaders"
             v-model="$parent.notification.webhookAdditionalHeaders"
             class="form-control"
             :placeholder="headersPlaceholder"
         ></textarea>
-        <div class="form-text">
-            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
-        </div>
     </div>
 </template>
 
 <script>
 export default {
+    data() {
+        return {
+            showAdditionalHeadersField: this.$parent.notification.webhookAdditionalHeaders != null,
+        };
+    },
     computed: {
         headersPlaceholder() {
             return this.$t("Example:", [
                 `
 {
-    "HeaderName": "HeaderValue"
+    "Authorization": "Authorization Token"
 }`,
             ]);
         },
+        customBodyPlaceholder() {
+            return `Example:
+{
+    "Title": "Uptime Kuma Alert - {{ monitorJSON['name'] }}",
+    "Body": "{{ msg }}"
+}`;
+        }
     },
 };
 </script>

src/lang/en.json

@@ -196,8 +196,11 @@
     "Content Type": "Content Type",
     "webhookJsonDesc": "{0} is good for any modern HTTP servers such as Express.js",
     "webhookFormDataDesc": "{multipart} is good for PHP. The JSON will need to be parsed with {decodeFunction}",
+    "webhookCustomBodyDesc": "Define a custom HTTP Body for the request. Template variables {msg}, {heartbeat}, {monitor} are accepted.",
     "webhookAdditionalHeadersTitle": "Additional Headers",
-    "webhookAdditionalHeadersDesc": "Sets additional headers sent with the webhook.",
+    "webhookAdditionalHeadersDesc": "Sets additional headers sent with the webhook. Each header should be defined as a JSON key/value.",
+    "webhookBodyPresetOption": "Preset - {0}",
+    "webhookBodyCustomOption": "Custom Body",
     "Webhook URL": "Webhook URL",
     "Application Token": "Application Token",
     "Server URL": "Server URL",
@@ -757,5 +760,6 @@
     "Group": "Group",
     "Monitor Group": "Monitor Group",
     "noGroupMonitorMsg": "Not Available. Create a Group Monitor First.",
-    "Close": "Close"
+    "Close": "Close",
+    "Request Body": "Request Body"
 }