wip: make work Services Status
This commit is contained in:
Constantin
+1
-1
@@ -35,7 +35,7 @@ A modern React-based web interface for managing your Personal Internet Cell.
|
||||
|
||||
1. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
bun install
|
||||
```
|
||||
|
||||
2. Start the development server:
|
||||
|
||||
+311
-283
@@ -1,284 +1,312 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Server,
|
||||
Users,
|
||||
Shield,
|
||||
Mail,
|
||||
Calendar,
|
||||
FolderOpen,
|
||||
Wifi,
|
||||
Activity,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertCircle
|
||||
} from 'lucide-react';
|
||||
import { cellAPI, servicesAPI } from '../services/api';
|
||||
|
||||
function Dashboard({ isOnline }) {
|
||||
const [cellStatus, setCellStatus] = useState(null);
|
||||
const [servicesStatus, setServicesStatus] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!isOnline) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const [statusResponse, servicesResponse] = await Promise.all([
|
||||
cellAPI.getStatus(),
|
||||
servicesAPI.getAllStatus()
|
||||
]);
|
||||
|
||||
setCellStatus(statusResponse.data);
|
||||
setServicesStatus(servicesResponse.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch dashboard data:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 30000); // Refresh every 30 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isOnline]);
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return <CheckCircle className="h-5 w-5 text-success-500" />;
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return <XCircle className="h-5 w-5 text-danger-500" />;
|
||||
} else {
|
||||
return <AlertCircle className="h-5 w-5 text-warning-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return 'Online';
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return 'Offline';
|
||||
} else {
|
||||
return 'Unknown';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return 'text-success-600';
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return 'text-danger-600';
|
||||
} else {
|
||||
return 'text-warning-600';
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Overview of your Personal Internet Cell status and services
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cell Status */}
|
||||
{cellStatus && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Cell Status</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Server className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Cell Name</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{cellStatus.cell_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Peers</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{cellStatus.peers_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Activity className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Uptime</p>
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{Math.floor((cellStatus.uptime || 0) / 3600)}h {Math.floor(((cellStatus.uptime || 0) % 3600) / 60)}m
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<div className="h-8 w-8 rounded-full bg-primary-100 flex items-center justify-center">
|
||||
<div className="h-3 w-3 rounded-full bg-primary-600"></div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Status</p>
|
||||
<p className="text-lg font-semibold text-gray-900">Active</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Services Status */}
|
||||
{servicesStatus && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Services Status</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">WireGuard</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.wireguard)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.wireguard)}`}>
|
||||
{getStatusText(servicesStatus.wireguard)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Mail className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Email</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.email)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.email)}`}>
|
||||
{getStatusText(servicesStatus.email)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Calendar className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Calendar</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.calendar)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.calendar)}`}>
|
||||
{getStatusText(servicesStatus.calendar)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<FolderOpen className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Files</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.files)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.files)}`}>
|
||||
{getStatusText(servicesStatus.files)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Wifi className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Routing</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.routing)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.routing)}`}>
|
||||
{getStatusText(servicesStatus.routing)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Server className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Network</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(servicesStatus.network)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.network)}`}>
|
||||
{getStatusText(servicesStatus.network)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<button className="card hover:shadow-md transition-shadow cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Manage Peers</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button className="card hover:shadow-md transition-shadow cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">WireGuard Config</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button className="card hover:shadow-md transition-shadow cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Wifi className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Routing Rules</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button className="card hover:shadow-md transition-shadow cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Activity className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">View Logs</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Server,
|
||||
Users,
|
||||
Shield,
|
||||
Mail,
|
||||
Calendar,
|
||||
FolderOpen,
|
||||
Wifi,
|
||||
Activity,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
Play,
|
||||
Square,
|
||||
RotateCcw
|
||||
} from 'lucide-react';
|
||||
import { cellAPI, servicesAPI } from '../services/api';
|
||||
|
||||
function Dashboard({ isOnline }) {
|
||||
const navigate = useNavigate();
|
||||
const [cellStatus, setCellStatus] = useState(null);
|
||||
const [servicesStatus, setServicesStatus] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [serviceControls, setServiceControls] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 30000); // Refresh every 30 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isOnline]);
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return <CheckCircle className="h-5 w-5 text-success-500" />;
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return <XCircle className="h-5 w-5 text-danger-500" />;
|
||||
} else {
|
||||
return <AlertCircle className="h-5 w-5 text-warning-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return 'Online';
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return 'Offline';
|
||||
} else {
|
||||
return 'Unknown';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
if (status === true || status?.status === 'online' || status?.running === true) {
|
||||
return 'text-success-600';
|
||||
} else if (status === false || status?.status === 'offline' || status?.running === false) {
|
||||
return 'text-danger-600';
|
||||
} else {
|
||||
return 'text-warning-600';
|
||||
}
|
||||
};
|
||||
|
||||
const handleServiceControl = async (serviceName, action) => {
|
||||
if (!isOnline) return;
|
||||
|
||||
setServiceControls(prev => ({ ...prev, [serviceName]: { ...prev[serviceName], [action]: 'loading' } }));
|
||||
|
||||
try {
|
||||
let response;
|
||||
switch (action) {
|
||||
case 'start':
|
||||
response = await servicesAPI.startService(serviceName);
|
||||
break;
|
||||
case 'stop':
|
||||
response = await servicesAPI.stopService(serviceName);
|
||||
break;
|
||||
case 'restart':
|
||||
response = await servicesAPI.restartService(serviceName);
|
||||
break;
|
||||
default:
|
||||
throw new Error('Invalid action');
|
||||
}
|
||||
|
||||
if (response.data.success || response.data.message) {
|
||||
// Refresh status after successful control action
|
||||
setTimeout(() => {
|
||||
fetchData();
|
||||
}, 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to ${action} ${serviceName}:`, error);
|
||||
} finally {
|
||||
setServiceControls(prev => ({ ...prev, [serviceName]: { ...prev[serviceName], [action]: 'idle' } }));
|
||||
}
|
||||
};
|
||||
|
||||
const renderServiceCard = (serviceName, icon, displayName, status) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
{icon}
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">{displayName}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center">
|
||||
{getStatusIcon(status)}
|
||||
<span className={`ml-2 text-sm font-medium ${getStatusColor(status)}`}>
|
||||
{getStatusText(status)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex space-x-1">
|
||||
<button
|
||||
onClick={() => handleServiceControl(serviceName, 'start')}
|
||||
disabled={serviceControls[serviceName]?.start === 'loading' || status?.running}
|
||||
className="p-1 text-green-600 hover:text-green-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Start ${displayName} Service`}
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleServiceControl(serviceName, 'stop')}
|
||||
disabled={serviceControls[serviceName]?.stop === 'loading' || !status?.running}
|
||||
className="p-1 text-red-600 hover:text-red-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Stop ${displayName} Service`}
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleServiceControl(serviceName, 'restart')}
|
||||
disabled={serviceControls[serviceName]?.restart === 'loading'}
|
||||
className="p-1 text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Restart ${displayName} Service`}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!isOnline) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const [statusResponse, servicesResponse] = await Promise.all([
|
||||
cellAPI.getStatus(),
|
||||
servicesAPI.getAllStatus()
|
||||
]);
|
||||
|
||||
setCellStatus(statusResponse.data);
|
||||
|
||||
// Transform services data to match expected structure
|
||||
const servicesData = servicesResponse.data;
|
||||
const transformedServices = {
|
||||
wireguard: servicesData.wireguard || { running: false, status: 'offline' },
|
||||
email: servicesData.email || { running: false, status: 'offline' },
|
||||
calendar: servicesData.calendar || { running: false, status: 'offline' },
|
||||
files: servicesData.files || { running: false, status: 'offline' },
|
||||
routing: servicesData.routing || { running: false, status: 'offline' },
|
||||
network: servicesData.network || { running: false, status: 'offline' }
|
||||
};
|
||||
|
||||
setServicesStatus(transformedServices);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch dashboard data:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Overview of your Personal Internet Cell status and services
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cell Status */}
|
||||
{cellStatus && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Cell Status</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Server className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Cell Name</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{cellStatus.cell_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Peers</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{cellStatus.peers_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<Activity className="h-8 w-8 text-primary-500" />
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Uptime</p>
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{Math.floor((cellStatus.uptime || 0) / 3600)}h {Math.floor(((cellStatus.uptime || 0) % 3600) / 60)}m
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center">
|
||||
<div className="h-8 w-8 rounded-full bg-primary-100 flex items-center justify-center">
|
||||
<div className="h-3 w-3 rounded-full bg-primary-600"></div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-500">Status</p>
|
||||
<p className="text-lg font-semibold text-gray-900">Active</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Services Status */}
|
||||
{servicesStatus && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Services Status</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{renderServiceCard('wireguard', <Shield className="h-6 w-6 text-primary-500" />, 'WireGuard', servicesStatus.wireguard)}
|
||||
{renderServiceCard('email', <Mail className="h-6 w-6 text-primary-500" />, 'Email', servicesStatus.email)}
|
||||
{renderServiceCard('calendar', <Calendar className="h-6 w-6 text-primary-500" />, 'Calendar', servicesStatus.calendar)}
|
||||
{renderServiceCard('files', <FolderOpen className="h-6 w-6 text-primary-500" />, 'Files', servicesStatus.files)}
|
||||
{renderServiceCard('routing', <Wifi className="h-6 w-6 text-primary-500" />, 'Routing', servicesStatus.routing)}
|
||||
{renderServiceCard('network', <Server className="h-6 w-6 text-primary-500" />, 'Network', servicesStatus.network)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<button
|
||||
onClick={() => navigate('/peers')}
|
||||
className="card hover:shadow-md transition-shadow cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Manage Peers</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/wireguard')}
|
||||
className="card hover:shadow-md transition-shadow cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">WireGuard Config</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/routing')}
|
||||
className="card hover:shadow-md transition-shadow cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Wifi className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">Routing Rules</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/logs')}
|
||||
className="card hover:shadow-md transition-shadow cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Activity className="h-6 w-6 text-primary-500" />
|
||||
<span className="ml-3 text-sm font-medium text-gray-900">View Logs</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
+207
-204
@@ -1,205 +1,208 @@
|
||||
import axios from 'axios';
|
||||
|
||||
// Create axios instance with base configuration
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor for logging
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
console.log(`API Request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
console.error('API Request Error:', error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor for error handling
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
console.error('API Response Error:', error.response?.data || error.message);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Cell Status API
|
||||
export const cellAPI = {
|
||||
getStatus: () => api.get('/api/status'),
|
||||
getConfig: () => api.get('/api/config'),
|
||||
updateConfig: (config) => api.put('/api/config', config),
|
||||
};
|
||||
|
||||
// Network Services API
|
||||
export const networkAPI = {
|
||||
getDNSRecords: () => api.get('/api/dns/records'),
|
||||
addDNSRecord: (record) => api.post('/api/dns/records', record),
|
||||
removeDNSRecord: (record) => api.delete('/api/dns/records', { data: record }),
|
||||
getDHCPLeases: () => api.get('/api/dhcp/leases'),
|
||||
addDHCPReservation: (reservation) => api.post('/api/dhcp/reservations', reservation),
|
||||
removeDHCPReservation: (reservation) => api.delete('/api/dhcp/reservations', { data: reservation }),
|
||||
getNTPStatus: () => api.get('/api/ntp/status'),
|
||||
testNetwork: (data) => api.post('/api/network/test', data),
|
||||
};
|
||||
|
||||
// WireGuard API
|
||||
export const wireguardAPI = {
|
||||
getKeys: () => api.get('/api/wireguard/keys'),
|
||||
generatePeerKeys: (data) => api.post('/api/wireguard/keys/peer', data),
|
||||
getConfig: () => api.get('/api/wireguard/config'),
|
||||
getPeers: () => api.get('/api/wireguard/peers'),
|
||||
addPeer: (peer) => api.post('/api/wireguard/peers', peer),
|
||||
removePeer: (peer) => api.delete('/api/wireguard/peers', { data: peer }),
|
||||
getStatus: () => api.get('/api/wireguard/status'),
|
||||
testConnectivity: (data) => api.post('/api/wireguard/connectivity', data),
|
||||
updatePeerIP: (data) => api.put('/api/wireguard/peers/ip', data),
|
||||
getPeerConfig: (data) => api.post('/api/wireguard/peers/config', data),
|
||||
};
|
||||
|
||||
// Peer Registry API
|
||||
export const peerAPI = {
|
||||
getPeers: () => api.get('/api/peers'),
|
||||
addPeer: (peer) => api.post('/api/peers', peer),
|
||||
removePeer: (peerName) => api.delete(`/api/peers/${peerName}`),
|
||||
registerPeer: (data) => api.post('/api/peers/register', data),
|
||||
unregisterPeer: (peerName) => api.delete(`/api/peers/${peerName}/unregister`),
|
||||
updatePeerIP: (peerName, data) => api.put(`/api/peers/${peerName}/update-ip`, data),
|
||||
};
|
||||
|
||||
// Email Services API
|
||||
export const emailAPI = {
|
||||
getUsers: () => api.get('/api/email/users'),
|
||||
createUser: (user) => api.post('/api/email/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/email/users/${username}`),
|
||||
getStatus: () => api.get('/api/email/status'),
|
||||
testConnectivity: () => api.get('/api/email/connectivity'),
|
||||
sendEmail: (data) => api.post('/api/email/send', data),
|
||||
getMailboxInfo: (username) => api.get(`/api/email/mailbox/${username}`),
|
||||
};
|
||||
|
||||
// Calendar Services API
|
||||
export const calendarAPI = {
|
||||
getUsers: () => api.get('/api/calendar/users'),
|
||||
createUser: (user) => api.post('/api/calendar/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/calendar/users/${username}`),
|
||||
createCalendar: (data) => api.post('/api/calendar/calendars', data),
|
||||
addEvent: (data) => api.post('/api/calendar/events', data),
|
||||
getEvents: (username, calendarName, params) =>
|
||||
api.get(`/api/calendar/events/${username}/${calendarName}`, { params }),
|
||||
getStatus: () => api.get('/api/calendar/status'),
|
||||
testConnectivity: () => api.get('/api/calendar/connectivity'),
|
||||
};
|
||||
|
||||
// File Services API
|
||||
export const fileAPI = {
|
||||
getUsers: () => api.get('/api/files/users'),
|
||||
createUser: (user) => api.post('/api/files/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/files/users/${username}`),
|
||||
createFolder: (data) => api.post('/api/files/folders', data),
|
||||
deleteFolder: (username, folderPath) => api.delete(`/api/files/folders/${username}/${folderPath}`),
|
||||
uploadFile: (username, file, path) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('path', path);
|
||||
return api.post(`/api/files/upload/${username}`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
},
|
||||
downloadFile: (username, filePath) => api.get(`/api/files/download/${username}/${filePath}`),
|
||||
deleteFile: (username, filePath) => api.delete(`/api/files/delete/${username}/${filePath}`),
|
||||
listFiles: (username, folder = '') => api.get(`/api/files/list/${username}`, { params: { folder } }),
|
||||
getStatus: () => api.get('/api/files/status'),
|
||||
testConnectivity: () => api.get('/api/files/connectivity'),
|
||||
};
|
||||
|
||||
// Routing API
|
||||
export const routingAPI = {
|
||||
getStatus: () => api.get('/api/routing/status'),
|
||||
// NAT
|
||||
getNatRules: () => api.get('/api/routing/nat'),
|
||||
addNatRule: (rule) => api.post('/api/routing/nat', rule),
|
||||
deleteNatRule: (ruleId) => api.delete(`/api/routing/nat/${ruleId}`),
|
||||
// Peer Routes
|
||||
getPeerRoutes: () => api.get('/api/routing/peers'),
|
||||
addPeerRoute: (route) => api.post('/api/routing/peers', route),
|
||||
deletePeerRoute: (peerName) => api.delete(`/api/routing/peers/${peerName}`),
|
||||
// Firewall
|
||||
getFirewallRules: () => api.get('/api/routing/firewall'),
|
||||
addFirewallRule: (rule) => api.post('/api/routing/firewall', rule),
|
||||
deleteFirewallRule: (ruleId) => api.delete(`/api/routing/firewall/${ruleId}`),
|
||||
// Other
|
||||
addExitNode: (node) => api.post('/api/routing/exit-nodes', node),
|
||||
addBridgeRoute: (route) => api.post('/api/routing/bridge', route),
|
||||
addSplitRoute: (route) => api.post('/api/routing/split', route),
|
||||
testConnectivity: (data) => api.post('/api/routing/connectivity', data),
|
||||
getLogs: (lines = 50) => api.get('/api/routing/logs', { params: { lines } }),
|
||||
};
|
||||
|
||||
// Vault & Trust API
|
||||
export const vaultAPI = {
|
||||
getStatus: () => api.get('/api/vault/status'),
|
||||
getCertificates: () => api.get('/api/vault/certificates'),
|
||||
generateCertificate: (data) => api.post('/api/vault/certificates', data),
|
||||
revokeCertificate: (commonName) => api.delete(`/api/vault/certificates/${commonName}`),
|
||||
getCACertificate: () => api.get('/api/vault/ca/certificate'),
|
||||
getAgePublicKey: () => api.get('/api/vault/age/public-key'),
|
||||
getTrustedKeys: () => api.get('/api/vault/trust/keys'),
|
||||
addTrustedKey: (data) => api.post('/api/vault/trust/keys', data),
|
||||
removeTrustedKey: (name) => api.delete(`/api/vault/trust/keys/${name}`),
|
||||
verifyTrustChain: (data) => api.post('/api/vault/trust/verify', data),
|
||||
getTrustChains: () => api.get('/api/vault/trust/chains'),
|
||||
// Secrets management
|
||||
listSecrets: () => api.get('/api/vault/secrets'),
|
||||
storeSecret: (name, value) => api.post('/api/vault/secrets', { name, value }),
|
||||
getSecret: (name) => api.get(`/api/vault/secrets/${name}`),
|
||||
deleteSecret: (name) => api.delete(`/api/vault/secrets/${name}`),
|
||||
};
|
||||
|
||||
// Services API
|
||||
export const servicesAPI = {
|
||||
getAllStatus: () => api.get('/api/services/status'),
|
||||
testAllConnectivity: () => api.get('/api/services/connectivity'),
|
||||
};
|
||||
|
||||
// Health check
|
||||
export const healthAPI = {
|
||||
check: () => api.get('/health'),
|
||||
};
|
||||
|
||||
// Monitoring API
|
||||
export const monitoringAPI = {
|
||||
getBackendLogs: (lines = 100) => api.get('/api/logs', { params: { lines } }),
|
||||
getHealthHistory: () => api.get('/api/health/history'),
|
||||
};
|
||||
|
||||
// Container Management API
|
||||
export const containerAPI = {
|
||||
// Containers
|
||||
listContainers: () => api.get('/api/containers'),
|
||||
startContainer: (name) => api.post(`/api/containers/${name}/start`),
|
||||
stopContainer: (name) => api.post(`/api/containers/${name}/stop`),
|
||||
restartContainer: (name) => api.post(`/api/containers/${name}/restart`),
|
||||
getContainerLogs: (name, tail = 100) => api.get(`/api/containers/${name}/logs`, { params: { tail } }),
|
||||
getContainerStats: (name) => api.get(`/api/containers/${name}/stats`),
|
||||
createContainer: (data) => api.post('/api/containers', data), // data may include 'secrets' array
|
||||
removeContainer: (name, force = false) => api.delete(`/api/containers/${name}`, { params: { force } }),
|
||||
// Images
|
||||
listImages: () => api.get('/api/images'),
|
||||
pullImage: (image) => api.post('/api/images/pull', { image }),
|
||||
removeImage: (image, force = false) => api.delete(`/api/images/${image}`, { params: { force } }),
|
||||
// Volumes
|
||||
listVolumes: () => api.get('/api/volumes'),
|
||||
createVolume: (name) => api.post('/api/volumes', { name }),
|
||||
removeVolume: (name, force = false) => api.delete(`/api/volumes/${name}`, { params: { force } }),
|
||||
};
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
// Create axios instance with base configuration
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor for logging
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
console.log(`API Request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
console.error('API Request Error:', error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor for error handling
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
console.error('API Response Error:', error.response?.data || error.message);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Cell Status API
|
||||
export const cellAPI = {
|
||||
getStatus: () => api.get('/api/status'),
|
||||
getConfig: () => api.get('/api/config'),
|
||||
updateConfig: (config) => api.put('/api/config', config),
|
||||
};
|
||||
|
||||
// Network Services API
|
||||
export const networkAPI = {
|
||||
getDNSRecords: () => api.get('/api/dns/records'),
|
||||
addDNSRecord: (record) => api.post('/api/dns/records', record),
|
||||
removeDNSRecord: (record) => api.delete('/api/dns/records', { data: record }),
|
||||
getDHCPLeases: () => api.get('/api/dhcp/leases'),
|
||||
addDHCPReservation: (reservation) => api.post('/api/dhcp/reservations', reservation),
|
||||
removeDHCPReservation: (reservation) => api.delete('/api/dhcp/reservations', { data: reservation }),
|
||||
getNTPStatus: () => api.get('/api/ntp/status'),
|
||||
testNetwork: (data) => api.post('/api/network/test', data),
|
||||
};
|
||||
|
||||
// WireGuard API
|
||||
export const wireguardAPI = {
|
||||
getKeys: () => api.get('/api/wireguard/keys'),
|
||||
generatePeerKeys: (data) => api.post('/api/wireguard/keys/peer', data),
|
||||
getConfig: () => api.get('/api/wireguard/config'),
|
||||
getPeers: () => api.get('/api/wireguard/peers'),
|
||||
addPeer: (peer) => api.post('/api/wireguard/peers', peer),
|
||||
removePeer: (peer) => api.delete('/api/wireguard/peers', { data: peer }),
|
||||
getStatus: () => api.get('/api/wireguard/status'),
|
||||
testConnectivity: (data) => api.post('/api/wireguard/connectivity', data),
|
||||
updatePeerIP: (data) => api.put('/api/wireguard/peers/ip', data),
|
||||
getPeerConfig: (data) => api.post('/api/wireguard/peers/config', data),
|
||||
};
|
||||
|
||||
// Peer Registry API
|
||||
export const peerAPI = {
|
||||
getPeers: () => api.get('/api/peers'),
|
||||
addPeer: (peer) => api.post('/api/peers', peer),
|
||||
removePeer: (peerName) => api.delete(`/api/peers/${peerName}`),
|
||||
registerPeer: (data) => api.post('/api/peers/register', data),
|
||||
unregisterPeer: (peerName) => api.delete(`/api/peers/${peerName}/unregister`),
|
||||
updatePeerIP: (peerName, data) => api.put(`/api/peers/${peerName}/update-ip`, data),
|
||||
};
|
||||
|
||||
// Email Services API
|
||||
export const emailAPI = {
|
||||
getUsers: () => api.get('/api/email/users'),
|
||||
createUser: (user) => api.post('/api/email/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/email/users/${username}`),
|
||||
getStatus: () => api.get('/api/email/status'),
|
||||
testConnectivity: () => api.get('/api/email/connectivity'),
|
||||
sendEmail: (data) => api.post('/api/email/send', data),
|
||||
getMailboxInfo: (username) => api.get(`/api/email/mailbox/${username}`),
|
||||
};
|
||||
|
||||
// Calendar Services API
|
||||
export const calendarAPI = {
|
||||
getUsers: () => api.get('/api/calendar/users'),
|
||||
createUser: (user) => api.post('/api/calendar/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/calendar/users/${username}`),
|
||||
createCalendar: (data) => api.post('/api/calendar/calendars', data),
|
||||
addEvent: (data) => api.post('/api/calendar/events', data),
|
||||
getEvents: (username, calendarName, params) =>
|
||||
api.get(`/api/calendar/events/${username}/${calendarName}`, { params }),
|
||||
getStatus: () => api.get('/api/calendar/status'),
|
||||
testConnectivity: () => api.get('/api/calendar/connectivity'),
|
||||
};
|
||||
|
||||
// File Services API
|
||||
export const fileAPI = {
|
||||
getUsers: () => api.get('/api/files/users'),
|
||||
createUser: (user) => api.post('/api/files/users', user),
|
||||
deleteUser: (username) => api.delete(`/api/files/users/${username}`),
|
||||
createFolder: (data) => api.post('/api/files/folders', data),
|
||||
deleteFolder: (username, folderPath) => api.delete(`/api/files/folders/${username}/${folderPath}`),
|
||||
uploadFile: (username, file, path) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('path', path);
|
||||
return api.post(`/api/files/upload/${username}`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
},
|
||||
downloadFile: (username, filePath) => api.get(`/api/files/download/${username}/${filePath}`),
|
||||
deleteFile: (username, filePath) => api.delete(`/api/files/delete/${username}/${filePath}`),
|
||||
listFiles: (username, folder = '') => api.get(`/api/files/list/${username}`, { params: { folder } }),
|
||||
getStatus: () => api.get('/api/files/status'),
|
||||
testConnectivity: () => api.get('/api/files/connectivity'),
|
||||
};
|
||||
|
||||
// Routing API
|
||||
export const routingAPI = {
|
||||
getStatus: () => api.get('/api/routing/status'),
|
||||
// NAT
|
||||
getNatRules: () => api.get('/api/routing/nat'),
|
||||
addNatRule: (rule) => api.post('/api/routing/nat', rule),
|
||||
deleteNatRule: (ruleId) => api.delete(`/api/routing/nat/${ruleId}`),
|
||||
// Peer Routes
|
||||
getPeerRoutes: () => api.get('/api/routing/peers'),
|
||||
addPeerRoute: (route) => api.post('/api/routing/peers', route),
|
||||
deletePeerRoute: (peerName) => api.delete(`/api/routing/peers/${peerName}`),
|
||||
// Firewall
|
||||
getFirewallRules: () => api.get('/api/routing/firewall'),
|
||||
addFirewallRule: (rule) => api.post('/api/routing/firewall', rule),
|
||||
deleteFirewallRule: (ruleId) => api.delete(`/api/routing/firewall/${ruleId}`),
|
||||
// Other
|
||||
addExitNode: (node) => api.post('/api/routing/exit-nodes', node),
|
||||
addBridgeRoute: (route) => api.post('/api/routing/bridge', route),
|
||||
addSplitRoute: (route) => api.post('/api/routing/split', route),
|
||||
testConnectivity: (data) => api.post('/api/routing/connectivity', data),
|
||||
getLogs: (lines = 50) => api.get('/api/routing/logs', { params: { lines } }),
|
||||
};
|
||||
|
||||
// Vault & Trust API
|
||||
export const vaultAPI = {
|
||||
getStatus: () => api.get('/api/vault/status'),
|
||||
getCertificates: () => api.get('/api/vault/certificates'),
|
||||
generateCertificate: (data) => api.post('/api/vault/certificates', data),
|
||||
revokeCertificate: (commonName) => api.delete(`/api/vault/certificates/${commonName}`),
|
||||
getCACertificate: () => api.get('/api/vault/ca/certificate'),
|
||||
getAgePublicKey: () => api.get('/api/vault/age/public-key'),
|
||||
getTrustedKeys: () => api.get('/api/vault/trust/keys'),
|
||||
addTrustedKey: (data) => api.post('/api/vault/trust/keys', data),
|
||||
removeTrustedKey: (name) => api.delete(`/api/vault/trust/keys/${name}`),
|
||||
verifyTrustChain: (data) => api.post('/api/vault/trust/verify', data),
|
||||
getTrustChains: () => api.get('/api/vault/trust/chains'),
|
||||
// Secrets management
|
||||
listSecrets: () => api.get('/api/vault/secrets'),
|
||||
storeSecret: (name, value) => api.post('/api/vault/secrets', { name, value }),
|
||||
getSecret: (name) => api.get(`/api/vault/secrets/${name}`),
|
||||
deleteSecret: (name) => api.delete(`/api/vault/secrets/${name}`),
|
||||
};
|
||||
|
||||
// Services API
|
||||
export const servicesAPI = {
|
||||
getAllStatus: () => api.get('/api/services/status'),
|
||||
testAllConnectivity: () => api.get('/api/services/connectivity'),
|
||||
startService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/start`),
|
||||
stopService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/stop`),
|
||||
restartService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/restart`),
|
||||
};
|
||||
|
||||
// Health check
|
||||
export const healthAPI = {
|
||||
check: () => api.get('/health'),
|
||||
};
|
||||
|
||||
// Monitoring API
|
||||
export const monitoringAPI = {
|
||||
getBackendLogs: (lines = 100) => api.get('/api/logs', { params: { lines } }),
|
||||
getHealthHistory: () => api.get('/api/health/history'),
|
||||
};
|
||||
|
||||
// Container Management API
|
||||
export const containerAPI = {
|
||||
// Containers
|
||||
listContainers: () => api.get('/api/containers'),
|
||||
startContainer: (name) => api.post(`/api/containers/${name}/start`),
|
||||
stopContainer: (name) => api.post(`/api/containers/${name}/stop`),
|
||||
restartContainer: (name) => api.post(`/api/containers/${name}/restart`),
|
||||
getContainerLogs: (name, tail = 100) => api.get(`/api/containers/${name}/logs`, { params: { tail } }),
|
||||
getContainerStats: (name) => api.get(`/api/containers/${name}/stats`),
|
||||
createContainer: (data) => api.post('/api/containers', data), // data may include 'secrets' array
|
||||
removeContainer: (name, force = false) => api.delete(`/api/containers/${name}`, { params: { force } }),
|
||||
// Images
|
||||
listImages: () => api.get('/api/images'),
|
||||
pullImage: (image) => api.post('/api/images/pull', { image }),
|
||||
removeImage: (image, force = false) => api.delete(`/api/images/${image}`, { params: { force } }),
|
||||
// Volumes
|
||||
listVolumes: () => api.get('/api/volumes'),
|
||||
createVolume: (name) => api.post('/api/volumes', { name }),
|
||||
removeVolume: (name, force = false) => api.delete(`/api/volumes/${name}`, { params: { force } }),
|
||||
};
|
||||
|
||||
export default api;
|
||||
Reference in New Issue
Block a user