docker-images/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-05 15:30:37 +03:00
Code Activity

More react

Browse Source 
- consolidated lang items
- proxy host paths work
This commit is contained in:
Jamie Curnow
2025-10-16 18:59:19 +10:00
parent 7af01d0fc7
commit f2b5b19a83
56 changed files with 946 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="dead-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-red my-3" onClick={onNew}>
<T id="dead-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

20
frontend/src/pages/Nginx/DeadHosts/Table.tsx
View File

@@ -2,10 +2,9 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { DeadHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { CertificateFormatter, DomainsFormatter, EmptyData, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: DeadHost[];
@@ -67,7 +66,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="dead-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "dead-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -129,7 +132,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="dead-host"
objects="dead-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="red"
/>
}
/>
);
}

16
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useDeadHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeadHostModal, showDeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteDeadHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("dead-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleDeadHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["dead-hosts"] });
queryClient.invalidateQueries({ queryKey: ["dead-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("dead-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -53,7 +53,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="dead-hosts.title" />
<T id="dead-hosts" />
</h2>
</div>
{data?.length ? (
@@ -72,7 +72,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
<T id="dead-hosts.add" />
<T id="object.add" tData={{ object: "dead-host" }} />
</Button>
</div>
</div>
@@ -86,10 +86,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showDeadHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "dead-host.delete.title",
title: <T id="object.delete" tData={{ object: "dead-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["dead-hosts"], ["dead-host", id]],
children: <T id="dead-host.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "dead-host" }} />,
})
}
onDisableToggle={handleDisableToggle}

36
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="proxy-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-lime my-3" onClick={onNew}>
<T id="proxy-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

32
frontend/src/pages/Nginx/ProxyHosts/Table.tsx
View File

@@ -2,10 +2,16 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { ProxyHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import {
AccessListFormatter,
CertificateFormatter,
DomainsFormatter,
EmptyData,
GravatarFormatter,
StatusFormatter,
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: ProxyHost[];
@@ -53,12 +59,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return <CertificateFormatter certificate={info.getValue()} />;
},
}),
// TODO: formatter for access list
columnHelper.accessor((row: any) => row.access, {
columnHelper.accessor((row: any) => row.accessList, {
id: "accessList",
header: intl.formatMessage({ id: "column.access" }),
cell: (info: any) => {
return info.getValue();
return <AccessListFormatter access={info.getValue()} />;
},
}),
columnHelper.accessor((row: any) => row.enabled, {
@@ -83,7 +88,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="proxy-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "proxy-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -145,7 +154,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="proxy-host"
objects="proxy-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="lime"
/>
}
/>
);
}

12
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useProxyHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showProxyHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteProxyHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("proxy-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleProxyHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["proxy-hosts"] });
queryClient.invalidateQueries({ queryKey: ["proxy-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("proxy-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -57,7 +57,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="proxy-hosts.title" />
<T id="proxy-hosts" />
</h2>
</div>
{data?.length ? (
@@ -76,7 +76,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
<T id="proxy-hosts.add" />
<T id="object.add" tData={{ object: "proxy-host" }} />
</Button>
</div>
</div>

36
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="redirection-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-yellow my-3" onClick={onNew}>
<T id="redirection-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

20
frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
View File

@@ -2,10 +2,9 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { RedirectionHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { CertificateFormatter, DomainsFormatter, EmptyData, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: RedirectionHost[];
@@ -88,7 +87,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="redirection-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "redirection-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -150,7 +153,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="redirection-host"
objects="redirection-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="yellow"
/>
}
/>
);
}

16
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useRedirectionHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showRedirectionHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteRedirectionHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("redirection-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleRedirectionHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["redirection-hosts"] });
queryClient.invalidateQueries({ queryKey: ["redirection-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("redirection-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -56,7 +56,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="redirection-hosts.title" />
<T id="redirection-hosts" />
</h2>
</div>
{data?.length ? (
@@ -79,7 +79,7 @@ export default function TableWrapper() {
className="btn-yellow"
onClick={() => showRedirectionHostModal("new")}
>
<T id="redirection-hosts.add" />
<T id="object.add" tData={{ object: "redirection-host" }} />
</Button>
</div>
</div>
@@ -93,10 +93,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showRedirectionHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "redirection-host.delete.title",
title: <T id="object.delete" tData={{ object: "redirection-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["redirection-hosts"], ["redirection-host", id]],
children: <T id="redirection-host.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "redirection-host" }} />,
})
}
onDisableToggle={handleDisableToggle}

36
frontend/src/pages/Nginx/Streams/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="streams.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-blue my-3" onClick={onNew}>
<T id="streams.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

26
frontend/src/pages/Nginx/Streams/Table.tsx
View File

@@ -2,10 +2,15 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { Stream } from "src/api/backend";
import { CertificateFormatter, GravatarFormatter, StatusFormatter, ValueWithDateFormatter } from "src/components";
import {
CertificateFormatter,
EmptyData,
GravatarFormatter,
StatusFormatter,
ValueWithDateFormatter,
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: Stream[];
@@ -96,7 +101,11 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="streams.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "stream" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -158,7 +167,16 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="stream"
objects="streams"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="blue"
/>
}
/>
);
}

18
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteStream, toggleStream } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useStreams } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showStreamModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -26,16 +26,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteStream(id);
showSuccess(intl.formatMessage({ id: "notification.stream-deleted" }));
showObjectSuccess("stream", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleStream(id, enabled);
queryClient.invalidateQueries({ queryKey: ["streams"] });
queryClient.invalidateQueries({ queryKey: ["stream", id] });
showSuccess(
intl.formatMessage({ id: enabled ? "notification.stream-enabled" : "notification.stream-disabled" }),
);
showObjectSuccess("stream", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -60,7 +58,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="streams.title" />
<T id="streams" />
</h2>
</div>
{data?.length ? (
@@ -79,7 +77,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
<T id="streams.add" />
<T id="object.add" tData={{ object: "stream" }} />
</Button>
</div>
</div>
@@ -93,10 +91,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showStreamModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "stream.delete.title",
title: <T id="object.delete" tData={{ object: "stream" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["streams"], ["stream", id]],
children: <T id="stream.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "stream" }} />,
})
}
onDisableToggle={handleDisableToggle}