From c73bab139b4c7ee4d3d1be01cb4666df60a234cd Mon Sep 17 00:00:00 2001 From: OfficeCom Codex Date: Sat, 1 Aug 2026 02:09:53 +0200 Subject: [PATCH] Refine Sentinel security dashboard hierarchy --- infra/debug-dashboard/static/app.css | 10 +++++++ infra/debug-dashboard/templates/base.html | 8 +++--- infra/debug-dashboard/templates/device.html | 5 +++- infra/debug-dashboard/templates/overview.html | 27 ++++++++++++++++++- 4 files changed, 45 insertions(+), 5 deletions(-) diff --git a/infra/debug-dashboard/static/app.css b/infra/debug-dashboard/static/app.css index ec4880d..884f0b5 100644 --- a/infra/debug-dashboard/static/app.css +++ b/infra/debug-dashboard/static/app.css @@ -66,3 +66,13 @@ body { background:radial-gradient(circle at 8% -10%,rgba(102,176,225,.24),transp } @keyframes sentinel-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } + +/* Operational hierarchy and responsive chrome. */ +.skip-link { position:fixed; z-index:20; top:10px; left:10px; padding:10px 13px; border-radius:8px; background:var(--lime); color:var(--navy); font-weight:800; text-decoration:none; transform:translateY(-160%); transition:transform .2s ease; } +.skip-link:focus { transform:translateY(0); } +.wordmark { display:flex; align-items:center; gap:8px; }.wordmark .wordmark-mark { display:grid; flex:0 0 auto; place-items:center; width:29px; height:29px; margin:0; border-radius:8px; background:var(--lime); color:#102a43; font:800 10px var(--font-sans); letter-spacing:0; }.wordmark .wordmark-name { display:grid; gap:1px; color:#fff; font:800 18px/1 var(--font-sans); letter-spacing:-.045em; }.wordmark .wordmark-name small { color:#9cc8e8; font:700 8px/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; } +.app-footer { display:flex; justify-content:space-between; gap:16px; max-width:1280px; margin:0 auto; padding:0 6vw 32px; color:#6c8494; font-size:10px; letter-spacing:.04em; }.app-footer span:first-child { color:#426277; font-weight:800; text-transform:uppercase; } +.priority-board { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(0,1.65fr); gap:1px; margin:0 0 30px; overflow:hidden; border:1px solid #193a53; border-radius:16px; background:#193a53; box-shadow:0 20px 42px rgba(16,42,67,.15); }.priority-intro { display:grid; align-content:space-between; min-height:272px; padding:27px; color:#eaf3f8; background:radial-gradient(circle at 15% 8%,rgba(79,163,223,.2),transparent 16rem),linear-gradient(145deg,#153b58,#0d2437); }.priority-intro .eyebrow { color:#a4cae4; }.priority-intro h2 { margin:10px 0; font-size:clamp(28px,3.2vw,43px); line-height:.95; letter-spacing:-.065em; }.priority-intro p { max-width:290px; margin:0; color:#b7ccda; font-size:13px; line-height:1.55; }.priority-sync { display:flex; align-items:center; gap:8px; margin-top:20px; color:#9fc0d2; font:700 10px var(--font-sans); }.priority-sync i { width:7px; height:7px; border-radius:50%; background:#72d39c; box-shadow:0 0 0 5px rgba(114,211,156,.12); }.priority-list { display:grid; align-content:center; gap:1px; background:#d7e4ec; }.priority-item { display:grid; grid-template-columns:34px minmax(0,1fr) 24px; align-items:center; gap:15px; min-height:90px; padding:16px 22px; background:rgba(255,255,255,.96); color:var(--ink); text-decoration:none; transition:background .2s ease,transform .2s ease; }.priority-item:hover { background:#f4faff; }.priority-item.critical:hover { background:#fff4f1; }.priority-index { align-self:start; color:#8aa0ae; font:700 11px var(--font-mono); }.priority-item strong,.priority-item small { display:block; }.priority-item strong { margin:6px 0 3px; font-size:18px; letter-spacing:-.035em; }.priority-item small { overflow:hidden; color:#657f90; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.priority-arrow { color:#3a7196; font-size:20px; transition:transform .2s ease; }.priority-item:hover .priority-arrow { transform:translate(2px,-2px); }.priority-calm { display:grid; align-content:center; justify-items:start; gap:9px; padding:30px; color:#eaf3f8; background:linear-gradient(145deg,#173d4b,#0e2a35); }.priority-calm .status-orb { margin:0 0 8px; }.priority-calm strong { font-size:22px; letter-spacing:-.04em; }.priority-calm p { margin:0; color:#b4cbd4; font-size:13px; }.priority-board.calm { grid-template-columns:minmax(240px,.82fr) minmax(0,1.65fr); } +.device-hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:end; min-height:225px; margin:0 0 18px; padding:31px 33px; overflow:hidden; border:1px solid rgba(134,192,225,.24); border-radius:18px; color:#ecf5fb; background:radial-gradient(circle at 88% 10%,rgba(96,183,227,.25),transparent 17rem),linear-gradient(135deg,#102f49,#0a1d2c 72%); box-shadow:0 24px 50px rgba(18,51,75,.15); }.device-hero.warning { background:radial-gradient(circle at 88% 10%,rgba(247,181,91,.22),transparent 17rem),linear-gradient(135deg,#40301a,#20180e 72%); }.device-hero.critical { background:radial-gradient(circle at 88% 10%,rgba(240,110,100,.24),transparent 17rem),linear-gradient(135deg,#45252b,#1d1116 72%); }.device-hero .eyebrow { color:#a6d2ec; }.device-hero h1 { margin:9px 0 12px; font-size:clamp(37px,5vw,62px); line-height:.92; letter-spacing:-.07em; }.device-hero p { margin:0; color:#bdd3e1; font-size:13px; line-height:1.55; }.device-hero-state { display:grid; gap:5px; padding:18px; border:1px solid rgba(168,216,241,.26); border-radius:14px; background:rgba(4,22,35,.34); }.device-hero-state > span:not(.status-orb) { color:#a9c7d8; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.device-hero-state strong { font-size:27px; letter-spacing:-.055em; text-transform:capitalize; }.device-hero-state small { color:#c5d9e5; font-size:11px; line-height:1.45; } +.header-links a,.state,.event-count,.recipient-form button,.rule-actions button,table,th,td,.map-toolbar input,.map-toolbar select,.map-toolbar button { font-family:var(--font-sans); } +@media (max-width:850px) { .masthead { gap:14px; align-items:center; }.header-links { gap:4px; overflow:auto; max-width:calc(100vw - 155px); flex-wrap:nowrap; }.header-links a { flex:0 0 auto; padding:7px 8px; font-size:11px; }.wordmark .wordmark-name small { display:none; }.app-footer { align-items:flex-start; flex-direction:column; padding-bottom:24px; }.priority-board,.priority-board.calm,.device-hero { grid-template-columns:1fr; }.priority-intro { min-height:215px; }.priority-list { gap:1px; }.priority-item { min-height:84px; padding:15px 17px; }.priority-item small { white-space:normal; }.device-hero { min-height:0; padding:28px 24px; }.device-hero-state { max-width:none; }.device-hero h1 { font-size:42px; } } diff --git a/infra/debug-dashboard/templates/base.html b/infra/debug-dashboard/templates/base.html index 842b27f..4002564 100644 --- a/infra/debug-dashboard/templates/base.html +++ b/infra/debug-dashboard/templates/base.html @@ -10,10 +10,12 @@ +
- OCSentinel - + OCSentinel Security console +
-
{% block content %}{% endblock %}
+
{% block content %}{% endblock %}
+ diff --git a/infra/debug-dashboard/templates/device.html b/infra/debug-dashboard/templates/device.html index 3e35fd9..08d6111 100644 --- a/infra/debug-dashboard/templates/device.html +++ b/infra/debug-dashboard/templates/device.html @@ -1,7 +1,10 @@ {% extends "base.html" %} {% block title %}{{ report[0] }} - OC Sentinel{% endblock %} {% block content %} -

{{ report[0] }}

{{ report[6] }}{% if report[8] %}{{ 'aktuell' if event.is_current else 'historisch' }}: {{ event.label }}{% endif %}
+
+
Geraeteanalyse

{{ report[0] }}

Letzter Scan {{ report[5] or '-' }} · Client zuletzt gesehen {{ report[2] or '-' }}

+
Aktueller Status{{ report[6] }}{% if report[8] %}{{ 'Aktuelles Signal' if event.is_current else 'Historisches Signal' }} · {{ event.label }}{% else %}Keine Ereignisse im letzten Scan{% endif %}
+
Ereignisse{{ report[8] }}
Quell-IPs{{ report[9] }}
CVEs{{ report[10] }}
Kritische CVEs{{ report[11] }}
{% if ransomware_beta.enabled %}
Passive Beta

Ransomware-Frueherkennung {{ ransomware_beta.state }}

{{ ransomware_beta.reason }}

{% for signal in ransomware_beta.signals %}{% else %}{% endfor %}
ZeitpunktSignalProzessQuelleBewertung
{{ signal.timestamp }}{{ signal.category }}{{ signal.process }}{{ signal.source }}{{ signal.confidence }}
Keine Signale im aktuellen Beta-Zeitfenster.
{% endif %} {% if ransomware_beta.enabled %}
Beta-Abdeckung

Erkennungsquellen Verfuegbarkeit im letzten Scan

Ein unauffaelliger Zeitraum ist nur dann belastbar, wenn die benoetigten Datenquellen erreichbar waren.

{% for sensor in ransomware_sensors %}
{{ sensor.state }}
{{ sensor.label }}

{% if not sensor.enabled %}Nicht fuer diesen Client aktiviert.{% elif sensor.available %}{{ sensor.event_count }} Ereignisse im Zeitfenster verarbeitet.{% elif sensor.state == 'not-installed' %}Protokollquelle ist auf diesem System nicht installiert.{% else %}Quelle konnte im letzten Scan nicht verwendet werden.{% endif %}

{% else %}
Dieser Client sendet noch keine Abdeckungsdaten. Nach dem Update auf Beta 1.5.0-beta.5 erscheint die Sensoransicht automatisch.
{% endfor %}
{% endif %} diff --git a/infra/debug-dashboard/templates/overview.html b/infra/debug-dashboard/templates/overview.html index 56e3ba6..03ece1b 100644 --- a/infra/debug-dashboard/templates/overview.html +++ b/infra/debug-dashboard/templates/overview.html @@ -16,6 +16,31 @@
Abdeckung{{ coverage[1] }}/{{ coverage[0] }}{{ coverage[2] }} stumm > 36 Std.
+{% if alerts %} +
+
+ Einsatzfokus +

Was jetzt
Aufmerksamkeit braucht.

+

Priorisiert nach Schweregrad und zuletzt gemeldetem Signal.

+
Letzter Datenstand: {{ summary[7] or '-' }}
+
+
+ {% for alert in alerts[:3] %} + + 0{{ loop.index }} +
{{ alert.alert_state }}{{ alert.machine_name }}{{ alert.total_events }} Ereignisse · {{ alert.unique_ip_count }} Quell-IPs · {{ alert.event.label }}
+ + + {% endfor %} +
+
+{% else %} +
+
Einsatzfokus

Aktuell keine
offenen Signale.

Die meldenden Systeme liefern derzeit keine auffaelligen Sicherheitsereignisse.

Letzter Datenstand: {{ summary[7] or '-' }}
+
Keine unmittelbare Aktion notwendig

Behalte Abdeckung und Berichtsintervall im Blick.

+
+{% endif %} +
Letzte 14 Tage

Signalverlauf Verdichtete Scan-Ergebnisse pro Tag

{% for day in trend %}
{{ day.event_count }}{{ day.day.strftime('%d.%m.') }}
{% else %}

Noch keine Trenddaten vorhanden.

{% endfor %}
@@ -34,7 +59,7 @@ {% if alerts %}
-

Auffaellige Geraete {{ current_alert_count }} aktuell, {{ alerts|length - current_alert_count }} historisch

+
Vollstaendige Liste

Auffaellige Geraete {{ current_alert_count }} aktuell, {{ alerts|length - current_alert_count }} historisch

{% for alert in alerts %}