Add NOC alert panel V3.5

script.js

@@ -5,8 +5,6 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   loadNocStatus();
-
-  // Auto-refresh NOC dashboard every 30 seconds
   setInterval(loadNocStatus, 30000);
 });
 
@@ -26,6 +24,7 @@ async function loadNocStatus() {
     const vlans = document.getElementById("metric-vlans");
     const edge = document.getElementById("metric-edge");
     const grid = document.getElementById("noc-system-grid");
+    const alertList = document.getElementById("noc-alert-list");
 
     if (!statusText || !nodes || !services || !vlans || !edge || !grid) {
       return;
@@ -33,10 +32,10 @@ async function loadNocStatus() {
 
     statusText.textContent = `${data.nocName} — ${data.status} — Last updated: ${data.lastUpdated}`;
 
-    nodes.textContent = data.summary.nodes;
-    services.textContent = data.summary.services;
-    vlans.textContent = data.summary.vlans;
-    edge.textContent = data.summary.edgeSystems;
+    animateMetric(nodes, data.summary.nodes);
+    animateMetric(services, data.summary.services);
+    animateMetric(vlans, data.summary.vlans);
+    animateMetric(edge, data.summary.edgeSystems);
 
     grid.innerHTML = "";
 
@@ -78,6 +77,10 @@ async function loadNocStatus() {
 
       grid.appendChild(card);
     });
+
+    if (alertList) {
+      renderAlerts(data.systems, alertList);
+    }
   } catch (error) {
     const statusText = document.getElementById("noc-status-text");
 
@@ -87,4 +90,59 @@ async function loadNocStatus() {
 
     console.error("Failed to load NOC status:", error);
   }
+}
+
+function animateMetric(element, value) {
+  element.classList.remove("metric-pop");
+  element.textContent = value;
+
+  void element.offsetWidth;
+  element.classList.add("metric-pop");
+}
+
+function renderAlerts(systems, alertList) {
+  const priority = systems
+    .map((system) => {
+      const severity = (system.severity || "Unknown").toLowerCase();
+      const status = (system.status || "").toLowerCase();
+
+      let score = 0;
+
+      if (severity.includes("critical") || status.includes("offline")) {
+        score = 3;
+      } else if (severity.includes("degraded")) {
+        score = 2;
+      } else if (severity.includes("unknown")) {
+        score = 1;
+      }
+
+      return { ...system, score };
+    })
+    .filter((system) => system.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 3);
+
+  if (priority.length === 0) {
+    alertList.innerHTML = `
+      <div class="noc-alert healthy">
+        <strong>All monitored systems healthy</strong>
+        <span>No critical or degraded systems detected.</span>
+      </div>
+    `;
+    return;
+  }
+
+  alertList.innerHTML = priority
+    .map((system) => {
+      const alertClass =
+        system.score === 3 ? "critical" : system.score === 2 ? "degraded" : "unknown";
+
+      return `
+        <div class="noc-alert ${alertClass}">
+          <strong>${system.name}</strong>
+          <span>${system.severity || system.status} • ${system.layer} • ${system.latency || "N/A"}</span>
+        </div>
+      `;
+    })
+    .join("");
 }