The OpsCore MSP Console is a self-contained single-file HTML dashboard designed for MSP service operations teams. It requires no build system, no backend server, and no external dependencies beyond a browser. All logic runs client-side via vanilla JavaScript.

The console is structured around three operational views that map directly to how a shift is actually run: what tickets need attention right now, what security events need response, and whether the shift is being reviewed and closed out correctly.

The console is organized into three tab-navigated pages. Each page opens with a 5-card KPI stat row that gives the shift-level summary before any detail panels. Tab badges reflect live severity state so the most critical view is always visually flagged even when another tab is active.

Page 1 — Ticket & Workload

Page 2 — Security Operations

Page 3 — SOC Insights

Every page opens with a unified stat-row of 4–5 stat cards. Each card has a color-coded top accent bar that communicates severity state at a glance. The color is applied dynamically in JavaScript — it is not hardcoded in the HTML.

Severity Color Mapping

The same four severity states are used consistently across stat cards, aging buckets, sev pills, timeline dots, tab badges, and panel count badges.

Tab Badge Logic

Tab badges are computed in each render function and applied to the badge <span> element dynamically. The badge class controls both color and border.

The console pulls from six platforms via REST APIs. All fetch functions are stubbed in the file — in demo mode they return hardcoded DEMO objects. To go live, replace the return DEMO.xxx; line in each function with the appropriate fetch() call.

Data Shapes

Each fetch function must return an array of objects matching the shape below. The render functions destructure these directly. If your API returns differently structured data, normalize it inside the fetch function before returning — do not modify the render logic.

// ConnectWise ticket shape
{
  id:          1234,
  summary:     'User cannot login',
  dateEntered: '2026-03-22T08:30:00.000Z',
  owner:       { name: 'J. Hartwell' },
  company:     { name: 'Acme Corp' },
  priority:    { name: 'High' },
  status:      { name: 'Open' }
}

// SentinelOne threat shape
{
  agentRealtimeInfo: { siteName: 'Acme Corp', computerName: 'LAPTOP-047' },
  threatInfo:        { threatName: 'Trojan.GenericKD',
                       confidenceLevel: 'malicious',
                       createdAt:      '2026-03-22T06:00:00.000Z' }
}

// Huntress incident shape
{
  account_name:  'Lakeside Legal',
  host:          'LL-WS-09',
  incident_type: 'Persistent Footholds',
  severity:      'critical',
  created_at:    '2026-03-22T09:45:00.000Z'
}

// FortiGate event shape
{
  client:  'Summit Finance',
  type:    'Malware Blocked',
  detail:  'Emotet C2 traffic blocked',
  sev:     'crit',   // 'crit' | 'high' | 'medium' | 'low'
  count:   1,
  time:    '2026-03-22T09:00:00.000Z'
}

// Umbrella event shape
{
  client:   'Vertex Analytics',
  domain:   'malware-c2.ru',
  category: 'Malware',
  time:     '2026-03-22T08:00:00.000Z'
}

// ESET detection shape
{
  company:        'Greenfield Mfg',
  computer:       'GF-PC-22',
  threatName:     'Win32/Delf.NNT',
  severity:       'high',
  occurrenceTime: '2026-03-22T04:00:00.000Z'
}

All endpoint URLs and API credentials are stored in a single const API object at the top of the <script> block. Locate and replace the placeholder values before deploying to production.

const API = {
  // ConnectWise Manage REST API
  CW_BASE:         'https://YOUR-CW-INSTANCE.connectwise.com/v4_6_release/apis/3.0',
  CW_CLIENT_ID:    'YOUR_CLIENT_ID',
  CW_AUTH:         'Basic YOUR_BASE64_CREDS',  // base64(company+user:pass)

  // SentinelOne
  S1_BASE:         'https://YOUR-TENANT.sentinelone.net/web/api/v2.1',
  S1_TOKEN:        'YOUR_S1_API_TOKEN',

  // Huntress
  HUNTRESS_BASE:   'https://api.huntress.io/v1',
  HUNTRESS_KEY:    'YOUR_HUNTRESS_API_KEY',
  HUNTRESS_SECRET: 'YOUR_HUNTRESS_SECRET',

  // FortiGate / FortiManager JSON-RPC
  FORTI_BASE:      'https://YOUR-FORTIMANAGER/jsonrpc',
  FORTI_TOKEN:     'YOUR_FORTI_TOKEN',

  // Cisco Umbrella
  UMBRELLA_BASE:   'https://reports.api.umbrella.com/v2',
  UMBRELLA_KEY:    'YOUR_UMBRELLA_KEY',
  UMBRELLA_SECRET: 'YOUR_UMBRELLA_SECRET',

  // ESET PROTECT
  ESET_BASE:       'https://YOUR-ESET-SERVER:8443/era/v1',
  ESET_USER:       'YOUR_ESET_USER',
  ESET_PASS:       'YOUR_ESET_PASS',
}

