Collapse alert groups when initially viewing ui

[stuartnelson3]

helps with frontend rendering, and (in my opinion) makes it more usable. clicking the + expands the group, much like showing/hiding annotations for individual alerts.

requested in #911

[w0rm]

As far as I understand this would only allow to expand one group. Can we allow expanding multiple groups? Can we also have a button to expand all groups?

If there is a single group, can we always expand it?

If we add a button to expand all groups, can we keep this preference in the localStorage like the username?

[stuartnelson3]

As far as I understand this would only allow to expand one group. Can we allow expanding multiple groups?

We definitely can. I thought about this but did the simple thing first. Also, since we only allow a single alert's annotation information to be open at a time, I thought I could do that as well.

I'm guessing, for implementation, we would store a List of Labels and compare against that.

Can we also have a button to expand all groups?

We definitely could. I'm wondering how often it would be used. But, if there are users/alertmanager installations running that have relatively few alerts/alert groups, maybe it would make sense to provide this.

Maybe you could give some suggestions on how to show this, and where to place it (I have very little UX skill..)

If we add a button to expand all groups, can we keep this preference in the localStorage like the username?

+1

If there is a single group, can we always expand it?

Makes sense

[w0rm]

@stuartnelson3 let’s chat about this on Monday

More ideas:
Would it be cool to collapse groups with too many alerts and auto-expand groups with a few?
Shall we show the number of alerts in a group?

[beorn7]

Thanks for the PR and the discussion. Dynamically autoexpanding if a group has very few alerts and/or there are very few groups altogether would be awesome (cf. how GitHub renders notifications https://github.com/notifications , they even have partial expansion there, perhaps that would be interesting here as well, to see an example alert").

Would be great to see a number next to unexpanded groups ("44 alerts") or partially expanded groups ("41 more alerts, see more...")

[stuartnelson3]

My plans for this PR:

• for a single group, expand it always
• support expanding multiple groups
• add a button to toggle expand/collapse all (user setting stored in localStorage)
• add alert count behind group labels

[beorn7]

And of course, this PR doesn't have to solve everything. It's already a great start.

[stuartnelson3]

@w0rm could you help a bit with the styling? in particular, the alert count seems to be on the "baseline" and should probably be bumped up higher, and the "expand all" button doesn't quite seem to be lined up correctly.

[stuartnelson3]

After a lot of anger and confusion, I did some reading and figured out that booleans cannot be stored into local storage. Is this an ok way to get the boolean back out? Not sure if there's a convention around it.

[stuartnelson3]

This is sorting the alerts into alert groups immediately when they're returned from the API. I wasn't sure how to have a pattern match Initial, Loading, and Failure e, because they're technically of type ApiData GettableAlerts. If there's a way to compact this, that would be awesome.

[w0rm]

I think this is fine.

[w0rm]

@stuartnelson3 I adjusted the styling: