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

Update UptimeStatusIsland and UpdateTimer components for improved refresh intervals and styling

Browse Source 
- 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.
This commit is contained in:
becarta
2025-06-11 23:37:13 +02:00
parent a67e19a2f8
commit afe9d45b5e
4 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/UptimeStatusIsland.jsx
View File

@@ -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() {
<div className="text-center text-red-500 dark:text-red-400">{error}</div>
) : data && data.publicGroupList && data.publicGroupList.length > 0 ? (
data.publicGroupList.map((group) => (
<section key={group.id} className="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-8 flex flex-col">
<section key={group.id} className="bg-white/40 dark:bg-slate-800/40 backdrop-blur-md border border-gray-200 dark:border-slate-800 rounded-2xl shadow-lg p-8 flex flex-col">
<h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">{group.name}</h2>
<ul className="space-y-6">
{group.monitorList.map((monitor) => (
<li key={monitor.id} className="flex flex-col gap-2 bg-gray-50 dark:bg-slate-900 rounded-xl px-5 py-4 shadow border border-gray-200 dark:border-gray-700">
<li key={monitor.id} className="flex flex-col gap-2 rounded-xl px-5 py-4 shadow border border-gray-200 dark:border-gray-700">
{isMobile ? (
<>
<div className="flex items-center min-w-0 mb-2">