administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Cleanup spacing

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 14:09:19 -06:00
parent 84064ea1c1
commit 3e7158b3d4
2 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/graph/SystemGraph.tsx
View File

@ -293,6 +293,7 @@ export function CameraLineGraph({
); );
const options = useMemo(() => { const options = useMemo(() => {
console.log(`new options`);
return { return {
chart: { chart: {
id: graphId, id: graphId,

70
web/src/views/system/CameraMetrics.tsx
View File

@ -148,45 +148,49 @@ export default function CameraMetrics({
return ( return (
<div className="size-full mt-4 flex flex-col overflow-y-auto"> <div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="mb-5">Cameras</div> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
{config && {config &&
Object.values(config.cameras).map((camera) => { Object.values(config.cameras).map((camera) => {
if (camera.enabled) { if (camera.enabled) {
return ( return (
<div key={camera.name} className="grid sm:grid-cols-2 gap-2"> <div className="w-full flex flex-col">
{Object.keys(cameraCpuSeries).includes(camera.name) ? ( <div className="mb-6 capitalize">
<div className="p-2.5 bg-primary rounded-2xl flex-col"> {camera.name.replaceAll("_", " ")}
<div className="mb-5 capitalize"> </div>
{camera.name.replaceAll("_", " ")} CPU <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
{Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">CPU</div>
<CameraLineGraph
graphId={`${camera.name}-cpu`}
unit="%"
dataLabels={["ffmpeg", "capture", "detect"]}
updateTimes={updateTimes}
data={Object.values(
cameraCpuSeries[camera.name] || {},
)}
/>
</div> </div>
<CameraLineGraph ) : (
graphId={`${camera.name}-cpu`} <Skeleton className="size-full aspect-video" />
unit="%" )}
dataLabels={["ffmpeg", "capture", "detect"]} {Object.keys(cameraFpsSeries).includes(camera.name) ? (
updateTimes={updateTimes} <div className="p-2.5 bg-primary rounded-2xl flex-col">
data={Object.values(cameraCpuSeries[camera.name] || {})} <div className="mb-5">DPS</div>
/> <CameraLineGraph
</div> graphId={`${camera.name}-dps`}
) : ( unit=" DPS"
<Skeleton className="size-full aspect-video" /> dataLabels={["detect", "skipped"]}
)} updateTimes={updateTimes}
{Object.keys(cameraFpsSeries).includes(camera.name) ? ( data={Object.values(
<div className="p-2.5 bg-primary rounded-2xl flex-col"> cameraFpsSeries[camera.name] || {},
<div className="mb-5 capitalize"> )}
{camera.name.replaceAll("_", " ")} DPS />
</div> </div>
<CameraLineGraph ) : (
graphId={`${camera.name}-dps`} <Skeleton className="size-full aspect-video" />
unit=" DPS" )}
dataLabels={["detect", "skipped"]} </div>
updateTimes={updateTimes}
data={Object.values(cameraFpsSeries[camera.name] || {})}
/>
</div>
) : (
<Skeleton className="size-full aspect-video" />
)}
</div> </div>
); );
} }