Lotta Features!: Toasts, Container Recreation, and Ability to reconfigure services

1. Added toast messages - needed a better way to show error messages so I implemented toasts. These were implemented using a MutationObserver, which watches an element for changes, in this case for new nodes being added to it. This lets me automatically remove toasts after a certain time and fade them out. Using a MutationObserver allows toasts to be added using HATEOS (HTMX) instead of only being able to create toasts from JavaScript.
2. Added the ability to reconfigure services. Before only the value was shown, but now you can update configuration and save it. Added an API endpoint so virtual servers could request new service configuration. Also reworked code to use toasts, and generally improved code quality by moving code into separate functions
3. Added the option to recreate containers. This is needed to update the container image, and/or refresh configuration, for example new ports or even a different image. This depended on the changes in 2.

1. Toasts
2. Reconfigure services
3. Recreate containers

Feature: Service Actions

Virtual servers can now list actions for the user.

This is fully programmatic, so when the virtual server sends statistics and links, it also responds with a list of actions like:

{
  "label": "Stop",
  "code":  "stop_container",
  "type": ui.ButtonTypeDanger,
  "confirm": {
    "title": "Are you sure you want to stop this container?",
    "description": "Application data may be lost.",
    "button_label": "Confirm"
  }
}

Each action has an optional and configurable confirmation dialog. Doing it like this allows the virtual server to have different actions based on the status of the container for example, like start if its stopped and stop/restart if its running.

I also added a loading indicator to all buttons, which shows whenever a HTMX request is being made.

1. Sort links by name (to prevent them shuffling)
2. Add service actions

Feature: Service overview page

Shows the status and utilisation of the container, and also the links.

The links are found by parsing the containers labels and extracting the traefik rules.

Fixed a few issues with the docker manager:

1. Only one manager was started but the channel width was 5, meaning only one service was handled at a time. Now I start 5 managers, so 5 containers are handled at once.
2. Made it so loading services at start runs in the background as well, so the API is available a lot quicker
3. Each port uses a different service name in traefik, not sure if this was an issue but could of potentially caused problems when a service has multiple ports

Also added loading indicator and status dot components.

Next I’ll implement manual start/stop of containers (general action buttons), then service deletion and then volumes

1. Service overview page
2. Loading indicator/status dot

Feature: Fully automatic reverse proxy

I added support for configuring ports, then implemented the Traefik reverse proxy giving each port a unique (non random - based on service id and port) subdomain. The service is given automatic TLS (error due to self signed cert - when I deploy I will have a domain and use letsencrypt)

Next I need to add a better display, so the link shows in app

Commit

Feature: Parse and store multi-input values

1. I allowed configuration of multi inputs, to set the min and max values/length of number/text inputs
2. I parsed and stored the values on the backend, so they are now available to the virtual server

I need to:

1. Allow updating configuration after creation
2. Figure out how to implement a reverse proxy with variable subdomains to expose ports

1. Configure multiinputs
2. Add parsing + storage

Feature: Multi-Inputs

I added an input to my ui library that lets you add infinite entries. Supports text/number types. Also fixed an issue where modals could overflow the screen.

Built this so I can have better configuration for my docker service, i.e to set ports and volumes.

Haven’t implemented the backend storage for these but the components work

Commit

Feature: Tabs

The service page looked pretty bad so I added tabs to my UI library.

Commit

Feature: View all your services

Doesn’t show much rn

Had a nightmare figuring out why the service list was overflowing the page. Solution was somehow to but min-width: 0 on the container 😭

Commit

Feature: Load existing on services on start + async container manager

I added an endpoint to the platform API (GET /api/services) that returns all of the clients services.

On start, the virtual server will request services to run, and start them one concurrently using golangs channel features (containers to run are added to a queue where up to five containers are handled at a time)

1. Add async container manager
2. Add API endpoint and start containers on virtual server start

Feature: Run docker images

