2026-05-01 00:46:10 +03:00
{{ define "admin/alerts.html" }}
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > WarpBox Admin Alerts< / title >
< link rel = "icon" type = "image/png" href = "/static/WarpBoxLogo.png" >
< link rel = "stylesheet" href = "/static/css/app.css" >
< link rel = "stylesheet" href = "/static/css/window.css" >
< link rel = "stylesheet" href = "/static/css/components/buttons.css" >
< link rel = "stylesheet" href = "/static/css/components/toast.css" >
< link rel = "stylesheet" href = "/static/css/admin.css" >
< link rel = "stylesheet" href = "/static/css/alerts.css" >
< / head >
< body >
< div class = "admin-shell" >
< div class = "admin-frame" >
{{ template "admin/header.html" . }}
< div class = "win98-window admin-workspace-window" role = "main" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< img class = "win98-titlebar-icon" src = "/static/WarpBoxLogo.png" alt = "" aria-hidden = "true" >
< h1 > WarpBox Alerts< / h1 >
< / div >
< div class = "win98-window-controls" aria-hidden = "true" >
< button class = "win98-control" type = "button" > _< / button >
< button class = "win98-control" type = "button" > □< / button >
< button class = "win98-control" type = "button" > x< / button >
< / div >
< / div >
< nav class = "menu-bar" aria-label = "Alerts toolbar" >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > File< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "refresh" > < span > R< / span > < span > Refresh alerts< / span > < span class = "shortcut" > F5< / span > < / button >
< button class = "menu-action" type = "button" data-command = "export" > < span > E< / span > < span > Export visible alerts< / span > < span > < / span > < / button >
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Alerts< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "ack" > < span > A< / span > < span > Acknowledge selected< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "close" > < span > C< / span > < span > Close selected< / span > < span > < / span > < / button >
< div class = "menu-separator" > < / div >
< button class = "menu-action" type = "button" data-command = "open-only" > < span > O< / span > < span > Show open only< / span > < span > < / span > < / button >
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Help< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "help-codes" > < span > ?< / span > < span > Tracing and codes< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "help-meta" > < span > I< / span > < span > Metadata preview< / span > < span > < / span > < / button >
< / div >
< / div >
< / nav >
< div class = "admin-workspace-body alerts-page-body" >
< section class = "alerts-summary-grid" aria-label = "Alerts summary" >
< article class = "alerts-stat-card is-danger" >
< p class = "alerts-stat-label" > Open alerts< / p >
2026-05-01 13:10:23 +03:00
< p class = "alerts-stat-value" data-open-count > {{ .OpenCount }}< / p >
2026-05-01 00:46:10 +03:00
< p class = "alerts-stat-note" > Requires attention< / p >
< / article >
< article class = "alerts-stat-card is-warning" >
< p class = "alerts-stat-label" > High severity< / p >
2026-05-01 13:10:23 +03:00
< p class = "alerts-stat-value" data-high-count > {{ .HighCount }}< / p >
2026-05-01 00:46:10 +03:00
< p class = "alerts-stat-note" > Escalate first< / p >
< / article >
< article class = "alerts-stat-card is-info" >
< p class = "alerts-stat-label" > Acknowledged< / p >
2026-05-01 13:10:23 +03:00
< p class = "alerts-stat-value" data-ack-count > {{ .AckCount }}< / p >
2026-05-01 00:46:10 +03:00
< p class = "alerts-stat-note" > Seen but not closed< / p >
< / article >
< article class = "alerts-stat-card is-info" >
< p class = "alerts-stat-label" > Closed today< / p >
2026-05-01 13:10:23 +03:00
< p class = "alerts-stat-value" data-closed-count > {{ .ClosedCount }}< / p >
2026-05-01 00:46:10 +03:00
< p class = "alerts-stat-note" > History stays lightweight< / p >
< / article >
< / section >
< section class = "alerts-content-grid" >
< div class = "alerts-column" >
< section class = "alerts-panel alerts-list-panel" >
< div class = "alerts-panel-header" >
< div class = "alerts-panel-title" > Alert list < span class = "alerts-panel-sub" > search, filter, review< / span > < / div >
< div class = "alerts-panel-tools" >
< button class = "win98-button alerts-tool-button" type = "button" data-command = "ack" > Acknowledge< / button >
< button class = "win98-button alerts-tool-button" type = "button" data-command = "close" > Close< / button >
< / div >
< / div >
< div class = "alerts-panel-body" >
< div class = "alerts-toolbar-grid" >
< input class = "alerts-input" id = "search-input" type = "search" placeholder = "Search title, code, trace or text" >
< select class = "alerts-select" id = "severity-filter" >
< option value = "all" selected > All severities< / option >
< option value = "low" > Low< / option >
< option value = "medium" > Medium< / option >
< option value = "high" > High< / option >
< / select >
< select class = "alerts-select" id = "status-filter" >
< option value = "all" selected > All statuses< / option >
< option value = "open" > Open< / option >
< option value = "acked" > Acknowledged< / option >
< option value = "closed" > Closed< / option >
< / select >
< select class = "alerts-select" id = "source-filter" >
< option value = "all" selected > All groups< / option >
< option value = "thumbnails" > Thumbnails< / option >
< option value = "storage" > Storage< / option >
< option value = "uploads" > Uploads< / option >
< option value = "auth" > Auth< / option >
< / select >
< select class = "alerts-select" id = "sort-filter" >
< option value = "newest" selected > Newest first< / option >
< option value = "severity" > Severity first< / option >
< option value = "oldest" > Oldest first< / option >
< / select >
< / div >
< div class = "alerts-table-wrap" >
< table class = "alerts-table" >
< thead >
< tr >
< th class = "alerts-col-check" > < input type = "checkbox" id = "select-all" > < / th >
< th > Title< / th >
< th class = "alerts-col-severity" > Severity< / th >
< th class = "alerts-col-status" > Status< / th >
< th class = "alerts-col-code" > Code< / th >
< th > Trace< / th >
< th class = "alerts-col-time" > Created< / th >
< th class = "alerts-col-actions" > Actions< / th >
< / tr >
< / thead >
2026-05-01 13:10:23 +03:00
< tbody id = "alerts-body" > < / tbody >
2026-05-01 00:46:10 +03:00
< / table >
< / div >
< / div >
< / section >
< / div >
< div class = "alerts-column alerts-column-side" >
< section class = "alerts-panel" >
< div class = "alerts-panel-header" >
< div class = "alerts-panel-title" > Alert details < span class = "alerts-panel-sub" > selected alert preview< / span > < / div >
< / div >
< div class = "alerts-panel-body" >
< ul class = "alerts-info-list" >
< li class = "alerts-info-item" > < strong > Title< / strong > < span id = "detail-title" > Storage connector unavailable< / span > < / li >
< li class = "alerts-info-item" > < strong > Severity< / strong > < span id = "detail-severity" > high< / span > < / li >
< li class = "alerts-info-item" > < strong > Status< / strong > < span id = "detail-status" > open< / span > < / li >
< li class = "alerts-info-item" > < strong > Code< / strong > < span id = "detail-code" > 301< / span > < / li >
< li class = "alerts-info-item" > < strong > Trace< / strong > < span id = "detail-trace" > storage.connector.health_failed< / span > < / li >
< li class = "alerts-info-item" > < strong > Created< / strong > < span id = "detail-time" > today 14:08< / span > < / li >
< li class = "alerts-info-item" > < strong > Description< / strong > < span id = "detail-description" > Primary local storage connector failed health check and new writes are paused.< / span > < / li >
< / ul >
< div class = "alerts-mini-note" >
TO-DO: later, limited alert access should only show alerts scoped to the user’
< / div >
< / div >
< / section >
< section class = "alerts-panel" >
< div class = "alerts-panel-header" >
< div class = "alerts-panel-title" > Metadata < span class = "alerts-panel-sub" > simple JSON preview< / span > < / div >
< div class = "alerts-panel-tools" >
< button class = "win98-button alerts-tool-button" type = "button" data-command = "copy-meta" > Copy< / button >
< / div >
< / div >
< div class = "alerts-panel-body" >
< pre class = "alerts-json-box" id = "detail-metadata" > {
"connector": "local-main",
"mode": "read_only",
"retry_in": "30s"
}< / pre >
< / div >
< / section >
< section class = "alerts-panel alerts-actions-panel" >
< div class = "alerts-panel-header" >
< div class = "alerts-panel-title" > Actions < span class = "alerts-panel-sub" > simple first version< / span > < / div >
< / div >
< div class = "alerts-panel-body" >
< div class = "alerts-action-stack" >
< button class = "win98-button alerts-action-button" type = "button" data-command = "ack" > Acknowledge selected< / button >
< button class = "win98-button alerts-action-button" type = "button" data-command = "close" > Close selected< / button >
2026-05-01 13:10:23 +03:00
< button class = "win98-button alerts-action-button" type = "button" data-command = "delete" > Delete selected< / button >
2026-05-01 00:46:10 +03:00
< button class = "win98-button alerts-action-button" type = "button" data-command = "refresh" > Refresh alerts< / button >
< / div >
< div class = "alerts-mini-note" >
2026-05-01 13:10:23 +03:00
Alerts persist until deleted. Acknowledge and close update state; delete removes permanently.
2026-05-01 00:46:10 +03:00
< / div >
< / div >
< / section >
< / div >
< / section >
< / div >
< div class = "alerts-footerbar" >
< div class = "alerts-footer-left" >
< span class = "alerts-status-pill" id = "selected-count" > Selected: 0< / span >
2026-05-01 13:10:23 +03:00
< span class = "alerts-status-pill" id = "alerts-total-pill" > {{ len .Alerts }} alerts< / span >
2026-05-01 00:46:10 +03:00
< / div >
< div class = "alerts-footer-right" >
< button class = "win98-button alerts-footer-button" type = "button" data-command = "ack" > Acknowledge< / button >
< button class = "win98-button alerts-footer-button" type = "button" data-command = "close" > Close< / button >
2026-05-01 13:10:23 +03:00
< button class = "win98-button alerts-footer-button" type = "button" data-command = "delete" > Delete< / button >
2026-05-01 00:46:10 +03:00
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "toast" id = "toast" role = "status" aria-live = "polite" > < / div >
2026-05-01 13:10:23 +03:00
< script id = "alerts-data" type = "application/json" > { { toJSON . Alerts } } < / script >
2026-05-01 00:46:10 +03:00
< script src = "/static/js/warpbox-ui.js" > < / script >
< script src = "/static/js/admin/alerts.js" > < / script >
< / body >
< / html >
{{ end }}
