luci-app: updated log.

This commit is contained in:
gSpot
2024-02-27 17:31:44 +03:00
parent 9d0a75a7f8
commit c044d303c5
8 changed files with 74 additions and 75 deletions
@@ -5,34 +5,24 @@
document.head.append(E('style', {'type': 'text/css'},
`
.log-entry-empty {
#logTable {
width: calc(100% - 4px);
}
.log-entry-number {
min-width: 4em !important;
}
.log-entry-time {
min-width: 15em !important;
}
.log-entry-host {
min-width: 10em !important;
.log-entry-time-cell {
min-width: 14em !important;
}
.log-entry-host-cell {
word-break: break-all !important;
word-wrap: break-word !important;
}
.log-entry-log-level {
max-width: 5em !important;
}
.log-entry-facility{
max-width: 7em !important;
}
.log-entry-message {
min-width: 25em !important;
min-width: 10em !important;
overflow-wrap: anywhere !important;
}
.log-entry-message-cell {
overflow-x: hidden !important;
text-overflow: ellipsis !important;
min-width: 20em !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
}
.log-entry-text-nowrap {
white-space: nowrap !important;
};
`));
return baseclass.extend({
@@ -43,7 +33,7 @@ return baseclass.extend({
},
makeLogArea(logdataArray) {
let lines = `<tr class="tr"><td class="td center log-entry-empty">${_('No entries available...')}</td></tr>`;
let lines = `<tr class="tr"><td class="td center">${_('No entries available...')}</td></tr>`;
let logTable = E('table', { 'id': 'logTable', 'class': 'table' });
for(let level of Object.keys(this.logLevels)) {
@@ -56,27 +46,30 @@ return baseclass.extend({
if(e[4] in this.logLevels) {
this.logLevelsStat[e[4]] = this.logLevelsStat[e[4]] + 1;
};
lines.push(
`<tr class="tr log-${e[4] || 'empty'}"><td class="td left" data-title="#">${e[0]}</td>` +
((e[1]) ? `<td class="td left" data-title="${_('Timestamp')}">${e[1]}</td>` : '') +
`<tr class="tr log-${e[4] || 'empty'}"><td class="td left log-entry-text-nowrap" data-title="#">${e[0]}</td>` +
((e[1]) ? `<td class="td left log-entry-time-cell" data-title="${_('Timestamp')}">${e[1]}</td>` : '') +
((e[2]) ? `<td class="td left log-entry-host-cell" data-title="${_('Host')}">${e[2]}</td>` : '') +
((e[3]) ? `<td class="td left" data-title="${_('Facility')}">${e[3]}</td>` : '') +
((e[4]) ? `<td class="td left" data-title="${_('Level')}">${e[4]}</td>` : '') +
((e[3]) ? `<td class="td left log-entry-text-nowrap" data-title="${_('Facility')}">${e[3]}</td>` : '') +
((e[4]) ? `<td class="td left log-entry-text-nowrap" data-title="${_('Level')}">${e[4]}</td>` : '') +
((e[5]) ? `<td class="td left log-entry-message-cell" data-title="${_('Message')}">${e[5]}</td>` : '') +
'</tr>'
);
});
lines = lines.join('');
logTable.append(
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th left log-entry-number' }, '#'),
(logdataArray[0][1]) ? E('th', { 'class': 'th left log-entry-time' }, _('Timestamp')) : '',
(logdataArray[0][2]) ? E('th', { 'class': 'th left log-entry-host' }, _('Host')) : '',
(logdataArray[0][3]) ? E('th', { 'class': 'th left log-entry-facility' }, _('Facility')) : '',
(logdataArray[0][4]) ? E('th', { 'class': 'th left log-entry-log-level' }, _('Level')) : '',
(logdataArray[0][5]) ? E('th', { 'class': 'th left log-entry-message' }, _('Message')) : '',
E('th', { 'class': 'th left log-entry-text-nowrap' }, '#'),
(logdataArray[0][1]) ?
E('th', { 'class': 'th left log-entry-text-nowrap' }, _('Timestamp')) : '',
(logdataArray[0][2]) ?
E('th', { 'class': 'th left log-entry-text-nowrap' }, _('Host')) : '',
(logdataArray[0][3]) ?
E('th', { 'class': 'th left log-entry-text-nowrap' }, _('Facility')) : '',
(logdataArray[0][4]) ?
E('th', { 'class': 'th left log-entry-text-nowrap' }, _('Level')) : '',
(logdataArray[0][5]) ?
E('th', { 'class': 'th left log-entry-text-nowrap' }, _('Message')) : '',
])
);
};