MODEL/usda-vision
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Enhance Docker Compose configuration and improve camera manager error handling

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

25
management-dashboard-web-app/src/components/VisionSystem.tsx
View File

@@ -16,9 +16,10 @@ import {
import { useAuth } from '../hooks/useAuth'
import { CameraConfigModal } from './CameraConfigModal'
import { CameraPreviewModal } from './CameraPreviewModal'
import { MqttDebugPanel } from './MqttDebugPanel'
// Memoized components to prevent unnecessary re-renders
const SystemOverview = memo(({ systemStatus }: { systemStatus: SystemStatus }) => (
const SystemOverview = memo(({ systemStatus, onMqttDebugClick }: { systemStatus: SystemStatus, onMqttDebugClick?: () => void }) => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="p-5">
@@ -38,7 +39,7 @@ const SystemOverview = memo(({ systemStatus }: { systemStatus: SystemStatus }) =
</div>
</div>
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="bg-white overflow-hidden shadow rounded-lg relative">
<div className="p-5">
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -54,6 +55,17 @@ const SystemOverview = memo(({ systemStatus }: { systemStatus: SystemStatus }) =
</div>
</div>
</div>
{onMqttDebugClick && (
<button
onClick={onMqttDebugClick}
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>
<div className="bg-white overflow-hidden shadow rounded-lg">
@@ -499,6 +511,9 @@ export function VisionSystem() {
const [previewModalOpen, setPreviewModalOpen] = useState(false)
const [previewCamera, setPreviewCamera] = useState<string | null>(null)
// MQTT debug panel state
const [debugPanelOpen, setDebugPanelOpen] = useState(false)
const intervalRef = useRef<NodeJS.Timeout | null>(null)
const clearAutoRefresh = useCallback(() => {
@@ -837,7 +852,7 @@ export function VisionSystem() {
</div>
{/* System Overview */}
{systemStatus && <SystemOverview systemStatus={systemStatus} />}
{systemStatus && <SystemOverview systemStatus={systemStatus} onMqttDebugClick={() => setDebugPanelOpen(true)} />}
@@ -932,6 +947,10 @@ export function VisionSystem() {
setPreviewCamera(null)
}}
/>
<MqttDebugPanel
isOpen={debugPanelOpen}
onClose={() => setDebugPanelOpen(false)}
/>
)}
{/* Notification */}