[Feature] WebAdmin / WebGUI

[ioolkos]

An administrative WebGUI could provide benefit to some users. (essentially providing all the functions that vmq-admin can do).
This is not a feature request seen often, but if mentioned it is perceived as a missing feature.

Opening this mainly to discuss technology options for a webadmin GUI plugin.
I'd go for something extremely simple, initially. (maybe just using Cowboy). The other extreme would be a full-fledged Phoenix application.
For the first approach, we could revive @codeadict's https://github.com/codeadict/vmq_dashboard
There was also a plugin here: https://github.com/narioinc/vmqadmin-ui (I think it's unfinished).
@codeadict @mths1 & all interested folks, @vernemq/community: any thoughts?

[mths1]

FWIW, we have a simple prototype as well. Still thinking what to do with it. For us the main benefit would be:

• easier accessible and to use than having to SSL into the machine
• We do not need to give users of the dashboard access to the VM
• We could seperate operators from each other (in the sense of a Mini-SaaS solution)

Essential features for us are also:

• User management
• ACL management

What we were not sure about:

• Config updates and restarts

[ioolkos]

@mths1 good feature points. Obviously, more can be added. Plugin management is a good idea too, as long as we don't end up reimplementing pgAdmin so that we can update ACLs :)

[mths1]

What we did (if we continue) would be a little bit "opinionated" to our needs. BTW: It is Vaadin based, so it would be more a "stand-alone" solution and dependant on the APIs.

[ioolkos]

@codeadict would you allow vmq_dashboard to be integrated into VerneMQ Apps? I think it'd be a great starting point, don't have a clear picture on the effort to a working version (as a replacement of status page, and with basic management features)

[codeadict]

Hi @ioolkos, sure we can use it, although there is not much into it now. My idea is to be an app inside VerneMQ, a standard API written using Cowboy, and use something more straightforward like VueJS or Svelte for the front end. Features I wanted to have were user management but also observability across the cluster and introspection of connected clients (What clients are connected, how many messages are they sending/receiving? tracing them, disconnecting them...).

[codeadict]

My frontend skills have gotten better now and I work with this stuff every day but time has also shrunk lately :(

[ioolkos]

Something that we can incrementally improve, it's just about that. I'll look into it in the coming weeks. Not counting on your effort, your the most generous contributor to this project in any case! :)

[codeadict]

I wish i could be more generous :)

[mths1]

I continued a little with our protoype. It is close to reaching a possible MVP state. The main thing that is missing is cowboy integration and some authentication, currently it runs as a standalone vue application. We could contribute this if there is interest. Basically, it is a 1:1 mapping of the vernemq v1 api to a web interface.

[ioolkos]

@mths1 Thanks! Who doesn't like GUIs, I'm welcoming this :)
We might want to keep it as a standalone application and ensure some form of authentication for it. One reason for keeping it standalone is to separated potential Erlang/Verne vulnerabilities from Vue/Node vulnerabilities.

[ioolkos]

@mths1 what is a good name for this? :)
I can create an empty repo here if needed.

[ioolkos]

@archef2000 The opening notes in the PR here might help get started: #2212

Note that this is a very initial version, help is appreciated as always :)

[ioolkos]

@archef2000 We'll need to document this a bit better, for developers interested in improving the GUI as well as how to install it in the 2.0.0 release.
Probably also a couple of small things to fix in the plugin (vmq_webui), for instance I noticed that the vmq-admin webui install path is probably wrongly hardcoded.

cc / @mths1

[mths1]

Hello @archef2000

I have a later version of the UI in my repro which you could use as a test. It is simple Vue code, so in case someone wants to help making a great UI: More than welcome. I could also prepare a small update this weekend, which is more complete than what is the vernemq repro. I also started to add postgres support (for authentication)

[ioolkos]

@mths1 great to hear! :)
is the config example here still valid?: #2212 (comment)
I'm somehow stuck but I remember I had this working a while back. I'm looking to set up a dev enviroment that links into a local VerneMQ installation.

[archef2000]

Yes. I made a comment with all commands.

[ioolkos]

@archef2000 Here's a manual way to enable the WebUI plugin:

