Refactor host details nav-tabs width

Now that the host details charts are less relevant,
what do you think about making the nav-tabs section larger,
and move the charts below it:

Currently the real-estate there is very small, and with this change we will be able to extend it with more data / features.

also, the new Host Details page will have nav-tabs with full page width,
maybe it’s time to refactor foreman & plugins tabs and write them in React
so when the new Host Details page will arrive, it could be switched smoothly.

PR here: Fixes #30644 - Refactor host details nav-tabs width by Ron-Lavi · Pull Request #7903 · theforeman/foreman · GitHub

There is already an ongoing effort on redesigning the host detail page led by @amirfefer in coordination with @Roxanne_Hoover. You are most welcome to join it if you want to help.

1 Like

I would be happy to join, as I wrote above - I think it would not only be more comfortable,
but since the new Details page will have full-width tabs, plugins could adjust and add even more features to that section, maybe even do a rewrite in React so it will be inserted smoothly with the next React implementation.

The new details page will have a very different design than the current ones (you can see an initial implementation in the experimental mode), so i’m not sure it makes sense to add tabs to the old page with a completely different design. One of the next steps to the new page is adding extension points so plugins will be able to add tabs to it already.

I quite like placing the charts below the relevant data. In my opinion, that’s a great quick win with minimal effort. I would not go further, though.

i’m not sure it makes sense to add tabs to the old page with a completely different design

I will try to explain a bit more,
the new page nav-tabs design looks like this:

I guess that soon the way to extend those tabs will be in JS something like:
registerHostDetailsTab({title: Component})

currently I started to work on extending that page from my plugin, it’s all written in React and Redux,
you can checkout the POC in https://github.com/theforeman/foreman_rh_cloud/pull/310

90136877-7dd54200-dd7d-11ea-8a22-1b3bfe14acc6

So the only switch to the new Details page will be to use that registry method.

when the space will be bigger, imagine how many features and data you could present for that specific host :slight_smile: