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

Use prettier-plugin-tailwindcss (#11373)

Browse Source 
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/views/events/EventView.tsx
View File

@@ -252,14 +252,14 @@ export default function EventView({
}
return (
<div className="py-2 flex flex-col size-full">
<div className="flex size-full flex-col py-2">
<Toaster closeButton={true} />
<div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
<div className="relative mb-2 flex h-11 items-center justify-between pl-3 pr-2">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
)}
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={severityToggle}
@@ -272,7 +272,7 @@ export default function EventView({
value="alert"
aria-label="Select alerts"
>
<MdCircle className="size-2 md:mr-[10px] text-severity_alert" />
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:block">
Alerts{` ∙ ${reviewCounts.alert > -1 ? reviewCounts.alert : ""}`}
</div>
@@ -282,14 +282,14 @@ export default function EventView({
value="detection"
aria-label="Select detections"
>
<MdCircle className="size-2 md:mr-[10px] text-severity_detection" />
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:block">
Detections
{` ∙ ${reviewCounts.detection > -1 ? reviewCounts.detection : ""}`}
</div>
</ToggleGroupItem>
<ToggleGroupItem
className={`px-3 py-4 rounded-lg ${
className={`rounded-lg px-3 py-4 ${
severityToggle == "significant_motion"
? ""
: "text-muted-foreground"
@@ -297,7 +297,7 @@ export default function EventView({
value="significant_motion"
aria-label="Select motion"
>
<MdCircle className="size-2 md:mr-[10px] text-severity_significant_motion" />
<MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
<div className="hidden md:block">Motion</div>
</ToggleGroupItem>
</ToggleGroup>
@@ -576,11 +576,11 @@ function DetectionReview({
<>
<div
ref={contentRef}
className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"
>
{filter?.before == undefined && (
<NewReviewData
className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none"
className="pointer-events-none absolute left-1/2 z-50 -translate-x-1/2"
contentRef={contentRef}
reviewItems={currentItems}
itemsToReview={loading ? 0 : itemsToReview}
@@ -589,20 +589,20 @@ function DetectionReview({
)}
{!currentItems && (
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<ActivityIndicator />
</div>
)}
{!loading && currentItems?.length === 0 && (
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center">
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderCheck className="size-16" />
There are no {severity.replace(/_/g, " ")}s to review
</div>
)}
<div
className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
className="mx-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4"
ref={contentRef}
>
{!loading && currentItems
@@ -620,7 +620,7 @@ function DetectionReview({
}
className="review-item relative rounded-lg"
>
<div className="aspect-video rounded-lg overflow-hidden">
<div className="aspect-video overflow-hidden rounded-lg">
<PreviewThumbnailPlayer
review={value}
allPreviews={relevantPreviews}
@@ -632,7 +632,7 @@ function DetectionReview({
/>
</div>
<div
className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
/>
</div>
);
@@ -641,12 +641,12 @@ function DetectionReview({
Array(itemsToReview)
.fill(0)
.map((_, idx) => (
<Skeleton key={idx} className="size-full aspect-video" />
<Skeleton key={idx} className="aspect-video size-full" />
))}
{!loading &&
(currentItems?.length ?? 0) > 0 &&
(itemsToReview ?? 0) > 0 && (
<div className="col-span-full flex justify-center items-center">
<div className="col-span-full flex items-center justify-center">
<Button
className="text-white"
variant="select"
@@ -660,8 +660,8 @@ function DetectionReview({
)}
</div>
</div>
<div className="w-[65px] md:w-[110px] flex flex-row">
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
<div className="flex w-[65px] flex-row md:w-[110px]">
<div className="no-scrollbar w-[55px] overflow-y-auto md:w-[100px]">
{loading ? (
<Skeleton className="size-full" />
) : (
@@ -919,10 +919,10 @@ function MotionReview({
return (
<>
<div className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
<div
ref={contentRef}
className="w-full mx-2 px-1 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
className="no-scrollbar mx-2 grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
>
{reviewCameras.map((camera) => {
let grow;
@@ -965,12 +965,12 @@ function MotionReview({
}
/>
<div
className={`review-item-ring pointer-events-none z-20 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
className={`review-item-ring pointer-events-none absolute inset-0 z-20 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
/>
</>
) : (
<Skeleton
className={`rounded-lg md:rounded-2xl size-full ${spans} ${grow}`}
className={`size-full rounded-lg md:rounded-2xl ${spans} ${grow}`}
/>
)}
</div>
@@ -978,7 +978,7 @@ function MotionReview({
})}
</div>
</div>
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
<div className="no-scrollbar w-[55px] overflow-y-auto md:w-[100px]">
{motionData ? (
<MotionReviewTimeline
segmentDuration={segmentDuration}

36
web/src/views/events/RecordingView.tsx
View File

@@ -357,11 +357,11 @@ export function RecordingView({
}, [previewRowRef.current?.scrollWidth, previewRowRef.current?.scrollHeight]);
return (
<div ref={contentRef} className="size-full pt-2 flex flex-col">
<div ref={contentRef} className="flex size-full flex-col pt-2">
<Toaster closeButton={true} />
<div className="w-full h-11 mb-2 px-2 relative flex items-center justify-between">
<div className="relative mb-2 flex h-11 w-full items-center justify-between px-2">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
)}
<div className={cn("flex items-center gap-2")}>
<Button
@@ -422,7 +422,7 @@ export function RecordingView({
)}
{isDesktop ? (
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={timelineType}
@@ -469,8 +469,8 @@ export function RecordingView({
<div
ref={mainLayoutRef}
className={cn(
"h-full flex justify-center overflow-hidden",
isDesktop ? "" : "flex-col landscape:flex-row gap-2",
"flex h-full justify-center overflow-hidden",
isDesktop ? "" : "flex-col gap-2 landscape:flex-row",
)}
>
<div
@@ -479,7 +479,7 @@ export function RecordingView({
>
<div
className={cn(
"size-full flex items-center",
"flex size-full items-center",
mainCameraAspect == "tall"
? "flex-row justify-evenly"
: "flex-col justify-center gap-2",
@@ -491,7 +491,7 @@ export function RecordingView({
"relative",
isDesktop
? cn(
"px-4 flex justify-center",
"flex justify-center px-4",
mainCameraAspect == "tall"
? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]"
: mainCameraAspect == "wide"
@@ -499,10 +499,10 @@ export function RecordingView({
: "",
)
: cn(
"portrait:w-full pt-2",
"pt-2 portrait:w-full",
mainCameraAspect == "wide"
? "landscape:w-full aspect-wide"
: "landscape:h-[94%] aspect-video",
? "aspect-wide landscape:w-full"
: "aspect-video landscape:h-[94%]",
),
)}
style={{
@@ -545,8 +545,8 @@ export function RecordingView({
"flex gap-2 overflow-auto",
mainCameraAspect == "tall"
? "h-full w-48 flex-col"
: `w-full h-28`,
previewRowOverflows ? "" : "justify-center items-center",
: `h-28 w-full`,
previewRowOverflows ? "" : "items-center justify-center",
)}
>
<div className="w-2" />
@@ -660,12 +660,12 @@ function Timeline({
<div
className={`${
isDesktop
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
: "portrait:flex-grow landscape:w-[20%] overflow-hidden"
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} no-scrollbar overflow-y-auto`
: "overflow-hidden portrait:flex-grow landscape:w-[20%]"
} relative`}
>
<div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
<div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[30px] w-full bg-gradient-to-t from-secondary to-transparent"></div>
{timelineType == "timeline" ? (
motionData ? (
<MotionReviewTimeline
@@ -693,7 +693,7 @@ function Timeline({
)
) : (
<div
className={`h-full grid grid-cols-1 gap-4 overflow-auto p-4 bg-secondary ${isDesktop ? "" : "sm:grid-cols-2"}`}
className={`grid h-full grid-cols-1 gap-4 overflow-auto bg-secondary p-4 ${isDesktop ? "" : "sm:grid-cols-2"}`}
>
{mainCameraReviewItems.map((review) => {
if (review.severity == "significant_motion") {

24
web/src/views/live/DraggableGridLayout.tsx
View File

@@ -325,7 +325,7 @@ export default function DraggableGridLayout({
<>
<Toaster position="top-center" closeButton={true} />
{!isGridLayoutLoaded || !currentGridLayout ? (
<div className="mt-2 px-2 grid grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4">
<div className="mt-2 grid grid-cols-2 gap-2 px-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4">
{includeBirdseye && birdseyeConfig?.enabled && (
<Skeleton className="size-full rounded-lg md:rounded-2xl" />
)}
@@ -340,7 +340,7 @@ export default function DraggableGridLayout({
</div>
) : (
<div
className="my-2 px-2 pb-8 no-scrollbar overflow-x-hidden"
className="no-scrollbar my-2 overflow-x-hidden px-2 pb-8"
ref={gridContainerRef}
>
<EditGroupDialog
@@ -373,7 +373,7 @@ export default function DraggableGridLayout({
key="birdseye"
className={cn(
isEditMode &&
"outline outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing",
"outline outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
birdseyeConfig={birdseyeConfig}
liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
@@ -397,10 +397,10 @@ export default function DraggableGridLayout({
key={camera.name}
cameraRef={cameraRef}
className={cn(
"rounded-lg md:rounded-2xl bg-black",
"rounded-lg bg-black md:rounded-2xl",
grow,
isEditMode &&
"outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing",
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
@@ -429,7 +429,7 @@ export default function DraggableGridLayout({
<Tooltip>
<TooltipTrigger asChild>
<div
className="rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer opacity-60 hover:opacity-100 transition-all duration-300"
className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
onClick={() =>
setIsEditMode((prevIsEditMode) => !prevIsEditMode)
}
@@ -450,7 +450,7 @@ export default function DraggableGridLayout({
<Tooltip>
<TooltipTrigger asChild>
<div
className="rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer opacity-60 hover:opacity-100 transition-all duration-300"
className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
onClick={() =>
setEditGroup((prevEditGroup) => !prevEditGroup)
}
@@ -465,7 +465,7 @@ export default function DraggableGridLayout({
<Tooltip>
<TooltipTrigger asChild>
<div
className="rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer opacity-60 hover:opacity-100 transition-all duration-300"
className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
onClick={toggleFullscreen}
>
{fullscreen ? (
@@ -492,10 +492,10 @@ export default function DraggableGridLayout({
function CornerCircles() {
return (
<>
<div className="absolute top-[-4px] left-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
<div className="absolute top-[-4px] right-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
<div className="absolute bottom-[-4px] right-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
<div className="absolute bottom-[-4px] left-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
<div className="pointer-events-none absolute left-[-4px] top-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
<div className="pointer-events-none absolute right-[-4px] top-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
<div className="pointer-events-none absolute bottom-[-4px] right-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
<div className="pointer-events-none absolute bottom-[-4px] left-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
</>
);
}

12
web/src/views/live/LiveBirdseyeView.tsx
View File

@@ -115,20 +115,20 @@ export default function LiveBirdseyeView() {
ref={mainRef}
className={
fullscreen
? `fixed inset-0 bg-black z-30`
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
? `fixed inset-0 z-30 bg-black`
: `flex size-full flex-col p-2 ${isMobile ? "landscape:flex-row" : ""}`
}
>
<div
className={
fullscreen
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:bottom-1 landscape:left-2 landscape:right-auto landscape:top-auto" : ""}`
: `flex h-12 w-full flex-row items-center justify-between ${isMobile ? "landscape:h-full landscape:w-min landscape:flex-col" : ""}`
}
>
{!fullscreen ? (
<Button
className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
className={`flex items-center gap-2 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
size={isMobile ? "icon" : "sm"}
onClick={() => navigate(-1)}
>
@@ -140,7 +140,7 @@ export default function LiveBirdseyeView() {
)}
<TooltipProvider>
<div
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
className={`mr-1 flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
>
<CameraFeatureToggle
className="p-2 md:p-0"

14
web/src/views/live/LiveCameraView.tsx
View File

@@ -222,15 +222,15 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
ref={mainRef}
className={
fullscreen
? `fixed inset-0 bg-black z-30`
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row landscape:gap-1" : ""}`
? `fixed inset-0 z-30 bg-black`
: `flex size-full flex-col p-2 ${isMobile ? "landscape:flex-row landscape:gap-1" : ""}`
}
>
<div
className={
fullscreen
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-12 landscape:h-full landscape:flex-col" : ""}`
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:bottom-1 landscape:left-2 landscape:right-auto landscape:top-auto" : ""}`
: `flex h-12 w-full flex-row items-center justify-between ${isMobile ? "landscape:h-full landscape:w-12 landscape:flex-col" : ""}`
}
>
{!fullscreen ? (
@@ -344,7 +344,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
}}
>
<div
className={`flex flex-col justify-center items-center ${growClassName}`}
className={`flex flex-col items-center justify-center ${growClassName}`}
ref={clickOverlayRef}
onClick={handleOverlayClick}
style={{
@@ -435,7 +435,7 @@ function PtzControlPanel({
);
return (
<div className="absolute inset-x-2 md:left-[50%] md:-translate-x-[50%] bottom-[10%] flex flex-wrap md:flex-nowrap justify-center items-center gap-1">
<div className="absolute inset-x-2 bottom-[10%] flex flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap">
{ptz?.features?.includes("pt") && (
<>
<Button
@@ -637,7 +637,7 @@ function FrigateCameraFeatures({
title={`${camera} Settings`}
/>
</DrawerTrigger>
<DrawerContent className="px-2 py-4 flex flex-col gap-3 rounded-2xl">
<DrawerContent className="flex flex-col gap-3 rounded-2xl px-2 py-4">
<FilterSwitch
label="Object Detection"
isChecked={detectState == "ON"}

20
web/src/views/live/LiveDashboardView.tsx
View File

@@ -155,10 +155,10 @@ export default function LiveDashboardView({
const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
return (
<div className="size-full p-2 overflow-y-auto" ref={containerRef}>
<div className="size-full overflow-y-auto p-2" ref={containerRef}>
{isMobile && (
<div className="h-11 relative flex items-center justify-between">
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<div className="relative flex h-11 items-center justify-between">
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
<div className="max-w-[45%]">
<CameraGroupSelector />
</div>
@@ -167,7 +167,7 @@ export default function LiveDashboardView({
<Button
className={`p-1 ${
mobileLayout == "grid"
? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary"
}`}
size="xs"
@@ -178,7 +178,7 @@ export default function LiveDashboardView({
<Button
className={`p-1 ${
mobileLayout == "list"
? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary"
}`}
size="xs"
@@ -194,8 +194,8 @@ export default function LiveDashboardView({
className={cn(
"p-1",
isEditMode
? "text-primary bg-selected"
: "text-secondary-foreground bg-secondary",
? "bg-selected text-primary"
: "bg-secondary text-secondary-foreground",
)}
size="xs"
onClick={() =>
@@ -212,7 +212,7 @@ export default function LiveDashboardView({
{events && events.length > 0 && (
<ScrollArea>
<TooltipProvider>
<div className="px-1 flex gap-2 items-center">
<div className="flex items-center gap-2 px-1">
{events.map((event) => {
return <AnimatedEventCard key={event.id} event={event} />;
})}
@@ -224,7 +224,7 @@ export default function LiveDashboardView({
{!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
<div
className={`mt-2 px-2 grid ${mobileLayout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
className={`mt-2 grid px-2 ${mobileLayout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer
@@ -247,7 +247,7 @@ export default function LiveDashboardView({
<LivePlayer
cameraRef={cameraRef}
key={camera.name}
className={`${grow} rounded-lg md:rounded-2xl bg-black`}
className={`${grow} rounded-lg bg-black md:rounded-2xl`}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
}

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

@@ -204,11 +204,11 @@ export default function CameraMetrics({
}, [statsHistory]);
return (
<div className="size-full mt-4 flex flex-col gap-3 overflow-y-auto">
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="mt-4 flex size-full flex-col gap-3 overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">Overview</div>
<div className="grid grid-cols-1 md:grid-cols-3">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Frames / Detections</div>
<CameraLineGraph
graphId="overall-stats"
@@ -219,21 +219,21 @@ export default function CameraMetrics({
/>
</div>
) : (
<Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
<Skeleton className="h-32 w-full rounded-lg md:rounded-2xl" />
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{config &&
Object.values(config.cameras).map((camera) => {
if (camera.enabled) {
return (
<div className="w-full flex flex-col gap-3">
<div className="capitalize text-muted-foreground text-sm font-medium">
<div className="flex w-full flex-col gap-3">
<div className="text-sm font-medium capitalize text-muted-foreground">
{camera.name.replaceAll("_", " ")}
</div>
<div key={camera.name} className="grid sm:grid-cols-2 gap-2">
<div key={camera.name} className="grid gap-2 sm:grid-cols-2">
{Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">CPU</div>
<CameraLineGraph
graphId={`${camera.name}-cpu`}
@@ -246,10 +246,10 @@ export default function CameraMetrics({
/>
</div>
) : (
<Skeleton className="size-full aspect-video" />
<Skeleton className="aspect-video size-full" />
)}
{Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Frames / Detections</div>
<CameraLineGraph
graphId={`${camera.name}-dps`}
@@ -262,7 +262,7 @@ export default function CameraMetrics({
/>
</div>
) : (
<Skeleton className="size-full aspect-video" />
<Skeleton className="aspect-video size-full" />
)}
</div>
</div>

46
web/src/views/system/GeneralMetrics.tsx
View File

@@ -344,15 +344,15 @@ export default function GeneralMetrics({
<>
<VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
<div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="text-muted-foreground text-sm font-medium">
<div className="mt-4 flex size-full flex-col overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">
Detectors
</div>
<div
className={`w-full mt-4 grid grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
className={`mt-4 grid w-full grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
>
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector Inference Speed</div>
{detInferenceTimeSeries.map((series) => (
<ThresholdBarGraph
@@ -367,12 +367,12 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full rounded-lg md:rounded-2xl aspect-video" />
<Skeleton className="aspect-video w-full rounded-lg md:rounded-2xl" />
)}
{statsHistory.length != 0 ? (
<>
{detTempSeries && (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector Temperature</div>
{detTempSeries.map((series) => (
<ThresholdBarGraph
@@ -389,10 +389,10 @@ export default function GeneralMetrics({
)}
</>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="aspect-video w-full" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector CPU Usage</div>
{detCpuSeries.map((series) => (
<ThresholdBarGraph
@@ -407,10 +407,10 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="aspect-video w-full" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector Memory Usage</div>
{detMemSeries.map((series) => (
<ThresholdBarGraph
@@ -425,14 +425,14 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="aspect-video w-full" />
)}
</div>
{(statsHistory.length == 0 || statsHistory[0].gpu_usages) && (
<>
<div className="mt-4 flex items-center justify-between">
<div className="text-muted-foreground text-sm font-medium">
<div className="text-sm font-medium text-muted-foreground">
GPUs
</div>
{canGetGpuInfo && (
@@ -445,9 +445,9 @@ export default function GeneralMetrics({
</Button>
)}
</div>
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
<div className=" mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Usage</div>
{gpuSeries.map((series) => (
<ThresholdBarGraph
@@ -462,12 +462,12 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="aspect-video w-full" />
)}
{statsHistory.length != 0 ? (
<>
{gpuMemSeries && (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Memory</div>
{gpuMemSeries.map((series) => (
<ThresholdBarGraph
@@ -484,18 +484,18 @@ export default function GeneralMetrics({
)}
</>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="aspect-video w-full" />
)}
</div>
</>
)}
<div className="mt-4 text-muted-foreground text-sm font-medium">
<div className="mt-4 text-sm font-medium text-muted-foreground">
Other Processes
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Process CPU Usage</div>
{otherProcessCpuSeries.map((series) => (
<ThresholdBarGraph
@@ -510,10 +510,10 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-tall" />
<Skeleton className="aspect-tall w-full" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Process Memory Usage</div>
{otherProcessMemSeries.map((series) => (
<ThresholdBarGraph
@@ -528,7 +528,7 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-tall" />
<Skeleton className="aspect-tall w-full" />
)}
</div>
</div>

18
web/src/views/system/StorageMetrics.tsx
View File

@@ -42,10 +42,10 @@ export default function StorageMetrics({
}
return (
<div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mt-4 flex size-full flex-col overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">Overview</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Recordings</div>
<StorageGraph
graphId="general-recordings"
@@ -53,7 +53,7 @@ export default function StorageMetrics({
total={totalStorage.total}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">/tmp/cache</div>
<StorageGraph
graphId="general-cache"
@@ -61,7 +61,7 @@ export default function StorageMetrics({
total={stats.service.storage["/tmp/cache"]["total"]}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">/dev/shm</div>
<StorageGraph
graphId="general-shared-memory"
@@ -70,12 +70,12 @@ export default function StorageMetrics({
/>
</div>
</div>
<div className="mt-4 text-muted-foreground text-sm font-medium">
<div className="mt-4 text-sm font-medium text-muted-foreground">
Camera Storage
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
{Object.keys(cameraStorage).map((camera) => (
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
<StorageGraph
graphId={`${camera}-storage`}