The Global Operations Health Console is a single-file HTML dashboard that provides a high-level operational health view across an MSP's full technology stack. It is designed as an executive-facing or NOC wall display that aggregates platform status, client risk, SLA performance, and alert volume into a 4-column grid layout refreshed every 45 seconds.

Unlike the engineer-facing triage consoles, this dashboard is observational. It answers one question at a glance: how healthy is the environment right now? Every panel is clickable and opens a drill-down detail drawer with deeper data, but there are no action workflows — no ticket creation, no alert acknowledgement routing, no engineer assignment. It is the command center view that precedes those actions.

The console is a self-contained single HTML file. Chart.js 4.4.1 loads from the Cloudflare CDN. All rendering is handled by dedicated render*() functions that accept a DATA object — the source of that object (proxy or fallback generator) is transparent to every render function.

The sticky topbar contains six animated KPI values that update on every refresh using the anim() function — a cubic ease animation from the previous value to the new one over 600ms. An SVG arc gauge also reflects the environment health score visually.

The full-width top panel shows a tile for each of the 9 monitored platforms. Tile border color reflects platform status. Clicking any tile opens the platform detail drawer showing a 24-hour activity chart, health score, alert counts, uptime bar, last seen time, and category.

The right-side panel (spans rows 2–3) shows the global alert breakdown and a 24-hour trend chart. The three large numbers show Critical, Warning, and Info alert counts. Below them is a scrollable list of up to 18 alert detail rows. The panel gains a red pulse animation (pulsecrit class) when critCount > 5.

Clicking the panel or the panel header opens the alert drawer. Individual alert rows in the drawer are clickable — clicking an alert row dims it and fires a toast acknowledging it. In production, this onclick should be wired to your PSA's acknowledge endpoint (PATCH /api/proxy/psa/alerts/{id}/ack).

The Environment Health panel (row 2, col 1) shows an SVG ring gauge with the aggregate environment score and a grade letter, plus a set of horizontal bars showing each platform's individual score contribution. Clicking opens the Environment Health drawer, which lists all platform scores as clickable bars — clicking a platform bar opens that platform's detail drawer.

The Operational Snapshot panel (row 2, col 2) shows four PSA-derived KPI tiles. All four come from d fields that in production map directly to ConnectWise PSA API responses.

The SLA Compliance panel (row 2, col 3) shows an SVG ring gauge for overall SLA percentage and three horizontal bar gauges for P1 response, P2 response, and overall compliance. The ring color is green ≥95%, orange ≥85%, red below 85%. Clicking opens the SLA detail drawer.

The Client Risk Leaderboard (row 3, cols 1–2) shows up to 10 clients sorted by risk score descending — highest-risk first. Each row shows a color-coded risk badge, client name, risk score, open alert count, backup failure count, security incident count, and patch failure percentage. Clicking a row or the panel opens the client detail drawer.

The detail drawer is a 380px slide-in panel from the right side of the screen. It is opened by clicking any major panel and closed by clicking the overlay, pressing Escape, or clicking the close button. It renders different content based on the type argument passed to openDrawer().

The proxy must return objects matching these shapes. All render functions consume these shapes directly — field names are hardcoded throughout. The /api/ops/summary response carries most of the data; trend endpoints return simpler arrays.

These are the real API endpoints your proxy will call to populate the platform health objects. Each platform's health score should be computed from the response — map error rates, alert counts, and uptime data to the 0–100 score range.

Two variables at the top of the script block control the integration behaviour. No other code changes are needed to switch from demo to live mode.

The /api/ops/summary endpoint is the most work-intensive. It must aggregate data from all platforms you want to show live and return a single JSON object. Build this incrementally — start with one or two platforms and let the rest fall back to demo data.

• 1
  Platform health arrayFor each platform, call its health API, compute a 0–100 score, set status based on score thresholds, and collect alert counts, uptime, and device count. Return all 9 platform objects — use the exact id strings from the PLATFORMS array (ninja, auvik, forti, etc.). Platforms not yet wired can be populated with default/neutral values.
• 2
  Alert details arrayCollect active critical and warning alerts from the platforms that are wired. Normalize each to the alert detail shape: { id, priority, title, platform, client, age, assigned }. Sort criticals first. Limit to 18 items.
• 3
  Client risk arrayFor each client, aggregate their open alerts (cross-platform), backup failures, security incidents, and patch compliance. Compute a risk score and set the risk field. Sort by score descending. Limit to 10–12 clients.
• 4
  PSA metricsCall ConnectWise PSA for openTix, closedToday, avgResp, slaP1, slaP2. These are the most straightforward fields — CW has native endpoints for each.
• 5
  CountsEither supply critCount, warnCount, infoCount directly, or omit them — fetchData() will derive them from the alertDetails array if absent.

• ✓
  Set PROXY_BASE. Update the PROXY_BASE variable at the top of the script to your Function App URL if it is on a different origin from the HTML file. Leave empty for same-origin.
• ✓
  Set DEMO_MODE = false. Flip the flag so fetch failures appear in browser DevTools and you can diagnose proxy issues.
• ✓
  Proxy returns valid JSON for all three endpoints. Open browser DevTools → Network tab. Trigger a refresh (Ctrl+R). Confirm each proxy endpoint returns 200 with a JSON body matching the documented shape.
• ✓
  Platform IDs match exactly. The id field in each platform object must match one of: ninja, auvik, forti, s1, huntress, backup, cw, email, azure. Any mismatch causes that tile to render with default values.
• ✓
  Alert priority values are lowercase. The drawer filter compares a.priority === 'crit' — exact lowercase match. 'CRIT' or 'Critical' will not match and alerts will disappear from the drawer.
• ✓
  Trend arrays have correct lengths. /api/ops/trend24 must return exactly 24 items (h: 0–23). /api/ops/trend7d returns 5 items. Shorter arrays produce blank chart sections.
• ✓
  API key in Key Vault, not in proxy code. Verify the Function App's Application Settings show Key Vault reference strings (@Microsoft.KeyVault(...)), not raw key values.
• ✓
  Remove the enforced-critical logic from makeData(). The makeData() fallback forces at least one critical platform. This is fine for demo but should be removed from the fallback if the fallback is still in use alongside live data, to avoid mixing real and forced values.