feat: add NOC alert system for map markers

- Backend: compute_alert_level() classifies locations as critical/medium/ok
  - Critical: any device with a "core" role (core, spine, distribution, router,
    gateway keyword) has an offline/failed/decommissioning status
  - Medium: >25% of all devices at the site are offline
- Backend: /api/locations/<id>/detail now includes an 'alert' key
- Frontend: alert banner shown in popup when detail loads
- Frontend: marker icon updated to orange (medium) or pulsing red (critical)
  after device details are fetched, including co-located markers
- Frontend: legend updated with medium and critical alert entries

Author: Copilot

app.py

@@ -328,6 +328,67 @@ def get_locations() -> list:
     return locations
 
 
+# ---------------------------------------------------------------------------
+# NOC alert helpers
+# ---------------------------------------------------------------------------
+
+# Device statuses that count as "down" for alert purposes
+_DOWN_STATUSES: frozenset = frozenset({"offline", "failed", "decommissioning"})
+
+# Keywords in a device role that identify core/critical infrastructure.
+# Matching is case-insensitive substring check.
+_CORE_ROLE_KEYWORDS: tuple = ("core", "spine", "distribution", "router", "gateway")
+
+
+def compute_alert_level(devices: list) -> dict:
+    """Return the NOC alert level for a location based on its device list.
+
+    Returns a dict::
+
+        {"level": "critical" | "medium" | "ok", "reason": "<human-readable text>"}
+
+    Rules:
+    * **critical** – at least one device whose role contains a core-network
+      keyword (core, spine, distribution, router, gateway) has a down status.
+    * **medium**   – more than 25 % of all devices have a down status.
+    * **ok**       – neither condition above is met (or no devices present).
+    """
+    if not devices:
+        return {"level": "ok", "reason": ""}
+
+    down_names: list = []
+    core_down_names: list = []
+
+    for device in devices:
+        status = (device.get("status") or "").lower().strip()
+        if status not in _DOWN_STATUSES:
+            continue
+        name = device.get("name") or "Unknown"
+        down_names.append(name)
+        role = (device.get("role") or "").lower()
+        if any(kw in role for kw in _CORE_ROLE_KEYWORDS):
+            core_down_names.append(name)
+
+    if core_down_names:
+        listed = ", ".join(core_down_names[:3])
+        suffix = f" (+{len(core_down_names) - 3} more)" if len(core_down_names) > 3 else ""
+        return {
+            "level": "critical",
+            "reason": f"Core device(s) offline: {listed}{suffix}",
+        }
+
+    total = len(devices)
+    down_count = len(down_names)
+    if total > 0 and down_count / total > 0.25:
+        pct = round(down_count / total * 100)
+        return {
+            "level": "medium",
+            "reason": f"{down_count}/{total} devices offline ({pct}%)",
+        }
+
+    return {"level": "ok", "reason": ""}
+
+
 def get_location_detail(location_id: str) -> dict:
     """Fetch detailed info (devices, prefixes, ASNs) for a single location."""
     detail: dict = {}
@@ -398,9 +459,11 @@ def get_location_detail(location_id: str) -> dict:
                 }
             )
         detail["devices"] = devices
+        detail["alert"] = compute_alert_level(devices)
     except Exception as exc:
         logger.warning("Could not fetch devices for location %s: %s", location_id, exc)
         detail["devices"] = []
+        detail["alert"] = {"level": "ok", "reason": ""}
 
     # ASN(s) associated with this location via the ipam/asns endpoint
     try:

static/css/map.css

@@ -655,6 +655,66 @@ html, body {
   display: block;
 }
 
