mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-10-05 04:10:10 +00:00
React
This commit is contained in:
Jamie Curnow
25
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
Normal file
25
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { Table as ReactTable } from "@tanstack/react-table";
|
||||
import { Button } from "src/components";
|
||||
import { intl } from "src/locale";
|
||||
|
||||
/**
|
||||
* This component should never render as there should always be 1 user minimum,
|
||||
* but I'm keeping it for consistency.
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
tableInstance: ReactTable<any>;
|
||||
}
|
||||
export default function Empty({ tableInstance }: Props) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
|
||||
<div className="text-center my-4">
|
||||
<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-lime my-3">{intl.formatMessage({ id: "proxy-hosts.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
125
frontend/src/pages/Nginx/ProxyHosts/Table.tsx
Normal file
125
frontend/src/pages/Nginx/ProxyHosts/Table.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
|
||||
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 { TableLayout } from "src/components/Table/TableLayout";
|
||||
import { intl } from "src/locale";
|
||||
import Empty from "./Empty";
|
||||
|
||||
interface Props {
|
||||
data: ProxyHost[];
|
||||
isFetching?: boolean;
|
||||
}
|
||||
export default function Table({ data, isFetching }: Props) {
|
||||
const columnHelper = createColumnHelper<ProxyHost>();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
columnHelper.accessor((row: any) => row.owner, {
|
||||
id: "owner",
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return <GravatarFormatter url={value.avatar} name={value.name} />;
|
||||
},
|
||||
meta: {
|
||||
className: "w-1",
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "domainNames",
|
||||
header: intl.formatMessage({ id: "column.source" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return <DomainsFormatter domains={value.domainNames} createdOn={value.createdOn} />;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "forwardHost",
|
||||
header: intl.formatMessage({ id: "column.destination" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return `${value.forwardHost}:${value.forwardPort}`;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.certificate, {
|
||||
id: "certificate",
|
||||
header: intl.formatMessage({ id: "column.ssl" }),
|
||||
cell: (info: any) => {
|
||||
return <CertificateFormatter certificate={info.getValue()} />;
|
||||
},
|
||||
}),
|
||||
// TODO: formatter for access list
|
||||
columnHelper.accessor((row: any) => row.access, {
|
||||
id: "accessList",
|
||||
header: intl.formatMessage({ id: "column.access" }),
|
||||
cell: (info: any) => {
|
||||
return info.getValue();
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.enabled, {
|
||||
id: "enabled",
|
||||
header: intl.formatMessage({ id: "column.status" }),
|
||||
cell: (info: any) => {
|
||||
return <StatusFormatter enabled={info.getValue()} />;
|
||||
},
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: "id", // todo: not needed for a display?
|
||||
cell: (info: any) => {
|
||||
return (
|
||||
<span className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle btn-action btn-sm px-1"
|
||||
data-bs-boundary="viewport"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<IconDotsVertical />
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<span className="dropdown-header">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "proxy-hosts.actions-title",
|
||||
},
|
||||
{ id: info.row.original.id },
|
||||
)}
|
||||
</span>
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconEdit size={16} />
|
||||
{intl.formatMessage({ id: "action.edit" })}
|
||||
</a>
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconPower size={16} />
|
||||
{intl.formatMessage({ id: "action.disable" })}
|
||||
</a>
|
||||
<div className="dropdown-divider" />
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconTrash size={16} />
|
||||
{intl.formatMessage({ id: "action.delete" })}
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
className: "text-end w-1",
|
||||
},
|
||||
}),
|
||||
],
|
||||
[columnHelper],
|
||||
);
|
||||
|
||||
const tableInstance = useReactTable<ProxyHost>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
52
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
Normal file
52
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
import Alert from "react-bootstrap/Alert";
|
||||
import { Button, LoadingPage } from "src/components";
|
||||
import { useProxyHosts } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingPage />;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card mt-4">
|
||||
<div className="card-status-top bg-lime" />
|
||||
<div className="card-table">
|
||||
<div className="card-header">
|
||||
<div className="row w-full">
|
||||
<div className="col">
|
||||
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "proxy-hosts.title" })}</h2>
|
||||
</div>
|
||||
<div className="col-md-auto col-sm-12">
|
||||
<div className="ms-auto d-flex flex-wrap btn-list">
|
||||
<div className="input-group input-group-flat w-auto">
|
||||
<span className="input-group-text input-group-text-sm">
|
||||
<IconSearch size={16} />
|
||||
</span>
|
||||
<input
|
||||
id="advanced-table-search"
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" className="btn-lime">
|
||||
{intl.formatMessage({ id: "proxy-hosts.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table data={data ?? []} isFetching={isFetching} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Nginx/ProxyHosts/index.tsx
Normal file
12
frontend/src/pages/Nginx/ProxyHosts/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const ProxyHosts = () => {
|
||||
return (
|
||||
<HasPermission permission="proxyHosts" type="view">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProxyHosts;
|
||||
Reference in New Issue
Block a user