borg/drone-detector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix jwt-token

Browse Source
This commit is contained in:
Alexander Borg
2025-09-22 10:11:22 +02:00
parent c175173772
commit 7803122a8e
1 changed files with 46 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/pages/Alerts.jsx
View File

@@ -7,7 +7,9 @@ import {
BellIcon, BellIcon,
CheckCircleIcon, CheckCircleIcon,
XCircleIcon, XCircleIcon,
ExclamationTriangleIcon ExclamationTriangleIcon,
ChevronDownIcon,
ChevronRightIcon
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { EditAlertModal, DetectionDetailsModal } from '../components/AlertModals'; import { EditAlertModal, DetectionDetailsModal } from '../components/AlertModals';
@@ -22,6 +24,7 @@ const Alerts = () => {
const [editingRule, setEditingRule] = useState(null); const [editingRule, setEditingRule] = useState(null);
const [showDetectionModal, setShowDetectionModal] = useState(false); const [showDetectionModal, setShowDetectionModal] = useState(false);
const [selectedDetection, setSelectedDetection] = useState(null); const [selectedDetection, setSelectedDetection] = useState(null);
const [expandedGroups, setExpandedGroups] = useState(new Set());
useEffect(() => { useEffect(() => {
fetchAlertData(); fetchAlertData();
@@ -76,6 +79,16 @@ const Alerts = () => {
return groupedArrays; return groupedArrays;
}; };
const toggleGroupExpansion = (groupIndex) => {
const newExpanded = new Set(expandedGroups);
if (newExpanded.has(groupIndex)) {
newExpanded.delete(groupIndex);
} else {
newExpanded.add(groupIndex);
}
setExpandedGroups(newExpanded);
};
const handleDeleteRule = async (ruleId) => { const handleDeleteRule = async (ruleId) => {
if (window.confirm('Are you sure you want to delete this alert rule?')) { if (window.confirm('Are you sure you want to delete this alert rule?')) {
try { try {
@@ -371,8 +384,15 @@ const Alerts = () => {
</p> </p>
</div> </div>
) : ( ) : (
<div className="table-responsive"> <div>
<table className="table"> <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
<p className="text-sm text-blue-700">
💡 <strong>Alert Grouping:</strong> Related alerts (SMS, email, webhook) for the same detection event are grouped together.
Click the expand button (▶) or "+X more" badge to see all alerts in a group.
</p>
</div>
<div className="table-responsive">
<table className="table">
<thead> <thead>
<tr> <tr>
<th>{t('alerts.status')}</th> <th>{t('alerts.status')}</th>
@@ -397,14 +417,30 @@ const Alerts = () => {
<tr className="hover:bg-gray-50 border-b-2 border-gray-200"> <tr className="hover:bg-gray-50 border-b-2 border-gray-200">
<td> <td>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{relatedAlerts.length > 0 && (
<button
onClick={() => toggleGroupExpansion(groupIndex)}
className="p-1 rounded hover:bg-gray-200 transition-colors"
title={expandedGroups.has(groupIndex) ? 'Collapse group' : 'Expand group'}
>
{expandedGroups.has(groupIndex) ? (
<ChevronDownIcon className="h-4 w-4 text-gray-500" />
) : (
<ChevronRightIcon className="h-4 w-4 text-gray-500" />
)}
</button>
)}
{getStatusIcon(primaryAlert.status)} {getStatusIcon(primaryAlert.status)}
<span className="text-sm text-gray-900 capitalize"> <span className="text-sm text-gray-900 capitalize">
{primaryAlert.status} {primaryAlert.status}
</span> </span>
{relatedAlerts.length > 0 && ( {relatedAlerts.length > 0 && (
<span className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"> <button
onClick={() => toggleGroupExpansion(groupIndex)}
className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs hover:bg-blue-200 transition-colors cursor-pointer"
>
+{relatedAlerts.length} more +{relatedAlerts.length} more
</span> </button>
)} )}
</div> </div>
</td> </td>
@@ -413,7 +449,7 @@ const Alerts = () => {
<span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"> <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
{primaryAlert.alert_type} {primaryAlert.alert_type}
</span> </span>
{relatedAlerts.map((alert, idx) => ( {!expandedGroups.has(groupIndex) && relatedAlerts.map((alert, idx) => (
<span key={idx} className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs"> <span key={idx} className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">
{alert.alert_type} {alert.alert_type}
</span> </span>
@@ -423,7 +459,7 @@ const Alerts = () => {
<td> <td>
<div className="text-sm text-gray-900"> <div className="text-sm text-gray-900">
{primaryAlert.recipient} {primaryAlert.recipient}
{relatedAlerts.length > 0 && relatedAlerts.some(a => a.recipient !== primaryAlert.recipient) && ( {!expandedGroups.has(groupIndex) && relatedAlerts.length > 0 && relatedAlerts.some(a => a.recipient !== primaryAlert.recipient) && (
<div className="text-xs text-gray-500 mt-1"> <div className="text-xs text-gray-500 mt-1">
+{relatedAlerts.filter(a => a.recipient !== primaryAlert.recipient).length} others +{relatedAlerts.filter(a => a.recipient !== primaryAlert.recipient).length} others
</div> </div>
@@ -483,8 +519,8 @@ const Alerts = () => {
</td> </td>
</tr> </tr>
{/* Show related alerts as sub-rows if any */} {/* Show related alerts as sub-rows if expanded */}
{relatedAlerts.map((alert, alertIndex) => ( {expandedGroups.has(groupIndex) && relatedAlerts.map((alert, alertIndex) => (
<tr key={`related-${groupIndex}-${alertIndex}`} className="bg-gray-50 border-l-4 border-blue-200"> <tr key={`related-${groupIndex}-${alertIndex}`} className="bg-gray-50 border-l-4 border-blue-200">
<td className="pl-8"> <td className="pl-8">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@@ -563,6 +599,7 @@ const Alerts = () => {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
)} )}
</div> </div>
)} )}