feat(admin): live redis kill-switch on tunnel actions, sortable columns + CSV export + bulk actions, Node 24 LTS
WS1: pin all Docker stages to node:24.16.0-alpine; add engines node>=20. WS2: lib/redis.ts gains TTL-backed redisSet, redisDel, setTunnelActive (writes tunnel:active:<sub>=1/0 EX 30, TUNNEL_ACTIVE_TTL override, no-op without REDIS_URL); wired into tunnel active/delete/reassign routes. WS3: sortable columns, CSV export routes (token excluded), and bulk actions (self-account guard) across users/tunnels/audit admin tables.
This commit is contained in:
Gerhard Scheikl
@@ -3,9 +3,12 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { formatBytes, formatDate } from '@/lib/format';
|
||||
import type { TunnelItem } from '@/lib/admin/list';
|
||||
import { SortHeader, downloadUrl, type SortOrder } from '../table-ui';
|
||||
|
||||
const PER_PAGE = 25;
|
||||
|
||||
type BulkResult = { ok: number; fail: number };
|
||||
|
||||
export function TunnelsTable({
|
||||
initialTunnels,
|
||||
initialTotal,
|
||||
@@ -18,22 +21,33 @@ export function TunnelsTable({
|
||||
const [page, setPage] = useState(1);
|
||||
const [search, setSearch] = useState('');
|
||||
const [status, setStatus] = useState('');
|
||||
const [sort, setSort] = useState('created_at');
|
||||
const [order, setOrder] = useState<SortOrder>('desc');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notice, setNotice] = useState<string | null>(null);
|
||||
const [busyId, setBusyId] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [bulkBusy, setBulkBusy] = useState(false);
|
||||
const [bulkProgress, setBulkProgress] = useState<string | null>(null);
|
||||
|
||||
const queryParams = useCallback(() => {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
perPage: String(PER_PAGE),
|
||||
sort,
|
||||
order,
|
||||
});
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
if (status) params.set('status', status);
|
||||
return params;
|
||||
}, [page, search, status, sort, order]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
perPage: String(PER_PAGE),
|
||||
});
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
if (status) params.set('status', status);
|
||||
const res = await fetch(`/api/admin/tunnels?${params.toString()}`, {
|
||||
const res = await fetch(`/api/admin/tunnels?${queryParams().toString()}`, {
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
if (!res.ok) {
|
||||
@@ -43,12 +57,13 @@ export function TunnelsTable({
|
||||
const data = (await res.json()) as { tunnels: TunnelItem[]; total: number };
|
||||
setTunnels(data.tunnels);
|
||||
setTotal(data.total);
|
||||
setSelected(new Set());
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, search, status]);
|
||||
}, [queryParams]);
|
||||
|
||||
// First page is server-rendered; skip the on-mount fetch to avoid racing the
|
||||
// SSR session-cookie refresh (which intermittently 401'd).
|
||||
@@ -62,6 +77,16 @@ export function TunnelsTable({
|
||||
return () => clearTimeout(t);
|
||||
}, [load]);
|
||||
|
||||
function onSort(col: string) {
|
||||
setPage(1);
|
||||
if (col === sort) {
|
||||
setOrder((o) => (o === 'asc' ? 'desc' : 'asc'));
|
||||
} else {
|
||||
setSort(col);
|
||||
setOrder('asc');
|
||||
}
|
||||
}
|
||||
|
||||
async function act(
|
||||
id: string,
|
||||
label: string,
|
||||
@@ -172,7 +197,82 @@ export function TunnelsTable({
|
||||
);
|
||||
}
|
||||
|
||||
function toggleRow(id: string) {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const pageIds = tunnels.map((t) => t.user_id);
|
||||
const allSelected =
|
||||
pageIds.length > 0 && pageIds.every((id) => selected.has(id));
|
||||
function toggleAll() {
|
||||
setSelected((prev) => {
|
||||
if (pageIds.every((id) => prev.has(id))) return new Set();
|
||||
return new Set(pageIds);
|
||||
});
|
||||
}
|
||||
|
||||
async function runBulk(
|
||||
label: string,
|
||||
perItem: (t: TunnelItem) => Promise<boolean>,
|
||||
confirmMsg?: string,
|
||||
) {
|
||||
const targets = tunnels.filter((t) => selected.has(t.user_id));
|
||||
if (targets.length === 0) return;
|
||||
if (confirmMsg && !window.confirm(confirmMsg)) return;
|
||||
setBulkBusy(true);
|
||||
setError(null);
|
||||
setNotice(null);
|
||||
const result: BulkResult = { ok: 0, fail: 0 };
|
||||
for (let i = 0; i < targets.length; i++) {
|
||||
setBulkProgress(`${label}: ${i + 1}/${targets.length}…`);
|
||||
try {
|
||||
const ok = await perItem(targets[i]);
|
||||
if (ok) result.ok++;
|
||||
else result.fail++;
|
||||
} catch {
|
||||
result.fail++;
|
||||
}
|
||||
}
|
||||
setBulkProgress(null);
|
||||
setBulkBusy(false);
|
||||
const parts = [`${result.ok} ${label.toLowerCase()}`];
|
||||
if (result.fail) parts.push(`${result.fail} failed`);
|
||||
setNotice(parts.join(', '));
|
||||
await load();
|
||||
}
|
||||
|
||||
async function setActiveOne(t: TunnelItem, active: boolean): Promise<boolean> {
|
||||
const res = await fetch(`/api/admin/tunnels/${t.user_id}/active`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_active: active }),
|
||||
});
|
||||
return res.ok;
|
||||
}
|
||||
|
||||
async function deleteOne(t: TunnelItem): Promise<boolean> {
|
||||
const res = await fetch(`/api/admin/tunnels/${t.user_id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
return res.ok;
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
const params = new URLSearchParams({ sort, order });
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
if (status) params.set('status', status);
|
||||
downloadUrl(`/api/admin/tunnels/export?${params.toString()}`);
|
||||
}
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
|
||||
const selectedCount = selected.size;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -211,11 +311,67 @@ export function TunnelsTable({
|
||||
<button className="secondary btn-sm" type="button" onClick={load}>
|
||||
Refresh
|
||||
</button>
|
||||
<div className="toolbar-actions">
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
onClick={exportCsv}
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error">{error}</p>}
|
||||
{notice && <p className="success">{notice}</p>}
|
||||
|
||||
{selectedCount > 0 && (
|
||||
<div className="bulk-bar">
|
||||
<span className="bulk-count">{selectedCount} selected</span>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() => runBulk('Activated', (t) => setActiveOne(t, true))}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() =>
|
||||
runBulk('Deactivated', (t) => setActiveOne(t, false))
|
||||
}
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
className="btn-danger btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() =>
|
||||
runBulk(
|
||||
'Deleted',
|
||||
deleteOne,
|
||||
`Delete ${selectedCount} selected tunnel(s)? This frees their subdomains.`,
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() => setSelected(new Set())}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
{bulkProgress && <span className="muted">{bulkProgress}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="muted">Loading…</p>
|
||||
) : tunnels.length === 0 ? (
|
||||
@@ -225,17 +381,60 @@ export function TunnelsTable({
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Subdomain</th>
|
||||
<th className="col-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="Select all on page"
|
||||
checked={allSelected}
|
||||
onChange={toggleAll}
|
||||
/>
|
||||
</th>
|
||||
<SortHeader
|
||||
label="Subdomain"
|
||||
col="subdomain"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<th>Owner</th>
|
||||
<th>Status</th>
|
||||
<th>Usage</th>
|
||||
<th>Last seen</th>
|
||||
<SortHeader
|
||||
label="Status"
|
||||
col="is_active"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<SortHeader
|
||||
label="Usage"
|
||||
col="usage_pct"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<SortHeader
|
||||
label="Last seen"
|
||||
col="last_seen_at"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tunnels.map((t) => (
|
||||
<tr key={t.user_id}>
|
||||
<tr
|
||||
key={t.user_id}
|
||||
className={selected.has(t.user_id) ? 'row-selected' : undefined}
|
||||
>
|
||||
<td className="col-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label={`Select ${t.subdomain}`}
|
||||
checked={selected.has(t.user_id)}
|
||||
onChange={() => toggleRow(t.user_id)}
|
||||
/>
|
||||
</td>
|
||||
<td>{t.subdomain}</td>
|
||||
<td style={{ wordBreak: 'break-all' }}>
|
||||
{t.owner_email ?? '—'}
|
||||
|
||||
Reference in New Issue
Block a user