The SonicWall MSP Command Center is a single-file HTML console designed for MSP engineers managing multi-tenant firewall environments. It requires no build process, no backend server in demo mode, and no external framework beyond Chart.js loaded from CDN.

The console operates in two modes: Demo Mode (default — all device data is generated from TENANTS, MODELS, and VERSIONS arrays at page load) and Live Mode (API key entered → NSM token generated → real data replaces demo arrays). Switching requires no code change — just connecting an API key.

The file has one external script dependency and three Google Fonts. All state, rendering, and API logic is vanilla JavaScript inside a single <script> block. There is no module system and no build step.

Page Structure

The layout is three stacked fixed-position layers: the 32px Rail at the top, the 36px Tab Bar directly below it, and the App container filling the remaining viewport. The App container uses position:fixed; top:calc(32px + 36px) and holds four console divs that swap visibility via switchConsole(n).

--rail-h: 32px;   /* top ticker bar height */
--tabs-h: 36px;   /* console tab bar height */

/* App viewport starts below both bars: */
#app { top: calc(var(--rail-h) + var(--tabs-h)); }

Navigation between the four consoles is handled by switchConsole(n) where n is 0-based (0 = Fleet Health, 1 = Live Triage, 2 = Bulk Ops, 3 = Device Explorer). The function toggles the .active class on both the .console divs and the .tab-btn buttons simultaneously.

Responsive Breakpoints

The console is designed for 1400px+ wide screens. Below key breakpoints, panels collapse:

The Rail is the 32px fixed bar at the very top of the page. It serves as the always-visible operational status strip — engineers can read current fleet health without leaving any console view.

Rail Stat Color Logic

Fleet Health is the default landing console. Its grid layout is grid-template-columns: 1fr 1fr 300px — two fluid center columns and a fixed 300px right panel. It contains five distinct zones.

Platform Health Cards

The four .ph-card tiles across the top row show the health of each integrated vendor platform: SonicWall NSM, FortiManager, Meraki Dashboard, and MySonicWall licensing. Each card shows a status icon, platform name, and a status string. Cards are hardcoded in HTML — update them to reflect live API connection status when going live.

KPI Summary Bar

The KPI bar spans the full width below the platform cards. Seven KPI items each have a color-coded top accent, an animated progress fill bar, and a trend indicator. All seven values are driven by data-* attributes on the .kpi-item element and populated by updateKpiSummary().

Fleet Device Matrix

The center panel renders every device in the fleet as a small status dot via renderFleetMatrix(). Each dot's class and label character encode its state:

The matrix refreshes every 30 seconds via setInterval(renderFleetMatrix, 30000) and also fires 400ms after page load. A tenant filter dropdown above the matrix lets engineers isolate a single client's device group. Hovering a dot shows a tooltip with device name, tenant, model, firmware version, and status.

Right Panel

The fixed 300px right panel contains four stacked components:

Live Triage is the incident response console. It is a two-column layout: a scrollable alert feed on the left and a fixed 340px right sidebar with stats, the NSM system log, alert distribution, and the threat intelligence widget.

Alert Stream

Alerts are rendered by renderAlerts() from the ALERTS array. Each alert card shows severity badge, title, tenant, device, source system, ticket ID, and age. The bottom of each card has four action buttons:

Alert Filters

Filter buttons call filterAlerts(f, btn) with values: 'all', 'P1', 'P2', 'P3', 'upgrade'. The 'upgrade' filter checks a.upgrade === true on each alert object. The search input calls searchAlerts(value) which does a case-insensitive substring match on a.title and a.device.

NSM System Log

The log feed is rendered by renderNSMLog() which rotates through the LOG_MSGS array every 2.8 seconds, prepending new lines and trimming the feed to 40 entries. Each line has a timestamp, severity token [INFO/WARN/CRIT], and message text. This simulates a live syslog tail — in production, replace the interval with a WebSocket subscription to the NSM event stream.

