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';
|
||||
}
|
||||
|
||||
function formatLocalTime(rawTime) {
|
||||
function formatLocalTime(rawTime, zone = 'utc') {
|
||||
if (!rawTime) return '';
|
||||
// Parse the API's custom format as 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
|
||||
return dt.isValid ? dt.toFormat('dd-MM-yyyy, HH:mm:ss') + ' UTC' : 'Invalid DateTime UTC';
|
||||
// Convert to user's zone if provided and valid
|
||||
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() {
|
||||
@@ -236,11 +239,16 @@ export default function UptimeStatusIsland() {
|
||||
{Array.from({ length: 40 }).map((_, i) => {
|
||||
const hbArr = monitor.heartbeatHistory ?? [];
|
||||
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 (
|
||||
<span
|
||||
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`}
|
||||
></span>
|
||||
);
|
||||
|
Reference in New Issue
Block a user