Rewriting poudriere web app

[fel1x-developer]

Prerequisites

• Have you checked for an existing issue describing your idea?

What is your proposal?

Rewriting poudriere web app under src/share/poudriere/html with introduction of modern web technologies such as Node.js and React.

What is the existing behavior, if any?

The current implementation of the web app uses bare HTML/CSS, jQuery, Bootstrap 5, and DataTables. However, it is hard to maintain the web app under these libraries/frameworks. For example, if someone wants to update Bootstrap in the current web app, one has to

1. Download latest version of Bootstrap from web browser/curl/wget.
2. Remove the old version of Bootstrap and copy the new version.
3. Edit index.html, jail.html, and build.html to update the folder name of the new version.

In node.js/npm, this can be simply done by npm update bootstrap --save.

@bapt also mentioned that the web app needs to include more information about poudriere instance, which I find easier on JSX than HTML/jQuery.

Our poudriere.js was written 10 years ago, and since it has almost 1500 lines of code, it has been really difficult to add/maintain features. I think it needs to be modularized into several files, but introducing ES6 modules in existing code might break some features and create circular dependency on each other. 'poudriere.js' was not designed to be structured through modularization at first place, so that can also be achieved through this rewrite.

Lastly, I find that libraries/frameworks that runs on nodejs/npm have better integration in IDEs such as VS Code, Webstorm, and Phpstorm, so I expect a huge improvement in the speed of development.

What is the motivation / use case for the change?

As mentioned above, the main advantage of this rewrite will be the ease of maintaining and adding features. Through Webpack/Turbopack/Vite, web app can have better performance and smaller file size than manually coding bare HTML and Javascript.

Did you consider any alternatives?

I see that this is the best way to maintain/develop poudriere web app. This approach also has a potential of extending capabilities of poudriere, such as controlling multiple poudriere instances or cli on web.

Is this really a ports feature request?

As the web app is already a part of the poudriere port, I think this is a valid request. There is no reason to have such things like ports/pourdiere-web-app-new.

Example

Cockpit, a server management web app, uses Node.js and React for its frontend. Github repo If it had this much features in bare HTML/Javascript, it would have been really hard to maintain and updating features.

Additional context

There should be a discussion/consensus on two topics.

1. Which framework to use?
   This is a hot topic in some places. (Google "Which web framework is the best and you will see different answers on Reddit/Youtube) I already have some experience with React/Next.js so I prefer using them. Next.js has also good integration with shadcn/ui and TailwindCSS. I heard that Nuxtjs/Vue and Sveltekit are also good options, but I would need to spend some months in studying new web frameworks. If there are any thoughts/suggestions about which framework to use, please let me know down in the comment.
2. Which repo should the new web app be hosted?
   I suggest creating a new repo(freebsd/poudriere-web-app) for this rewrite, as it requires less CI customization. Having an isolated repo for the web app can help focusing on web specific issues/PRs apart from core pourdiere features. Maybe this needs a n approval from the core team?

Edit: I want to resolve dependency PRs on the current web instance before moving on a new one. Please review #1160 and once it is closed #1134 .

[michael-o]

This, of course, add a huge dependency trail...