Content Outline Follow Up

[gelicia]

Address some UX concerns brought up in the comments for #86431

• Discoverability with the term "Outline" "I did not know/notice that the outline was there. Also "outline" doesn't mean anything to me (spanish native speaker with english technical knowledge), and I can't link with with anything more familiar."
• Spacing "The collapsed view is a bit tough for me. There's a lot of empty space, and I feel like it could be a bit smaller. Even in the expanded mode, I find the empty space on the left a bit unpleasant." (There is more back and forth about this in Explore: Logs in content outline #86431)

• Spacing "adding 2px more (theme.spacing(2.5)) to the left?"
• Capitalization "capitalizing the levels"

• Log level colors do not show when not selected, and in collapsed mode there is no immediate differentiation (there is a tooltip on hover)
  • @diegoadams (src): "could we keep these in a non-selected state when in their default? It appears cleaner and less cluttered. Also, given that only one filter can be applied at a time, it would make this functionality clearer to the user."
  • @matyax (src): " without colors in the collapsed version, it's hard to know what each level icon means."

[gelicia]

Re: capitalization of the levels, I would like whatever is done to the text here to match what the legend looks like for log volume, since clicking on the filter here does the same action as clicking on the legend text in the logs volume chart. Right now both are uncapitalized. I think it would be nice if they both stayed uncapitalized, but were displayed in monospace text, to emphasize the log level existing in a log line. Note: the log level in the log itself and what the LogLevel is to grafana may not be a 1-1 match (src). This might not make sense if the label is the Grafana Log Level and not the actual log level in the log line itself. If that is the case, I would recommend no monospace but instead capitalizing both the legend and the content outline filter.

[diegoadams]

Spacing "The collapsed view is a bit tough for me. There's a lot of empty space, and I feel like it could be a bit smaller. Even in the expanded mode, I find the empty space on the left a bit unpleasant." (There is more back and forth about this in

When Amy is back from the UX offsite, I will discuss this with her. I do prefer the consistency with the MainNav as its key for the user experience in maintaining similarity.

Additionally, the dropdowns on the side are designed to potentially accommodate not just Logs but other data sources or new sections in the future.

[gelicia]

@matyax re: collapsed log levels (src): "Brainstorming: how about displaying a single letter? E, W, I, D, U"

[diegoadams]

"Brainstorming: how about displaying a single letter? E, W, I, D, U"

@matyax, brainstorming would be a great idea, I will set something up after the current offsites. I will also bring this up with the UX team.

I'm not opposed to the "single letter icons", but from my view, if we go with it this should likely be a log-specific rule since it deviates from the standard grouping pattern used elsewhere, like how queries are typically grouped with identical icons.

Additionally, if users find the log icons confusing, they can always refer to the expanded view for more clarity and context.

[diegoadams]

@gelicia, could we update the "active states" of the mini and expanded icons and text, similar to what the mega menu does

• Non active items = Secondary text colour
• Active state = Primary text colour

[gelicia]

@gelicia, could we update the "active states" of the mini and expanded icons and text, similar to what the mega menu does

• Non active items = Secondary text colour
• Active state = Primary text colour

yes