From a3af22acd7ea86bda622cfaea7eb0a76e4ec27e4 Mon Sep 17 00:00:00 2001 From: Nawaz Dhandala Date: Mon, 7 Feb 2022 18:19:50 +0000 Subject: [PATCH] break status page into multiple api's. --- .eslintrc.json | 4 +- backend/backend/api/statusPage.js | 266 +++++++++++++++++----- package-lock.json | 13 ++ package.json | 6 +- status-page/src/actions/status.js | 74 +++++- status-page/src/components/Main.js | 3 + status-page/src/components/NotesMain.js | 9 +- status-page/src/components/basic/Badge.js | 2 +- 8 files changed, 301 insertions(+), 76 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0f68abc8f6..163d919d81 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -17,7 +17,8 @@ }, "plugins": [ "react", - "jsx-a11y" + "jsx-a11y", + "progress" ], "extends": [ "eslint:recommended", @@ -46,6 +47,7 @@ "valid-typeof": "error", "no-func-assign": "error", "no-extra-semi": "error", + "progress/activate": 1, "linebreak-style": [ "error", "unix" diff --git a/backend/backend/api/statusPage.js b/backend/backend/api/statusPage.js index 12202fc6f8..7742e5cd66 100755 --- a/backend/backend/api/statusPage.js +++ b/backend/backend/api/statusPage.js @@ -2224,8 +2224,201 @@ function handleMonitorList(monitors) { } } -//load all status page resources -router.get('/resources/:statusPageSlug', checkUser, ipWhitelist, async function( + +router.get('/resources/:statusPageSlug/ongoing-events', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const ongoingEvents = await getOngoingScheduledEvents(req, statusPageSlug); + + return sendItemResponse(req, res, ongoingEvents); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/future-events', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const futureEvents = await getFutureEvents(req, statusPageSlug); + + return sendItemResponse(req, res, futureEvents); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/past-events', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const pastEvents = await getPastEvents(req, statusPageSlug); + + return sendItemResponse(req, res, pastEvents); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/probes', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const probes = await getProbes(req); + + return sendItemResponse(req, res, probes); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/monitor-logs', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const monitorLogs = await getMonitorLogs(req, statusPage.monitors); + + return sendItemResponse(req, res, monitorLogs); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/announcements', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const { _id: statusPageId, projectId } = statusPage; + + const announcements = await getAnnouncements(req, statusPageId, projectId); + + return sendItemResponse(req, res, announcements); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/announcement-logs', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const announcementLogs = await getAnnouncementLogs(statusPage); + + return sendItemResponse(req, res, announcementLogs); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/timelines', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const { _id: statusPageId, projectId } = statusPage; + + const timelines = await getMonitorTimelines(statusPageSlug); + + return sendItemResponse(req, res, timelines); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/notes', checkUser, ipWhitelist, async function( + req, + res +) { + try { + const { statusPageSlug } = req.params; + const response = {}; + //get status pages + const statusPage = await getStatusPage(req, statusPageSlug); + if (statusPage.error) { + return sendErrorResponse(req, res, statusPage.data); + } + + const statusPageNote = await getStatusPageNote(req, statusPageSlug, statusPage.theme); + + return sendItemResponse(req, res, statusPageNote); + } catch (error) { + return sendErrorResponse(req, res, error); + } +}); + +router.get('/resources/:statusPageSlug/monitor-statuses', checkUser, ipWhitelist, async function( req, res ) { @@ -2239,77 +2432,28 @@ router.get('/resources/:statusPageSlug', checkUser, ipWhitelist, async function( return sendErrorResponse(req, res, statusPage.data); } - const { _id: statusPageId, monitors, projectId } = statusPage; + const { monitors } = statusPage; - //get all resources. - const [ - ongoingEvents, - futureEvents, - pastEvents, - probes, - monitorLogs, - announcement, - monitorStatus, - timelines, - statusPageNote, - announcementLogs, - ] = await Promise.allSettled([ - //get ongoing events. - getOngoingScheduledEvents(req, statusPageSlug), + const monitorStatus = await getMonitorStatuses(req, monitors); - //get future events - getFutureEvents(req, statusPageSlug), - - //get past events. - getPastEvents(req, statusPageSlug), - - //get probes. - getProbes(req), - - getMonitorLogs(req, monitors), - - getAnnouncements(req, statusPageId, projectId), - - getMonitorStatuses(req, monitors), - - getMonitorTimelines(statusPageSlug), - - getStatusPageNote(req, statusPageSlug, statusPage.theme), - - getAnnouncementLogs(statusPage), - ]); - - response.ongoingEvents = ongoingEvents.value || {}; - - response.futureEvents = futureEvents.value || {}; - - response.pastEvents = pastEvents.value || {}; - - response.probes = probes.value || {}; - - response.monitorLogs = monitorLogs.value || {}; - - response.announcement = announcement.value || {}; - - response.monitorStatus = monitorStatus.value || {}; - - response.timelines = timelines.value || {}; - - response.statusPageNote = statusPageNote.value || {}; - - response.announcementLogs = announcementLogs.value || {}; + response.monitorStatus = monitorStatus || {}; statusPage.monitorsData.map(data => { data.statuses = response.monitorStatus[data._id]; return data; }); + response.statusPages = statusPage; + + const probes = await getProbes(req); + const time = await calculateTime( statusPage, - monitorStatus.value, - probes.value, + monitorStatus, + probes, range ); + response.time = time || {}; return sendItemResponse(req, res, response); } catch (error) { diff --git a/package-lock.json b/package-lock.json index 1be0e6a6e0..b3c98553c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "app", "version": "3.0.2", "license": "ISC", + "dependencies": { + "eslint-plugin-progress": "^0.0.1" + }, "devDependencies": { "@babel/core": "^7.10.2", "@babel/plugin-proposal-class-properties": "^7.10.1", @@ -1750,6 +1753,11 @@ } } }, + "node_modules/eslint-plugin-progress": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-progress/-/eslint-plugin-progress-0.0.1.tgz", + "integrity": "sha512-MAa+Nbw3uAHYKrt5ML2asiXCHdJ4ticANZC/KlfGO5Rck9oB+KhAXc+Zj4bLohci+EAE/3LbbcWyYm3kQuwJiQ==" + }, "node_modules/eslint-plugin-react": { "version": "7.22.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz", @@ -6480,6 +6488,11 @@ "prettier-linter-helpers": "^1.0.0" } }, + "eslint-plugin-progress": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-progress/-/eslint-plugin-progress-0.0.1.tgz", + "integrity": "sha512-MAa+Nbw3uAHYKrt5ML2asiXCHdJ4ticANZC/KlfGO5Rck9oB+KhAXc+Zj4bLohci+EAE/3LbbcWyYm3kQuwJiQ==" + }, "eslint-plugin-react": { "version": "7.22.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz", diff --git a/package.json b/package.json index b0147a807b..d8717d5725 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,15 @@ "version": "3.0.2", "description": "One Complete SRE and DevOps platform.", "main": "index.js", - "dependencies": {}, + "dependencies": { + "eslint-plugin-progress": "^0.0.1" + }, "devDependencies": { - "ejs-lint": "^1.2.1", "@babel/core": "^7.10.2", "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-private-methods": "^7.10.1", "babel-eslint": "^10.1.0", + "ejs-lint": "^1.2.1", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^6.10.0", diff --git a/status-page/src/actions/status.js b/status-page/src/actions/status.js index ae37985cad..d74908f305 100755 --- a/status-page/src/actions/status.js +++ b/status-page/src/actions/status.js @@ -66,9 +66,49 @@ export const getStatusPage = (statusPageSlug, url) => { // Calls the API to get all status page resources export const getAllStatusPageResource = (statusPageSlug, url, range) => { return function(dispatch) { - const promise = getApi( - `statusPage/resources/${statusPageSlug}?url=${url}&range=${range}` - ); + const promises = []; + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/ongoing-events?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/future-events?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/past-events?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/probes?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/monitor-logs?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/announcements?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/announcement-logs?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/timelines?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/notes?url=${url}&range=${range}` + )); + + promises.push(getApi( + `statusPage/resources/${statusPageSlug}/monitor-statuses?url=${url}&range=${range}` + )); + + dispatch(statusPageRequest()); dispatch(getAnnouncementsRequest()); dispatch(fetchMonitorStatusesRequest()); @@ -80,9 +120,21 @@ export const getAllStatusPageResource = (statusPageSlug, url, range) => { dispatch(ongoingEventRequest()); dispatch(futureEventsRequest()); dispatch(pastEventsRequest()); - promise.then( - Data => { - const data = Data.data; + + return Promise.all(promises).then( + ([ongoingEvents, futureEvents, pastEvents, probes, monitorLogs, announcement, announcementLogs, timelines, statusPageNote, monitorStatuses]) => { + const data = { + ongoingEvents: ongoingEvents.data, + futureEvents: futureEvents.data, + pastEvents: pastEvents.data, + probes: probes.data, + monitorLogs: monitorLogs.data, + announcement: announcement.data, + announcementLogs: announcementLogs.data, + timelines: timelines.data, + statusPageNote: statusPageNote.data, + ...monitorStatuses.data + }; dispatch(getAllStatusPageSuccess(data)); }, error => { @@ -94,22 +146,28 @@ export const getAllStatusPageResource = (statusPageSlug, url, range) => { ) { dispatch(loginRequired(statusPageSlug)); } - if (error && error.response && error.response.data) + + if (error && error.response && error.response.data){ error = error.response.data; + } + if (error && error.data) { error = error.data; } + if (error && error.message) { error = error.message; } + if (error.length > 100) { error = 'Network Error'; } + dispatch(statusPageFailure(errors(error))); dispatch(loginError(errors(error))); } ); - return promise; + }; }; diff --git a/status-page/src/components/Main.js b/status-page/src/components/Main.js index 7497e60bb2..643e835adc 100755 --- a/status-page/src/components/Main.js +++ b/status-page/src/components/Main.js @@ -79,6 +79,7 @@ const greyBackground = { }; class Main extends Component { + constructor(props) { super(props); @@ -1815,6 +1816,7 @@ const FooterCard = ({ Powered by OneUptime + Language +

