From afe9d45b5e2dbd3a1bbc3b728c3fba36a1a0e002 Mon Sep 17 00:00:00 2001 From: becarta Date: Wed, 11 Jun 2025 23:37:13 +0200 Subject: [PATCH] Update UptimeStatusIsland and UpdateTimer components for improved refresh intervals and styling - Increased the refresh interval in UpdateTimer from 300 seconds to 1800 seconds for less frequent updates. - Refactored UptimeStatusIsland to utilize a 30-minute window for data caching and fetching, enhancing performance. - Updated styles in UptimeStatusIsland for better visual consistency, including backdrop blur effects and improved layout for mobile responsiveness. --- src/components/UpdateTimer.jsx | 2 +- src/components/UptimeStatusIsland.jsx | 55 ++++++++++++++------------- src/pages/[lang]/development.astro | 2 +- src/pages/[lang]/uptime.astro | 12 +++--- 4 files changed, 37 insertions(+), 34 deletions(-) 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}

    {group.monitorList.map((monitor) => ( -
  • +
  • {isMobile ? ( <>
    diff --git a/src/pages/[lang]/development.astro b/src/pages/[lang]/development.astro index 53b606d..a4d9dde 100644 --- a/src/pages/[lang]/development.astro +++ b/src/pages/[lang]/development.astro @@ -126,7 +126,7 @@ const formatDate = (dateString) => { {Array.isArray(userCommits) && userCommits.length > 0 ? (
    {userCommits.map((commit) => ( -
    +

    {commit.message.split('\n')[0] || 'No message'}

    {/* Format commit description with bullet points on new lines */} diff --git a/src/pages/[lang]/uptime.astro b/src/pages/[lang]/uptime.astro index 3294ee8..8715524 100644 --- a/src/pages/[lang]/uptime.astro +++ b/src/pages/[lang]/uptime.astro @@ -43,11 +43,13 @@ const t = getTranslation(currentLang); --- -
    -
    -

    {t.uptime.title}

    -

    {t.uptime.subtitle}

    +
    +
    +
    +

    {t.uptime.title}

    +

    {t.uptime.subtitle}

    +
    +
    -
    \ No newline at end of file