diff --git a/src/components/UpdateTimer.jsx b/src/components/UpdateTimer.jsx index 31d8727..740a703 100644 --- a/src/components/UpdateTimer.jsx +++ b/src/components/UpdateTimer.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; -const REFRESH_INTERVAL = 300; // seconds +const REFRESH_INTERVAL = 1800; // seconds export default function UpdateTimer({ onRefresh }) { const [secondsLeft, setSecondsLeft] = useState(REFRESH_INTERVAL); diff --git a/src/components/UptimeStatusIsland.jsx b/src/components/UptimeStatusIsland.jsx index 3154d79..2166a32 100644 --- a/src/components/UptimeStatusIsland.jsx +++ b/src/components/UptimeStatusIsland.jsx @@ -105,36 +105,37 @@ export default function UptimeStatusIsland() { setUserLocale(navigator.language || 'en-US'); }, []); - const getSecondsToNext5Min = () => { + // Helper: get the current 30-min window key (e.g., '2024-06-07T12:00') + const getCurrent30MinKey = () => { + const now = new Date(); + now.setSeconds(0, 0); + const min = now.getMinutes(); + now.setMinutes(Math.floor(min / 30) * 30); + return now.toISOString().slice(0, 16); // 'YYYY-MM-DDTHH:mm' + }; + + // Helper: get seconds to next 30-min mark + const getSecondsToNext30Min = () => { const now = new Date(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); const ms = now.getMilliseconds(); - const next5 = Math.ceil((minutes + 0.01) / 5) * 5; + const next30 = Math.ceil((minutes + 0.01) / 30) * 30; let next = new Date(now); - next.setMinutes(next5, 0, 0); + next.setMinutes(next30, 0, 0); if (next <= now) { - next.setMinutes(next.getMinutes() + 5); + next.setMinutes(next.getMinutes() + 30); } return Math.floor((next - now) / 1000); }; useEffect(() => { - const update = () => setSecondsToNextUpdate(getSecondsToNext5Min()); + const update = () => setSecondsToNextUpdate(getSecondsToNext30Min()); update(); const interval = setInterval(update, 1000); return () => clearInterval(interval); }, []); - // Helper: get the current 5-min window key (e.g., '2024-06-07T12:00') - const getCurrent5MinKey = () => { - const now = new Date(); - now.setSeconds(0, 0); - const min = now.getMinutes(); - now.setMinutes(Math.floor(min / 5) * 5); - return now.toISOString().slice(0, 16); // 'YYYY-MM-DDTHH:mm' - }; - // On mount, check sessionStorage for valid cached data useEffect(() => { const cacheKey = 'uptimeStatusCache'; @@ -142,7 +143,7 @@ export default function UptimeStatusIsland() { if (cache) { try { const { key, data: cachedData } = JSON.parse(cache); - if (key === getCurrent5MinKey() && cachedData) { + if (key === getCurrent30MinKey() && cachedData) { setData(cachedData); setLoading(false); return; @@ -162,9 +163,9 @@ export default function UptimeStatusIsland() { if (!response.ok) throw new Error('Failed to fetch uptime data'); const json = await response.json(); setData(json); - // Cache with current 5-min key + // Cache with current 30-min key const cacheKey = 'uptimeStatusCache'; - sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json })); + sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json })); } catch (err) { setError(err.message || 'Unknown error'); } finally { @@ -172,7 +173,7 @@ export default function UptimeStatusIsland() { } }, []); - // Scheduled fetch logic (every 5 min, update cache) + // Scheduled fetch logic (every 30 min, update cache) const fetchData = useCallback(async () => { setLoading(true); setError(null); @@ -181,9 +182,9 @@ export default function UptimeStatusIsland() { if (!response.ok) throw new Error('Failed to fetch uptime data'); const json = await response.json(); setData(json); - // Cache with current 5-min key + // Cache with current 30-min key const cacheKey = 'uptimeStatusCache'; - sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json })); + sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json })); } catch (err) { setError(err.message || 'Unknown error'); } finally { @@ -196,16 +197,16 @@ export default function UptimeStatusIsland() { const minutes = now.getMinutes(); const seconds = now.getSeconds(); const ms = now.getMilliseconds(); - const next5 = Math.ceil((minutes + 0.01) / 5) * 5; + const next30 = Math.ceil((minutes + 0.01) / 30) * 30; let next = new Date(now); - next.setMinutes(next5, 0, 0); + next.setMinutes(next30, 0, 0); if (next <= now) { - next.setMinutes(next.getMinutes() + 5); + next.setMinutes(next.getMinutes() + 30); } const msToNext = next - now; const timeout = setTimeout(() => { fetchData(); - const interval = setInterval(fetchData, 5 * 60 * 1000); + const interval = setInterval(fetchData, 30 * 60 * 1000); fetchData.interval = interval; }, msToNext); return () => { @@ -246,7 +247,7 @@ export default function UptimeStatusIsland() { return badgeRefs.current[monitorId][badge]; }; - const totalBarSeconds = 5 * 60; + const totalBarSeconds = 30 * 60; const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0; const barPercent = (barValue / totalBarSeconds) * 100; const barGradient = 'linear-gradient(90deg, #0161ef 0%, #0154cf 100%)'; @@ -316,11 +317,11 @@ export default function UptimeStatusIsland() {
{error}
) : data && data.publicGroupList && data.publicGroupList.length > 0 ? ( data.publicGroupList.map((group) => ( -
+

{group.name}