Log viewer: Fixed column width for timestamp, level & logger name

[florian-h05]

When using the log viewer, I have regularly noticed that the time column is wider than required, as well as the logger name column taking up much space and making the message column move if a new log with a longer logger name comes in.
This PR sets the width of the time, level and logger name columns to a fixed value and limits the logger name length to the last 40 chars, which is enough to identify the logger.

[relativeci]

#2721 Bundle Size — 10.98MiB (~+0.01%).

f8c86bb(current) vs bf2f2ee main#2718(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics  no changes

	Current #2721	Baseline #2718
Initial JS	1.9MiB	1.9MiB
Initial CSS	577.21KiB	577.21KiB
Cache Invalidation	17.39%	17.39%
Chunks	227	227
Assets	250	250
Modules	2951	2951
Duplicate Modules	154	154
Duplicate Code	1.8%	1.8%
Packages	98	98
Duplicate Packages	2	2

Bundle size by type   2 changes 2 regressions

	Current #2721	Baseline #2718
JS	9.19MiB (~+0.01%)	9.19MiB
CSS	867.25KiB (+0.02%)	867.06KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.38KiB	1.38KiB
Other	871B	871B

Bundle analysis report Branch florian-h05:logviewer-limit-colu... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

/cc @cdjackson @ghys

[cdjackson]

Thanks - I'll take a look later today.

Just to mention I noticed a bug on the table / column widths a day or two ago. Due to the virtual table, the column widths change as you scroll up/down through the list - depending on what part of the log is displayed. This ought to fix this.

Just for info I'm working on core changes and UI changes to improve the log display. By sending logs in an array rather than single messages speeds things up a hell of a lot (I've not tried it with zigbee debug yet, but sending through 100 lines of historic logs is essentially instantaneous rather than taking maybe a few hundred ms).

[florian-h05]

Just for info I'm working on core changes and UI changes to improve the log display. By sending logs in an array rather than single messages speeds things up a hell of a lot

Great to hear that and thanks for letting me know 👍

[cdjackson]

I'm reasonably ok with this. I do find the truncation of the logger slightly annoying, but on balance it's fine.

The time column seems to change width - depending on the message. ie if the message is long, then the time column is shrunk...

[florian-h05]

The time column seems to change width - depending on the message. ie if the message is long, then the time column is shrunk...

That’s because this PR was developed on top of your logger icon PR, the icon will avoid that behaviour.

[mherwege]

Instead of actually cutting the logger name, can't you do something with styling like suggested here: https://stackoverflow.com/questions/47926246/how-can-i-align-text-to-the-right-in-a-div-so-its-beginning-is-cut-down-with-ove ?

Cutting the text on the number of characters is difficult when not using a fixed width character set.

[florian-h05]

Setting width, and text-align right together with overflow hidden doesn't work.

[florian-h05]

I will merge this soon, we can always come back and improve later if we find a better solution, but for now this already is an improvement.

[mherwege]

This style does align right and cut, but I can't get ellipsis to work:

  td.logger
    width 280px
    overflow hidden
    text-align right
    display flex
    justify-content flex-end
    align-items center
    height 29px

[mherwege]

I think I solved it:

instead of a td.logger style, replace it with:

  span.logger
    width 280px
    display block
    direction rtl
    overflow hidden
    text-overflow ellipsis

and use this for the HTML:

      tr.innerHTML = '<td class="sticky"><i class="icon f7-icons" style="font-size: 18px;">' + icon + `</i> ${entity.time}<span class="milliseconds">${entity.milliseconds}</span></td>` +
        `<td>${entity.level}</td>` +
        `<td><span class="logger">${entity.loggerName}</span></td>` +
        `<td class="nowrap">${this.highlightText(entity.message)}</td>`

[florian-h05]

Thanks for the help @mherwege, got it working now with some extra styling.

[florian-h05]

Bildschirmaufnahme_20250115_184520.webm

[mherwege]

I didn’t need this when testing in Firefox. It will not harm either.

[florian-h05]

I needed this when developing in Chromium.

[mherwege]

For some strange reason, when I was trying this, things worked in Firefox, but I couldn’t even get the websocket connection to start in Chrome, so no way to test (there was an error in the console). That is obviously another issue and I will keep an eye out for it.

[cdjackson]

In my opinion, the logger name now looks strange. The right alignment makes it difficult to read - it's ok if they are all truncated, but it's strange if some fit and some don't.

For me, it should be left aligned, with the left side truncated if it's too long. I think this is what the original PR here did...

[florian-h05]

For me, it should be left aligned, with the left side truncated if it's too long.

I agree, will change that: #3026

[cdjackson]

Thanks @florian-h05 I'll take a look.