1300176 - improve layout of individual rules

Status: RESOLVED WONTFIX

(Release Engineering Graveyard :: Applications: Balrog (frontend), defect, P3)

Description

[[e-mail] (:bhearsum)]

Individual rules on the rules page are quite large right now, and not terribly well organized. When the new UI was created we didn't spend too much time thinking about this, but now that we've been using it for awhile and made some improvements, we may be able to come up with a better vision for this.

The currently layout has a header containing the product+channel on the left, and buttons for different actions on the right.

The body of each card contains the "major" information on the left (mapping, rule id, data version), and the "minor" information on the right (everything else).

Here's a few ideas that we brainstormed
* Remove update_type completely (we never do major updates anymore)
* Move the value of the "comment" field to a tooltip of something on the header, or maybe the card overall
* Move priority to the header
* Move all metadata fields to the header (data version, rule id, priority).
* Organized by column type (per https://wiki.mozilla.org/Balrog#Rules)
* Demote product and channel from the header, now that our primary method of browsing involves filtering on those values to start with.

cc'ing a bunch of folks who interact with the UI regularly - please feel free to add your comments or ideas! This is something we should probably have some mock ups for before proceeding, as there's lots of different ways we could go.

Comment 1

[Osmose [:osmose, :mkelly]]

All my interactions are from the perspective of system add-on updates. My general thoughts:

- A tabular columnar layout would be amazing in helping me skim rules. It's annoying to code but being able to select which columns I care about and then sorting by them would make reasoning about the rules I'm reading better, and also save space to let me see more rules at once.

- Info I care about seeing, in order of importance: Version filter, Mapping, Priority, Comment, Product, Channel. Product and Channel are last because I usually just filter by them and don't really care after that.

- Edit dialogs being in modals vs a separate "page" seems weird to me.

- I'd love to be able to give "names" to rules. 99% of the time I'd be naming the rules after the versions they're targeting, but I suspect that there are sufficiently enough other use cases that asking the version filter to be part of the "title" isn't great. Also there's other useful info that could be encoded in the name vs the comment that would be useful to see on a tabular layout instead of the list layout it currently has.

Comment 2

[[e-mail] (:bhearsum)]

Thanks for the input!

(In reply to Michael Kelly [:mkelly,:Osmose] from comment #1)
> - I'd love to be able to give "names" to rules. 99% of the time I'd be
> naming the rules after the versions they're targeting, but I suspect that
> there are sufficiently enough other use cases that asking the version filter
> to be part of the "title" isn't great. Also there's other useful info that
> could be encoded in the name vs the comment that would be useful to see on a
> tabular layout instead of the list layout it currently has.

Are you aware of the "alias" field? You can set it on any rule, and use it in place of id. The current UI may not make it fully fit your use cae, but it may be a little helpful at least.

Comment 3

[Osmose [:osmose, :mkelly]]

I am now, thanks for the tip!

Comment 4

[Anjul Tyagi]

Can I work on this issue?

Comment 5

[[e-mail] (:bhearsum)]

(In reply to Anjul Tyagi from comment #4)
> Can I work on this issue?

Absolutely. This bug will require a bit of upfront design though. There's some ideas in earlier comments about how to improve the layout, but I'll want to show some people a mock up of the new idea before we proceed with anything. Are you up for doing that?

Comment 6

[Anjul Tyagi]

Thanks Ben, I've decided to work on another issue and maybe come back to it later.

Comment 7

[vedantr1998]

Hey! ben, I'm up for this, should I implement the ui as stated in the first comment or there's something we can change?

Comment 8

[[e-mail] (:bhearsum)]

(In reply to vedantr1998 from comment #7)
> Hey! ben, I'm up for this, should I implement the ui as stated in the first
> comment or there's something we can change?

The first 2 comments are just brainstorming - it's difficult to know what will work best without seeing it. I think the best way to go here is to mock it up first, and then we can have some people that interact with Balrog regularly see what they think before implementation.

Comment 9

[[e-mail] (:bhearsum)]

Please hold off on working on this until https://bugzilla.mozilla.org/show_bug.cgi?id=1363452 is complete - it's making substantial changes to the Rules UI. Feel free to mock something up in the meantime, though.

Comment 10

[Collins Abitekaniza]

(In reply to Ben Hearsum (:bhearsum) from comment #9)
> Please hold off on working on this until
> https://bugzilla.mozilla.org/show_bug.cgi?id=1363452 is complete - it's
> making substantial changes to the Rules UI. Feel free to mock something up
> in the meantime, though.

Ok, noted.

Comment 11

[Collins Abitekaniza]

Hi guys, With all the input, I was able to come up with a simple mockup [Imgur](https://i.imgur.com/O71d6Vr.png). Any feedback would be greatly appreciated. Thanks :)

Comment 12

[[e-mail] (:bhearsum)]

(In reply to Collins Abitekaniza from comment #11)
> Hi guys, With all the input, I was able to come up with a simple mockup
> [Imgur](https://i.imgur.com/O71d6Vr.png). Any feedback would be greatly
> appreciated. Thanks :)

Can you explain the thought process of this, and where some of the missing fields might go? I see that some of the metadata (rule_id, data_version, priority) has moved to the titlebar, and the product/channel have disappeared completely.

Comment 13

[Collins Abitekaniza]

(In reply to Ben Hearsum (:bhearsum) from comment #12)
> (In reply to Collins Abitekaniza from comment #11)
> > Hi guys, With all the input, I was able to come up with a simple mockup
> > [Imgur](https://i.imgur.com/O71d6Vr.png). Any feedback would be greatly
> > appreciated. Thanks :)
> 
> Can you explain the thought process of this, and where some of the missing
> fields might go? I see that some of the metadata (rule_id, data_version,
> priority) has moved to the titlebar, and the product/channel have
> disappeared completely.

Oops, sorry for that. Updated link here https://i.imgur.com/TqA84Xr.png

Comment 14

[[e-mail] (:bhearsum)]

Mass closure of old Balrog UI bugs. We've built a new UI in https://github.com/mozilla-frontend-infra/balrog-ui, and any issues which are still valid should be filed as Issues there.