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;
|
||||
Reference in New Issue
Block a user