diff --git a/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx b/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx index 7f07f688f..30f69b462 100644 --- a/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx +++ b/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx @@ -26,6 +26,18 @@ import SummaryCard from "../SummaryCard/index.jsx"; * @param {boolean} props.isLoading - Loading state * @param {Object} props.error - Error object if any */ +const formatResolutionTime = (hours) => { + if (!hours || hours === 0) return "0m"; + + const totalMinutes = Math.round(hours * 60); + const h = Math.floor(totalMinutes / 60); + const m = totalMinutes % 60; + + if (h === 0) return `${m}m`; + if (m === 0) return `${h}h`; + return `${h}h ${m}m`; +}; + const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => { const theme = useTheme(); const { t } = useTranslation(); @@ -150,7 +162,7 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => { > {t("incidentsPage.avgResolutionTime")}:{" "} {summary.total > 0 - ? `${summary.avgResolutionTimeHours || 0} ${t("incidentsPage.hours")}` + ? formatResolutionTime(summary.avgResolutionTimeHours) : "N/A"} diff --git a/client/src/Pages/Incidents2/index.jsx b/client/src/Pages/Incidents2/index.jsx index 2f31864bf..d0b705bf9 100644 --- a/client/src/Pages/Incidents2/index.jsx +++ b/client/src/Pages/Incidents2/index.jsx @@ -8,7 +8,7 @@ import IncidentsSummaryPanel from "./Components/IncidentsSummaryPanel/index.jsx" //Utils import { useTheme } from "@emotion/react"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import NetworkError from "@/Components/v1/GenericFallback/NetworkError.jsx"; import { useTranslation } from "react-i18next"; @@ -53,16 +53,33 @@ const Incidents2 = () => { const theme = useTheme(); - useEffect(() => { - setPage(0); - }, [selectedMonitor, filter, dateRange]); + // Track previous filter values to detect changes and reset page + const prevFiltersRef = useRef({ selectedMonitor, filter, dateRange }); useEffect(() => { + const prevFilters = prevFiltersRef.current; + const filtersChanged = + prevFilters.selectedMonitor !== selectedMonitor || + prevFilters.filter !== filter || + prevFilters.dateRange !== dateRange; + + // Determine the effective page - reset to 0 if filters changed + const effectivePage = filtersChanged ? 0 : page; + + // Update the ref for next comparison + if (filtersChanged) { + prevFiltersRef.current = { selectedMonitor, filter, dateRange }; + // Also update the page state (for pagination component) + if (page !== 0) { + setPage(0); + } + } + const config = { monitorId: selectedMonitor !== "0" ? selectedMonitor : undefined, sortOrder: "desc", dateRange, - page, + page: effectivePage, rowsPerPage, }; diff --git a/client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx b/client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx index 493d1ece6..0b5ce5f3e 100644 --- a/client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx +++ b/client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx @@ -5,11 +5,22 @@ import { getHumanReadableDuration } from "../../../../../Utils/timeUtils.js"; import { useTranslation } from "react-i18next"; const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => { - const uptimeDuration = getHumanReadableDuration(monitor?.uptimeDuration); - const time = getHumanReadableDuration(monitor?.lastChecked); - const { t } = useTranslation(); + // Calculate time since first check (checks since) + const checks = monitor?.checks || []; + const oldestCheck = checks.length > 0 ? checks[checks.length - 1] : null; + const oldestCheckTime = oldestCheck?.createdAt ? new Date(oldestCheck.createdAt).getTime() : null; + const checksSinceDuration = oldestCheckTime ? Date.now() - oldestCheckTime : 0; + + // Calculate time since last check + const latestCheck = checks.length > 0 ? checks[0] : null; + const latestCheckTime = latestCheck?.createdAt ? new Date(latestCheck.createdAt).getTime() : null; + const lastCheckDuration = latestCheckTime ? Date.now() - latestCheckTime : 0; + + const uptimeDuration = getHumanReadableDuration(checksSinceDuration); + const time = getHumanReadableDuration(lastCheckDuration); + return (