chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

feat(web): detect, clips, snapshots toggles

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-17 20:53:57 -08:00
committed by Blake Blackshear
parent e399790442
commit b6ba6459fb
18 changed files with 500 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/routes/Cameras.jsx
View File

@@ -2,6 +2,10 @@ import { h } from 'preact';
import ActivityIndicator from '../components/ActivityIndicator';
import Card from '../components/Card';
import CameraImage from '../components/CameraImage';
import ClipIcon from '../icons/Clip';
import MotionIcon from '../icons/Motion';
import SnapshotIcon from '../icons/Snapshot';
import { useDetectState, useClipsState, useSnapshotsState } from '../api/mqtt';
import { useConfig, FetchStatus } from '../api';
import { useMemo } from 'preact/hooks';
@@ -20,8 +24,42 @@ export default function Cameras() {
}
function Camera({ name }) {
const { payload: detectValue, send: sendDetect } = useDetectState(name);
const { payload: clipValue, send: sendClips } = useClipsState(name);
const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
const href = `/cameras/${name}`;
const buttons = useMemo(() => [{ name: 'Events', href: `/events?camera=${name}` }], [name]);
const icons = useMemo(
() => [
{
name: `Toggle detect ${detectValue === 'ON' ? 'off' : 'on'}`,
icon: MotionIcon,
color: detectValue === 'ON' ? 'blue' : 'gray',
onClick: () => {
sendDetect(detectValue === 'ON' ? 'OFF' : 'ON');
},
},
{
name: `Toggle clips ${clipValue === 'ON' ? 'off' : 'on'}`,
icon: ClipIcon,
color: clipValue === 'ON' ? 'blue' : 'gray',
onClick: () => {
sendClips(clipValue === 'ON' ? 'OFF' : 'ON');
},
},
{
name: `Toggle snapshots ${snapshotValue === 'ON' ? 'off' : 'on'}`,
icon: SnapshotIcon,
color: snapshotValue === 'ON' ? 'blue' : 'gray',
onClick: () => {
sendSnapshots(snapshotValue === 'ON' ? 'OFF' : 'ON');
},
},
],
[detectValue, sendDetect, clipValue, sendClips, snapshotValue, sendSnapshots]
);
return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} stretch />} />;
return (
<Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} />
);
}

2
web/src/routes/Debug.jsx
View File

