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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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-04 00:00:36 +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 }}
