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...

[fel1x-developer]

@bdrewery @bapt Since you are de facto maintainers (based on number of commits), I would like to hear your opinions on this.

I finished basic UI of this web app, which is hosted on https://github.com/fel1x-developer/poudriere-web-app.

This web app is based on SvelteKit and daisyui. I could have used Next.js, but I found out that it is too bloated for this kind of application. On the other hand, SvelteKit has better component framework (I prefer Svelte over React, but people have different views on this) and it is the official full-stack framework of Svelte with routing capability.

The reason I'm suggesting a complete rewrite of the web app is due to maintenance issues. The poudriere.js file does not follow ES6+ standard which is error-prone and hard to read. On the other hand, using a framework can fix this with build time error detection.

For the server part, we have two options: using nginx or node. With nginx, this would be SPA application. However, @bapt suggested that the poudriere web app needs to show more information, and a SPA application has limit on this, as it cannot directly access to the server (e.g. showing list of files in the log folder). To solve this problem, we need to use node instead to host the web app as SSR application. SSR applications have lower burden on client whereas the server needs to do more job, and I think this sounds reasonable as web app should be optimized for client side in most cases. The downside of this method is that Node.js does not have official support on FreeBSD and serving (building can be done on macOS or Linux) the web app might not work properly in some cases, so I need to figure this out.

If we are going towards SSR on Node.js, we should also consider the distribution of the web app. In other words, should it be distributed with poudriere like we are doing now or distribute as a separate pacakge on pkg or npm? Node.js will be a requirement for this, so if we ship the web app with poudriere, even users who don't use the web app have to install Node.js, and I don't see any benefit from this.

I appreciate your participation in this topic, and feel free to ask any question if you have one.

[bdrewery]

I love the idea of a node web app. We can still keep the current web ui as it mostly just works. But a separate node app would be great.

I haven't done any node development, yet. I don't have any opinion on the frameworks you mentioned. I've been wanting to get into node development though.

I love the idea of something like React too. I've wanted that for many years.

[michael-o]

I love the idea of a node web app. We can still keep the current web ui as it mostly just works. But a separate node app would be great.

I haven't done any node development, yet. I don't have any opinion on the frameworks you mentioned. I've been wanting to get into node development though.

I love the idea of something like React too. I've wanted that for many years.

From my experience at work is that it adds a constant dependency hell overhead, the ecosystem is huge to build and complexity to the overall project here. We moved away to Django which works everywhere and perfectly on FreeBSD httpd + mod_wsgi. Does anyone of the committers to take care of the complexity in the long-term? Consider the web UI for experts, not end users. KISS