I implemented the very basics of running a docker container, and added a logs endpoint

Definitely need to improve the UI for the service page, and make a tabs component. Also need to make stuff async so I don’t wait for the image to pull

Commit

Feature: Configuration groups

I added the ability to set configuration groups. These are purely visual. A virtual server may set whether the options are visible by default. For example to hide addons or advanced config options

Commit

Feature: Order services

I implemented the backend for ordering a service.

Diagram explaining flow
Text scored with red has not been implemented yet

It works by

1. Storing the service and configuration in a database
2. Sending a request to the virtual server to run the service (signing the message so the virtual server can trust it)

This setup is pretty complicated but it allows for virtual servers to run virtually anything and have configuration options for all of it.

I have yet to implement:

1. Per addon pricing (e.g +1 credit for +1 GB RAM)
2. Configuration groups, which would allow for sections of configuration (e.g simple, advanced, and addons)
3. Advanced options (required, selects etc)
4. A proper virtual server that actually runs stuff
5. A good service page

1. Implement service orders
2. Disable spinners on number inputs

WIP Feature: Get service modal

I implemented a modal that loads on click, and has all the addons/options of the service.

I need to style number inputs better, and make it so servers can set min/max values and lengths

Commit

Feature: Programmatic services

You can now add services through an API, using a generated client id and secret.

A server would call the API, passing a list of products to sync. You pass a name, description, unique code, a price and a pricing schedule (per hour, day, or month). You can also add addons with options, currently only text or numbers (e.g for additional RAM).

I also added a page to view all available services.

Next I’ll implement “getting” the service

1. Add services API + page
2. Show credit price

Feature: Disable email verification

Added an env variable (MAIL_ENABLE) that will disable any email sending and functions like verification. With this enabled, signing up will automatically mark the account as verified and sign them in, skipping the verify step.

Did this so I can develop entirely locally and without internet, I’m on holiday in the Outer Hebrides where internet isn’t great. Writing this on a 7 hour ferry 🫩

Also changed the flags field from bigint -> integer to save space, I won’t need 64 bits)

1. Disable Email Verification
2. Fix silliness

Feature: API client secret regeneration

You can now regenerate the client secret.

Mostly copied code from the confirm deletion, tweaked to show the new secret after.

Also improved error handling so now it should show an error message if something fails instead of sending the error into the void

Commit

Feature: Delete API clients + Danger button

I added a delete action to API clients, with a confirmation modal. This needed a new button type, danger.

Next I will add a regenerate action, and then I guess I will have to work on a products API

1. Danger button
2. API client deletion

Feature: API Client creation + Copy Button

I added a page to view, manage and create API clients. This is what the past couple of devlogs have been leading up to, there was a lot of interactivity required for this.

These will be used to programmatically set up “virtual servers”, which will be able to register “products” to the platform, and receive services to deploy, and they manage where to deploy them, for example on the current server, or provision a VPS, or to GKE, or a docker swarm. I’m designing it to be as flexible as possible.

I also added a copy button component

Need to implement actions next, probably just delete

1. Copy button
2. Fix issue where close modal buttons would submit form
3. Add copy button to kitchen sink (UI demo)
4. Add API clients

Feature: Tables + Modals

I added tables and modals to my UI library. I needed these for my next platform update.

Tables were more annoying to implement than you’d expect, the browser makes them pretty hard to style.

Modals on the other hand were pretty quick to implement, I just used my existing card component.

My UI library is coming together pretty quickly, I’ve now implemented most of the components you’d need for a interactive website!

1. Tables
2. Modals

Feature: Sign Out + Alerts

I added the ability to sign out, added a favicon, created a standard layout component.

I also added four types of alerts to my UI library, and the associated colours. I’ve designed everything to be themeable.

I needed this for my next update

1. Add Sign Out
2. Disable logging of read config
3. Add layout component and favicon
4. Added alerts and colours
5. Disable text wrapping in sidebar