mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-10-04 11:50:09 +00:00
React
This commit is contained in:
Jamie Curnow
20
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
Normal file
20
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Table as ReactTable } from "@tanstack/react-table";
|
||||
import { Button } from "src/components";
|
||||
import { intl } from "src/locale";
|
||||
|
||||
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: "dead-hosts.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-red my-3">{intl.formatMessage({ id: "dead-hosts.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
109
frontend/src/pages/Nginx/DeadHosts/Table.tsx
Normal file
109
frontend/src/pages/Nginx/DeadHosts/Table.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
|
||||
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 { TableLayout } from "src/components/Table/TableLayout";
|
||||
import { intl } from "src/locale";
|
||||
import Empty from "./Empty";
|
||||
|
||||
interface Props {
|
||||
data: DeadHost[];
|
||||
isFetching?: boolean;
|
||||
}
|
||||
export default function Table({ data, isFetching }: Props) {
|
||||
const columnHelper = createColumnHelper<DeadHost>();
|
||||
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.certificate, {
|
||||
id: "certificate",
|
||||
header: intl.formatMessage({ id: "column.ssl" }),
|
||||
cell: (info: any) => {
|
||||
return <CertificateFormatter certificate={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: "dead-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<DeadHost>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
52
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
Normal file
52
frontend/src/pages/Nginx/DeadHosts/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 { useDeadHosts } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "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-red" />
|
||||
<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: "dead-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-red">
|
||||
{intl.formatMessage({ id: "dead-hosts.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table data={data ?? []} isFetching={isFetching} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Nginx/DeadHosts/index.tsx
Normal file
12
frontend/src/pages/Nginx/DeadHosts/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const DeadHosts = () => {
|
||||
return (
|
||||
<HasPermission permission="deadHosts" type="view">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeadHosts;
|
||||
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;
|
||||
20
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
Normal file
20
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Table as ReactTable } from "@tanstack/react-table";
|
||||
import { Button } from "src/components";
|
||||
import { intl } from "src/locale";
|
||||
|
||||
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: "redirection-hosts.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-yellow my-3">{intl.formatMessage({ id: "redirection-hosts.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
130
frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
Normal file
130
frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
|
||||
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 { TableLayout } from "src/components/Table/TableLayout";
|
||||
import { intl } from "src/locale";
|
||||
import Empty from "./Empty";
|
||||
|
||||
interface Props {
|
||||
data: RedirectionHost[];
|
||||
isFetching?: boolean;
|
||||
}
|
||||
export default function Table({ data, isFetching }: Props) {
|
||||
const columnHelper = createColumnHelper<RedirectionHost>();
|
||||
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.forwardHttpCode, {
|
||||
id: "forwardHttpCode",
|
||||
header: intl.formatMessage({ id: "column.http-code" }),
|
||||
cell: (info: any) => {
|
||||
return info.getValue();
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.forwardScheme, {
|
||||
id: "forwardScheme",
|
||||
header: intl.formatMessage({ id: "column.scheme" }),
|
||||
cell: (info: any) => {
|
||||
return info.getValue().toUpperCase();
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.forwardDomainName, {
|
||||
id: "forwardDomainName",
|
||||
header: intl.formatMessage({ id: "column.destination" }),
|
||||
cell: (info: any) => {
|
||||
return info.getValue();
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.certificate, {
|
||||
id: "certificate",
|
||||
header: intl.formatMessage({ id: "column.ssl" }),
|
||||
cell: (info: any) => {
|
||||
return <CertificateFormatter certificate={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: "redirection-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<RedirectionHost>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
52
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
Normal file
52
frontend/src/pages/Nginx/RedirectionHosts/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 { useRedirectionHosts } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const { isFetching, isLoading, isError, error, data } = useRedirectionHosts(["owner", "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-yellow" />
|
||||
<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: "redirection-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-yellow">
|
||||
{intl.formatMessage({ id: "redirection-hosts.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table data={data ?? []} isFetching={isFetching} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Nginx/RedirectionHosts/index.tsx
Normal file
12
frontend/src/pages/Nginx/RedirectionHosts/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const RedirectionHosts = () => {
|
||||
return (
|
||||
<HasPermission permission="redirectionHosts" type="view">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default RedirectionHosts;
|
||||
20
frontend/src/pages/Nginx/Streams/Empty.tsx
Normal file
20
frontend/src/pages/Nginx/Streams/Empty.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Table as ReactTable } from "@tanstack/react-table";
|
||||
import { Button } from "src/components";
|
||||
import { intl } from "src/locale";
|
||||
|
||||
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: "streams.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-blue my-3">{intl.formatMessage({ id: "streams.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
139
frontend/src/pages/Nginx/Streams/Table.tsx
Normal file
139
frontend/src/pages/Nginx/Streams/Table.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
|
||||
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import { useMemo } from "react";
|
||||
import type { Stream } 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: Stream[];
|
||||
isFetching?: boolean;
|
||||
}
|
||||
export default function Table({ data, isFetching }: Props) {
|
||||
const columnHelper = createColumnHelper<Stream>();
|
||||
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: "incomingPort",
|
||||
header: intl.formatMessage({ id: "column.incoming-port" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
// Bit of a hack to reuse the DomainsFormatter component
|
||||
return <DomainsFormatter domains={[value.incomingPort]} createdOn={value.createdOn} />;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "forwardHttpCode",
|
||||
header: intl.formatMessage({ id: "column.destination" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return `${value.forwardingHost}:${value.forwardingPort}`;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "tcpForwarding",
|
||||
header: intl.formatMessage({ id: "column.protocol" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return (
|
||||
<>
|
||||
{value.tcpForwarding ? (
|
||||
<span className="badge badge-lg domain-name">
|
||||
{intl.formatMessage({ id: "streams.tcp" })}
|
||||
</span>
|
||||
) : null}
|
||||
{value.udpForwarding ? (
|
||||
<span className="badge badge-lg domain-name">
|
||||
{intl.formatMessage({ id: "streams.udp" })}
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.certificate, {
|
||||
id: "certificate",
|
||||
header: intl.formatMessage({ id: "column.ssl" }),
|
||||
cell: (info: any) => {
|
||||
return <CertificateFormatter certificate={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: "streams.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<Stream>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
52
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
Normal file
52
frontend/src/pages/Nginx/Streams/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 { useStreams } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "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-blue" />
|
||||
<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: "streams.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-blue">
|
||||
{intl.formatMessage({ id: "streams.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table data={data ?? []} isFetching={isFetching} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Nginx/Streams/index.tsx
Normal file
12
frontend/src/pages/Nginx/Streams/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const Streams = () => {
|
||||
return (
|
||||
<HasPermission permission="streams" type="view">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default Streams;
|
||||
Reference in New Issue
Block a user