@@ -221,6 +265,9 @@
padding 5px
text-align left
white-space nowrap
+ overflow hidden
+ text-overflow ellipsis
+ max-width 100dvw
td.sticky
position sticky
@@ -304,6 +351,14 @@
.log-period
white-space nowrap !important
+#logdetails-popup
+ .log-message
+ white-space normal
+ word-break break-word
+ .stack-trace
+ white-space pre-line
+ word-break break-word
+
#color-picker-popover
.color-palette
display flex
@@ -356,6 +411,7 @@ export default {
currentHighlightColorItemIndex: null,
currentHighlightColor: '#FF5252',
lastSequence: 0,
+ selectedLog: {},
colors: [
'#FF0000', // Red
'#00FF00', // Green
@@ -495,8 +551,15 @@ export default {
`${entity.level} | ` +
`${entity.loggerName} | ` +
`${this.highlightText(entity.message)} | `
+ tr.addEventListener('click', () => {
+ this.onRowClick(entity.id)
+ })
return tr
},
+ onRowClick (entityId) {
+ this.selectedLog = this.filteredTableData[entityId]
+ this.$f7.popup.open('#logdetails-popup')
+ },
addLogEntry (logEntry) {
this.lastSequence = Math.max(this.lastSequence, logEntry.sequence)
const date = new Date(logEntry.unixtime)
@@ -526,10 +589,12 @@ export default {
id: this.nextId++,
visible: vis,
time: formattedTime,
+ timestamp: logEntry.timestamp,
milliseconds: ms,
level: logEntry.level.toUpperCase(),
loggerName: logEntry.loggerName,
- message: logEntry.message
+ message: logEntry.message,
+ stackTrace: logEntry.stackTrace
}
this.batchLogs.push(entry)
@@ -615,6 +680,7 @@ export default {
},
redrawPartOfTable () {
const LINE_HEIGHT = 31
+
const tableContainer = this.$refs.tableContainer
const tableBody = this.$refs.dataTable.firstChild
const filteredItemsCount = this.filteredTableData.length