365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update refresh intervals in UpdateTimer and UptimeStatusIsland components from 30 minutes to 5 minutes for more frequent status checks and updates.

Browse Source
This commit is contained in:
Richard Bergsma
2025-06-28 13:45:23 +02:00
parent 246edb3952
commit 28de900b95
3 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/UpdateTimer.jsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
const REFRESH_INTERVAL = 1800; // seconds
const REFRESH_INTERVAL = 300; // seconds
export default function UpdateTimer({ onRefresh }) {
const [secondsLeft, setSecondsLeft] = useState(REFRESH_INTERVAL);

40
src/components/UptimeStatusIsland.jsx
View File

@@ -105,32 +105,32 @@ export default function UptimeStatusIsland() {
setUserLocale(navigator.language || 'en-US');
}, []);
// Helper: get the current 30-min window key (e.g., '2024-06-07T12:00')
const getCurrent30MinKey = () => {
// 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 / 30) * 30);
now.setMinutes(Math.floor(min / 5) * 5);
return now.toISOString().slice(0, 16); // 'YYYY-MM-DDTHH:mm'
};
// Helper: get seconds to next 30-min mark
const getSecondsToNext30Min = () => {
// Helper: get seconds to next 5-min mark
const getSecondsToNext5Min = () => {
const now = new Date();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const ms = now.getMilliseconds();
const next30 = Math.ceil((minutes + 0.01) / 30) * 30;
const next5 = Math.ceil((minutes + 0.01) / 5) * 5;
let next = new Date(now);
next.setMinutes(next30, 0, 0);
next.setMinutes(next5, 0, 0);
if (next <= now) {
next.setMinutes(next.getMinutes() + 30);
next.setMinutes(next.getMinutes() + 5);
}
return Math.floor((next - now) / 1000);
};
useEffect(() => {
const update = () => setSecondsToNextUpdate(getSecondsToNext30Min());
const update = () => setSecondsToNextUpdate(getSecondsToNext5Min());
update();
const interval = setInterval(update, 1000);
return () => clearInterval(interval);
@@ -143,7 +143,7 @@ export default function UptimeStatusIsland() {
if (cache) {
try {
const { key, data: cachedData } = JSON.parse(cache);
if (key === getCurrent30MinKey() && cachedData) {
if (key === getCurrent5MinKey() && cachedData) {
setData(cachedData);
setLoading(false);
return;
@@ -163,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 30-min key
// Cache with current 5-min key
const cacheKey = 'uptimeStatusCache';
sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json }));
sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json }));
} catch (err) {
setError(err.message || 'Unknown error');
} finally {
@@ -173,7 +173,7 @@ export default function UptimeStatusIsland() {
}
}, []);
// Scheduled fetch logic (every 30 min, update cache)
// Scheduled fetch logic (every 5 min, update cache)
const fetchData = useCallback(async () => {
setLoading(true);
setError(null);
@@ -182,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 30-min key
// Cache with current 5-min key
const cacheKey = 'uptimeStatusCache';
sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json }));
sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json }));
} catch (err) {
setError(err.message || 'Unknown error');
} finally {
@@ -197,16 +197,16 @@ export default function UptimeStatusIsland() {
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const ms = now.getMilliseconds();
const next30 = Math.ceil((minutes + 0.01) / 30) * 30;
const next5 = Math.ceil((minutes + 0.01) / 5) * 5;
let next = new Date(now);
next.setMinutes(next30, 0, 0);
next.setMinutes(next5, 0, 0);
if (next <= now) {
next.setMinutes(next.getMinutes() + 30);
next.setMinutes(next.getMinutes() + 5);
}
const msToNext = next - now;
const timeout = setTimeout(() => {
fetchData();
const interval = setInterval(fetchData, 30 * 60 * 1000);
const interval = setInterval(fetchData, 5 * 60 * 1000);
fetchData.interval = interval;
}, msToNext);
return () => {
@@ -247,7 +247,7 @@ export default function UptimeStatusIsland() {
return badgeRefs.current[monitorId][badge];
};
const totalBarSeconds = 30 * 60;
const totalBarSeconds = 5 * 60;
const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0;
const barPercent = (barValue / totalBarSeconds) * 100;
const barGradient = 'linear-gradient(90deg, #0161ef 0%, #0154cf 100%)';

2
src/pages/[lang]/uptime.astro
View File

@@ -85,7 +85,7 @@ const metadata = {
<div class="backdrop-blur-sm bg-blue-50/50 dark:bg-blue-900/20 rounded-lg p-4 border-l-4 border-blue-500">
<h4 class="font-semibold text-blue-800 dark:text-blue-200 mb-1">🔄 Updates</h4>
<p class="text-sm text-blue-700 dark:text-blue-300">
Status checks every 30 minutes with automatic refresh
Status checks every 5 minutes with automatic refresh
</p>
</div>
<div class="backdrop-blur-sm bg-green-50/50 dark:bg-green-900/20 rounded-lg p-4 border-l-4 border-green-500">