Enhance UptimeStatusIsland component with improved time formatting and timezone support
- Updated formatLocalTime function to accept a timezone parameter, allowing for dynamic local time display. - Modified heartbeat time display to include both local and UTC formats for better user clarity. - Ensured handling of invalid date scenarios to improve robustness of date formatting.
This commit is contained in:
@@ -44,12 +44,15 @@ function getUptime24hBg(uptime) {
|
|||||||
return 'bg-red-600 text-white dark:bg-red-800 dark:text-white';
|
return 'bg-red-600 text-white dark:bg-red-800 dark:text-white';
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatLocalTime(rawTime) {
|
function formatLocalTime(rawTime, zone = 'utc') {
|
||||||
if (!rawTime) return '';
|
if (!rawTime) return '';
|
||||||
// Parse the API's custom format as UTC
|
// Parse the API's custom format as UTC
|
||||||
const dt = DateTime.fromFormat(rawTime, 'yyyy-MM-dd HH:mm:ss.SSS', { zone: 'utc' });
|
const dt = DateTime.fromFormat(rawTime, 'yyyy-MM-dd HH:mm:ss.SSS', { zone: 'utc' });
|
||||||
// Always show in UTC, format: dd-MM-yyyy, HH:mm:ss UTC
|
// Convert to user's zone if provided and valid
|
||||||
return dt.isValid ? dt.toFormat('dd-MM-yyyy, HH:mm:ss') + ' UTC' : 'Invalid DateTime UTC';
|
const localDt = dt.isValid ? dt.setZone(zone) : null;
|
||||||
|
return localDt && localDt.isValid
|
||||||
|
? localDt.toFormat('dd-MM-yyyy, HH:mm:ss z')
|
||||||
|
: 'Invalid DateTime';
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function UptimeStatusIsland() {
|
export default function UptimeStatusIsland() {
|
||||||
@@ -236,11 +239,16 @@ export default function UptimeStatusIsland() {
|
|||||||
{Array.from({ length: 40 }).map((_, i) => {
|
{Array.from({ length: 40 }).map((_, i) => {
|
||||||
const hbArr = monitor.heartbeatHistory ?? [];
|
const hbArr = monitor.heartbeatHistory ?? [];
|
||||||
const hb = hbArr.slice(-40)[i];
|
const hb = hbArr.slice(-40)[i];
|
||||||
const localTime = hb ? formatLocalTime(hb.time) : '';
|
const localTime = hb ? formatLocalTime(hb.time, userZone) : '';
|
||||||
|
const utcTime = hb ? formatLocalTime(hb.time, 'utc') : '';
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
key={i}
|
key={i}
|
||||||
title={hb ? `Status: ${hb.status === 1 ? 'Up' : 'Down'}\nTime: ${localTime}` : ''}
|
title={
|
||||||
|
hb
|
||||||
|
? `Status: ${hb.status === 1 ? 'Up' : 'Down'}\nLocal: ${localTime}\nUTC: ${utcTime}`
|
||||||
|
: ''
|
||||||
|
}
|
||||||
className={`w-full h-4 rounded-sm ${hb ? getHeartbeatColor(hb.status) : 'bg-gray-400 dark:bg-gray-600'} block`}
|
className={`w-full h-4 rounded-sm ${hb ? getHeartbeatColor(hb.status) : 'bg-gray-400 dark:bg-gray-600'} block`}
|
||||||
></span>
|
></span>
|
||||||
);
|
);
|
||||||
|
Reference in New Issue
Block a user