diff --git a/status-page/src/components/NotesMain.js b/status-page/src/components/NotesMain.js index a3e5bcf260..1a19a40a33 100755 --- a/status-page/src/components/NotesMain.js +++ b/status-page/src/components/NotesMain.js @@ -9,6 +9,7 @@ import Markdown from 'markdown-to-jsx'; import Notes from './Notes'; import ShouldRender from './ShouldRender'; import SubscribeBox from './Subscribe/SubscribeBox'; + import { getStatusPageNote, getStatusPageIndividualNote, @@ -16,6 +17,7 @@ import { fetchLastIncidentTimelines, showIncidentCard, } from '../actions/status'; + import { openSubscribeMenu } from '../actions/subscribe'; import { capitalize } from '../config'; import Badge from './basic/Badge'; @@ -357,7 +359,7 @@ class NotesMain extends Component { } }) .map(message => ( - <> +
- +
+ ))} ) : ( @@ -434,7 +437,7 @@ class NotesMain extends Component { this.props.notesmessage ) : (
- No incident available + No incident available.
)} diff --git a/status-page/src/components/basic/Badge.js b/status-page/src/components/basic/Badge.js index 2ccd3cdcce..e6397706f5 100644 --- a/status-page/src/components/basic/Badge.js +++ b/status-page/src/components/basic/Badge.js @@ -9,7 +9,7 @@ function Badge({ ...props }) { const shadow = fontColor - ? { 'box-shadow': `inset 0 0 0 1px ${fontColor}` } + ? { 'boxShadow': `inset 0 0 0 1px ${fontColor}` } : {}; return (