This commit is contained in:
597
main.go
597
main.go
@@ -38,18 +38,21 @@ const uiTemplates = `
|
||||
<title>{{.Title}}</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--bg-soft: #111827;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #f8fafc;
|
||||
--text: #0f172a;
|
||||
--muted: #64748b;
|
||||
--border: #e5e7eb;
|
||||
--primary: #2563eb;
|
||||
--danger: #dc2626;
|
||||
--success: #16a34a;
|
||||
--warning: #d97706;
|
||||
--shadow: 0 10px 30px rgba(15, 23, 42, .08);
|
||||
--bg: #f4f6f8;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #f8fafc;
|
||||
--surface-nav: #101828;
|
||||
--text: #101828;
|
||||
--muted: #667085;
|
||||
--border: #d0d5dd;
|
||||
--border-soft: #eaecf0;
|
||||
--primary: #175cd3;
|
||||
--primary-hover: #1849a9;
|
||||
--danger: #b42318;
|
||||
--success: #067647;
|
||||
--warning: #b54708;
|
||||
--shadow: 0 1px 2px rgba(16, 24, 40, .06);
|
||||
--radius: 6px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -57,219 +60,375 @@ const uiTemplates = `
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
|
||||
font-family: "Segoe UI", Roboto, Arial, sans-serif;
|
||||
margin: 0;
|
||||
background: #f1f5f9;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #0f172a, #111827);
|
||||
color: white;
|
||||
padding: 18px 28px;
|
||||
box-shadow: var(--shadow);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
header strong {
|
||||
font-size: 18px;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #dbeafe;
|
||||
background: rgba(255,255,255,.08);
|
||||
padding: 7px 11px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: rgba(255,255,255,.16);
|
||||
/* Header */
|
||||
|
||||
header {
|
||||
background: var(--surface-nav);
|
||||
color: #ffffff;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #1d2939;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
header > div {
|
||||
padding: 14px 28px 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.08);
|
||||
}
|
||||
|
||||
header strong {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #d0d5dd;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 12px 12px;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,.04);
|
||||
border-bottom-color: #98a2b3;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
main {
|
||||
padding: 28px;
|
||||
max-width: 1800px;
|
||||
padding: 24px 28px;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 30px;
|
||||
margin: 0 0 6px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 28px;
|
||||
font-size: 22px;
|
||||
margin: 28px 0 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
padding: 18px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.card strong {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--surface);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-soft);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #344054;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid rgba(23, 92, 211, .18);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
button.success {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
/* Quick filters - Enterprise Style */
|
||||
|
||||
.quickfilters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 12px 0 18px;
|
||||
}
|
||||
|
||||
.quickfilters a {
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 10px;
|
||||
box-shadow: none;
|
||||
font-size: 13px;
|
||||
color: #344054;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.quickfilters a:hover {
|
||||
background: #f9fafb;
|
||||
border-color: #98a2b3;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-radius: 18px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-soft);
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
background: white;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
background: #ffffff;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 11px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 9px 11px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
vertical-align: top;
|
||||
max-width: 520px;
|
||||
max-width: 560px;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--panel-soft);
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
background: #f9fafb;
|
||||
color: #475467;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: #f8fafc;
|
||||
tbody tr:hover td {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 18px 0;
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
/* Badges */
|
||||
|
||||
.quickfilters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 12px 0 18px;
|
||||
}
|
||||
|
||||
.quickfilters a {
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.checkline {
|
||||
display: flex;
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border-radius: 4px;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.checkline input {
|
||||
width: auto;
|
||||
.sev-critical {
|
||||
background: #fef3f2;
|
||||
color: #912018;
|
||||
border-color: #fecdca;
|
||||
}
|
||||
|
||||
.quickfilters a:hover {
|
||||
background: #eff6ff;
|
||||
.sev-high {
|
||||
background: #fff4ed;
|
||||
color: #9c2a10;
|
||||
border-color: #ffd6ae;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
.sev-medium {
|
||||
background: #fffaeb;
|
||||
color: #93370d;
|
||||
border-color: #fedf89;
|
||||
}
|
||||
|
||||
.sev-low {
|
||||
background: #ecfdf3;
|
||||
color: #05603a;
|
||||
border-color: #abefc6;
|
||||
}
|
||||
|
||||
.sev-info {
|
||||
background: #eff8ff;
|
||||
color: #175cd3;
|
||||
border-color: #b2ddff;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
background: #eff8ff;
|
||||
color: #175cd3;
|
||||
border-color: #b2ddff;
|
||||
}
|
||||
|
||||
.status-acknowledged {
|
||||
background: #f4f3ff;
|
||||
color: #5925dc;
|
||||
border-color: #d9d6fe;
|
||||
}
|
||||
|
||||
.status-investigating {
|
||||
background: #fffaeb;
|
||||
color: #93370d;
|
||||
border-color: #fedf89;
|
||||
}
|
||||
|
||||
.status-plausible {
|
||||
background: #f0f9ff;
|
||||
color: #026aa2;
|
||||
border-color: #b9e6fe;
|
||||
}
|
||||
|
||||
.status-legitimate {
|
||||
background: #ecfdf3;
|
||||
color: #05603a;
|
||||
border-color: #abefc6;
|
||||
}
|
||||
|
||||
.status-false_positive {
|
||||
background: #f2f4f7;
|
||||
color: #344054;
|
||||
border-color: #d0d5dd;
|
||||
}
|
||||
|
||||
.status-resolved {
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
border-color: #99f6e4;
|
||||
}
|
||||
|
||||
.status-suppressed {
|
||||
background: #f2f4f7;
|
||||
color: #475467;
|
||||
border-color: #d0d5dd;
|
||||
}
|
||||
|
||||
.status-confirmed_incident {
|
||||
background: #fef3f2;
|
||||
color: #912018;
|
||||
border-color: #fecdca;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
|
||||
.wrap {
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, monospace;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 9px 13px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: brightness(.95);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
button.success {
|
||||
background: var(--success);
|
||||
.note {
|
||||
margin-top: 8px;
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
background: #f9fafb;
|
||||
border-left: 3px solid #98a2b3;
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
background: #020617;
|
||||
color: #e5e7eb;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: #101828;
|
||||
color: #f2f4f7;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
border: 1px solid #344054;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -278,94 +437,8 @@ a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 4px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sev-critical {
|
||||
background: #450a0a;
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
.sev-high {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.sev-medium {
|
||||
background: #ffedd5;
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.sev-low {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.sev-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
background: #e0f2fe;
|
||||
color: #075985;
|
||||
}
|
||||
|
||||
.status-acknowledged {
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
|
||||
.status-investigating {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-legitimate {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.status-false_positive {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.status-resolved {
|
||||
background: #ccfbf1;
|
||||
color: #115e59;
|
||||
}
|
||||
|
||||
.status-suppressed {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 8px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
padding: 8px;
|
||||
background: #f8fafc;
|
||||
border-left: 3px solid #94a3b8;
|
||||
border-radius: 8px;
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mini-form {
|
||||
@@ -379,13 +452,55 @@ a {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.checkline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #475467;
|
||||
}
|
||||
|
||||
.checkline input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Agent status aliases */
|
||||
|
||||
.badge-on {
|
||||
background: #ecfdf3;
|
||||
color: #05603a;
|
||||
border-color: #abefc6;
|
||||
}
|
||||
|
||||
.badge-off {
|
||||
background: #fef3f2;
|
||||
color: #912018;
|
||||
border-color: #fecdca;
|
||||
}
|
||||
|
||||
.badge-muted {
|
||||
background: #f2f4f7;
|
||||
color: #344054;
|
||||
border-color: #d0d5dd;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
th {
|
||||
position: static;
|
||||
header > div {
|
||||
padding: 12px 16px 8px;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.card strong {
|
||||
@@ -396,13 +511,13 @@ a {
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div><strong>SIEM-lite</strong></div>
|
||||
<div><strong>SIEM-lite Security Operations</strong></div>
|
||||
<nav>
|
||||
<a href="/ui">Dashboard</a>
|
||||
<a href="/ui/soc">SOC</a>
|
||||
<a href="/ui/agents">Agents</a>
|
||||
<a href="/ui/rules">Rules</a>
|
||||
<a href="/ui/baseline">Baseline</a>
|
||||
<a href="/ui/soc">SOC</a>
|
||||
<a href="/ui">Overview</a>
|
||||
<a href="/ui/agents">Agents</a>
|
||||
<a href="/ui/rules">Rules</a>
|
||||
<a href="/ui/baseline">Baseline</a>
|
||||
<a href="/ui/detections">Detections</a>
|
||||
<a href="/ui/events">Events</a>
|
||||
<a href="/metrics">Metrics</a>
|
||||
|
||||
Reference in New Issue
Block a user