From a5ab18550e7eea0a6a7ed280e8ec9c45936cc3f5 Mon Sep 17 00:00:00 2001 From: Rishi Kumar <1720744+mrrishimeena@users.noreply.github.com> Date: Thu, 29 Aug 2024 13:57:51 +0530 Subject: [PATCH] refactor: handling url from alert msg --- lib/main/server/utils/alerts.js | 6 +- lib/web/src/components/ConsoleLogs.js | 119 ++++++++++++++++--------- lib/web/src/components/Integrations.js | 23 +++-- 3 files changed, 98 insertions(+), 50 deletions(-) diff --git a/lib/main/server/utils/alerts.js b/lib/main/server/utils/alerts.js index 05ee826..6fc6036 100644 --- a/lib/main/server/utils/alerts.js +++ b/lib/main/server/utils/alerts.js @@ -58,7 +58,7 @@ SlackService.sendAlert = async function (message, type, messageExtraInfo, errsol return false; // Slack integration is disabled } const webhookUrl = parsedValue.url; - const payload = blockKit(message, type, messageExtraInfo); + const payload = blockKit(message, type, messageExtraInfo, errsoleLogId); payload.username = parsedValue.username || 'Errsole'; payload.icon_url = parsedValue.icon_url || 'https://avatars.githubusercontent.com/u/84983840'; @@ -82,7 +82,7 @@ SlackService.sendAlert = async function (message, type, messageExtraInfo, errsol } }; -function blockKit (message, type, messageExtraInfo = {}) { +function blockKit (message, type, messageExtraInfo = {}, errsoleLogId) { const payload = { blocks: [] }; @@ -96,7 +96,7 @@ function blockKit (message, type, messageExtraInfo = {}) { if (messageExtraInfo.serverName) { payload.blocks.push({ type: 'rich_text', elements: [{ type: 'rich_text_section', elements: [{ type: 'text', text: 'Server Name: ', style: { bold: true } }, { type: 'text', text: messageExtraInfo.serverName }] }] }); } - payload.blocks.push({ type: 'rich_text', elements: [{ type: 'rich_text_preformatted', elements: [{ type: 'text', text: message }] }] }); + payload.blocks.push({ type: 'rich_text', elements: [{ type: 'rich_text_preformatted', elements: [{ type: 'text', text: message + ' - ' + errsoleLogId }] }] }); return payload; } diff --git a/lib/web/src/components/ConsoleLogs.js b/lib/web/src/components/ConsoleLogs.js index 434c37d..4214f54 100644 --- a/lib/web/src/components/ConsoleLogs.js +++ b/lib/web/src/components/ConsoleLogs.js @@ -42,11 +42,14 @@ class ConsoleLogs extends React.Component { const ConsoleLogs = this.props.currentConsoleLogs; let search = this.props.location.search; - let errsoleLogId = null; + let errsoleLogQueryId = null; + let errsoleLogQueryTimestamp = null; if (search !== '') { search = search.toLowerCase(); const qparams = new URLSearchParams(search); - errsoleLogId = qparams.get('errsole_log_id'); + errsoleLogQueryId = qparams.get('errsole_log_id'); + errsoleLogQueryTimestamp = qparams.get('timestamp'); + if (errsoleLogQueryId || errsoleLogQueryTimestamp) window.sessionStorage.removeItem('errsole-filter-details'); } this.state = { @@ -57,30 +60,23 @@ class ConsoleLogs extends React.Component { searchTime: null, selectedDatetime: null, searchTerms: [], - errsoleLogId, + errsoleLogQueryId, + errsoleLogQueryTimestamp, timezone: timezone || 'Local' }; } componentDidMount () { // set or update timezone - const filterDetailsFromSession = window.sessionStorage.getItem('errsole-filter-details'); - if (filterDetailsFromSession) { - const filterDetails = JSON.parse(filterDetailsFromSession); - filterDetails.timezone = this.state.timezone; - window.sessionStorage.setItem('errsole-filter-details', JSON.stringify(filterDetails)); - } else { - const filterDetails = {}; - filterDetails.timezone = this.state.timezone; - window.sessionStorage.setItem('errsole-filter-details', JSON.stringify(filterDetails)); - } + const filterDetails = JSON.parse(window.sessionStorage.getItem('errsole-filter-details')) || {}; + filterDetails.timezone = this.state.timezone; + window.sessionStorage.setItem('errsole-filter-details', JSON.stringify(filterDetails)); + // reupdate filters if revisit the page or component this.updateFilterState(); // get console logs setTimeout(() => { - if (this.state.currentConsoleLogs.length === 0 && this.state.errsoleLogId) { - this.getAlertLogs(null, 'componentReload'); - } else if (this.state.currentConsoleLogs.length === 0) { + if (this.state.currentConsoleLogs.length === 0) { this.getConsoleLogs(null, 'componentReload'); } }, 200); @@ -104,8 +100,39 @@ class ConsoleLogs extends React.Component { updateFilterState () { const filterDetailsFromSession = window.sessionStorage.getItem('errsole-filter-details'); - if (filterDetailsFromSession) { - const filterDetails = JSON.parse(filterDetailsFromSession); + const filterDetails = JSON.parse(filterDetailsFromSession); + // if query has errsole_log_id, set it in session and clean query from url + const errsoleLogQueryId = this.state.errsoleLogQueryId; + const errsoleLogQueryTimestamp = this.state.errsoleLogQueryTimestamp + ? this.state.errsoleLogQueryTimestamp.replace('t', 'T').replace('z', 'Z') + : null; + if (errsoleLogQueryId) { + if (!filterDetails.httpQuery) filterDetails.httpQuery = {}; + filterDetails.httpQuery.errsole_id = errsoleLogQueryId; + if (errsoleLogQueryTimestamp) { + // handle time and timezone + const timezone = this.state.timezone || 'Local'; + // Convert UTC timestamp based on the timezone state + let formattedDatetime; + if (timezone === 'UTC') { + formattedDatetime = moment.utc(errsoleLogQueryTimestamp).format('YYYY-MM-DD HH:mm:ss'); + } else { + const formattedLocalDatetime = moment.utc(errsoleLogQueryTimestamp).local(); + formattedDatetime = formattedLocalDatetime.format('YYYY-MM-DD HH:mm:ss'); + } + const [searchDate, searchTime] = formattedDatetime.split(' '); + filterDetails.search_date = searchDate; + filterDetails.search_time = searchTime; + filterDetails.httpQuery.lte_timestamp = errsoleLogQueryTimestamp; + } + window.sessionStorage.setItem('errsole-filter-details', JSON.stringify(filterDetails)); + // push url state + const url = new URL(window.location.href); + url.hash = '#/logs'; + url.search = ''; + window.history.pushState({}, '', url); + } + if (filterDetails) { // restore const timezone = filterDetails.timezone; const searchDate = filterDetails.search_date; @@ -126,6 +153,7 @@ class ConsoleLogs extends React.Component { } const levelJson = filterDetails?.httpQuery?.level_json; const hostnames = filterDetails?.httpQuery?.hostnames; + const errsoleLogId = filterDetails?.httpQuery?.errsole_id; let logsType = []; if (levelJson) { logsType = JSON.parse(levelJson).map(function (item) { @@ -138,15 +166,19 @@ class ConsoleLogs extends React.Component { }); logsType = logsType.concat(hostnameList); } + if (errsoleLogId) { + logsType = logsType.concat('errsolelogid.' + errsoleLogId); + } this.setState({ - logsType + logsType, + errsoleLogId }); - } else { + } else if (!errsoleLogQueryId) { this.setState({ logsType: ['console.errorLogs', 'errsole.alertLogs', 'errsole.errorLogs'] }); } - } else { + } else if (!errsoleLogQueryId) { this.setState({ logsType: ['console.errorLogs', 'errsole.alertLogs', 'errsole.errorLogs'] }); @@ -217,6 +249,8 @@ class ConsoleLogs extends React.Component { } else { delete query.hostnames; } + // errsole_id + query.errsole_id = this.getErrsoleIdFilters(logsType); } query.logOrder = queryRequest?.logOrder; @@ -248,14 +282,6 @@ class ConsoleLogs extends React.Component { this.getCurrentConsoleLogs(query); } - getAlertLogs () { - // http req - const query = { - errsole_id: this.state.errsoleLogId - }; - this.getCurrentConsoleLogs(query); - } - getCurrentConsoleLogs (query) { const self = this; const logOrder = query.logOrder; @@ -358,6 +384,20 @@ class ConsoleLogs extends React.Component { return result; } + getErrsoleIdFilters (filterList) { + const result = []; + filterList.forEach(list => { + if (list.startsWith('errsolelogid.')) { + const parts = list.split('errsolelogid.'); + if (parts.length === 2) { + const hostname = parts[1]; + result.push(hostname); + } + } + }); + return result; + } + combineLogs (newLogs, logOrder) { const oldLogs = this.state.currentConsoleLogs || []; let allLogs; @@ -502,12 +542,6 @@ class ConsoleLogs extends React.Component { apply () { const self = this; - if (this.state.errsoleLogId) { - const url = new URL(window.location.href); - url.hash = '#/logs'; - url.search = ''; - window.history.pushState({}, '', url); - } const searchDate = this.state.searchDate; const searchTime = this.state.searchTime; @@ -556,12 +590,6 @@ class ConsoleLogs extends React.Component { } reset () { - if (this.state.errsoleLogId) { - const url = new URL(window.location.href); - url.hash = '#/logs'; - url.search = ''; - window.history.pushState({}, '', url); - } this.setState({ logsType: [], selectedDatetime: null, @@ -683,7 +711,6 @@ class ConsoleLogs extends React.Component { render () { const logsType = this.state.logsType || []; - console.log(logsType); const consoleLogLoading = this.state.consoleLogLoading || false; const searchDate = this.state.searchDate; const searchTime = this.state.searchTime; @@ -698,6 +725,7 @@ class ConsoleLogs extends React.Component { const activeLogMeta = this.state.activeLogMeta || null; const metaModalStatus = this.state.metaModalStatus || false; const hostnames = this.state.hostnames || []; + const errsoleLogId = this.state.errsoleLogId; const renderConsoleLogs = () => { return currentConsoleLogs.map((log) => { @@ -776,6 +804,12 @@ class ConsoleLogs extends React.Component { }); }; + const showErrsoleLogId = () => { + if (errsoleLogId) { + return ; + } + }; + return (
@@ -800,6 +834,7 @@ class ConsoleLogs extends React.Component { {hostnames.length > 0 && showHostnames()} + {errsoleLogId && showErrsoleLogId()}
diff --git a/lib/web/src/components/Integrations.js b/lib/web/src/components/Integrations.js index b46bd2b..f06aa4d 100644 --- a/lib/web/src/components/Integrations.js +++ b/lib/web/src/components/Integrations.js @@ -39,6 +39,23 @@ class Integrations extends React.Component { this.getSlackDetails(); this.getEmailDetails(); this.getAllUsers(); + this.getAlertURL(); + } + + getAlertURL () { + // const self = this; + // this.props.appActions.getAlertURL(function (err, response) { + // if (!err && response) { + // const users = response.map((user) => { return user.attributes.url; }); + // self.setState({ + // allUsers: users + // }); + // } else { + // self.setState({ + // loadingStatus: false + // }); + // } + // }); } getAllUsers () { @@ -337,11 +354,7 @@ class Integrations extends React.Component {
} - {slackDetails && - <> Slack Integrated : Slack Notifications Paused} subTitle={slackStatus ? 'You will receive notifications for app downtime and custom alerts directly on Slack.' : 'You have paused Slack notifications for app downtime and custom alerts.'} extra={[, , ]} /> - URL -

This is URL format you will receive on Slack to view the log. If it's incorrect please update this

- } + {slackDetails && Slack Integrated : Slack Notifications Paused} subTitle={slackStatus ? 'You will receive notifications for app downtime and custom alerts directly on Slack.' : 'You have paused Slack notifications for app downtime and custom alerts.'} extra={[, , ]} />} Email} key='3'> {(!emailDetails || editEmailDetails) &&