diff --git a/src/app/default/data/ui/alerts/slack.html b/src/app/default/data/ui/alerts/slack.html index 4cd96ae..6c7c5bb 100644 --- a/src/app/default/data/ui/alerts/slack.html +++ b/src/app/default/data/ui/alerts/slack.html @@ -50,7 +50,10 @@
- You can override the Slack webhook URL here if you need to send the alert message to a different Slack team. + + You can override the Slack webhook URL here + if you need to send the alert message to a different Slack team. +

diff --git a/src/app/static/appIcon.png b/src/app/static/appIcon.png old mode 100755 new mode 100644 index df1edf9..f51c95b Binary files a/src/app/static/appIcon.png and b/src/app/static/appIcon.png differ diff --git a/src/app/static/appIcon_2x.png b/src/app/static/appIcon_2x.png index 9b62e4e..49b63b5 100755 Binary files a/src/app/static/appIcon_2x.png and b/src/app/static/appIcon_2x.png differ diff --git a/src/ui/pages/slack_alerts_setup/api.js b/src/ui/pages/slack_alerts_setup/api.js new file mode 100644 index 0000000..75caf88 --- /dev/null +++ b/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}`); + } + }); +} diff --git a/src/ui/pages/slack_alerts_setup/config.js b/src/ui/pages/slack_alerts_setup/config.js index 1f229ce..10bb7be 100644 --- a/src/ui/pages/slack_alerts_setup/config.js +++ b/src/ui/pages/slack_alerts_setup/config.js @@ -1,70 +1,10 @@ -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); @@ -72,7 +12,7 @@ export function useSlackConfig() { 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({ diff --git a/src/ui/pages/slack_alerts_setup/utils.js b/src/ui/pages/slack_alerts_setup/utils.js index 472fbc9..8ccc444 100644 --- a/src/ui/pages/slack_alerts_setup/utils.js +++ b/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]); +};