changes

migrations/20260123110239_maintenace_monitor_status.ts

@@ -0,0 +1,13 @@
+import type { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.alterTable("maintenance_monitors", (table) => {
+    table.string("monitor_impact").defaultTo("MAINTENANCE").notNullable();
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.alterTable("maintenance_monitors", (table) => {
+    table.dropColumn("monitor_impact");
+  });
+}

src/lib/components/IncidentItem.svelte

@@ -112,9 +112,8 @@
                   <Badge variant="outline" class="text-{monitor.monitor_impact.toLowerCase()}">
                     {monitor.monitor_impact}
                   </Badge>
-                  <Button variant="outline" size="sm" href="/monitors/{monitor.monitor_tag}">
-                    View Monitor
-                    <ArrowRight class="ml-1 size-3" />
+                  <Button variant="outline" class="rounded-btn" size="icon-sm" href="/monitors/{monitor.monitor_tag}">
+                    <ArrowRight class="size-3" />
                   </Button>
                 </div>
               </div>

src/lib/components/KenerNav.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="fixed inset-x-0 top-0 z-50 py-2">
-  <div class="mx-auto max-w-5xl px-4">
+  <div class="mx-auto max-w-5xl">
     <div class="bg-background flex items-center justify-between rounded-3xl border p-1">
       <!-- Brand -->
       <a

src/lib/components/MaintenanceItem.svelte

@@ -32,7 +32,32 @@
 
   let { maintenance, class: className = "", hideMonitors = false }: Props = $props();
 
-  const Icon = STATUS_ICON.MAINTENANCE;
+  const STATUS_STROKE = {
+    UP: "stroke-up",
+    DOWN: "stroke-down",
+    DEGRADED: "stroke-degraded",
+    MAINTENANCE: "stroke-maintenance",
+    NO_DATA: "stroke-muted-foreground"
+  } as const;
+
+  const STATUS_BORDER = {
+    UP: "border-up",
+    DOWN: "border-down",
+    DEGRADED: "border-degraded",
+    MAINTENANCE: "border-maintenance",
+    NO_DATA: "border-muted-foreground"
+  } as const;
+
+  // Get the highest severity impact from monitors array
+  function getHighestImpact(monitors: MaintenanceMonitorImpact[]): keyof typeof STATUS_ICON {
+    const priority: (keyof typeof STATUS_ICON)[] = ["DOWN", "DEGRADED", "MAINTENANCE"];
+    for (const impact of priority) {
+      if (monitors.some((m) => m.monitor_impact === impact)) {
+        return impact;
+      }
+    }
+    return (monitors[0]?.monitor_impact as keyof typeof STATUS_ICON) || "MAINTENANCE";
+  }
 
   // Get initials from monitor name for avatar fallback
   function getInitials(name: string): string {
@@ -44,6 +69,12 @@
       .slice(0, 2);
   }
 
+  const highestImpact = $derived(getHighestImpact(maintenance.monitors));
+  const Icon = $derived(STATUS_ICON[highestImpact]);
+  const strokeClass = $derived(STATUS_STROKE[highestImpact as keyof typeof STATUS_STROKE] || "stroke-maintenance");
+  const borderClass = $derived(STATUS_BORDER[highestImpact as keyof typeof STATUS_BORDER] || "border-maintenance");
+  const textClass = $derived("text-" + highestImpact.toLowerCase());
+
   // Check if maintenance is ongoing (current time is between start and end)
   const isOngoing = $derived(() => {
     const now = Date.now() / 1000;
@@ -67,7 +98,7 @@
 
 <Item.Root class="p-0 {className}">
   <Item.Media>
-    <Icon class="stroke-maintenance size-6" />
+    <Icon class="size-6 {strokeClass}" />
   </Item.Media>
   <Item.Content>
     <div class="flex items-center gap-2">
@@ -89,7 +120,7 @@
           <Popover.Root>
             <Popover.Trigger>
               <Avatar.Root
-                class="bg-background border-maintenance size-8 cursor-pointer border-2 transition-transform duration-100 ease-in-out hover:scale-[1.1] hover:border"
+                class="bg-background border-{monitor.monitor_impact.toLowerCase()} size-8 cursor-pointer border-2 transition-transform duration-100 ease-in-out hover:scale-[1.1] hover:border"
               >
                 {#if monitor.monitor_image}
                   <Avatar.Image src={monitor.monitor_image} alt={monitor.monitor_name} class="object-cover" />
@@ -112,10 +143,11 @@
                   </div>
                 </div>
                 <div class="flex items-center justify-between">
-                  <Badge variant="outline" class="text-maintenance">MAINTENANCE</Badge>
-                  <Button variant="outline" size="sm" href="/monitors/{monitor.monitor_tag}">
-                    View Monitor
-                    <ArrowRight class="ml-1 size-3" />
+                  <Badge variant="outline" class="text-{monitor.monitor_impact.toLowerCase()}">
+                    {monitor.monitor_impact}
+                  </Badge>
+                  <Button variant="outline" class="rounded-btn" size="icon-sm" href="/monitors/{monitor.monitor_tag}">
+                    <ArrowRight class="size-3" />
                   </Button>
                 </div>
               </div>
@@ -131,8 +163,8 @@
           {format(new Date(maintenance.start_date_time * 1000), "PPp")}
         </div>
         <div class="relative flex-1 text-center">
-          <div class="border-maintenance absolute top-1/2 right-0 left-0 border-t border-dashed"></div>
-          <span class="bg-background relative z-10 px-2 py-1">{duration()}</span>
+          <div class="absolute top-1/2 right-0 left-0 border-t border-solid"></div>
+          <span class="bg-background relative z-10 px-2 py-1 font-medium">{duration()}</span>
         </div>
         <div class="rounded-full border px-3 py-2">
           {format(new Date(maintenance.end_date_time * 1000), "PPp")}

src/lib/components/MonitorBar.svelte

@@ -111,7 +111,7 @@
     <Item.Root>
       <Item.Media variant="image">
         <Avatar.Root class="size-10">
-          <Avatar.Image src={data.image} alt={data.name} class="border " />
+          <Avatar.Image src={data.image} alt={data.name} class="  " />
           <Avatar.Fallback>{data.name.charAt(1)}</Avatar.Fallback>
         </Avatar.Root>
       </Item.Media>

src/lib/server/api-server/monitor-bar/get.ts

@@ -50,7 +50,6 @@ export default async function get(req: APIServerRequest): Promise<Response> {
   }
   const monitor = monitors[0];
   const rawUptimeData = await db.getStatusCountsByInterval(monitor.tag, startTime, 86400, days);
-  console.log(">>>>>>----  get:53 ", rawUptimeData[0]);
   //for days that are missing, add 0 counts
   const uptimeData: TimestampStatusCount[] = [];
   const uptimeDataMap = new Map(rawUptimeData.map((d) => [d.ts, d]));

src/lib/server/api-server/monitor-day-maintenances/post.ts

@@ -9,8 +9,6 @@ import {
   ParseUptime,
   UptimeCalculator,
 } from "$lib/server/tool";
-import { NO_DATA } from "$lib/server/constants";
-import GC from "$lib/global-constants";
 import { GetMonitorsParsed } from "../../controllers/monitorsController";
 import type { TimestampStatusCount } from "$lib/server/types/db";
 

src/lib/server/controllers/dashboardController.ts

@@ -186,7 +186,7 @@ export const GetPageDashboardData = async (pagePath: string): Promise<PageDashbo
   const { page: pageDetails, monitors: pageMonitors } = pageData;
   const monitorTags = pageMonitors.map((pm) => pm.monitor_tag);
 
-  const nowTs = BeginningOfDay();
+  const nowTs = GetMinuteStartNowTimestampUTC();
 
   const [ongoingIncidents, ongoingMaintenances, upcomingMaintenances, pastMaintenances, latestData, allPagesData] =
     await Promise.all([

src/lib/server/controllers/maintenanceController.ts

@@ -14,14 +14,19 @@ import type {
 
 // ============ Input Interfaces ============
 
+export interface MonitorWithStatusInput {
+  monitor_tag: string;
+  monitor_impact: "UP" | "DOWN" | "DEGRADED" | "MAINTENANCE";
+}
+
 export interface CreateMaintenanceInput {
   title: string;
   description?: string | null;
   start_date_time: number; // Unix timestamp - when the first occurrence starts
   rrule: string; // iCalendar RRULE string (e.g., FREQ=WEEKLY;BYDAY=SU or FREQ=MINUTELY;COUNT=1)
   duration_seconds: number; // Duration of each maintenance window in seconds
-  // Monitor tags to attach to the maintenance
-  monitor_tags?: string[];
+  // Monitors with their status during maintenance
+  monitors?: MonitorWithStatusInput[];
 }
 
 export interface UpdateMaintenanceInput {
@@ -31,7 +36,7 @@ export interface UpdateMaintenanceInput {
   rrule?: string;
   duration_seconds?: number;
   status?: "ACTIVE" | "INACTIVE";
-  monitor_tags?: string[];
+  monitors?: MonitorWithStatusInput[];
 }
 
 export interface CreateMaintenanceEventInput {
@@ -40,8 +45,13 @@ export interface CreateMaintenanceEventInput {
   end_date_time: number;
 }
 
+export interface MaintenanceMonitorWithStatus {
+  monitor_tag: string;
+  monitor_impact: "UP" | "DOWN" | "DEGRADED" | "MAINTENANCE";
+}
+
 export interface MaintenanceWithMonitors extends MaintenanceRecord {
-  monitors?: Array<{ monitor_tag: string }>;
+  monitors?: MaintenanceMonitorWithStatus[];
 }
 
 export interface MaintenanceWithEvents extends MaintenanceWithMonitors {
@@ -151,9 +161,9 @@ export const CreateMaintenance = async (data: CreateMaintenanceInput): Promise<{
     status: "ACTIVE",
   });
 
-  // Add monitors to the maintenance if provided
-  if (data.monitor_tags && data.monitor_tags.length > 0) {
-    await db.addMonitorsToMaintenance(maintenance.id, data.monitor_tags);
+  // Add monitors with their status to the maintenance if provided
+  if (data.monitors && data.monitors.length > 0) {
+    await db.addMonitorsToMaintenanceWithStatus(maintenance.id, data.monitors);
   }
 
   // Generate initial events for the next 7 days
@@ -176,7 +186,7 @@ export const GetMaintenanceWithMonitors = async (id: number): Promise<Maintenanc
 
   return {
     ...maintenance,
-    monitors: monitorRecords.map((m) => ({ monitor_tag: m.monitor_tag })),
+    monitors: monitorRecords.map((m) => ({ monitor_tag: m.monitor_tag, monitor_impact: m.monitor_impact })),
   };
 };
 
@@ -198,7 +208,10 @@ export const GetMaintenanceWithEvents = async (
 
   return {
     ...maintenance,
-    monitors: monitorRecords.map((m) => ({ monitor_tag: m.monitor_tag })),
+    monitors: monitorRecords.map((m) => ({
+      monitor_tag: m.monitor_tag,
+      monitor_impact: m.monitor_impact,
+    })),
     events,
     upcoming_event: upcomingEvent || null,
   };
@@ -228,7 +241,10 @@ export const GetMaintenancesDashboard = async (data: {
     const upcomingEvent = events.find((e) => e.end_date_time > now);
     enriched.push({
       ...m,
-      monitors: monitorRecords.map((mr) => ({ monitor_tag: mr.monitor_tag })),
+      monitors: monitorRecords.map((mr) => ({
+        monitor_tag: mr.monitor_tag,
+        monitor_impact: mr.monitor_impact,
+      })),
       events,
       upcoming_event: upcomingEvent || null,
     });
@@ -243,8 +259,8 @@ export const UpdateMaintenance = async (id: number, data: UpdateMaintenanceInput
     throw new Error(`Maintenance with id ${id} does not exist`);
   }
 
-  // Extract monitor_tags separately as it's not part of the record
-  const { monitor_tags, ...updateData } = data;
+  // Extract monitors separately as it's not part of the record
+  const { monitors, ...updateData } = data;
 
   // Check if schedule has changed (start_date_time, rrule, or duration_seconds)
   const scheduleChanged =
@@ -256,10 +272,10 @@ export const UpdateMaintenance = async (id: number, data: UpdateMaintenanceInput
   const result = await db.updateMaintenance(id, updateData);
 
   // Update monitors if provided
-  if (monitor_tags !== undefined) {
+  if (monitors !== undefined) {
     await db.removeAllMonitorsFromMaintenance(id);
-    if (monitor_tags.length > 0) {
-      await db.addMonitorsToMaintenance(id, monitor_tags);
+    if (monitors.length > 0) {
+      await db.addMonitorsToMaintenanceWithStatus(id, monitors);
     }
   }
 
@@ -399,9 +415,31 @@ export const RemoveMonitorFromMaintenance = async (maintenance_id: number, monit
   return await db.removeMonitorFromMaintenance(maintenance_id, monitor_tag);
 };
 
-export const GetMaintenanceMonitors = async (maintenance_id: number): Promise<Array<{ monitor_tag: string }>> => {
+export const GetMaintenanceMonitors = async (
+  maintenance_id: number,
+): Promise<Array<{ monitor_tag: string; monitor_impact: string }>> => {
   const records = await db.getMaintenanceMonitors(maintenance_id);
-  return records.map((r) => ({ monitor_tag: r.monitor_tag }));
+  return records.map((r) => ({ monitor_tag: r.monitor_tag, monitor_impact: r.monitor_impact }));
+};
+
+export const UpdateMaintenanceMonitorImpact = async (
+  maintenance_id: number,
+  monitor_tag: string,
+  monitor_impact: "UP" | "DOWN" | "DEGRADED" | "MAINTENANCE",
+): Promise<number> => {
+  const maintenance = await db.getMaintenanceById(maintenance_id);
+  if (!maintenance) {
+    throw new Error(`Maintenance with id ${maintenance_id} does not exist`);
+  }
+
+  // Verify monitor is attached to this maintenance
+  const monitors = await db.getMaintenanceMonitors(maintenance_id);
+  const monitorExists = monitors.some((m) => m.monitor_tag === monitor_tag);
+  if (!monitorExists) {
+    throw new Error(`Monitor ${monitor_tag} is not attached to maintenance ${maintenance_id}`);
+  }
+
+  return await db.updateMonitorImpactInMaintenanceMonitors(maintenance_id, monitor_tag, monitor_impact);
 };
 
 // ============ Status Page Queries ============

src/lib/server/db/dbimpl.ts

@@ -243,11 +243,13 @@ class DbImpl {
   // ============ Maintenance Monitors ============
   addMonitorToMaintenance!: MaintenancesRepository["addMonitorToMaintenance"];
   addMonitorsToMaintenance!: MaintenancesRepository["addMonitorsToMaintenance"];
+  addMonitorsToMaintenanceWithStatus!: MaintenancesRepository["addMonitorsToMaintenanceWithStatus"];
   removeMonitorFromMaintenance!: MaintenancesRepository["removeMonitorFromMaintenance"];
   removeAllMonitorsFromMaintenance!: MaintenancesRepository["removeAllMonitorsFromMaintenance"];
   getMaintenanceMonitors!: MaintenancesRepository["getMaintenanceMonitors"];
   getMaintenancesForMonitor!: MaintenancesRepository["getMaintenancesForMonitor"];
   deleteMaintenanceMonitorsByTag!: MaintenancesRepository["deleteMaintenanceMonitorsByTag"];
+  updateMonitorImpactInMaintenanceMonitors!: MaintenancesRepository["updateMonitorImpactInMaintenanceMonitors"];
 
   // ============ Maintenance Events ============
   createMaintenanceEvent!: MaintenancesRepository["createMaintenanceEvent"];
@@ -498,11 +500,17 @@ class DbImpl {
     this.deleteMaintenance = this.maintenances.deleteMaintenance.bind(this.maintenances);
     this.addMonitorToMaintenance = this.maintenances.addMonitorToMaintenance.bind(this.maintenances);
     this.addMonitorsToMaintenance = this.maintenances.addMonitorsToMaintenance.bind(this.maintenances);
+    this.addMonitorsToMaintenanceWithStatus = this.maintenances.addMonitorsToMaintenanceWithStatus.bind(
+      this.maintenances,
+    );
     this.removeMonitorFromMaintenance = this.maintenances.removeMonitorFromMaintenance.bind(this.maintenances);
     this.removeAllMonitorsFromMaintenance = this.maintenances.removeAllMonitorsFromMaintenance.bind(this.maintenances);
     this.getMaintenanceMonitors = this.maintenances.getMaintenanceMonitors.bind(this.maintenances);
     this.getMaintenancesForMonitor = this.maintenances.getMaintenancesForMonitor.bind(this.maintenances);
     this.deleteMaintenanceMonitorsByTag = this.maintenances.deleteMaintenanceMonitorsByTag.bind(this.maintenances);
+    this.updateMonitorImpactInMaintenanceMonitors = this.maintenances.updateMonitorImpactInMaintenanceMonitors.bind(
+      this.maintenances,
+    );
     this.createMaintenanceEvent = this.maintenances.createMaintenanceEvent.bind(this.maintenances);
     this.getMaintenanceEventById = this.maintenances.getMaintenanceEventById.bind(this.maintenances);
     this.getMaintenanceEventsByMaintenanceId = this.maintenances.getMaintenanceEventsByMaintenanceId.bind(