Chore: rename api->camera-management-api and web->management-dashboard-web-app; update compose, ignore, README references
This commit is contained in:
Alireza Vaezi
@@ -0,0 +1,162 @@
|
||||
import { memo, useState, useEffect } from 'react'
|
||||
import { visionApi, type AutoRecordingStatusResponse } from '../lib/visionApi'
|
||||
import { useAuth } from '../hooks/useAuth'
|
||||
|
||||
const AutoRecordingStatus = memo(() => {
|
||||
const { isAdmin } = useAuth()
|
||||
const isAdminUser = isAdmin()
|
||||
const [status, setStatus] = useState<AutoRecordingStatusResponse | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Fetch auto-recording status
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
const statusData = await visionApi.getAutoRecordingStatus()
|
||||
setStatus(statusData)
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch auto-recording status'
|
||||
setError(errorMessage)
|
||||
console.error('Failed to fetch auto-recording status:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch status on mount and set up polling
|
||||
useEffect(() => {
|
||||
if (!isAdminUser) {
|
||||
return
|
||||
}
|
||||
|
||||
fetchStatus()
|
||||
const interval = setInterval(fetchStatus, 10000) // Poll every 10 seconds
|
||||
return () => clearInterval(interval)
|
||||
}, [isAdminUser])
|
||||
|
||||
// Only show to admins
|
||||
if (!isAdminUser) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Auto-Recording System</h3>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
Server-side automatic recording based on machine state changes
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${status?.running ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{status?.running ? 'Running' : 'Stopped'}
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchStatus}
|
||||
disabled={loading}
|
||||
className="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Refreshing...' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="px-4 py-3 border-t border-gray-200">
|
||||
<div className="bg-red-50 border border-red-200 rounded-md p-3">
|
||||
<p className="text-red-800 text-sm">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className="border-t border-gray-200">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h4 className="text-md font-medium text-gray-900 mb-3">System Status</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">System Running:</span>
|
||||
<span className={`font-medium ${status.running ? 'text-green-600' : 'text-red-600'
|
||||
}`}>
|
||||
{status.running ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Auto-Recording Enabled:</span>
|
||||
<span className={`font-medium ${status.auto_recording_enabled ? 'text-green-600' : 'text-gray-600'
|
||||
}`}>
|
||||
{status.auto_recording_enabled ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Enabled Cameras:</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{status.enabled_cameras.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Retry Queue:</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{Object.keys(status.retry_queue).length} items
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{status.enabled_cameras.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<h5 className="text-sm font-medium text-gray-900 mb-2">Enabled Cameras:</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{status.enabled_cameras.map((camera) => (
|
||||
<span
|
||||
key={camera}
|
||||
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
|
||||
>
|
||||
{camera}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Object.keys(status.retry_queue).length > 0 && (
|
||||
<div className="mt-4">
|
||||
<h5 className="text-sm font-medium text-gray-900 mb-2">Retry Queue:</h5>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(status.retry_queue).map(([camera, retryInfo]) => (
|
||||
<div key={camera} className="text-xs text-gray-600 bg-yellow-50 p-2 rounded">
|
||||
<strong>{camera}:</strong> {JSON.stringify(retryInfo)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!status && !loading && !error && (
|
||||
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
|
||||
<div className="text-center text-gray-500">
|
||||
<p>Auto-recording status not available</p>
|
||||
<p className="text-sm mt-1">Click "Refresh" to fetch the current status</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
AutoRecordingStatus.displayName = 'AutoRecordingStatus'
|
||||
|
||||
export { AutoRecordingStatus }
|
||||
Reference in New Issue
Block a user