Integrate timeUtils for timezone-aware timestamp display

- Import timeUtils functions in App.js and History.js
- Replace native toLocaleString/toLocaleTimeString with formatLocalTime and formatChartTime
- Ensures all timestamps respect user's local timezone throughout the dashboard
- Improves consistency of time display across all components
This commit is contained in:
Nate Emmert committed 2025-12-12 13:34:42 -05:00
1 parent 4e4f2fb324
commit f86d290be6
2 files changed
+7 -12

No files matched your search

+4 -3
View File
@@ -6,6 +6,7 @@ import './App.css';
import SettingsWizard from './SettingsWizard';
import History from './History';
import SLA from './SLA';
import { formatLocalTime, formatLocalTimeOnly, formatChartTime } from './utils/timeUtils';
function Dashboard() {
const [resources, setResources] = useState([]);
@@ -200,7 +201,7 @@ function Dashboard() {
{!isEditing && resource.lastCheck && (
<p className="last-check">
Last: {new Date(resource.lastCheck).toLocaleString()}
Last: {formatLocalTime(resource.lastCheck)}
</p>
)}
</div>
@@ -685,7 +686,7 @@ function ResourceDetail() {
if (!resource) return <div className="container">Resource not found</div>;
const chartData = resource.stats.checks.map((check) => ({
time: new Date(check.checked_at).toLocaleTimeString(),
time: formatChartTime(check.checked_at),
responseTime: check.response_time,
status: check.status === 'up' ? 1 : 0,
}));
@@ -767,7 +768,7 @@ function ResourceDetail() {
{resource.stats.checks.slice(-10).reverse().map((check, idx) => (
<tr key={idx} style={{ borderBottom: '1px solid #eee' }}>
<td style={{ padding: '0.75rem' }}>
{new Date(check.checked_at).toLocaleString()}
{formatLocalTime(check.checked_at)}
</td>
<td style={{ padding: '0.75rem' }}>
<span className={`status-badge status-${check.status}`}>
+3 -9
View File
@@ -12,6 +12,7 @@ import {
ResponsiveContainer,
} from 'recharts';
import './App.css';
import { formatChartTime } from './utils/timeUtils';
function History() {
const [historyData, setHistoryData] = useState([]);
@@ -241,8 +242,7 @@ function History() {
function prepareChartData(checks) {
return checks.map((check) => {
const date = new Date(check.checked_at);
const label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
const label = formatChartTime(check.checked_at);
return {
label,
responseTime: check.response_time || 0,
@@ -298,16 +298,10 @@ function prepareAveragedChartData(checks, days) {
const chartData = Array.from(buckets.entries())
.sort((a, b) => a[0] - b[0])
.map(([timestamp, data]) => {
const date = new Date(timestamp);
const avgResponse = data.upCount > 0 ? Math.round(data.totalResponse / data.upCount) : 0;
const uptime = Math.round((data.upCount / data.checks.length) * 100);
let label;
if (intervalHours === 1) {
label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
} else {
label = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit' })}`;
}
const label = formatChartTime(timestamp);
return {
label,