sl-webui
44691742c8
Standalone 3-file filterable real-time event log (no build step).
Files:
ui/event_log_panel.html — layout, toolbar, empty state
ui/event_log_panel.js — rosbridge subscriptions, ring buffer, render
ui/event_log_panel.css — dark-theme, responsive grid layout
Features:
- 1000-entry ring buffer (oldest dropped when full, FIFO)
- Subscribes /rosout (rcl_interfaces/msg/Log) + /saltybot/events (std_msgs/String JSON)
- Severity filter buttons: DEBUG / INFO / WARN / ERROR / FATAL / EVENT (toggle on/off)
- Node name filter: select dropdown populated from seen nodes
- Live text search with <mark> highlight, Ctrl+F shortcut, Esc to clear
- Auto-scroll to latest entry; pauses on mouse hover (messages still buffered)
- Manual pause/resume button; detects user scroll-up and stops auto-scroll
- CSV export of current filtered view with timestamp (filename includes ISO date)
- Clear all entries button
- Color-coded by severity: left border stripe + text color per level
- Entry columns: timestamp (ms precision) | severity | node | message
- [system] entries for connect/disconnect events
- WS URL persisted in localStorage
- Responsive: node column hidden on narrow screens
ROS topics:
SUB /rosout rcl_interfaces/msg/Log (all nodes)
SUB /saltybot/events std_msgs/String (JSON: {level,node,msg})
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
210 lines
6.5 KiB
CSS
210 lines
6.5 KiB
CSS
/* event_log_panel.css — Saltybot Event Log Panel (Issue #576) */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg0: #050510;
|
|
--bg1: #070712;
|
|
--bg2: #0a0a1a;
|
|
--bd: #0c2a3a;
|
|
--bd2: #1e3a5f;
|
|
--dim: #374151;
|
|
--mid: #6b7280;
|
|
--base: #9ca3af;
|
|
--hi: #d1d5db;
|
|
--cyan: #06b6d4;
|
|
--green: #22c55e;
|
|
--amber: #f59e0b;
|
|
--red: #ef4444;
|
|
--purple: #a855f7;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 12px;
|
|
background: var(--bg0);
|
|
color: var(--base);
|
|
height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Header ── */
|
|
#header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
background: var(--bg1);
|
|
border-bottom: 1px solid var(--bd);
|
|
flex-shrink: 0;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.logo { color: #f97316; font-weight: bold; letter-spacing: 0.15em; font-size: 13px; flex-shrink: 0; }
|
|
|
|
#conn-dot {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--dim); flex-shrink: 0; transition: background 0.3s;
|
|
}
|
|
#conn-dot.connected { background: var(--green); }
|
|
#conn-dot.error { background: var(--red); animation: blink 1s infinite; }
|
|
|
|
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
|
|
|
|
#ws-input {
|
|
background: var(--bg2); border: 1px solid var(--bd2); border-radius: 4px;
|
|
color: #67e8f9; padding: 2px 7px; font-family: monospace; font-size: 11px; width: 190px;
|
|
}
|
|
#ws-input:focus { outline: none; border-color: var(--cyan); }
|
|
|
|
.hbtn {
|
|
padding: 2px 8px; border-radius: 4px; border: 1px solid var(--bd2);
|
|
background: var(--bg2); color: #67e8f9; font-family: monospace;
|
|
font-size: 10px; font-weight: bold; cursor: pointer; transition: background .15s; white-space: nowrap;
|
|
}
|
|
.hbtn:hover { background: #0e4f69; }
|
|
.hbtn.active { background: #0e4f69; border-color: var(--cyan); }
|
|
.hbtn.pause { background: #451a03; border-color: #92400e; color: #fcd34d; }
|
|
.hbtn.pause:hover { background: #6b2b04; }
|
|
|
|
#count-badge {
|
|
font-size: 10px; color: var(--mid); white-space: nowrap; margin-left: auto;
|
|
}
|
|
#paused-indicator {
|
|
font-size: 10px; color: #fcd34d; display: none; animation: blink 1.5s infinite;
|
|
}
|
|
#paused-indicator.visible { display: inline; }
|
|
|
|
/* ── Toolbar ── */
|
|
#toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
background: var(--bg1);
|
|
border-bottom: 1px solid var(--bd);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Severity filter buttons */
|
|
.sev-btn {
|
|
padding: 2px 7px; border-radius: 3px; border: 1px solid;
|
|
font-family: monospace; font-size: 9px; font-weight: bold;
|
|
cursor: pointer; transition: opacity .15s, filter .15s; letter-spacing: 0.05em;
|
|
}
|
|
.sev-btn.off { opacity: 0.25; filter: grayscale(0.6); }
|
|
|
|
.sev-debug { background: #1a1a2e; border-color: #4b5563; color: #9ca3af; }
|
|
.sev-info { background: #032a1e; border-color: #065f46; color: #34d399; }
|
|
.sev-warn { background: #3d1a00; border-color: #92400e; color: #fbbf24; }
|
|
.sev-error { background: #3d0000; border-color: #991b1b; color: #f87171; }
|
|
.sev-fatal { background: #2e003d; border-color: #7e22ce; color: #c084fc; }
|
|
.sev-event { background: #001a3d; border-color: #1d4ed8; color: #60a5fa; }
|
|
|
|
/* Search input */
|
|
#search-input {
|
|
background: var(--bg2); border: 1px solid var(--bd2); border-radius: 4px;
|
|
color: var(--hi); padding: 2px 7px; font-family: monospace; font-size: 11px;
|
|
width: 160px;
|
|
}
|
|
#search-input:focus { outline: none; border-color: var(--cyan); }
|
|
|
|
#node-filter {
|
|
background: var(--bg2); border: 1px solid var(--bd2); border-radius: 4px;
|
|
color: var(--base); padding: 2px 5px; font-family: monospace; font-size: 10px;
|
|
max-width: 140px;
|
|
}
|
|
#node-filter:focus { outline: none; border-color: var(--cyan); }
|
|
|
|
.toolbar-sep { width: 1px; height: 16px; background: var(--bd2); flex-shrink: 0; }
|
|
|
|
/* ── Main layout ── */
|
|
#main {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── Log feed ── */
|
|
#log-feed {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 4px 0;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--bd2) var(--bg0);
|
|
}
|
|
#log-feed::-webkit-scrollbar { width: 6px; }
|
|
#log-feed::-webkit-scrollbar-track { background: var(--bg0); }
|
|
#log-feed::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px; }
|
|
|
|
/* ── Log entry ── */
|
|
.log-entry {
|
|
display: grid;
|
|
grid-template-columns: 80px 54px minmax(80px,160px) 1fr;
|
|
gap: 0 8px;
|
|
align-items: baseline;
|
|
padding: 2px 12px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: background 0.1s;
|
|
cursor: default;
|
|
}
|
|
.log-entry:hover { background: rgba(255,255,255,0.025); border-bottom-color: var(--bd); }
|
|
|
|
.log-entry.sev-debug { border-left: 2px solid #4b5563; }
|
|
.log-entry.sev-info { border-left: 2px solid #065f46; }
|
|
.log-entry.sev-warn { border-left: 2px solid #92400e; }
|
|
.log-entry.sev-error { border-left: 2px solid #991b1b; }
|
|
.log-entry.sev-fatal { border-left: 2px solid #7e22ce; }
|
|
.log-entry.sev-event { border-left: 2px solid #1d4ed8; }
|
|
|
|
.log-ts { color: var(--mid); font-size: 10px; white-space: nowrap; }
|
|
.log-sev { font-size: 9px; font-weight: bold; letter-spacing: 0.05em; white-space: nowrap; }
|
|
.log-node { color: var(--mid); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.log-msg { color: var(--hi); font-size: 11px; word-break: break-word; white-space: pre-wrap; }
|
|
|
|
.log-entry.sev-debug .log-sev { color: #9ca3af; }
|
|
.log-entry.sev-info .log-sev { color: #34d399; }
|
|
.log-entry.sev-warn .log-sev { color: #fbbf24; }
|
|
.log-entry.sev-error .log-sev { color: #f87171; }
|
|
.log-entry.sev-fatal .log-sev { color: #c084fc; }
|
|
.log-entry.sev-event .log-sev { color: #60a5fa; }
|
|
|
|
.log-entry.sev-error .log-msg { color: #fca5a5; }
|
|
.log-entry.sev-fatal .log-msg { color: #e9d5ff; }
|
|
.log-entry.sev-warn .log-msg { color: #fde68a; }
|
|
|
|
/* Search highlight */
|
|
mark {
|
|
background: rgba(234,179,8,0.35);
|
|
color: inherit;
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
/* Empty state */
|
|
#empty-state {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
height: 100%; color: var(--dim); gap: 8px;
|
|
user-select: none;
|
|
}
|
|
#empty-state .icon { font-size: 40px; }
|
|
|
|
/* ── Footer ── */
|
|
#footer {
|
|
background: var(--bg1); border-top: 1px solid var(--bd);
|
|
padding: 3px 12px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
flex-shrink: 0; font-size: 10px; color: var(--dim);
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
@media (max-width: 640px) {
|
|
.log-entry { grid-template-columns: 70px 44px 1fr; }
|
|
.log-node { display: none; }
|
|
#search-input { width: 100px; }
|
|
#node-filter { max-width: 90px; }
|
|
}
|