diff --git a/src/components/etke.cc/ServerNotificationsBadge.tsx b/src/components/etke.cc/ServerNotificationsBadge.tsx index d492e3a..6e3d26d 100644 --- a/src/components/etke.cc/ServerNotificationsBadge.tsx +++ b/src/components/etke.cc/ServerNotificationsBadge.tsx @@ -6,6 +6,7 @@ import { useNavigate } from "react-router"; import { Fragment, useEffect, useState } from "react"; import { useAppContext } from "../../Context"; import { ServerNotificationsResponse, ServerProcessResponse } from "../../synapse/dataProvider"; +import { getTimeSince } from "../../utils/date"; // 5 minutes const SERVER_NOTIFICATIONS_INTERVAL_TIME = 300000; @@ -23,7 +24,7 @@ const useServerNotifications = () => { const notificationsResponse: ServerNotificationsResponse = await dataProvider.getServerNotifications(etkeccAdmin); setServerNotifications({ ...notificationsResponse, - notifications: notificationsResponse.notifications.reverse(), + notifications: notificationsResponse.notifications, success: notificationsResponse.success }); }; @@ -172,7 +173,7 @@ export const ServerNotificationsBadge = () => { /> {notification.sent_at} + {getTimeSince(notification.sent_at) + " ago"} } /> diff --git a/src/components/etke.cc/ServerNotificationsPage.tsx b/src/components/etke.cc/ServerNotificationsPage.tsx index 2476af8..0713329 100644 --- a/src/components/etke.cc/ServerNotificationsPage.tsx +++ b/src/components/etke.cc/ServerNotificationsPage.tsx @@ -4,9 +4,12 @@ import { useStore } from "react-admin" import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider" import { useAppContext } from "../../Context"; import DeleteIcon from "@mui/icons-material/Delete"; +import { getTimeSince } from "../../utils/date"; +import { Tooltip } from "@mui/material"; + const DisplayTime = ({ date }: { date: string }) => { - const dateFromDateString = new Date(date); - return <>{dateFromDateString.toLocaleString()}; + const dateFromDateString = new Date(date.replace(" ", "T") + "Z"); + return {{getTimeSince(date) + " ago"}}; }; const ServerNotificationsPage = () => { diff --git a/src/components/etke.cc/ServerStatusPage.tsx b/src/components/etke.cc/ServerStatusPage.tsx index b06dbfb..1bcfd88 100644 --- a/src/components/etke.cc/ServerStatusPage.tsx +++ b/src/components/etke.cc/ServerStatusPage.tsx @@ -5,16 +5,7 @@ import CloseIcon from "@mui/icons-material/Close"; import EngineeringIcon from '@mui/icons-material/Engineering'; import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider"; import ServerCommandsPanel from "./ServerCommandsPanel"; - -const getTimeSince = (date: string) => { - const now = new Date(); - const past = new Date(date); - const diffInMinutes = Math.floor((now.getTime() - past.getTime()) / (1000 * 60)); - - if (diffInMinutes < 1) return "a couple of seconds"; - if (diffInMinutes === 1) return "1 minute"; - return `${diffInMinutes} minutes`; -}; +import { getTimeSince } from "../../utils/date"; const StatusChip = ({ isOkay, size = "medium", command }: { isOkay: boolean, size?: "small" | "medium", command?: string }) => { let label = "OK"; diff --git a/src/utils/date.ts b/src/utils/date.ts index 0a64b3c..e000e12 100644 --- a/src/utils/date.ts +++ b/src/utils/date.ts @@ -26,3 +26,29 @@ export const dateFormatter = (v: string | number | Date | undefined | null): str // target format yyyy-MM-ddThh:mm return `${year}-${month}-${day}T${hour}:${minute}`; }; + +// assuming date is in format "2025-02-26 20:52:00" where no timezone is specified +export const getTimeSince = (date: string) => { + const nowUTC = new Date().getTime(); + const past = new Date(date.replace(" ", "T") + "Z"); + + const pastUTC = past.getTime(); + const diffInMs = nowUTC - pastUTC; + + const diffInMinutes = Math.floor(diffInMs / (1000 * 60)); + + // Remove or comment out the console.log for production + console.log("FOR now, date", new Date(nowUTC).toISOString(), new Date(pastUTC).toISOString(), "diffInMinutes", diffInMinutes); + + if (diffInMinutes < 1) return "a couple of seconds"; + if (diffInMinutes === 1) return "1 minute"; + if (diffInMinutes < 60) return `${diffInMinutes} minutes`; + if (diffInMinutes < 120) return "1 hour"; + if (diffInMinutes < 24 * 60) return `${Math.floor(diffInMinutes / 60)} hours`; + if (diffInMinutes < 48 * 60) return "1 day"; + if (diffInMinutes < 7 * 24 * 60) return `${Math.floor(diffInMinutes / (24 * 60))} days`; + if (diffInMinutes < 14 * 24 * 60) return "1 week"; + if (diffInMinutes < 30 * 24 * 60) return `${Math.floor(diffInMinutes / (7 * 24 * 60))} weeks`; + if (diffInMinutes < 60 * 24 * 60) return "1 month"; + return `${Math.floor(diffInMinutes / (30 * 24 * 60))} months`; +}; \ No newline at end of file