Selectable labels

[w0rm]

I think that the best way to address #887 is to have split buttons, with a text portion and a clickable element. This way we don't mess with accessibility.

I also fixed #886, because the grouping labels are very similar to the ones from the alert list.

[stuartnelson3]

this is sweet, I like it

[stuartnelson3]

Would be good to get some other opinions:

@beorn7 @grobie @mxinden @fabxc @brancz @brian-brazil if any of you have time to check out the new button interaction, would be cool

[mxinden]

@w0rm I think this is a very sound solution to #887.

As a usability suggestion, can we replace the plus symbol by a filter symbol like e.g. http://fontawesome.io/icon/filter/? In addition we could put the symbol next to the string Filter in the tab component. This connects the two, so users know if they click the filter icon on a label, it will be added to the filter tab on the top. What do you think?

[w0rm]

@mxinden I don't like this icon, I think it doesn't represent an action of adding a matcher to the filter list. Alternatively we could use a magnifying glass with a plus, but I think a tooltip is enough.

[grobie]

I didn't immediately grasp the elements, but it seems to be a pretty clear interface actually. I find the plus sign a clear icon for the action. In case there is a more common one for that scenario, I wouldn't mind though.

Feature request: It would be helpful to easily select the label value with a single click/double click. Maybe by changing the selection behavior so that a double click inside the value string selects everything between the quotes.

[stuartnelson3]

@grobie feature requests belong in issues :)

[stuartnelson3]

Unless we here a strong "no" from someone, I'm going to merge this in 24 hours. I think we agree that it's an improvement, and if we decide that a different icon would be preferable, we can easily change that.