Tunable Thresholds

Workload severity thresholds are hardcoded in renderTickets(). These are the values to adjust per your team's SLA definitions.

Below are the production-ready fetch() call stubs for each integration. These are commented out in the file — uncomment and remove the return DEMO.xxx; line above each block to activate live data.

const res = await fetch(
  `${API.CW_BASE}/service/tickets?conditions=status/name!="Closed"&pageSize=1000`,
  { headers: {
    'Authorization': API.CW_AUTH,
    'clientId':      API.CW_CLIENT_ID,
    'Content-Type':  'application/json'
  }}
);
if (!res.ok) throw new Error('CW tickets: ' + res.status);
return res.json();

const res = await fetch(
  `${API.S1_BASE}/threats?resolved=false&limit=100`,
  { headers: { 'Authorization': 'ApiToken ' + API.S1_TOKEN }}
);
if (!res.ok) throw new Error('S1: ' + res.status);
const j = await res.json();
return j.data;  // S1 wraps results in a .data array

const b64 = btoa(API.HUNTRESS_KEY + ':' + API.HUNTRESS_SECRET);
const res = await fetch(
  `${API.HUNTRESS_BASE}/incidents?status=open`,
  { headers: { 'Authorization': 'Basic ' + b64 }}
);
if (!res.ok) throw new Error('Huntress: ' + res.status);
const j = await res.json();
return j.incidents || j;  // normalize response envelope

const res = await fetch(API.FORTI_BASE, {
  method: 'POST',
  headers: { 'Authorization': 'Bearer ' + API.FORTI_TOKEN,
              'Content-Type': 'application/json' },
  body: JSON.stringify({
    id: 1, method: 'get',
    params: [{ url: '/logview/adom/root/logfiles/list',
               filter: { logtype: 'traffic' }}]
  })
});
if (!res.ok) throw new Error('FortiManager: ' + res.status);
const j = await res.json();
return j.result?.[0]?.data || [];

// Step 1: Get OAuth2 token
const tokenRes = await fetch('https://api.umbrella.com/auth/v2/token', {
  method: 'POST',
  headers: {
    'Authorization': 'Basic ' + btoa(API.UMBRELLA_KEY + ':' + API.UMBRELLA_SECRET),
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'grant_type=client_credentials'
});
const token = (await tokenRes.json()).access_token;

// Step 2: Pull security activity
const res = await fetch(
  `${API.UMBRELLA_BASE}/security-activity?from=-1days&limit=500`,
  { headers: { 'Authorization': 'Bearer ' + token }}
);
return (await res.json()).data || [];

const b64 = btoa(API.ESET_USER + ':' + API.ESET_PASS);
const res = await fetch(`${API.ESET_BASE}/detections/list`, {
  method: 'POST',
  headers: {
    'Authorization': 'Basic ' + b64,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    filter: { resolvedTime: 'UNRESOLVED' },
    pagination: { pageSize: 200 }
  })
});
return (await res.json()).detections || [];

The console ships with a fully populated const DEMO object that simulates realistic MSP data across all six integrations. All fetch functions return from this object by default. A yellow demo bar is shown at the top of the page when loaded in demo mode.

Demo Object Structure

The demo bar is rendered via a fixed-position #ktc-demo-bar div at the top of the body, styled with the cyan glow button and a yellow centered warning notice. To suppress it in production, remove the entire <div id="ktc-demo-bar">...</div> block and the associated #ktc-demo-bar style block from the <head>.

The Insights page was designed to fill a gap the other two views leave: they tell you what is happening right now, but Insights tells you how the shift performed and whether operational review was completed correctly before handoff.

Shift Review Checklist

The checklist drives the Insights tab badge count. Items have three states:

To customize the checklist, edit the DEMO.insights.checklist array. Each item requires three fields: title, sub (description), and status ('done' | 'pending' | 'open').

{
  title:  'Review all Critical / High alerts',
  sub:    'Confirm disposition or open a ticket for each finding',
  status: 'done'  // 'done' | 'pending' | 'open'
}

Alert Volume by Source

The source breakdown bars use both live data (current session events) and accumulated demo data from DEMO.insights.src_extra. The src_extra object simulates the difference between what is currently active vs. what occurred over the past 7 days. In production, replace src_extra with a historical query result from each platform's events API filtered to the last 7 days.

Detection Trend Chart

The 7-day trend chart uses the updated drawLineChart() function which now accepts color and fill parameters. It uses a distinct palette from the Tickets page trend:

To change these, pass different hex or rgba strings to drawLineChart() as the 4th–7th arguments (c1, f1, c2, f2 = line color, fill color for each series).

The console is a single self-contained HTML file with no external JavaScript dependencies. All rendering uses vanilla JS and the HTML Canvas API for charts.

Go-Live Checklist

1. 01
   Configure the API object. Populate all base URLs and credentials in the const API block. Verify each integration is reachable from the host where the file will be served.
2. 02
   Replace demo return stmts. In each fetchXxx() function, remove return DEMO.xxx; and uncomment the fetch() call below it. Keep the demo data object in place — it serves as a fallback and type reference.
3. 03
   Address CORS. Test each API call in the browser console. Any cross-origin failure needs a proxy route. Recommended: NGINX reverse proxy with a /proxy/cw, /proxy/s1, etc. path structure that rewrites to the upstream API with the necessary auth headers injected server-side.
4. 04
   Remove the demo bar. Delete the <div id="ktc-demo-bar"> block and the <style id="ktc-home-bar-style"> block from the HTML head. These are purely cosmetic for showcase environments.
5. 05
   Adjust refresh interval. The default auto-refresh is 5 minutes. Change setInterval(refreshAll, 300000) at the bottom of the script to your preferred polling frequency. Do not go below 60 seconds on shared API accounts.
6. 06
   Tune thresholds. Review the values in the configuration table in Section 05 and align them with your team's SLA definitions before going live.
7. 07
   Secure the file. Since the HTML may contain API credentials or be served to a shared internal host, protect access with HTTP basic auth at the NGINX/IIS layer or restrict by IP/VPN.
8. 08
   Verify canvas sizing. The chart canvases use canvas.offsetWidth to determine their draw area. If the console is loaded in a viewport narrower than the panel, charts may render at incorrect sizes. Test at 1280px, 1440px, and 1920px widths.

The console is intentionally structured so that adding a new page, a new data source, or a new panel is a predictable operation. The component vocabulary is small and consistent.

Adding a New Tab Page

1. 01
   Add a <button class="page-tab"> to the .page-tabs div with a unique id="tab-mypage" and onclick="switchPage('mypage')".
2. 02
   Add a <div class="page" id="page-mypage"> block below the existing pages. Start it with a stat-row of stat-card elements.
3. 03
   The switchPage() function handles activation automatically — no changes needed there.
4. 04
   Wire a renderMyPage() function and call it from refreshAll() and from the switchPage() handler for your tab name.

Adding a New Integration

1. 01
   Add credentials to the const API object.
2. 02
   Write a async function fetchMySourceData() following the same pattern as the existing six functions — stub it with return DEMO.mySource; first.
3. 03
   Add it to the Promise.allSettled() array in refreshAll().
4. 04
   Destructure its value in the then block and pass to the appropriate render function.
5. 05
   Add a src-mySource CSS class to the source pill color system following the existing .src-pill pattern.
6. 06
   Update the Tool Coverage grid on the Insights page to include the new source.

Chart Customization

Both chart helpers (drawBarChart and drawLineChart) accept color arrays or individual color parameters. The line chart accepts up to 7 arguments:

drawLineChart(
  ctx,          // CanvasRenderingContext2D
  labels,       // string[]  — x-axis labels
  series1,      // number[]  — primary line data
  series2,      // number[]  — secondary line data
  c1,           // string    — series1 line color (default: cyan)
  f1,           // string    — series1 fill color (default: cyan translucent)
  c2,           // string    — series2 line color (default: green)
  f2            // string    — series2 fill color (default: green translucent)
)