Right Sidebar Stats

The four stat boxes (#c2-p1, #c2-p2, #c2-resolved, and Avg MTTR) are hardcoded in HTML. Update #c2-p1 and #c2-p2 dynamically from the ALERTS array in production. The Avg MTTR value of ~23m is static demo text.

Bulk Ops is the command-and-control console. It has a fixed 300px left panel for incident context and a fluid right area with two subtabs switchable via switchSubtab(n). Subtabs are also accessible via Ctrl+1 and Ctrl+2 while Console 3 is active.

Incident Context Panel

The left panel renders incidents from the INCIDENTS array via renderIncidents(). Clicking an incident card calls selectIncident(i, card) which highlights the card and populates the Affected Devices list below with the incident's device names. Right-clicking any affected device opens the context menu targeting that device.

Subtab 0 — Security & Config

Six action cards trigger specific operations. All six fire showToast() in demo mode. In production, wire the onclick of each card's button to the relevant API call:

Below the action cards, a Bulk Config Status table rendered by renderConfigTable() shows the first 12 devices with randomized policy, DPI-SSL, and SD-WAN status badges. In production this table should be populated from the NSM bulk configuration endpoint.

Subtab 1 — Firmware & Maintenance

The firmware tab has three sections:

Device Explorer is the full-fleet inventory and search surface. It is the only console with a flex-direction:column layout rather than grid — search bar and filter controls are fixed at the top, and the scrollable table or card grid fills the remainder.

Vendor Filter Tabs

Four tabs above the search bar filter the device list by vendor: ALL, SONICWALL, FORTIGATE, MERAKI. Clicking calls setVendorFilter(v, btn) which sets activeVendorFilter and re-runs filterDevices(). The vendor count labels to the right of the tabs are updated by updateVendorCounts().

Filter Controls

Five filter inputs all call filterDevices() on change. The filter function applies each condition sequentially — all five must pass for a device to appear:

Table View vs Card View

setDevView('table') and setDevView('card') toggle between the two render modes. Table view (#tableView) renders via renderDevTable(devs) — a full 12-column sortable table. Card view (#cardView) renders via renderDevCards(devs) — a responsive grid of device tiles with hover-reveal action buttons.

Table column headers that call sortDevices(key) toggle ascending/descending on the same key. The current sort state is tracked in devSortKey and devSortAsc.

Floating Action Bar

The #floatBar appears at the bottom of the console when one or more devices are selected (d.selected === true). It shows the count and six bulk action buttons. When more than 3 devices are selected, it gains the .pulse-glow class for a pulsing cyan border animation to draw attention to the pending bulk operation.

Selection state is stored directly on each device object as d.selected. toggleDev(id, checked) updates a single device. toggleSelectAll(checked) updates all devices and re-runs filterDevices(). clearSelection() resets all to false.

Export CSV

exportCSV() builds a CSV from either the selected devices (if any) or the full DEVICES array. It uses a data: URI download via a synthetic anchor element. Columns: Name, Tenant, Model, IP, Serial, Version, HA, Status, LastSeen.

Context Menu

Right-clicking any device row or dot triggers showCtxMenu(event, deviceName) which positions the #ctxMenu element at the cursor. Eight actions are available: View in NSM, Upgrade Firmware, Backup Config, Reboot, Isolate VPN, Block Source IP, Create Ticket, and Force 7.1.3-7020. All call ctxAction(action) which fires the appropriate toast with an action-specific severity level.

All device, alert, and incident data is generated or defined in a single <script> block. The three vendor device arrays are generated independently and then merged via DEVICES.push(...FG_DEVICES, ...MRK_DEVICES).

Unified Device Object Shape

Every device — regardless of vendor — is normalized to this shape before being pushed into DEVICES. The vendor abstraction layer's _normalizeDevice() method is responsible for the mapping.

{
  id:           1,                    // unique integer across all vendors
  vendor:       'sonicwall',          // 'sonicwall' | 'fortigate' | 'meraki'
  name:         'ACME-FW-001',
  tenant:       'ACME Corp',
  model:        'TZ470',
  ip:           '192.168.14.22',
  serial:       'C0AEK9X2SW',
  version:      '7.1.2-6501',         // firmware version string
  firmware:     '7.1.2-6501',         // alias — set by _normalizeDevice()
  ha:           'Primary',            // 'Primary' | 'Secondary' | 'Standalone'
  status:       'Online',             // 'Online' | 'Warning' | 'Offline'
  lastSeen:     '14m ago',
  upgradeReady: true,                 // version !== latest for this vendor
  patchOk:      true,
  selected:     false,               // managed by toggleDev() — not persisted

  // FortiGate-specific (added by FortiGateAPI._normalizeDevice):
  adom:         'root',
  vdom:         'root',

  // Meraki-specific (added by MerakiDashboardAPI._normalizeDevice):
  orgId:        'L_abc123456',
  networkId:    'N_def789012',
  tags:         ['MSP', 'Managed'],
}

Fleet Size by Vendor

Alert and Incident Arrays

The ALERTS array contains 8 hardcoded alert objects. Alert objects have: id, sev (P1/P2/P3), tenant, device, title, age, source, and upgrade (boolean — controls whether the "Upgrade Firewall" button appears on the alert card).

The INCIDENTS array contains 3 incident objects used by Console 3. Each has: id, sev, title, tenant, devices (array of device name strings), and desc.

The vendor abstraction layer provides a consistent interface for querying any supported firewall platform. All three vendor classes extend VendorAPI and override its abstract methods. In demo mode every method returns from the static DEVICES/ALERTS arrays. In live mode the commented-out fetch() calls go live.

VendorAPI Base Class

The base class provides shared infrastructure that all vendor implementations inherit:

Vendor Implementations

Vendor Registry & Unified Refresh

The VENDOR_APIS object holds one instantiated API class per vendor. refreshAllVendors() calls all three getDevices() methods in parallel via Promise.allSettled(). Using allSettled (not Promise.all) ensures that one vendor's failure does not prevent the other two from loading.

const VENDOR_APIS = {
  sonicwall: new SonicWallNSMAPI({region:'uswest', token:null}),
  fortigate:  new FortiGateAPI({host:'https://fortimanager.local', token:null}),
  meraki:     new MerakiDashboardAPI({key:null}),
}

// To configure for live use:
VENDOR_APIS.sonicwall.config.token = 'your-nsm-bearer-token';
VENDOR_APIS.sonicwall.config.region = 'useast';
VENDOR_APIS.meraki.config.key = 'your-meraki-api-key';
VENDOR_APIS.fortigate.config.host = 'https://your-fortimanager.example.com';
VENDOR_APIS.fortigate.config.token = 'your-fmg-session-token';

The API Key modal (#apiModal) is auto-skipped on load in demo mode — skipApiModal() is called immediately in the initApiCheck() IIFE. To re-enable the onboarding flow for live deployment, remove or comment out the skipApiModal() call inside initApiCheck().

Key Encryption Flow

When a user submits an API key and PIN via the modal, the flow is:

1. 01
   PIN derivation. The PIN is padded to 32 bytes and imported as a raw AES-GCM key via crypto.subtle.importKey('raw', pinBuf, 'AES-GCM', false, ['encrypt','decrypt']).
2. 02
   Encryption. A random 12-byte IV is generated. The API key string is encrypted: crypto.subtle.encrypt({name:'AES-GCM', iv}, rawKey, encodedKey).
3. 03
   Storage. The IV (array), ciphertext (array), and NSM region are JSON-serialized and stored in localStorage under key 'sw_msp_enc_key'. The plaintext API key is never written to storage.
4. 04
   NSM token. simulateNSMConnect(key, region) simulates a 900ms POST to nsm-{region}.sonicwall.com/api/mssp/generatetoken and stores the resulting token in 'sw_msp_token' with a 24-hour expiry timestamp.
5. 05
   Data load. loadFromNSM() is called to populate device and alert data from the live API. In demo mode this fires a toast and calls cacheOfflineSnapshot().

Permission Levels

setPermission('readonly') disables all .btn-success, .btn-danger, and .btn-amber buttons by setting disabled=true and opacity 40%. This is designed for API keys that have read-only scope. The permission banner (#permBanner) becomes visible with a warning message.

Offline Cache

cacheOfflineSnapshot() saves the first 50 devices and 20 alerts to localStorage as 'sw_offline_cache' with a timestamp. checkOfflineCache() reads this on load (called by skipApiModal()) and shows the offline banner with the cache age in minutes. The browser offline and online events also toggle the banner.

Three data widgets run independently on their own refresh intervals. All three are initialized on page load and retry or degrade gracefully if their data source is unavailable.

Widget 1 — Top Vulnerabilities (NVD CVE Feed)

loadVulns() fetches from https://services.nvd.nist.gov/rest/json/cves/2.0?keywordSearch=sonicwall&resultsPerPage=5. CVSS scores are read from cvssMetricV31 or cvssMetricV30. Color coding: ≥ 9.0 = red/crit, ≥ 7.0 = amber/warn, below = green/ok.

Widget 2 — Threat Intelligence

loadThreatMap() renders a curated list of five threat IPs with country flags, attack type, confidence percentage, and report count. Each IP links to its AbuseIPDB lookup page. The data is static — replace it with a live GET https://api.abuseipdb.com/api/v2/blacklist call using your AbuseIPDB API key. Refresh interval: 10 minutes.

Widget 3 — Compliance Snapshot

loadCompliance() renders five compliance check items with status pills. Currently all five items are static hardcoded data. In production, wire this to your RMM or PSA compliance reporting endpoint. Refresh interval: 15 minutes.

Firmware Upgrade Modal

showUpgradeModal() opens #upgradeModal by adding the .open class. It reads the selected device count at open time and sets #modal-dev-count. The modal contains three safety requirement checkboxes, a target version selector, and a staged rollout toggle that reveals wave size options.

startUpgrade() closes the modal and fires a toast with the count of devices queued. It uses selectedStage (set by clicking wave options via selectStage(el, n)) or falls back to 41. In production, replace the toast with the actual NSM bulk upgrade API call.

Staged Rollout Modal

showStagedModal() opens #stagedModal. It displays the four rollout waves (1 → 5 → 20 → All) with wait times and risk levels. The "Start Staged Rollout" button calls both startUpgrade() and closeModal('stagedModal').

OPS Queue Panel

The OPS Queue is a floating panel (#opsQueue) that tracks background jobs — firmware upgrades, backups, policy pushes. It is toggled by toggleOpsQueue() from the rail button.

addOpsJob(name, deviceCount) creates a job entry and simulates progress by incrementing job.pct by 3–11 every 400ms via setInterval. When a job reaches 100%, it is removed from the opsJobs array after 3 seconds and the panel re-renders. If active jobs exist and the panel is closed, updateOpsBadge() auto-opens it.

FAB (Floating Action Button)

The blue ⚡ FAB in the bottom-right corner toggles a four-item quick-action menu (#fabMenu). The four items mirror the most common keyboard shortcuts: Mass Upgrade, Bulk Backup, Refresh All, and Device Search. Clicking any FAB item also calls toggleFab() to close the menu.

Toast Notifications

showToast(type, title, msg) creates a toast element, prepends it to #toasts, and removes it after 4 seconds. Type values: 'ok' (green left border), 'warn' (amber), 'err' (red). Toasts stack with a visual offset effect — the second toast scales to 98% and the third to 96% via CSS sibling selectors.

All shortcuts are handled by a single document.addEventListener('keydown') listener. Shortcuts are suppressed when focus is inside an INPUT, TEXTAREA, or SELECT element to prevent conflicts with typing.

Console Switching

Global Actions

Console 3 Subtabs (only active when Console 3 is visible)

Theme Toggle

toggleTheme() adds or removes the body.theme-classic class. The "NSM Classic" variant uses slightly warmer blue tones — --bg:#080f1e, --cyan:#00b8ff — that more closely resemble the NSM Portal's color palette. After toggling, initCharts() and updateKpiSummary() are called after a 50ms delay so Chart.js can re-read the updated CSS variables for the donut chart colors.

Offline Cache

The offline cache is a localStorage snapshot of the first 50 devices and 20 alerts with a Unix timestamp. It is written by cacheOfflineSnapshot() after every successful NSM sync and read by checkOfflineCache() on page load (called from skipApiModal() in demo mode).

The browser window.offline and window.online events are wired to show/hide #offlineBanner automatically. The banner text is set at cache read time and includes the age in minutes. In live mode, the banner should also show when the NSM API returns HTTP 503 or the WebSocket connection drops.

Go-Live Checklist

1. 01
   Remove demo auto-skip. In the initApiCheck() IIFE at the bottom of the script, comment out skipApiModal(). The API modal will now prompt for credentials on first load.
2. 02
   Wire simulateNSMConnect() to the real NSM token endpoint. Replace the setTimeout simulation with a real fetch to https://nsm-{region}.sonicwall.com/api/mssp/generatetoken. Pass the API key as a Bearer token in the Authorization header.
3. 03
   Wire loadFromNSM() to real device and alert fetches. Uncomment the commented-out fetch blocks inside loadFromNSM(). The shapes of the responses map to mapNSMDevice() and mapNSMAlert() — implement those normalizer functions to match the unified device shape in Section 09.
4. 04
   Configure FortiGate and Meraki credentials. If managing multi-vendor fleets, set the token, host, and key fields on the VENDOR_APIS instances. Uncomment the real fetch() blocks in each vendor class. Update the _rpcBody() session token for FortiManager.
5. 05
   Self-host Chart.js. Download chart.umd.min.js v4.4.1 from the Chart.js GitHub releases. Place it alongside the HTML file. Update the <script src> tag to a relative path. The CDN may be unreachable from secure internal networks.
6. 06
   Improve PIN-based key encryption. Replace the pin.padEnd(32, '0') approach with a proper PBKDF2 derivation. See the security note in Section 11. This is critical if real API keys will be stored in browser localStorage.
7. 07
   Wire toast actions to real APIs. Every showToast() call in the action buttons (Isolate VPN, Block IP, Push Policy, etc.) is a stub. Replace each with the appropriate vendor API call wrapped in a try/catch, using the toast to surface success or error.
8. 08
   Replace the NSM log ticker with a real WebSocket feed. The renderNSMLog() interval is cosmetic. In production, open a WebSocket to the NSM event stream and call addLine() on each incoming event.
9. 09
   Populate the C2 stat counters from live data. The four boxes in the Console 2 right sidebar (#c2-p1, #c2-p2, #c2-resolved, MTTR) are hardcoded. Compute them from the ALERTS array and your PSA's closed-ticket endpoint.
10. 10
    Persist theme preference. Add localStorage.setItem('sw_theme', ...) to toggleTheme() and read it during init. Optional but a quality-of-life improvement for engineers who always use NSM Classic.
11. 11
    Serve from an authenticated internal host. The file will contain real API key material after configuration. Never serve it from a publicly accessible URL. Host behind an authenticated internal web server or VPN-gated URL.
12. 12
    Update the AbuseIPDB threat widget. Add your AbuseIPDB API key to a backend proxy endpoint and update loadThreatMap() to call GET https://api.abuseipdb.com/api/v2/blacklist via the proxy. Direct browser-to-API calls will be blocked by CORS.