diff --git a/client/src/Components/v2/monitors/charts/HistogramDetails.tsx b/client/src/Components/v2/monitors/charts/HistogramDetails.tsx index f3ca2acda..63b81cb71 100644 --- a/client/src/Components/v2/monitors/charts/HistogramDetails.tsx +++ b/client/src/Components/v2/monitors/charts/HistogramDetails.tsx @@ -84,7 +84,6 @@ export const HistogramDetails = ({ checks: GroupedCheck[]; range: string; }) => { - console.log(range); const theme = useTheme(); const uiTimezone = useSelector((state: RootState) => state.ui.timezone); return ( diff --git a/client/src/Components/v2/monitors/charts/HistogramStatus.tsx b/client/src/Components/v2/monitors/charts/HistogramStatus.tsx index 2805013eb..a41c1f3a0 100644 --- a/client/src/Components/v2/monitors/charts/HistogramStatus.tsx +++ b/client/src/Components/v2/monitors/charts/HistogramStatus.tsx @@ -75,7 +75,7 @@ export const HistogramStatus = ({ if (!active || !payload?.length) return null; const d = payload[0]?.payload; const avg = d?.avgResponseTime ?? 0; - const titleText = t("common.charts.labels.averageRepsonseTime"); + const titleText = t("common.charts.labels.averageResponseTime"); const fmt = range === "30d" ? "MMM D, YYYY" : "ddd, MMM D, YYYY, h:mm A"; let dateLabel = ""; if (d?._id) { diff --git a/client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx b/client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx deleted file mode 100644 index 73d241dce..000000000 --- a/client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx +++ /dev/null @@ -1,160 +0,0 @@ -// Components -import { Stack, Typography, Box } from "@mui/material"; -import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx"; -import Icon from "@/Components/v1/Icon"; -import UpBarChart from "../Charts/UpBarChart.jsx"; -import DownBarChart from "../Charts/DownBarChart.jsx"; -import ResponseGaugeChart from "../Charts/ResponseGaugeChart.jsx"; -import SkeletonLayout from "./skeleton.jsx"; -// Utils -import { formatDateWithTz } from "../../../../../Utils/timeUtilsLegacy.js"; -import PropTypes from "prop-types"; -import { useTheme } from "@emotion/react"; -import { useState } from "react"; - -const ChartBoxes = ({ - isLoading = false, - monitorData, - dateRange, - uiTimezone, - dateFormat, -}) => { - // Local state - const [hoveredUptimeData, setHoveredUptimeData] = useState(null); - const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null); - const theme = useTheme(); - if (isLoading) { - return ; - } - - const noIncidentsMessage = "Great. No Incidents, yet!"; - - return ( - - - } - header="Uptime" - isEmpty={monitorData?.groupedUpChecks?.length === 0} - > - - - Total Checks - - {hoveredUptimeData !== null - ? hoveredUptimeData.totalChecks - : (monitorData?.groupedUpChecks?.reduce((count, checkGroup) => { - return count + checkGroup.totalChecks; - }, 0) ?? 0)} - - {hoveredUptimeData !== null && hoveredUptimeData.time !== null && ( - - {formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)} - - )} - - - - {hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"} - - - {hoveredUptimeData !== null - ? Math.floor(hoveredUptimeData?.originalAvgResponseTime ?? 0) - : Math.floor((monitorData?.groupedUptimePercentage ?? 0) * 100)} - - {hoveredUptimeData !== null ? " ms" : " %"} - - - - - - - - } - header="Incidents" - noDataMessage={noIncidentsMessage} - isEmpty={monitorData?.groupedDownChecks?.length === 0} - > - - - - {hoveredIncidentsData !== null - ? hoveredIncidentsData.totalChecks - : (monitorData?.groupedDownChecks?.reduce((count, checkGroup) => { - return count + checkGroup.totalChecks; - }, 0) ?? 0)} - - {hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && ( - - {formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)} - - )} - - - - - - } - header="Average Response Time" - > - - - - ); -}; - -export default ChartBoxes; - -ChartBoxes.propTypes = { - isLoading: PropTypes.bool, - monitorData: PropTypes.object, - dateRange: PropTypes.string.isRequired, - uiTimezone: PropTypes.string.isRequired, - dateFormat: PropTypes.string.isRequired, - hoveredUptimeData: PropTypes.object, - setHoveredUptimeData: PropTypes.func, - hoveredIncidentsData: PropTypes.object, - setHoveredIncidentsData: PropTypes.func, -}; diff --git a/client/src/Pages/Uptime/Details/Components/ChartBoxes/skeleton.jsx b/client/src/Pages/Uptime/Details/Components/ChartBoxes/skeleton.jsx deleted file mode 100644 index 750b3b20a..000000000 --- a/client/src/Pages/Uptime/Details/Components/ChartBoxes/skeleton.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Skeleton, Stack } from "@mui/material"; -import { useTheme } from "@emotion/react"; - -const SkeletonLayout = () => { - const theme = useTheme(); - return ( - - - - - - ); -}; - -export default SkeletonLayout; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/CustomLabels.jsx b/client/src/Pages/Uptime/Details/Components/Charts/CustomLabels.jsx deleted file mode 100644 index ffdaa5bbb..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/CustomLabels.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import PropTypes from "prop-types"; -import { useSelector } from "react-redux"; -import { formatDateWithTz } from "../../../../../Utils/timeUtilsLegacy.js"; - -const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => { - const uiTimezone = useSelector((state) => state.ui.timezone); - const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D"; - - return ( - <> - - {formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone)} - - - {formatDateWithTz(lastDataPoint._id, dateFormat, uiTimezone)} - - - ); -}; - -CustomLabels.propTypes = { - x: PropTypes.number.isRequired, - width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - firstDataPoint: PropTypes.object, - lastDataPoint: PropTypes.object, - type: PropTypes.string.isRequired, -}; - -export default CustomLabels; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/DownBarChart.jsx b/client/src/Pages/Uptime/Details/Components/Charts/DownBarChart.jsx deleted file mode 100644 index c5e08ecca..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/DownBarChart.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import { memo, useState } from "react"; -import { useTheme } from "@mui/material"; -import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts"; -import PropTypes from "prop-types"; -import CustomLabels from "./CustomLabels.jsx"; - -const DownBarChart = memo(({ groupedDownChecks = [], type, onBarHover }) => { - const theme = useTheme(); - - const [chartHovered, setChartHovered] = useState(false); - const [hoveredBarIndex, setHoveredBarIndex] = useState(null); - - return ( - - { - setChartHovered(true); - onBarHover({ time: null, totalChecks: 0 }); - }} - onMouseLeave={() => { - setChartHovered(false); - setHoveredBarIndex(null); - onBarHover(null); - }} - > - - } - /> - - {groupedDownChecks?.map((entry, index) => { - return ( - { - setHoveredBarIndex(index); - onBarHover(entry); - }} - onMouseLeave={() => { - setHoveredBarIndex(null); - onBarHover({ time: null, totalChecks: 0 }); - }} - /> - ); - })} - - - - ); -}); - -DownBarChart.displayName = "DownBarChart"; -DownBarChart.propTypes = { - monitor: PropTypes.shape({ - groupedDownChecks: PropTypes.arrayOf(PropTypes.object), - }), - type: PropTypes.string, - onBarHover: PropTypes.func, -}; -export default DownBarChart; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx b/client/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx deleted file mode 100644 index 084a711c3..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx +++ /dev/null @@ -1,118 +0,0 @@ -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; -import { ResponsiveContainer, RadialBarChart, RadialBar, Cell } from "recharts"; -import { useTranslation } from "react-i18next"; - -const ResponseGaugeChart = ({ avgResponseTime }) => { - const theme = useTheme(); - const { t } = useTranslation(); - let max = 1000; // max ms - - const data = [ - { response: max, fill: "transparent", background: false }, - { response: avgResponseTime, background: true }, - ]; - let responseTime = Math.floor(avgResponseTime); - let responseProps = - responseTime <= 200 - ? { - category: "Excellent", - main: theme.palette.success.main, - bg: theme.palette.success.lowContrast, - } - : responseTime <= 500 - ? { - category: "Fair", - main: theme.palette.success.main, - bg: theme.palette.success.lowContrast, - } - : responseTime <= 600 - ? { - category: "Acceptable", - main: theme.palette.warning.main, - bg: theme.palette.warning.lowContrast, - } - : { - category: "Poor", - main: theme.palette.error.main, - bg: theme.palette.error.lowContrast, - }; - - return ( - - - - {t("low")} - - - {t("high")} - - - {responseProps.category} - - - {responseTime} ms - - - - - - - - ); -}; - -ResponseGaugeChart.propTypes = { - avgResponseTime: PropTypes.number.isRequired, -}; - -export default ResponseGaugeChart; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx b/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx deleted file mode 100644 index 7e7a940e0..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx"; -import MonitorDetailsAreaChart from "@/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx"; -import Icon from "@/Components/v1/Icon"; -import SkeletonLayout from "./ResponseTimeChartSkeleton.jsx"; -import PropTypes from "prop-types"; - -const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange }) => { - if (isLoading) { - return ; - } - - return ( - - } - header="Response Times" - > - - - ); -}; - -ResponseTImeChart.propTypes = { - isLoading: PropTypes.bool, - groupedChecks: PropTypes.array, - dateRange: PropTypes.string, -}; - -export default ResponseTImeChart; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChartSkeleton.jsx b/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChartSkeleton.jsx deleted file mode 100644 index a70757e36..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChartSkeleton.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Skeleton } from "@mui/material"; -const ResponseTimeChartSkeleton = () => { - return ( - - ); -}; - -export default ResponseTimeChartSkeleton; diff --git a/client/src/Pages/Uptime/Details/Components/Charts/UpBarChart.jsx b/client/src/Pages/Uptime/Details/Components/Charts/UpBarChart.jsx deleted file mode 100644 index 8f1af8912..000000000 --- a/client/src/Pages/Uptime/Details/Components/Charts/UpBarChart.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { memo, useState } from "react"; -import { useTheme } from "@mui/material"; -import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts"; -import PropTypes from "prop-types"; -import CustomLabels from "./CustomLabels.jsx"; - -const getThemeColor = (responseTime) => { - if (responseTime < 200) { - return "success"; - } else if (responseTime < 300) { - return "warning"; - } else { - return "error"; - } -}; - -const UpBarChart = memo(({ groupedUpChecks = [], type, onBarHover }) => { - const theme = useTheme(); - const [chartHovered, setChartHovered] = useState(false); - const [hoveredBarIndex, setHoveredBarIndex] = useState(null); - - return ( - - { - setChartHovered(true); - onBarHover({ time: null, totalChecks: 0, originalAvgResponseTime: 0 }); - }} - onMouseLeave={() => { - setChartHovered(false); - setHoveredBarIndex(null); - onBarHover(null); - }} - > - - } - /> - - {groupedUpChecks?.map((entry, index) => { - const themeColor = getThemeColor(entry.originalAvgResponseTime); - return ( - { - setHoveredBarIndex(index); - onBarHover(entry); - }} - onMouseLeave={() => { - setHoveredBarIndex(null); - onBarHover({ - time: null, - totalChecks: 0, - groupUptimePercentage: 0, - }); - }} - /> - ); - })} - - - - ); -}); - -// Add display name for the component -UpBarChart.displayName = "UpBarChart"; - -// Validate props using PropTypes -UpBarChart.propTypes = { - monitor: PropTypes.shape({ - groupedUpChecks: PropTypes.array, - }), - type: PropTypes.string, - onBarHover: PropTypes.func, -}; -export default UpBarChart; diff --git a/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx b/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx index 2d5080e77..2cfdc1f15 100644 --- a/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx +++ b/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx @@ -20,7 +20,7 @@ const getHeaders = (t: Function, uiTimezone: string) => { }, { id: "date", - content: t("checks.table.headers.dateTime"), + content: t("pages.checks.table.headers.dateTime"), render: (row) => { return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone); }, @@ -34,7 +34,7 @@ const getHeaders = (t: Function, uiTimezone: string) => { }, { id: "statusCode", - content: t("checks.table.headers.statusCode"), + content: t("pages.checks.table.headers.statusCode"), render: (row) => { return row.statusCode || "N/A"; }, diff --git a/client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx b/client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx deleted file mode 100644 index b115f67b0..000000000 --- a/client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx +++ /dev/null @@ -1,222 +0,0 @@ -import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx"; -import PropTypes from "prop-types"; -import Icon from "@/Components/v1/Icon"; -import Table from "@/Components/v1/Table/index.jsx"; -import TablePagination from "@/Components/v1/Table/TablePagination/index.jsx"; -import { StatusLabel } from "@/Components/v1/Label/index.jsx"; -import { useTranslation } from "react-i18next"; -import { formatDateWithTz } from "../../../../../Utils/timeUtilsLegacy.js"; -import SkeletonLayout from "./skeleton.jsx"; -import Tooltip from "@mui/material/Tooltip"; -import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; -import Stack from "@mui/material/Stack"; -import { lighten, useTheme } from "@mui/material"; - -/** - * Creates tooltip content with detailed timing breakdown - * Following the pattern from IncidentTable's GetTooltip function - * @param {Object} timings - Timing object (guaranteed to have phases by caller) - * @param {Object} theme - MUI theme object - * @param {Function} t - Translation function - * @returns {JSX.Element} Tooltip content - */ -const GetTooltip = (timings, theme, t) => { - const phases = timings.phases; - const timingDetails = [ - { label: t("dnsLookup"), value: phases.dns }, - { label: t("tcpConnection"), value: phases.tcp }, - { label: t("tlsHandshake"), value: phases.tls }, - { label: t("waitTime"), value: phases.wait }, - { label: t("timeToFirstByte"), value: phases.firstByte }, - { label: t("download"), value: phases.download }, - { label: t("total"), value: phases.total }, - ].filter((item) => item.value > 0); - - return ( - - - {t("responseTimeBreakdown")} - - {timingDetails.map((detail, index, array) => ( - - - {detail.label}: - - - {Math.round(detail.value)} ms - - - ))} - - ); -}; - -const ResponseTable = ({ - isLoading = false, - checks = [], - checksCount, - uiTimezone, - page, - setPage, - rowsPerPage, - setRowsPerPage, -}) => { - const { t } = useTranslation(); - const theme = useTheme(); - - if (isLoading) { - return ; - } - - const headers = [ - { - id: "status", - content: t("status"), - render: (row) => { - const status = row.status === true ? "up" : "down"; - - return ( - - ); - }, - }, - { - id: "date", - content: t("date&Time"), - render: (row) => - formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone), - }, - { - id: "statusCode", - content: t("statusCode"), - render: (row) => (row.statusCode ? row.statusCode : "N/A"), - }, - { - id: "message", - content: t("message"), - render: (row) => row.message, - }, - { - id: "responseTime", - content: t("responseTime"), - render: (row) => { - const hasTimings = row.timings && row.timings.phases; - const responseTime = row.responseTime; - const responseTimeDisplay = - responseTime !== null && responseTime !== undefined - ? `${Math.round(responseTime)} ms` - : "N/A"; - - if (!hasTimings) { - return responseTimeDisplay; - } - - return ( - - - {responseTimeDisplay} - - - ); - }, - }, - ]; - - return ( - - } - header="Response Times" - height="100%" - > - - - - ); -}; - -ResponseTable.propTypes = { - isLoading: PropTypes.bool, - checks: PropTypes.array, - checksCount: PropTypes.number, - uiTimezone: PropTypes.string.isRequired, - page: PropTypes.number.isRequired, - setPage: PropTypes.func.isRequired, - rowsPerPage: PropTypes.number.isRequired, - setRowsPerPage: PropTypes.func.isRequired, -}; - -export default ResponseTable; diff --git a/client/src/Pages/Uptime/Details/Components/ResponseTable/skeleton.jsx b/client/src/Pages/Uptime/Details/Components/ResponseTable/skeleton.jsx deleted file mode 100644 index 2665ffaf1..000000000 --- a/client/src/Pages/Uptime/Details/Components/ResponseTable/skeleton.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Skeleton } from "@mui/material"; - -const SkeletonLayout = () => { - return ( - - ); -}; - -export default SkeletonLayout; diff --git a/client/src/Pages/Uptime/Details/Components/UptimeStatusBoxes/index.jsx b/client/src/Pages/Uptime/Details/Components/UptimeStatusBoxes/index.jsx deleted file mode 100644 index 8c05e6c74..000000000 --- a/client/src/Pages/Uptime/Details/Components/UptimeStatusBoxes/index.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx"; -import StatBox from "@/Components/v1/StatBox/index.jsx"; - -import PropTypes from "prop-types"; -import { getHumanReadableDuration } from "../../../../../Utils/timeUtilsLegacy.js"; -import { useTheme } from "@mui/material/styles"; -import { Typography } from "@mui/material"; -import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils.js"; - -const UptimeStatusBoxes = ({ - isLoading = false, - monitor, - monitorStats, - certificateExpiry, -}) => { - const theme = useTheme(); - const { determineState } = useMonitorUtils(); - - // Determine time since last failure - const timeOfLastFailure = monitorStats?.timeOfLastFailure; - const timeSinceLastFailure = - timeOfLastFailure > 0 - ? Date.now() - timeOfLastFailure - : Date.now() - new Date(monitorStats?.createdAt); - - // Determine time since last check - const timeOfLastCheck = monitorStats?.lastCheckTimestamp; - const timeSinceLastCheck = Date.now() - timeOfLastCheck; - - const streakTime = getHumanReadableDuration(timeSinceLastFailure); - - const lastCheckTime = getHumanReadableDuration(timeSinceLastCheck); - return ( - - - - {lastCheckTime} - {"ago"} - - } - /> - - {monitorStats?.lastResponseTime} - {"ms"} - - } - /> - {monitor?.type === "http" && ( - - {certificateExpiry} - - } - /> - )} - - ); -}; - -UptimeStatusBoxes.propTypes = { - isLoading: PropTypes.bool, - monitor: PropTypes.object, - monitorStats: PropTypes.object, - certificateExpiry: PropTypes.string, -}; - -export default UptimeStatusBoxes; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 8cba70259..d098e54de 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -208,6 +208,14 @@ "placeholder": "Search monitors..." } } + }, + "checks": { + "table": { + "headers": { + "dateTime": "Date & time", + "statusCode": "Status code" + } + } } }, "distributedUptimeStatusCreateStatusPage": "status page",