@@ -14,7 +14,7 @@ export default function Debug() {
const { data: config } = useConfig();
const {
value: { stats },
value: { payload: stats },
} = useMqtt('stats');
const { data: initialStats } = useStats();

7
web/src/routes/StyleGuide.jsx
View File

@@ -25,6 +25,7 @@ export default function StyleGuide() {
<Button>Default</Button>
<Button color="red">Danger</Button>
<Button color="green">Save</Button>
<Button color="gray">Gray</Button>
<Button disabled>Disabled</Button>
</div>
<div className="flex space-x-4 mb-4">
@@ -35,6 +36,9 @@ export default function StyleGuide() {
<Button color="green" type="text">
Save
</Button>
<Button color="gray" type="text">
Gray
</Button>
<Button disabled type="text">
Disabled
</Button>
@@ -47,6 +51,9 @@ export default function StyleGuide() {
<Button color="green" type="outlined">
Save
</Button>
<Button color="gray" type="outlined">
Gray
</Button>
<Button disabled type="outlined">
Disabled
</Button>

37
web/src/routes/__tests__/Cameras.test.jsx
View File

@@ -1,8 +1,9 @@
import { h } from 'preact';
import * as Api from '../../api';
import Cameras from '../Cameras';
import * as CameraImage from '../../components/CameraImage';
import { render, screen } from '@testing-library/preact';
import * as Mqtt from '../../api/mqtt';
import Cameras from '../Cameras';
import { fireEvent, render, screen } from '@testing-library/preact';
describe('Cameras Route', () => {
let useConfigMock;
@@ -19,6 +20,7 @@ describe('Cameras Route', () => {
}));
jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
jest.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
});
test('shows an ActivityIndicator if not yet loaded', async () => {
@@ -38,4 +40,35 @@ describe('Cameras Route', () => {
expect(screen.queryByText('side')).toBeInTheDocument();
expect(screen.queryByText('side').closest('a')).toHaveAttribute('href', '/cameras/side');
});
test('buttons toggle detect, clips, and snapshots', async () => {
const sendDetect = jest.fn();
const sendClips = jest.fn();
const sendSnapshots = jest.fn();
jest.spyOn(Mqtt, 'useDetectState').mockImplementation(() => {
return { payload: 'ON', send: sendDetect };
});
jest.spyOn(Mqtt, 'useClipsState').mockImplementation(() => {
return { payload: 'OFF', send: sendClips };
});
jest.spyOn(Mqtt, 'useSnapshotsState').mockImplementation(() => {
return { payload: 'ON', send: sendSnapshots };
});
render(<Cameras />);
fireEvent.click(screen.getAllByLabelText('Toggle detect off')[0]);
expect(sendDetect).toHaveBeenCalledWith('OFF');
expect(sendDetect).toHaveBeenCalledTimes(1);
fireEvent.click(screen.getAllByLabelText('Toggle snapshots off')[0]);
expect(sendSnapshots).toHaveBeenCalledWith('OFF');
fireEvent.click(screen.getAllByLabelText('Toggle clips on')[0]);
expect(sendClips).toHaveBeenCalledWith('ON');
expect(sendDetect).toHaveBeenCalledTimes(1);
expect(sendSnapshots).toHaveBeenCalledTimes(1);
expect(sendClips).toHaveBeenCalledTimes(1);
});
});

49
web/src/routes/__tests__/Debug.test.jsx
View File

@@ -1,10 +1,11 @@
import { h } from 'preact';
import * as Api from '../../api';
import * as Mqtt from '../../api/mqtt';
import Debug from '../Debug';
import { render, screen } from '@testing-library/preact';
describe('Debug Route', () => {
let useStatsMock;
let useStatsMock, useMqttMock;
beforeEach(() => {
jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
@@ -16,10 +17,14 @@ describe('Debug Route', () => {
front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } },
side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] } },
},
mqtt: {
stats_interva: 60,
},
},
status: 'loaded',
}));
useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => statsMock);
useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => ({ data: statsMock }));
useMqttMock = jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: null } }));
});
test('shows an ActivityIndicator if stats are null', async () => {
@@ -43,29 +48,31 @@ describe('Debug Route', () => {
expect(screen.queryByRole('button', { name: 'Copy to Clipboard' })).toBeInTheDocument();
});
test('updates the stats on a timeout', async () => {
jest.spyOn(window, 'setTimeout').mockReturnValue(123);
render(<Debug />);
expect(useStatsMock).toHaveBeenCalledWith(null, null);
jest.advanceTimersByTime(1001);
expect(useStatsMock).toHaveBeenCalledWith(null, 123);
expect(useStatsMock).toHaveBeenCalledTimes(2);
test('updates the stats from mqtt', async () => {
const { rerender } = render(<Debug />);
expect(useMqttMock).toHaveBeenCalledWith('stats');
useMqttMock.mockReturnValue({
value: {
payload: { ...statsMock, detectors: { coral: { ...statsMock.detectors.coral, inference_speed: 42.4242 } } },
},
});
rerender(<Debug />);
expect(screen.queryByText('42.4242')).toBeInTheDocument();
});
});
const statsMock = {
data: {
detection_fps: 0.0,
detectors: { coral: { detection_start: 0.0, inference_speed: 8.94, pid: 52 } },
front: { camera_fps: 5.0, capture_pid: 64, detection_fps: 0.0, pid: 54, process_fps: 0.0, skipped_fps: 0.0 },
side: {
camera_fps: 6.9,
capture_pid: 71,
detection_fps: 0.0,
detectors: { coral: { detection_start: 0.0, inference_speed: 8.94, pid: 52 } },
front: { camera_fps: 5.0, capture_pid: 64, detection_fps: 0.0, pid: 54, process_fps: 0.0, skipped_fps: 0.0 },
side: {
camera_fps: 6.9,
capture_pid: 71,
detection_fps: 0.0,
pid: 60,
process_fps: 0.0,
skipped_fps: 0.0,
},
service: { uptime: 34812, version: '0.8.1-d376f6b' },
pid: 60,
process_fps: 0.0,
skipped_fps: 0.0,
},
service: { uptime: 34812, version: '0.8.1-d376f6b' },
};