Moduletrace/wireguard-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update clients fetch function

Browse Source
This commit is contained in:
tben
2026-09-27 06:59:16 +01:00
parent c23c8f73cd
commit 8ed5fd1845
24 changed files with 280 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/admin/(hooks)/use-dashboard-data.ts
+3 -2
View File
@@ -1,8 +1,9 @@
import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
import type { BUN_SQLITE_WGUI_CLIENTS, BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
export default function useDashboardData() {
const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
table: "clients",
sql_query: {
order: { field: "created_at", strategy: "DESC" },
src/pages/admin/(sections)/peers-table-section.tsx
+2 -2
View File
@@ -7,10 +7,10 @@ import Span from "@/src/components/twui/layout/Span";
import AdminCard from "@/src/components/general/admin-card";
import ClientsTable from "@/src/components/general/clients-table";
import useClientRulesMap from "@/src/hooks/use-client-rules-map";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Props = {
clients?: BUN_SQLITE_WGUI_CLIENTS[];
clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
};
const RECENT_LIMIT = 8;
src/pages/admin/clients/(sections)/clients-table-section.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import Stack from "@/src/components/twui/layout/Stack";
import ClientFormModal from "../(partials)/client-form-modal";
import useClientRulesMap from "@/src/hooks/use-client-rules-map";
import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Props = {
addOpen: boolean;
@@ -20,7 +20,7 @@ type Props = {
export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
const [query, setQuery] = useState("");
const { res } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
const { res } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
table: "clients",
sql_query: {
order: { field: "created_at", strategy: "DESC" },
src/pages/admin/hosts/(functions)/derive-host-config.ts
+2 -3
View File
@@ -1,11 +1,10 @@
import { AppData } from "@/src/data/app-data";
import deriveWireguardInterfaceName from "@/src/utils/derive-wireguard-interface-name";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
import type { BUN_SQLITE_WGUI_HOSTS_JOIN, BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Params = {
host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
clients?: BUN_SQLITE_WGUI_CLIENTS[];
clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
};
export default function deriveHostConfig({ host, clients }: Params) {
src/pages/admin/hosts/(hooks)/use-host-data.ts
+3 -5
View File
@@ -1,8 +1,6 @@
import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
import type {
BUN_SQLITE_WGUI_CLIENTS,
BUN_SQLITE_WGUI_HOSTS,
} from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
import { useContext } from "react";
import { AppContext } from "@/src/pages/__root";
@@ -15,7 +13,7 @@ export default function useHostData() {
initial_res: pageProps?.hosts || undefined,
});
const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
table: "clients",
limit: 100,
initial_res: pageProps?.clients || undefined,
src/pages/admin/hosts/(partials)/host-card.tsx
+37 -29
View File
@@ -1,4 +1,4 @@
import { GlobeCheck, Server } from "lucide-react";
import { Edit2, Eye, GlobeCheck, Server } from "lucide-react";
import AdminCard from "@/src/components/general/admin-card";
import DeleteHostButton from "@/src/components/general/delete-host-button";
import Button from "@/src/components/twui/layout/Button";
@@ -8,6 +8,7 @@ import Stack from "@/src/components/twui/layout/Stack";
import Tag from "@/src/components/twui/elements/Tag";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import { AppData } from "@/src/data/app-data";
import Link from "@/src/components/twui/layout/Link";
type Props = {
host: BUN_SQLITE_WGUI_HOSTS;
@@ -17,47 +18,54 @@ type Props = {
export default function HostCard({ host, client_count }: Props) {
const host_id = host.id || 0;
const title = host_id == 0 ? "Main Host" : ` Host #${host_id}`;
const host_url = `/admin/hosts/${host_id}`;
const edit_url = `/admin/hosts/${host_id}/edit`;
const clients_url = `/admin/hosts/${host_id}/clients`;
const title = host_id == 0 ? "Main Host" : host.name || `Host #${host_id}`;
return (
<AdminCard className="w-full p-5 flex flex-col gap-4">
<Row className="justify-between items-center gap-3 flex-wrap">
<Stack className="gap-2">
<Row className="gap-2 items-center">
<GlobeCheck size={15} className="opacity-50" />
<Span className="text-[14px] font-semibold leading-none">
{title}
<Link href={host_url}>
<Stack className="gap-2">
<Row className="gap-2 items-center">
<GlobeCheck size={15} className="opacity-50" />
<Span className="text-[14px] font-semibold leading-none">
{title}
</Span>
</Row>
<Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
{host.wg_ip_address || "Not configured"}
</Span>
</Row>
<Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
{host.wg_ip_address || "Not configured"}
</Span>
</Stack>
</Stack>
</Link>
<Row className="gap-2">
<Button
title="View Host"
size="small"
variant="outlined"
href={`/admin/hosts/${host_id}`}
>
View
</Button>
<Button
title="Edit Host"
size="small"
variant="outlined"
href={`/admin/hosts/${host_id}/edit`}
>
Edit
</Button>
<Button
title="Host Clients"
size="small"
variant="outlined"
href={`/admin/hosts/${host_id}/clients`}
href={clients_url}
>
Clients
</Button>
<Button
title="View Host"
size="small"
variant="ghost"
href={host_url}
>
<Eye size={17} />
</Button>
<Button
title="Edit Host"
size="small"
variant="ghost"
href={edit_url}
>
<Edit2 size={17} />
</Button>
<DeleteHostButton host_id={host_id} />
</Row>
</Row>
src/pages/admin/hosts/(partials)/host-stat-cell.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import Stack from "@/src/components/twui/layout/Stack";
type Props = {
label: string;
value: string;
value: string | number;
};
export default function HostStatCell({ label, value }: Props) {
@@ -17,4 +17,4 @@ export default function HostStatCell({ label, value }: Props) {
</Span>
</Stack>
);
}
}
src/pages/admin/hosts/(sections)/interface-config-section.tsx
+5 -8
View File
@@ -8,22 +8,19 @@ import Row from "@/src/components/twui/layout/Row";
import Span from "@/src/components/twui/layout/Span";
import Stack from "@/src/components/twui/layout/Stack";
import deriveHostConfig from "../(functions)/derive-host-config";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import Divider from "@/src/components/twui/layout/Divider";
import H3 from "@/src/components/twui/layout/H3";
import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
import { useContext } from "react";
import { AppContext } from "@/src/pages/__root";
type Props = {
host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
clients?: BUN_SQLITE_WGUI_CLIENTS[];
clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
};
export default function InterfaceConfigSection({
host,
clients,
}: Props) {
export default function InterfaceConfigSection({ host, clients }: Props) {
const { pageProps } = useContext(AppContext);
const final_host: BUN_SQLITE_WGUI_HOSTS_JOIN = host
@@ -96,14 +93,14 @@ export default function InterfaceConfigSection({
/>
);
})}
<Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
{/* <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
<Span className="font-mono text-[12px] text-foreground-light/35 dark:text-foreground-dark/35">
# Public key ·{" "}
{config.public_key
? `${config.public_key.slice(0, 24)}…`
: "Not generated"}
</Span>
</Row>
</Row> */}
</Stack>
</AdminCard>
);
src/pages/admin/hosts/(sections)/main-host-status-section.tsx
+9 -7
View File
@@ -5,12 +5,12 @@ import Span from "@/src/components/twui/layout/Span";
import Stack from "@/src/components/twui/layout/Stack";
import deriveHostConfig from "../(functions)/derive-host-config";
import { twMerge } from "tailwind-merge";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Props = {
host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
clients?: BUN_SQLITE_WGUI_CLIENTS[];
clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
};
export default function MainHostStatusSection({ host, clients }: Props) {
@@ -30,10 +30,12 @@ export default function MainHostStatusSection({ host, clients }: Props) {
value: String(config.client_count),
},
{
label: "Public key",
value: config.public_key
? `${config.public_key.slice(0, 20)}…`
: "Not generated",
label: "Public IP",
value: host?.public_ip_address || "Not generated",
},
{
label: "Listen Port",
value: host?.listen_port || "No Listen Port",
},
];
@@ -64,7 +66,7 @@ export default function MainHostStatusSection({ host, clients }: Props) {
{config.config_path}
</Span>
</Row>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-5 pt-4 border-t border-slate-200 dark:border-white/10">
<div className="grid grid-cols-2 lg:grid-cols-5 gap-x-4 gap-y-5 pt-4 border-t border-slate-200 dark:border-white/10">
{stats.map((stat) => (
<HostStatCell
key={stat.label}
src/pages/admin/hosts/[host_id]/clients/(partials)/clients-list.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import useClientRulesMap from "@/src/hooks/use-client-rules-map";
import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
import { AppContext } from "@/src/pages/__root";
import { useContext } from "react";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Props = {
host_id: string | number;
@@ -16,7 +16,7 @@ type Props = {
export default function ClientsList({ host_id }: Props) {
const { pageProps } = useContext(AppContext);
const { res: clients } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
const { res: clients } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
table: "clients",
sql_query: {
query: {
src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/add-client-rule-form.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import { Plus } from "lucide-react";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
import Button from "@/src/components/twui/layout/Button";
import Stack from "@/src/components/twui/layout/Stack";
import Tag from "@/src/components/twui/elements/Tag";
@@ -13,7 +13,7 @@ import {
} from "../../(partials)/client-rules/client-rule-draft";
type Props = {
client: BUN_SQLITE_WGUI_CLIENTS;
client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
};
export default function AddClientRuleForm({ client }: Props) {
src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-detail-actions.tsx
+2 -2
View File
@@ -2,10 +2,10 @@ import { useState } from "react";
import { Pencil, Trash2 } from "lucide-react";
import Button from "@/src/components/twui/layout/Button";
import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
type Props = {
client: BUN_SQLITE_WGUI_CLIENTS;
client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
};
export default function ClientDetailActions({ client }: Props) {
src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts
+4 -9
View File
@@ -1,7 +1,6 @@
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
import grabClients from "@/src/functions/backend/db/clients/grab-clients";
import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
import BunSQLite from "@moduletrace/bun-sqlite";
import type { PagePropsType, PageQueryObject } from "@/src/types";
import type { BunextPageServerFn } from "@moduletrace/bunext/types";
type ClientEditPageQuery = PageQueryObject & {
@@ -11,12 +10,8 @@ type ClientEditPageQuery = PageQueryObject & {
const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
const page_query = query as ClientEditPageQuery;
const client_res = await BunSQLite.select<
BUN_SQLITE_WGUI_CLIENTS,
TableType
>({
table: "clients",
targetId: page_query.client_id,
const client_res = await grabClients({
client_id: page_query.client_id,
});
const client = client_res.singleRes || null;
src/pages/admin/hosts/[host_id]/clients/[client_id]/index.server.ts
+4 -10
View File
@@ -1,8 +1,6 @@
import type {
BUN_SQLITE_WGUI_CLIENTS,
BUN_SQLITE_WGUI_HOSTS,
} from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import { AppData } from "@/src/data/app-data";
import grabClients from "@/src/functions/backend/db/clients/grab-clients";
import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
import generateWireguardClientQR from "@/src/functions/backend/setup/generate-wireguard-client-qr";
import readWireguardClientConfig from "@/src/functions/backend/setup/read-wireguard-client-config";
@@ -17,12 +15,8 @@ type ClientPageQuery = PageQueryObject & {
const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
const page_query = query as ClientPageQuery;
const client_res = await BunSQLite.select<
BUN_SQLITE_WGUI_CLIENTS,
TableType
>({
table: "clients",
targetId: page_query.client_id,
const client_res = await grabClients({
client_id: page_query.client_id,
});
const client = client_res.singleRes || null;
src/pages/admin/hosts/[host_id]/clients/index.server.ts
+4 -16
View File
@@ -1,7 +1,5 @@
import type {
BUN_SQLITE_WGUI_CLIENTS,
BUN_SQLITE_WGUI_HOSTS,
} from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import grabClients from "@/src/functions/backend/db/clients/grab-clients";
import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
import BunSQLite from "@moduletrace/bun-sqlite";
@@ -19,18 +17,8 @@ const server: BunextPageServerFn<PagePropsType> = async ({
TableType
>({ table: "hosts", targetId: page_query.host_id });
const host_clients = await BunSQLite.select<
BUN_SQLITE_WGUI_CLIENTS,
TableType
>({
table: "clients",
query: {
query: {
host_id: {
value: page_query.host_id,
},
},
},
const host_clients = await grabClients({
host_id: page_query.host_id,
});
const clients = host_clients.payload || null;
src/pages/admin/hosts/[host_id]/index.server.ts
+4 -16
View File
@@ -1,7 +1,5 @@
import type {
BUN_SQLITE_WGUI_CLIENTS,
BUN_SQLITE_WGUI_HOSTS,
} from "@/db/types/db";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import grabClients from "@/src/functions/backend/db/clients/grab-clients";
import grabHostDirnames from "@/src/functions/backend/setup/grab-host-dir-names";
import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
import BunSQLite from "@moduletrace/bun-sqlite";
@@ -24,18 +22,8 @@ const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
}
: null;
const host_clients = await BunSQLite.select<
BUN_SQLITE_WGUI_CLIENTS,
TableType
>({
table: "clients",
query: {
query: {
host_id: {
value: page_query.host_id,
},
},
},
const host_clients = await grabClients({
host_id: page_query.host_id,
});
return {
src/pages/admin/hosts/[host_id]/index.tsx
+8 -5
View File
@@ -35,13 +35,16 @@ export default function AdminSingleHostPage() {
);
}
const title = host_id == 0 ? "Main Host" : `Host #${host_id}`;
const title = host_id == 0 ? "Main Host" : host?.name || `Host #${host_id}`;
return (
<>
<AdminHero
title={host ? title : "Host"}
description="WireGuard server configuration and interface details"
description={
host?.short_description ||
"WireGuard server configuration and interface details"
}
buttons={
<>
<Button
@@ -50,7 +53,7 @@ export default function AdminSingleHostPage() {
variant="outlined"
href={`/admin/hosts/${host_id}/edit`}
>
Edit Host
Edit
</Button>
<Button
title="View Clients"
@@ -77,10 +80,10 @@ export default function AdminSingleHostPage() {
<Stack className="w-full px-6 pb-8 gap-5 items-stretch">
<MainHostStatusSection host={host} clients={clients} />
<HostPublicIpSection
{/* <HostPublicIpSection
host_id={host_id}
current_ip={host?.public_ip_address || ""}
/>
/> */}
<InterfaceConfigSection host={host} clients={clients} />
</Stack>
</>
src/pages/admin/hosts/index.server.ts
+4 -11
View File
@@ -1,8 +1,6 @@
import type {
BUN_SQLITE_WGUI_CLIENTS,
BUN_SQLITE_WGUI_HOSTS,
} from "@/db/types/db";
import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import grabClients from "@/src/functions/backend/db/clients/grab-clients";
import type { PagePropsType, TableType } from "@/src/types";
import BunSQLite from "@moduletrace/bun-sqlite";
import type { BunextPageServerFn } from "@moduletrace/bunext/types";
@@ -22,12 +20,7 @@ const server: BunextPageServerFn<PagePropsType> = async (ctx) => {
table: "hosts",
});
const clients_res = await BunSQLite.select<
BUN_SQLITE_WGUI_CLIENTS,
TableType
>({
table: "clients",
});
const clients_res = await grabClients();
return {
props: {