mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-07 03:35:26 +03:00
formatting fixes
This commit is contained in:
Blake Blackshear
parent
86576889b1
commit
acece272ab
@ -61,8 +61,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
|
||||
className="max-h-[35px] mx-2"
|
||||
onClick={() => onSelectSingle(item)}
|
||||
>
|
||||
{ (title === "Labels" && config.audio.listen.includes(item)) ? ( <SpeakerIcon /> ) : ( <CameraIcon /> ) }
|
||||
|
||||
{title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,8 +30,8 @@ export default function CameraMasks({ camera }) {
|
||||
Array.isArray(motionMask)
|
||||
? motionMask.map((mask) => getPolylinePoints(mask))
|
||||
: motionMask
|
||||
? [getPolylinePoints(motionMask)]
|
||||
: []
|
||||
? [getPolylinePoints(motionMask)]
|
||||
: []
|
||||
);
|
||||
|
||||
const [zonePoints, setZonePoints] = useState(
|
||||
@ -45,8 +45,8 @@ export default function CameraMasks({ camera }) {
|
||||
[name]: Array.isArray(objectFilters[name].mask)
|
||||
? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
|
||||
: objectFilters[name].mask
|
||||
? [getPolylinePoints(objectFilters[name].mask)]
|
||||
: [],
|
||||
? [getPolylinePoints(objectFilters[name].mask)]
|
||||
: [],
|
||||
}),
|
||||
{}
|
||||
)
|
||||
@ -146,7 +146,6 @@ export default function CameraMasks({ camera }) {
|
||||
}
|
||||
}, [camera, motionMaskPoints]);
|
||||
|
||||
|
||||
// Zone methods
|
||||
const handleEditZone = useCallback(
|
||||
(key) => {
|
||||
@ -175,9 +174,11 @@ export default function CameraMasks({ camera }) {
|
||||
const handleCopyZones = useCallback(async () => {
|
||||
const textToCopy = ` zones:
|
||||
${Object.keys(zonePoints)
|
||||
.map(
|
||||
(zoneName) => ` ${zoneName}:
|
||||
coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`).join('\n')}`;
|
||||
.map(
|
||||
(zoneName) => ` ${zoneName}:
|
||||
coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
|
||||
)
|
||||
.join('\n')}`;
|
||||
|
||||
if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
|
||||
// Use Clipboard API if available
|
||||
@ -207,7 +208,10 @@ ${Object.keys(zonePoints)
|
||||
const handleSaveZones = useCallback(async () => {
|
||||
try {
|
||||
const queryParameters = Object.keys(zonePoints)
|
||||
.map((zoneName) => `cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`)
|
||||
.map(
|
||||
(zoneName) =>
|
||||
`cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`
|
||||
)
|
||||
.join('&');
|
||||
const endpoint = `config/set?${queryParameters}`;
|
||||
const response = await axios.put(endpoint);
|
||||
@ -252,21 +256,26 @@ ${Object.keys(zonePoints)
|
||||
await window.navigator.clipboard.writeText(` objects:
|
||||
filters:
|
||||
${Object.keys(objectMaskPoints)
|
||||
.map((objectName) =>
|
||||
objectMaskPoints[objectName].length
|
||||
? ` ${objectName}:
|
||||
.map((objectName) =>
|
||||
objectMaskPoints[objectName].length
|
||||
? ` ${objectName}:
|
||||
mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
|
||||
: ''
|
||||
)
|
||||
.filter(Boolean)
|
||||
.join('\n')}`);
|
||||
: ''
|
||||
)
|
||||
.filter(Boolean)
|
||||
.join('\n')}`);
|
||||
}, [objectMaskPoints]);
|
||||
|
||||
const handleSaveObjectMasks = useCallback(async () => {
|
||||
try {
|
||||
const queryParameters = Object.keys(objectMaskPoints)
|
||||
.filter((objectName) => objectMaskPoints[objectName].length > 0)
|
||||
.map((objectName, index) => `cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(objectMaskPoints[objectName])}`)
|
||||
.map(
|
||||
(objectName, index) =>
|
||||
`cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(
|
||||
objectMaskPoints[objectName]
|
||||
)}`
|
||||
)
|
||||
.join('&');
|
||||
const endpoint = `config/set?${queryParameters}`;
|
||||
const response = await axios.put(endpoint);
|
||||
@ -324,8 +333,8 @@ ${Object.keys(objectMaskPoints)
|
||||
<Card
|
||||
content={
|
||||
<p>
|
||||
When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file
|
||||
restart your Frigate instance to save your changes.
|
||||
When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file restart
|
||||
your Frigate instance to save your changes.
|
||||
</p>
|
||||
}
|
||||
header="Warning"
|
||||
@ -487,16 +496,16 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
|
||||
{!scaledPoints
|
||||
? null
|
||||
: scaledPoints.map(([x, y], i) => (
|
||||
<PolyPoint
|
||||
key={i}
|
||||
boundingRef={boundingRef}
|
||||
index={i}
|
||||
onMove={handleMovePoint}
|
||||
onRemove={handleRemovePoint}
|
||||
x={x + MaskInset}
|
||||
y={y + MaskInset}
|
||||
/>
|
||||
))}
|
||||
<PolyPoint
|
||||
key={i}
|
||||
boundingRef={boundingRef}
|
||||
index={i}
|
||||
onMove={handleMovePoint}
|
||||
onRemove={handleRemovePoint}
|
||||
x={x + MaskInset}
|
||||
y={y + MaskInset}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
|
||||
<svg
|
||||
width="100%"
|
||||
@ -569,8 +578,6 @@ function MaskValues({
|
||||
[onAdd]
|
||||
);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
|
||||
<div className="flex space-x-4">
|
||||
|
||||
@ -34,7 +34,7 @@ export default function Config() {
|
||||
})
|
||||
.catch((error) => {
|
||||
setSuccess('');
|
||||
|
||||
|
||||
if (error.response) {
|
||||
setError(error.response.data.message);
|
||||
} else {
|
||||
@ -61,9 +61,9 @@ export default function Config() {
|
||||
|
||||
let yamlModel;
|
||||
if (editor.getModels().length > 0) {
|
||||
yamlModel = editor.getModel(modelUri)
|
||||
yamlModel = editor.getModel(modelUri);
|
||||
} else {
|
||||
yamlModel = editor.createModel(config, 'yaml', modelUri)
|
||||
yamlModel = editor.createModel(config, 'yaml', modelUri);
|
||||
}
|
||||
|
||||
setDiagnosticsOptions({
|
||||
@ -100,10 +100,10 @@ export default function Config() {
|
||||
<Button className="mx-2" onClick={(e) => handleCopyConfig(e)}>
|
||||
Copy Config
|
||||
</Button>
|
||||
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "restart")}>
|
||||
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'restart')}>
|
||||
Save & Restart
|
||||
</Button>
|
||||
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "saveonly")}>
|
||||
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'saveonly')}>
|
||||
Save Only
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -419,13 +419,13 @@ export default function Events({ path, ...props }) {
|
||||
downloadEvent.end_time &&
|
||||
downloadEvent.has_snapshot &&
|
||||
!downloadEvent.plus_id && (
|
||||
<MenuItem
|
||||
icon={UploadPlus}
|
||||
label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'}
|
||||
value="plus"
|
||||
onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)}
|
||||
/>
|
||||
)}
|
||||
<MenuItem
|
||||
icon={UploadPlus}
|
||||
label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'}
|
||||
value="plus"
|
||||
onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)}
|
||||
/>
|
||||
)}
|
||||
{downloadEvent.plus_id && (
|
||||
<MenuItem
|
||||
icon={UploadPlus}
|
||||
|
||||
@ -334,80 +334,86 @@ export default function System() {
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
|
||||
{cameraNames.map((camera) => ( config.cameras[camera]["enabled"] && (
|
||||
<div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
|
||||
<div className="capitalize text-lg flex justify-between p-4">
|
||||
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
|
||||
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<Table className="w-full">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Process</Th>
|
||||
<Th>P-ID</Th>
|
||||
<Th>FPS</Th>
|
||||
<Th>CPU %</Th>
|
||||
<Th>Memory %</Th>
|
||||
{config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr key="ffmpeg" index="0">
|
||||
<Td>
|
||||
ffmpeg
|
||||
<Button
|
||||
className="rounded-full"
|
||||
type="text"
|
||||
color="gray"
|
||||
aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']}
|
||||
onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])}
|
||||
>
|
||||
<About className="w-3" />
|
||||
</Button>
|
||||
</Td>
|
||||
<Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
|
||||
<Td>{cameras[camera]['camera_fps'] || '- '}</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && (
|
||||
<Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td>
|
||||
)}
|
||||
</Tr>
|
||||
<Tr key="capture" index="1">
|
||||
<Td>Capture</Td>
|
||||
<Td>{cameras[camera]['capture_pid'] || '- '}</Td>
|
||||
<Td>{cameras[camera]['process_fps'] || '- '}</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && <Td>-</Td>}
|
||||
</Tr>
|
||||
<Tr key="detect" index="2">
|
||||
<Td>Detect</Td>
|
||||
<Td>{cameras[camera]['pid'] || '- '}</Td>
|
||||
{cameraNames.map(
|
||||
(camera) =>
|
||||
config.cameras[camera]['enabled'] && (
|
||||
<div
|
||||
key={camera}
|
||||
className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"
|
||||
>
|
||||
<div className="capitalize text-lg flex justify-between p-4">
|
||||
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
|
||||
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<Table className="w-full">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Process</Th>
|
||||
<Th>P-ID</Th>
|
||||
<Th>FPS</Th>
|
||||
<Th>CPU %</Th>
|
||||
<Th>Memory %</Th>
|
||||
{config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr key="ffmpeg" index="0">
|
||||
<Td>
|
||||
ffmpeg
|
||||
<Button
|
||||
className="rounded-full"
|
||||
type="text"
|
||||
color="gray"
|
||||
aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']}
|
||||
onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])}
|
||||
>
|
||||
<About className="w-3" />
|
||||
</Button>
|
||||
</Td>
|
||||
<Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
|
||||
<Td>{cameras[camera]['camera_fps'] || '- '}</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && (
|
||||
<Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td>
|
||||
)}
|
||||
</Tr>
|
||||
<Tr key="capture" index="1">
|
||||
<Td>Capture</Td>
|
||||
<Td>{cameras[camera]['capture_pid'] || '- '}</Td>
|
||||
<Td>{cameras[camera]['process_fps'] || '- '}</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && <Td>-</Td>}
|
||||
</Tr>
|
||||
<Tr key="detect" index="2">
|
||||
<Td>Detect</Td>
|
||||
<Td>{cameras[camera]['pid'] || '- '}</Td>
|
||||
|
||||
{(() => {
|
||||
if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
|
||||
return (
|
||||
<Td>
|
||||
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
|
||||
</Td>
|
||||
);
|
||||
else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
|
||||
return <Td>disabled</Td>;
|
||||
{(() => {
|
||||
if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
|
||||
return (
|
||||
<Td>
|
||||
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
|
||||
</Td>
|
||||
);
|
||||
else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
|
||||
return <Td>disabled</Td>;
|
||||
|
||||
return <Td>- </Td>;
|
||||
})()}
|
||||
return <Td>- </Td>;
|
||||
})()}
|
||||
|
||||
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && <Td>-</Td>}
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</div> )
|
||||
))}
|
||||
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
|
||||
<Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
|
||||
{config.telemetry.network_bandwidth && <Td>-</Td>}
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user