[feedback-needed] Foreman core new reports tab

Hello,
the new reports tab was supposed to be part of the new Host Reports plugin - which currently isn’t under active development ( you can read more about it here )
A new status mapping was discussed in New config report summary columns
but as you understand, we will still be using the original config reports summary statuses.

Here is what the new tab looks like, what do you think about the status icons?

with some interaction:
127.0.0.1_5000_new_hosts_host19.example.com#_Reports_page=1&per_page=20&search=

More features like quick status filters will be added in the following PRs,
this is the PR for the first implementation:

and list of statuses that I used:

failed -> <ExclamationCircleIcon color="var(--pf-global--palette--red-100)" />
failed_restarts -> <SyncAltIcon color="var(--pf-global--palette--red-100)" />
restarted -> <SyncAltIcon color="var(--pf-global--palette--orange-300)" />
applied -> <CheckCircleIcon color="var(--pf-global--success-color--100)" />
skipped -> <AngleDoubleRightIcon />
pending -> <PendingIcon />

Thanks,
Ron

1 Like

I would personally get back to the older design - column for each of those statuses with sticky headers (which we actually have in this implementation but without headers). The summary column works with a smaller number of statuses - which is not this case. As used icons aren’t intuitively recognizable, it would force users to be hovering over them a lot. I think we would be just adding confusion by removing column headers. (of course, we need to take into consideration statuses for Puppet AND for Ansible as well)

Let me add a few options we may discuss:

##Option 1

Pros:
•visually appealing and consistent
Con:
•The overall status of the report is not visible straight away. Reports without failed run have Failed icon with zero value.

##Option 2

Pros:
• Failed/Changed runs are noticeable right away (easily spotted)
• less busy than the first options

##Option 3


Basically the old design in PF4
Pros:
• consistent with Insights (Recommendations in Advisor system)
• not busy

@Ron_Lavi

4 Likes

I really like option 2 @MariSvirik, thanks for making this mock so quickly :slight_smile:

Let’s try a poll, which implementation do you prefer?

  • Option 0 - in the head of the post
  • Option 1 - with separated columns
  • Option 2 - separated cols with empty data
  • Option 3 - closer to the original design

0 voters

2 Likes

@nadjaheitmann could be also interested in this.
Maybe @lzap as well.
And @mcorr could maybe make this poll more prominent…

1 Like

Personally, I would love to have one icon showing if actual state: was the last update good (green), yellow (some minor issues), and red (failures and the user should care about this).

So, option 3 + state icon.

the “resource” can be column 1, just before the “repoted at” and only the icon.

2 Likes

Iiuc, you are talking about a global status that will “summerize” all other statuses, right?
How about displaying the global status to the left of all other statuses? Would that be helpful?

Sounds good to me :+1:

@MariSvirik any chance we could add another mockup? And create another poll?

1 Like

Status per row (per report),

@Ron_Lavi
Numbers are illustrative. Not pixel perfect. I’ve used the “old” global status states.
It’s advised by PF4 to use icons with text. Also, it’s more accessible that way for people with eye/vision problems.


Let me know if that looks fine and then we can create a poll.

2 Likes

Thanks @MariSvirik again :slight_smile:
let’s try a final poll:

  • Option 0 - as in the head of the post
  • Option 1 - each status in a separated columns
  • Option 2 - Separated cols with empty data
  • Option 3 - closer to the original design
  • Option 4 - last option with global status and separated cols

0 voters

2 Likes

If I get the option 4 correctly, we’d have to implement the mapping with the old reports first, right? Calculating it may be easy, but it means we need to add it to the API, scoped_search definitions etc. Until we have it, I’m voting for Option 2, then I’d switch to the Option 4.

1 Like

although for the global status we could add in the modal some basic calculations and as a follow up to add it to scoped search, etc…

if we like this design and thinking to switch to option 4 later on, then I would suggest just starting with it

1 Like

Thanks @MariSvirik for the mockups! I like the status summary in option 4.

From visual perspective, I prefer the dashes ‘-’ that replace the ‘0’ in option 2.

Also, would it make sense to add the Status icons to the column headers as well?

What icons would you expect in the column headers? Icons that @Ron_Lavi used in the beginning of this feed or just icons from the global status? E.g. Failed and Failed restarts would have the same icon if we use the global status approach, but a different icon if we use Ron’s mapping.

Personally, I would expect the icons in the Status column to match the one in the header of the recent report states. Then, you could directly match the icon in the status column with the column on the right where you have the different statuses. I guess that would be Ron’s mapping? Not sure if that makes sense for the global status, though.

Thanks to anyone who voted!
Based on the two polls, looks like option 2 has won!

Big thanks go to @MariSvirik who made the discussion richer and more interactive :slight_smile:

2 Likes

People have spoken!

@nadjaheitmann that proposed mapping wouldn’t make much sense for the global status - its main point was to reduce the number of statuses/icons involved and make the design/ experience cleaner. We wouldn’t be able to have just one icon per global status if we used a proposed mapping - would we, for example, use skipped icon or the pending icon if both are involved?
Anyway, other design has been selected. So no need to follow up on this discussion.

2 Likes

PR is updated with the option 2 design: Fixes #34782 - Add reports tab in host page by Ron-Lavi · Pull Request #9190 · theforeman/foreman · GitHub

@MariSvirik I changed the name of the Resources column to Origin as origin can be used for searching, and users may be used to that already,
but as a follow-up, we can change that also in the search.

2 Likes

@Ron_Lavi agree.