diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 980d72c23..2fefd3daa 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -12,12 +12,11 @@ import { Box, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { useMemo, useState } from "react"; import { useSelector } from "react-redux"; -import { formatDateWithTz, toTimeStamp } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../Utils/timeUtils"; import "./index.css"; const CustomToolTip = ({ active, payload, label }) => { const uiTimezone = useSelector((state) => state.ui.timezone); - const dateFormat = label?.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"; const theme = useTheme(); if (active && payload && payload.length) { const responseTime = payload[0]?.payload?.originalAvgResponseTime @@ -42,11 +41,7 @@ const CustomToolTip = ({ active, payload, label }) => { fontWeight: 500, }} > - {formatDateWithTz( - toTimeStamp(label, dateFormat), - "ddd, MMMM D, YYYY, h:mm A", - uiTimezone - )} + {formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)} { const theme = useTheme(); const uiTimezone = useSelector((state) => state.ui.timezone); - const dateFormat = payload?.value.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"; // Render nothing for the first tick if (index === 0) return null; return ( @@ -124,7 +118,7 @@ const CustomTick = ({ x, y, payload, index }) => { fontSize={11} fontWeight={400} > - {formatDateWithTz(toTimeStamp(payload?.value, dateFormat), "h:mm a", uiTimezone)} + {formatDateWithTz(payload?.value, "h:mm a", uiTimezone)} ); }; diff --git a/Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx b/Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx index cfbe9d234..10494830f 100644 --- a/Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx +++ b/Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx @@ -1,10 +1,9 @@ import PropTypes from "prop-types"; import { useSelector } from "react-redux"; -import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils"; const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => { const uiTimezone = useSelector((state) => state.ui.timezone); - const formatString = type === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"; const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D"; return ( @@ -16,11 +15,7 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) textAnchor="start" fontSize={11} > - {formatDateWithTz( - toTimeStamp(firstDataPoint._id, formatString), - dateFormat, - uiTimezone - )} + {formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone)} - {formatDateWithTz( - toTimeStamp(lastDataPoint._id, formatString), - dateFormat, - uiTimezone - )} + {formatDateWithTz(lastDataPoint._id, dateFormat, uiTimezone)} ); diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx index 1b2800139..7a2aa6756 100644 --- a/Client/src/Pages/Uptime/Details/index.jsx +++ b/Client/src/Pages/Uptime/Details/index.jsx @@ -24,7 +24,6 @@ import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils" import { useIsAdmin } from "../../../Hooks/useIsAdmin"; import IconBox from "../../../Components/IconBox"; import StatBox from "../../../Components/StatBox"; -import { toTimeStamp } from "../../../Utils/timeUtils"; import UpBarChart from "./Charts/UpBarChart"; import DownBarChart from "./Charts/DownBarChart"; import ResponseGaugeChart from "./Charts/ResponseGaugeChart"; @@ -320,10 +319,7 @@ const DetailsPage = () => { color={theme.palette.text.tertiary} > {formatDateWithTz( - toTimeStamp( - hoveredUptimeData._id, - dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH" - ), + hoveredUptimeData._id, dateFormat, uiTimezone )} @@ -380,10 +376,7 @@ const DetailsPage = () => { color={theme.palette.text.tertiary} > {formatDateWithTz( - toTimeStamp( - hoveredIncidentsData._id, - dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH" - ), + hoveredIncidentsData._id, dateFormat, uiTimezone )} diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js index 04b51d780..1a84d0ea5 100644 --- a/Client/src/Utils/timeUtils.js +++ b/Client/src/Utils/timeUtils.js @@ -75,12 +75,6 @@ export const formatDurationSplit = (ms) => { : { time: 0, format: "seconds" }; }; -export const toTimeStamp = (date, format) => { - const dayJsDate = dayjs.utc(date, format); - const timestamp = dayJsDate.valueOf(); - return timestamp; -}; - export const formatDate = (date, customOptions) => { const options = { year: "numeric", diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js index 705cdc753..8dbfb5dc1 100644 --- a/Server/db/mongo/modules/monitorModule.js +++ b/Server/db/mongo/modules/monitorModule.js @@ -323,9 +323,9 @@ const getUptimeDetailsById = async (req) => { const { dateRange, normalize } = req.query; const dates = getDateRange(dateRange); const formatLookup = { - day: "%Y-%m-%d-%H", - week: "%Y-%m-%d-%H", - month: "%Y-%m-%d", + day: "%Y-%m-%dT%H:00:00Z", + week: "%Y-%m-%dT%H:00:00Z", + month: "%Y-%m-%dT00:00:00Z", }; const dateString = formatLookup[dateRange];