Log viewer | Sodium design system

States

When to use it

Use: A job's, a pipeline's or a worker's output, line by line, often while it still runs.
Use: Finding the failure in a long log: Next failure, and the toolbar's search and levels.
Not for: A file or a command to read and copy. Use Code block.
Not for: The step's source with the line that failed. Use Code window.
Not for: Structured data to fold. Use JSON view.

6 rules

Must: Give every line a level ('debug', 'info', 'warn' or 'fail') and a stable id. Because the level sets the line's word, the failure band, the counts and Next failure, and the id keeps the windowed rows and their measured heights in place as lines arrive.
Must: Set streaming while lines arrive and append to lines; never replace the array with only the new ones. Because follow keeps the bottom in view and counts what arrived while the reader scrolled up, which needs every line.
Should: Turn toolbar on for a log longer than a screen or two; leave it off for a short one. Because a search and four level filters over eight lines is more chrome than log.
Never: Colour a message by its level; the level word and the failure band carry it. Because colour in Sodium is status and always comes with a word, and a block of red text is hard to read.
Must: Give name the run, job or worker the log belongs to, as written; label stays the kind of log and is only shown when there is no name. Because the head row is the region header, the name first as written and the counts at the end, and label and name together name the log region for a screen reader, so a page with two logs can be told apart.
Never: Wrap a LogViewer in a panel, a frame or a CodeBlock. Because the log is a frame already, and a box in a box is two edges where Sodium draws one.

4 states, highest first

5 checks

: The lines are a role="log" region named by label and name, one tab stop, scrolled by the arrow keys; it does not announce every line.
: A status line says how many lines failed; Next failure is named "Next failure, 2 in this log".
: Level words are text-3, --warn-text or --fail-text, 4.9:1 or more on the well and the failure band.
: Copy lines and a hand selection both copy "time LEVEL source message", one line each.
: The level filters are toggles with their counts read as descriptions; the search is a search field; wrap is a pressed button.

3 keys

6 edge cases

100,000 lines: Only the lines in view render; Copy lines joins them only on press.
Reader scrolled up while streaming: Following stops and a button counts the new lines; it jumps back.
No lines yet: Says "Waiting for the first line." while streaming and "No output." after, in a body that tall; it takes height when the first line arrives.
Filter matches nothing: Says which query or levels emptied it.
Long line: Wraps anywhere; with wrap off, the log scrolls sideways.
Right to left page: The log stays left to right, like code.

10 props

16 tokens