TabVMs

Alot of these are frontend changes, I wanted to make the UX better by integrating a VNC viewer (noVNC) into the website.
I also styled the website a little more, Login page remains unchanged (I know some people complained about it) because I basically have NO idea what’s wrong with it.. (apparently it’s too bland, but I actually highly disagree, I think simplicity makes for the best user experience)
Sidenote: I hate CSS.

I finished making the configuration page. It was easy to make to be honest.

This change isn’t live yet, By the time this is read, it likely will have been, but I’m tired.

The video demonstrates two key parts, the obvious one being the configuration changes, but also config permissions. You can see that I’m not allowed to change the VMs RAM configuration. That’s it. Love you all!

I worked on the API, and now the endpoint for configuring the VM works. you can set the name, vCPU count, and max memory.

I also made a mock design for the settings menu. I’ll obviously go to adding fields later but I wanted to get the basic structure right.

I’m really forgetful huh, I have to start writing these more often or I’ll lose hours in between my devlogs!

so, just a quick recap of what I’ve done:

1. before, the Panel would proxy some requests to & from the NodeRep server. This doesn’t happen anymore, and the client talks directly to the NodeRep server with a Ticket.
2. (anonymous) permissions! users (and anonymous visitors) can have some permissions by default, and they’re included in the Ticket. They define what Nodes/VMs you can or can’t see, also what you can or can’t do with them.
3. WIP, configuration! there’s already a very simple API setup that lets you rename the VM, but I want it to allow for changing stuff like the maximum memory allocated to the VM, the amount of vCPUs allocated to the VM, and so on. Not sure exactly how I’d do it in a good way since there are many ways to define vCPUs in libvirt, but I’ll find a way soon enough!
4. DB migrations! this is good for people self-hosting, since updates are much more reliable.
5. graphics! You can finally see a host for graphics, and you can even connect to it! there’s nothing there, because I’m a little scared of moderation. (you people can be cruel sometimes..) I might add a simple TempleOS VM though for funsies.

the video below demonstrates permissions in the beginning, half as a logged out user (that doesn’t have permission to start/stop VMs), and the other half as a logged in user (that does have permission to do those things).

the other half demonstrates graphics, TabVMs tells you when you’ll need a web-viewer (since Cloudflare Tunnels is such a great product). You can see me connect through NoVNC to a VM that’s not running any OS.

I don’t really know how I’d explain the changes here in a brief devlog, so I’ll list each change and explain why I made it.

• added Remote Access config, with rules that map certain ports to other hosts/ports
  This was necessary for tunneling, since I use Cloudflare Tunnels. The idea was that VMs showing their screen on, say, port 5900, would show up as if they were from examplenode-vnc1.devranch.ovh. Because that’s how the tunneling goes.
• added WebSocket mode for Remote Access.
  If enabled, TabVMs will report that the display “can only be viewed through a browser-based client.” It’ll also check for a VNC WebSocket port instead of a regular VNC TCP port.
• added skeleton loading pages
  These should make the site seem more responsive. They aren’t demonstrated in the video, but you can see it in the demo link.

.. I think this is it. I think I’ll make a TempleOS VM with a proper VNC server in the demo soon enough

This took a while of brainstorming but it turned out to be simple. My plans next are:

• caching (optimization sidequest :3)
• UI touch-ups (i agree the login page could use some work)
• permissions (low priority, probably will ship without this)
• configuration page (equal priority to permissions)

after a long while, I finally got TabVMs deployed.
I had to add two things, proper error messaging and CAPTCHA support. Those two features caused a ton of headaches for me as a React newbie, but I got everything working eventually.

All that’s left is putting this stuff on a Raspberry Pi so that it can be available 24/7 for anyone planning to test

alot of internal work, but I also added preferences! you can now choose whether or not TabVMs should feature square corners, with rounded corners being the default.

Added authentication for the panel backend, which will make it actually secure.
For now, not being authenticated means losing access to every feature. I plan on making certain things anonymously accessible (it’ll be a changeable config)
Also redesigned everything to be square. I love the square design more.

Graphics information is now shown to the user, so they can connect with whatever client they have!
the colors are prettier now, I think

added simple start/stop controls for VMs
(CPU usage is supposed to be in %)

Added a live feed that tracks information about each VM.

I got a simple frontend working, with a simple status page.
It lists each node, and each VM running in that node. It also color-codes the name based on its running status. So far, it’s only binary (running, or not), but maybe additional statuses for sleep could be added!