feat(webui): internet sharing UI — exit-offer toggle + peer route-via selector

CellNetwork page (CellPanel):
- Internet Sharing section below service toggles
- Toggle: 'Offer my internet to <cell>' (calls PUT /api/cells/<n>/exit-offer)
- Read-only indicator: whether remote cell offers internet back
- Contextual hints explaining what each party needs to do next

Peers page:
- Fetches connected cells on mount
- Edit modal: Internet Exit dropdown (route-via) showing all connected cells
  with ✓ marker for cells that have offered internet
- Warning if selected cell hasn't offered internet yet
- On save, calls PUT /api/peers/<n>/route-via only when value changed
- Table badge shows 'via <cell>' for peers with active routing

api.js:
- cellLinkAPI.setExitOffer(cellName, offered)
- peerRegistryAPI.setRouteVia(peerName, viaCell)

Tests (vitest + @testing-library/react):
- 19 new frontend tests in src/__tests__/
  - CellNetworkInternetSharing.test.jsx (10 tests)
  - PeersRouteVia.test.jsx (9 tests)
- make test-webui target runs them via docker node:18-alpine

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-01 23:07:50 -04:00
parent 8ea834e108
commit 94957abd23
9 changed files with 395 additions and 5 deletions
+46 -2
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { Plus, Trash2, Edit, Eye, Shield, Copy, Download, Key, AlertTriangle, CheckCircle, Globe, Lock, Users, Server } from 'lucide-react';
import { peerRegistryAPI, wireguardAPI, getCsrfToken } from '../services/api';
import { peerRegistryAPI, wireguardAPI, cellLinkAPI, getCsrfToken } from '../services/api';
import { useConfig } from '../contexts/ConfigContext';
import QRCode from 'qrcode';
@@ -62,6 +62,7 @@ function Peers() {
];
const [peers, setPeers] = useState([]);
const [connectedCells, setConnectedCells] = useState([]);
const [serverConf, setServerConf] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [showAddModal, setShowAddModal] = useState(false);
@@ -77,7 +78,10 @@ function Peers() {
const [errors, setErrors] = useState({});
const [toast, setToast] = useState(null);
useEffect(() => { fetchPeers(); }, []);
useEffect(() => {
fetchPeers();
cellLinkAPI.listConnections().then(r => setConnectedCells(r.data || [])).catch(() => {});
}, []);
const showToast = (msg, type = 'success') => {
setToast({ msg, type });
@@ -249,6 +253,13 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
persistent_keepalive: formData.persistent_keepalive,
});
// Route-via is a separate endpoint (triggers WG + iptables changes)
const oldRouteVia = selectedPeer.route_via || null;
const newRouteVia = formData.route_via || null;
if (oldRouteVia !== newRouteVia) {
await peerRegistryAPI.setRouteVia(selectedPeer.name, newRouteVia);
}
setShowEditModal(false);
setSelectedPeer(null);
fetchPeers();
@@ -317,6 +328,7 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
service_access: peer.service_access || ['calendar', 'files', 'mail', 'webdav'],
peer_access: peer.peer_access !== false,
create_calendar: false,
route_via: peer.route_via || null,
});
setErrors({});
setShowAdvanced(false);
@@ -405,6 +417,33 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
description={`This peer can communicate with other VPN peers (${serverConf?.vpn_network || 'VPN subnet'})`}
/>
</div>
{connectedCells.length > 0 && (
<div>
<div className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
<Globe className="h-4 w-4" /> Internet Exit
</div>
<select
value={data.route_via || ''}
onChange={e => onChange({ route_via: e.target.value || null })}
className="input"
>
<option value="">Direct (this cell's connection)</option>
{connectedCells.map(cell => (
<option key={cell.cell_name} value={cell.cell_name}>
Via {cell.cell_name}
{cell.remote_exit_offered ? ' offers internet' : ''}
</option>
))}
</select>
<p className="text-xs text-gray-400 mt-1">
Route this peer's internet traffic through a connected cell.
{data.route_via && !connectedCells.find(c => c.cell_name === data.route_via)?.remote_exit_offered && (
<span className="text-yellow-600 ml-1">The selected cell hasn't offered their internet yet.</span>
)}
</p>
</div>
)}
</div>
);
@@ -480,6 +519,11 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
<AccessBadge key={s.key} icon={Server} label={s.label} active={(peer.service_access || SERVICES.map(s=>s.key)).includes(s.key)} />
))}
<AccessBadge icon={Users} label="Peers" active={peer.peer_access !== false} />
{peer.route_via && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 mr-1">
<Globe className="h-3 w-3 mr-0.5" />via {peer.route_via}
</span>
)}
</div>
</td>
<td className="px-6 py-4">