New group logging
This commit is contained in:
Pierre committed
1 parent
400837b41a
commit
cded4a0200
14 files changed
+324
-75
No files matched your search
@@ -1,4 +1,8 @@
|
||||
:root{color-scheme:dark light;--bg:var(--vscode-editor-background,#111820);--fg:var(--vscode-editor-foreground,#dae3ed);--panel:var(--vscode-sideBar-background,#18212c);--border:var(--vscode-panel-border,#334252);--muted:var(--vscode-descriptionForeground,#a0afbf);--accent:var(--vscode-focusBorder,#6caef0)}
|
||||
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:13px var(--vscode-font-family,system-ui,sans-serif)}header{padding:22px 24px 16px;display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:21px;margin:0}h1 span{font-weight:400;color:var(--muted);font-size:16px;margin-left:10px}p{color:var(--muted);line-height:1.6}header p{margin:7px 0 0}.actions{display:flex;gap:8px}button,input,select{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 10px}button{cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}nav{display:flex;align-items:center;gap:10px;padding:0 24px 18px;flex-wrap:wrap}nav input[type=search]{flex:1;min-width:220px}nav label{display:flex;align-items:center;gap:6px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(350px,1fr) minmax(380px,1fr);border-top:1px solid var(--border);height:calc(100vh - 150px)}section{overflow:auto;padding:18px 20px}.apps{border-right:1px solid var(--border)}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:10px}h2{font-size:14px;margin:0}.section-title>span{color:var(--muted)}details{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;background:var(--panel)}summary{cursor:pointer;padding:12px;display:flex;align-items:center;gap:10px}summary:before{content:'▸';color:var(--muted)}details[open]>summary:before{content:'▾'}summary .name{flex:1;overflow-wrap:anywhere}.badge{border-radius:5px;padding:3px 6px;font-size:11px;font-weight:600;white-space:nowrap}.INFO,.DEBUG{color:#91c5fa;background:#284561}.WARNING{color:#f3cd80;background:#594925}.ERROR,.CRITICAL{color:#ffacac;background:#5b3039}.rows{border-top:1px solid var(--border)}.row{display:block;width:100%;text-align:left;border:0;border-radius:0;background:transparent;padding:11px 13px;border-bottom:1px solid var(--border)}.row:last-child{border-bottom:0}.row.selected{background:var(--vscode-list-activeSelectionBackground,#263f57);box-shadow:inset 3px 0 var(--accent)}.row-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;margin-bottom:5px}.row-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.link-hint{margin-left:auto;color:var(--accent)}.empty{padding:40px 15px;color:var(--muted);line-height:1.6;text-align:center}.selected-message{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.metadata{color:var(--muted);font-size:12px;margin:8px 0 15px}.legend{color:var(--muted);font-size:12px;margin:15px 0}.graph{overflow:auto;position:relative;margin:20px 0;min-height:120px}.graph svg{position:absolute;left:0;top:0;pointer-events:none}.graph-stage{position:relative}.node{position:absolute;width:320px;height:115px;overflow:auto;padding:12px;text-align:left;background:var(--panel);font-size:12px;line-height:1.5}.node strong{display:block;color:var(--accent);margin-bottom:5px}.node .text{white-space:pre-wrap;overflow-wrap:anywhere}.node.target{border-color:var(--accent)}.node.missing{border-style:dashed;color:var(--muted)}.tree ul{padding-left:23px;list-style:none;border-left:1px solid var(--border)}.tree li{margin:12px 0}.tree button{text-align:left;line-height:1.5}.tree .probable{color:#f3cd80;font-size:11px}.values{width:100%;border-collapse:collapse;font-size:12px}.values td{padding:8px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.values td:first-child{color:var(--muted)}#warnings{color:#f3cd80;padding:0 24px}#warnings:empty{display:none}.more{padding:12px;color:var(--muted)}@media(max-width:850px){main{grid-template-columns:1fr;height:auto}.apps{border-right:0;border-bottom:1px solid var(--border)}section{max-height:65vh}header{align-items:flex-start;padding:18px}nav{padding:0 18px 15px}summary{gap:6px}.badge{font-size:10px}}
|
||||
.app-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.last-log{color:var(--muted);font-size:11px;font-weight:400;overflow-wrap:anywhere}.row{cursor:pointer;user-select:text;-webkit-user-select:text}.row:hover{background:var(--vscode-list-hoverBackground,#203040)}.selected-message,.row-message,.node,.tree,.values{user-select:text;-webkit-user-select:text}.init-group{margin:10px;background:var(--bg)}.init-summary{font-size:12px;color:var(--muted);flex-wrap:wrap}.init-rows>button{margin:8px 12px}.section-title{flex-wrap:wrap}.section-title select{font-size:12px}.actions{flex-wrap:wrap}
|
||||
.app-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.last-log{color:var(--muted);font-size:11px;font-weight:400;overflow-wrap:anywhere}.row{cursor:pointer;user-select:text;-webkit-user-select:text}.row:hover{background:var(--vscode-list-hoverBackground,#203040)}.selected-message,.row-message,.node,.tree,.values{user-select:text;-webkit-user-select:text}.section-title{flex-wrap:wrap}.section-title select{font-size:12px}.actions{flex-wrap:wrap}
|
||||
@keyframes new-log-pulse{0%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}25%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 85%,transparent);background-color:color-mix(in srgb,var(--accent) 12%,var(--panel))}100%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}.new-log-app>summary{animation:new-log-pulse 1.8s ease-out}.recent-log{animation:new-log-pulse 1.8s ease-out}@media(prefers-reduced-motion:reduce){.new-log-app>summary,.recent-log{animation:none;outline:2px solid var(--accent);outline-offset:-2px}}
|
||||
|
||||
.log-message.level-WARNING{color:var(--vscode-editorWarning-foreground,#f3cd80)}.log-message.level-ERROR{color:var(--vscode-editorError-foreground,#ffacac)}
|
||||
|
||||
.block-title{font-weight:600;margin-bottom:6px;color:var(--fg);overflow-wrap:anywhere}
|
||||
@@ -4,7 +4,7 @@
|
||||
<link rel="stylesheet" href="{{CSS}}"><title>AppDaemon · Logs</title></head>
|
||||
<body>
|
||||
<header><div><h1>AppDaemon <span>Logs</span></h1><p id="status" role="status">Reading logs…</p></div><div class="actions"><button id="import">Open history</button><button id="copy">Copy selected log</button><button id="pause">Pause</button></div></header>
|
||||
<nav aria-label="Filters"><input id="search" type="search" placeholder="Search apps, entities and messages…" aria-label="Search"><select id="period" aria-label="Time range"><option value="15">15 minutes</option><option value="60">1 hour</option><option value="1440">24 hours</option><option value="0" selected>All loaded</option></select><select id="level" aria-label="Level"><option value="all">All levels</option><option value="INFO">INFO</option><option value="WARNING">WARNING</option><option value="ERROR">ERROR</option><option value="DEBUG">DEBUG</option></select><label><input id="group-init" type="checkbox" checked> Group initialization</label></nav>
|
||||
<nav aria-label="Filters"><input id="search" type="search" placeholder="Search apps, entities and messages…" aria-label="Search"><select id="period" aria-label="Time range"><option value="15">15 minutes</option><option value="60">1 hour</option><option value="1440">24 hours</option><option value="0" selected>All loaded</option></select><select id="level" aria-label="Level"><option value="all">All levels</option><option value="INFO">INFO</option><option value="WARNING">WARNING</option><option value="ERROR">ERROR</option><option value="DEBUG">DEBUG</option></select></nav>
|
||||
<div id="warnings" role="status"></div>
|
||||
<main><section class="apps" aria-label="Applications"><div class="section-title"><h2>Applications</h2><span id="count"></span><select id="sort" aria-label="Sort apps"><option value="latest" selected>Latest log first</option><option value="oldest">Oldest log first</option><option value="name">App name</option></select></div><div id="apps"></div></section><section class="causes" aria-label="Log details"><div class="section-title"><h2>Log details</h2><div><button id="graph-mode" aria-pressed="true">Graph</button><button id="tree-mode" aria-pressed="false">Tree</button></div></div><div id="detail"><div class="empty">Select a log to view its details.<p>The base AppDaemon log format does not include causal links.</p></div></div></section></main>
|
||||
<script nonce="{{NONCE}}" src="{{JS}}"></script></body></html>
|
||||
@@ -15,7 +15,6 @@
|
||||
const saved = vscode.getState() || {};
|
||||
let entries = [], latest, appliedMessage, displayZone = 'Europe/Berlin', paused = false, selected = saved.selected, mode = saved.mode || 'graph', origin = saved.origin || saved.selected;
|
||||
const expanded = new Set(saved.expanded || []);
|
||||
const expandedInit = new Set(saved.expandedInit || []);
|
||||
const visibleEventGroups = new Map();
|
||||
const recentEvents = new Set();
|
||||
const recentApps = new Set();
|
||||
@@ -25,7 +24,7 @@
|
||||
const $ = id => document.getElementById(id);
|
||||
const node = (tag, text, cls) => { const e = document.createElement(tag); if (text !== undefined) e.textContent = text; if (cls) e.className = cls; return e; };
|
||||
const normalLevel = e => e.level === 'CRITICAL' ? 'ERROR' : e.level;
|
||||
function save() { vscode.setState({ selected, mode, origin, expanded: [...expanded], expandedInit: [...expandedInit], sort: $('sort').value, groupInit: $('group-init').checked }); }
|
||||
function save() { vscode.setState({ selected, mode, origin, expanded: [...expanded], sort: $('sort').value }); }
|
||||
function choose(id, fromList = true) { if (fromList) origin = id; selected = id; save(); renderApps(); renderDetail(); }
|
||||
function filtered() {
|
||||
const q = $('search').value.toLowerCase(), level = $('level').value, minutes = Number($('period').value);
|
||||
@@ -34,7 +33,7 @@
|
||||
&& (level === 'all' || normalLevel(e) === level)
|
||||
&& `${e.app} ${e.entity || ''} ${e.message}`.toLowerCase().includes(q));
|
||||
}
|
||||
const cleanMessage = e => e.message.replace(/ \[event=[\w-]+ trace=[\w-]+\]/g, '').replace(/ \[init=[\w-]+\]/g, '');
|
||||
const cleanMessage = e => e.message.replace(/ \[event=[\w-]+ trace=[\w-]+\]/g, '').replace(/ \[init=[\w-]+\]/g, '').replace(/ \[group=(?:initialization|smartcondition|value_selector):[a-f0-9]{12}\]/gi, '');
|
||||
const formatTime = (entry, includeYear = false) => {
|
||||
if (!Number.isFinite(entry.time)) return entry.timestamp;
|
||||
try {
|
||||
@@ -57,6 +56,22 @@
|
||||
return `${years} year${years === 1 ? '' : 's'} ago`;
|
||||
}
|
||||
function copy(text) { if (text) vscode.postMessage({ type: 'copy', text }); }
|
||||
function logMessages(items, cls) {
|
||||
const container = node('div', undefined, cls);
|
||||
items.forEach((entry, index) => {
|
||||
if (index) container.append(document.createTextNode('\n'));
|
||||
container.append(node('span', cleanMessage(entry), `log-message level-${normalLevel(entry)}`));
|
||||
});
|
||||
return container;
|
||||
}
|
||||
function blockTitle(items, groupKey) {
|
||||
const first = items[0];
|
||||
const kind = groupKey?.startsWith('initialization:') || first.initialization_id ? 'initialization' : items.find(entry => entry.group_kind)?.group_kind;
|
||||
const names = { initialization: 'Initialization', smartcondition: 'Smart condition', value_selector: 'Value selector' };
|
||||
const name = names[kind] || (items.length > 1 || first.trace_id ? 'Event' : 'Log');
|
||||
const label = kind === 'initialization' ? first.app : items.map(entry => entry.group_label || cleanMessage(entry).match(/^\[([^\]]+)\]/)?.[1]).find(Boolean) || first.entity || first.app;
|
||||
return node('div', `${name} · ${label}`, 'block-title');
|
||||
}
|
||||
function row(e) {
|
||||
const item = node('div', undefined, `row${selected === e.event_id ? ' selected' : ''}${recentEvents.has(e.event_id) ? ' recent-log' : ''}`);
|
||||
item.dataset.eventId = e.event_id; item.dataset.eventIds = e.event_id;
|
||||
@@ -67,23 +82,23 @@
|
||||
relative.title = `${formatTime(e, true)} · Exact: ${e.timestamp}`;
|
||||
meta.append(relative, node('span', e.level, `badge ${normalLevel(e)}`));
|
||||
if (e.cause_ids.length) meta.append(node('span', 'View causes ↗', 'link-hint'));
|
||||
item.append(meta, node('div', cleanMessage(e), 'row-message'));
|
||||
item.append(blockTitle([e]), meta, logMessages([e], 'row-message'));
|
||||
item.onclick = () => { if (!window.getSelection()?.toString()) choose(e.event_id); };
|
||||
item.onkeydown = event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); choose(e.event_id); } };
|
||||
return item;
|
||||
}
|
||||
function groupedByEvent(items) {
|
||||
function groupedByEvent(items, groupKey) {
|
||||
const groups = [];
|
||||
items.forEach(e => {
|
||||
const trace = e.kind === 'log' ? e.trace_id : undefined;
|
||||
const key = groupKey || (e.group_id ? `group:${e.group_id}` : e.kind === 'log' && e.trace_id ? `trace:${e.trace_id}` : undefined);
|
||||
const previous = groups[groups.length - 1];
|
||||
if (trace && previous?.trace === trace) previous.entries.push(e);
|
||||
else groups.push({ trace, entries: [e] });
|
||||
if (key && previous?.key === key) previous.entries.push(e);
|
||||
else groups.push({ key, entries: [e] });
|
||||
});
|
||||
return groups;
|
||||
}
|
||||
function appendEventRows(parent, items) {
|
||||
groupedByEvent(items).forEach(unit => {
|
||||
function appendEventRows(parent, items, groupKey) {
|
||||
groupedByEvent(items, groupKey).forEach(unit => {
|
||||
if (unit.entries.length === 1) { parent.append(row(unit.entries[0])); return; }
|
||||
const representative = [...unit.entries].reverse().find(e => e.cause_ids?.length) || unit.entries[unit.entries.length - 1];
|
||||
const ids = unit.entries.map(e => e.event_id);
|
||||
@@ -102,7 +117,7 @@
|
||||
if (count) meta.append(node('span', count === 1 ? level : `${level} ${count}`, `badge ${level}`));
|
||||
}
|
||||
if (unit.entries.some(e => e.cause_ids.length)) meta.append(node('span', 'View causes ↗', 'link-hint'));
|
||||
item.append(meta, node('div', unit.entries.map(cleanMessage).join('\n'), 'row-message'));
|
||||
item.append(blockTitle(unit.entries, groupKey), meta, logMessages(unit.entries, 'row-message'));
|
||||
item.onclick = () => { if (!window.getSelection()?.toString()) choose(representative.event_id); };
|
||||
item.onkeydown = event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); choose(representative.event_id); } };
|
||||
parent.append(item);
|
||||
@@ -145,14 +160,14 @@
|
||||
const rows = node('div', undefined, 'rows');
|
||||
const units = [], initGroups = new Map();
|
||||
logs.forEach(e => {
|
||||
if ($('group-init').checked && e.initialization_id) {
|
||||
if (e.initialization_id) {
|
||||
if (!initGroups.has(e.initialization_id)) { const unit = { id: e.initialization_id, entries: [] }; initGroups.set(e.initialization_id, unit); units.push(unit); }
|
||||
initGroups.get(e.initialization_id).entries.push(e);
|
||||
} else {
|
||||
const trace = e.kind === 'log' ? e.trace_id : undefined;
|
||||
const key = e.group_id ? `group:${e.group_id}` : e.kind === 'log' && e.trace_id ? `trace:${e.trace_id}` : undefined;
|
||||
const previous = units[units.length - 1];
|
||||
if (trace && previous && !previous.id && previous.trace === trace) previous.entries.push(e);
|
||||
else units.push({ trace, entries: [e] });
|
||||
if (key && previous && !previous.id && previous.key === key) previous.entries.push(e);
|
||||
else units.push({ key, entries: [e] });
|
||||
}
|
||||
});
|
||||
const startTime = unit => unit.id
|
||||
@@ -160,25 +175,7 @@
|
||||
: unit.entries[0].time;
|
||||
units.sort((a, b) => startTime(a) - startTime(b));
|
||||
units.slice(-150).forEach(unit => {
|
||||
if (!unit.id) { appendEventRows(rows, unit.entries); return; }
|
||||
const group = node('details', undefined, 'init-group'), key = app + ':' + unit.id;
|
||||
group.open = expandedInit.has(key);
|
||||
const first = entries.find(e => e.app === app && e.initialization_id === unit.id && e.kind === 'initialization_started') || unit.entries[0], last = unit.entries[unit.entries.length - 1];
|
||||
const header = node('summary', undefined, 'init-summary');
|
||||
const failed = unit.entries.some(e => normalLevel(e) === 'ERROR' || e.status === 'failed');
|
||||
header.append(node('span', `Initialization · ${formatTime(first, true)}`, 'name'), node('span', `${unit.entries.length} entries`));
|
||||
if (failed) header.append(node('span', 'ERROR', 'badge ERROR'));
|
||||
header.title = `Initialization ${unit.id} · Last entry: ${formatTime(last, true)} · Exact: ${last.timestamp}`;
|
||||
group.append(header);
|
||||
const body = node('div', undefined, 'init-rows');
|
||||
const copyGroup = node('button', 'Copy initialization');
|
||||
copyGroup.onclick = () => copy(unit.entries.map(copyText).join('\n'));
|
||||
body.append(copyGroup);
|
||||
appendEventRows(body, unit.entries.slice(-150));
|
||||
if (unit.entries.length > 150) body.append(node('div', 'Showing the last 150 entries. Copy initialization includes all loaded matches.', 'more'));
|
||||
group.append(body);
|
||||
group.addEventListener('toggle', event => { event.stopPropagation(); group.open ? expandedInit.add(key) : expandedInit.delete(key); save(); });
|
||||
rows.append(group);
|
||||
appendEventRows(rows, unit.entries, unit.id ? `initialization:${unit.id}` : undefined);
|
||||
});
|
||||
if (units.length > 150) rows.append(node('div', `${units.length - 150} older rows/groups: narrow the time range or search.`, 'more'));
|
||||
detail.append(rows);
|
||||
@@ -194,7 +191,7 @@
|
||||
$('graph-mode').parentElement.hidden = !e || !e.cause_ids.length;
|
||||
if (!e) { container.replaceChildren(node('div', selected ? 'This entry is no longer in the loaded history.' : 'Select a log to view its details.', 'empty')); return; }
|
||||
const selectedGroup = visibleEventGroups.get(e.event_id) || [e];
|
||||
container.replaceChildren(node('div', selectedGroup.map(cleanMessage).join('\n'), 'selected-message'), node('div', `${e.app} · ${e.timestamp} · ${selectedGroup.length} log lines`, 'metadata'));
|
||||
container.replaceChildren(logMessages(selectedGroup, 'selected-message'), node('div', `${e.app} · ${e.timestamp} · ${selectedGroup.length} log lines`, 'metadata'));
|
||||
const raw = node('button', 'Open raw log'); raw.onclick = () => vscode.postMessage({ type: 'open', id: e.event_id }); container.append(raw);
|
||||
if (e.source) { const source = node('button', 'Open source'); source.onclick = () => vscode.postMessage({ type: 'source', id: e.event_id }); container.append(source); }
|
||||
if (origin && origin !== selected) { const back = node('button', 'Back to selected log'); back.onclick = () => choose(origin); container.append(back); }
|
||||
@@ -344,13 +341,12 @@
|
||||
}
|
||||
});
|
||||
$('copy').onclick = () => { const e = entries.find(e => e.event_id === selected); copy(window.getSelection()?.toString() || (e ? (visibleEventGroups.get(e.event_id) || [e]).map(copyText).join('\n') : '')); };
|
||||
['search', 'period', 'level', 'group-init', 'sort'].forEach(id => $(id).addEventListener('input', () => { save(); renderApps(); }));
|
||||
['search', 'period', 'level', 'sort'].forEach(id => $(id).addEventListener('input', () => { save(); renderApps(); }));
|
||||
$('pause').onclick = () => { paused = !paused; $('pause').textContent = paused ? 'Resume' : 'Pause'; if (!paused && latest) apply(latest); else if (paused) $('status').textContent = 'Display paused · New events are still being collected'; };
|
||||
$('import').onclick = () => vscode.postMessage({ type: 'import' });
|
||||
$('graph-mode').onclick = () => { mode = 'graph'; save(); renderDetail(); };
|
||||
$('tree-mode').onclick = () => { mode = 'tree'; save(); renderDetail(); };
|
||||
$('sort').value = saved.sort || 'latest';
|
||||
$('group-init').checked = saved.groupInit !== false;
|
||||
vscode.postMessage({ type: 'ready' });
|
||||
if (window.LOG_REVIEW_DATA) { apply({ timezone: 'Europe/Berlin', entries: window.LOG_REVIEW_DATA, warnings: ['Interface preview: sample data, no AppDaemon connection.'], limit: 10000 }); expanded.add('automation'); selected = 'review-5'; renderApps(); renderDetail(); }
|
||||
})();
|
||||
Reference in new issue
Block a user