// OP1 Operations Portal v1.0 — CDN build (React 18 UMD + Babel standalone, no build step) // React hooks pulled from the global React object loaded by index.html const { useState, useEffect, useCallback, useRef } = React; // ═══════════════════════════════════════════════════════════════════════════ // OP1 Operations Portal v1.0 — Dashboard // Role-based: Admin (full) | User/Operator | Viewer (read-only) // ═══════════════════════════════════════════════════════════════════════════ const API_BASE = (typeof window !== "undefined" && window.OP1_API) || ""; const API = `${API_BASE}/api`; // ── Color palette ── const c = { bg: "#FFFFFF", surface: "#FFFFFF", surfaceAlt: "#F0F7FB", border: "#C0D8E8", borderLight: "#D4E8F4", text: "#1A1A1A", textMuted: "#4A4A4A", textDim: "#4A4A4A", textDimmer: "#6B6B6B", green: "#008C6F", yellow: "#E89A2E", red: "#D95C5C", blue: "#006D8C", cyan: "#006D8C", purple: "#5E5A9E", amber: "#E89A2E", teal: "#008C6F", greenLight: "#DCF2EA", yellowLight: "#FDF3E0", redLight: "#FAEAEA", blueLight: "#E0F2F7", sidebarBg: "#1E2B3C", sidebarText: "#F4F8FC", sidebarText2: "#FFFFFF", sidebarMuted: "#7A9AB8", sidebarActiveBg: "rgba(0,109,140,0.35)", sidebarActive: "#5DD4F4", sidebarBorder: "rgba(255,255,255,0.1)", }; const TYPE_COLOR = { Server: c.blue, Application: c.purple, Database: c.amber, Website: c.teal, Synthetic: c.green }; const STATUS_COLOR = { healthy: c.green, warning: c.yellow, degraded: c.yellow, critical: c.red, unknown: "#9CA3AF", suppressed: "#9CA3AF" }; // ── Help content ── const HELP_CONTENT = { 'server-health': { title: 'OP1 Server Health', sections: [ { heading: 'CPU', text: 'Shows the percentage of total server CPU capacity used by the OP1 monitoring process. Measured across all CPU cores — on a 14-core machine, 1% here equals roughly 14% of a single core. Green below 70%, amber 71–85%, red above 85%.' }, { heading: 'System Memory', text: 'Total RAM usage across the entire server — all running applications combined, not just OP1. If this is consistently red, consider closing other applications or upgrading server RAM.' }, { heading: 'App Memory', text: 'RAM used by the OP1 process specifically (WorkingSet). This should match the memory shown for OpsPortal.Api.exe in Windows Task Manager → Details tab. Informational only — does not affect the status indicator.' }, { heading: 'Disk', text: 'Percentage of disk space used on the server drive where OP1 is installed. Monitor check history and logs are stored here — if this reaches red, consider adjusting data retention settings in Config → Retention.' }, { heading: 'Database', text: 'Response time of a lightweight ping (SELECT 1) to the OpsPortal SQL Server database. Green = connected under 500ms. Amber = connected but slow over 500ms. Red = unreachable. If red, monitor checks will fail to record results.' }, { heading: 'Checks/min', text: 'Number of monitor checks executed in the last 60 seconds by the OP1 scheduler. A healthy platform typically shows 1 check per minute per active monitor.' } ], learnMore: null }, 'source-monitor': { title: 'Source Monitor', sections: [ { heading: 'What is Source Monitor?', text: 'Identifies which OP1 instance created and monitors this check. When multiple OP1 instances share the same database (e.g. development and production servers), Source Monitor lets you see exactly which machine owns each monitor and generated each result.' }, { heading: 'Multiple instances', text: 'Each OP1 server automatically registers itself using its Windows machine name. You can assign a friendly alias (e.g. "Production Server") in Config → Source Monitor.' }, { heading: 'Filtering', text: 'Use the Source Monitor filter on the Logs and Alerts screens to view results from a specific machine only.' } ], learnMore: null, position: { left: 500, top: 120 } } }; // ── UTC timestamp parser ── function parseUTC(ts) { if (!ts) return null; const s = String(ts); return new Date(s.endsWith('Z') || s.includes('+') ? s : s + 'Z'); } // ── Subtype → primary metric metadata ── function primaryMetric(subtype) { const s = (subtype || '').toLowerCase(); if (s === 'infra-cpu') return { label:'Avg CPU', unit:'%', kpiLabel:'AVG CPU' }; if (s === 'infra-mem') return { label:'Avg Memory', unit:'%', kpiLabel:'AVG MEMORY' }; if (s === 'infra-disk' || s === 'infra-diskio') return { label:'Avg Disk', unit:'%', kpiLabel:'AVG DISK' }; if (s === 'infra-net') return { label:'Network', unit:'Mbps', kpiLabel:'AVG NETWORK' }; if (s === 'infra-ping') return { label:'Avg RTT', unit:'ms', kpiLabel:'AVG RTT' }; if (s === 'infra-tcp' || s === 'app-port') return { label:'Avg Connect', unit:'ms', kpiLabel:'AVG CONNECT' }; if (s === 'web-ssl') return { label:'Days Left', unit:'d', kpiLabel:'AVG DAYS' }; if (s === 'web-dns') return { label:'Resolve Time', unit:'ms', kpiLabel:'AVG RESOLVE' }; if (s === 'db-query' || s === 'db-sqlctr') return { label:'Avg Query', unit:'ms', kpiLabel:'AVG QUERY' }; return { label:'Avg Response', unit:'ms', kpiLabel:'AVG RESPONSE' }; } // ── Utility Components ── const StatusDot = ({ status }) => ( {status} ); const Badge = ({ children, color = "#9CA3AF" }) => ( {children} ); const SevBadge = ({ severity }) => { const m = { critical: c.red, warning: c.yellow, info: c.blue, low: c.teal }; return {severity}; }; const TypeBadge = ({ type }) => {type}; const Card = ({ children, style = {}, ...rest }) => (
{children}
); const MetricCard = ({ label, value, sub, accent = c.blue }) => (
{label}
{value ?? "—"}
{sub &&
{sub}
} ); const WmiCombo = ({ label, hint, value, onChange, discoveryType, host, credentialId, api }) => { const [open, setOpen] = React.useState(false); const [items, setItems] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [filter, setFilter] = React.useState(""); const wrapRef = React.useRef(null); const canDiscover = host && credentialId && parseInt(credentialId) > 0; const colDefs = { processes: [{ k:"name", lbl:"Name", flex:2 }, { k:"pid", lbl:"PID", flex:1, mono:true }, { k:"cpu", lbl:"CPU", flex:1 }, { k:"memory", lbl:"Memory", flex:1 }], services: [{ k:"name", lbl:"Service name", flex:1, mono:true }, { k:"displayName", lbl:"Display name", flex:2 }, { k:"state", lbl:"State", flex:1 }, { k:"startMode", lbl:"Start", flex:1 }], drives: [{ k:"device", lbl:"Device", flex:1 }, { k:"label", lbl:"Label", flex:1 }, { k:"size", lbl:"Size", flex:1 }, { k:"free", lbl:"Free", flex:1 }, { k:"usedPct", lbl:"Used", flex:1 }], interfaces: [{ k:"name", lbl:"Interface name", flex:3 }, { k:"speed", lbl:"Speed", flex:1 }, { k:"mac", lbl:"MAC", flex:2, mono:true }], eventlogs: [{ k:"name", lbl:"Channel", flex:3 }, { k:"entries", lbl:"Entries", flex:1, mono:true }], }; const cols = colDefs[discoveryType] || colDefs.processes; const statusColor = s => s === "running" || s === "connected" || s === "healthy" ? "#008C6F" : s === "stopped" || s === "disconnected" ? "#E89A2E" : "#9CA3AF"; const fetchItems = async () => { if (!canDiscover) return; setLoading(true); setError(null); setItems([]); try { const data = await api("GET", `/discover?type=${discoveryType}&host=${encodeURIComponent(host)}&credentialId=${credentialId}`); setItems(Array.isArray(data) ? data : []); } catch(e) { setError(e?.message || "Discovery failed"); } finally { setLoading(false); } }; const handleOpen = () => { if (!canDiscover) return; setOpen(o => { if (!o) { setFilter(""); fetchItems(); } return !o; }); }; const handleSelect = item => { onChange(item.value); setOpen(false); }; React.useEffect(() => { const handler = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); const filtered = items.filter(item => !filter || (item.value || "").toLowerCase().includes(filter.toLowerCase()) || (item.displayName || "").toLowerCase().includes(filter.toLowerCase()) ); const gridCols = `14px ${cols.map(c => `${c.flex}fr`).join(" ")}`; return (
{label && }
{open ? "▲" : "▼"}
{open && (
{cols.map(col => ( {col.lbl} ))}
{loading && (
Connecting to {host}...
)} {error && (
{error}
)} {!loading && !error && filtered.length === 0 && (
No items found
)} {!loading && filtered.map((item, i) => (
handleSelect(item)} style={{ display:"grid", gridTemplateColumns:gridCols, gap:"0 8px", padding:"3px 8px", alignItems:"center", cursor:"pointer", borderBottom:`1px solid ${c.border}`, background: item.value === value ? "#E0F2F7" : "transparent" }} onMouseEnter={e => { if(item.value !== value) e.currentTarget.style.background = c.bg; }} onMouseLeave={e => { if(item.value !== value) e.currentTarget.style.background = "transparent"; }} > {cols.map(col => ( {item[col.k] ?? ""} ))}
))}
{loading ? "Loading..." : `${filtered.length} item${filtered.length!==1?"s":""}`} setFilter(e.target.value)} onClick={e => e.stopPropagation()} style={{ fontSize:11, padding:"2px 7px", border:`1px solid ${c.border}`, borderRadius:4, background:c.surface, color:c.text, width:110, outline:"none" }} />
)} {hint &&
{hint}
}
); }; const Input = ({ label, hint, ...p }) => (
{label && } {hint &&
{hint}
}
); const Sel = ({ label, options, ...p }) => (
{label && }
); const Btn = ({ children, variant = "primary", loading, ...p }) => { const s = { primary: { background: c.blue, color: "#fff", border: "none" }, secondary: { background: c.surface, color: c.text, border: `1px solid ${c.border}` }, danger: { background: "transparent", color: c.red, border: `1px solid ${c.red}` }, ghost: { background: "transparent", color: c.textDim, border: "none" }, success: { background: c.green, color: "#fff", border: "none" }, warning: { background: c.amber, color: "#fff", border: "none" }, }; return ( ); }; const SectionHead = ({ children }) => (

{children}

); const Spinner = () => (
Loading…
); const ErrBox = ({ msg }) => msg ? (
{msg}
) : null; const OkBox = ({ msg }) => msg ? (
{msg}
) : null; // ── HelpIcon — ? circle trigger for contextual help popovers ── const HelpIcon = ({ hkey, setHelpKey, theme = "dark" }) => { const [hov, setHov] = useState(false); const borderColor = theme === "light" ? (hov ? "#7A9AB8" : "#C0D8E8") : (hov ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.6)"); const textColor = theme === "light" ? (hov ? "#006D8C" : "#7A9AB8") : (hov ? "#FFFFFF" : "rgba(255,255,255,0.75)"); return ( e.stopPropagation()} onClick={() => setHelpKey(k => k === hkey ? null : hkey)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ width: 13, height: 13, borderRadius: "50%", background: "transparent", border: `1px solid ${borderColor}`, color: textColor, fontSize: 9, fontWeight: 600, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", marginLeft: 5, flexShrink: 0, userSelect: "none", }} >? ); }; // ── HelpPopover — contextual help panel, anchored via fixed positioning ── const HelpPopover = ({ helpKey, setHelpKey }) => { const panelRef = useRef(null); const content = helpKey ? HELP_CONTENT[helpKey] : null; useEffect(() => { if (!helpKey) return; const onDown = e => { if (panelRef.current && !panelRef.current.contains(e.target)) setHelpKey(null); }; const onKey = e => { if (e.key === "Escape") setHelpKey(null); }; document.addEventListener("mousedown", onDown); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); }; }, [helpKey]); if (!content) return null; const pos = content.position || { left: 225, bottom: 140 }; return (
{content.title}
{content.sections.map((s, i) => (
{i > 0 &&
}
{s.heading}
{s.text}
))} {content.learnMore && (
Learn more →
)}
); }; // ── CollapsibleSection ── function CollapsibleSection({ title, defaultOpen = true, alwaysOpen = false, children }) { const [open, setOpen] = useState(defaultOpen); if (alwaysOpen) { return (
{title}
{children}
); } return (
{open && children}
); } // ── GroupAutocomplete ── function GroupAutocomplete({ value, groups, onChange, tabIndex }) { // value = group name string; onChange(name) const [open, setOpen] = useState(false); const [input, setInput] = useState(value || ""); const ref = useRef(null); useEffect(() => { setInput(value || ""); }, [value]); useEffect(() => { const handler = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); const matches = (groups || []).filter(g => !input || g.GroupName.toLowerCase().includes(input.toLowerCase()) ).slice(0, 8); const select = g => { onChange(g.GroupName); setInput(g.GroupName); setOpen(false); }; const clear = () => { onChange(""); setInput(""); }; return (
setOpen(true)} onChange={e => { setInput(e.target.value); onChange(e.target.value); setOpen(true); }} placeholder="Type or select group…" tabIndex={tabIndex} style={{ background: c.surface, border: `1px solid ${c.border}`, borderRadius: 6, padding: "8px 28px 8px 12px", color: c.text, fontSize: 13, fontFamily: "inherit", outline: "none", width: "100%" }} /> {input && ( )} {open && matches.length > 0 && (
{matches.map(g => (
select(g)} style={{ padding: "8px 12px", cursor: "pointer", display: "flex", alignItems: "center", gap: 8, fontSize: 12 }} onMouseEnter={e => e.currentTarget.style.background = c.surfaceAlt} onMouseLeave={e => e.currentTarget.style.background = ""}> {g.GroupName} {g.MonitorCount} monitors
))}
)}
); } // ── Tabs ── const ADMIN_TABS = [ { key: "dashboard", label: "Dashboard", icon: "◉" }, { key: "monitors", label: "Monitors", icon: "⬡" }, { key: "topology", label: "Topology", icon: "⬡" }, { key: "synthetic", label: "Synthetic", icon: "⬡" }, { key: "alerts", label: "Alerts", icon: "!" }, { key: "logs", label: "Logs", icon: "☰" }, { key: "reports", label: "Reports", icon: "📋" }, { key: "config", label: "Config", icon: "⚙" }, { key: "agents", label: "Agents", icon: "▣" }, { key: "users", label: "Users", icon: "👤" }, { key: "profile", label: "My Profile", icon: "🔑" }, ]; const USER_TABS = [ { key: "dashboard", label: "Dashboard", icon: "◉" }, { key: "monitors", label: "Monitors", icon: "⬡" }, { key: "topology", label: "Topology", icon: "⬡" }, { key: "synthetic", label: "Synthetic", icon: "⬡" }, { key: "alerts", label: "Alerts", icon: "!" }, { key: "logs", label: "Logs", icon: "☰" }, { key: "reports", label: "Reports", icon: "📋" }, { key: "profile", label: "My Profile", icon: "🔑" }, ]; const VIEWER_TABS = [ { key: "dashboard", label: "Dashboard", icon: "◉" }, { key: "monitors", label: "Monitors", icon: "⬡" }, { key: "topology", label: "Topology", icon: "⬡" }, { key: "alerts", label: "Alerts", icon: "!" }, { key: "logs", label: "Logs", icon: "☰" }, { key: "profile", label: "My Profile", icon: "🔑" }, ]; // ── API helper ── function useApi(token, onUnauthorized) { return useCallback(async (method, path, body, signal) => { const headers = { "Content-Type": "application/json" }; if (token) headers["Authorization"] = `Bearer ${token}`; const res = await fetch(`${API}${path}`, { method, headers, body: body !== undefined ? JSON.stringify(body) : undefined, signal, }); if (res.status === 401) { localStorage.removeItem("op1_token"); localStorage.removeItem("op1_user"); localStorage.setItem("op1_session_expired", "true"); if (onUnauthorized) onUnauthorized(); throw new Error("Session expired"); } if (res.status === 204) return null; const text = await res.text(); let data; try { data = text ? JSON.parse(text) : null; } catch { data = text; } if (!res.ok) throw new Error(data?.title || data?.message || data?.Error || `HTTP ${res.status}`); return data; }, [token, onUnauthorized]); } // ── Sidebar nav button ── function TabBtn({ t, active, onClick, api }) { const [alertCount, setAlertCount] = useState(0); const [hov, setHov] = useState(false); useEffect(() => { if (t.key !== "alerts" || !api) return; api("GET", "/logs/alerts?unresolvedOnly=true&top=1000") .then(r => setAlertCount(Array.isArray(r) ? r.length : 0)) .catch(() => {}); }, [t.key, api]); return ( ); } // ── Group delete trash icon button ── const GroupDeleteBtn = ({ onClick }) => { const [hov, setHov] = useState(false); return ( ); }; // ── Add Monitor sidebar sub-item ── const AddMonitorNavItem = ({ active, onClick }) => { const [hov, setHov] = useState(false); return ( ); }; // ── Server Health Widget (sidebar bottom) ──────────────────────────────── function ServerHealthWidget({ api, setHelpKey }) { const [health, setHealth] = useState(null); const [unavail, setUnavail] = useState(false); const [lastUpdated, setLastUpdated] = useState(null); const fetchHealth = useCallback(() => { api("GET", "/dashboard/health") .then(d => { setHealth(d); setUnavail(false); setLastUpdated(new Date()); }) .catch(() => { setUnavail(true); }); }, [api]); useEffect(() => { fetchHealth(); const id = setInterval(fetchHealth, 30000); return () => clearInterval(id); }, [fetchHealth]); const barColor = pct => pct > 85 ? "#D95C5C" : pct > 70 ? "#E89A2E" : "#008C6F"; const statusDot = !health ? "#7A9AB8" : (health.CpuPercent > 85 || (health.SystemMemoryPercent ?? health.MemoryPercent) > 85 || (health.DiskPercent ?? 0) > 85 || health.DbStatus === "error") ? "#D95C5C" : (health.CpuPercent > 70 || (health.SystemMemoryPercent ?? health.MemoryPercent) > 70 || (health.DiskPercent ?? 0) > 70 || health.DbStatus === "slow") ? "#E89A2E" : "#008C6F"; const updatedStr = lastUpdated ? lastUpdated.toLocaleTimeString([], { hour:"2-digit", minute:"2-digit", second:"2-digit" }) : null; return (
OP1 Server Health
{setHelpKey && } {updatedStr && {updatedStr}}
{unavail ? (
Unavailable
) : !health ? (
Loading…
) : (
{[ { label:"CPU", pct: health.CpuPercent, sub: null }, { label:"System Mem", pct: health.SystemMemoryPercent ?? health.MemoryPercent, sub: health.SystemMemoryTotalMb != null ? `${(health.SystemMemoryUsedMb/1024).toFixed(1)}gb used of ${(health.SystemMemoryTotalMb/1024).toFixed(1)}gb` : null }, { label:"App Mem", pct: health.AppMemoryPercent ?? 0, sub: health.AppMemoryMb != null ? `${health.AppMemoryMb}mb (OP1 process)` : null }, { label:"Disk", pct: health.DiskPercent ?? 0, sub: health.DiskGB || null }, ].map(row => (
{row.label}
{row.pct}%
{row.sub &&
{row.sub}
}
))}
Database {health.DbResponseMs >= 0 ? `${health.DbResponseMs}ms` : "—"} · {health.DbStatus === "online" ? "Online" : health.DbStatus === "slow" ? "Slow" : "Error"}
{health.DbName && (
{health.DbName} · {health.DbHost}
)}
Checks/min {health.ChecksPerMin ?? "—"}
)}
); } // ═══════════════════════════════════════════════════════════════════ // MAIN APP // ═══════════════════════════════════════════════════════════════════ function OpsPortalApp() { const [token, setToken] = useState(() => localStorage.getItem("op1_token") || ""); const [user, setUser] = useState(() => { try { return JSON.parse(localStorage.getItem("op1_user") || "null"); } catch { return null; } }); const [tab, setTab] = useState("dashboard"); const navInterceptRef = useRef(null); const pendingAddMonitorRef = useRef(false); const [addMonitorActive, setAddMonitorActive] = useState(false); const handleTabClick = (key) => { if (key === "monitors") { setAddMonitorActive(false); setMonitorsNav({}); } if (navInterceptRef.current) navInterceptRef.current(key); else setTab(key); }; useEffect(() => { if (tab !== "monitors") setAddMonitorActive(false); }, [tab]); const [helpKey, setHelpKey] = useState(null); const [loginForm, setLoginForm] = useState({ email: "", password: "", rememberMe: false }); const [loginStep, setLoginStep] = useState("login"); const [mfaChallenge, setMfaChallenge] = useState(""); const [mfaCode, setMfaCode] = useState(""); const [ssoProviders, setSsoProviders] = useState([]); const [loginErr, setLoginErr] = useState(""); const [loginLoading, setLoginLoading] = useState(false); const [changePassForm, setChangePassForm] = useState({ current: "", newPass: "", confirm: "" }); const [changePassErr, setChangePassErr] = useState(""); const [sessionExpired, setSessionExpired] = useState(() => { const f = localStorage.getItem("op1_session_expired"); if (f) { localStorage.removeItem("op1_session_expired"); return true; } return false; }); const handleUnauthorized = useCallback(() => { setToken(""); setUser(null); setSessionExpired(true); }, []); const api = useApi(token, handleUnauthorized); // ── Monitoring control state ── const [monCtrl, setMonCtrl] = useState(null); const [machines, setMachines] = useState([]); const [pausePopover, setPausePopover] = useState(false); const [pauseReason, setPauseReason] = useState(""); const [pauseBusy, setPauseBusy] = useState(false); const currentMachine = monCtrl?.currentMachine || ""; const currentCtrl = monCtrl?.machines?.find(m => m.MachineName === currentMachine); const isPaused = currentCtrl ? !currentCtrl.IsActive : false; const loadMonCtrl = useCallback(() => { if (!token) return; api("GET", "/config/monitoring-control") .then(r => { setMonCtrl(r); setMachines(r?.machines || []); }) .catch(() => {}); }, [api, token]); useEffect(() => { loadMonCtrl(); const id = setInterval(loadMonCtrl, 30000); return () => clearInterval(id); }, [loadMonCtrl]); const togglePause = async () => { setPauseBusy(true); try { await api("POST", "/config/monitoring-control/toggle", { MachineName: currentMachine, IsActive: isPaused, Reason: isPaused ? null : (pauseReason || "Manual pause"), }); setPausePopover(false); setPauseReason(""); loadMonCtrl(); } catch(e) { /* ignore */ } finally { setPauseBusy(false); } }; useEffect(() => { fetch(`${API}/auth/sso/providers`) .then(r => r.ok ? r.json() : []) .then(setSsoProviders) .catch(() => {}); }, []); const saveSession = (tok, usr) => { localStorage.setItem("op1_token", tok); localStorage.setItem("op1_user", JSON.stringify(usr)); setToken(tok); setUser(usr); setLoginStep("login"); setSessionExpired(false); }; const handleLogin = async () => { setLoginErr(""); setLoginLoading(true); try { const r = await fetch(`${API}/auth/login`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ Email: loginForm.email, Password: loginForm.password, RememberMe: loginForm.rememberMe }), }); const data = await r.json(); if (!r.ok) { setLoginErr(data?.title || data?.Error || "Login failed"); return; } if (data.MFARequired) { setMfaChallenge(data.MFAChallenge); setLoginStep("mfa"); return; } if (data.MustChangePassword) { saveSession(data.Token, { UserID: data.UserID, DisplayName: data.DisplayName, RoleName: data.RoleName, Username: data.Username }); setLoginStep("changepass"); return; } saveSession(data.Token, { UserID: data.UserID, DisplayName: data.DisplayName, RoleName: data.RoleName, Username: data.Username }); } catch (e) { setLoginErr(e.message); } finally { setLoginLoading(false); } }; const handleMfa = async () => { setLoginErr(""); setLoginLoading(true); try { const r = await fetch(`${API}/auth/mfa-verify`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ MFAChallenge: mfaChallenge, Code: mfaCode }), }); const data = await r.json(); if (!r.ok) { setLoginErr(data?.title || data?.Error || "MFA failed"); return; } if (data.MustChangePassword) { saveSession(data.Token, { UserID: data.UserID, DisplayName: data.DisplayName, RoleName: data.RoleName, Username: data.Username }); setLoginStep("changepass"); return; } saveSession(data.Token, { UserID: data.UserID, DisplayName: data.DisplayName, RoleName: data.RoleName, Username: data.Username }); } catch (e) { setLoginErr(e.message); } finally { setLoginLoading(false); } }; const handleChangePass = async () => { if (changePassForm.newPass !== changePassForm.confirm) { setChangePassErr("Passwords do not match"); return; } setChangePassErr(""); setLoginLoading(true); try { await api("POST", "/auth/change-password", { CurrentPassword: changePassForm.current, NewPassword: changePassForm.newPass, ConfirmPassword: changePassForm.confirm }); setLoginStep("login"); setLoginForm(p => ({ ...p, password: "" })); } catch (e) { setChangePassErr(e.message); } finally { setLoginLoading(false); } }; const handleLogout = async () => { try { await api("POST", "/auth/logout", {}); } catch {} localStorage.removeItem("op1_token"); localStorage.removeItem("op1_user"); setToken(""); setUser(null); setTab("dashboard"); setLoginStep("login"); }; const role = user?.RoleName || ""; const isAdmin = role === "Admin"; const isUser = role === "User" || role === "Operator"; const tabs = isAdmin ? ADMIN_TABS : isUser ? USER_TABS : VIEWER_TABS; const canManageMonitors = isAdmin || isUser; const canAckAlerts = isAdmin || isUser; const canManageUsers = isAdmin; const canManageConfig = isAdmin; // Navigation state for cross-view navigation const [monitorsNav, setMonitorsNav] = useState({}); const [syntheticNav, setSyntheticNav] = useState({}); const navigateToSynthetic = (flowId) => { setSyntheticNav({ editFlowId: flowId }); setTab("synthetic"); }; const navigateToSyntheticResults = (flowId, flowResultId, autodiagnose) => { setSyntheticNav({ resultsFlowId: flowId, resultsResultId: flowResultId, autodiagnose: !!autodiagnose }); setTab("synthetic"); }; const navigateToMonitors = (groupId, editId, editMonitor, options) => { setMonitorsNav({ groupId: groupId || null, editId: editId || null, editMonitor: editMonitor || null, ...(options||{}) }); setTab("monitors"); }; // Wrapped navigate passed to MonitorsView — handles pending "open add form" after dirty-discard const handleMonitorFormNavigate = useCallback((key) => { if (key === "correlation analysis") return; // onClose handles subView; stay on monitors tab if (pendingAddMonitorRef.current && key === "monitors") { setMonitorsNav({ openAdd: true }); setAddMonitorActive(true); pendingAddMonitorRef.current = false; } setTab(key); }, []); const handleAddMonitorClick = () => { if (navInterceptRef.current) { // Dirty form is open — queue the openAdd action, then trigger dirty check pendingAddMonitorRef.current = true; navInterceptRef.current("monitors"); } else { setMonitorsNav({ openAdd: true }); setAddMonitorActive(true); setTab("monitors"); } }; const GLOBAL_STYLES = ` @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @keyframes slideIn { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} } @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } input:focus, select:focus { border-color:${c.blue}!important; box-shadow:0 0 0 3px rgba(0,109,140,0.12)!important; } button:hover { opacity:.85; } ::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:${c.surfaceAlt}; } ::-webkit-scrollbar-thumb { background:${c.border}; border-radius:3px; } input, select, textarea { color-scheme: light; } /* White panel overrides — form page light panels */ .dp label { color: #4A4A4A !important; } .dp .cs-title { color: #1A1A1A !important; } .dp .cs-btn > span:last-child { color: #7A9AB8 !important; } .dp select { background:#FFFFFF; color:#1A1A1A; border-color:#C0D8E8; } .dp input[type=text],.dp input[type=number],.dp input[type=email],.dp input[type=password] { background:#FFFFFF; color:#1A1A1A; border-color:#C0D8E8; } .dp textarea { background:#FFFFFF; color:#1A1A1A; border-color:#C0D8E8; } /* Clickable monitor row hover */ .mon-row:hover { background:#F8FAFC !important; cursor:pointer; } `; // ── LOGIN / MFA / CHANGE-PASS SCREENS ── if (!user || loginStep === "mfa" || loginStep === "changepass") { return (
{loginStep === "changepass" && (
Change Password Required

You must set a new password before continuing.

setChangePassForm(p => ({...p, current:e.target.value}))} /> setChangePassForm(p => ({...p, newPass:e.target.value}))} /> setChangePassForm(p => ({...p, confirm:e.target.value}))} onKeyDown={e => e.key==="Enter" && handleChangePass()} /> Set New Password
)} {loginStep === "mfa" && (
Two-Factor Authentication

Enter the 6-digit code from your authenticator app.

setMfaCode(e.target.value)} onKeyDown={e => e.key==="Enter" && handleMfa()} style={{ textAlign:"center", fontSize:22, letterSpacing:"0.3em" }} /> Verify { setLoginStep("login"); setMfaCode(""); setLoginErr(""); }} style={{ width:"100%", fontSize:11 }}>← Back
)} {loginStep === "login" && ( {sessionExpired && (
Your session has expired. Please sign in to continue.
)}
OP1

OP1 Operations Portal

v1.0 — Operations Monitoring Platform

setLoginForm(p => ({...p, email:e.target.value}))} onKeyDown={e => e.key==="Enter" && handleLogin()} /> setLoginForm(p => ({...p, password:e.target.value}))} onKeyDown={e => e.key==="Enter" && handleLogin()} /> Sign In
{ssoProviders.length > 0 && (
— or sign in with —
{ssoProviders.map(p => ( window.location.href=`${API}/auth/sso/initiate/${p.ConfigID}`} style={{ flex:"1 1 auto" }}> {p.DisplayName || p.Provider} ))}
)}
© 2026 OP1 Operations Portal · All rights reserved.
 )}
); } // ═══ AUTHENTICATED SHELL ═══ return (
{/* ── Sidebar ── */} {/* ── Contextual help popovers ── */} {/* ── Main content ── */}
{/* Pause banner */} {isPaused && (
⚠ Monitoring paused by {currentCtrl?.PausedBy || "unknown"} at {currentCtrl?.PausedAt ? parseUTC(currentCtrl.PausedAt)?.toLocaleString() : "—"} — all checks suspended on {currentCtrl?.MachineAlias || currentMachine} {canManageConfig && }
)}
{/* Topbar monitoring status indicator — hidden on all branded screens (each has its own pill) */} {!["dashboard","monitors","topology","alerts","logs","reports","config","agents","users","profile"].includes(tab) && canManageConfig && monCtrl && (
{pausePopover && (
{isPaused ? "Resume Monitoring" : "Pause Monitoring"}
Machine: {currentMachine}
{!isPaused && ( setPauseReason(e.target.value)} placeholder="e.g. Maintenance window" style={{ marginBottom:10, fontSize:11 }} /> )} {isPaused && currentCtrl?.PauseReason && (
Pause reason: {currentCtrl.PauseReason}
)} {isPaused && currentCtrl?.PausedAt && (
Paused at: {parseUTC(currentCtrl.PausedAt)?.toLocaleString()}
)}
{isPaused ? "Resume" : "Pause"} { setPausePopover(false); setPauseReason(""); }} style={{ fontSize:11 }}>Cancel
)}
)} {tab==="dashboard" && setTab("alerts")} machines={machines} currentMachine={currentMachine} monitoringControl={{ isPaused, canManageConfig, monCtrl, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl }} />} {tab==="monitors" && setMonitorsNav({})} navInterceptRef={navInterceptRef} onNavigate={handleMonitorFormNavigate} machines={machines} currentMachine={currentMachine} setHelpKey={setHelpKey} monitoringControl={{ isPaused, canManageConfig, monCtrl, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl }} onNavigateSynthetic={navigateToSynthetic} />} {tab==="topology" && navigateToMonitors(null,id,null,{origin:"Topology"})} />} {tab==="synthetic" && setSyntheticNav({})} />} {tab==="alerts" && navigateToMonitors(null,id,null,{origin:"Alerts"})} onNavigateSynthetic={navigateToSyntheticResults} monitoringControl={{ isPaused, canManageConfig, monCtrl, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl }} />} {tab==="logs" && navigateToMonitors(null,id,null,{origin:"Logs"})} monitoringControl={{ isPaused, canManageConfig, monCtrl, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl }} />} {tab==="reports" && navigateToMonitors(null,id,null,{origin:"Reports"})} monitoringControl={{ isPaused, canManageConfig, monCtrl, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl }} />} {tab==="config" && canManageConfig && } {tab==="agents" && isAdmin && } {tab==="users" && canManageUsers && } {tab==="profile" && }
); } // ═══ DASHBOARD ═══ // ── Dashboard chart renderer (top-level, no inner functions) ── function renderDashChart(chartType, canvasEl, summary, responseTrend, alertTrend, uptimeTrend) { if (!canvasEl || typeof Chart === "undefined") return null; const s = summary; const allMonitors = s.Monitors || []; const groupSummaries = s.GroupSummaries || []; const FONT = { size:10, family:"ui-sans-serif, system-ui, sans-serif" }; if (chartType === "status-donut") { return new Chart(canvasEl, { type: "doughnut", data: { labels: ["Healthy","Warning","Critical","Disabled"], datasets: [{ data:[s.HealthyCount||0,s.WarningCount||0,s.CriticalCount||0,s.UnknownCount||0], backgroundColor:["#86efac","#fcd34d","#fca5a5","#e2e8f0"], borderWidth:0, hoverOffset:4 }] }, options: { responsive:true, maintainAspectRatio:false, cutout:"72%", plugins:{ legend:{ display:false } } } }); } if (chartType === "type-health-bar") { const types = ["Server","Application","Database","Website","Synthetic"]; const healthy = types.map(t => allMonitors.filter(m=>m.IsEnabled!==false&&m.MonitorType===t&&(m.EffectiveStatus||m.CurrentStatus)==="healthy").length); const warning = types.map(t => allMonitors.filter(m=>m.IsEnabled!==false&&m.MonitorType===t&&(m.EffectiveStatus||m.CurrentStatus)==="warning").length); const critical = types.map(t => allMonitors.filter(m=>m.IsEnabled!==false&&m.MonitorType===t&&(m.EffectiveStatus||m.CurrentStatus)==="critical").length); return new Chart(canvasEl, { type: "bar", data: { labels: types, datasets: [ { label:"Healthy", data:healthy, backgroundColor:"#86efac", borderRadius:2, stack:"s" }, { label:"Warning", data:warning, backgroundColor:"#fcd34d", borderRadius:2, stack:"s" }, { label:"Critical",data:critical,backgroundColor:"#fca5a5", borderRadius:2, stack:"s" }, ]}, options: { indexAxis:"y", responsive:true, maintainAspectRatio:false, layout:{ padding:{ bottom:8 } }, plugins:{ legend:{ display:false } }, scales:{ x:{ stacked:true, grid:{ color:"rgba(0,0,0,0.04)" }, ticks:{ stepSize:1, callback:v=>Number.isInteger(v)?v:null, font:FONT } }, y:{ stacked:true, grid:{ display:false }, ticks:{ font:FONT } } } } }); } if (chartType === "group-health-bar") { const labels = groupSummaries.map(g=>g.GroupName||"Ungrouped"); const colors = groupSummaries.map(g=>g.CriticalCount>0?"#fca5a5":g.WarningCount>0?"#fcd34d":"#86efac"); const vals = groupSummaries.map(g=>g.TotalCount||0); return new Chart(canvasEl, { type: "bar", data: { labels, datasets:[{ data:vals, backgroundColor:colors, borderRadius:3 }] }, options: { indexAxis:"y", responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ x:{ grid:{ color:"rgba(0,0,0,0.04)" }, ticks:{ stepSize:1, callback:v=>Number.isInteger(v)?v:null, font:FONT } }, y:{ grid:{ display:false }, ticks:{ font:FONT } } } } }); } if (chartType === "slowest-monitors") { const sorted = [...allMonitors].filter(m=>m.LastResponseTimeMs!=null).sort((a,b)=>b.LastResponseTimeMs-a.LastResponseTimeMs).slice(0,5); return new Chart(canvasEl, { type: "bar", data: { labels:sorted.map(m=>m.MonitorName), datasets:[{ data:sorted.map(m=>m.LastResponseTimeMs), backgroundColor:"#3b82f6", borderRadius:3 }] }, options: { indexAxis:"y", responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ x:{ grid:{ color:"rgba(0,0,0,0.04)" }, ticks:{ callback:v=>v+"ms", font:FONT } }, y:{ grid:{ display:false }, ticks:{ font:FONT } } } } }); } if (chartType === "most-alerted") { const sorted = [...allMonitors].filter(m=>(m.OpenAlerts||0)>0).sort((a,b)=>(b.OpenAlerts||0)-(a.OpenAlerts||0)).slice(0,5); if (sorted.length === 0) return null; return new Chart(canvasEl, { type: "bar", data: { labels:sorted.map(m=>m.MonitorName), datasets:[{ data:sorted.map(m=>m.OpenAlerts||0), backgroundColor:"#fca5a5", borderRadius:3 }] }, options: { indexAxis:"y", responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ x:{ grid:{ color:"rgba(0,0,0,0.04)" }, ticks:{ stepSize:1, callback:v=>Number.isInteger(v)?v:null, font:FONT } }, y:{ grid:{ display:false }, ticks:{ font:FONT } } } } }); } if (chartType === "response-trend" && responseTrend.length > 0) { // Sort ascending: oldest (left) → newest (right) const sorted = [...responseTrend].sort((a, b) => { if ((a.date||"") !== (b.date||"")) return (a.date||"") < (b.date||"") ? -1 : 1; return (a.hour||0) - (b.hour||0); }); const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // d.date arrives as a full datetime string (e.g. "2026-03-30T00:00:00") because // Dapper maps SQL date → C# DateTime. Use the date portion only for parsing. const dateKey = (d) => typeof d.date === "string" ? d.date.slice(0, 10) : ""; const rtLabels = sorted.map((d, i) => { const hh = String(d.hour ?? 0).padStart(2,"0") + ":00"; const dk = dateKey(d); const prevDk = i > 0 ? dateKey(sorted[i-1]) : null; if (dk && (!prevDk || dk !== prevDk)) { const dt = new Date(dk + "T00:00:00"); if (!isNaN(dt.getTime())) return `${MONTHS[dt.getMonth()]} ${dt.getDate()} ${hh}`; } return hh; }); return new Chart(canvasEl, { type: "line", data: { labels: rtLabels, datasets:[{ data: sorted.map(d=>d.avgMs), borderColor:"#3b82f6", backgroundColor:"rgba(59,130,246,0.06)", fill:true, tension:0.4, pointRadius:3, borderWidth:2 }] }, options: { responsive:true, maintainAspectRatio:false, layout:{ padding:{ bottom:4 } }, plugins:{ legend:{ display:false }, title:{ display:true, text:"Hourly avg \u2014 last 24h", font:FONT, color:"#94a3b8", padding:{ bottom:0 } } }, scales:{ y:{ ticks:{ callback:v=>v+"ms", font:FONT }, grid:{ color:"rgba(0,0,0,0.04)" } }, x:{ grid:{ display:false }, ticks:{ maxTicksLimit:8, font:FONT, maxRotation:30 }, title:{ display:true, text:"\u2190 24 hours ago\u2003\u2003Now \u2192", font:{ size:9, family:FONT.family }, color:"#94a3b8", padding:{ top:2 } } } } } }); } if (chartType === "alert-trend" && alertTrend.length > 0) { return new Chart(canvasEl, { type: "bar", data: { labels:alertTrend.map(d=>d.day), datasets:[{ data:alertTrend.map(d=>d.count), backgroundColor:"#fca5a5", borderRadius:3 }] }, options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ y:{ ticks:{ stepSize:1, callback:v=>Number.isInteger(v)?v:null, font:FONT }, grid:{ color:"rgba(0,0,0,0.04)" } }, x:{ grid:{ display:false }, ticks:{ font:FONT } } } } }); } if (chartType === "uptime-trend" && uptimeTrend.length > 0) { return new Chart(canvasEl, { type: "line", data: { labels:uptimeTrend.map(d=>d.day), datasets:[{ data:uptimeTrend.map(d=>d.avgUptime), borderColor:"#86efac", backgroundColor:"rgba(134,239,172,0.1)", fill:true, tension:0.4, pointRadius:3, borderWidth:2 }] }, options: { responsive:true, maintainAspectRatio:false, layout:{ padding:{ bottom:8 } }, plugins:{ legend:{ display:false } }, scales:{ y:{ min:0, max:100, ticks:{ callback:v=>v+"%", font:FONT }, grid:{ color:"rgba(0,0,0,0.04)" } }, x:{ grid:{ display:false }, ticks:{ font:FONT } } } } }); } return null; } function computeSparkPoints(trend) { if (!trend || trend.length < 2) return null; const vals = trend.map(d => Number(d.avgMs) || 0); const mn = Math.min(...vals), mx = Math.max(...vals); const range = mx - mn || 1; const W = 120, yMin = 3, yMax = 21; return trend.map((d, i) => { const x = Math.round((i / (trend.length - 1)) * W); const y = Math.round(yMax - ((Number(d.avgMs) || 0) - mn) / range * (yMax - yMin)); return `${x},${y}`; }).join(" "); } const CHART_LIBRARY = [ { id:"status-donut", label:"Status Donut", alwaysData:true }, { id:"type-health-bar", label:"Health by Type", alwaysData:true }, { id:"group-health-bar", label:"Health by Group", alwaysData:true }, { id:"slowest-monitors", label:"Slowest Monitors", alwaysData:true }, { id:"most-alerted", label:"Most Alerted", alwaysData:false }, { id:"response-trend", label:"Response Trend (24h)", alwaysData:false }, { id:"alert-trend", label:"Alert Trend (7d)", alwaysData:false }, { id:"uptime-trend", label:"Uptime Trend (7d)", alwaysData:false }, ]; const CHART_DEFAULTS = ["status-donut","type-health-bar","group-health-bar","response-trend"]; function DashboardView({ api, onNavigate, onNavigateAlerts, machines, monitoringControl }) { const [summary, setSummary] = useState(null); const [responseTrend, setRespTrend] = useState([]); const [alertTrend, setAlertTrend] = useState([]); const [uptimeTrend, setUptimeTrend] = useState([]); const [groupTrends, setGroupTrends] = useState({}); const [err, setErr] = useState(""); const [countdown, setCountdown] = useState(30); const [refreshing, setRefreshing] = useState(false); const [flashUpdated, setFlashUpdated] = useState(false); const [refreshInterval, setRefreshInterval] = useState(() => { const saved = localStorage.getItem("op1_refresh_interval"); return saved ? parseInt(saved, 10) : 30; }); const [slots, setSlots] = useState(() => [ localStorage.getItem("op1_chart_slot_1") || CHART_DEFAULTS[0], localStorage.getItem("op1_chart_slot_2") || CHART_DEFAULTS[1], localStorage.getItem("op1_chart_slot_3") || CHART_DEFAULTS[2], localStorage.getItem("op1_chart_slot_4") || CHART_DEFAULTS[3], ]); const [openPicker, setOpenPicker] = useState(null); const [recentAlerts, setRecentAlerts] = useState([]); const [runningGroup, setRunningGroup] = useState(null); const [hovStat, setHovStat] = useState(null); const [aiSummaryOpen, setAiSummaryOpen] = useState(false); const [aiSummaryLoading, setAiSummaryLoading] = useState(false); const [aiSummaryData, setAiSummaryData] = useState(null); const [aiSummaryError, setAiSummaryError] = useState(null); const mc = monitoringControl || {}; const fetchAiSummary = useCallback(async () => { setAiSummaryLoading(true); setAiSummaryError(null); try { const result = await api("POST", "/dashboard/ai-summary"); setAiSummaryData(result?.summary ?? null); } catch(e) { setAiSummaryError(e.message); } finally { setAiSummaryLoading(false); } }, [api]); const handleAiPillClick = useCallback(() => { if (!aiSummaryOpen) { setAiSummaryOpen(true); if (!aiSummaryData) fetchAiSummary(); } else { setAiSummaryOpen(false); } }, [aiSummaryOpen, aiSummaryData, fetchAiSummary]); const canvas0 = useRef(null); const canvas1 = useRef(null); const canvas2 = useRef(null); const canvas3 = useRef(null); const chart0 = useRef(null); const chart1 = useRef(null); const chart2 = useRef(null); const chart3 = useRef(null); const canvasRefs = [canvas0, canvas1, canvas2, canvas3]; const chartRefs = [chart0, chart1, chart2, chart3]; const fetchData = useCallback((signal) => { setRefreshing(true); Promise.all([ api("GET", "/dashboard/summary", undefined, signal), api("GET", "/dashboard/response-trend", undefined, signal).catch(() => []), api("GET", "/dashboard/alert-trend", undefined, signal).catch(() => []), api("GET", "/dashboard/uptime-trend", undefined, signal).catch(() => []), api("GET", "/alerts/recent?top=20", undefined, signal).catch(() => []), ]).then(([s, rt, at, ut, ra]) => { setSummary(s); setRespTrend(Array.isArray(rt) ? rt : []); setAlertTrend(Array.isArray(at) ? at : []); setUptimeTrend(Array.isArray(ut) ? ut : []); setRecentAlerts(Array.isArray(ra) ? ra : []); setErr(""); setRefreshing(false); setFlashUpdated(true); setTimeout(() => setFlashUpdated(false), 1000); // Phase 2: fetch group trends in parallel const groupIds = [0, ...((s && s.GroupSummaries) || []).map(g => g.GroupID)]; Promise.all( groupIds.map(id => api("GET", `/dashboard/group-trend/${id}`, undefined, signal).catch(() => [])) ).then(results => { const gt = {}; groupIds.forEach((id, i) => { gt[id] = Array.isArray(results[i]) ? results[i] : []; }); setGroupTrends(gt); }).catch(() => {}); }).catch(e => { if (e.name === "AbortError") return; setRefreshing(false); setSummary(prev => { if (!prev) setErr(e.message); return prev; }); }); }, [api]); useEffect(() => { setCountdown(refreshInterval); }, [refreshInterval]); useEffect(() => { const ctrl = new AbortController(); fetchData(ctrl.signal); const pollId = setInterval(() => { setCountdown(refreshInterval); fetchData(ctrl.signal); }, refreshInterval * 1000); const onVisible = () => { if (document.visibilityState === "visible") { setCountdown(refreshInterval); fetchData(ctrl.signal); } }; document.addEventListener("visibilitychange", onVisible); return () => { ctrl.abort(); clearInterval(pollId); document.removeEventListener("visibilitychange", onVisible); }; }, [fetchData, refreshInterval]); useEffect(() => { const id = setInterval(() => setCountdown(n => n > 0 ? n - 1 : 0), 1000); return () => clearInterval(id); }, []); useEffect(() => { if (!summary || typeof Chart === "undefined") return; const destroyAll = () => { chartRefs.forEach(r => { if (r.current) { r.current.destroy(); r.current = null; } }); }; destroyAll(); slots.forEach((chartType, i) => { if (!canvasRefs[i].current) return; chartRefs[i].current = renderDashChart(chartType, canvasRefs[i].current, summary, responseTrend, alertTrend, uptimeTrend); }); return destroyAll; }, [summary, responseTrend, alertTrend, uptimeTrend, slots]); // Close picker on outside click useEffect(() => { if (openPicker === null) return; const handler = (e) => { if (!e.target.closest("[data-chartpicker]")) setOpenPicker(null); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [openPicker]); // Inject ticker keyframe CSS once useEffect(() => { const id = "op1-ticker-kf"; if (!document.getElementById(id)) { const el = document.createElement("style"); el.id = id; el.textContent = "@keyframes op1-ticker { from { transform:translateX(0) } to { transform:translateX(-50%) } }"; document.head.appendChild(el); } }, []); const hasData = (chartType) => { const lib = CHART_LIBRARY.find(c => c.id === chartType); if (!lib) return false; if (lib.alwaysData) return true; if (chartType === "most-alerted") return (summary?.Monitors||[]).some(m=>(m.OpenAlerts||0)>0); if (chartType === "response-trend") return responseTrend.length > 0; if (chartType === "alert-trend") return alertTrend.length > 0; if (chartType === "uptime-trend") return uptimeTrend.length > 0; return false; }; const changeSlot = (slotIdx, chartId) => { const newSlots = [...slots]; newSlots[slotIdx] = chartId; setSlots(newSlots); localStorage.setItem(`op1_chart_slot_${slotIdx+1}`, chartId); setOpenPicker(null); }; const handleIntervalChange = (e) => { const v = parseInt(e.target.value, 10); setRefreshInterval(v); localStorage.setItem("op1_refresh_interval", String(v)); }; if (err) return ; if (!summary) return ; const s = summary; const allMonitors = s.Monitors || []; const groupSummaries = s.GroupSummaries || []; const ungroupedMonitors = allMonitors.filter(m => !m.GroupID && !m.GroupName); const hasUngrouped = ungroupedMonitors.length > 0; const ugCritical = ungroupedMonitors.filter(m => m.IsEnabled!==false&&(m.EffectiveStatus||m.CurrentStatus) === "critical").length; const ugWarning = ungroupedMonitors.filter(m => m.IsEnabled!==false&&(m.EffectiveStatus||m.CurrentStatus) === "warning").length; const ugHealthy = ungroupedMonitors.filter(m => m.IsEnabled!==false&&(m.EffectiveStatus||m.CurrentStatus) === "healthy").length; const grpTopBorder = (gs) => gs.CriticalCount>0?"#ef4444":gs.WarningCount>0?"#f59e0b":(gs.UnknownCount>0||gs.TotalCount===0)?"#d1d5db":"#22c55e"; const grpWorstStatus = (gs) => gs.CriticalCount>0?"critical":gs.WarningCount>0?"warning":(gs.UnknownCount>0||gs.TotalCount===0)?"unknown":"healthy"; const statusDotColor = { healthy:"#22c55e", warning:"#f59e0b", critical:"#ef4444", unknown:"#d1d5db" }; const MON_TYPES = ["Server","Application","Database","Website","Synthetic"]; // Ungrouped per-type breakdown — enabled dots first, disabled grey dots after const ugByType = MON_TYPES.map(t => { const en = ungroupedMonitors.filter(m => m.MonitorType === t && m.IsEnabled !== false && m.IsEnabled !== 0); const dis = ungroupedMonitors.filter(m => m.MonitorType === t && (m.IsEnabled === false || m.IsEnabled === 0)); return { type: t, monitors: [...en, ...dis] }; }).filter(x => x.monitors.length > 0); return (
{/* ── Branding header ── */}
OP1
OP1 Operations Portal
Enterprise Monitoring · v1.0.236
{mc.canManageConfig && mc.monCtrl && (
{mc.pausePopover && (
{mc.isPaused ? "Resume Monitoring" : "Pause Monitoring"}
Machine: {mc.currentCtrl?.MachineName}
{!mc.isPaused &&