From 130d825d668b91e6e1d4d1b65bff0ca7a09fe9f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 May 2026 12:02:45 -0700
Subject: [PATCH] add active filters list

---
 client/src/Pages/Uptime/Monitors/index.tsx | 42 ++++++++++++++++++++--
 client/src/locales/en.json                 |  3 +-
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/client/src/Pages/Uptime/Monitors/index.tsx b/client/src/Pages/Uptime/Monitors/index.tsx
index 73dbfa511..021e02ac5 100644
--- a/client/src/Pages/Uptime/Monitors/index.tsx
+++ b/client/src/Pages/Uptime/Monitors/index.tsx
@@ -3,12 +3,13 @@ import {
 	HeaderMonitorsSummary,
 	BulkActionsBar,
 } from "@/Components/monitors";
-import { MonitorBasePageWithStates } from "@/Components/design-elements";
+import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
 import { TextField, Dialog, Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsTable";
 import { HeaderCreate } from "@/Components/common";
 import { Play, Pause } from "lucide-react";
+import Typography from "@mui/material/Typography";
 
 import { useTranslation } from "react-i18next";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -23,6 +24,7 @@ import type { RootState } from "@/Types/state";
 import { useTheme } from "@mui/material";
 import useDebounce from "@/Hooks/useDebounce";
 import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import { SPACING } from "@/Utils/Theme/constants";
 
 const UptimeMonitorsPage = () => {
 	const { t } = useTranslation();
@@ -39,6 +41,7 @@ const UptimeMonitorsPage = () => {
 	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
 	const [selectedStatus, setSelectedStatus] = useState<string>("");
 	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const [page, setPage] = useState<number>(0);
 	const [search, setSearch] = useState<string>("");
 	const [sortField, setSortField] = useState<string>("");
@@ -84,6 +87,7 @@ const UptimeMonitorsPage = () => {
 	const monitorsWithChecksUrl = useMemo(() => {
 		const params = new URLSearchParams();
 		effectiveTypes.forEach((type) => params.append("type", type));
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
 		params.append("limit", "25");
 		if (page !== undefined) params.append("page", String(page));
 		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
@@ -91,7 +95,7 @@ const UptimeMonitorsPage = () => {
 		if (field) params.append("field", field);
 		if (sortOrder) params.append("order", sortOrder);
 		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [effectiveTypes, page, rowsPerPage, filter, field, sortOrder]);
+	}, [effectiveTypes, selectedTags, page, rowsPerPage, filter, field, sortOrder]);
 
 	const {
 		data: monitorsWithChecksData,
@@ -129,6 +133,7 @@ const UptimeMonitorsPage = () => {
 		setSelectedTypes([]);
 		setSelectedStatus("");
 		setSelectedState("");
+		setSelectedTags([]);
 		setSearch("");
 	}, []);
 
@@ -147,7 +152,11 @@ const UptimeMonitorsPage = () => {
 
 	// Check if any filters are active
 	const hasActiveFilters = Boolean(
-		selectedTypes.length > 0 || selectedStatus || selectedState || search
+		selectedTypes.length > 0 ||
+		selectedStatus ||
+		selectedState ||
+		selectedTags.length > 0 ||
+		search
 	);
 
 	// Show empty state only when there are truly no monitors (not just filtered out)
@@ -186,6 +195,9 @@ const UptimeMonitorsPage = () => {
 					setSelectedStatus={setSelectedStatus}
 					selectedState={selectedState}
 					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
 					onClearFilters={handleClearFilters}
 				/>
 				<TextField
@@ -197,6 +209,30 @@ const UptimeMonitorsPage = () => {
 				/>
 			</Stack>
 
+			{selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
 			{!isLoading && (
 				<BulkActionsBar
 					selectedCount={selectedRows.length}
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 8e79e23b3..14b19851b 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -1560,7 +1560,8 @@
 			"filters": {
 				"search": {
 					"placeholder": "Search monitors..."
-				}
+				},
+				"activeTags": "Active tags"
 			},
 			"table": {
 				"headers": {