1. Check where the Frontend path is in your installation

➜  ~ sudo vmq-admin webui show
+------------------+------------------------------------------------+
| Item             | Value                                          |
+------------------+------------------------------------------------+
| Frontend Path    | /usr/lib/vernemq/lib/vmq_web_ui-2.0.0/priv/www |
+------------------+------------------------------------------------+
| Frontend Version | Preview                                        |
+------------------+------------------------------------------------+

2. Clone https://github.com/vernemq/vmq_webadmin to somewhere on your system and
   execute pnpm build

3. Copy the dist files to the Frontend path:

sudo cp -r dist/* /usr/lib/vernemq/lib/vmq_web_ui-2.0.0/priv/www/

The directory structure should now look like this:

➜  ~ tree /usr/lib/vernemq/lib/vmq_web_ui-2.0.0/priv/www
/usr/lib/vernemq/lib/vmq_web_ui-2.0.0/priv/www
├── assets
│   ├── default-867d0dfb.js
│   ├── default-afadc911.css
│   ├── index-523ef8d0.css
│   └── index-54c3f785.js
├── favicon.ico
├── favicon.svg
└── index.html

4. Add a config to the vernemq.conf file (example):

plugins.vmq_web_ui = on

vmq_web_ui.admin.auth = password
vmq_web_ui.admin.user_name = admin
vmq_web_ui.admin.user_pwd = verne
vmq_web_ui.mgmt_api.port = 9800
vmq_web_ui.mgmt_api.scheme = http
vmq_web_ui.mgmt_api.key = abc

listener.http.api = 127.0.0.1:9800
listener.http.api.http_module.vmq_http_mgmt_api.auth.mode = noauth
listener.http.http_ui = 127.0.0.1:3001
listener.http.http_ui.http_module.vmq_http_pub.auth.mode = noauth
listener.http.http_ui.http_modules = vmq_web_ui

vmq_web_ui.file_access.allow_read = on
vmq_web_ui.file_access.allow_write = on

5. Now go to http://http://127.0.0.1:3001/webui and login with the configured admin user.

cc / @mths1

[archef2000]

I used the official docker images from vernemq

add this to the bottom of /etc/vernemq/vernemq.conf

plugins.vmq_web_ui = on
vmq_web_ui.admin.auth = password
vmq_web_ui.admin.user_name = admin
vmq_web_ui.admin.user_pwd = verne
vmq_web_ui.mgmt_api.port = 9800
vmq_web_ui.mgmt_api.scheme = http
vmq_web_ui.mgmt_api.key = abc

listener.http.api = 127.0.0.1:9800
listener.http.api.http_module.vmq_http_mgmt_api.auth.mode = noauth
listener.http.http_ui = 0.0.0.0:3001
listener.http.http_ui.http_module.vmq_http_pub.auth.mode = noauth
listener.http.http_ui.http_modules = vmq_web_ui

the commands I ran:

apt update
apt install nodejs git wget
export SHELL=bash
export COREPACK_ENABLE_STRICT=0
curl -fsSL https://get.pnpm.io/install.sh | sh -
source /root/.bashrc
git clone https://github.com/vernemq/vmq_webadmin
cd vmq_webadmin
pnpm install
pnpm build
cp -r dist/* /vernemq/lib/vmq_web_ui-2.0.0/priv/www/

With the vernemq/vernemq:1.13.0 image I got this error on build

And with the latest (2.0.0) tag I was able to get it running. I was able to login to the web UI but for every thing else I get a 500 error.

I also would like to set the session key so I don't get logged out every time it restarts.

[mths1]

You might have a different default listener that interferes. Please rename default to something like testwebui or so and see if it works...

[archef2000]

So I renamed it to "api" and "apii", but still the same. The request path that fails is ":3001/webuiapi/v1/nodefwd/self//api/v1/cluster/show" and also if I refresh thepage I get a 404 the only path that is working is /webui the rest is just being changed on the client

[ioolkos]

@archef2000 Thanks for testing!
The Webui app will only work with 2.0.0, not previous releases.
Can you check the VerneMQ side logs to check for any hints about that 500 error? (I don't see that here, but I'm on a Linux deployment not Docker)