Fix PageSpeed stats and incidents page issues

## Changes
- Fix PageSpeed "checks since" and "last check" always showing "0s ago"
  by calculating durations from the checks array timestamps
- Fix incidents "Avg. Resolution Time" displaying decimal hours (e.g., "0.86 hours")
  by adding formatResolutionTime() to show proper format (e.g., "52m" or "2h 15m")
- Fix incidents monitor filter dropdown not working when selecting a specific monitor
  by resolving race condition between page reset and data fetch
This commit is contained in:
gorkem-bwl committed 2026-01-16 15:25:05 -05:00
1 parent f1a6afb860
commit 6c0aea46a7
3 files changed
+49 -9

No files matched your search

@@ -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"}
</Typography>
</Stack>
+22 -5
View File
@@ -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,
};
@@ -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 (
<StatusBoxes shouldRender={shouldRender}>
<StatBox