feat: fix audit log display, add dashboard counts, restructure WireGuard page, add translations
This commit is contained in:
xtcnet
parent
f8ad3fe807
commit
ec55362d15
5 changed files with 373 additions and 288 deletions
|
|
@ -1,3 +1,4 @@
|
||||||
|
import db from "../db.js";
|
||||||
import internalDeadHost from "./dead-host.js";
|
import internalDeadHost from "./dead-host.js";
|
||||||
import internalProxyHost from "./proxy-host.js";
|
import internalProxyHost from "./proxy-host.js";
|
||||||
import internalRedirectionHost from "./redirection-host.js";
|
import internalRedirectionHost from "./redirection-host.js";
|
||||||
|
|
@ -23,15 +24,29 @@ const internalReport = {
|
||||||
|
|
||||||
return Promise.all(promises);
|
return Promise.all(promises);
|
||||||
})
|
})
|
||||||
.then((counts) => {
|
.then(async (counts) => {
|
||||||
|
const knex = db();
|
||||||
|
let wgServers = 0;
|
||||||
|
let wgClients = 0;
|
||||||
|
try {
|
||||||
|
const srvResult = await knex("wg_interface").count("id as count").first();
|
||||||
|
wgServers = srvResult?.count || 0;
|
||||||
|
const cliResult = await knex("wg_client").count("id as count").first();
|
||||||
|
wgClients = cliResult?.count || 0;
|
||||||
|
} catch (_) {
|
||||||
|
// WireGuard tables may not exist yet
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
proxy: counts.shift(),
|
proxy: counts.shift(),
|
||||||
redirection: counts.shift(),
|
redirection: counts.shift(),
|
||||||
stream: counts.shift(),
|
stream: counts.shift(),
|
||||||
dead: counts.shift(),
|
dead: counts.shift(),
|
||||||
|
wgServers: Number(wgServers),
|
||||||
|
wgClients: Number(wgClients),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default internalReport;
|
export default internalReport;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,41 +34,11 @@ export function SiteFooter() {
|
||||||
<div className="col-12 col-lg-auto mt-3 mt-lg-0">
|
<div className="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||||
<ul className="list-inline list-inline-dots mb-0">
|
<ul className="list-inline list-inline-dots mb-0">
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
© 2025{" "}
|
© D3V.AC 2026{" "}
|
||||||
<a href="https://jc21.com" rel="noreferrer" target="_blank" className="link-secondary">
|
|
||||||
jc21.com
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
|
||||||
Theme by{" "}
|
|
||||||
<a href="https://tabler.io" rel="noreferrer" target="_blank" className="link-secondary">
|
|
||||||
Tabler
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="list-inline-item">
|
|
||||||
<a
|
|
||||||
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${getVersion()}`}
|
|
||||||
className="link-secondary"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
{getVersion()}{" "}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{versionData?.updateAvailable && versionData?.latest && (
|
|
||||||
<li className="list-inline-item">
|
|
||||||
<a
|
|
||||||
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${versionData.latest}`}
|
|
||||||
className="link-warning fw-bold"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
title={`New version ${versionData.latest} is available`}
|
|
||||||
>
|
|
||||||
<T id="update-available" data={{ latestVersion: versionData.latest }} />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconLock, IconShield, IconUser } from "@tabler/icons-react";
|
import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconLock, IconNetwork, IconServer, IconShield, IconUser } from "@tabler/icons-react";
|
||||||
import cn from "classnames";
|
import cn from "classnames";
|
||||||
import type { AuditLog } from "src/api/backend";
|
import type { AuditLog } from "src/api/backend";
|
||||||
import { useLocaleState } from "src/context";
|
import { useLocaleState } from "src/context";
|
||||||
|
|
@ -17,6 +17,12 @@ const getEventValue = (event: AuditLog) => {
|
||||||
return event.meta?.incomingPort || "N/A";
|
return event.meta?.incomingPort || "N/A";
|
||||||
case "certificate":
|
case "certificate":
|
||||||
return event.meta?.domainNames?.join(", ") || event.meta?.niceName || "N/A";
|
return event.meta?.domainNames?.join(", ") || event.meta?.niceName || "N/A";
|
||||||
|
case "wireguard-server":
|
||||||
|
return event.meta?.name || `Server #${event.objectId}`;
|
||||||
|
case "wireguard-client":
|
||||||
|
return event.meta?.name || `Client #${event.objectId}`;
|
||||||
|
case "wireguard-server-links":
|
||||||
|
return `Server #${event.objectId}`;
|
||||||
default:
|
default:
|
||||||
return `UNKNOWN EVENT TYPE: ${event.objectType}`;
|
return `UNKNOWN EVENT TYPE: ${event.objectType}`;
|
||||||
}
|
}
|
||||||
|
|
@ -58,6 +64,13 @@ const getIcon = (row: AuditLog) => {
|
||||||
case "certificate":
|
case "certificate":
|
||||||
ico = <IconShield size={16} className={c} />;
|
ico = <IconShield size={16} className={c} />;
|
||||||
break;
|
break;
|
||||||
|
case "wireguard-server":
|
||||||
|
case "wireguard-server-links":
|
||||||
|
ico = <IconServer size={16} className={c} />;
|
||||||
|
break;
|
||||||
|
case "wireguard-client":
|
||||||
|
ico = <IconNetwork size={16} className={c} />;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
return ico;
|
return ico;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,22 @@
|
||||||
import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc } from "@tabler/icons-react";
|
import {
|
||||||
|
IconArrowsCross,
|
||||||
|
IconBolt,
|
||||||
|
IconBoltOff,
|
||||||
|
IconDisc,
|
||||||
|
IconNetwork,
|
||||||
|
IconServer,
|
||||||
|
} from "@tabler/icons-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { HasPermission } from "src/components";
|
import { HasPermission } from "src/components";
|
||||||
import { useHostReport } from "src/hooks";
|
import { useHostReport } from "src/hooks";
|
||||||
import { T } from "src/locale";
|
import { T } from "src/locale";
|
||||||
import { DEAD_HOSTS, PROXY_HOSTS, REDIRECTION_HOSTS, STREAMS, VIEW } from "src/modules/Permissions";
|
import {
|
||||||
|
DEAD_HOSTS,
|
||||||
|
PROXY_HOSTS,
|
||||||
|
REDIRECTION_HOSTS,
|
||||||
|
STREAMS,
|
||||||
|
VIEW,
|
||||||
|
} from "src/modules/Permissions";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const { data: hostReport } = useHostReport();
|
const { data: hostReport } = useHostReport();
|
||||||
|
|
@ -122,6 +135,58 @@ const Dashboard = () => {
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</HasPermission>
|
</HasPermission>
|
||||||
|
{/* WireGuard Servers */}
|
||||||
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<a
|
||||||
|
href="/wireguard"
|
||||||
|
className="card card-sm card-link card-link-pop"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
navigate("/wireguard");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-auto">
|
||||||
|
<span className="bg-purple text-white avatar">
|
||||||
|
<IconServer />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<div className="font-weight-medium">
|
||||||
|
<T id="wireguard-servers.count" data={{ count: hostReport?.wgServers ?? 0 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* WireGuard Clients */}
|
||||||
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<a
|
||||||
|
href="/wireguard"
|
||||||
|
className="card card-sm card-link card-link-pop"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
navigate("/wireguard");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-auto">
|
||||||
|
<span className="bg-cyan text-white avatar">
|
||||||
|
<IconNetwork />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<div className="font-weight-medium">
|
||||||
|
<T id="wireguard-clients.count" data={{ count: hostReport?.wgClients ?? 0 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -48,8 +48,6 @@ function timeAgo(date: string | null): string {
|
||||||
}
|
}
|
||||||
|
|
||||||
function WireGuard() {
|
function WireGuard() {
|
||||||
const [activeTab, setActiveTab] = useState<"servers" | "clients">("servers");
|
|
||||||
|
|
||||||
const { data: clients, isLoading: clientsLoading } = useWgClients();
|
const { data: clients, isLoading: clientsLoading } = useWgClients();
|
||||||
const { data: interfaces, isLoading: ifacesLoading } = useWgInterfaces();
|
const { data: interfaces, isLoading: ifacesLoading } = useWgInterfaces();
|
||||||
|
|
||||||
|
|
@ -64,19 +62,12 @@ function WireGuard() {
|
||||||
|
|
||||||
const [clientFilter, setClientFilter] = useState("");
|
const [clientFilter, setClientFilter] = useState("");
|
||||||
const [serverFilter, setServerFilter] = useState("");
|
const [serverFilter, setServerFilter] = useState("");
|
||||||
|
const [selectedServerId, setSelectedServerId] = useState<number | "all">("all");
|
||||||
|
|
||||||
if (clientsLoading || ifacesLoading) {
|
if (clientsLoading || ifacesLoading) {
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredClients = clients?.filter(
|
|
||||||
(c) =>
|
|
||||||
!clientFilter ||
|
|
||||||
c.name.toLowerCase().includes(clientFilter.toLowerCase()) ||
|
|
||||||
c.ipv4Address.includes(clientFilter) ||
|
|
||||||
c.interfaceName?.toLowerCase().includes(clientFilter.toLowerCase()),
|
|
||||||
);
|
|
||||||
|
|
||||||
const filteredInterfaces = interfaces?.filter(
|
const filteredInterfaces = interfaces?.filter(
|
||||||
(i) =>
|
(i) =>
|
||||||
!serverFilter ||
|
!serverFilter ||
|
||||||
|
|
@ -85,6 +76,23 @@ function WireGuard() {
|
||||||
(i.host && i.host.toLowerCase().includes(serverFilter.toLowerCase()))
|
(i.host && i.host.toLowerCase().includes(serverFilter.toLowerCase()))
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const filteredClients = clients?.filter((c) => {
|
||||||
|
// Filter by selected server
|
||||||
|
if (selectedServerId !== "all" && c.interfaceId !== selectedServerId) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Filter by search text
|
||||||
|
if (
|
||||||
|
clientFilter &&
|
||||||
|
!c.name.toLowerCase().includes(clientFilter.toLowerCase()) &&
|
||||||
|
!c.ipv4Address.includes(clientFilter) &&
|
||||||
|
!c.interfaceName?.toLowerCase().includes(clientFilter.toLowerCase())
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
// Server Handlers
|
// Server Handlers
|
||||||
const handleNewServer = async () => {
|
const handleNewServer = async () => {
|
||||||
const result = (await EasyModal.show(WireGuardServerModal)) as any;
|
const result = (await EasyModal.show(WireGuardServerModal)) as any;
|
||||||
|
|
@ -159,173 +167,15 @@ function WireGuard() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* ================== SERVERS TABLE ================== */}
|
||||||
<div className="card">
|
<div className="card mb-4">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
|
<h3 className="card-title">
|
||||||
<li className="nav-item cursor-pointer">
|
<IconServer className="me-2" size={20} />
|
||||||
<a className={`nav-link ${activeTab === "servers" ? "active" : ""}`} onClick={() => setActiveTab("servers")}>
|
WireGuard Servers
|
||||||
<IconServer className="me-1" size={16}/> Servers
|
|
||||||
<span className="badge bg-blue ms-2">{interfaces?.length || 0}</span>
|
<span className="badge bg-blue ms-2">{interfaces?.length || 0}</span>
|
||||||
</a>
|
</h3>
|
||||||
</li>
|
|
||||||
<li className="nav-item cursor-pointer">
|
|
||||||
<a className={`nav-link ${activeTab === "clients" ? "active" : ""}`} onClick={() => setActiveTab("clients")}>
|
|
||||||
<IconNetwork className="me-1" size={16}/> Clients
|
|
||||||
<span className="badge bg-green ms-2">{clients?.length || 0}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tab Content */}
|
|
||||||
{activeTab === "clients" && (
|
|
||||||
<div className="table-responsive">
|
|
||||||
<div className="p-3 border-bottom d-flex align-items-center justify-content-between">
|
|
||||||
<div className="d-flex w-100 flex-column flex-md-row justify-content-between align-items-center">
|
|
||||||
<div className="text-muted d-none d-md-block">
|
|
||||||
Listing WireGuard Clients
|
|
||||||
</div>
|
|
||||||
<div className="d-flex flex-wrap gap-2 justify-content-md-end w-100 w-md-auto align-items-center">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
placeholder="Search clients..."
|
|
||||||
value={clientFilter}
|
|
||||||
onChange={(e) => setClientFilter(e.target.value)}
|
|
||||||
style={{ width: 250 }}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-primary btn-sm"
|
|
||||||
onClick={handleNewClient}
|
|
||||||
id="wg-new-client-btn"
|
|
||||||
>
|
|
||||||
<IconPlus size={16} className="me-1" />
|
|
||||||
New Client
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<table className="table table-vcenter table-nowrap card-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Server</th>
|
|
||||||
<th>IP Address</th>
|
|
||||||
<th>Last Handshake</th>
|
|
||||||
<th>Transfer ↓ / ↑</th>
|
|
||||||
<th className="text-end">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{filteredClients?.map((client) => {
|
|
||||||
const isConnected =
|
|
||||||
client.latestHandshakeAt &&
|
|
||||||
Date.now() - new Date(client.latestHandshakeAt).getTime() <
|
|
||||||
3 * 60 * 1000;
|
|
||||||
return (
|
|
||||||
<tr key={client.id}>
|
|
||||||
<td>
|
|
||||||
<span
|
|
||||||
className={`badge ${
|
|
||||||
!client.enabled
|
|
||||||
? "bg-secondary"
|
|
||||||
: isConnected
|
|
||||||
? "bg-success"
|
|
||||||
: "bg-warning"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{!client.enabled
|
|
||||||
? "Disabled"
|
|
||||||
: isConnected
|
|
||||||
? "Connected"
|
|
||||||
: "Idle"}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="fw-bold">{client.name}</td>
|
|
||||||
<td>
|
|
||||||
<div className="text-muted">{client.interfaceName}</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code>{client.ipv4Address}</code>
|
|
||||||
</td>
|
|
||||||
<td>{timeAgo(client.latestHandshakeAt)}</td>
|
|
||||||
<td>
|
|
||||||
<div className="d-flex flex-column text-muted small">
|
|
||||||
<span>↓ {formatBytes(client.transferRx)}</span>
|
|
||||||
<span>↑ {formatBytes(client.transferTx)}</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-end">
|
|
||||||
<div className="btn-group btn-group-sm">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-outline-primary"
|
|
||||||
title="QR Code"
|
|
||||||
onClick={() =>
|
|
||||||
handleQR(client.id, client.name)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<IconQrcode size={16} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-outline-primary"
|
|
||||||
title="Download Config"
|
|
||||||
onClick={() =>
|
|
||||||
handleDownload(client.id, client.name)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<IconDownload size={16} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn ${client.enabled ? "btn-outline-warning" : "btn-outline-success"}`}
|
|
||||||
title={
|
|
||||||
client.enabled ? "Disable" : "Enable"
|
|
||||||
}
|
|
||||||
onClick={() =>
|
|
||||||
handleToggleClient(client.id, client.enabled)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{client.enabled ? (
|
|
||||||
<IconPlayerPause size={16} />
|
|
||||||
) : (
|
|
||||||
<IconPlayerPlay size={16} />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-outline-danger"
|
|
||||||
title="Delete"
|
|
||||||
onClick={() =>
|
|
||||||
handleDeleteClient(client.id, client.name)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<IconTrash size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{(!filteredClients || filteredClients.length === 0) && (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={7} className="text-center text-muted py-5">
|
|
||||||
{clientFilter
|
|
||||||
? "No clients match your filter"
|
|
||||||
: "No WireGuard clients yet. Click 'New Client' to create one."}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "servers" && (
|
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<div className="p-3 border-bottom d-flex align-items-center justify-content-between">
|
<div className="p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
<div className="d-flex w-100 flex-column flex-md-row justify-content-between align-items-center">
|
<div className="d-flex w-100 flex-column flex-md-row justify-content-between align-items-center">
|
||||||
|
|
@ -345,6 +195,7 @@ function WireGuard() {
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-primary btn-sm"
|
className="btn btn-primary btn-sm"
|
||||||
onClick={handleNewServer}
|
onClick={handleNewServer}
|
||||||
|
id="wg-new-server-btn"
|
||||||
>
|
>
|
||||||
<IconPlus size={16} className="me-1" />
|
<IconPlus size={16} className="me-1" />
|
||||||
New Server
|
New Server
|
||||||
|
|
@ -420,17 +271,188 @@ function WireGuard() {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
{(!interfaces || interfaces.length === 0) && (
|
{(!filteredInterfaces || filteredInterfaces.length === 0) && (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={7} className="text-center text-muted py-5">
|
<td colSpan={7} className="text-center text-muted py-5">
|
||||||
No WireGuard servers configured.
|
{serverFilter
|
||||||
|
? "No servers match your filter"
|
||||||
|
: "No WireGuard servers configured. Click 'New Server' to create one."}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ================== CLIENTS TABLE ================== */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title">
|
||||||
|
<IconNetwork className="me-2" size={20} />
|
||||||
|
WireGuard Clients
|
||||||
|
<span className="badge bg-green ms-2">{clients?.length || 0}</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<div className="p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||||
|
<div className="d-flex w-100 flex-column flex-md-row justify-content-between align-items-center">
|
||||||
|
<div className="text-muted d-none d-md-block">
|
||||||
|
Listing WireGuard Clients
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-wrap gap-2 justify-content-md-end w-100 w-md-auto align-items-center">
|
||||||
|
{/* Server filter dropdown */}
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
style={{ width: 200 }}
|
||||||
|
value={selectedServerId}
|
||||||
|
onChange={(e) =>
|
||||||
|
setSelectedServerId(e.target.value === "all" ? "all" : Number(e.target.value))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="all">All Servers</option>
|
||||||
|
{interfaces?.map((iface) => (
|
||||||
|
<option key={iface.id} value={iface.id}>
|
||||||
|
{iface.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Search clients..."
|
||||||
|
value={clientFilter}
|
||||||
|
onChange={(e) => setClientFilter(e.target.value)}
|
||||||
|
style={{ width: 250 }}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary btn-sm"
|
||||||
|
onClick={handleNewClient}
|
||||||
|
id="wg-new-client-btn"
|
||||||
|
>
|
||||||
|
<IconPlus size={16} className="me-1" />
|
||||||
|
New Client
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table className="table table-vcenter table-nowrap card-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Server</th>
|
||||||
|
<th>IP Address</th>
|
||||||
|
<th>Last Handshake</th>
|
||||||
|
<th>Transfer ↓ / ↑</th>
|
||||||
|
<th className="text-end">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filteredClients?.map((client) => {
|
||||||
|
const isConnected =
|
||||||
|
client.latestHandshakeAt &&
|
||||||
|
Date.now() - new Date(client.latestHandshakeAt).getTime() <
|
||||||
|
3 * 60 * 1000;
|
||||||
|
return (
|
||||||
|
<tr key={client.id}>
|
||||||
|
<td>
|
||||||
|
<span
|
||||||
|
className={`badge ${
|
||||||
|
!client.enabled
|
||||||
|
? "bg-secondary"
|
||||||
|
: isConnected
|
||||||
|
? "bg-success"
|
||||||
|
: "bg-warning"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{!client.enabled
|
||||||
|
? "Disabled"
|
||||||
|
: isConnected
|
||||||
|
? "Connected"
|
||||||
|
: "Idle"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="fw-bold">{client.name}</td>
|
||||||
|
<td>
|
||||||
|
<div className="text-muted">{client.interfaceName || "—"}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{client.ipv4Address}</code>
|
||||||
|
</td>
|
||||||
|
<td>{timeAgo(client.latestHandshakeAt)}</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex flex-column text-muted small">
|
||||||
|
<span>↓ {formatBytes(client.transferRx)}</span>
|
||||||
|
<span>↑ {formatBytes(client.transferTx)}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="text-end">
|
||||||
|
<div className="btn-group btn-group-sm">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
title="QR Code"
|
||||||
|
onClick={() =>
|
||||||
|
handleQR(client.id, client.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconQrcode size={16} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
title="Download Config"
|
||||||
|
onClick={() =>
|
||||||
|
handleDownload(client.id, client.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconDownload size={16} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn ${client.enabled ? "btn-outline-warning" : "btn-outline-success"}`}
|
||||||
|
title={
|
||||||
|
client.enabled ? "Disable" : "Enable"
|
||||||
|
}
|
||||||
|
onClick={() =>
|
||||||
|
handleToggleClient(client.id, client.enabled)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{client.enabled ? (
|
||||||
|
<IconPlayerPause size={16} />
|
||||||
|
) : (
|
||||||
|
<IconPlayerPlay size={16} />
|
||||||
)}
|
)}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-danger"
|
||||||
|
title="Delete"
|
||||||
|
onClick={() =>
|
||||||
|
handleDeleteClient(client.id, client.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{(!filteredClients || filteredClients.length === 0) && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} className="text-center text-muted py-5">
|
||||||
|
{clientFilter || selectedServerId !== "all"
|
||||||
|
? "No clients match your filter"
|
||||||
|
: "No WireGuard clients yet. Click 'New Client' to create one."}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue