Cosmetic changes

src/app/default/data/ui/alerts/slack.html

@@ -50,7 +50,10 @@
 
         <div class="controls">
             <input type="text" name="action.slack.param.webhook_url_override" id="slack_fields" placeholder="Optional" />
-            <span class="help-block">You can override the Slack webhook URL here if you need to send the alert message to a different Slack team.</span>            
+            <span class="help-block">
+                You can override the <a href="https://slack.com/apps/A0F7XDUAZ-incoming-webhooks" target="_blank" noreferer>Slack webhook URL</a> here
+                if you need to send the alert message to a different Slack team.
+            </span>
         </div>
     </div>
     <br clear="both" />

src/ui/pages/slack_alerts_setup/api.js

@@ -0,0 +1,44 @@
+import { getFormKey, makeUrl } from './utils';
+
+export function loadAlertActionConfig() {
+    return fetch(
+        makeUrl('/splunkd/__raw/servicesNS/-/-/alerts/alert_actions/slack?output_mode=json&_=' + Date.now())
+    )
+        .then((res) => {
+            if (!res.ok) {
+                throw new Error(`Failed to fetch config: HTTP status ${res.status}`);
+            }
+            return res.json();
+        })
+        .then((data) => {
+            const d = data.entry[0].content;
+            return {
+                webhook_url: d['param.webhook_url'],
+                from_user: d['param.from_user'],
+                from_user_icon: d['param.from_user_icon'],
+            };
+        });
+}
+
+export function updateAlertActionConfig(data) {
+    return fetch(
+        makeUrl(`/splunkd/__raw/servicesNS/-/slack_alerts/alerts/alert_actions/slack?output_mode=json`),
+        {
+            method: 'POST',
+            body: [
+                `param.webhook_url=${encodeURIComponent(data.webhook_url)}`,
+                `param.from_user=${encodeURIComponent(data.from_user)}`,
+                `param.from_user_icon=${encodeURIComponent(data.from_user_icon)}`,
+            ].join('&'),
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-Splunk-Form-Key': getFormKey(),
+            },
+        }
+    ).then((res) => {
+        if (!res.ok) {
+            throw new Error(`Failed to save: HTTP status ${res.status}`);
+        }
+    });
+}

src/ui/pages/slack_alerts_setup/config.js

@@ -1,78 +1,18 @@
-import { useState, useEffect, useCallback } from 'react';
-import { makeUrl } from './utils';
 import Toaster, { makeCreateToast } from '@splunk/react-toast-notifications/Toaster';
+import { useCallback, useEffect, useState } from 'react';
+import { loadAlertActionConfig, updateAlertActionConfig } from './api';
+import { eq, makeUrl } from './utils';
 
 const createToast = makeCreateToast(Toaster);
 
-function getFormKey() {
-    const prefix = `splunkweb_csrf_token_${window.$C.MRSPARKLE_PORT_NUMBER}=`;
-    if (document.cookie) {
-        for (const chunk of document.cookie.split(';')) {
-            const cookie = String(chunk).trim();
-            if (cookie.startsWith(prefix)) {
-                return decodeURIComponent(cookie.slice(prefix.length));
-            }
-        }
-    }
-}
-
-export function loadConfig() {
-    return fetch(
-        makeUrl('/splunkd/__raw/servicesNS/-/-/alerts/alert_actions/slack?output_mode=json&_=' + Date.now())
-    )
-        .then((res) => {
-            if (!res.ok) {
-                throw new Error(`Failed to fetch config: HTTP status ${res.status}`);
-            }
-            return res.json();
-        })
-        .then((data) => {
-            const d = data.entry[0].content;
-            return {
-                webhook_url: d['param.webhook_url'],
-                from_user: d['param.from_user'],
-                from_user_icon: d['param.from_user_icon'],
-            };
-        });
-}
-
-export function updateConfig(data) {
-    return fetch(
-        makeUrl(`/splunkd/__raw/servicesNS/-/slack_alerts/alerts/alert_actions/slack?output_mode=json`),
-        {
-            method: 'POST',
-            body: [
-                `param.webhook_url=${encodeURIComponent(data.webhook_url)}`,
-                `param.from_user=${encodeURIComponent(data.from_user)}`,
-                `param.from_user_icon=${encodeURIComponent(data.from_user_icon)}`,
-            ].join('&'),
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-Splunk-Form-Key': getFormKey(),
-            },
-        }
-    ).then((res) => {
-        if (!res.ok) {
-            throw new Error(`Failed to save: HTTP status ${res.status}`);
-        }
-    });
-}
-
-const eq = (a, b) => {
-    const ka = Object.keys(a);
-    const kb = Object.keys(b);
-    return ka.length === kb.length && ka.every((k) => k in b && a[k] === b[k]);
-};
-
 export function useSlackConfig() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [savedData, setSavedData] = useState({});
     const [data, setData] = useState({});
 
     useEffect(() => {
-        loadConfig().then(
+        loadAlertActionConfig().then(
             (cfg) => {
                 setSavedData(cfg);
                 setData(cfg);
@@ -94,7 +34,7 @@ export function useSlackConfig() {
 
     const save = useCallback(() => {
         if (!eq(savedData, data)) {
-            updateConfig(data).then(
+            updateAlertActionConfig(data).then(
                 () => {
                     setSavedData(data);
                     createToast({

src/ui/pages/slack_alerts_setup/utils.js

@@ -2,3 +2,21 @@ export function makeUrl(path) {
     const { LOCALE, MRSPARKLE_ROOT_PATH } = window.$C;
     return `${MRSPARKLE_ROOT_PATH || ''}/${LOCALE}${path}`;
 }
+
+function getFormKey() {
+    const prefix = `splunkweb_csrf_token_${window.$C.MRSPARKLE_PORT_NUMBER}=`;
+    if (document.cookie) {
+        for (const chunk of document.cookie.split(';')) {
+            const cookie = String(chunk).trim();
+            if (cookie.startsWith(prefix)) {
+                return decodeURIComponent(cookie.slice(prefix.length));
+            }
+        }
+    }
+}
+
+const eq = (a, b) => {
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    return ka.length === kb.length && ka.every((k) => k in b && a[k] === b[k]);
+};