Enhance Docker Compose configuration and improve camera manager error handling

- Added container names for better identification of services in docker-compose.yml.
- Refactored CameraManager to include error handling during initialization of camera recorders and streamers, ensuring the system remains operational even if some components fail.
- Updated frontend components to support new MQTT Debug Panel functionality, enhancing monitoring capabilities.
This commit is contained in:
salirezav
2025-12-01 15:30:10 -05:00
parent 73849b40a8
commit b3a94d2d4f
14 changed files with 940 additions and 67 deletions

View File

@@ -4,9 +4,10 @@ import { visionApi, type SystemStatus, type MqttEvent } from '../services/api'
interface MqttStatusWidgetProps {
systemStatus: SystemStatus | null
onDebugClick?: () => void
}
export const MqttStatusWidget: React.FC<MqttStatusWidgetProps> = ({ systemStatus }) => {
export const MqttStatusWidget: React.FC<MqttStatusWidgetProps> = ({ systemStatus, onDebugClick }) => {
const [lastEvent, setLastEvent] = useState<MqttEvent | null>(null)
const isConnected = systemStatus?.mqtt_connected ?? false
const lastMessage = systemStatus?.last_mqtt_message
@@ -44,14 +45,27 @@ export const MqttStatusWidget: React.FC<MqttStatusWidgetProps> = ({ systemStatus
: 'No messages'
return (
<StatusWidget
title="MQTT Status"
status={isConnected}
statusText={isConnected ? 'Connected' : 'Disconnected'}
subtitle={subtitle || undefined}
icon={
<div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
}
/>
<div className="relative">
<StatusWidget
title="MQTT Status"
status={isConnected}
statusText={isConnected ? 'Connected' : 'Disconnected'}
subtitle={subtitle || undefined}
icon={
<div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
}
/>
{onDebugClick && (
<button
onClick={onDebugClick}
className="absolute top-2 right-2 text-gray-400 hover:text-purple-600 transition-colors p-1"
title="MQTT Debug Panel"
>
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fillRule="evenodd" clipRule="evenodd" />
</svg>
</button>
)}
</div>
)
}