mirror of
https://github.com/vladmandic/automatic
synced 2026-09-02 02:50:47 +02:00
improve log monitor
This commit is contained in:
@@ -1,5 +1,20 @@
|
||||
let logMonitorEl = null;
|
||||
let logMonitorStatus = true;
|
||||
let logWarnings = 0
|
||||
let logErrors = 0
|
||||
|
||||
function dateToStr(ts) {
|
||||
const dt = new Date(1000 * ts);
|
||||
const year = dt.getFullYear();
|
||||
const mo = String(dt.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(dt.getDate()).padStart(2, '0');
|
||||
const hour = String(dt.getHours()).padStart(2, '0');
|
||||
const min = String(dt.getMinutes()).padStart(2, '0');
|
||||
const sec = String(dt.getSeconds()).padStart(2, '0');
|
||||
const ms = String(dt.getMilliseconds()).padStart(3, '0');
|
||||
const s = `${year}-${mo}-${day} ${hour}:${min}:${sec}.${ms}`;
|
||||
return s
|
||||
}
|
||||
|
||||
async function logMonitor() {
|
||||
if (logMonitorStatus) setTimeout(logMonitor, opts.logmonitor_refresh_period);
|
||||
@@ -24,14 +39,23 @@ async function logMonitor() {
|
||||
try {
|
||||
const l = JSON.parse(line);
|
||||
const row = document.createElement('tr');
|
||||
row.style = 'padding: 10px; margin: 0;';
|
||||
row.innerHTML = `<td>${new Date(1000 * l.created).toISOString()}</td><td>${l.level}</td><td>${l.facility}</td><td>${l.module}</td><td>${l.msg}</td>`;
|
||||
// row.style = 'padding: 10px; margin: 0;';
|
||||
const level = `<td style="color: var(--color-${l.level.toLowerCase()})">${l.level}</td>`;
|
||||
if (l.level == 'WARNING') logWarnings++;
|
||||
if (l.level == 'ERROR') logErrors++;
|
||||
const module = `<td style="color: var(--var(--neutral-400))">${l.module}</td>`;
|
||||
row.innerHTML = `<td>${dateToStr(l.created)}</td>${level}<td>${l.facility}</td>${module}<td>${l.msg}</td>`;
|
||||
logMonitorEl.appendChild(row);
|
||||
} catch {}
|
||||
} catch (e) {
|
||||
console.log('logMonitor', e);
|
||||
console.error('logMonitor line', line);
|
||||
}
|
||||
}
|
||||
while (logMonitorEl.childElementCount > 100) logMonitorEl.removeChild(logMonitorEl.firstChild);
|
||||
if (at_bottom) logMonitorEl.scrollTop = logMonitorEl.scrollHeight;
|
||||
else if (lines?.length > 0) logMonitorEl.parentElement.style = 'border-bottom: 2px solid var(--highlight-color);';
|
||||
document.getElementById('logWarnings').innerText = logWarnings;
|
||||
document.getElementById('logErrors').innerText = logErrors;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,14 +71,16 @@ async function initLogMonitor() {
|
||||
<table id="logMonitor" style="width: 100%;">
|
||||
<thead style="display: block; text-align: left; border-bottom: solid 1px var(--button-primary-border-color)">
|
||||
<tr>
|
||||
<th style="width: 160px">Time</th>
|
||||
<th style="width: 144px">Time</th>
|
||||
<th>Level</th>
|
||||
<th style="width: 72px">Facility</th>
|
||||
<th style="width: 124px">Module</th>
|
||||
<th style="width: 0"></th>
|
||||
<th style="width: 154px">Module</th>
|
||||
<th>Message</th>
|
||||
<th style="position: absolute; right: 7em">Warnings <span id="logWarnings">0</span></th>
|
||||
<th style="position: absolute; right: 1em">Errors <span id="logErrors">0</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logMonitorData" style="white-space: nowrap; height: 10vh; width: 100vw; display: block; overflow-x: hidden; overflow-y: scroll">
|
||||
<tbody id="logMonitorData" style="white-space: nowrap; height: 10vh; width: 100vw; display: block; overflow-x: hidden; overflow-y: scroll; color: var(--neutral-400)">
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
+14
-4
@@ -1,11 +1,18 @@
|
||||
@font-face { font-family: 'NotoSans'; font-display: swap; font-style: normal; font-weight: 100; src: local('NotoSans'), url('notosans-nerdfont-regular.ttf') }
|
||||
:root { --left-column: 520px; }
|
||||
:root {
|
||||
--left-column: 520px;
|
||||
--color-trace: #666666;
|
||||
--color-debug: #7F7F7F;
|
||||
--color-info: #D4D4D4;
|
||||
--color-warning: #FF9900;
|
||||
--color-error: #BE0000
|
||||
}
|
||||
a { font-weight: bold; cursor: pointer; }
|
||||
h2 { margin-top: 1em !important; font-size: var(--text-xxl) !important; }
|
||||
footer { display: none; margin-top: 0 !important;}
|
||||
table { overflow-x: auto !important; overflow-y: auto !important; }
|
||||
td { border-bottom: none !important; padding: 0.1em 0.5em !important; }
|
||||
tr { border-bottom: none !important; padding: 0.1em 0.5em !important; }
|
||||
td { border-bottom: none !important; padding: 0 0.5em !important; }
|
||||
tr { border-bottom: none !important; padding: 0 0.5em !important; }
|
||||
textarea { overflow-y: auto !important; }
|
||||
span { font-size: var(--text-md) !important; }
|
||||
button { font-size: var(--text-lg) !important; }
|
||||
@@ -21,6 +28,9 @@ input[type='color'] { width: 64px; height: 32px; }
|
||||
.hidden { display: none; }
|
||||
.tabitem { padding: 0 !important; }
|
||||
|
||||
/* color elements */
|
||||
|
||||
|
||||
.gradio-dropdown, .block.gradio-slider, .block.gradio-checkbox, .block.gradio-textbox, .block.gradio-radio, .block.gradio-checkboxgroup, .block.gradio-number, .block.gradio-colorpicker { border-width: 0 !important; box-shadow: none !important;}
|
||||
.gradio-accordion { padding-top: var(--spacing-md) !important; padding-right: 0 !important; padding-bottom: 0 !important; color: var(--body-text-color); }
|
||||
.gradio-accordion .label-wrap .icon { color: var(--button-primary-border-color); }
|
||||
@@ -248,7 +258,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
|
||||
#pnginfo_html_info .gradio-html > div { margin: 0.5em; }
|
||||
|
||||
/* log monitor */
|
||||
.log-monitor { display: none; justify-content: unset !important; overflow: hidden; padding: 0; margin-top: auto; font-family: monospace; font-size: var(--text-xs); }
|
||||
.log-monitor { display: none; justify-content: unset !important; overflow: hidden; padding: 0; margin-top: auto; font-family: monospace; font-size: var(--text-xxs); }
|
||||
.log-monitor td, .log-monitor th { padding-left: 1em; }
|
||||
|
||||
/* changelog */
|
||||
|
||||
@@ -70,6 +70,10 @@ async function setTheme(val, old) {
|
||||
old = old.replace('modern/', '');
|
||||
val = val.replace('modern/', '');
|
||||
const links = Array.from(document.getElementsByTagName('link')).filter((l) => l.href.includes(old));
|
||||
if (links.length === 0) {
|
||||
log('setTheme: current theme not matched', old);
|
||||
return;
|
||||
}
|
||||
for (const link of links) {
|
||||
const href = link.href.replace(old, val);
|
||||
const res = await fetch(href);
|
||||
|
||||
Reference in New Issue
Block a user