feat(logging): enhance log visualization with level-specific colors

- Add CSS classes for log levels (info, debug, error, trace, warn) in main.js to color-code log messages based on their severity.
- Modify log.html to include the log level as a class in each log entry's table row for applying the corresponding color styles.
This commit is contained in:
Sergey Krashevich
2024-04-29 15:03:22 +03:00
parent d6774bbdb9
commit 5f2d523242
2 changed files with 8 additions and 1 deletions

View File

@@ -89,7 +89,7 @@
const msg = Object.keys(line).reduce((msg, key) => {
return KEYS.indexOf(key) < 0 ? `${msg} ${key}=${line[key]}` : msg;
}, line['message']);
return `<tr><td>${ts.toLocaleString()}</td><td>${line['level']}</td><td>${escapeHTML(msg)}</td></tr>`;
return `<tr class="${line['level']}"><td>${ts.toLocaleString()}</td><td>${escapeHTML(line['level'])}</td><td>${escapeHTML(msg)}</td></tr>`;
}).join('');
}

View File

@@ -131,6 +131,13 @@ body.dark-mode textarea::placeholder {
body.dark-mode hr {
border-top: 1px solid #444;
}
.info { color: #0174DF; }
.debug { color: #808080; }
.error { color: #DF0101; }
.trace { color: #585858; }
.warn { color: #FF9966; }
</style>
<nav>
<ul>