frontend: patterns UI tweaks

[matryer]

• [ ] a. The legend is pretty useless given how long pattern names are - replace with numbers/letters and include the numbers in the table below (if we go with letters, maybe we make the legend in the graph say 'Pattern A', 'Pattern B' etc. to give people a bit more to click on. (@matryer: ideally, I'd remove this altogether if we can replace its functionality by making the table below selectable)
• [ ] b. It (the legend)shouldn't horizontally scroll example
• [x] c. After clicking 'Exclude' on the pattern line, I'd like to un-exclude there too https://github.com/grafana/explore-logs/pull/359
• [ ] d. Clicking the service selector should select all in the box to make it easy to click and type a new service. Agree the text range should select the whole string.
• [ ] e. Selecting one hides them all in the table - perhaps we could instead show a checkbox and maybe bring any selected to the top? But NOT hide the rest, maybe fade them out a little or some other subtle way to indicate that they're not 'selected'
• [x] f. Include/Exclude buttons
• [x] g. Make include/Exclude toggle buttons
• [x] #407
• [x] #382
• [x] i. No need for decimal in the percentage
• [x] j. Remove 'Volume' heading https://github.com/grafana/explore-logs/pull/360
• [x] #384
• [x] l. Remove 'Patterns' title from the single view graph, it's implied by the tab title https://github.com/grafana/explore-logs/pull/360/
• [x] https://github.com/grafana/explore-logs/issues/361
• [x] https://github.com/grafana/explore-logs/issues/366
• [x] #368
• [x] Multiple include patterns @ivanahuckova https://github.com/grafana/explore-logs/pull/419
• [ ] Bug: Pattern view has no loading state when patterns are refreshed
• [x] #412

[zizzpudding]

b. If we shorten the legend, it won't need to scroll. I agree it should not scroll. c. Do we have anything like a split button? We could simplify this a bit.

[zizzpudding]

e. Selecting one hides them all in the table - perhaps we could instead show a checkbox and maybe bring any selected to the top? But NOT hide the rest, maybe fade them out a little or some other subtle way to indicate that they're not 'selected'

I wasn't sure styling like that could be done and this is why it hides everything else. It's pretty consistent with how the graph works today and the legend on histogram works as well (just filters on the page). I'm OK with changing the behavior as long as moving the selected ones to the top mean they always stay toward the top. Because the filter pill is above the histogram, sometimes you don't see it and removing it can be challenging.

[zizzpudding]

c. Just a thought... Would destructive style buttons for the "undo" be to noisy? One small issue is that once you've included or excluded, it's not obvious looking at the table which are part of the filter (especially on a small screen, when you are on the patterns page).

I don't know if there are any rules for using destructive button for "remove" or "undo" or if they are reserved for delete perminently?

At the least, could we pin the pattern(s) that are part of the filter to the top of the table to make them easier to find?

[ivanahuckova]

Why not just make it blue? I personally wouldn't expect destruct variant on Undo as I associate it with delete and not removing of filters. @zizzpudding

[matryer]

question: Do we think the selected/interacted with patterns should move to the top? We do this in other areas.

[matryer]

re e: You may want to select multiple from the table at the bottom to compare them. So I don't think we can hide them. I agree that things we interact with should float to the top.

[zizzpudding]

For a and b, how about a legend like this

[zizzpudding]

For the selection, rather than hiding the rest could we add a transparency to the text and the sparkline in the other rows of the table (not quite like these images, but you'll get the idea)

[zizzpudding]

images didn't upload in last comment, trying again.