Thoughts and ideas about host index page improvements

[hille721]

Hi @dmsimard,

after some weeks/months with the new host index page view, here my thoughts and ideas for improvements:

thoughts

• the playbook status icon is to prominent in column one. I'm always confused if I see there a red icon, but the host was running green. Also there is the question if we anyhow need this column a the host view.
• same thing about playbook duration. On the host view I'm not really intertested to see this. Imo we should highlight more host specific thins instead
• playbook name is missing. You have to click on the report of one host, to see which playbook it is
• "Last update" and "Last results" are misleading column tiles if "Include all playbook reports" is ticked

ideas

• reordering of the columns, imo the hostname and last result columns should be highlighted more prominent, eg, by putting them into the beginning
• adding playbook name/path to the view
• dropping playbook status and playbook duration column
• addinng possibility to filer for playbook name/path and subset
• filtering for host facts
• renaming "Last update" and "Last results" to "Update"/"Results"
• adding ansible groups to the view (there I have no idea, if this is technical possible, I think currently the groups in which a host is, is not reported?), but it would be an awesome feature

[hille721]

the idea of host fact searching and filtering is also already tracked in #297

[dmsimard]

Hey @hille721, thanks for the feedback <3

I need to focus on AnsibleFest and Contributor Summit things for now, let me get back to you with my thoughts when I have a chance.

[hille721]

@dmsimard, finally I had some time to look into this and did some changes how I would love too see the host index page:

• removed playbook status and playbook duration columns
• added playbook name / path and make it searchable (in fact the search is just for the playbook id, not the playbook name. Could be improved)

Addding playbook name / path is btw really easy with host.playbook.name / host.playbook.path. I would wish to add at least this column to the next release, because this is really missing (also feedbacked by others in my company).

[dmsimard]

@hille721 thanks for working on this. Here's some thoughts.

I think I can concede that the playbook status is not immediately relevant and can even be confusing relative to the status of the tasks that the host ran but I'd keep the playbook duration. It's useful to be able to see how long playbooks with that host took.

I wonder about the order of the columns, especially when comparing the playbook page, the hosts page and the new tasks page. For easy comparison:

---

Playbooks

Hosts

Tasks (WIP)

---

I'm no UI/UX expert and the UI has grown organically over time... When I designed the tables, I like to think I more or less followed this approach:

• Highly variable width columns (such as playbook labels and host facts) should be at the right hand side to avoid needless whitespace in the middle of the tables
• Fixed width columns (such as status, link to report, date, duration) should be on the left hand side so these columns are well aligned and make the best possible use of limited width space
• The name of the thing related to the row should be the first non-fixed width column to make it easy to scan (this is one of the things users will look for)

Now, based on that approach:

• The tasks page needs work, it's ok :p

• The host status probably doesn't belong in the first column (in-lieu of playbook status) because it's variable width unless we replace the current labels with icons and a number or something like the number of tags with the appropriate background color:

• The playbook name (or path) could go after the host name, but then that pushes the host status further away

  • Would <report> <date> <duration> <hostname> <status> <playbook name> <host facts> work ?
  • If we can find a pretty implementation of fixed width status it could go earlier on in the row too.

[dmsimard]

The playbook name (or path) could go after the host name, but then that pushes the host status further away * Would <report> <date> <duration> <hostname> <status> <playbook name> <host facts> work ? * If we can find a pretty implementation of fixed width status it could go earlier on in the row too.

I was curious what that might look like and while it may not be perfect, I don't dislike it either: https://github.com/dmsimard/ara/commit/181bd4edcda3cf1fa60542a754ac866636e4188d

There is probably no need to print the entire words "OK", "CHANGED", etc, because they take up a lot of width real estate. It's somewhat unfortunate that failed and unreachable have the same color -- we could fold them within the same pill:

[hille721]

There is probably no need to print the entire words "OK", "CHANGED", etc, because they take up a lot of width real estate. It's somewhat unfortunate that failed and unreachable have the same color

I'm kind of used to it, thus it looks weired for me now. But you are absolutely right. We don't need that and having the status directly at the begining is pretty cool.

Just one thing: I would rename "Last update" to simple "Date".

[hille721]

Rebased my branch on top of your and added (https://github.com/hille721/ara/commit/39822080ab98b67e90bddf0b31fc6cfe95c593b6)

• playbook name filter
• playbook path filter

Also if you now click on a playbook name / path. It will be filtered for that. Quite cool I think because thus you can check, which hosts were running for specific playbook runs

[flowerysong]

There is probably no need to print the entire words "OK", "CHANGED", etc, because they take up a lot of width real estate. It's somewhat unfortunate that failed and unreachable have the same color -- we could fold them within the same pill:

Relying on colour alone is not ideal for accessibility.

[dmsimard]

 Relying on colour alone is not ideal for accessibility.

@flowerysong I agree. That's why I feel it's important to keep the full labels (with their corresponding colors) in the search box and have HTML title/tooltip attributes on the pills such that additional information and context is available on mouse-over:

There are many other instances where HTML titles and tooltips are used. I realize that if the UI/UX was good and intuitive enough, we may not need to do that but I would love it if ara could have a skilled frontend contributor in the future, we could use the help :p

[dmsimard]

@hille721 I added a comment on your commit -- could you open a PR? Would make it easier to review and discuss.

[dmsimard]

If we go with the status pill implementation, I wonder whether we should only print the statuses for which we have something, not unlike what we had before, in fact.

It would look like this:

The width becomes somewhat variable but I believe it makes it easier for users to scan for what they're looking for instead of having orange/red/blue everywhere.

[hille721]

The width becomes somewhat variable but I believe it makes it easier for users to scan for what they're looking for instead of having orange/red/blue everywhere.

Agree, thought the same.

[dmsimard]

I'll close this now that the corresponding PR has landed. It's been a worthwhile iterative improvement. Thanks!