Initial commit
This commit is contained in:
574
client/src/pages/Alerts.jsx
Normal file
574
client/src/pages/Alerts.jsx
Normal file
@@ -0,0 +1,574 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import api from '../services/api';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
PlusIcon,
|
||||
BellIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const Alerts = () => {
|
||||
const [alertRules, setAlertRules] = useState([]);
|
||||
const [alertLogs, setAlertLogs] = useState([]);
|
||||
const [alertStats, setAlertStats] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('rules');
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAlertData();
|
||||
}, []);
|
||||
|
||||
const fetchAlertData = async () => {
|
||||
try {
|
||||
const [rulesRes, logsRes, statsRes] = await Promise.all([
|
||||
api.get('/alerts/rules'),
|
||||
api.get('/alerts/logs?limit=50'),
|
||||
api.get('/alerts/stats?hours=24')
|
||||
]);
|
||||
|
||||
setAlertRules(rulesRes.data.data);
|
||||
setAlertLogs(logsRes.data.data);
|
||||
setAlertStats(statsRes.data.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching alert data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteRule = async (ruleId) => {
|
||||
if (window.confirm('Are you sure you want to delete this alert rule?')) {
|
||||
try {
|
||||
await api.delete(`/alerts/rules/${ruleId}`);
|
||||
fetchAlertData();
|
||||
} catch (error) {
|
||||
console.error('Error deleting alert rule:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
switch (status) {
|
||||
case 'sent':
|
||||
return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
|
||||
case 'failed':
|
||||
return <XCircleIcon className="h-5 w-5 text-red-500" />;
|
||||
case 'pending':
|
||||
return <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />;
|
||||
default:
|
||||
return <BellIcon className="h-5 w-5 text-gray-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority) => {
|
||||
switch (priority) {
|
||||
case 'critical':
|
||||
return 'bg-red-100 text-red-800';
|
||||
case 'high':
|
||||
return 'bg-orange-100 text-orange-800';
|
||||
case 'medium':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'low':
|
||||
return 'bg-green-100 text-green-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Alert Management
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Configure and monitor alert rules for drone detections
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="btn btn-primary flex items-center space-x-2"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span>Create Alert Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Alert Stats */}
|
||||
{alertStats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white p-4 rounded-lg shadow border">
|
||||
<div className="text-2xl font-bold text-gray-900">{alertStats.total_alerts}</div>
|
||||
<div className="text-sm text-gray-500">Total Alerts (24h)</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow border">
|
||||
<div className="text-2xl font-bold text-green-600">{alertStats.sent_alerts}</div>
|
||||
<div className="text-sm text-gray-500">Sent Successfully</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow border">
|
||||
<div className="text-2xl font-bold text-red-600">{alertStats.failed_alerts}</div>
|
||||
<div className="text-sm text-gray-500">Failed</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow border">
|
||||
<div className="text-2xl font-bold text-yellow-600">{alertStats.pending_alerts}</div>
|
||||
<div className="text-sm text-gray-500">Pending</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
<button
|
||||
onClick={() => setActiveTab('rules')}
|
||||
className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'rules'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
Alert Rules ({alertRules.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('logs')}
|
||||
className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'logs'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
Alert Logs ({alertLogs.length})
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Alert Rules Tab */}
|
||||
{activeTab === 'rules' && (
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
{alertRules.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<BellIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No alert rules</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Get started by creating your first alert rule.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
Create Alert Rule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="table-responsive">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Priority</th>
|
||||
<th>Channels</th>
|
||||
<th>Conditions</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alertRules.map((rule) => (
|
||||
<tr key={rule.id} className="hover:bg-gray-50">
|
||||
<td>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{rule.name}
|
||||
</div>
|
||||
{rule.description && (
|
||||
<div className="text-sm text-gray-500">
|
||||
{rule.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getPriorityColor(rule.priority)
|
||||
}`}>
|
||||
{rule.priority}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex space-x-1">
|
||||
{rule.alert_channels.map((channel, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"
|
||||
>
|
||||
{channel}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{rule.min_detections > 1 && (
|
||||
<div>Min detections: {rule.min_detections}</div>
|
||||
)}
|
||||
{rule.time_window && (
|
||||
<div>Time window: {rule.time_window}s</div>
|
||||
)}
|
||||
{rule.cooldown_period && (
|
||||
<div>Cooldown: {rule.cooldown_period}s</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
rule.is_active
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{rule.is_active ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{format(new Date(rule.created_at), 'MMM dd, yyyy')}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
// TODO: Edit rule
|
||||
console.log('Edit rule:', rule);
|
||||
}}
|
||||
className="text-primary-600 hover:text-primary-900 text-sm"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteRule(rule.id)}
|
||||
className="text-red-600 hover:text-red-900 text-sm"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alert Logs Tab */}
|
||||
{activeTab === 'logs' && (
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
{alertLogs.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<BellIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No alert logs</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Alert logs will appear here when alerts are triggered.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="table-responsive">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Type</th>
|
||||
<th>Recipient</th>
|
||||
<th>Rule</th>
|
||||
<th>Message</th>
|
||||
<th>Sent At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alertLogs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-gray-50">
|
||||
<td>
|
||||
<div className="flex items-center space-x-2">
|
||||
{getStatusIcon(log.status)}
|
||||
<span className="text-sm text-gray-900 capitalize">
|
||||
{log.status}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
|
||||
{log.alert_type}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{log.recipient}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{log.rule?.name || 'Unknown Rule'}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900 max-w-xs truncate">
|
||||
{log.message}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{log.sent_at
|
||||
? format(new Date(log.sent_at), 'MMM dd, HH:mm')
|
||||
: 'Not sent'
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Alert Rule Modal */}
|
||||
{showCreateModal && (
|
||||
<CreateAlertRuleModal
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onSave={() => {
|
||||
setShowCreateModal(false);
|
||||
fetchAlertData();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CreateAlertRuleModal = ({ onClose, onSave }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
priority: 'medium',
|
||||
alert_channels: ['sms'],
|
||||
min_detections: 1,
|
||||
time_window: 300,
|
||||
cooldown_period: 600,
|
||||
device_ids: null,
|
||||
drone_types: null,
|
||||
min_rssi: '',
|
||||
max_rssi: '',
|
||||
frequency_ranges: []
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
const payload = { ...formData };
|
||||
|
||||
// Clean up empty values
|
||||
if (!payload.min_rssi) delete payload.min_rssi;
|
||||
if (!payload.max_rssi) delete payload.max_rssi;
|
||||
if (!payload.device_ids || payload.device_ids.length === 0) payload.device_ids = null;
|
||||
if (!payload.drone_types || payload.drone_types.length === 0) payload.drone_types = null;
|
||||
if (!payload.frequency_ranges || payload.frequency_ranges.length === 0) payload.frequency_ranges = null;
|
||||
|
||||
await api.post('/alerts/rules', payload);
|
||||
onSave();
|
||||
} catch (error) {
|
||||
console.error('Error creating alert rule:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'number' ? parseInt(value) || 0 : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleChannelChange = (channel, checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
alert_channels: checked
|
||||
? [...prev.alert_channels, channel]
|
||||
: prev.alert_channels.filter(c => c !== channel)
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose} />
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Create Alert Rule
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Rule Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
rows="2"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Priority
|
||||
</label>
|
||||
<select
|
||||
name="priority"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.priority}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
<option value="critical">Critical</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Min Detections
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="min_detections"
|
||||
min="1"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.min_detections}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Time Window (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="time_window"
|
||||
min="60"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.time_window}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Cooldown Period (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="cooldown_period"
|
||||
min="0"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.cooldown_period}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Alert Channels
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{['sms', 'email', 'webhook'].map(channel => (
|
||||
<label key={channel} className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.alert_channels.includes(channel)}
|
||||
onChange={(e) => handleChannelChange(channel, e.target.checked)}
|
||||
className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700 capitalize">
|
||||
{channel}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Creating...' : 'Create Rule'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Alerts;
|
||||
325
client/src/pages/Dashboard.jsx
Normal file
325
client/src/pages/Dashboard.jsx
Normal file
@@ -0,0 +1,325 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSocket } from '../contexts/SocketContext';
|
||||
import api from '../services/api';
|
||||
import {
|
||||
ServerIcon,
|
||||
ExclamationTriangleIcon,
|
||||
BellIcon,
|
||||
SignalIcon,
|
||||
EyeIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
BarChart,
|
||||
Bar,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell
|
||||
} from 'recharts';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
const Dashboard = () => {
|
||||
const [overview, setOverview] = useState(null);
|
||||
const [chartData, setChartData] = useState([]);
|
||||
const [deviceActivity, setDeviceActivity] = useState([]);
|
||||
const [recentActivity, setRecentActivity] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { recentDetections, deviceStatus, connected } = useSocket();
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardData();
|
||||
const interval = setInterval(fetchDashboardData, 30000); // Refresh every 30 seconds
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
const [overviewRes, chartRes, deviceRes, activityRes] = await Promise.all([
|
||||
api.get('/dashboard/overview?hours=24'),
|
||||
api.get('/dashboard/charts/detections?hours=24&interval=hour'),
|
||||
api.get('/dashboard/charts/devices?hours=24'),
|
||||
api.get('/dashboard/activity?hours=24&limit=10')
|
||||
]);
|
||||
|
||||
setOverview(overviewRes.data.data);
|
||||
setChartData(chartRes.data.data);
|
||||
setDeviceActivity(deviceRes.data.data);
|
||||
setRecentActivity(activityRes.data.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Total Devices',
|
||||
stat: overview?.summary?.total_devices || 0,
|
||||
icon: ServerIcon,
|
||||
change: null,
|
||||
changeType: 'neutral',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Online Devices',
|
||||
stat: overview?.summary?.online_devices || 0,
|
||||
icon: SignalIcon,
|
||||
change: null,
|
||||
changeType: 'positive',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Recent Detections',
|
||||
stat: overview?.summary?.recent_detections || 0,
|
||||
icon: ExclamationTriangleIcon,
|
||||
change: null,
|
||||
changeType: 'negative',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Unique Drones',
|
||||
stat: overview?.summary?.unique_drones_detected || 0,
|
||||
icon: EyeIcon,
|
||||
change: null,
|
||||
changeType: 'neutral',
|
||||
color: 'bg-purple-500'
|
||||
}
|
||||
];
|
||||
|
||||
const deviceStatusData = [
|
||||
{ name: 'Online', value: overview?.device_status?.online || 0, color: '#22c55e' },
|
||||
{ name: 'Offline', value: overview?.device_status?.offline || 0, color: '#ef4444' },
|
||||
{ name: 'Inactive', value: overview?.device_status?.inactive || 0, color: '#6b7280' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Stats */}
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
System Overview
|
||||
</h3>
|
||||
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden"
|
||||
>
|
||||
<dt>
|
||||
<div className={`absolute ${item.color} rounded-md p-3`}>
|
||||
<item.icon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</div>
|
||||
<p className="ml-16 text-sm font-medium text-gray-500 truncate">
|
||||
{item.name}
|
||||
</p>
|
||||
</dt>
|
||||
<dd className="ml-16 pb-6 flex items-baseline sm:pb-7">
|
||||
<p className="text-2xl font-semibold text-gray-900">
|
||||
{item.stat}
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Detection Timeline */}
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Detections Timeline (24h)
|
||||
</h3>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
tickFormatter={(value) => format(new Date(value), 'HH:mm')}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip
|
||||
labelFormatter={(value) => format(new Date(value), 'MMM dd, HH:mm')}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="#ef4444"
|
||||
fill="#ef4444"
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device Status */}
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Device Status
|
||||
</h3>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={deviceStatusData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={80}
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
>
|
||||
{deviceStatusData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-center space-x-4">
|
||||
{deviceStatusData.map((item, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-2"
|
||||
style={{ backgroundColor: item.color }}
|
||||
/>
|
||||
<span className="text-sm text-gray-600">
|
||||
{item.name}: {item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device Activity */}
|
||||
{deviceActivity.length > 0 && (
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Device Activity (24h)
|
||||
</h3>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={deviceActivity}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="device_name"
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Bar dataKey="detection_count" fill="#3b82f6" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent Activity & Real-time Detections */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-medium text-gray-900">Recent Activity</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 max-h-96 overflow-y-auto">
|
||||
{recentActivity.map((activity, index) => (
|
||||
<div key={index} className="px-6 py-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`flex-shrink-0 w-2 h-2 rounded-full ${
|
||||
activity.type === 'detection' ? 'bg-red-400' : 'bg-green-400'
|
||||
}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-900">
|
||||
{activity.type === 'detection' ? (
|
||||
<>Drone {activity.data.drone_id} detected by {activity.data.device_name}</>
|
||||
) : (
|
||||
<>Heartbeat from {activity.data.device_name}</>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{format(new Date(activity.timestamp), 'MMM dd, HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{recentActivity.length === 0 && (
|
||||
<div className="px-6 py-8 text-center text-gray-500">
|
||||
No recent activity
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Real-time Detections */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium text-gray-900">Live Detections</h3>
|
||||
<div className={`flex items-center space-x-2 px-2 py-1 rounded-full text-xs ${
|
||||
connected ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
connected ? 'bg-green-400' : 'bg-red-400'
|
||||
}`} />
|
||||
<span>{connected ? 'Live' : 'Disconnected'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 max-h-96 overflow-y-auto">
|
||||
{recentDetections.map((detection, index) => (
|
||||
<div key={index} className="px-6 py-4 animate-fade-in">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex-shrink-0 w-2 h-2 rounded-full bg-red-400 animate-pulse" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-900">
|
||||
Drone {detection.drone_id} detected
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{detection.device.name || `Device ${detection.device_id}`} •
|
||||
RSSI: {detection.rssi}dBm •
|
||||
Freq: {detection.freq}MHz
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{format(new Date(detection.server_timestamp), 'HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{recentDetections.length === 0 && (
|
||||
<div className="px-6 py-8 text-center text-gray-500">
|
||||
No recent detections
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
323
client/src/pages/Detections.jsx
Normal file
323
client/src/pages/Detections.jsx
Normal file
@@ -0,0 +1,323 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import api from '../services/api';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
FunnelIcon,
|
||||
EyeIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const Detections = () => {
|
||||
const [detections, setDetections] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pagination, setPagination] = useState({});
|
||||
const [filters, setFilters] = useState({
|
||||
device_id: '',
|
||||
drone_id: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
limit: 50,
|
||||
offset: 0
|
||||
});
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDetections();
|
||||
}, [filters]);
|
||||
|
||||
const fetchDetections = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value) params.append(key, value);
|
||||
});
|
||||
|
||||
const response = await api.get(`/detections?${params}`);
|
||||
setDetections(response.data.data);
|
||||
setPagination(response.data.pagination);
|
||||
} catch (error) {
|
||||
console.error('Error fetching detections:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFilterChange = (key, value) => {
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
[key]: value,
|
||||
offset: 0 // Reset to first page when filtering
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePageChange = (newOffset) => {
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
offset: newOffset
|
||||
}));
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setFilters({
|
||||
device_id: '',
|
||||
drone_id: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
limit: 50,
|
||||
offset: 0
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Drone Detections
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
History of all drone detections from your devices
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="btn btn-secondary flex items-center space-x-2"
|
||||
>
|
||||
<FunnelIcon className="h-4 w-4" />
|
||||
<span>Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
{showFilters && (
|
||||
<div className="bg-white p-6 rounded-lg shadow border">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Device ID
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
placeholder="Device ID"
|
||||
value={filters.device_id}
|
||||
onChange={(e) => handleFilterChange('device_id', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Drone ID
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
placeholder="Drone ID"
|
||||
value={filters.drone_id}
|
||||
onChange={(e) => handleFilterChange('drone_id', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Start Date
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={filters.start_date}
|
||||
onChange={(e) => handleFilterChange('start_date', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
End Date
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={filters.end_date}
|
||||
onChange={(e) => handleFilterChange('end_date', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex space-x-2">
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detection List */}
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
{loading ? (
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
<div className="table-responsive">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Drone ID</th>
|
||||
<th>Type</th>
|
||||
<th>Frequency</th>
|
||||
<th>RSSI</th>
|
||||
<th>Location</th>
|
||||
<th>Detected At</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{detections.map((detection) => (
|
||||
<tr key={detection.id} className="hover:bg-gray-50">
|
||||
<td>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{detection.device?.name || `Device ${detection.device_id}`}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
ID: {detection.device_id}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className="px-2 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">
|
||||
{detection.drone_id}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="text-sm text-gray-900">
|
||||
{detection.drone_type === 0 ? 'Unknown' : `Type ${detection.drone_type}`}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="text-sm text-gray-900">
|
||||
{detection.freq} MHz
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`text-sm font-medium ${
|
||||
detection.rssi > -60 ? 'text-red-600' :
|
||||
detection.rssi > -80 ? 'text-yellow-600' : 'text-green-600'
|
||||
}`}>
|
||||
{detection.rssi} dBm
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{detection.device?.location_description ||
|
||||
(detection.geo_lat && detection.geo_lon ?
|
||||
`${detection.geo_lat}, ${detection.geo_lon}` :
|
||||
'Unknown')}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="text-sm text-gray-900">
|
||||
{format(new Date(detection.server_timestamp), 'MMM dd, yyyy')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{format(new Date(detection.server_timestamp), 'HH:mm:ss')}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="text-primary-600 hover:text-primary-900 text-sm"
|
||||
onClick={() => {
|
||||
// TODO: Open detection details modal
|
||||
console.log('View detection details:', detection);
|
||||
}}
|
||||
>
|
||||
<EyeIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{detections.length === 0 && !loading && (
|
||||
<div className="text-center py-12">
|
||||
<MagnifyingGlassIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No detections found</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Try adjusting your search filters.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{pagination.total > 0 && (
|
||||
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div className="flex-1 flex justify-between sm:hidden">
|
||||
<button
|
||||
onClick={() => handlePageChange(Math.max(0, filters.offset - filters.limit))}
|
||||
disabled={filters.offset === 0}
|
||||
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePageChange(filters.offset + filters.limit)}
|
||||
disabled={filters.offset + filters.limit >= pagination.total}
|
||||
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-700">
|
||||
Showing{' '}
|
||||
<span className="font-medium">{filters.offset + 1}</span>
|
||||
{' '}to{' '}
|
||||
<span className="font-medium">
|
||||
{Math.min(filters.offset + filters.limit, pagination.total)}
|
||||
</span>
|
||||
{' '}of{' '}
|
||||
<span className="font-medium">{pagination.total}</span>
|
||||
{' '}results
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||||
<button
|
||||
onClick={() => handlePageChange(Math.max(0, filters.offset - filters.limit))}
|
||||
disabled={filters.offset === 0}
|
||||
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePageChange(filters.offset + filters.limit)}
|
||||
disabled={filters.offset + filters.limit >= pagination.total}
|
||||
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detections;
|
||||
437
client/src/pages/Devices.jsx
Normal file
437
client/src/pages/Devices.jsx
Normal file
@@ -0,0 +1,437 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import api from '../services/api';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ServerIcon,
|
||||
MapPinIcon,
|
||||
SignalIcon,
|
||||
BoltIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const Devices = () => {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [editingDevice, setEditingDevice] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices();
|
||||
}, []);
|
||||
|
||||
const fetchDevices = async () => {
|
||||
try {
|
||||
const response = await api.get('/devices?include_stats=true');
|
||||
setDevices(response.data.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching devices:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddDevice = () => {
|
||||
setEditingDevice(null);
|
||||
setShowAddModal(true);
|
||||
};
|
||||
|
||||
const handleEditDevice = (device) => {
|
||||
setEditingDevice(device);
|
||||
setShowAddModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteDevice = async (deviceId) => {
|
||||
if (window.confirm('Are you sure you want to deactivate this device?')) {
|
||||
try {
|
||||
await api.delete(`/devices/${deviceId}`);
|
||||
fetchDevices();
|
||||
} catch (error) {
|
||||
console.error('Error deleting device:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'offline':
|
||||
return 'bg-red-100 text-red-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getSignalStrength = (lastHeartbeat) => {
|
||||
if (!lastHeartbeat) return 'Unknown';
|
||||
|
||||
const timeSince = (new Date() - new Date(lastHeartbeat)) / 1000 / 60; // minutes
|
||||
if (timeSince < 5) return 'Strong';
|
||||
if (timeSince < 15) return 'Good';
|
||||
if (timeSince < 60) return 'Weak';
|
||||
return 'Lost';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Devices
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Manage your drone detection devices
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddDevice}
|
||||
className="btn btn-primary flex items-center space-x-2"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span>Add Device</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Device Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{devices.map((device) => (
|
||||
<div key={device.id} className="bg-white rounded-lg shadow border border-gray-200 hover:shadow-md transition-shadow">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
device.stats?.status === 'online' ? 'bg-green-400' : 'bg-red-400'
|
||||
}`} />
|
||||
<h4 className="text-lg font-medium text-gray-900">
|
||||
{device.name || `Device ${device.id}`}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex space-x-1">
|
||||
<button
|
||||
onClick={() => handleEditDevice(device)}
|
||||
className="p-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteDevice(device.id)}
|
||||
className="p-1 text-gray-400 hover:text-red-600"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Status</span>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getStatusColor(device.stats?.status)
|
||||
}`}>
|
||||
{device.stats?.status || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Device ID</span>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{device.id}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{device.location_description && (
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-sm text-gray-500">Location</span>
|
||||
<span className="text-sm text-gray-900 text-right">
|
||||
{device.location_description}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(device.geo_lat && device.geo_lon) && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Coordinates</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
{device.geo_lat}, {device.geo_lon}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Signal</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
{getSignalStrength(device.last_heartbeat)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{device.stats && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Detections (24h)</span>
|
||||
<span className={`text-sm font-medium ${
|
||||
device.stats.detections_24h > 0 ? 'text-red-600' : 'text-green-600'
|
||||
}`}>
|
||||
{device.stats.detections_24h}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{device.last_heartbeat && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Last Seen</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
{format(new Date(device.last_heartbeat), 'MMM dd, HH:mm')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{device.firmware_version && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">Firmware</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
{device.firmware_version}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Device Actions */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex space-x-2">
|
||||
<button className="flex-1 text-xs bg-gray-100 text-gray-700 py-2 px-3 rounded hover:bg-gray-200 transition-colors">
|
||||
View Details
|
||||
</button>
|
||||
<button className="flex-1 text-xs bg-primary-100 text-primary-700 py-2 px-3 rounded hover:bg-primary-200 transition-colors">
|
||||
View on Map
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{devices.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<ServerIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No devices</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Get started by adding your first drone detection device.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={handleAddDevice}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
Add Device
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add/Edit Device Modal */}
|
||||
{showAddModal && (
|
||||
<DeviceModal
|
||||
device={editingDevice}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSave={() => {
|
||||
setShowAddModal(false);
|
||||
fetchDevices();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DeviceModal = ({ device, onClose, onSave }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
id: device?.id || '',
|
||||
name: device?.name || '',
|
||||
geo_lat: device?.geo_lat || '',
|
||||
geo_lon: device?.geo_lon || '',
|
||||
location_description: device?.location_description || '',
|
||||
heartbeat_interval: device?.heartbeat_interval || 300,
|
||||
firmware_version: device?.firmware_version || '',
|
||||
notes: device?.notes || ''
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
if (device) {
|
||||
// Update existing device
|
||||
await api.put(`/devices/${device.id}`, formData);
|
||||
} else {
|
||||
// Create new device
|
||||
await api.post('/devices', formData);
|
||||
}
|
||||
onSave();
|
||||
} catch (error) {
|
||||
console.error('Error saving device:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose} />
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
{device ? 'Edit Device' : 'Add New Device'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{!device && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Device ID *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="id"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.id}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Device Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Latitude
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
name="geo_lat"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.geo_lat}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Longitude
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
name="geo_lon"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.geo_lon}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Location Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="location_description"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.location_description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Heartbeat Interval (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="heartbeat_interval"
|
||||
min="60"
|
||||
max="3600"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.heartbeat_interval}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
rows="3"
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
value={formData.notes}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : (device ? 'Update' : 'Create')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Devices;
|
||||
134
client/src/pages/Login.jsx
Normal file
134
client/src/pages/Login.jsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const Login = () => {
|
||||
const [credentials, setCredentials] = useState({
|
||||
username: '',
|
||||
password: ''
|
||||
});
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const { login, loading, isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!credentials.username || !credentials.password) {
|
||||
toast.error('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await login(credentials);
|
||||
|
||||
if (result.success) {
|
||||
toast.success('Login successful!');
|
||||
} else {
|
||||
toast.error(result.error || 'Login failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
setCredentials({
|
||||
...credentials,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<div className="mx-auto h-12 w-12 bg-primary-600 rounded-lg flex items-center justify-center">
|
||||
<svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
Drone Detection System
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-gray-600">
|
||||
Sign in to your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label htmlFor="username" className="sr-only">
|
||||
Username or Email
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Username or Email"
|
||||
value={credentials.username}
|
||||
onChange={handleChange}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<label htmlFor="password" className="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
required
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Password"
|
||||
value={credentials.password}
|
||||
onChange={handleChange}
|
||||
disabled={loading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeSlashIcon className="h-5 w-5 text-gray-400" />
|
||||
) : (
|
||||
<EyeIcon className="h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
) : (
|
||||
'Sign in'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Demo credentials: <br />
|
||||
Username: <code className="bg-gray-100 px-1 rounded">admin</code> <br />
|
||||
Password: <code className="bg-gray-100 px-1 rounded">password</code>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
283
client/src/pages/MapView.jsx
Normal file
283
client/src/pages/MapView.jsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
|
||||
import { Icon } from 'leaflet';
|
||||
import { useSocket } from '../contexts/SocketContext';
|
||||
import api from '../services/api';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
ServerIcon,
|
||||
ExclamationTriangleIcon,
|
||||
SignalIcon,
|
||||
EyeIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// Fix for default markers in React Leaflet
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl,
|
||||
iconUrl,
|
||||
shadowUrl,
|
||||
});
|
||||
|
||||
// Custom icons
|
||||
const createDeviceIcon = (status, hasDetections) => {
|
||||
let color = '#6b7280'; // gray for offline/inactive
|
||||
|
||||
if (status === 'online') {
|
||||
color = hasDetections ? '#ef4444' : '#22c55e'; // red if detecting, green if online
|
||||
}
|
||||
|
||||
return new Icon({
|
||||
iconUrl: `data:image/svg+xml;base64,${btoa(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
|
||||
<circle cx="12" cy="12" r="10" fill="${color}" stroke="#fff" stroke-width="2"/>
|
||||
<path d="M12 8v4l3 3" stroke="#fff" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
`)}`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 16],
|
||||
popupAnchor: [0, -16],
|
||||
});
|
||||
};
|
||||
|
||||
const MapView = () => {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mapCenter, setMapCenter] = useState([59.3293, 18.0686]); // Stockholm default
|
||||
const [mapZoom, setMapZoom] = useState(10);
|
||||
const { recentDetections, deviceStatus } = useSocket();
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices();
|
||||
const interval = setInterval(fetchDevices, 30000); // Refresh every 30 seconds
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchDevices = async () => {
|
||||
try {
|
||||
const response = await api.get('/devices/map');
|
||||
const deviceData = response.data.data;
|
||||
|
||||
setDevices(deviceData);
|
||||
|
||||
// Set map center to first device with valid coordinates
|
||||
const deviceWithCoords = deviceData.find(d => d.geo_lat && d.geo_lon);
|
||||
if (deviceWithCoords && devices.length === 0) {
|
||||
setMapCenter([deviceWithCoords.geo_lat, deviceWithCoords.geo_lon]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching devices:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getDeviceStatus = (device) => {
|
||||
const realtimeStatus = deviceStatus[device.id];
|
||||
if (realtimeStatus) {
|
||||
return realtimeStatus.status;
|
||||
}
|
||||
return device.status || 'offline';
|
||||
};
|
||||
|
||||
const getDeviceDetections = (deviceId) => {
|
||||
return recentDetections.filter(d => d.device_id === deviceId);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Device Map
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Real-time view of all devices and their detection status
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="h-96 lg:h-[600px]">
|
||||
<MapContainer
|
||||
center={mapCenter}
|
||||
zoom={mapZoom}
|
||||
className="h-full w-full"
|
||||
whenCreated={(map) => {
|
||||
// Auto-fit to device locations if available
|
||||
const validDevices = devices.filter(d => d.geo_lat && d.geo_lon);
|
||||
if (validDevices.length > 1) {
|
||||
const bounds = validDevices.map(d => [d.geo_lat, d.geo_lon]);
|
||||
map.fitBounds(bounds, { padding: [20, 20] });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{devices
|
||||
.filter(device => device.geo_lat && device.geo_lon)
|
||||
.map(device => {
|
||||
const status = getDeviceStatus(device);
|
||||
const detections = getDeviceDetections(device.id);
|
||||
const hasRecentDetections = detections.length > 0;
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={device.id}
|
||||
position={[device.geo_lat, device.geo_lon]}
|
||||
icon={createDeviceIcon(status, hasRecentDetections)}
|
||||
eventHandlers={{
|
||||
click: () => setSelectedDevice(device),
|
||||
}}
|
||||
>
|
||||
<Popup>
|
||||
<DevicePopup
|
||||
device={device}
|
||||
status={status}
|
||||
detections={detections}
|
||||
/>
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
})}
|
||||
</MapContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-medium text-gray-900">Device Status</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200">
|
||||
{devices.map(device => {
|
||||
const status = getDeviceStatus(device);
|
||||
const detections = getDeviceDetections(device.id);
|
||||
|
||||
return (
|
||||
<DeviceListItem
|
||||
key={device.id}
|
||||
device={device}
|
||||
status={status}
|
||||
detections={detections}
|
||||
onClick={() => setSelectedDevice(device)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{devices.length === 0 && (
|
||||
<div className="px-6 py-8 text-center text-gray-500">
|
||||
No devices found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DevicePopup = ({ device, status, detections }) => (
|
||||
<div className="p-2 min-w-[200px]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{device.name || `Device ${device.id}`}
|
||||
</h4>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
status === 'online'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{device.location_description && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{device.location_description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div>ID: {device.id}</div>
|
||||
<div>Coordinates: {device.geo_lat}, {device.geo_lon}</div>
|
||||
{device.last_heartbeat && (
|
||||
<div>
|
||||
Last seen: {format(new Date(device.last_heartbeat), 'MMM dd, HH:mm')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{detections.length > 0 && (
|
||||
<div className="mt-3 pt-2 border-t border-gray-200">
|
||||
<div className="flex items-center space-x-1 text-red-600 text-sm font-medium mb-1">
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
<span>{detections.length} recent detection{detections.length > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
{detections.slice(0, 3).map((detection, index) => (
|
||||
<div key={index} className="text-xs text-gray-600">
|
||||
Drone {detection.drone_id} • {detection.freq}MHz • {detection.rssi}dBm
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const DeviceListItem = ({ device, status, detections, onClick }) => (
|
||||
<div
|
||||
className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
status === 'online'
|
||||
? detections.length > 0 ? 'bg-red-400 animate-pulse' : 'bg-green-400'
|
||||
: 'bg-gray-400'
|
||||
}`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{device.name || `Device ${device.id}`}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{device.location_description || `${device.geo_lat}, ${device.geo_lon}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{detections.length > 0 && (
|
||||
<div className="flex items-center space-x-1 text-red-600">
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">{detections.length}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
status === 'online'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default MapView;
|
||||
Reference in New Issue
Block a user