TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #832 from bluewave-labs/feat/timezones

Browse Source 
Feat/timezones
This commit is contained in:
Alexander Holliday authored and GitHub committed 2024-09-13 17:46:14 -07:00
2 parents a8c03581ca 413494a7fb
commit 4e4eff9df0
11 files changed
+1828 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Pages/Incidents/IncidentTable/index.jsx
+10 -3
View File
@@ -21,7 +21,11 @@ import { networkService } from "../../../main";
import { StatusLabel } from "../../../Components/Label";
import { logger } from "../../../Utils/Logger";
import { useTheme } from "@emotion/react";
import { formatDateWithTz } from "../../../Utils/timeUtils";
const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
const uiTimezone = useSelector((state) => state.ui.timezone);
const theme = useTheme();
const { authToken, user } = useSelector((state) => state.auth);
const [checks, setChecks] = useState([]);
@@ -151,6 +155,11 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
<TableBody>
{checks.map((check) => {
const status = check.status === true ? "up" : "down";
const formattedDate = formatDateWithTz(
check.createdAt,
"YYYY-MM-DD HH:mm:ss A",
uiTimezone
);
return (
<TableRow key={check._id}>
@@ -162,9 +171,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
customStyles={{ textTransform: "capitalize" }}
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
</TableCell>
<TableCell>{formattedDate}</TableCell>
<TableCell>
{check.statusCode ? check.statusCode : "N/A"}
</TableCell>
Client/src/Pages/Monitors/Details/Charts/index.jsx
+48 -13
View File
@@ -1,4 +1,5 @@
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
import {
BarChart,
Bar,
@@ -8,8 +9,9 @@ import {
RadialBarChart,
RadialBar,
} from "recharts";
import { formatDate } from "../../../../Utils/timeUtils";
import { memo, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { formatDateWithTz } from "../../../../Utils/timeUtils";
const CustomLabels = ({
x,
@@ -19,27 +21,35 @@ const CustomLabels = ({
lastDataPoint,
type,
}) => {
let options = {
month: "short",
year: undefined,
hour: undefined,
minute: undefined,
};
if (type === "day") delete options.hour;
const uiTimezone = useSelector((state) => state.ui.timezone);
const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
return (
<>
<text x={x} y={height} dy={-3} textAnchor="start" fontSize={11}>
{formatDate(new Date(firstDataPoint.time), options)}
{formatDateWithTz(
new Date(firstDataPoint.time),
dateFormat,
uiTimezone
)}
</text>
<text x={width} y={height} dy={-3} textAnchor="end" fontSize={11}>
{formatDate(new Date(lastDataPoint.time), options)}
{formatDateWithTz(new Date(lastDataPoint.time), dateFormat, uiTimezone)}
</text>
</>
);
};
export const UpBarChart = memo(({ data, type, onBarHover }) => {
CustomLabels.propTypes = {
x: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
firstDataPoint: PropTypes.object.isRequired,
lastDataPoint: PropTypes.object.isRequired,
type: PropTypes.string.isRequired,
};
const UpBarChart = memo(({ data, type, onBarHover }) => {
const theme = useTheme();
const [chartHovered, setChartHovered] = useState(false);
@@ -122,7 +132,18 @@ export const UpBarChart = memo(({ data, type, onBarHover }) => {
);
});
export const DownBarChart = memo(({ data, type, onBarHover }) => {
// Add display name for the component
UpBarChart.displayName = "UpBarChart";
// Validate props using PropTypes
UpBarChart.propTypes = {
data: PropTypes.arrayOf(PropTypes.object),
type: PropTypes.string,
onBarHover: PropTypes.func,
};
export { UpBarChart };
const DownBarChart = memo(({ data, type, onBarHover }) => {
const theme = useTheme();
const [chartHovered, setChartHovered] = useState(false);
@@ -194,7 +215,15 @@ export const DownBarChart = memo(({ data, type, onBarHover }) => {
);
});
export const ResponseGaugeChart = ({ data }) => {
DownBarChart.displayName = "DownBarChart";
DownBarChart.propTypes = {
data: PropTypes.arrayOf(PropTypes.object),
type: PropTypes.string,
onBarHover: PropTypes.func,
};
export { DownBarChart };
const ResponseGaugeChart = ({ data }) => {
const theme = useTheme();
let max = 1000; // max ms
@@ -281,3 +310,9 @@ export const ResponseGaugeChart = ({ data }) => {
</ResponsiveContainer>
);
};
ResponseGaugeChart.propTypes = {
data: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export { ResponseGaugeChart };
Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+7 -3
View File
@@ -18,10 +18,9 @@ import { StatusLabel } from "../../../../Components/Label";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
import { logger } from "../../../../Utils/Logger";
import { useTheme } from "@emotion/react";
import { formatDateWithTz } from "../../../../Utils/timeUtils";
const PaginationTable = ({ monitorId, dateRange }) => {
const theme = useTheme();
const { authToken } = useSelector((state) => state.auth);
const [checks, setChecks] = useState([]);
const [checksCount, setChecksCount] = useState(0);
@@ -29,6 +28,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
page: 0,
rowsPerPage: 5,
});
const uiTimezone = useSelector((state) => state.ui.timezone);
useEffect(() => {
setPaginationController((prevPaginationController) => ({
@@ -119,7 +119,11 @@ const PaginationTable = ({ monitorId, dateRange }) => {
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
{formatDateWithTz(
check.createdAt,
"ddd, MMMM D, YYYY, HH:mm A",
uiTimezone
)}
</TableCell>
<TableCell>
{check.statusCode ? check.statusCode : "N/A"}
Client/src/Pages/Monitors/Details/index.jsx
+16 -17
View File
@@ -14,7 +14,6 @@ import { useNavigate, useParams } from "react-router-dom";
import { networkService } from "../../../main";
import { logger } from "../../../Utils/Logger";
import {
formatDate,
formatDurationRounded,
formatDurationSplit,
} from "../../../Utils/timeUtils";
@@ -35,6 +34,8 @@ import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts";
import SkeletonLayout from "./skeleton";
import "./index.css";
import useUtils from "../utils";
import { formatDateWithTz } from "../../../Utils/timeUtils";
/**
* Details page component displaying monitor details and related information.
* @component
@@ -57,6 +58,9 @@ const DetailsPage = ({ isAdmin }) => {
setAnchorEl(null);
};
const dateFormat = dateRange === "day" ? "MMM D, h A" : "MMM D";
const uiTimezone = useSelector((state) => state.ui.timezone);
const fetchMonitor = useCallback(async () => {
try {
const res = await networkService.getStatsByMonitorId(
@@ -95,10 +99,7 @@ const DetailsPage = ({ isAdmin }) => {
const date = new Date(year, month - 1, day);
setCertificateExpiry(
formatDate(date, {
hour: undefined,
minute: undefined,
}) ?? "N/A"
formatDateWithTz(date, dateFormat, uiTimezone) ?? "N/A"
);
}
} catch (error) {
@@ -367,12 +368,11 @@ const DetailsPage = ({ isAdmin }) => {
fontSize={11}
color={theme.palette.text.tertiary}
>
{formatDate(new Date(hoveredUptimeData.time), {
month: "short",
year: undefined,
minute: undefined,
hour: dateRange === "day" ? "numeric" : undefined,
})}
{formatDateWithTz(
hoveredUptimeData.time,
dateFormat,
uiTimezone
)}
</Typography>
)}
</Box>
@@ -417,12 +417,11 @@ const DetailsPage = ({ isAdmin }) => {
fontSize={11}
color={theme.palette.text.tertiary}
>
{formatDate(new Date(hoveredIncidentsData.time), {
month: "short",
year: undefined,
minute: undefined,
hour: dateRange === "day" ? "numeric" : undefined,
})}
{formatDateWithTz(
hoveredIncidentsData.time,
dateFormat,
uiTimezone
)}
</Typography>
)}
</Box>
Client/src/Pages/PageSpeed/card.jsx
-11
View File
@@ -1,5 +1,3 @@
import { getLastChecked } from "../../Utils/monitorUtils";
import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
import { StatusLabel } from "../../Components/Label";
import { Box, Grid, Stack, Typography } from "@mui/material";
@@ -59,15 +57,6 @@ const Card = ({ monitor }) => {
<Typography fontSize={13}>
{monitor.url.replace(/^https?:\/\//, "")}
</Typography>
<Typography mt={theme.spacing(12)}>
<Typography component="span" fontWeight={600}>
Last checked:{" "}
</Typography>
{formatDate(getLastChecked(monitor.checks, false))}{" "}
<Typography component="span" fontStyle="italic">
({formatDurationRounded(getLastChecked(monitor.checks))} ago)
</Typography>
</Typography>
</Box>
</Stack>
</Grid>
Client/src/Pages/Settings/index.jsx
+11 -15
View File
@@ -14,14 +14,18 @@ import {
} from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
import PropTypes from "prop-types";
import LoadingButton from "@mui/lab/LoadingButton";
import { setTimezone } from "../../Features/UI/uiSlice";
import timezones from "../../Utils/timezones.json";
const Settings = ({ isAdmin }) => {
const theme = useTheme();
const { user, authToken } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.uptimeMonitors);
const { timezone } = useSelector((state) => state.ui);
const dispatch = useDispatch();
// TODO Handle saving
const handleSave = async () => {};
const handleClearStats = async () => {
try {
@@ -115,25 +119,16 @@ const Settings = ({ isAdmin }) => {
<Typography component="span">Display timezone</Typography>- The
timezone of the dashboard you publicly display.
</Typography>
<Typography>
<Typography component="span">Server timezone</Typography>- The
timezone of your server.
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Select
id="display-timezone"
label="Display timezone"
value="est"
onChange={() => logger.warn("disabled")}
items={[{ _id: "est", name: "America / Toronto" }]}
/>
<Select
id="server-timezone"
label="Server timezone"
value="est"
onChange={() => logger.warn("disabled")}
items={[{ _id: "est", name: "America / Toronto" }]}
value={timezone}
onChange={(e) => {
dispatch(setTimezone({ timezone: e.target.value }));
}}
items={timezones}
/>
</Stack>
</ConfigBox>
@@ -232,6 +227,7 @@ const Settings = ({ isAdmin }) => {
variant="contained"
color="primary"
sx={{ px: theme.spacing(12), mt: theme.spacing(20) }}
onClick={handleSave}
>
Save
</LoadingButton>