// ════════════════════════════════════════════════════════════════════════════ // app-config-view.jsx — v1.4.457 // ──────────────────────────────────────────────────────────────────────────── // Extracted from app.jsx in Session 71. Contains the Config screen and its // sub-components: ConfigView, CredentialsTab, MachineManagementSection, and // the MONITOR_DEFAULT_* constants used for system-wide defaults. // // Loading order: MUST load AFTER app.jsx. Depends on shared primitives // (Btn, Card, Badge, ErrBox, OkBox, Spinner, SectionHead, API, c, etc.) // via Babel's shared top-level lexical scope. No window.OP1 boilerplate. // ════════════════════════════════════════════════════════════════════════════ // ═══ CONFIG ═══ const MONITOR_DEFAULT_SECTIONS = [ { label:"General", keys:["default_check_frequency_seconds","default_failure_threshold","default_timeout_ms","default_response_time_warning_ms","default_response_time_critical_ms","default_ssl_expiry_warning_days","default_anomaly_baseline_days"] }, { label:"Thresholds — Infrastructure", keys:["default_cpu_warning_percent","default_cpu_critical_percent","default_memory_warning_percent","default_memory_critical_percent","default_disk_warning_percent","default_disk_critical_percent"] }, { label:"Thresholds — Database", keys:["default_db_query_latency_warning_ms","default_db_query_latency_critical_ms","default_db_connection_pool_warning_pct"] }, { label:"Thresholds — Website", keys:["default_page_load_warning_ms","default_page_load_critical_ms"] }, { label:"Scheduler & Retention", keys:["default_escalation_repeat_minutes","default_retention_hot_days","default_scheduler_refresh_seconds","default_max_concurrent_checks"] }, ]; const MONITOR_DEFAULT_LABELS = { default_check_frequency_seconds:"Check Frequency (seconds)", default_failure_threshold:"Failure Threshold", default_timeout_ms:"Timeout (ms)", default_response_time_warning_ms:"Response Time Warning (ms)", default_response_time_critical_ms:"Response Time Critical (ms)", default_ssl_expiry_warning_days:"SSL Expiry Warning (days)", default_anomaly_baseline_days:"Anomaly Baseline Days", default_cpu_warning_percent:"CPU Warning (%)", default_cpu_critical_percent:"CPU Critical (%)", default_memory_warning_percent:"Memory Warning (%)", default_memory_critical_percent:"Memory Critical (%)", default_disk_warning_percent:"Disk Warning (%)", default_disk_critical_percent:"Disk Critical (%)", default_db_query_latency_warning_ms:"DB Query Latency Warning (ms)", default_db_query_latency_critical_ms:"DB Query Latency Critical (ms)", default_db_connection_pool_warning_pct:"DB Pool Warning (%)", default_page_load_warning_ms:"Page Load Warning (ms)", default_page_load_critical_ms:"Page Load Critical (ms)", default_escalation_repeat_minutes:"Escalation Repeat (minutes)", default_retention_hot_days:"Hot Retention (days)", default_scheduler_refresh_seconds:"Scheduler Refresh (seconds)", default_max_concurrent_checks:"Max Concurrent Checks", }; const MONITOR_DEFAULT_DESC = { default_check_frequency_seconds:"Default check frequency (seconds)", default_failure_threshold:"Consecutive failures before alert", default_timeout_ms:"Check timeout (ms)", default_response_time_warning_ms:"Response time warning threshold (ms)", default_response_time_critical_ms:"Response time critical threshold (ms)", default_ssl_expiry_warning_days:"SSL cert expiry warning (days)", default_anomaly_baseline_days:"Anomaly detection baseline window (days)", default_cpu_warning_percent:"CPU warning threshold (%)", default_cpu_critical_percent:"CPU critical threshold (%)", default_memory_warning_percent:"Memory warning threshold (%)", default_memory_critical_percent:"Memory critical threshold (%)", default_disk_warning_percent:"Disk warning threshold (%)", default_disk_critical_percent:"Disk critical threshold (%)", default_db_query_latency_warning_ms:"DB query latency warning (ms)", default_db_query_latency_critical_ms:"DB query latency critical (ms)", default_db_connection_pool_warning_pct:"DB connection pool warning (%)", default_page_load_warning_ms:"Page load warning (ms)", default_page_load_critical_ms:"Page load critical (ms)", default_escalation_repeat_minutes:"Escalation repeat interval (minutes)", default_retention_hot_days:"Hot tier retention (days)", default_scheduler_refresh_seconds:"Scheduler monitor refresh interval (seconds)", default_max_concurrent_checks:"Max concurrent monitor checks", }; function CredentialsTab({ api }) { const CRED_TYPES = ["Windows","Database","SNMP","SSH","APIKey","Generic"]; const TYPE_COLORS = { Windows: { bg:"#E0F2F7", color:"#006D8C" }, Database: { bg:"#DCF2EA", color:"#008C6F" }, SNMP: { bg:"#FDF3E0", color:"#E89A2E" }, SSH: { bg:"#F0F7FB", color:"#4A4A4A" }, APIKey: { bg:"#FAEAEA", color:"#D95C5C" }, Generic: { bg:"#F5F0E8", color:"#6B6B6B" }, }; const BLANK = { Name:"", CredentialType:"Windows", Username:"", Password:"", Notes:"" }; const [creds, setCreds] = useState([]); const [loading, setLoading] = useState(true); const [err, setErr] = useState(""); const [confirmModal, setConfirmModal] = useState(null); const showConfirm = (msg, onOk) => setConfirmModal({ msg, onOk }); const [ok, setOk] = useState(""); const [form, setForm] = useState(BLANK); const [editId, setEditId] = useState(null); const [showPass, setShowPass] = useState(false); const [busy, setBusy] = useState(false); const load = useCallback(() => { setLoading(true); api("GET", "/credentials") .then(r => { setCreds(Array.isArray(r) ? r : []); setErr(""); }) .catch(e => setErr(e.message)) .finally(() => setLoading(false)); }, [api]); useEffect(() => { load(); }, [load]); const resetForm = () => { setForm(BLANK); setEditId(null); setShowPass(false); }; const startEdit = (c) => { setForm({ Name: c.Name, CredentialType: c.CredentialType, Username: c.Username, Password: "", Notes: c.Notes || "" }); setEditId(c.CredentialID); setShowPass(false); }; const save = async () => { setErr(""); setOk(""); setBusy(true); try { if (editId) { await api("PUT", `/credentials/${editId}`, form); setOk("Credential updated."); } else { await api("POST", "/credentials", form); setOk("Credential created."); } resetForm(); load(); } catch(e) { setErr(e.message); } finally { setBusy(false); } }; const del = (c) => { showConfirm(`Delete credential "${c.Name}"?`, async () => { setErr(""); setOk(""); try { await api("DELETE", `/credentials/${c.CredentialID}`); setOk("Credential deleted."); load(); } catch(e) { setErr(e.message); } }); }; const f = (k, v) => setForm(p => ({ ...p, [k]: v })); const THstyle = { padding:"7px 12px", textAlign:"left", fontSize:11, fontWeight:600, color:"#1A1A1A", textTransform:"uppercase", letterSpacing:"0.05em", position:"sticky", top:0, zIndex:1, background:"#D8CCBA" }; const TDstyle = { padding:"8px 12px", fontSize:12, color:"#1A1A1A", borderBottom:"0.5px solid #f1f5f9" }; return (
Credential Vault {creds.length} stored
{loading ? : creds.length === 0 ? (
No credentials stored. Add one below.
) : ( {["Name","Type","Username","Notes","Monitors","Actions"].map(h => )} {creds.map(c => { const tc = TYPE_COLORS[c.CredentialType] || TYPE_COLORS.Generic; const isEditing = editId === c.CredentialID; return ( ); })}
{h}
{c.Name} {c.CredentialType} {c.Username} {c.Notes || "—"} {c.MonitorCount}
)}
{editId ? "Edit Credential" : "Add Credential"}
f("Name",e.target.value)} placeholder="e.g. DC01 Admin" style={{ width:"100%", fontSize:12, padding:"6px 8px", border:"1px solid #e2e5ea", borderRadius:4, outline:"none" }} />
f("Username",e.target.value)} placeholder="domain\user or username" style={{ width:"100%", fontSize:12, padding:"6px 8px", border:"1px solid #e2e5ea", borderRadius:4, outline:"none" }} />
f("Password",e.target.value)} placeholder={editId ? "Leave blank to keep existing" : "Enter password"} style={{ width:"100%", fontSize:12, padding:"6px 28px 6px 8px", border:"1px solid #e2e5ea", borderRadius:4, outline:"none" }} />
f("Notes",e.target.value)} placeholder="Optional description" style={{ width:"100%", fontSize:12, padding:"6px 8px", border:"1px solid #e2e5ea", borderRadius:4, outline:"none" }} />
{editId && ( )}
{confirmModal && (
{ if(e.target===e.currentTarget) setConfirmModal(null); }}>
{confirmModal.msg}
)}
); } function ConfigView({ api, machines: machinesProp, currentMachine, onMachinesChange, monitoringControl }) { const [configTab, setConfigTab] = useState("notifications"); const [notifCfg, setNotifCfg] = useState([]); const [retPolicies, setRetPolicies] = useState([]); const [monDefaults, setMonDefaults] = useState({}); const [monDefaultsDirty, setMonDefaultsDirty] = useState({}); const [err, setErr] = useState(""); const [ok, setOk] = useState(""); const [confirmModal, setConfirmModal] = useState(null); const showConfirm = (msg, onOk) => setConfirmModal({ msg, onOk }); const [aiCfg, setAiCfg] = useState(null); const [aiCfgLoading, setAiCfgLoading] = useState(false); const [aiCfgSaving, setAiCfgSaving] = useState(false); const [aiCfgSaved, setAiCfgSaved] = useState(false); const [recentAlerts, setRecentAlerts] = useState([]); // ── Notifications tab state ── const [notifChs, setNotifChs] = useState([]); const [notifRecs, setNotifRecs] = useState([]); const [notifSettings, setNotifSettings] = useState({}); const [notifLoading, setNotifLoading] = useState(false); const [notifChannelModal, setNotifChannelModal] = useState(null); const [notifRecipientModal, setNotifRecipientModal] = useState(null); const [notifTestState, setNotifTestState] = useState({}); const [notifSaving, setNotifSaving] = useState(false); const [notifRulesDraft, setNotifRulesDraft] = useState({}); const [notifTestCh, setNotifTestCh] = useState(''); const [notifTestRec, setNotifTestRec] = useState(''); const [notifTestResult, setNotifTestResult] = useState(null); const [notifTestDiag, setNotifTestDiag] = useState({}); const [notifTestResultDiag, setNotifTestResultDiag] = useState(null); const [notifChannelDraft, setNotifChannelDraft] = useState({}); const [notifRecipientDraft, setNotifRecipientDraft] = useState({}); // ── Config Pack state ── const [configPackTab, setConfigPackTab] = useState('export'); const [exportGroups, setExportGroups] = useState([]); const [exportGroupsLoading, setExportGroupsLoading] = useState(false); const [selectedExportGroups, setSelectedExportGroups] = useState(null); const [exportFormat, setExportFormat] = useState('json'); const [exportLastDate, setExportLastDate] = useState(null); const [importFile, setImportFile] = useState(null); const [importFilterGroups, setImportFilterGroups] = useState([]); const [importReview, setImportReview] = useState(null); const [importReviewLoading, setImportReviewLoading] = useState(false); const [importCommitting, setImportCommitting] = useState(false); const [importCommitResult, setImportCommitResult] = useState(null); const [conflictResolution, setConflictResolution] = useState('skip'); // ── Ingest Feeds state ── const [feedsList, setFeedsList] = useState([]); const [feedsLoading, setFeedsLoading] = useState(false); const [feedWizardOpen, setFeedWizardOpen] = useState(false); const feedWizardRef = useRef(null); const [feedWizardStep, setFeedWizardStep] = useState(1); const [feedForm, setFeedForm] = useState({ feedName:'', protocol:'influxdb', notes:'', scrapeInterval:'30', scrapeTimeout:'10' }); const [feedSampleMode, setFeedSampleMode] = useState('file'); const [feedSampleFile, setFeedSampleFile] = useState(null); const [feedSampleJson, setFeedSampleJson] = useState(''); const [feedReviewLoading, setFeedReviewLoading] = useState(false); const [feedReview, setFeedReview] = useState(null); const [feedMappings, setFeedMappings] = useState([]); const [feedConfirmLoading, setFeedConfirmLoading] = useState(false); const [feedConfirmResult, setFeedConfirmResult] = useState(null); const [monitorsForMapping, setMonitorsForMapping] = useState([]); const [scrapeTargets, setScrapeTargets] = useState([]); const [scrapeTargetUrl, setScrapeTargetUrl] = useState(''); const [scrapeTargetCredId, setScrapeTargetCredId] = useState(''); const [scrapeTestResult, setScrapeTestResult] = useState(null); const [scrapeTestLoading, setScrapeTestLoading] = useState(false); const [rawPayloadOpen, setRawPayloadOpen] = useState(null); const [rawPayload, setRawPayload] = useState(null); const [rawPayloadLoading, setRawPayloadLoading] = useState(false); const [credentialsList, setCredentialsList] = useState([]); const [feedCreatedId, setFeedCreatedId] = useState(null); const [scrapeTargetsByFeed, setScrapeTargetsByFeed] = useState({}); const [feedAiOpenId, setFeedAiOpenId] = useState(null); const [feedAiThreads, setFeedAiThreads] = useState({}); const [feedAiInput, setFeedAiInput] = useState({}); const [feedAiLoading, setFeedAiLoading] = useState({}); const [feedIsNewSystem, setFeedIsNewSystem] = useState(false); const [feedTargetGroupId, setFeedTargetGroupId] = useState(null); const [feedNewGroupName, setFeedNewGroupName] = useState(''); const [feedSystemDescription, setFeedSystemDescription] = useState(''); // ── Metric Mappings state ── const [mappingsList, setMappingsList] = useState([]); const [mappingsLoading, setMappingsLoading] = useState(false); const [unresolvedList, setUnresolvedList] = useState([]); const [unresolvedLoading, setUnresolvedLoading] = useState(false); const [mappingAddOpen, setMappingAddOpen] = useState(false); const [mappingForm, setMappingForm] = useState({ protocol:'', pattern:'', monitorId:'' }); const [mappingAddSaving, setMappingAddSaving] = useState(false); const [mappingDeleteId, setMappingDeleteId] = useState(null); const [unresolvedCreateOpen, setUnresolvedCreateOpen] = useState(null); const [unresolvedCreateForm, setUnresolvedCreateForm] = useState({ name:'', subtype:'app-http', groupId:'' }); const [unresolvedCreateSaving, setUnresolvedCreateSaving] = useState(false); const [unresolvedCreateSuccess, setUnresolvedCreateSuccess] = useState(null); const [shProbes, setShProbes] = useState(null); const [shProbesLoading, setShProbesLoading] = useState(false); const [shProbesLastRefresh, setShProbesLastRefresh] = useState(null); const [shIncidents, setShIncidents] = useState(null); const [shIncidentsLoading, setShIncidentsLoading] = useState(false); const [shSources, setShSources] = useState([]); const [shFilterActive, setShFilterActive] = useState(true); const [shFilterSeverity, setShFilterSeverity] = useState(""); const [shFilterSource, setShFilterSource] = useState(""); const [shFilterSearch, setShFilterSearch] = useState(""); const [shIncidentModal, setShIncidentModal] = useState(null); const [shAnthropic, setShAnthropic] = useState(null); const [shAnthropicLoading, setShAnthropicLoading] = useState(false); 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); } api("GET","/config/notifications").then(r=>setNotifCfg(Array.isArray(r)?r:[])).catch(()=>{}); api("GET","/retention").then(r=>setRetPolicies(Array.isArray(r)?r:[])).catch(()=>{}); api("GET","/config/monitor-defaults").then(r=>{ if(r && typeof r==="object") setMonDefaults(r); }).catch(()=>{}); api("GET","/alerts/recent?top=20").then(r=>setRecentAlerts(Array.isArray(r)?r:[])).catch(()=>{}); },[api]); useEffect(()=>{ if (configTab === "ai-diagnosis" && aiCfg === null) { setAiCfgLoading(true); api("GET","/config/ai-diagnosis").then(r=>{ if(r && typeof r==="object") setAiCfg(r); }).catch(()=>{}).finally(()=>setAiCfgLoading(false)); } },[configTab, aiCfg, api]); useEffect(()=>{ if (configTab !== "notifications") return; setNotifLoading(true); Promise.all([ api("GET","/notifications/channels"), api("GET","/notifications/recipients"), api("GET","/notifications/settings"), ]).then(([chs,recs,settings])=>{ setNotifChs(Array.isArray(chs)?chs:[]); setNotifRecs(Array.isArray(recs)?recs:[]); setNotifSettings(settings&&typeof settings==='object'?settings:{}); }).catch(()=>{}).finally(()=>setNotifLoading(false)); },[configTab,api]); useEffect(()=>{ setNotifRulesDraft(notifSettings); },[notifSettings]); useEffect(()=>{ if (configTab !== "configpack") return; setExportGroupsLoading(true); api("GET","/config-pack/groups") .then(d=>setExportGroups(Array.isArray(d)?d:[])) .catch(()=>{}) .finally(()=>setExportGroupsLoading(false)); },[configTab, api]); useEffect(()=>{ if (configTab !== "configpack" || configPackTab !== "feeds") return; setFeedsLoading(true); api("GET","/ingest/feeds") .then(async d=>{ const feeds = Array.isArray(d) ? d : []; setFeedsList(feeds); const scrapeFeeds = feeds.filter(f => f.IsScrape); if (scrapeFeeds.length > 0) { const results = await Promise.all(scrapeFeeds.map(f=>api("GET",`/ingest/feeds/${f.FeedID}/targets`).catch(()=>[]))); const byFeed = {}; scrapeFeeds.forEach((f,i)=>{ byFeed[f.FeedID]=Array.isArray(results[i])?results[i]:[]; }); setScrapeTargetsByFeed(byFeed); } }) .catch(()=>{}) .finally(()=>setFeedsLoading(false)); },[configTab, configPackTab, api]); useEffect(()=>{ if (configTab !== "configpack" || configPackTab !== "mappings") return; setMappingsLoading(true); setUnresolvedLoading(true); api("GET","/ingest/mappings") .then(d=>setMappingsList(Array.isArray(d)?d:[])) .catch(()=>{}) .finally(()=>setMappingsLoading(false)); api("GET","/ingest/mappings/unresolved") .then(d=>setUnresolvedList(Array.isArray(d)?d:[])) .catch(()=>{}) .finally(()=>setUnresolvedLoading(false)); },[configTab, configPackTab, api]); useEffect(()=>{ if (feedWizardOpen && feedWizardRef.current) { feedWizardRef.current.scrollIntoView({ behavior:'smooth', block:'start' }); } },[feedWizardOpen]); useEffect(()=>{ if (feedWizardStep !== 3 || feedForm.protocol !== 'prometheus-scrape' || feedCreatedId !== null) return; const tok = localStorage.getItem("op1_token") || ""; const run = async () => { setFeedReviewLoading(true); try { const feedRes = await fetch('/api/ingest/feeds', { method:'POST', headers:{'Content-Type':'application/json',Authorization:'Bearer '+tok}, body: JSON.stringify({ FeedName:feedForm.feedName, Protocol:'prometheus-scrape', Notes:feedForm.notes, IsScrape:true, ScrapeIntervalSeconds:parseInt(feedForm.scrapeInterval)||30, ScrapeTimeoutSeconds:parseInt(feedForm.scrapeTimeout)||10 }) }); if (!feedRes.ok) throw new Error('Feed creation failed'); const fd = await feedRes.json(); setFeedCreatedId(fd.feedId); for (const t of scrapeTargets) { await fetch(`/api/ingest/feeds/${fd.feedId}/targets`, { method:'POST', headers:{'Content-Type':'application/json',Authorization:'Bearer '+tok}, body: JSON.stringify({ FeedID:fd.feedId, ScrapeUrl:t.url, CredentialID:t.credId?parseInt(t.credId):null }) }).catch(()=>{}); } const allMetrics = scrapeTargets.flatMap(t=>t.sampleMetrics||[]); if (allMetrics.length > 0) { const fd2 = new FormData(); fd2.append('protocol','prometheus'); fd2.append('rawJson', JSON.stringify(allMetrics.map(m=>({metric_name:m})))); const reviewRes = await fetch('/api/ingest/feeds/review',{method:'POST',headers:{Authorization:'Bearer '+tok},body:fd2}); if (reviewRes.ok) { const rv = await reviewRes.json(); setFeedReview(rv); setFeedMappings((rv.Suggestions||[]).map(s=>({...s,included:s.Status!=='unresolved',overrideMonitorId:null,newMonitorName:''}))); if (monitorsForMapping.length===0) api("GET","/monitors").then(r=>{if(Array.isArray(r))setMonitorsForMapping(r);}).catch(()=>{}); } else { setFeedReview({HaikuSummary:'AI review unavailable.',TotalMetrics:allMetrics.length,HighConfidenceCount:0,MediumConfidenceCount:0,UnresolvedCount:0,Suggestions:[]}); setFeedMappings([]); } } else { setFeedReview({HaikuSummary:'No sample metrics available — targets are scheduled and will begin scraping shortly.',TotalMetrics:0,HighConfidenceCount:0,MediumConfidenceCount:0,UnresolvedCount:0,Suggestions:[]}); setFeedMappings([]); } api("GET","/ingest/feeds").then(r=>{if(Array.isArray(r))setFeedsList(r);}).catch(()=>{}); api("GET",`/ingest/feeds/${fd.feedId}/targets`).then(r=>{if(Array.isArray(r))setScrapeTargetsByFeed(prev=>({...prev,[fd.feedId]:r}));}).catch(()=>{}); setFeedConfirmResult({created:0}); } catch(e) { alert('Setup failed: '+e.message); setFeedWizardStep(2); } finally { setFeedReviewLoading(false); } }; run(); },[feedWizardStep, feedCreatedId]); const shRelTime = (d) => { if (!d) return "just now"; const secs = Math.round((Date.now() - d.getTime()) / 1000); if (secs < 60) return `${secs}s ago`; if (secs < 3600) return `${Math.floor(secs/60)}m ago`; if (secs < 86400) return `${Math.floor(secs/3600)}h ago`; return `${Math.floor(secs/86400)}d ago`; }; const doShProbesRefresh = () => { setShProbesLoading(true); api("GET","/system-health/baseline") .then(r=>{ setShProbes(Array.isArray(r?.Probes)?r.Probes:[]); setShProbesLastRefresh(new Date()); }) .catch(()=>setShProbes([])) .finally(()=>setShProbesLoading(false)); }; const doShAck = (id) => { api("POST",`/system-health/incidents/${id}/acknowledge`,{}) .then(()=>setShIncidents(prev=>(prev||[]).map(i=>i.IncidentID===id?{...i,AcknowledgedAt:new Date().toISOString()}:i))) .catch(e=>setErr(e.message)); }; const doShResolve = (id) => { api("POST",`/system-health/incidents/${id}/resolve`,{}) .then(()=>setShIncidents(prev=>(prev||[]).map(i=>i.IncidentID===id?{...i,IsActive:false}:i))) .catch(e=>setErr(e.message)); }; const loadShAnthropic = () => { setShAnthropicLoading(true); api("GET","/system-health/anthropic-stats") .then(r=>setShAnthropic(r)) .catch(()=>setShAnthropic(null)) .finally(()=>setShAnthropicLoading(false)); }; useEffect(()=>{ if (configTab !== "systemhealth") return; doShProbesRefresh(); loadShAnthropic(); api("GET","/system-health/incidents/sources") .then(r=>setShSources(Array.isArray(r?.sources)?r.sources:[])) .catch(()=>{}); },[configTab]); useEffect(()=>{ if (configTab !== "systemhealth") return; setShIncidentsLoading(true); const tid = setTimeout(()=>{ const params = new URLSearchParams(); params.set("activeOnly", shFilterActive ? "true" : "false"); if (shFilterSeverity) params.set("severity", shFilterSeverity); if (shFilterSource) params.set("source", shFilterSource); api("GET",`/system-health/incidents?${params}`) .then(r=>setShIncidents(Array.isArray(r)?r:[])) .catch(()=>setShIncidents([])) .finally(()=>setShIncidentsLoading(false)); }, 250); return ()=>clearTimeout(tid); },[configTab, shFilterActive, shFilterSeverity, shFilterSource, api]); const saveAiCfg = async () => { if (!aiCfg) return; setAiCfgSaving(true); try { await api("PUT","/config/ai-diagnosis", { enabled: aiCfg.enabled, minSeverity: aiCfg.minSeverity, cooldownMinutes: aiCfg.cooldownMinutes }); setAiCfgSaved(true); setTimeout(()=>setAiCfgSaved(false), 2000); } catch(e){ setErr(e.message); } finally { setAiCfgSaving(false); } }; const runPurge = async () => { setErr(""); setOk(""); try { await api("POST","/retention/purge",{}); setOk("Purge job triggered."); } catch(e){setErr(e.message);} }; const saveDefaults = async () => { setErr(""); setOk(""); try { const payload = { ...monDefaults, ...monDefaultsDirty }; await api("POST","/config/monitor-defaults/save", payload); setMonDefaults(payload); setMonDefaultsDirty({}); setOk("Monitor defaults saved."); } catch(e){ setErr(e.message); } }; const loadNotificationsTab = () => { setNotifLoading(true); Promise.all([ api("GET","/notifications/channels"), api("GET","/notifications/recipients"), api("GET","/notifications/settings"), ]).then(([chs,recs,settings])=>{ setNotifChs(Array.isArray(chs)?chs:[]); setNotifRecs(Array.isArray(recs)?recs:[]); setNotifSettings(settings&&typeof settings==='object'?settings:{}); }).catch(()=>{}).finally(()=>setNotifLoading(false)); }; const saveNotifSetting = (key, value) => { api("POST","/notifications/settings",{key,value:String(value)}) .then(()=>setNotifSettings(prev=>({...prev,[key]:String(value)}))) .catch(()=>{}); }; // ── Config Pack helpers ── const handleExportDownload = () => { const selGroups = selectedExportGroups && selectedExportGroups.length < exportGroups.length ? selectedExportGroups : null; const groupsParam = selGroups ? '&groups=' + encodeURIComponent(selGroups.join(',')) : ''; const url = '/api/config-pack/export?format=' + exportFormat + groupsParam; const tok = localStorage.getItem("op1_token") || ""; fetch(url, { headers: { Authorization: 'Bearer ' + tok } }) .then(r => r.blob()) .then(blob => { const ext = exportFormat === 'xlsx' ? 'xlsx' : 'json'; const fname = 'op1-config-' + new Date().toISOString().slice(0,10) + '.' + ext; const burl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = burl; a.download = fname; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(burl); setExportLastDate(new Date().toLocaleString()); }); }; const handleFileSelect = (e) => { const f = e.target.files[0]; if (!f) return; setImportFile(f); setImportReview(null); setImportCommitResult(null); }; const handleReview = async () => { if (!importFile) return; setImportReviewLoading(true); setImportReview(null); try { const fd = new FormData(); fd.append('file', importFile); if (importFilterGroups.length > 0) { fd.append('groups', importFilterGroups.join(',')); } const tok = localStorage.getItem("op1_token") || ""; const res = await fetch('/api/config-pack/review', { method: 'POST', headers: { Authorization: 'Bearer ' + tok }, body: fd }); if (res.ok) { setImportReview(await res.json()); } else { alert('Review failed: ' + await res.text()); } } catch(e) { alert('Error: ' + e.message); } finally { setImportReviewLoading(false); } }; const handleCommit = async (readyOnly) => { if (!importReview) return; setImportCommitting(true); try { const monitors = readyOnly ? importReview.Rows.filter(r => r.Status === 0).map(r => r.Data) : importReview.Rows.filter(r => r.Status !== 2 || conflictResolution === 'overwrite').map(r => r.Data); const body = { Monitors: monitors.filter(Boolean), GroupsToCreate: importReview.GroupsToCreate, ConflictResolution: conflictResolution }; const tok = localStorage.getItem("op1_token") || ""; const res = await fetch('/api/config-pack/commit', { method: 'POST', headers: { Authorization: 'Bearer ' + tok, 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); if (res.ok) { setImportCommitResult(await res.json()); setImportReview(null); setImportFile(null); } else { alert('Commit failed: ' + await res.text()); } } catch(e) { alert('Error: ' + e.message); } finally { setImportCommitting(false); } }; const toggleAllGroups = () => { const allSelected = selectedExportGroups===null || selectedExportGroups.length===exportGroups.length; if (allSelected) { setSelectedExportGroups([]); } else { setSelectedExportGroups(null); } }; const toggleGroup = (groupName) => { const current = selectedExportGroups===null ? exportGroups.map(g=>g.GroupName) : [...selectedExportGroups]; const idx = current.indexOf(groupName); if (idx >= 0) { const next = current.filter(n=>n!==groupName); setSelectedExportGroups(next.length===exportGroups.length ? null : next); } else { const next = [...current, groupName]; setSelectedExportGroups(next.length===exportGroups.length ? null : next); } }; // ── Ingest Feeds wizard helpers ── const resetFeedWizard = () => { setFeedWizardOpen(false); setFeedWizardStep(1); setFeedForm({ feedName:'', protocol:'influxdb', notes:'', scrapeInterval:'30', scrapeTimeout:'10' }); setFeedSampleMode('file'); setFeedSampleFile(null); setFeedSampleJson(''); setFeedReview(null); setFeedMappings([]); setFeedConfirmResult(null); setScrapeTargets([]); setScrapeTargetUrl(''); setScrapeTargetCredId(''); setScrapeTestResult(null); setFeedCreatedId(null); setRawPayloadOpen(null); setRawPayload(null); setFeedIsNewSystem(false); setFeedTargetGroupId(null); setFeedNewGroupName(''); setFeedSystemDescription(''); }; const handleFeedReview = async () => { setFeedReviewLoading(true); setFeedReview(null); try { const tok = localStorage.getItem("op1_token") || ""; const fd = new FormData(); fd.append('protocol', feedForm.protocol); fd.append('isNewSystem', feedIsNewSystem ? 'true' : 'false'); fd.append('targetGroupId', (feedTargetGroupId && feedTargetGroupId !== '__new__') ? String(feedTargetGroupId) : ''); fd.append('newGroupName', feedNewGroupName || ''); fd.append('systemDescription', feedSystemDescription || ''); if (feedSampleMode === 'file' && feedSampleFile) fd.append('file', feedSampleFile); if (feedSampleMode === 'json' && feedSampleJson) fd.append('rawJson', feedSampleJson); const res = await fetch('/api/ingest/feeds/review', { method: 'POST', headers: { Authorization: 'Bearer ' + tok }, body: fd }); if (!res.ok) throw new Error('Review failed: ' + await res.text()); const data = await res.json(); setFeedReview(data); setFeedMappings((data.Suggestions || []).map(s => ({ ...s, included: s.Status !== 'unresolved', overrideMonitorId: null, newMonitorName: feedIsNewSystem && !s.MonitorID ? (s.MonitorName || '') : '' }))); if (monitorsForMapping.length === 0) { api("GET","/monitors").then(r=>{ if(Array.isArray(r)) setMonitorsForMapping(r); }).catch(()=>{}); } setFeedWizardStep(3); } catch(e) { alert('Haiku review failed: ' + e.message); } finally { setFeedReviewLoading(false); } }; const handleFeedConfirm = async () => { setFeedConfirmLoading(true); try { const tok = localStorage.getItem("op1_token") || ""; const mappings = feedMappings .filter(m => m.included) .map(m => ({ MetricNamePattern: m.MetricNamePattern, MonitorID: m.overrideMonitorId || m.MonitorID || null, NewMonitorName: m.newMonitorName || '', MonitorSubType: m.MonitorSubType || 'app-http' })); const protocol = feedForm.protocol === 'prometheus-scrape' ? 'prometheus' : feedForm.protocol; const body = { Protocol: protocol, FeedID: feedCreatedId || null, Mappings: mappings, IsNewSystem: feedIsNewSystem, TargetGroupId: (feedTargetGroupId && feedTargetGroupId !== '__new__') ? Number(feedTargetGroupId) : null, NewGroupName: feedNewGroupName || null }; const res = await fetch('/api/ingest/feeds/confirm-mappings', { method: 'POST', headers: { 'Content-Type':'application/json', Authorization:'Bearer '+tok }, body: JSON.stringify(body) }); if (!res.ok) throw new Error('Confirm failed'); const data = await res.json(); if (!feedCreatedId && feedForm.feedName.trim()) { await fetch('/api/ingest/feeds', { method: 'POST', headers: { 'Content-Type':'application/json', Authorization:'Bearer '+tok }, body: JSON.stringify({ FeedName: feedForm.feedName, Protocol: feedForm.protocol, Notes: feedForm.notes }) }); } setFeedConfirmResult(data); setFeedWizardStep(4); api("GET","/ingest/feeds").then(r=>{ if(Array.isArray(r)) setFeedsList(r); }).catch(()=>{}); if (feedCreatedId) { api("GET",`/ingest/feeds/${feedCreatedId}/targets`).then(r=>{ if(Array.isArray(r)) setScrapeTargetsByFeed(prev=>({...prev,[feedCreatedId]:r})); }).catch(()=>{}); } } catch(e) { alert('Confirm failed: ' + e.message); } finally { setFeedConfirmLoading(false); } }; // ── Metric Mappings helpers ── const handleMappingAdd = async () => { setMappingAddSaving(true); try { const tok = localStorage.getItem("op1_token") || ""; const res = await fetch('/api/ingest/mappings', { method: 'POST', headers: { 'Content-Type':'application/json', Authorization:'Bearer '+tok }, body: JSON.stringify({ SourceProtocol: mappingForm.protocol, MetricNamePattern: mappingForm.pattern, MonitorID: parseInt(mappingForm.monitorId) }) }); if (!res.ok) throw new Error('Save failed'); setMappingAddOpen(false); setMappingForm({ protocol:'', pattern:'', monitorId:'' }); const r = await fetch('/api/ingest/mappings', { headers:{ Authorization:'Bearer '+tok }}); if (r.ok) setMappingsList(await r.json()); } catch(e) { alert('Failed: ' + e.message); } finally { setMappingAddSaving(false); } }; const handleMappingDelete = async (mappingId) => { setMappingDeleteId(mappingId); try { const tok = localStorage.getItem("op1_token") || ""; await fetch('/api/ingest/mappings/'+mappingId, { method:'DELETE', headers:{ Authorization:'Bearer '+tok }}); setMappingsList(prev => prev.filter(m => m.MappingID !== mappingId)); } catch(e) { alert('Delete failed'); } finally { setMappingDeleteId(null); } }; const handleUnresolvedQuickAdd = (row) => { setMappingForm({ protocol: row.SourceProtocol || '', pattern: row.MetricName || '', monitorId:'' }); if (monitorsForMapping.length === 0) { api("GET","/monitors").then(r=>{ if(Array.isArray(r)) setMonitorsForMapping(r); }).catch(()=>{}); } setMappingAddOpen(true); }; const handleUnresolvedCreateMonitor = async (row) => { setUnresolvedCreateSaving(true); try { const tok = localStorage.getItem("op1_token") || ""; const monRes = await fetch('/api/monitors', { method: 'POST', headers: { 'Content-Type':'application/json', Authorization:'Bearer '+tok }, body: JSON.stringify({ MonitorName: unresolvedCreateForm.name, MonitorType: 'application', MonitorSubType: unresolvedCreateForm.subtype, GroupID: unresolvedCreateForm.groupId ? Number(unresolvedCreateForm.groupId) : null, IsEnabled: false, IPAddressOrUrl: '' }) }); if (!monRes.ok) throw new Error('Create monitor failed: ' + await monRes.text()); const monData = await monRes.json(); const newMonitorId = monData.MonitorID; const mapRes = await fetch('/api/ingest/mappings', { method: 'POST', headers: { 'Content-Type':'application/json', Authorization:'Bearer '+tok }, body: JSON.stringify({ SourceProtocol: row.SourceProtocol || '', MetricNamePattern: row.MetricName, MonitorID: newMonitorId }) }); if (!mapRes.ok) throw new Error('Create mapping failed'); const rowKey = (row.MetricName||'')+'|'+(row.SourceProtocol||''); setUnresolvedCreateSuccess(rowKey); setUnresolvedCreateOpen(null); fetch('/api/ingest/mappings/unresolved', { headers:{ Authorization:'Bearer '+tok }}) .then(r=>r.json()).then(d=>{ if(Array.isArray(d)) setUnresolvedList(d); }).catch(()=>{}); api("GET","/monitors").then(r=>{ if(Array.isArray(r)) setMonitorsForMapping(r); }).catch(()=>{}); } catch(e) { alert('Failed: ' + e.message); } finally { setUnresolvedCreateSaving(false); } }; const loadRawPayload = async (targetId) => { try { const r = await api("GET", `/ingest/feeds/targets/${targetId}/raw`); setRawPayload(r); } catch(e) { setRawPayload({ Payload: null, Error: e.message }); } finally { setRawPayloadLoading(false); } }; const toggleFeed = async (feedId, currentIsActive) => { setFeedsList(prev => prev.map(f => f.FeedID === feedId ? {...f, IsActive: !currentIsActive} : f)); try { await api("PATCH", `/ingest/feeds/${feedId}/toggle`, {}); } catch(_) { setFeedsList(prev => prev.map(f => f.FeedID === feedId ? {...f, IsActive: currentIsActive} : f)); } }; const handleAskFeed = async (feedId, text) => { if (!text || !text.trim()) return; const prevThread = feedAiThreads[feedId] || []; const userMsg = { role: 'user', content: text.trim() }; const newThread = [...prevThread, userMsg]; setFeedAiThreads(prev => ({ ...prev, [feedId]: newThread })); setFeedAiInput(prev => ({ ...prev, [feedId]: '' })); setFeedAiLoading(prev => ({ ...prev, [feedId]: true })); try { const r = await api("POST", "/ingest/feeds/"+feedId+"/ai-chat", { messages: newThread.map(m => ({ role: m.role, content: m.content })) }); const reply = (r && r.reply) ? r.reply : 'No response received.'; setFeedAiThreads(prev => ({ ...prev, [feedId]: [...(prev[feedId]||[]), { role: 'assistant', content: reply }] })); } catch(e) { setFeedAiThreads(prev => ({ ...prev, [feedId]: [...(prev[feedId]||[]), { role: 'assistant', content: 'AI assistant is unavailable. Please try again.' }] })); } finally { setFeedAiLoading(prev => ({ ...prev, [feedId]: false })); } }; // ── Metric Mappings panel ── const mpc = { influxdb:'#006D8C', prometheus:'#E6522C', statsd:'#6366f1', graphite:'#374151', webhook:'#008C6F', spreadsheet:'#B45309' }; const mpl = { influxdb:'InfluxDB LP', prometheus:'Prometheus', statsd:'StatsD', graphite:'Graphite', webhook:'Webhook', spreadsheet:'Spreadsheet' }; const mpGrouped = {}; mappingsList.forEach(m => { if (!mpGrouped[m.SourceProtocol]) mpGrouped[m.SourceProtocol]=[]; mpGrouped[m.SourceProtocol].push(m); }); const mpSeen = new Set(); const mpDedup = []; unresolvedList.forEach(r => { const k=(r.MetricName||'')+'|'+(r.SourceProtocol||''); if (!mpSeen.has(k)){ mpSeen.add(k); mpDedup.push(r); }}); const mpShown = mpDedup.slice(0, 20); const fmtMpDate = d => { if(!d) return 'Never'; const dt=new Date(d); return dt.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})+' '+dt.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}); }; const mappingsPanel = (
Metric Mappings
{mappingAddOpen && (
New Mapping
Protocol
Pattern
setMappingForm(p=>({...p,pattern:e.target.value}))} placeholder="e.g. cpu.%.usage" style={{padding:"6px 10px",border:"0.5px solid #cbd5e1",borderRadius:6,fontSize:12,fontFamily:"monospace"}} />
Use % as wildcard. More specific patterns take priority.
Monitor
)} {mappingsLoading ? (
Loading…
) : mappingsList.length===0 ? (
No mappings configured. Use the Ingest Feeds wizard or add one manually.
) : ( {['PATTERN','PROTOCOL','MONITOR','LAST MATCHED','ACTIONS'].map(h=>( ))} {Object.entries(mpGrouped).map(([proto,rows])=>[ , ...rows.map(row=>( )) ])}
{h}
{mpl[proto]||proto} {rows.length} mapping{rows.length!==1?'s':''}
{row.MetricNamePattern} {mpl[row.SourceProtocol]||row.SourceProtocol} {row.MonitorName||'—'} {fmtMpDate(row.LastMatchedAt)}
)}
⚠ Unresolved Metrics
These metrics arrived but could not be matched to a monitor. Add a mapping to resolve them.
{unresolvedLoading ? (
Loading…
) : mpShown.length===0 ? (
✓ No unresolved metrics — all inbound data is mapped.
) : ( {['METRIC NAME','PROTOCOL','LAST SEEN','VALUE',''].map((h,i)=>( ))} {mpShown.map((row,i)=>{ const rowKey = (row.MetricName||'')+'|'+(row.SourceProtocol||''); const isCreateOpen = unresolvedCreateOpen === rowKey; const isSuccess = unresolvedCreateSuccess === rowKey; const defaultName = (row.MetricName||'').replace(/[._-]/g,' ').replace(/\b\w/g,c=>c.toUpperCase()); return ( {isCreateOpen && ( )} ); })}
{h}
{row.MetricName} {mpl[row.SourceProtocol]||row.SourceProtocol||'Unknown'} {fmtMpDate(row.MetricTimestamp)} {row.Value!=null?row.Value:'—'} {isSuccess ? ( ✓ Created ) : (
)}
Create monitor for {row.MetricName}
Monitor name
setUnresolvedCreateForm(f=>({...f,name:e.target.value}))} style={{padding:'5px 8px',border:'0.5px solid #cbd5e1',borderRadius:5,fontSize:12}} />
Type
Group
{mpDedup.length>20 && (
Showing top 20 most recent
)} )}
); const { isPaused: monIsPaused, canManageConfig, pausePopover, setPausePopover, pauseReason, setPauseReason, pauseBusy, togglePause, currentCtrl } = monitoringControl || {}; const CONFIG_TABS = [ { key:"notifications", label:"Notifications" }, { key:"credentials", label:"Credentials" }, { key:"retention", label:"Retention" }, { key:"monitor-defaults", label:"Monitor Defaults" }, { key:"machines", label:"Source Monitors" }, { key:"ai-diagnosis", label:"AI Diagnosis" }, { key:"configpack", label:"Import / Export" }, ...(canManageConfig ? [{ key:"systemhealth", label:"System Health" }] : []), ]; const notifChannels = [...new Set(notifCfg.map(n=>n.ConfigType).filter(Boolean))].length; return (
{/* ── Branding header ── */}
OP1
OP1 Operations Portal
Enterprise Monitoring · v1.4.457
{[ ["Notif Configs", String(notifCfg.length), "#1e293b"], ["Ret Policies", String(retPolicies.length), "#1e293b"], ["Channels", String(notifChannels), "#1e293b"], ].flatMap(([lbl, val, col], i, arr) => [
{val}
{lbl}
, i < arr.length-1 &&
, ].filter(Boolean))}
{/* ── Tab bar ── */}
{CONFIG_TABS.map(t => ( ))}
{/* ── Scrollable content ── */}
{configTab==="notifications" && (()=>{ const notifEnabled = notifSettings['Notifications_Enabled'] === 'true'; const tog = (on, fn) => (
); const chIcon = (t) => t==='email' ? {icon:"@",bg:c.blueLight,fg:c.blue} : t==='webhook' ? {icon:"⇒",bg:c.yellowLight,fg:c.yellow} : {icon:"?",bg:"#f1f5f9",fg:c.textMuted}; const chSummary = (ch) => { try { const cfg=JSON.parse(ch.ConfigJson||'{}'); if(ch.ChannelType==='email') return cfg.SmtpHost?`${cfg.SmtpHost}:${cfg.SmtpPort||587}`:'—'; if(ch.ChannelType==='webhook') return cfg.Url?(cfg.Url.length>42?cfg.Url.slice(0,40)+'…':cfg.Url):'—'; } catch{} return '—'; }; const fmtTested = (dt) => { if(!dt) return '—'; const d=parseUTC(dt); if(!d) return '—'; const now=new Date(); const today=d.getDate()===now.getDate()&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear(); return today?'Today '+d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}):d.toLocaleDateString([],{day:'2-digit',month:'short'})+' '+d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}); }; const chStatus = (ch) => ch.LastTestSuccess===true ? ● Connected : ch.LastTestSuccess===false ? ● Failed : ● Not tested; const inpS = { width:"100%", padding:"7px 10px", border:`1px solid ${c.border}`, borderRadius:6, fontSize:13, background:"#fff", color:c.text, outline:"none", boxSizing:"border-box" }; const lblS = { fontSize:10, fontWeight:700, color:c.textMuted, textTransform:"uppercase", letterSpacing:"0.05em", marginBottom:4, display:"block" }; const cardStyle = { background:"#fff", border:`1px solid ${c.border}`, borderRadius:8, overflow:"hidden" }; const tblHdr = ["Channel","Type","Status","Last tested",""].map(h=>{h}); const notifGlobalBanner = (
{notifEnabled?"Notifications enabled globally":"Notifications disabled globally"}
{notifEnabled?"All channels and recipients are active. Disable to suppress all alert delivery system-wide.":"No notifications will be sent regardless of channel or recipient configuration."}
{tog(notifEnabled,()=>saveNotifSetting('Notifications_Enabled',notifEnabled?'false':'true'))}
); const notifChannelsCard = (
Delivery channels
Configure how OP1 sends notifications
{ setNotifChannelDraft({ChannelType:'email',DisplayName:'',IsEnabled:true,_cfg:{SmtpHost:'',SmtpPort:587,SmtpUsername:'',SmtpPassword:'',FromAddress:'',FromName:'OP1 Operations Portal',EnableSsl:true}}); setNotifChannelModal('add'); }}>+ Add channel
{notifChs.length===0 ? (
No channels configured. Add an email or webhook channel to start sending notifications.
) : ( {tblHdr} {notifChs.map(ch=>{ const {icon,bg,fg}=chIcon(ch.ChannelType); const ts=notifTestState[ch.ChannelID]; const testDiag=notifTestDiag[ch.ChannelID]; const tdSucc=testDiag?.Code?.startsWith("ok"); return ( ); })}
{icon}
{ch.DisplayName}
{chSummary(ch)}
 {ch.ChannelType} {chStatus(ch)} {fmtTested(ch.LastTestedAt)}
{ setNotifTestState(p=>({...p,[ch.ChannelID]:'sending'})); setNotifTestDiag(p=>{ const n={...p}; delete n[ch.ChannelID]; return n; }); try { const r=await api("POST",`/notifications/channels/${ch.ChannelID}/test`,{}); if(r?.ok){ setNotifTestState(p=>({...p,[ch.ChannelID]:'idle'})); setNotifTestDiag(p=>({...p,[ch.ChannelID]:r?.diagnosis})); loadNotificationsTab(); } else { setNotifTestState(p=>({...p,[ch.ChannelID]:'idle'})); setNotifTestDiag(p=>({...p,[ch.ChannelID]:r?.diagnosis})); } } catch(e){ setNotifTestState(p=>({...p,[ch.ChannelID]:'idle'})); setNotifTestDiag(p=>({...p,[ch.ChannelID]:{Code:'smtp.unknown',Headline:e?.message||'Test failed',Severity:'unknown'}})); } }}> {ts==='sending'?<>Testing…:'Test'} {testDiag && (
{tdSucc?"✓ ":""}{testDiag.Headline}
{testDiag.Detail &&
{testDiag.Detail}
} {testDiag.Suggestion &&
💡 {testDiag.Suggestion}
} {testDiag.RawError && (
Show technical details 
{testDiag.RawError}
)}
)}
{ try { const cfg=JSON.parse(ch.ConfigJson||'{}'); setNotifChannelDraft({ChannelID:ch.ChannelID,DisplayName:ch.DisplayName,ChannelType:ch.ChannelType,IsEnabled:ch.IsEnabled,_cfg:{SmtpHost:cfg.SmtpHost||'',SmtpPort:cfg.SmtpPort||587,SmtpUsername:cfg.SmtpUsername||'',SmtpPassword:cfg.SmtpPassword||'',FromAddress:cfg.FromAddress||'',FromName:cfg.FromName||'OP1 Operations Portal',EnableSsl:cfg.EnableSsl!==false,Url:cfg.Url||'',Secret:cfg.Secret||''}}); } catch { setNotifChannelDraft({ChannelID:ch.ChannelID,DisplayName:ch.DisplayName,ChannelType:ch.ChannelType,IsEnabled:ch.IsEnabled,_cfg:{}}); } setNotifChannelModal(ch); }}>Edit { showConfirm('Delete this channel? This will also remove all recipients assigned to it.', async () => { try { await api("DELETE",`/notifications/channels/${ch.ChannelID}`); loadNotificationsTab(); } catch(e) { setErr(e.message); } }); }}>Delete
)}
); const recipInits = (name) => { const p=(name||'').trim().split(/\s+/); return p.length>=2?(p[0][0]+p[p.length-1][0]).toUpperCase():(name||'?')[0].toUpperCase(); }; const notifRecipientsCard = (
Recipients
Global list — assign to monitors or groups from the monitor form
{ setNotifRecipientDraft({DisplayName:'',ChannelID:notifChs[0]?.ChannelID||'',Destination:'',IsActive:true}); setNotifRecipientModal('add'); }}>+ Add recipient
{notifRecs.length===0 ? (
No recipients configured. Add a recipient to begin assigning notifications.
) : ( {["Name","Channel","Destination","Assigned to","Active",""].map(h=>)} {notifRecs.map(r=>{ const {bg:rb,fg:rf}=chIcon(r.ChannelType); return ( ); })}
{h}
{recipInits(r.DisplayName)}
{r.DisplayName}
{r.ChannelType} {r.Destination} {r.AssignedCount>0?{r.AssignedCount} monitor{r.AssignedCount!==1?'s':''}:Unassigned} {tog(r.IsActive,async()=>{ await api("PUT",`/notifications/recipients/${r.RecipientID}`,{DisplayName:r.DisplayName,ChannelID:r.ChannelID,Destination:r.Destination,IsActive:!r.IsActive}); loadNotificationsTab(); })}
{ setNotifRecipientDraft({DisplayName:r.DisplayName,ChannelID:r.ChannelID,Destination:r.Destination,IsActive:r.IsActive}); setNotifRecipientModal(r); }}>Edit { showConfirm(r.AssignedCount>0?`This recipient is assigned to ${r.AssignedCount} monitor${r.AssignedCount!==1?'s':''}. Remove anyway?`:'Remove this recipient?', async () => { try { await api("DELETE",`/notifications/recipients/${r.RecipientID}`); loadNotificationsTab(); } catch(e) { setErr(e.message); } }); }}>Remove
)}
); const notifRulesCard = (
Delivery rules — global defaults
Overridable per monitor assignment
{ setNotifSaving(true); try { for(const [k,v] of Object.entries(notifRulesDraft)) await api("POST","/notifications/settings",{key:k,value:String(v)}); setNotifSettings({...notifRulesDraft}); } catch{} setNotifSaving(false); }}> Save rules
setNotifRulesDraft(p=>({...p,'Notifications_CooldownMinutes':e.target.value}))} style={{...inpS,width:80}} /> minutes
{tog(notifRulesDraft['Notifications_SuppressChildIfParentFailing']==='true',()=>setNotifRulesDraft(p=>({...p,'Notifications_SuppressChildIfParentFailing':p['Notifications_SuppressChildIfParentFailing']==='true'?'false':'true'})))}
Enabled
Child alerts suppressed when parent is failing
Local time shown in alert emails. UTC always shown alongside.
{tog(notifRulesDraft['Notifications_SendRecovery']==='true',()=>setNotifRulesDraft(p=>({...p,'Notifications_SendRecovery':p['Notifications_SendRecovery']==='true'?'false':'true'})))}
Send recovered notification
Fires when a monitor returns to healthy
{tog(notifRulesDraft['Notifications_IncludeAiDiagnosis']==='true',()=>setNotifRulesDraft(p=>({...p,'Notifications_IncludeAiDiagnosis':p['Notifications_IncludeAiDiagnosis']==='true'?'false':'true'})))}
Attach diagnosis if available
Includes AI diagnosis result in notification body
); const notifTestCard = (
Send test notification
Validate delivery without triggering a real alert
Optional. With recipient: tests end-to-end delivery to that address. Without: validates the channel by sending to its FromAddress.
{ setNotifTestResult('sending'); setNotifTestResultDiag(null); try { const r=await api("POST",`/notifications/channels/${notifTestCh}/test`,notifTestRec?{recipientId:parseInt(notifTestRec)}:{}); if(r?.ok){ setNotifTestResult('idle'); setNotifTestResultDiag(r?.diagnosis); } else { setNotifTestResult('idle'); setNotifTestResultDiag(r?.diagnosis); } } catch(e){ setNotifTestResult('idle'); setNotifTestResultDiag({Code:'smtp.unknown',Headline:e?.message||'Test failed',Severity:'unknown'}); } }}> {notifTestResult==='sending'?<>Sending…:'Send test'}
{notifTestResultDiag && (()=>{ const suc=notifTestResultDiag.Code?.startsWith("ok"); return (
{suc?"✓ ":""}{notifTestResultDiag.Headline}
{notifTestResultDiag.Detail &&
{notifTestResultDiag.Detail}
} {notifTestResultDiag.Suggestion &&
💡 {notifTestResultDiag.Suggestion}
} {notifTestResultDiag.RawError && (
Show technical details 
{notifTestResultDiag.RawError}
)}
);})()}
); return (
{notifLoading ?
Loading…
: <>{notifGlobalBanner}{notifChannelsCard}{notifRecipientsCard}{notifRulesCard}{notifTestCard} } {notifChannelModal !== null && (()=>{ const isEdit = notifChannelModal !== 'add'; const d = notifChannelDraft; const chType = d.ChannelType || 'email'; const emailFields = (
{[ {k:'SmtpHost',label:'SMTP host',ph:'smtp.example.com'}, {k:'SmtpPort',label:'SMTP port',ph:'587'}, {k:'SmtpUsername',label:'SMTP username',ph:'user@example.com'}, {k:'SmtpPassword',label:'SMTP password',ph:'••••••••'}, {k:'FromAddress',label:'From address',ph:'alerts@example.com'}, {k:'FromName',label:'From name',ph:'OP1 Alerts'}, ].map(f=>(
setNotifChannelDraft(p=>({...p,_cfg:{...p._cfg,[f.k]:f.k==='SmtpPort'?(parseInt(e.target.value,10)||587):e.target.value}}))} style={inpS} />
))}
setNotifChannelDraft(p=>({...p,_cfg:{...p._cfg,EnableSsl:e.target.checked}}))} />
); const webhookFields = (
setNotifChannelDraft(p=>({...p,_cfg:{...p._cfg,Url:e.target.value}}))} style={inpS} />
setNotifChannelDraft(p=>({...p,_cfg:{...p._cfg,Secret:e.target.value}}))} placeholder="leave blank to disable signing" />
); const handleSave = async () => { const configJson = JSON.stringify(d._cfg || {}); try { if (isEdit) { await api("PUT", `/notifications/channels/${d.ChannelID}`, { DisplayName: d.DisplayName, ConfigJson: configJson, IsEnabled: d.IsEnabled }); } else { await api("POST", "/notifications/channels", { ChannelType: chType, DisplayName: d.DisplayName, ConfigJson: configJson, IsEnabled: true }); } if (isEdit) setNotifTestDiag(p=>{ const n={...p}; delete n[d.ChannelID]; return n; }); loadNotificationsTab(); setNotifChannelModal(null); } catch(e) { setErr(e.message); } }; return (
{isEdit ? 'Edit channel' : 'Add channel'}
setNotifChannelDraft(p=>({...p,DisplayName:e.target.value}))} style={inpS} />
{!isEdit && (
)} {chType === 'email' ? emailFields : webhookFields}
setNotifChannelModal(null)}>Cancel Save channel
); })()} {notifRecipientModal !== null && (()=>{ const isEdit = notifRecipientModal !== 'add'; const d = notifRecipientDraft; const selCh = notifChs.find(c=>c.ChannelID === (parseInt(d.ChannelID)||0)); const destLabel = selCh?.ChannelType === 'webhook' ? 'Webhook URL override (leave blank to use channel URL)' : 'Email address'; const destPlaceholder = selCh?.ChannelType === 'webhook' ? 'https://… (optional)' : 'user@example.com'; const handleRecSave = async () => { try { if (isEdit) { await api("PUT", `/notifications/recipients/${notifRecipientModal.RecipientID}`, { DisplayName: d.DisplayName, Destination: d.Destination, IsActive: d.IsActive }); } else { await api("POST", "/notifications/recipients", { DisplayName: d.DisplayName, ChannelID: parseInt(d.ChannelID), Destination: d.Destination, IsActive: true }); } loadNotificationsTab(); setNotifRecipientModal(null); } catch(e) { setErr(e.message); } }; return (
{isEdit ? 'Edit recipient' : 'Add recipient'}
setNotifRecipientDraft(p=>({...p,DisplayName:e.target.value}))} style={inpS} />
{!isEdit && (
)}
setNotifRecipientDraft(p=>({...p,Destination:e.target.value}))} style={inpS} />
setNotifRecipientModal(null)}>Cancel Save recipient
); })()}
); })()} {configTab==="retention" && (
Data Retention Policies
Hot / warm / cold tiers. Purge runs daily at 2:00 AM UTC.
Run Purge Now
{retPolicies.length===0 ?
No policies found.
: ( {["Table","Hot (d)","Warm (d)","Cold (d)","Active","Last Purge"].map(h=>)} {retPolicies.map(p=>( ))}
{h}
{p.TableName} {p.HotRetentionDays} {p.WarmRetentionDays} {p.ColdRetentionDays} {p.IsActive?ON:OFF} {p.LastPurgeAt?parseUTC(p.LastPurgeAt)?.toLocaleDateString():"—"}
)}
)} {configTab==="monitor-defaults" && (
Monitor Defaults
Save Defaults
These values pre-populate the Add Monitor form. Edit any field and click Save Defaults.
{MONITOR_DEFAULT_SECTIONS.map(sec=>(
{sec.label}
{["Setting","Value","Description"].map(h=>)} {sec.keys.map(k=>{ const val = monDefaultsDirty[k] ?? monDefaults[k] ?? ""; return ( ); })}
{h}
{MONITOR_DEFAULT_LABELS[k]||k} setMonDefaultsDirty(p=>({...p,[k]:e.target.value}))} style={{ width:100, padding:"4px 8px", border:"0.5px solid #e2e5ea", borderRadius:4, fontSize:12, fontFamily:"monospace", background:"#ffffff", color:"#1e293b" }} /> {MONITOR_DEFAULT_DESC[k]||""}
))}
)} {configTab==="credentials" && ( )} {configTab==="machines" && ( )} {configTab==="ai-diagnosis" && (
AI Diagnosis Settings
{aiCfgLoading ? (
Loading…
) : aiCfg === null ? (
Failed to load settings.
) : (
{/* Enable toggle */}
Enable AI Diagnosis
{aiCfg.minSeverity==="critical"?"Automatically diagnose critical alerts using AI":aiCfg.minSeverity==="warning"?"Automatically diagnose warning and critical alerts using AI":aiCfg.minSeverity==="info"?"Automatically diagnose all alerts using AI":"Automatically diagnose alerts using AI"}
setAiCfg(p=>({...p, enabled:!p.enabled}))} style={{ width:36, height:20, borderRadius:10, background:aiCfg.enabled?"#006D8C":"#e2e5ea", position:"relative", cursor:"pointer", transition:"background 0.2s", flexShrink:0 }}>
{/* Min severity */}
Minimum Severity
{/* Cooldown */}
Cooldown (same monitor)
{/* Usage */}
{aiCfg.firesLast24h > 0 ? `Fired ${aiCfg.firesLast24h} time${aiCfg.firesLast24h !== 1 ? "s" : ""} in the last 24 hours` : "No diagnoses in the last 24 hours"}
{/* Save */}
{aiCfgSaved && Saved ✓}
)}
)} {/* ── Import / Export tab ── */} {configTab==="configpack" && (
{/* Sub-tab bar */}
{[['export','Export'],['import','Import'],['feeds','Ingest Feeds'],['mappings','Metric Mappings']].map(([k,lbl]) => ( ))}
{/* Export panel */} {configPackTab==="export" && (
Export configuration
{/* Group filter */}
Filter by group
{exportGroupsLoading ? (
Loading groups…
) : (
{exportGroups.map(g => ( ))} {exportGroups.length===0 && (
No groups defined
)}
)}
{/* Format toggle */}
Format
{[['json','JSON'],['xlsx','XLSX']].map(([fmt,lbl]) => ( ))}
{/* Summary */}
{(()=>{ const sg = selectedExportGroups===null ? exportGroups : exportGroups.filter(g=>selectedExportGroups.includes(g.GroupName)); const tm = sg.reduce((s,g)=>s+(g.MonitorCount||0),0); const tg = sg.length; return `${tg} group${tg!==1?'s':''} · ${tm} monitor${tm!==1?'s':''} will be exported`; })()}
{/* Download */}
Last exported: {exportLastDate||"Never"}
)} {/* Metric Mappings panel */} {configPackTab==="mappings" && mappingsPanel} {/* Ingest Feeds panel */} {configPackTab==="feeds" && (()=>{ const feedProtocolColors = { influxdb:'#006D8C', prometheus:'#E6522C', 'prometheus-scrape':'#E6522C', statsd:'#6366f1', graphite:'#374151', webhook:'#008C6F', spreadsheet:'#B45309' }; const feedProtocolLabel = { influxdb:'InfluxDB LP', prometheus:'Prometheus Push', 'prometheus-scrape':'Prometheus Scrape', statsd:'StatsD', graphite:'Graphite', webhook:'Webhook', spreadsheet:'Spreadsheet' }; const renderAiMd = (text) => { const html = (text||'') .replace(/&/g,'&').replace(//g,'>') .replace(/\*\*(.+?)\*\*/g,'$1') .replace(/^[ \t]*[-*]\s+(.+)$/gm,'\u2022 $1') .replace(/\n/g,'
'); return { __html: html }; }; const isScrape = feedForm.protocol === 'prometheus-scrape'; const stepPct = feedWizardStep === 1 ? 25 : feedWizardStep === 2 ? 50 : feedWizardStep === 3 ? 75 : 100; const stepLabels = isScrape ? ['Feed details','Add targets','Review & map','Activate'] : ['Feed details','Sample data','Confirm mappings','Activate']; return (
{/* Feeds list header */}
Ingest Feeds
{feedsLoading &&
Loading…
} {!feedsLoading && feedsList.length === 0 && !feedWizardOpen && (
No feeds configured yet.
Click + New Feed to get started.
)} {feedsList.length > 0 && (
{feedsList.map(feed => { const feedTargets = scrapeTargetsByFeed[feed.FeedID] || []; const anyFail = feedTargets.some(t => t.ConsecutiveFailures > 2 || t.LastScrapeSuccess === false); const totalFail = feedTargets.reduce((s,t)=>s+(t.ConsecutiveFailures||0),0); const lastTarget = feedTargets[0] || null; const lastAt = lastTarget && lastTarget.LastScrapedAt; const lastTime = lastAt ? new Date(lastAt+'Z').toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}) : null; const everScraped = feedTargets.some(t => t.LastScrapedAt); const neverSucceeded = feed.IsScrape && feedTargets.length > 0 && !everScraped; const fp = feed.Protocol || ''; const feedUnresolved = unresolvedList.filter(u => { const up=u.SourceProtocol||''; return up===fp||(fp==='prometheus-scrape'&&(up==='prometheus'||up==='prometheus-scrape')); }).length; const isAiOpen = feedAiOpenId === feed.FeedID; const isRawOpen = !!lastTarget && lastTarget.TargetID === rawPayloadOpen; const statusColor = !feed.IsActive ? '#9CA3AF' : anyFail ? '#D95C5C' : '#008C6F'; const muted = !feed.IsActive; const fid = feed.FeedID; const dimBtn = neverSucceeded; const tgtUrl = lastTarget ? lastTarget.ScrapeUrl || '' : ''; let svgHost='', svgPath='/metrics'; try { const pu = new URL(tgtUrl); svgHost=pu.host; svgPath=pu.pathname; } catch(_){} const arcOk = feed.IsScrape && everScraped && !anyFail; const targetFill = arcOk ? '#e0f2fe' : '#FAEAEA'; const targetStroke = arcOk ? '#006D8C' : '#D95C5C'; const retColor = arcOk ? '#008C6F' : '#D95C5C'; const interval = feed.ScrapeIntervalSeconds || 30; const statusNote = neverSucceeded ? 'never succeeded' : lastTime ? 'last: '+lastTime+' \u2713' : 'pending\u2026'; const statusNoteColor = neverSucceeded ? '#D95C5C' : arcOk ? '#008C6F' : '#E89A2E'; const volRows = (()=>{ const rows = [{ label:'Samples received', count:everScraped?20:0, color:'#006D8C' }]; if (feedUnresolved > 0) rows.push({ label:'Unresolved', count:feedUnresolved, color:'#E89A2E', isUnresolved:true }); return rows; })(); const volMax = Math.max(...volRows.map(r=>r.count), 1); return (
{/* Left column */}
{feed.FeedName} {feed.IsScrape?'pull':'push'} {feedProtocolLabel[feed.Protocol]||feed.Protocol}
{feed.IsScrape ? ( OP1 {arcOk ? ( {svgHost.length>14?svgHost.slice(0,13)+'\u2026':svgHost||'TARGET'} {svgPath} ) : ( {svgHost.length>14?svgHost.slice(0,13)+'\u2026':svgHost||'target URL'} {svgPath||'/'} {neverSucceeded?'no data yet':'unreachable'} )} {'GET · every '+interval+'s'} {arcOk?'full metrics payload':('no response \u00d7 '+totalFail)} {statusNote} ) : ( SOURCE {feed.FeedName.length>13?feed.FeedName.slice(0,12)+'\u2026':feed.FeedName} push agent OP1 {'/api/ingest/'+feed.Protocol} POST metrics payload 204 · ack only no feedback loop )}
{feed.IsActive?'Enabled':'Paused'}
{/* Right column */}
Data flow · last hour
{volRows.map((row,ri) => (
{row.label}
0?4:0 }}/>
{row.count>0?row.count+'/hr':'\u2013'}
))} {feed.IsScrape && !everScraped && feedUnresolved===0 && (
No data yet
)}
{feed.IsScrape ? ( {neverSucceeded ? React.createElement('span',{style:{color:'#D95C5C'}},'Never scraped successfully') : lastTime ? React.createElement(React.Fragment,null,'Last scraped: ',React.createElement('b',null,lastTime)) : 'Pending first scrape'} {totalFail>0 && {'⚠ '+totalFail+' consecutive failure'+(totalFail!==1?'s':'')}} {lastTarget&&lastTarget.LastScrapeMs&&lastTarget.LastScrapeMs>0&&{'~'+lastTarget.LastScrapeMs+'ms/scrape'}} ) : ( {'Push feed · '+(feed.IsActive?'active \u2014 awaiting data':'paused')} )} {feedUnresolved>0 && {'⚠ '+feedUnresolved+' unresolved sample'+(feedUnresolved!==1?'s':'')}}
{/* Action bar */}
{neverSucceeded ? ( ) : ( )}
{/* Raw payload panel */} {isRawOpen && (
{rawPayloadLoading ? (
Loading payload…
) : rawPayload ? (
{rawPayload.TargetUrl} · {rawPayload.LastPayloadAt?new Date(rawPayload.LastPayloadAt+'Z').toLocaleString():'Never'}
{rawPayload.Payload||'(empty)'}
) : (
No payload available yet.
)}
)} {/* AI panel */} {isAiOpen && (
{'⚡ AI Assistant \u2014 '+feed.FeedName}
{(feedUnresolved > 0 ? ["Why are some metrics unresolved?", "What monitors should I create?", "Show me the LIKE patterns I need"] : totalFail > 0 ? ["Why is this feed failing?", "How do I fix the target URL?", "What does this error mean?"] : ["Is this data volume normal?", "How is this feed performing?", "What can I do to improve mapping coverage?"] ).map((q,qi)=>( ))}
{(feedAiThreads[fid]||[]).length > 0 && (
{(feedAiThreads[fid]||[]).map((msg,mi)=>( msg.role==='user' ?
{msg.content}
:
))} {feedAiLoading[fid] && (
⚡ thinking…
)}
)}
setFeedAiInput(prev=>({...prev,[fid]:e.target.value}))} onKeyDown={e=>{ if(e.key==='Enter'&&(feedAiInput[fid]||'').trim()&&!feedAiLoading[fid]) handleAskFeed(fid, feedAiInput[fid]||''); }} placeholder="Ask about this feed…" style={{ flex:1, padding:'6px 10px', border:'1px solid #bae6fd', borderRadius:6, fontSize:12, background:'#fff' }}/>
)}
); })}
)} {/* Wizard */} {feedWizardOpen && (
{/* Wizard header */}
New Ingest Feed — Setup Wizard
{/* Progress bar */}
{/* Step indicators */}
{stepLabels.map((lbl, i) => { const sn = i+1; const active = sn === feedWizardStep; const done = sn < feedWizardStep; return (
{done ? "✓" : sn}
{lbl}
); })}
{/* Step 1 — Feed details */} {feedWizardStep === 1 && (
Feed name *
setFeedForm(f=>({...f,feedName:e.target.value}))} placeholder="e.g. Production Prometheus" style={{ width:"100%", padding:"7px 10px", border:"1px solid #e2e5ea", borderRadius:6, fontSize:12, boxSizing:"border-box" }} />
Protocol
{isScrape && (
Scrape interval
Timeout
)}
Notes (optional)