404 hosts search

Author: jc21

frontend/src/pages/AuditLog/AuditTable.tsx

@@ -1,4 +1,3 @@
-import { IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { LoadingPage } from "src/components";
@@ -28,21 +27,6 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.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>
-							</div>
-						</div>
 					</div>
 				</div>
 				<Table data={data ?? []} isFetching={isFetching} onSelectItem={setEventId} />

frontend/src/pages/AuditLog/TableWrapper.tsx

@@ -12,6 +12,7 @@ import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
+	const [search, setSearch] = useState("");
 	const [deleteId, setDeleteId] = useState(0);
 	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
@@ -36,6 +37,13 @@ export default function TableWrapper() {
 		showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
 	};
 
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((item) => {
+			return item.domainNames.some((domain: string) => domain.toLowerCase().includes(search));
+		});
+	}
+
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-red" />
@@ -56,6 +64,7 @@ export default function TableWrapper() {
 										type="text"
 										className="form-control form-control-sm"
 										autoComplete="off"
+										onChange={(e: any) => setSearch(e.target.value.toLowerCase())}
 									/>
 								</div>
 								<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
@@ -66,7 +75,7 @@ export default function TableWrapper() {
 					</div>
 				</div>
 				<Table
-					data={data ?? []}
+					data={filtered ?? data ?? []}
 					isFetching={isFetching}
 					onEdit={(id: number) => setEditId(id)}
 					onDelete={(id: number) => setDeleteId(id)}

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

@@ -1,7 +1,7 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
 import { intl } from "src/locale";
 
-export default function AuditTable() {
+export default function SettingTable() {
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-teal" />