From 8420b2cc85f79f59e1fda878dbd2589cc0292876 Mon Sep 17 00:00:00 2001
From: LOGESH K <90227668+lokiee0@users.noreply.github.com>
Date: Fri, 24 Jul 2026 23:10:19 +0530
Subject: [PATCH] Add monitoring status dropdown

---
 .../manage/app/monitoring-data/+page.svelte   | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/routes/(manage)/manage/app/monitoring-data/+page.svelte b/src/routes/(manage)/manage/app/monitoring-data/+page.svelte
index 5e143537..979f8e23 100644
--- a/src/routes/(manage)/manage/app/monitoring-data/+page.svelte
+++ b/src/routes/(manage)/manage/app/monitoring-data/+page.svelte
@@ -35,6 +35,8 @@
     name: string;
   }
 
+  type StatusFilter = "ALL" | "UP" | "DOWN" | "DEGRADED";
+
   // Helper to format datetime as YYYY-MM-DDTHH:mm for datetime-local input
   function formatDateTimeForInput(date: Date): string {
     return format(date, "yyyy-MM-dd'T'HH:mm");
@@ -68,12 +70,14 @@
   let pageNo = $state(1);
   let showFilters = $state(false);
   let monitorTagFilter = $state("ALL");
+  let statusFilter = $state<StatusFilter>("ALL");
   let startDateTime = $state(formatDateTimeForInput(yesterday));
   let endDateTime = $state(formatDateTimeForInput(now));
   const limit = 50;
 
   const hasActiveFilters = $derived(
     monitorTagFilter !== "ALL" ||
+      statusFilter !== "ALL" ||
       startDateTime !== formatDateTimeForInput(yesterday) ||
       endDateTime !== formatDateTimeForInput(now)
   );
@@ -113,6 +117,7 @@
 
   function clearFilters() {
     monitorTagFilter = "ALL";
+    statusFilter = "ALL";
     startDateTime = formatDateTimeForInput(yesterday);
     endDateTime = formatDateTimeForInput(now);
     pageNo = 1;
@@ -189,12 +194,14 @@
         page: number;
         limit: number;
         monitor_tag: string;
+        status: StatusFilter;
         start_time?: number;
         end_time?: number;
       } = {
         page: pageNo,
         limit,
-        monitor_tag: monitorTagFilter
+        monitor_tag: monitorTagFilter,
+        status: statusFilter
       };
 
       if (startDateTime) {
@@ -241,6 +248,12 @@
     }
   }
 
+  function handleStatusChange(value: string | undefined) {
+    if (value) {
+      statusFilter = value as StatusFilter;
+    }
+  }
+
   // Pagination
   function goToPage(page: number) {
     pageNo = page;
@@ -304,6 +317,20 @@
             </Select.Content>
           </Select.Root>
         </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-muted-foreground text-xs font-medium">Status</span>
+          <Select.Root type="single" value={statusFilter} onValueChange={handleStatusChange}>
+            <Select.Trigger class="w-36">
+              {statusFilter === "ALL" ? "All Statuses" : statusFilter}
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="ALL">All Statuses</Select.Item>
+              <Select.Item value="UP">UP</Select.Item>
+              <Select.Item value="DOWN">DOWN</Select.Item>
+              <Select.Item value="DEGRADED">DEGRADED</Select.Item>
+            </Select.Content>
+          </Select.Root>
+        </div>
         <Button size="sm" onclick={applyFilters}>
           <SearchIcon class="size-4" />
           Search