React Index Page Template

Hi everyone,
as part of our planned visual update for Foreman 3.0 & 3.1, roadmap here: UX roadmap for Foreman 3.0
and the move to Patternfly v4 (after v3 got deprecated and limited to React < v17)
I think it’s nice to work on new React components, but it’s not great
it still takes a lot of time to work on replacing full pages or even replacing an old ruby + jquery code.

I had the idea of creating a template for index pages, basically, most of them look the same,
they all have Searchbar + Table + Pagination + Action buttons + plugins extension points.

The goal is that anyone could create a fully React page, connect to react-router in ~1-2 days,
this will lead to a much faster move between pages, and a much better UX, also all pages will be consistent and will follow the same design rules.

I am working on a POC to replace the architecture page which is an easy one,
and after that will try to replace another more complex page.

sounds like a good plan?
draft PR: Fixes #32819 - Add Index page template by laviro · Pull Request #8596 · theforeman/foreman · GitHub
take a look on the second commit on how I created the architectures page…
still a POC but you can see the flow and that it is quite easy to create.

Thanks!

Today we have a plugin to customize the columns in the host index. While I can imagine that that would be last to be converted, I do think about extensibility ahead of time.

Another example is one that added items to the audits index:

However, that one probably broken in Foreman 1.22 when it was rewritten to React or in 1.24 when it became pure React. Today there doesn’t appear to be a way to extend this page from plugins.

I’d like to prevent these regressions in extensibility for plugin authors.

2 Likes

Do you mean just an index page in ~1-2 days or all pages for a simple model?

Thanks for sharing this, I will take a further look.
I would suggest extending the table data from the server rather than manipulating the DOM via deface.

We should allow to extend or manipulate the data in the rails controller, And also we can use the Slot and Fill both client side and sever side. For hosts index I think it would be great to start implementing in a lab experimental page, and then see how we can make this plugin to work.

The template will handle all search, sorting, pagination functionality which can take a lot of time to write this boilerplate properly, but if the page isn’t complex it should be easy enough :slight_smile:

Ok, I get it. I don’t want to start the “makes react sense” discussion all over again, I just want to share that in a pure rails world I’ve written similar pages in an hour because all the heavy lifting was done, you would just need to define the table fields you want to show and get searching, sorting, pagination,… for free. Can we achieve the same with react?

1 Like

That’s exactley the goal, compared to a rails page, it is much faster with react and react router, while also doing async calls on sorting, pagination and search instead of full page reload that take the extra 5 seconds.

Another plan is to show the edit/new pages inside a modal in the same page, reducing more time.

Added a draft PR in Fixes #32819 - Add Index page template by laviro · Pull Request #8596 · theforeman/foreman · GitHub
take a look on the second commit on how I created the architectures page… still a POC but you can see the flow and that it is quite easy to create.