wip: wireguard
This commit is contained in:
Cloud
@@ -27,12 +27,18 @@ function Routing() {
|
||||
const [showFwForm, setShowFwForm] = useState(false);
|
||||
const [newFwRule, setNewFwRule] = useState({ rule_type: 'INPUT', source: '', destination: '', action: 'ACCEPT', protocol: 'ALL', port_range: '' });
|
||||
const [fwSubmitting, setFwSubmitting] = useState(false);
|
||||
// Network Configuration state
|
||||
const [networkStatus, setNetworkStatus] = useState(null);
|
||||
const [networkLoading, setNetworkLoading] = useState(false);
|
||||
const [networkError, setNetworkError] = useState(null);
|
||||
const [isSettingUp, setIsSettingUp] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRoutingStatus();
|
||||
fetchNatRules();
|
||||
fetchPeerRoutes();
|
||||
fetchFirewallRules();
|
||||
fetchNetworkStatus();
|
||||
}, []);
|
||||
|
||||
const fetchRoutingStatus = async () => {
|
||||
@@ -85,6 +91,53 @@ function Routing() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNetworkStatus = async () => {
|
||||
setNetworkLoading(true);
|
||||
setNetworkError(null);
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/wireguard/network/status');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setNetworkStatus(data);
|
||||
} else {
|
||||
throw new Error('Failed to fetch network status');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch network status:', error);
|
||||
setNetworkError('Failed to fetch network status');
|
||||
} finally {
|
||||
setNetworkLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const setupNetworkConfiguration = async () => {
|
||||
setIsSettingUp(true);
|
||||
setNetworkError(null);
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/wireguard/network/setup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('Network setup successful:', data);
|
||||
// Refresh network status
|
||||
await fetchNetworkStatus();
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || 'Failed to setup network configuration');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to setup network configuration:', error);
|
||||
setNetworkError(error.message);
|
||||
} finally {
|
||||
setIsSettingUp(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNatInputChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setNewNat((prev) => ({
|
||||
@@ -216,6 +269,7 @@ function Routing() {
|
||||
|
||||
const tabs = [
|
||||
{ id: 'overview', name: 'Overview', icon: Activity },
|
||||
{ id: 'network', name: 'Network Config', icon: Wifi },
|
||||
{ id: 'nat', name: 'NAT Rules', icon: Shield },
|
||||
{ id: 'peers', name: 'Peer Routes', icon: Wifi },
|
||||
{ id: 'firewall', name: 'Firewall', icon: Settings },
|
||||
@@ -332,6 +386,148 @@ function Routing() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'network' && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Network Configuration</h3>
|
||||
<button
|
||||
className="btn btn-primary flex items-center"
|
||||
onClick={setupNetworkConfiguration}
|
||||
disabled={isSettingUp}
|
||||
>
|
||||
{isSettingUp ? (
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
) : (
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
{isSettingUp ? 'Setting up...' : 'Setup Network'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{networkError && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-red-800">{networkError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{networkLoading ? (
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
) : networkStatus ? (
|
||||
<div className="space-y-6">
|
||||
{/* Network Status Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-3 h-3 rounded-full mr-3 ${networkStatus.ip_forwarding ? 'bg-green-400' : 'bg-red-400'}`}></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">IP Forwarding</p>
|
||||
<p className="text-xs text-gray-500">{networkStatus.ip_forwarding ? 'Enabled' : 'Disabled'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-3 h-3 rounded-full mr-3 ${networkStatus.interface_status ? 'bg-green-400' : 'bg-red-400'}`}></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">WireGuard Interface</p>
|
||||
<p className="text-xs text-gray-500">{networkStatus.interface_status ? 'Up' : 'Down'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-3 h-3 rounded-full mr-3 ${networkStatus.nat_rules ? 'bg-green-400' : 'bg-red-400'}`}></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">NAT Rules</p>
|
||||
<p className="text-xs text-gray-500">{networkStatus.nat_rules ? 'Configured' : 'Missing'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-3 h-3 rounded-full mr-3 ${networkStatus.forwarding_rules ? 'bg-green-400' : 'bg-red-400'}`}></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Forwarding Rules</p>
|
||||
<p className="text-xs text-gray-500">{networkStatus.forwarding_rules ? 'Configured' : 'Missing'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration Details */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="text-md font-medium text-gray-900 mb-3">Configuration Details</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Last Updated:</span>
|
||||
<span className="text-gray-900">{new Date(networkStatus.timestamp).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">IP Forwarding:</span>
|
||||
<span className={`font-medium ${networkStatus.ip_forwarding ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{networkStatus.ip_forwarding ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">WireGuard Interface:</span>
|
||||
<span className={`font-medium ${networkStatus.interface_status ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{networkStatus.interface_status ? 'Up (wg0)' : 'Down'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">NAT Translation:</span>
|
||||
<span className={`font-medium ${networkStatus.nat_rules ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{networkStatus.nat_rules ? 'Active' : 'Not Configured'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Traffic Forwarding:</span>
|
||||
<span className={`font-medium ${networkStatus.forwarding_rules ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{networkStatus.forwarding_rules ? 'Allowed' : 'Blocked'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<h4 className="text-md font-medium text-blue-900 mb-2">Quick Actions</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
className="btn btn-sm btn-outline"
|
||||
onClick={fetchNetworkStatus}
|
||||
>
|
||||
Refresh Status
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={setupNetworkConfiguration}
|
||||
disabled={isSettingUp}
|
||||
>
|
||||
{isSettingUp ? 'Setting up...' : 'Setup Network'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500">Failed to load network status</p>
|
||||
<button
|
||||
className="btn btn-primary mt-2"
|
||||
onClick={fetchNetworkStatus}
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'nat' && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
|
||||
Reference in New Issue
Block a user