ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-08 03:15:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes #4844 with more defensive date parsing
All checks were successful
Close stale issues and PRs / stale (push) Successful in 22s
Details

Browse Source
This commit is contained in:
Jamie Curnow
2025-11-07 21:37:22 +10:00
parent 8eba31913f
commit 3c252db46f
9 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Form/AccessField.tsx
View File

@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
import Select, { type ActionMeta, components, type OptionProps } from "react-select"; import Select, { type ActionMeta, components, type OptionProps } from "react-select";
import type { AccessList } from "src/api/backend"; import type { AccessList } from "src/api/backend";
import { useAccessLists } from "src/hooks"; import { useAccessLists } from "src/hooks";
import { DateTimeFormat, intl, T } from "src/locale"; import { formatDateTime, intl, T } from "src/locale";
interface AccessOption { interface AccessOption {
readonly value: number; readonly value: number;
@@ -48,7 +48,7 @@ export function AccessField({ name = "accessListId", label = "access-list", id =
{ {
users: item?.items?.length, users: item?.items?.length,
rules: item?.clients?.length, rules: item?.clients?.length,
date: item?.createdOn ? DateTimeFormat(item?.createdOn) : "N/A", date: item?.createdOn ? formatDateTime(item?.createdOn) : "N/A",
}, },
), ),
icon: <IconLock size={14} className="text-lime" />, icon: <IconLock size={14} className="text-lime" />,

4
frontend/src/components/Form/SSLCertificateField.tsx
View File

@@ -3,7 +3,7 @@ import { Field, useFormikContext } from "formik";
import Select, { type ActionMeta, components, type OptionProps } from "react-select"; import Select, { type ActionMeta, components, type OptionProps } from "react-select";
import type { Certificate } from "src/api/backend"; import type { Certificate } from "src/api/backend";
import { useCertificates } from "src/hooks"; import { useCertificates } from "src/hooks";
import { DateTimeFormat, intl, T } from "src/locale"; import { formatDateTime, intl, T } from "src/locale";
interface CertOption { interface CertOption {
readonly value: number | "new"; readonly value: number | "new";
@@ -75,7 +75,7 @@ export function SSLCertificateField({
data?.map((cert: Certificate) => ({ data?.map((cert: Certificate) => ({
value: cert.id, value: cert.id,
label: cert.niceName, label: cert.niceName,
subLabel: `${cert.provider === "letsencrypt" ? intl.formatMessage({ id: "lets-encrypt" }) : cert.provider} &mdash; ${intl.formatMessage({ id: "expires.on" }, { date: cert.expiresOn ? DateTimeFormat(cert.expiresOn) : "N/A" })}`, subLabel: `${cert.provider === "letsencrypt" ? intl.formatMessage({ id: "lets-encrypt" }) : cert.provider} — ${intl.formatMessage({ id: "expires.on" }, { date: cert.expiresOn ? formatDateTime(cert.expiresOn) : "N/A" })}`,
icon: <IconShield size={14} className="text-pink" />, icon: <IconShield size={14} className="text-pink" />,
})) || []; })) || [];

11
frontend/src/components/Table/Formatter/DateFormatter.tsx
View File

@@ -1,6 +1,6 @@
import cn from "classnames"; import cn from "classnames";
import { differenceInDays, isPast, parseISO } from "date-fns"; import { differenceInDays, isPast } from "date-fns";
import { DateTimeFormat } from "src/locale"; import { formatDateTime, parseDate } from "src/locale";
interface Props { interface Props {
value: string; value: string;
@@ -8,11 +8,12 @@ interface Props {
highlistNearlyExpired?: boolean; highlistNearlyExpired?: boolean;
} }
export function DateFormatter({ value, highlightPast, highlistNearlyExpired }: Props) { export function DateFormatter({ value, highlightPast, highlistNearlyExpired }: Props) {
const dateIsPast = isPast(parseISO(value)); const d = parseDate(value);
const days = differenceInDays(parseISO(value), new Date()); const dateIsPast = d ? isPast(d) : false;
const days = d ? differenceInDays(d, new Date()) : 0;
const cl = cn({ const cl = cn({
"text-danger": highlightPast && dateIsPast, "text-danger": highlightPast && dateIsPast,
"text-warning": highlistNearlyExpired && !dateIsPast && days <= 30 && days >= 0, "text-warning": highlistNearlyExpired && !dateIsPast && days <= 30 && days >= 0,
}); });
return <span className={cl}>{DateTimeFormat(value)}</span>; return <span className={cl}>{formatDateTime(value)}</span>;
} }

4
frontend/src/components/Table/Formatter/DomainsFormatter.tsx
View File

@@ -1,6 +1,6 @@
import cn from "classnames"; import cn from "classnames";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { DateTimeFormat, T } from "src/locale"; import { formatDateTime, T } from "src/locale";
interface Props { interface Props {
domains: string[]; domains: string[];
@@ -53,7 +53,7 @@ export function DomainsFormatter({ domains, createdOn, niceName, provider, color
<div className="font-weight-medium">{...elms}</div> <div className="font-weight-medium">{...elms}</div>
{createdOn ? ( {createdOn ? (
<div className="text-secondary mt-1"> <div className="text-secondary mt-1">
<T id="created-on" data={{ date: DateTimeFormat(createdOn) }} /> <T id="created-on" data={{ date: formatDateTime(createdOn) }} />
</div> </div>
) : null} ) : null}
</div> </div>

4
frontend/src/components/Table/Formatter/EventFormatter.tsx
View File

@@ -1,7 +1,7 @@
import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconLock, IconShield, IconUser } from "@tabler/icons-react"; import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconLock, IconShield, IconUser } from "@tabler/icons-react";
import cn from "classnames"; import cn from "classnames";
import type { AuditLog } from "src/api/backend"; import type { AuditLog } from "src/api/backend";
import { DateTimeFormat, T } from "src/locale"; import { formatDateTime, T } from "src/locale";
const getEventValue = (event: AuditLog) => { const getEventValue = (event: AuditLog) => {
switch (event.objectType) { switch (event.objectType) {
@@ -73,7 +73,7 @@ export function EventFormatter({ row }: Props) {
<T id={`object.event.${row.action}`} tData={{ object: row.objectType }} /> <T id={`object.event.${row.action}`} tData={{ object: row.objectType }} />
&nbsp; &mdash; <span className="badge">{getEventValue(row)}</span> &nbsp; &mdash; <span className="badge">{getEventValue(row)}</span>
</div> </div>
<div className="text-secondary mt-1">{DateTimeFormat(row.createdOn)}</div> <div className="text-secondary mt-1">{formatDateTime(row.createdOn)}</div>
</div> </div>
); );
} }

4
frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx
View File

@@ -1,4 +1,4 @@
import { DateTimeFormat, T } from "src/locale"; import { formatDateTime, T } from "src/locale";
interface Props { interface Props {
value: string; value: string;
@@ -13,7 +13,7 @@ export function ValueWithDateFormatter({ value, createdOn, disabled }: Props) {
</div> </div>
{createdOn ? ( {createdOn ? (
<div className={`text-secondary mt-1 ${disabled ? "text-red" : ""}`}> <div className={`text-secondary mt-1 ${disabled ? "text-red" : ""}`}>
<T id={disabled ? "disabled" : "created-on"} data={{ date: DateTimeFormat(createdOn) }} /> <T id={disabled ? "disabled" : "created-on"} data={{ date: formatDateTime(createdOn) }} />
</div> </div>
) : null} ) : null}
</div> </div>

19
frontend/src/components/Table/Formatter/DateFormatter.test.tsx → frontend/src/locale/Utils.test.tsx
View File

@@ -1,4 +1,4 @@
import { DateTimeFormat } from "src/locale"; import { formatDateTime } from "src/locale";
import { afterAll, beforeAll, describe, expect, it } from "vitest"; import { afterAll, beforeAll, describe, expect, it } from "vitest";
describe("DateFormatter", () => { describe("DateFormatter", () => {
@@ -17,10 +17,7 @@ describe("DateFormatter", () => {
// Mock Intl.DateTimeFormat so formatting is stable regardless of host // Mock Intl.DateTimeFormat so formatting is stable regardless of host
const MockedDateTimeFormat = class extends RealIntl.DateTimeFormat { const MockedDateTimeFormat = class extends RealIntl.DateTimeFormat {
constructor( constructor(_locales?: string | string[], options?: Intl.DateTimeFormatOptions) {
_locales?: string | string[],
options?: Intl.DateTimeFormatOptions,
) {
super(desiredLocale, { super(desiredLocale, {
...options, ...options,
timeZone: desiredTimeZone, timeZone: desiredTimeZone,
@@ -41,37 +38,37 @@ describe("DateFormatter", () => {
it("format date from iso date", () => { it("format date from iso date", () => {
const value = "2024-01-01T00:00:00.000Z"; const value = "2024-01-01T00:00:00.000Z";
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("Monday, 01/01/2024, 12:00:00 am"); expect(text).toBe("Monday, 01/01/2024, 12:00:00 am");
}); });
it("format date from unix timestamp number", () => { it("format date from unix timestamp number", () => {
const value = 1762476112; const value = 1762476112;
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("Friday, 07/11/2025, 12:41:52 am"); expect(text).toBe("Friday, 07/11/2025, 12:41:52 am");
}); });
it("format date from unix timestamp string", () => { it("format date from unix timestamp string", () => {
const value = "1762476112"; const value = "1762476112";
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("Friday, 07/11/2025, 12:41:52 am"); expect(text).toBe("Friday, 07/11/2025, 12:41:52 am");
}); });
it("catch bad format from string", () => { it("catch bad format from string", () => {
const value = "this is not a good date"; const value = "this is not a good date";
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("this is not a good date"); expect(text).toBe("this is not a good date");
}); });
it("catch bad format from number", () => { it("catch bad format from number", () => {
const value = -100; const value = -100;
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("-100"); expect(text).toBe("-100");
}); });
it("catch bad format from number as string", () => { it("catch bad format from number as string", () => {
const value = "-100"; const value = "-100";
const text = DateTimeFormat(value); const text = formatDateTime(value);
expect(text).toBe("-100"); expect(text).toBe("-100");
}); });
}); });

20
frontend/src/locale/DateTimeFormat.ts → frontend/src/locale/Utils.ts
View File

@@ -11,13 +11,19 @@ const isUnixTimestamp = (value: unknown): boolean => {
return false; return false;
}; };
const DateTimeFormat = (value: string | number): string => { const parseDate = (value: string | number): Date | null => {
if (typeof value !== "number" && typeof value !== "string") return `${value}`; if (typeof value !== "number" && typeof value !== "string") return null;
try {
return isUnixTimestamp(value) ? fromUnixTime(+value) : parseISO(`${value}`);
} catch {
return null;
}
};
const formatDateTime = (value: string | number): string => {
const d = parseDate(value);
if (!d) return `${value}`;
try { try {
const d = isUnixTimestamp(value)
? fromUnixTime(+value)
: parseISO(`${value}`);
return intlFormat(d, { return intlFormat(d, {
weekday: "long", weekday: "long",
year: "numeric", year: "numeric",
@@ -33,4 +39,4 @@ const DateTimeFormat = (value: string | number): string => {
} }
}; };
export { DateTimeFormat }; export { formatDateTime, parseDate, isUnixTimestamp };

2
frontend/src/locale/index.ts
View File

@@ -1,2 +1,2 @@
export * from "./DateTimeFormat";
export * from "./IntlProvider"; export * from "./IntlProvider";
export * from "./Utils";