feat(ui): highlight log lines by pod name

[aali309]

Fixes: #20898

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

❌ Preview Environment deleted from Bunnyshell

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[aali309]

current view

[andrii-korotkov-verkada]

I think red-ish background are typically associated with errors. I'd rather add interchanging white and light blue or something like that.

[revitalbarletz]

I am wondering if there have to be hard coded or can be gathered from an environment variable ...

[andrii-korotkov-verkada]

Also, need to adjust for the dark mode.

[surajyadav1108]

you can utilise argo-ui color variables with altreanates to light blue and White in light theme, and light gray and white in dark theme.

[surajyadav1108]

this would be on top of the log-viewer so in case if there are lot of pods, can have like a Horizontal scroll?

[aali309]

Light Mode:

Dark Mode:

[aali309]

@jsoref, how about a dropdown menu to select a pod and then only that selected pod to be coloured? This way we can also colour the logs of that specific pod. This also will get rid of the confusion that may arise with this change when two or more pods have the same colour?

[jsoref]

Hmm. We can try that.

[jsoref]

I'd probably favor letting people click on a label to the left to switch the actively colored pod.

[aali309]

ok @jsoref @keithchong, I think this is better and less confusing.

• When a pod is selected, it provides two types of visual indicators:
  Background highlighting of the log entries
  Color change of the pod name (blue in light mode, magenta in dark mode)

• Unselected pods maintain neutral colors:
  Black text in light mode
  White text in dark mode (for log entries)
  Black text for legend labels regardless of mode

Also, clicking the pod again returns everything back to its default behaviour (no pods colouring or logs highlighting).

Light mode:

Dark mode:

[keithchong]

This looks better. Just a couple of points:

• Should there be some indication that there are more pods 'to the right'? It's not clear that the legend is scrollable horizontally (From the css change, it was intentional, so not sure of the reason)
• The log viewer currently filters the logs by container (the one combo dropdown that is there now), so perhaps the changes now point towards providing a filter for pods too? If you can highlight the log output for one pod, then why not just filter out the others? @jsoref , what do you think? Ultimately, the goal is to isolate output from one pod either by highlighting or by filtering.

[jsoref]

No, the goal is not to filter out. It is to highlight while still seeing the other related log entries.

[jsoref]

Note: I was expecting to be able to click on a pod name in the log view as opposed to adding a view above....

[aali309]

@jsoref, please take a look now. Should work as expected now.

[surajyadav1108]

Overall looks good to me. a small nit I have if it counts as, is that currently if a pod is highlighted with color and then "show pod name" is toggled the color still persist and then user has to go again in "show pod name" to unselect it.

pod-log.mp4

instead we can just unselect the color on toggle for pod name with something like this maybe

    const onToggleViewPodNames = (val: boolean) => {
        setViewPodNamesWithQueryParams(val);
        if (val) {
            setViewTimestampsWithQueryParams(false);
        }else {
            setSelectedPod(null);
        }
    };

If it is intentional then we can keep it as it is

[jsoref]

I actually like being able to track a pod through context w/o seeing the pod names -- that's actually incredibly helpful.

You're right that having to show names to clear it is kinda unfortunate. An extra button to reset the highlight or maybe a dropdown to just select a pod to color in the same bar might work -- that'd let someone highlight a pod even if it isn't onscreen so that as soon as it shows up it appears colored -- they might be looking for a pod and want its logging called out. w/ the dropdown the first item in the list could be "no highlight" or something...

[surajyadav1108]

I actually like being able to track a pod through context w/o seeing the pod names -- that's actually incredibly helpful.

You're right that having to show names to clear it is kinda unfortunate. An extra button to reset the highlight or maybe a dropdown to just select a pod to color in the same bar might work -- that'd let someone highlight a pod even if it isn't onscreen so that as soon as it shows up it appears colored -- they might be looking for a pod and want its logging called out. w/ the dropdown the first item in the list could be "no highlight" or something...

hmm that would be better...

[surajyadav1108]

LGTM

[keithchong]

Does the background or foreground colour need to be changed for dark or light mode?

[jsoref]

Fixing pod logs is an item covered in:

• Dark mode appearance improvements #10851

[keithchong]

Could it be fixed as part of this PR, since this is for the new dropdown? (The changes in pod-logs-viewer, also considers the dark mode setting too.)

[jsoref]

There are a whole bunch of colors that are broken. I worry it's a boil the ocean problem. There appear to be at ~5 different "blacks" plus various "whites" and "cyans". I wouldn't even know which colors to suggest.

Offhand, containing shown here is too dark and needs to be lightened. The log pane itself could be true black or one of the various other blacks. As for the text of the log itself, maybe it should be pure white to match the LOGS tab color?

[aali309]

Yes, please take a look @keithchong @jsoref

[jsoref]

@aali309 those colors might be ok in dark, they're definitely wrong for light mode.

[aali309]

This will be light mode view @jsoref

The dropdown should reflect the correct theme when toggling between light and dark modes.

[jsoref]

Ok, I figured out what's going on... it isn't a related bug, it's just a really silly interaction:

• Top level Dark Mode should set the default for logs to dark mode #21426

Some of the problems @keithchong is describing remind me of:

• [UI] HTML select options unreadable in dark mode (white on white) #13907