API lib cleanup, 404 hosts WIP

frontend/src/pages/Certificates/CertificateTable.tsx

@@ -1,132 +0,0 @@
-import { IconDotsVertical, IconEdit, IconPower, IconSearch, IconTrash } from "@tabler/icons-react";
-import { Button } from "src/components";
-import { intl } from "src/locale";
-
-export default function CertificateTable() {
-	return (
-		<div className="card mt-4">
-			<div className="card-status-top bg-pink" />
-			<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: "certificates.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-pink">
-									Add Certificate (dropdown)
-								</Button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div id="advanced-table">
-					<div className="table-responsive">
-						<table className="table table-vcenter table-selectable">
-							<thead>
-								<tr>
-									<th className="w-1" />
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Source
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Destination
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											SSL
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Access
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Status
-										</button>
-									</th>
-									<th className="w-1" />
-								</tr>
-							</thead>
-							<tbody className="table-tbody">
-								<tr>
-									<td data-label="Owner">
-										<div className="d-flex py-1 align-items-center">
-											<span
-												className="avatar avatar-2 me-2"
-												style={{
-													backgroundImage:
-														"url(//www.gravatar.com/avatar/6193176330f8d38747f038c170ddb193?default=mm)",
-												}}
-											/>
-										</div>
-									</td>
-									<td data-label="Destination">
-										<div className="flex-fill">
-											<div className="font-weight-medium">
-												<span className="badge badge-lg domain-name">blog.jc21.com</span>
-											</div>
-											<div className="text-secondary mt-1">Created: 20th September 2024</div>
-										</div>
-									</td>
-									<td data-label="Source">http://172.17.0.1:3001</td>
-									<td data-label="SSL">Let's Encrypt</td>
-									<td data-label="Access">Public</td>
-									<td data-label="Status">
-										<span className="badge bg-lime-lt">Online</span>
-									</td>
-									<td data-label="Status" className="text-end">
-										<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">Proxy Host #2</span>
-												<a className="dropdown-item" href="#">
-													<IconEdit size={16} />
-													Edit
-												</a>
-												<a className="dropdown-item" href="#">
-													<IconPower size={16} />
-													Disable
-												</a>
-												<div className="dropdown-divider" />
-												<a className="dropdown-item" href="#">
-													<IconTrash size={16} />
-													Delete
-												</a>
-											</div>
-										</span>
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/pages/Nginx/DeadHosts/Empty.tsx

@@ -4,15 +4,18 @@ import { intl } from "src/locale";
 
 interface Props {
 	tableInstance: ReactTable<any>;
+	onNew?: () => void;
 }
-export default function Empty({ tableInstance }: Props) {
+export default function Empty({ tableInstance, onNew }: 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>
+					<Button className="btn-red my-3" onClick={onNew}>
+						{intl.formatMessage({ id: "dead-hosts.add" })}
+					</Button>
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Nginx/DeadHosts/Table.tsx

@@ -10,8 +10,10 @@ import Empty from "./Empty";
 interface Props {
 	data: DeadHost[];
 	isFetching?: boolean;
+	onDelete?: (id: number) => void;
+	onNew?: () => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, onDelete, onNew }: Props) {
 	const columnHelper = createColumnHelper<DeadHost>();
 	const columns = useMemo(
 		() => [
@@ -78,7 +80,14 @@ export default function Table({ data, isFetching }: Props) {
 									{intl.formatMessage({ id: "action.disable" })}
 								</a>
 								<div className="dropdown-divider" />
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
 									<IconTrash size={16} />
 									{intl.formatMessage({ id: "action.delete" })}
 								</a>
@@ -91,7 +100,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onDelete],
 	);
 
 	const tableInstance = useReactTable<DeadHost>({
@@ -105,5 +114,7 @@ export default function Table({ data, isFetching }: Props) {
 		enableSortingRemoval: false,
 	});
 
-	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+	return (
+		<TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} onNew={onNew} />} />
+	);
 }

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -1,11 +1,16 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { Button, LoadingPage } from "src/components";
 import { useDeadHosts } from "src/hooks";
 import { intl } from "src/locale";
+import { DeadHostModal, DeleteConfirmModal } from "src/modals";
+import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const [deleteId, setDeleteId] = useState(0);
+	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -16,6 +21,11 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async () => {
+		// await deleteUser(deleteId);
+		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
+	};
+
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-red" />
@@ -38,14 +48,30 @@ export default function TableWrapper() {
 										autoComplete="off"
 									/>
 								</div>
-								<Button size="sm" className="btn-red">
+								<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
 									{intl.formatMessage({ id: "dead-hosts.add" })}
 								</Button>
 							</div>
 						</div>
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={data ?? []}
+					isFetching={isFetching}
+					onDelete={(id: number) => setDeleteId(id)}
+					onNew={() => setEditId("new")}
+				/>
+				{editId ? <DeadHostModal id={editId} onClose={() => setEditId(0)} /> : null}
+				{deleteId ? (
+					<DeleteConfirmModal
+						title={intl.formatMessage({ id: "user.delete.title" })}
+						onConfirm={handleDelete}
+						onClose={() => setDeleteId(0)}
+						invalidations={[["dead-hosts"], ["dead-host", deleteId]]}
+					>
+						{intl.formatMessage({ id: "user.delete.content" })}
+					</DeleteConfirmModal>
+				) : null}
 			</div>
 		</div>
 	);