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.

Well, I think the point was about the time the developer spends on that rather than how fast the page loads at the end. I’m sure we could have written rails scaffold generators that would also use modals, async sorting etc. The point is, we used to create simple CRUD pages like architectures or hw models in 1 hour by doing rails generate scaffold architecture name:string and then adding custom modifications to generated files.

I know in the past you worked on some generators. Perhaps that would be handy and a good second step after we settle on how the index and other CRUD pages should look like. So the goal shouldn’t be to add index page in ~1-2 days but for a skilled Foreman developer, it should take ~1-2 hours to have complete CRUD. Otherwise we do something wrong :slight_smile:

2 Likes

Thanks Marek for waking revisiting this,
I wrote it in a very initial step and 1-2 days sounded amazing to me compared to what we have today,

But now I know that it can take even less than an hour to write a new page like this (in case all of the formatters exists)

I think I might write a fresh RFC with more details that I thought about and describe the flow better, and I will link to it from here.

And anything that could speed it even more like generators sounds great