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:
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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user