From fa70ae655a1c6909a9389338f9c4189c174d7d46 Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 3 Jul 2024 20:07:45 -0700 Subject: [PATCH 01/13] Added path for details page for the monitors. --- Client/src/App.jsx | 5 +++++ Client/src/Pages/Details/index.css | 0 Client/src/Pages/Details/index.jsx | 9 +++++++++ 3 files changed, 14 insertions(+) create mode 100644 Client/src/Pages/Details/index.css create mode 100644 Client/src/Pages/Details/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 26f75cef8..a38084b7f 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -18,6 +18,7 @@ import CheckEmail from "./Pages/CheckEmail"; import SetNewPassword from "./Pages/SetNewPassword"; import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; +import Details from "./Pages/Details"; function App() { return ( @@ -41,6 +42,10 @@ function App() { path="incidents" element={} /> + } + /> } diff --git a/Client/src/Pages/Details/index.css b/Client/src/Pages/Details/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx new file mode 100644 index 000000000..5cb213db5 --- /dev/null +++ b/Client/src/Pages/Details/index.jsx @@ -0,0 +1,9 @@ +import './index.css' + +const Details = () => { + return ( +
details
+ ) +} + +export default Details \ No newline at end of file From 9789ea0887d2306204980af7495ad1e4a0bd12d3 Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 3 Jul 2024 20:17:28 -0700 Subject: [PATCH 02/13] Added history table. --- Client/src/Pages/Details/index.jsx | 115 +++++++++++++++++++++++++++-- 1 file changed, 109 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 5cb213db5..1a4332357 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -1,9 +1,112 @@ -import './index.css' +import { styled, useTheme } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import { StatusLabel } from "../../Components/Label/"; -const Details = () => { - return ( -
details
- ) +/** + * Creates a styled TableCell component. + * @param {object} theme - The theme object. + * @returns {JSX.Element} The styled TableCell component. + */ +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.action.hover, + color: theme.palette.common.black, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + }, +})); + +/** + * Creates a styled TableRow component. + * @param {object} theme - The theme object. + * @returns {JSX.Element} The styled TableRow component. + */ +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + '&:nth-of-type(even)': { + backgroundColor: theme.palette.common.white, + }, + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +/** + * Creates a data object for the table row. + * @param {JSX.Element} name - The status label JSX element. + * @param {string} date - The date and time string. + * @param {string} message - The message string. + * @returns {object} The data object containing name, date, and message. + */ +function createData(name, date, message) { + return { name, date, message }; } -export default Details \ No newline at end of file +/** + * Customized table component displaying incident history. + * @returns {JSX.Element} The JSX element representing the customized table. + */ +export default function CustomizedTables() { + const theme = useTheme(); + + const rows = [ + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + ]; + + return ( + + + + Incident History + + + + + + + Status + Date & Time + Message + + + + {rows.map((row, index) => ( + + + {row.name} + + {row.date} + {row.message} + + ))} + +
+ + + ); +} From f020f4be89018d5c8592c40daf4bf02811d4e4df Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 3 Jul 2024 20:19:30 -0700 Subject: [PATCH 03/13] Changed name of the table to match the figma design. --- Client/src/Pages/Details/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 1a4332357..aee82db55 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -82,7 +82,7 @@ export default function CustomizedTables() { > - Incident History + History From 4d8d529f452bf71c3cc570a1efe79b126c008a8e Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 3 Jul 2024 20:42:39 -0700 Subject: [PATCH 04/13] Added the 4 boxes at the top. --- Client/src/Pages/Details/index.jsx | 44 ++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index aee82db55..a3061cbe2 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -80,6 +80,50 @@ export default function CustomizedTables() { }, }} > + + {[...Array(4)].map((_, index) => ( + + + Currently up for + + + 4h 30m 2s + + + ))} + History From 41850b18c0d098258c82b396430849d6d472360f Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 5 Jul 2024 19:51:07 -0700 Subject: [PATCH 05/13] Setup component with actual props. --- Client/src/Pages/Details/index.jsx | 53 +++++++++++++----------------- 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index a3061cbe2..75ceab09e 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -9,12 +9,9 @@ import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { StatusLabel } from "../../Components/Label/"; +import PropTypes from 'prop-types'; -/** - * Creates a styled TableCell component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableCell component. - */ +// Styled components const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.action.hover, @@ -25,11 +22,6 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ }, })); -/** - * Creates a styled TableRow component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableRow component. - */ const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover, @@ -42,31 +34,18 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ }, })); -/** - * Creates a data object for the table row. - * @param {JSX.Element} name - The status label JSX element. - * @param {string} date - The date and time string. - * @param {string} message - The message string. - * @returns {object} The data object containing name, date, and message. - */ function createData(name, date, message) { return { name, date, message }; } -/** - * Customized table component displaying incident history. - * @returns {JSX.Element} The JSX element representing the customized table. - */ -export default function CustomizedTables() { +const CustomizedTables = ({ monitor }) => { const theme = useTheme(); - const rows = [ - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - ]; + const rows = monitor.checks.map(check => createData( + , + new Date(check.createdAt).toLocaleString(), + `HTTP ${check.statusCode} - ${check.status ? 'OK' : 'NOK'}` + )); return ( ); -} +}; + +CustomizedTables.propTypes = { + monitor: PropTypes.shape({ + checks: PropTypes.arrayOf( + PropTypes.shape({ + status: PropTypes.bool.isRequired, + createdAt: PropTypes.string.isRequired, + statusCode: PropTypes.number.isRequired, + }) + ).isRequired, + }).isRequired, +}; + +export default CustomizedTables; From 149bec23eb573158cee07e6e876b973cc1f8c761 Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 5 Jul 2024 20:32:54 -0700 Subject: [PATCH 06/13] Fixed rendering issues when no monitor data is displayed. --- Client/src/Pages/Details/index.jsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 75ceab09e..0ccea222d 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -11,7 +11,6 @@ import Typography from '@mui/material/Typography'; import { StatusLabel } from "../../Components/Label/"; import PropTypes from 'prop-types'; -// Styled components const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.action.hover, @@ -41,11 +40,11 @@ function createData(name, date, message) { const CustomizedTables = ({ monitor }) => { const theme = useTheme(); - const rows = monitor.checks.map(check => createData( + const rows = (monitor && monitor.checks) ? monitor.checks.map(check => createData( , new Date(check.createdAt).toLocaleString(), `HTTP ${check.statusCode} - ${check.status ? 'OK' : 'NOK'}` - )); + )) : []; return ( Date: Fri, 5 Jul 2024 20:37:22 -0700 Subject: [PATCH 07/13] Got rid of index key. --- Client/src/Pages/Details/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 0ccea222d..2630d5671 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -117,8 +117,8 @@ const CustomizedTables = ({ monitor }) => { - {rows.map((row, index) => ( - + {rows.map((row) => ( + {row.name} From 1e49e385f03f64a78623f8e4d090792f8d287869 Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 5 Jul 2024 21:08:06 -0700 Subject: [PATCH 08/13] Populated the details page table with dummy data. --- .../src/Components/CustomizedTables/index.css | 0 .../src/Components/CustomizedTables/index.jsx | 152 ++++++++++++++ Client/src/Pages/Details/index.jsx | 190 ++++-------------- 3 files changed, 196 insertions(+), 146 deletions(-) create mode 100644 Client/src/Components/CustomizedTables/index.css create mode 100644 Client/src/Components/CustomizedTables/index.jsx diff --git a/Client/src/Components/CustomizedTables/index.css b/Client/src/Components/CustomizedTables/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Components/CustomizedTables/index.jsx b/Client/src/Components/CustomizedTables/index.jsx new file mode 100644 index 000000000..2630d5671 --- /dev/null +++ b/Client/src/Components/CustomizedTables/index.jsx @@ -0,0 +1,152 @@ +import { styled, useTheme } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import { StatusLabel } from "../../Components/Label/"; +import PropTypes from 'prop-types'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.action.hover, + color: theme.palette.common.black, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + }, +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + '&:nth-of-type(even)': { + backgroundColor: theme.palette.common.white, + }, + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +function createData(name, date, message) { + return { name, date, message }; +} + +const CustomizedTables = ({ monitor }) => { + const theme = useTheme(); + + const rows = (monitor && monitor.checks) ? monitor.checks.map(check => createData( + , + new Date(check.createdAt).toLocaleString(), + `HTTP ${check.statusCode} - ${check.status ? 'OK' : 'NOK'}` + )) : []; + + return ( + + + {[...Array(4)].map((_, index) => ( + + + Currently up for + + + 4h 30m 2s + + + ))} + + + + History + + + + + + + Status + Date & Time + Message + + + + {rows.map((row) => ( + + + {row.name} + + {row.date} + {row.message} + + ))} + +
+ + + ); +}; + +CustomizedTables.propTypes = { + monitor: PropTypes.shape({ + checks: PropTypes.arrayOf( + PropTypes.shape({ + status: PropTypes.bool.isRequired, + createdAt: PropTypes.string.isRequired, + statusCode: PropTypes.number.isRequired, + }) + ), + }), +}; + +CustomizedTables.defaultProps = { + monitor: { checks: [] }, +}; + +export default CustomizedTables; diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 2630d5671..3cf527ac1 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -1,152 +1,50 @@ -import { styled, useTheme } from '@mui/material/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { StatusLabel } from "../../Components/Label/"; -import PropTypes from 'prop-types'; +import CustomizedTables from '../../Components/CustomizedTables'; -const StyledTableCell = styled(TableCell)(({ theme }) => ({ - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.action.hover, - color: theme.palette.common.black, - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14, - }, -})); - -const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.hover, - }, - '&:nth-of-type(even)': { - backgroundColor: theme.palette.common.white, - }, - '&:last-child td, &:last-child th': { - border: 0, - }, -})); - -function createData(name, date, message) { - return { name, date, message }; -} - -const CustomizedTables = ({ monitor }) => { - const theme = useTheme(); - - const rows = (monitor && monitor.checks) ? monitor.checks.map(check => createData( - , - new Date(check.createdAt).toLocaleString(), - `HTTP ${check.statusCode} - ${check.status ? 'OK' : 'NOK'}` - )) : []; +const DetailsPage = () => { + const monitorData = { + "_id": "66863aa2437936b46e225d1f", + "userId": "66863a8f437936b46e225d1a", + "name": "Google", + "description": "Google", + "status": false, + "type": "http", + "url": "https://www.google.com/404", + "isActive": true, + "interval": 60000, + "createdAt": "2024-07-04T06:01:06.527Z", + "updatedAt": "2024-07-04T06:02:00.250Z", + "__v": 0, + "checks": [ + { + "_id": "66863ad8437936b46e225d6d", + "monitorId": "66863aa2437936b46e225d1f", + "status": false, + "responseTime": 144, + "expiry": "2024-07-04T06:02:00.247Z", + "statusCode": 404, + "createdAt": "2024-07-04T06:02:00.248Z", + "updatedAt": "2024-07-04T06:02:00.248Z", + "__v": 0 + }, + { + "_id": "66863b14437936b46e225d79", + "monitorId": "66863aa2437936b46e225d1f", + "status": false, + "responseTime": 140, + "expiry": "2024-07-04T06:03:00.167Z", + "statusCode": 404, + "createdAt": "2024-07-04T06:03:00.168Z", + "updatedAt": "2024-07-04T06:03:00.168Z", + "__v": 0 + } + ] + }; return ( - - - {[...Array(4)].map((_, index) => ( - - - Currently up for - - - 4h 30m 2s - - - ))} - - - - History - - - - - - - Status - Date & Time - Message - - - - {rows.map((row) => ( - - - {row.name} - - {row.date} - {row.message} - - ))} - -
- - +
+ +
); }; -CustomizedTables.propTypes = { - monitor: PropTypes.shape({ - checks: PropTypes.arrayOf( - PropTypes.shape({ - status: PropTypes.bool.isRequired, - createdAt: PropTypes.string.isRequired, - statusCode: PropTypes.number.isRequired, - }) - ), - }), -}; - -CustomizedTables.defaultProps = { - monitor: { checks: [] }, -}; - -export default CustomizedTables; +export default DetailsPage; From cf447beb416339a1a02b20a7aa63d6360b646e9f Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 5 Jul 2024 21:21:57 -0700 Subject: [PATCH 09/13] Added some functions to get the ball rolling on how we will tackle populating the table with the correct values. --- Client/src/Pages/Details/index.jsx | 90 +++++++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 3cf527ac1..59b47a5af 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -1,6 +1,10 @@ +import React from 'react'; import CustomizedTables from '../../Components/CustomizedTables'; +import { Box, Typography, useTheme } from '@mui/material'; const DetailsPage = () => { + const theme = useTheme(); + const monitorData = { "_id": "66863aa2437936b46e225d1f", "userId": "66863a8f437936b46e225d1a", @@ -40,10 +44,92 @@ const DetailsPage = () => { ] }; + const calculateUptimeDuration = (checks) => { + if (!checks || checks.length === 0) { + return 'N/A'; + } + + checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); + + const mostRecentCheck = checks[0]; + const currentTime = new Date(); + const lastCheckedTime = new Date(mostRecentCheck.createdAt); + let uptimeDuration = currentTime - lastCheckedTime; + + let uptimeHours = Math.floor(uptimeDuration / (1000 * 60 * 60)); + uptimeDuration %= (1000 * 60 * 60); + let uptimeMinutes = Math.floor(uptimeDuration / (1000 * 60)); + uptimeDuration %= (1000 * 60); + let uptimeSeconds = Math.floor(uptimeDuration / 1000); + + return `${uptimeHours}h ${uptimeMinutes}m ${uptimeSeconds}s`; + }; + + const getLastCheckedTimestamp = (checks) => { + if (!checks || checks.length === 0) { + return 'N/A'; + } + + checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); + + const mostRecentCheck = checks[0]; + return new Date(mostRecentCheck.createdAt).toLocaleString(); + }; + + const countIncidents = (checks) => { + if (!checks || checks.length === 0) { + return 0; + } + + const incidentCount = checks.filter(check => !check.status).length; + return incidentCount; + }; + return ( -
+ -
+ + + Up for: {calculateUptimeDuration(monitorData.checks)} + + + + Last checked: {getLastCheckedTimestamp(monitorData.checks)} + + + + Incidents: {countIncidents(monitorData.checks)} + + ); }; From 88045972215e7de4b6798324d0644e07b69ca23c Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 5 Jul 2024 21:24:59 -0700 Subject: [PATCH 10/13] Added JSDocs. --- Client/src/Pages/Details/index.jsx | 32 ++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 59b47a5af..c26bbb1c5 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -2,9 +2,14 @@ import React from 'react'; import CustomizedTables from '../../Components/CustomizedTables'; import { Box, Typography, useTheme } from '@mui/material'; +/** + * Details page component displaying monitor details and related information. + * @component + */ const DetailsPage = () => { const theme = useTheme(); + // Example monitor data (replace with actual data or fetch from API) const monitorData = { "_id": "66863aa2437936b46e225d1f", "userId": "66863a8f437936b46e225d1a", @@ -44,11 +49,17 @@ const DetailsPage = () => { ] }; + /** + * Function to calculate uptime duration based on the most recent check. + * @param {Array} checks Array of check objects. + * @returns {string} Uptime duration in hours, minutes, and seconds. + */ const calculateUptimeDuration = (checks) => { if (!checks || checks.length === 0) { return 'N/A'; } + // Sort checks by createdAt descending to get the most recent check first checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); const mostRecentCheck = checks[0]; @@ -56,6 +67,7 @@ const DetailsPage = () => { const lastCheckedTime = new Date(mostRecentCheck.createdAt); let uptimeDuration = currentTime - lastCheckedTime; + // Calculate hours, minutes, and seconds from uptime duration let uptimeHours = Math.floor(uptimeDuration / (1000 * 60 * 60)); uptimeDuration %= (1000 * 60 * 60); let uptimeMinutes = Math.floor(uptimeDuration / (1000 * 60)); @@ -65,30 +77,44 @@ const DetailsPage = () => { return `${uptimeHours}h ${uptimeMinutes}m ${uptimeSeconds}s`; }; + /** + * Helper function to get timestamp of the most recent check. + * @param {Array} checks Array of check objects. + * @returns {string} Timestamp of the most recent check. + */ const getLastCheckedTimestamp = (checks) => { if (!checks || checks.length === 0) { - return 'N/A'; + return 'N/A'; // Handle case when no checks are available } + // Sort checks by createdAt descending to get the most recent check first checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); const mostRecentCheck = checks[0]; return new Date(mostRecentCheck.createdAt).toLocaleString(); }; + /** + * Helper function to count incidents (checks with status === false). + * @param {Array} checks Array of check objects. + * @returns {number} Number of incidents. + */ const countIncidents = (checks) => { if (!checks || checks.length === 0) { - return 0; + return 0; // Handle case when no checks are available } + // Count checks with status === false const incidentCount = checks.filter(check => !check.status).length; return incidentCount; }; return ( + {/* Customized Tables Component */} + {/* Uptime duration */} { Up for: {calculateUptimeDuration(monitorData.checks)} + {/* Last checked */} { Last checked: {getLastCheckedTimestamp(monitorData.checks)} + {/* Incidents */} Date: Tue, 9 Jul 2024 17:32:24 -0700 Subject: [PATCH 11/13] Fixed conflicts. --- Client/src/App.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index fd2f62eda..a6581ad81 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -18,11 +18,9 @@ import CheckEmail from "./Pages/CheckEmail"; import SetNewPassword from "./Pages/SetNewPassword"; import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; -<<<<<<< HEAD import Details from "./Pages/Details"; -======= import Maintenance from "./Pages/Maintenance"; ->>>>>>> upstream/master + function App() { return ( From 5481d3f161367bb5f12837c683aae3a23bf7a910 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 9 Jul 2024 17:35:00 -0700 Subject: [PATCH 12/13] Updated fx's with comments to revisit. --- Client/src/Pages/Details/index.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index c26bbb1c5..55532a7af 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -53,6 +53,7 @@ const DetailsPage = () => { * Function to calculate uptime duration based on the most recent check. * @param {Array} checks Array of check objects. * @returns {string} Uptime duration in hours, minutes, and seconds. + * TODO - NEED TO REVISIT THIS FOR PROPER LOGIC. */ const calculateUptimeDuration = (checks) => { if (!checks || checks.length === 0) { @@ -68,6 +69,7 @@ const DetailsPage = () => { let uptimeDuration = currentTime - lastCheckedTime; // Calculate hours, minutes, and seconds from uptime duration + // TODO - NEED TO REVISIT THIS FOR PROPER LOGIC. let uptimeHours = Math.floor(uptimeDuration / (1000 * 60 * 60)); uptimeDuration %= (1000 * 60 * 60); let uptimeMinutes = Math.floor(uptimeDuration / (1000 * 60)); @@ -81,6 +83,7 @@ const DetailsPage = () => { * Helper function to get timestamp of the most recent check. * @param {Array} checks Array of check objects. * @returns {string} Timestamp of the most recent check. + * TODO - NEED TO REVISIT THIS FOR PROPER LOGIC. */ const getLastCheckedTimestamp = (checks) => { if (!checks || checks.length === 0) { @@ -98,6 +101,7 @@ const DetailsPage = () => { * Helper function to count incidents (checks with status === false). * @param {Array} checks Array of check objects. * @returns {number} Number of incidents. + * TODO - NEED TO REVISIT THIS FOR PROPER LOGIC. */ const countIncidents = (checks) => { if (!checks || checks.length === 0) { @@ -105,6 +109,7 @@ const DetailsPage = () => { } // Count checks with status === false + // TODO - NEED TO REVISIT THIS FOR PROPER LOGIC. const incidentCount = checks.filter(check => !check.status).length; return incidentCount; }; From 22f111cc66be1d4bb31a47d876fde2bd472d7a14 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 9 Jul 2024 17:36:07 -0700 Subject: [PATCH 13/13] Got rid of sorting fx's since checks will come sorted from the backend. --- Client/src/Pages/Details/index.jsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index 55532a7af..c257077c1 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -60,9 +60,6 @@ const DetailsPage = () => { return 'N/A'; } - // Sort checks by createdAt descending to get the most recent check first - checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); - const mostRecentCheck = checks[0]; const currentTime = new Date(); const lastCheckedTime = new Date(mostRecentCheck.createdAt); @@ -90,9 +87,6 @@ const DetailsPage = () => { return 'N/A'; // Handle case when no checks are available } - // Sort checks by createdAt descending to get the most recent check first - checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); - const mostRecentCheck = checks[0]; return new Date(mostRecentCheck.createdAt).toLocaleString(); };