Add severity filter (blakeblackshear#11190)

* Allow viewing all types on single screen * Implement for mobile as well * fix import * Show all is optional
guxiaoqi2007 · May 1, 2024 · b5b819c · b5b819c
1 parent 499f70c
commit b5b819c
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 6 deletions.
diff --git a/web/src/components/filter/FilterSwitch.tsx b/web/src/components/filter/FilterSwitch.tsx
@@ -3,24 +3,27 @@ import { Label } from "../ui/label";
 
 type FilterSwitchProps = {
  label: string;
+ disabled?: boolean;
  isChecked: boolean;
  onCheckedChange: (checked: boolean) => void;
 };
 export default function FilterSwitch({
  label,
+ disabled = false,
  isChecked,
  onCheckedChange,
 }: FilterSwitchProps) {
  return (
  <div className="flex justify-between items-center gap-1">
  <Label
- className="w-full mx-2 text-primary capitalize cursor-pointer"
+ className={`w-full mx-2 text-primary capitalize cursor-pointer ${disabled ? "text-secondary-foreground" : ""}`}
  htmlFor={label}
  >
  {label}
  </Label>
  <Switch
  id={label}
+ disabled={disabled}
  checked={isChecked}
  onCheckedChange={onCheckedChange}
  />

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -10,7 +10,7 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { ReviewFilter, ReviewSummary } from "@/types/review";
+import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import {
@@ -49,19 +49,21 @@ const DEFAULT_REVIEW_FILTERS: ReviewFilters[] = [
 
 type ReviewFilterGroupProps = {
  filters?: ReviewFilters[];
+ currentSeverity?: ReviewSeverity;
  reviewSummary?: ReviewSummary;
  filter?: ReviewFilter;
- onUpdateFilter: (filter: ReviewFilter) => void;
  motionOnly: boolean;
+ onUpdateFilter: (filter: ReviewFilter) => void;
  setMotionOnly: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export default function ReviewFilterGroup({
  filters = DEFAULT_REVIEW_FILTERS,
+ currentSeverity,
  reviewSummary,
  filter,
- onUpdateFilter,
  motionOnly,
+ onUpdateFilter,
  setMotionOnly,
 }: ReviewFilterGroupProps) {
  const { data: config } = useSWR<FrigateConfig>("config");
@@ -179,6 +181,11 @@ export default function ReviewFilterGroup({
  <GeneralFilterButton
  allLabels={filterValues.labels}
  selectedLabels={filter?.labels}
+ currentSeverity={currentSeverity}
+ showAll={filter?.showAll == true}
+ setShowAll={(showAll) => {
+ onUpdateFilter({ ...filter, showAll });
+ }}
  updateLabelFilter={(newLabels) => {
  onUpdateFilter({ ...filter, labels: newLabels });
  }}
@@ -188,6 +195,7 @@ export default function ReviewFilterGroup({
  <MobileReviewSettingsDrawer
  features={mobileSettingsFeatures}
  filter={filter}
+ currentSeverity={currentSeverity}
  reviewSummary={reviewSummary}
  onUpdateFilter={onUpdateFilter}
  // not applicable as exports are not used
@@ -477,11 +485,17 @@ function CalendarFilterButton({
 type GeneralFilterButtonProps = {
  allLabels: string[];
  selectedLabels: string[] | undefined;
+ currentSeverity?: ReviewSeverity;
+ showAll: boolean;
+ setShowAll: (showAll: boolean) => void;
  updateLabelFilter: (labels: string[] | undefined) => void;
 };
 function GeneralFilterButton({
  allLabels,
  selectedLabels,
+ currentSeverity,
+ showAll,
+ setShowAll,
  updateLabelFilter,
 }: GeneralFilterButtonProps) {
  const [open, setOpen] = useState(false);
@@ -510,6 +524,9 @@ function GeneralFilterButton({
  allLabels={allLabels}
  selectedLabels={selectedLabels}
  currentLabels={currentLabels}
+ currentSeverity={currentSeverity}
+ showAll={showAll}
+ setShowAll={setShowAll}
  updateLabelFilter={updateLabelFilter}
  setCurrentLabels={setCurrentLabels}
  onClose={() => setOpen(false)}
@@ -557,6 +574,9 @@ type GeneralFilterContentProps = {
  allLabels: string[];
  selectedLabels: string[] | undefined;
  currentLabels: string[] | undefined;
+ currentSeverity?: ReviewSeverity;
+ showAll?: boolean;
+ setShowAll?: (showAll: boolean) => void;
  updateLabelFilter: (labels: string[] | undefined) => void;
  setCurrentLabels: (labels: string[] | undefined) => void;
  onClose: () => void;
@@ -565,13 +585,35 @@ export function GeneralFilterContent({
  allLabels,
  selectedLabels,
  currentLabels,
+ currentSeverity,
+ showAll,
+ setShowAll,
  updateLabelFilter,
  setCurrentLabels,
  onClose,
 }: GeneralFilterContentProps) {
  return (
  <>
  <div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
+ {currentSeverity && setShowAll && (
+ <div className="my-2.5 flex flex-col gap-2.5">
+ <FilterSwitch
+ label="Alerts"
+ disabled={currentSeverity == "alert"}
+ isChecked={currentSeverity == "alert" ? true : showAll == true}
+ onCheckedChange={setShowAll}
+ />
+ <FilterSwitch
+ label="Detections"
+ disabled={currentSeverity == "detection"}
+ isChecked={
+ currentSeverity == "detection" ? true : showAll == true
+ }
+ onCheckedChange={setShowAll}
+ />
+ <DropdownMenuSeparator />
+ </div>
+ )}
  <div className="flex justify-between items-center my-2.5">
  <Label
  className="mx-2 text-primary cursor-pointer"

diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -7,7 +7,7 @@ import { ExportContent } from "./ExportDialog";
 import { ExportMode } from "@/types/filter";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
-import { ReviewFilter, ReviewSummary } from "@/types/review";
+import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import useSWR from "swr";
@@ -31,6 +31,7 @@ type MobileReviewSettingsDrawerProps = {
  features?: DrawerFeatures[];
  camera: string;
  filter?: ReviewFilter;
+ currentSeverity?: ReviewSeverity;
  latestTime: number;
  currentTime: number;
  range?: TimeRange;
@@ -44,6 +45,7 @@ export default function MobileReviewSettingsDrawer({
  features = DEFAULT_DRAWER_FEATURES,
  camera,
  filter,
+ currentSeverity,
  latestTime,
  currentTime,
  range,
@@ -263,6 +265,11 @@ export default function MobileReviewSettingsDrawer({
  allLabels={allLabels}
  selectedLabels={filter?.labels}
  currentLabels={currentLabels}
+ currentSeverity={currentSeverity}
+ showAll={filter?.showAll == true}
+ setShowAll={(showAll) => {
+ onUpdateFilter({ ...filter, showAll });
+ }}
  setCurrentLabels={setCurrentLabels}
  updateLabelFilter={(newLabels) =>
  onUpdateFilter({ ...filter, labels: newLabels })

diff --git a/web/src/types/review.ts b/web/src/types/review.ts
@@ -26,6 +26,7 @@ export type ReviewFilter = {
  before?: number;
  after?: number;
  showReviewed?: 0 | 1;
+ showAll?: boolean;
 };
 
 type ReviewSummaryDay = {

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
@@ -270,6 +270,7 @@ export default function EventView({
  ? ["cameras", "date", "motionOnly"]
  : ["cameras", "reviewed", "date", "general"]
  }
+ currentSeverity={severityToggle}
  reviewSummary={reviewSummary}
  filter={filter}
  onUpdateFilter={updateFilter}
@@ -370,7 +371,13 @@ function DetectionReview({
  return null;
  }
 
- const current = reviewItems[severity];
+ let current;
+
+ if (filter?.showAll) {
+ current = reviewItems.all;
+ } else {
+ current = reviewItems[severity];
+ }
 
  if (!current || current.length == 0) {
  return [];