feat: Update date formatting to user-friendly display in various components

This commit is contained in:
Simon Larsen
2025-09-08 21:49:19 +01:00
parent 8d6cc37f7a
commit 0aae7877c7
16 changed files with 20 additions and 19 deletions

View File

@@ -201,12 +201,13 @@ export default class OneUptimeDate {
return this.secondsToFormattedFriendlyTimeString(seconds);
}
public static toTimeString(date: Date | string): string {
public static toTimeString(date: Date | string, use12HourFormat?: boolean): string {
if (typeof date === "string") {
date = this.fromString(date);
}
return moment(date).format("HH:mm");
const format = use12HourFormat || this.getUserPrefers12HourFormat() ? "hh:mm A" : "HH:mm";
return moment(date).format(format);
}
public static isSame(date1: Date, date2: Date): boolean {

View File

@@ -178,7 +178,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
if (field.fieldType === FieldType.Date) {
if (data) {
data = OneUptimeDate.getDateAsLocalFormattedString(
data = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
data as string,
true,
);

View File

@@ -55,7 +55,7 @@ const EventHistoryDayList: FunctionComponent<ComponentProps> = (
width: isMobile ? "100%" : "15%",
}}
>
{OneUptimeDate.getDateAsLocalFormattedString(props.date, true)}
{OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true)}
</div>
<div
style={{

View File

@@ -144,7 +144,7 @@ const LogItem: FunctionComponent<ComponentProps> = (
DATE TIME:
</div>
<div className="text-slate-500 courier-prime">
{OneUptimeDate.getDateAsFormattedString(props.log.time)} &nbsp;{" "}
{OneUptimeDate.getDateAsUserFriendlyFormattedString(props.log.time)} &nbsp;{" "}
</div>
</div>
)}

View File

@@ -192,7 +192,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
column.key && !column.getElement ? (
column.type === FieldType.Date ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsLocalFormattedString(
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
true,
)
@@ -367,7 +367,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
{column.key && !column.getElement ? (
column.type === FieldType.Date ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsLocalFormattedString(
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
true,
)

View File

@@ -20,7 +20,7 @@ const CopilotLastRunAt: FunctionComponent<ComponentProps> = (
<Alert
type={AlertType.INFO}
strongTitle="Data Updated At"
title={`Copilot ran at ${OneUptimeDate.getDateAsLocalFormattedString(props.lastRunAt)}. Please run copilot again to update data.`}
title={`Copilot ran at ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.lastRunAt)}. Please run copilot again to update data.`}
/>
)}

View File

@@ -88,7 +88,7 @@ const CustomMonitorSummaryView: FunctionComponent<ComponentProps> = (
title="Monitored At"
value={
props.monitoredAt
? OneUptimeDate.getDateAsLocalFormattedString(props.monitoredAt)
? OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.monitoredAt)
: "-"
}
/>

View File

@@ -48,7 +48,7 @@ const PingMonitorView: FunctionComponent<ComponentProps> = (
title="Monitored At"
value={
props.probeMonitorResponse?.monitoredAt
? OneUptimeDate.getDateAsLocalFormattedString(
? OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.probeMonitorResponse.monitoredAt,
)
: "-"

View File

@@ -48,7 +48,7 @@ const SSLCertificateMonitorView: FunctionComponent<ComponentProps> = (
title="Issued At"
value={
sslResponse.createdAt
? OneUptimeDate.getDateAsLocalFormattedString(
? OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
sslResponse.createdAt,
)
: "-"
@@ -60,7 +60,7 @@ const SSLCertificateMonitorView: FunctionComponent<ComponentProps> = (
title="Expires At"
value={
sslResponse.expiresAt
? OneUptimeDate.getDateAsLocalFormattedString(
? OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
sslResponse.expiresAt,
)
: "-"

View File

@@ -169,7 +169,7 @@ const ServerMonitorSummaryView: FunctionComponent<ComponentProps> = (
title="Last Ping At"
value={
props.serverMonitorResponse?.requestReceivedAt
? OneUptimeDate.getDateAsLocalFormattedString(
? OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.serverMonitorResponse.requestReceivedAt,
)
: "-"

View File

@@ -175,7 +175,7 @@ const TraceExplorer: FunctionComponent<ComponentProps> = (
</div>
<div className="">
<div className="font-semibold">Seen at:</div>{" "}
<div>{OneUptimeDate.getDateAsFormattedString(span.startTime!)}</div>
<div>{OneUptimeDate.getDateAsUserFriendlyFormattedString(span.startTime!)}</div>
</div>
<div className="">
<div className="font-semibold">Start:</div>{" "}

View File

@@ -65,7 +65,7 @@ export const getAnnouncementEventItem: GetAnnouncementEventItemFunction = (
eventTypeColor: Blue500,
eventSecondDescription: announcement.showAnnouncementAt!
? "Announced at " +
OneUptimeDate.getDateAsLocalFormattedString(
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
announcement.showAnnouncementAt!,
)
: "",

View File

@@ -209,7 +209,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = (
anotherStatus: incident.incidentSeverity?.name,
eventSecondDescription: incident.createdAt
? "Created at " +
OneUptimeDate.getDateAsLocalFormattedString(incident.createdAt!)
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(incident.createdAt!)
: "",
eventTypeColor: Red,
labels:

View File

@@ -19,7 +19,7 @@ RunCron(
async () => {
logger.debug(
"Checking IncomingRequestMonitor:CheckHeartbeat at " +
OneUptimeDate.getDateAsLocalFormattedString(
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
OneUptimeDate.getCurrentDate(),
),
);

View File

@@ -419,7 +419,7 @@ RunCron(
})
.join(", ") || "",
scheduledAt: OneUptimeDate.getDateAsFormattedString(
scheduledAt: OneUptimeDate.getDateAsUserFriendlyFormattedString(
event.startsAt!,
),
eventTitle: event.title || "",

View File

@@ -381,7 +381,7 @@ RunCron(
scheduledEventStateTimeline.scheduledMaintenanceState
?.name || "",
scheduledAt: OneUptimeDate.getDateAsFormattedString(
scheduledAt: OneUptimeDate.getDateAsUserFriendlyFormattedString(
event.startsAt!,
),
eventTitle: event.title || "",