+/* =========================================================
+   NOC alert banner (shown inside popup after detail loads)
+   ========================================================= */
+.alert-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 6px;
+  padding: 7px 10px;
+  margin-bottom: 8px;
+  font-size: 0.82rem;
+}
+
+.alert-banner.alert-critical {
+  background: rgba(231, 76, 60, 0.18);
+  border: 1px solid rgba(231, 76, 60, 0.5);
+}
+
+.alert-banner.alert-medium {
+  background: rgba(255, 140, 0, 0.18);
+  border: 1px solid rgba(255, 140, 0, 0.5);
+}
+
+.alert-banner-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+
+.alert-banner-level {
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+}
+
+.alert-critical .alert-banner-level { color: var(--color-danger); }
+.alert-medium   .alert-banner-level { color: #ff8c00; }
+
+.alert-banner-reason {
+  font-size: 0.76rem;
+  color: var(--color-text-muted);
+  margin-top: 1px;
+}
+
+/* Pulsing ring for critical markers */
+@keyframes markerPulse {
+  0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
+  70%  { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
+}
+
+.marker-pulse {
+  border-radius: 50% 50% 50% 0;
+  animation: markerPulse 1.4s ease-out infinite;
+}
+
+/* Alert legend dots */
+.dot-medium   { background: #ff8c00; }
+.dot-critical { background: var(--color-danger); }
+
 /* =========================================================
    Responsive (collapse sidebar on small screens)
    ========================================================= */

static/js/map.js

@@ -19,14 +19,15 @@ L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 // ---------------------------------------------------------------------------
 // Marker icon factory
 // ---------------------------------------------------------------------------
-function makeIcon(color) {
+function makeIcon(color, pulse) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36">
     <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24S24 21 24 12C24 5.373 18.627 0 12 0z"
           fill="${color}" stroke="#fff" stroke-width="1.5"/>
     <circle cx="12" cy="12" r="4.5" fill="#fff"/>
   </svg>`;
+  const cls = pulse ? ' class="marker-pulse"' : '';
   return L.divIcon({
-    html: `<div style="width:24px;height:36px">${svg}</div>`,
+    html: `<div${cls} style="width:24px;height:36px">${svg}</div>`,
     iconSize: [24, 36],
     iconAnchor: [12, 36],
     popupAnchor: [0, -36],
@@ -35,10 +36,12 @@ function makeIcon(color) {
 }
 
 const ICONS = {
-  active: makeIcon("#2ecc71"),
-  planned: makeIcon("#f0a500"),
-  other: makeIcon("#888888"),
-  search: makeIcon("#e74c3c"),
+  active:   makeIcon("#2ecc71"),
+  planned:  makeIcon("#f0a500"),
+  other:    makeIcon("#888888"),
+  search:   makeIcon("#e74c3c"),
+  medium:   makeIcon("#ff8c00"),
+  critical: makeIcon("#e74c3c", true),
 };
 
 function iconForStatus(status) {
@@ -85,6 +88,19 @@ function renderDetail(locId, detail) {
 
   let html = "";
 
+  // NOC alert banner
+  if (detail.alert && detail.alert.level !== "ok") {
+    const lvl = detail.alert.level;
+    const icon = lvl === "critical" ? "🔴" : "🟠";
+    html += `<div class="alert-banner alert-${escHtml(lvl)}">
+      <span class="alert-banner-icon">${icon}</span>
+      <div>
+        <div class="alert-banner-level">${escHtml(lvl.toUpperCase())}</div>
+        ${detail.alert.reason ? `<div class="alert-banner-reason">${escHtml(detail.alert.reason)}</div>` : ""}
+      </div>
+    </div>`;
+  }
+
   // ASNs
   if (detail.asns && detail.asns.length > 0) {
     const tags = detail.asns
@@ -195,15 +211,21 @@ function groupByCoords(locations) {
 
 /**
  * Create a marker icon with a small count badge for co-located sites.
+ * Pass alertLevel ("critical" | "medium") to colour the pin accordingly.
  */
-function makeStackedIcon(count) {
+function makeStackedIcon(count, alertLevel) {
+  const color = alertLevel === "critical" ? "#e74c3c"
+              : alertLevel === "medium"   ? "#ff8c00"
+              : "#3388ff";
+  const pulse = alertLevel === "critical";
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36">
     <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24S24 21 24 12C24 5.373 18.627 0 12 0z"
-          fill="#3388ff" stroke="#fff" stroke-width="1.5"/>
+          fill="${color}" stroke="#fff" stroke-width="1.5"/>
     <circle cx="12" cy="12" r="4.5" fill="#fff"/>
   </svg>`;
+  const cls = pulse ? ' class="marker-pulse"' : '';
   return L.divIcon({
-    html: `<div style="width:24px;height:36px;position:relative">${svg}<span class="colocated-badge">${count}</span></div>`,
+    html: `<div${cls} style="width:24px;height:36px;position:relative">${svg}<span class="colocated-badge">${count}</span></div>`,
     iconSize: [24, 36],
     iconAnchor: [12, 36],
     popupAnchor: [0, -36],
@@ -337,6 +359,14 @@ function addColocatedMarker(locations) {
   });
 
   bindHoverAndLock(marker);
+
+  // Register all location IDs so alert updates can find this marker
+  const ids = locations.map((l) => l.id);
+  for (const loc of locations) {
+    markerByLocId[loc.id] = marker;
+    colocGroupByLocId[loc.id] = ids;
+  }
+
   marker.addTo(markerLayer);
 }
 
@@ -347,6 +377,49 @@ const markerLayer = L.layerGroup().addTo(map);
 let allLocations = [];
 const CLUSTER_THRESHOLD = 100; // Use clustering if more than 100 locations
 
+// ---------------------------------------------------------------------------
+// NOC alert marker registry
+// Keeps track of every rendered marker so icons can be updated after
+// device-detail loads reveal the site's alert level.
+// ---------------------------------------------------------------------------
+/** locId → L.marker */
+const markerByLocId = {};
+/** locId → array of all locIds sharing the same co-located marker */
+const colocGroupByLocId = {};
+/** locId → "critical" | "medium" | "ok" */
+const locationAlerts = {};
+
+/**
+ * Called after device details are loaded for a location.
+ * Updates the map-marker icon to reflect the computed alert level,
+ * and (for co-located groups) promotes to the highest level across
+ * all members that have been loaded so far.
+ */
+function updateMarkerForAlert(locId, alertLevel) {
+  locationAlerts[locId] = alertLevel;
+  const marker = markerByLocId[locId];
+  if (!marker) return;
+
+  const groupIds = colocGroupByLocId[locId];
+  if (groupIds) {
+    // Co-located marker: pick the worst level across the known group
+    const groupLevel = groupIds.reduce((highest, id) => {
+      const lvl = locationAlerts[id] || "ok";
+      if (lvl === "critical") return "critical";
+      if (lvl === "medium" && highest !== "critical") return "medium";
+      return highest;
+    }, "ok");
+    if (groupLevel !== "ok") {
+      marker.setIcon(makeStackedIcon(groupIds.length, groupLevel));
+    }
+    return;
+  }
+
+  // Single marker
+  if (alertLevel === "critical") marker.setIcon(ICONS.critical);
+  else if (alertLevel === "medium") marker.setIcon(ICONS.medium);
+}
+
 async function loadLocations() {
   showLoading(true, "Loading locations from Nautobot…");
   try {
@@ -367,6 +440,9 @@ async function loadLocations() {
 
 function renderMarkers(locations, searchMarker) {
   markerLayer.clearLayers();
+  // Clear registry so stale references don't linger after a re-render
+  for (const key of Object.keys(markerByLocId)) delete markerByLocId[key];
+  for (const key of Object.keys(colocGroupByLocId)) delete colocGroupByLocId[key];
 
   // Add search point marker if provided
   if (searchMarker) {
@@ -573,6 +649,7 @@ function addMarker(loc) {
   });
 
   bindHoverAndLock(marker);
+  markerByLocId[loc.id] = marker;
   marker.addTo(markerLayer);
 }
 
@@ -589,6 +666,9 @@ async function fetchAndRenderDetail(locId) {
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
     const detail = await resp.json();
     renderDetail(locId, detail);
+    if (detail.alert) {
+      updateMarkerForAlert(locId, detail.alert.level);
+    }
   } catch (err) {
     const container = document.getElementById(`popup-detail-${locId}`);
     if (container) {

templates/index.html

@@ -88,6 +88,12 @@ <h1>
       <div class="legend-item">
         <span class="legend-dot dot-search"></span> Search result
       </div>
+      <div class="legend-item">
+        <span class="legend-dot dot-medium"></span> Alert: &gt;25% devices down
+      </div>
+      <div class="legend-item">
+        <span class="legend-dot dot-critical"></span> Alert: Core device offline
+      </div>
     </div>
   </div>