Log view tail-end mode by samuel-denton · Pull Request #2620 · cylc/cylc-ui

samuel-denton · 2026-08-06T17:51:31Z

Trio of PRs to add a new tail mode to cat-log and make use of it in the GUI

cylc-flow: cat-log tail-end mode cylc-flow#7414
cylc-uiserver: cat-log tail-end mode cylc-uiserver#878
cylc-ui: Log view tail-end mode #2620

The three PR's will close

cat-log: tail the log file cylc-uiserver#802

Changes will be documented in cylc-doc:

cat-log Tail Mode cylc-doc#965

Added a toggle to switch between tail and head (tail_from_start) in the log view.
Added a toggle between popping old lines as new ones are added vs keeping them all. (removed the UI for this so it's just a dev toggle now)
Added a MAX_LINES selector to the user settings.

Check List

I have read CONTRIBUTING.md and added my name as a Code Contributor.
Contains logically grouped changes (else tidy your branch by rebase).
Does not contain off-topic changes (use other PRs for other changes).
Applied any dependency changes to both setup.cfg (and conda-environment.yml if present).
Tests are included (or explain why tests are not needed).
Changelog entry included if this is a change that can affect users
Cylc-Doc pull request opened if required at cylc/cylc-doc/pull/XXXX.
If this is a bug fix, PR should be raised against the relevant ?.?.x branch.

… in log view

samuel-denton · 2026-08-07T14:46:25Z

+    // re-subscribe when the log view mode (TAIL/HEAD) is toggled
+    this.$watch(() => this.tailMode, (tailMode) => {
+      if (tailMode) {
+        // in TAIL mode jump to the end of the file and follow new lines
+        this.autoScroll = true
+      }
+      this.updateQuery()
+    })


This switches on auto-scroll when toggling to tail mode. I like this as scrolling down is a pain, but not sure about overriding what might have been a user choice?

…er selector for MAX_LINES. Added logic to pop old lines of toggled, using cylc-flow messages to know where to pop.

samuel-denton · 2026-08-12T12:10:42Z

Improved the truncation message

…rm button / allowed the enter key.

samuel-denton · 2026-08-12T13:44:31Z

Discussion moved to Issue:
cylc/cylc-uiserver#802 (comment)

…o a user setting. Added back the truncation warning. Removed mixed mode.

Made TAIL the default.

samuel-denton · 2026-08-26T14:38:43Z

Think I got that conflict right. I believe it was just the trailing commas PR from @MetRonnie so I have kept my changes and added in the commas.

samuel-denton · 2026-08-26T15:02:30Z

I think we agreed that the inline truncation warnings are sufficient and the banner can be removed. I haven't done that yet as I am not sure if I think truncation is obvious using just the inline warning.
Looking for feedback for/against each approach.

samuel-denton · 2026-08-26T15:04:50Z

I think the MAX_LINES user setting is particularly in need of testing. It seems to work for me, but I expect there are scenarios I haven't thought of like views already being open etc.

samuel-denton · 2026-08-26T15:17:14Z

+const LOG_TRUNCATION_MARKERS = {
+  start: truncationMarker('earlier lines omitted (file truncated)'),
+  end: truncationMarker('later lines omitted (file truncated)'),
+}


Various things we could do to improve this message, including printing the MAX_LINES value. Left simple until we decide on implementation between this and a banner.

I think it would be good if the banner was moved to take the place of these messages. Does that make sense?

MetRonnie

Works fairly slickly 👍 I just think we need to iron out a few things

MetRonnie · 2026-08-27T11:51:01Z

+const LOG_TRUNCATION_MARKERS = {
+  start: truncationMarker('earlier lines omitted (file truncated)'),
+  end: truncationMarker('later lines omitted (file truncated)'),
+}


I think it would be good if the banner was moved to take the place of these messages. Does that make sense?

MetRonnie · 2026-08-27T12:03:00Z

+              icon: this.logMode
+                ? mdiFormatVerticalAlignTop
+                : mdiFormatVerticalAlignBottom,


I think people will confuse this icon for scroll jumping to the start/end. Difficult to think of a better one, but how about mdiInvoiceTextOutline where the jagged end is indicative of truncation? Unfortunately there is no upside-down variant of this icon, nor is it easy to flip the icon at the moment until #2472 is merged, but should be possible to use CSS to flip it in the <style> section.

I think it would be good if the banner was moved to take the place of these messages. Does that make sense?

Yep that should be doable.

I think people will confuse this icon for scroll jumping to the start/end.

Agreed, I dont love those Icons so happy for alternative suggestions. The jagged edge one you suggest is quite good. Possibly worth getting a few opinions as Icons can be interpreted differently by different people.
The other option I thought about is just a stylised string that switches between Top / Bottom, maybe combined with an Icon?
@ChrisPaulBennett @oliver-sanders - Thoughts?
Example 1:

Example 2:

As icons go, Ronnie's suggestion is probably about as good as we'll get.

This feature might not be all too obvious to users (we don't usually have to decide whether we view the top or bottom of a file), so it might be worth considering a text based toggle instead (e.g. head/tail or top/bottom).

Or a combination of text and icon?

Ill have a play with combining an Icon with some text, if I can make it look decent I think thats the best option.

MetRonnie · 2026-08-28T10:57:14Z

+     * The log view mode
+     * true - HEAD (cat-log "tail" mode) shows the start of the file and follows it;
+     * false - TAIL (cat-log "tail-end" mode) shows the end.
+     */
+    const logMode = useInitialOptions('logMode', { props, emit }, false)


Instead of a boolean, could you do something like this

Suggested change

* The log view mode

* true - HEAD (cat-log "tail" mode) shows the start of the file and follows it;

* false - TAIL (cat-log "tail-end" mode) shows the end.

*/

const logMode = useInitialOptions('logMode', { props, emit }, false)

* The cat-log mode

* @type {import('vue').Ref<'tail'|'tail-end'>}

*/

const logMode = useInitialOptions('logMode', { props, emit }, 'tail-end')

I can implement that if thats preferable?

Or rename it to something like headMode?

Suggested change

* The log view mode

* true - HEAD (cat-log "tail" mode) shows the start of the file and follows it;

* false - TAIL (cat-log "tail-end" mode) shows the end.

*/

const logMode = useInitialOptions('logMode', { props, emit }, false)

* Whether the log view is in HEAD mode:

* HEAD (cat-log "tail" mode) shows the start of the file and follows it;

* TAIL (cat-log "tail-end" mode) shows the end.

*/

const headMode = useInitialOptions('headMode', { props, emit }, false)

Yeah that's sensible, logMode was a hangover from the 3 way toggle.

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

samuel-denton · 2026-08-28T16:11:17Z

I think it would be good if the banner was moved to take the place of these messages.

Is this about what you where hoping for @MetRonnie? It's a bit rough at the moment, I plan to copy the styles of the vue banners but this was just to get it working:

EDIT since I am away next week I will commit this change so it can be reviewed while away.

Renamed logMode in existing test.

MetRonnie

I've got a PR to allow easily testing this feature in the offline mode: samuel-denton#1

MetRonnie · 2026-09-01T10:51:15Z

+    ><span
+      v-if="log?.truncation"
+      class="log-truncation-banner"
+      :data-cy="`log-truncation-${log.truncation}`"
+    >{{ log.message }}</span><span
+      v-else
+    >{{ log }}</span></template></pre>


This is pretty nifty - however could it be moved outside of the pre element, seeing as it isn't actual log line content?

Added a toggle to switch between tail and head (tail_from_start) mode…

aa32915

… in log view

This was referenced Aug 6, 2026

cat-log tail-end mode cylc/cylc-flow#7414

Open

cat-log tail-end mode cylc/cylc-uiserver#878

Open

cat-log: tail the log file cylc/cylc-uiserver#802

Open

samuel-denton marked this pull request as draft August 6, 2026 17:57

samuel-denton commented Aug 7, 2026

View reviewed changes

Comment thread src/views/Log.vue Outdated

Enable auto-scroll when toggling to tail mode.

3d812b4

samuel-denton commented Aug 7, 2026

View reviewed changes

Added toggle for pop/keep old lines after MAX_LINES reached. Added us…

22b19bf

…er selector for MAX_LINES. Added logic to pop old lines of toggled, using cylc-flow messages to know where to pop.

replaced the debounced refresh on edit of max_lines and added a confi…

6f201a7

…rm button / allowed the enter key.

samuel-denton added 5 commits August 18, 2026 17:53

Removed the pop toggle and made it true by default. Moved MAX_LINES t…

6d132a1

…o a user setting. Added back the truncation warning. Removed mixed mode.

Fixed a bug counting the truncation warning towards the MAX_LINES limit.

bd29d41

Removed the now unused cycle action and made HEAD vs TAIL a bool.

c40da19

Made TAIL the default.

Comment wording

612f8f0

Added changelog

08c0070

samuel-denton mentioned this pull request Aug 25, 2026

cat-log Tail Mode cylc/cylc-doc#965

Draft

1 task

samuel-denton added 2 commits August 26, 2026 13:33

Added tests for new buttons and functionality.

d162872

Merge branch 'master' into cat-log-tail-mode

cc1241b

samuel-denton marked this pull request as ready for review August 26, 2026 14:51

samuel-denton requested review from ChrisPaulBennett and MetRonnie August 26, 2026 14:54

samuel-denton self-assigned this Aug 26, 2026

samuel-denton commented Aug 26, 2026

View reviewed changes

MetRonnie changed the title ~~cat-log Tail Mode~~ Log view tail-end mode Aug 28, 2026

MetRonnie reviewed Aug 28, 2026

View reviewed changes

samuel-denton and others added 2 commits August 28, 2026 15:00

Update changes.d/2620.feat.md

6e8242c

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

Renamed logMode bool to headMode for clarity.

a096e1c

Playing with alternative truncation warnings and added a test.

d0cfcdb

Renamed logMode in existing test.

MetRonnie reviewed Sep 1, 2026

View reviewed changes

Uh oh!

Conversation

samuel-denton commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samuel-denton commented Aug 12, 2026

Uh oh!

samuel-denton commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samuel-denton commented Aug 26, 2026

Uh oh!

samuel-denton commented Aug 26, 2026

Uh oh!

samuel-denton commented Aug 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MetRonnie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samuel-denton Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MetRonnie Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samuel-denton commented Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MetRonnie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

samuel-denton commented Aug 6, 2026 •

edited

Loading

samuel-denton commented Aug 12, 2026 •

edited

Loading

samuel-denton Aug 28, 2026 •

edited

Loading

MetRonnie Aug 28, 2026 •

edited

Loading

samuel-denton commented Aug 28, 2026 •

edited

Loading