ui: add in-page navigation or breadcrumbs

[dmsimard]

What is the idea ?

I do not have a mock up or have a strong opinion on what it should look like (yet?) but it would be great to have some sort of breadcrumbs or navigation at the top of most pages. There's bootstrap documentation on breadcrumbs but I'm open to ideas or suggestions.

The relationship between objects is explained in the docs:

With that in mind, if we had "breadcrumbs", some examples might be:

# https://demo.recordsansible.org/results/864718.html
index > playbook > play > task > result
# https://demo.recordsansible.org/files/339706.html
index > playbook > file
# https://demo.recordsansible.org/hosts/11043.html
hosts > host facts > task results

Another set of breadcrumbs (or table of contents?) would be nice to display what content is available that may be much further down the page. Maybe a list-group ?

For example, when viewing a host, you might see links to the playbook summary, the host facts and the task results:

This would be particularly useful in cases where there is a lot of data on a single page so the user knows there are other things "hidden" underneath. The example above had a few facts but full fact gathering pushes the task results down.