diff --git a/client/src/pages/Alerts.jsx b/client/src/pages/Alerts.jsx index be3c074..a709841 100644 --- a/client/src/pages/Alerts.jsx +++ b/client/src/pages/Alerts.jsx @@ -796,6 +796,7 @@ const Alerts = () => { }; const CreateAlertRuleModal = ({ onClose, onSave }) => { + const { t } = useTranslation(); const [formData, setFormData] = useState({ name: '', description: '', @@ -820,17 +821,35 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => { fetchDevicesAndDroneTypes(); }, []); + // Debug effect to monitor state changes + useEffect(() => { + console.log('🔍 CreateAlertRuleModal state:', { + droneTypesCount: droneTypes.length, + devicesCount: devices.length, + loadingData, + droneTypesData: droneTypes + }); + }, [droneTypes, devices, loadingData]); + const fetchDevicesAndDroneTypes = async () => { try { + console.log('🔄 Fetching devices and drone types...'); + const [devicesResponse, droneTypesResponse] = await Promise.all([ api.get('/devices'), api.get('/drone-types') ]); + console.log('📊 Devices response:', devicesResponse.data); + console.log('📊 Drone types response:', droneTypesResponse.data); + setDevices(devicesResponse.data.data || []); setDroneTypes(droneTypesResponse.data.data || []); + + console.log('✅ Set devices:', devicesResponse.data.data?.length || 0); + console.log('✅ Set drone types:', droneTypesResponse.data.data?.length || 0); } catch (error) { - console.error('Error fetching devices and drone types:', error); + console.error('❌ Error fetching devices and drone types:', error); } finally { setLoadingData(false); } @@ -1038,23 +1057,29 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
Leave empty to monitor all drone types
- {droneTypes.map(droneType => ( - - ))} + {loadingData ? ( +
Loading drone types...
+ ) : droneTypes.length === 0 ? ( +
No drone types available. Check API connection.
+ ) : ( + droneTypes.map(droneType => ( + + )) + )}