Feedback on global node filter with dynamic filters

Problem

This ticket is meant to collect feedback on the recently introduced changes to the global node filter, to include dynamic filters on host labels, node status and agent version.

Description

Feedback to be shared in comments.

Suggested feedback to tackle:

#### High
- [x] [BUG] Events feed: Nodes filtering is no longer available
- [ ] When dynamic filters area applied the nodes on the left should be filtered as per the selection (Included and Filtered Out labels are not needed)
- [ ] If there are multiple filters, the pills fall off the view and I cannot scroll horizontally. Could we maybe wrap?

#### Medium/Low
- [ ]  Generic tooltip on the Dynamic filters since it doesn't seem to add much value to repeat it on each attribute level name. Suggestion would be to go with just: "Filter nodes by: available host labels configured at the Agent, their status, or Agent version. The number indicates how many nodes will be included after selection."
- [ ] The Alerts, ML and Fn indicators feel a bit much. It seems that we are using this real-estate more as feature highlight than something that is functionally useful. Can we reduce this, possibly to only show alerts?
- [ ] There is no visual indication that the host label area is scrollable
- [ ] Put the selected filters pills above the Add nodes and Integrations buttons. Maybe even all the way at the top under the title.
- [ ] Instead of `Netdata version`, use `Agent version`
- [ ] There are some issues with the title where it says "Visualizing data in space from 3 Nodes" or "...All nodes" it should say "Visualizing data in room Docker for 1 node." or if node selection "Visualising data from: `x node1` `x node2` `x node3`" and if not a node was selected then the text was changing to "Visualising data from All nodes with: `criteria1` `criteria2`"
- [ ] If there is vertical room for the other filters to be expanded, can we expand them by default, even when nothing is selected?
- [ ] If you select multiple nodes along with some dynamic filters, the difference between things being OR-ed is pretty subtle. Could we maybe have a different background color for the pills? That way the OR outside is visually different from the one inside. Also the precedence of operators looks ambiguous (details [here](https://github.com/netdata/netdata-cloud/issues/946#issuecomment-1787110511))
- [ ] It seems that label sorting ignores the leading underscore. I have mixed feelings on this and tend towards showing unprefixed labels first. Maybe we should split them in two sections: "Custom labels" and "System labels".
- [ ] As labels prefixed with an underscore are "system labels", it might be nice to provide human readable display names and/or tooltips that explain them in more detail.
- [ ] In the both themes, the difference between normal and grayed-out text is too subtle.

Importance

nice to have

Value proposition

Improve the UX for the global node filter.

Proposed implementation

No response

Great work on adding filtering on host labels. My feedback:

Really like:
- The "n of m" indicators at the top:
- The pills for filters at the bottom (but see below).
The tooltips at the question mark following the Host labels, Node status and Netdata version are the same generic text about what to do. We should either put this at the Dynamic filters text above, or have different texts. In the latter case we could have:
- Filter nodes by the host labels configured at the Agent. The number indicates how many nodes will be included after selection.
- Filter nodes by their status. The number indicates how many nodes will be included after selection.
- Filter nodes by Agent version. The number indicates how many nodes will be included after selection.
Instead of Netdata version, use Agent version. I am not sure, though, how useful this is for people outside Netdata.
There is no visual indication that the host label area is scrollable, other than when you hover. In my initial confusion, I didn't know why there wasn't a value here for app.kubernetes.io/component as I was watching that part of the screen and the scrollbar indicator was too far away to notice when I started hovering. I think there are other places where this is a problem, including horizontal scrolling in the Events and Functions tabs.
If there is vertical room for the other filters to be expanded, can we expand them by default, even when nothing is selected?
The included vs filtered out indicators is visually distracting. The orange color suggests a problem and in general the indicators are too much in my face. What if we had a separate indicator in the selection box instead? Maybe a plus sign.
If you select multiple nodes along with some dynamic filters, the difference between things being OR-ed is pretty subtle. Could we maybe have a different background color for the pills? That way the OR outside is visually different from the one inside. Also the precedence of operators looks ambiguous:
I'd put the selected filters pills above the Add nodes and Integrations buttons. Maybe even all the way at the top under the title.
If there are multiple filters, the pills fall off the view and I cannot scroll horizontally. Could we maybe wrap?
There are some issues with the title. When in the "All nodes" room, it says:

Visualizing data in space from 3 Nodes
- This should read:
Visualizing data in this space for 3 out of *nodes

For other rooms, it sometimes says "All nodes" instead of actual room name, and leaves out the count:

I'd use this text for this case:

Visualizing data in room Docker for 1 node.
The Alerts, ML and Fn indicators feel a bit much. It seems that we are using this real-estate more as feature highlight than something that is functionally useful. Can we reduce this, possibly to only show alerts?
It seems that label sorting ignores the leading underscore. I have mixed feelings on this and tend towards showing unprefixed labels first. Maybe we should split them in two sections: "Custom labels" and "System labels".
As labels prefixed with an underscore are "system labels", it might be nice to provide human readable display names and/or tooltips that explain them in more detail.
In the both themes, the difference between normal and grayed-out text is too subtle.

@ralphm the issue with

The "n of m" indicators at the top

is that now I read Live 2 of 22 and that's not representative of what's going on The user has SELECTED 2 of 22 Live Nodes, but the meaning is different when read I personally prefer to show the total of selected nodes in a different indicator instead, as it was before. I agree with moving the filters tokens on top following the title In the initial design the title was "Visualising data from: x node1 x node2 x node3" and if not a node was selected then the text was changing to "Visualising data from All nodes with: criteria1 criteria2" .

@christophidesp I didn't think of interpreting Live 2 of 22 as 2 out of 22 nodes being live, but I can see the point.

As for the title, I think it should also indicate n of m there, and then show the filter pills. The "All nodes" here is the room name, not "all nodes". That's also why I suggested to include "room" to remove ambiguity. We should not use "all nodes" anywhere to indicate "all the nodes", to prevent more confusion with the room name.

The tooltips at the question mark following the Host labels, Node status and Netdata version are the same generic text about what to do. We should either put this at the Dynamic filters text above, or have different texts. In the latter case we could have:

Filter nodes by the host labels configured at the Agent. The number indicates how many nodes will be included after selection.

Filter nodes by their status. The number indicates how many nodes will be included after selection.

Filter nodes by Agent version. The number indicates how many nodes will be included after selection.

on this one would probably go with the generic tooltip on the Dynamic filters since it doesn't seem to add much value to repeat it on each attribute level name. Suggestion would be to go with just:

Filter nodes by: available host labels configured at the Agent, their status, or Agent version The number indicates how many nodes will be included after selection.

If there is vertical room for the other filters to be expanded, can we expand them by default, even when nothing is selected?

on the original designs this was tackled a bit differently since we didn't have the tree component and where having a combination of a mix of components: checkboxes, dropdowns, etc. where some (possible) key attributes didn't collapse

If you select multiple nodes along with some dynamic filters, the difference between things being OR-ed is pretty subtle. Could we maybe have a different background color for the pills? That way the OR outside is visually different from the one inside. Also the precedence of operators looks ambiguous:

The included vs filtered out indicators is visually distracting. The orange color suggests a problem and in general the indicators are too much in my face. What if we had a separate indicator in the selection box instead? Maybe a plus sign.

It is a nice thing to allow the combination of dynamic filters with the individual node selection but is it something really needed? this with the following point seems to cause some visual complexity that could probably be simplified - example of a different approach taken on the designs (prototype)

on this one would probably go with the generic tooltip on the Dynamic filters since it doesn't seem to add much value to repeat it on each attribute level name. Suggestion would be to go with just:

Filter nodes by: available host labels configured at the Agent, their status, or Agent version The number indicates how many nodes will be included after selection.

:+1:

If there is vertical room for the other filters to be expanded, can we expand them by default, even when nothing is selected?

on the original designs this was tackled a bit differently since we didn't have the tree component and where having a combination of a mix of components: checkboxes, dropdowns, etc. where some (possible) key attributes didn't collapse

But at the bottom of that screenshot is the "Host Labels" section, that apparently can be expanded? Isn't that a tree then? I don't see any examples of what's below the fold.

The included vs filtered out indicators is visually distracting. The orange color suggests a problem and in general the indicators are too much in my face. What if we had a separate indicator in the selection box instead? Maybe a plus sign.

It is a nice thing to allow the combination of dynamic filters with the individual node selection but is it something really needed? this with the following point seems to cause some visual complexity that could probably be simplified - example of a different approach taken on the designs (prototype)

I don't see anything related to this point with that link, but looking at the previous link and screenshot, it seems that instead of continuing to show all nodes, applying one or more dynamic filters also filters the list of nodes. That's another fine solution. I also appreciate the cleanliness of not having the ML and Fn indicators in that.

I do think that the combination of dynamic filters with individual node selection is a ~good~ great thing, and we have also received positive feedback on this.

@ralphm @christophidesp place the consolidated feedback on the two tasklists on top. I'm in doubt if the Medium/Low should be separate lists but was thinking for now keep them as they are

I think there is a release being pushed today, will check if this [BUG] Events feed: Nodes filtering is no longer available is fixed there since this is already know, if not will open a separate bug

netdata / netdata-cloud