Configuration and monitoring GUI

Installing the Configuration and monitoring GUI

The following guide will show how to run the configuration and monitoring GUI using Docker compose. The OS specific parts of the guide, how to install Docker and aws-cli, is written for Ubuntu 22.04.

Install Docker Engine

First install Docker on the machine you want to run the GUI and the GUI database:

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Login to Docker container registry

To access the Agile Docker container registry to pull the GUI image, you need to log in install and log into AWS CLI

Install AWS CLI:

sudo apt-get install unzip
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Configure AWS access, use the access key id and secret access key that you should have received from Agile Content. Set region to eu-north-1 and leave output format as None (just hit enter):

aws configure --profile agile-live-gui

AWS Access Key ID [None]: AKIA****************
AWS Secret Access Key [None]: ****************************************
Default region name [None]: eu-north-1
Default output format [None]:

Login to Agile’s AWS Elastic Container Repository to be able to pull the container image: 263637530387.dkr.ecr.eu-north-1.amazonaws.com/agile-live-gui. If your user is in the docker group, sudo part can be skipped.

aws --profile agile-live-gui ecr get-login-password | sudo docker login --username AWS --password-stdin 263637530387.dkr.ecr.eu-north-1.amazonaws.com

MongoDB configuration

The GUI uses MongoDB to store information. When starting up the MongoDB Docker container it will create a database user that the GUI backend will use to communicate with the Mongo database.

Create the file mongo-init.js for the API user (replace <API_USER> and <API_PASSWORD> with a username and password of your choice):

productionsDb = db.getSiblingDB('agile-live-gui');

productionsDb.createUser({
  user: '<API_USER>',
  pwd: '<API_PASSWORD>',
  roles: [{ role: 'readWrite', db: 'agile-live-gui' }]
});

Create a docker-compose.yml file

Create a file docker-compose.yml to start the GUI backend and the MongoDB instance. Give the file the following content:

version: '3.7'

services:
  agileui:
    image: 263637530387.dkr.ecr.eu-north-1.amazonaws.com/agile-live-gui:latest
    container_name: agileui
    environment:
      MONGODB_URI: mongodb://<API_USER>:<API_PASSWORD>@mongodb:27017/agile-live-gui
      AGILE_URL: https://<SYSTEM_CONTROLLER_IP>:<SYSTEM_CONTROLLER_PORT>
      AGILE_CREDENTIALS: <SYSTEM_CONTROLLER_USER>:<SYSTEM_CONTROLLER_PASSWORD>
      NODE_TLS_REJECT_UNAUTHORIZED: 1
      NEXTAUTH_SECRET: <INSERT_GENERATED_SECRET>
      NEXTAUTH_URL: http://<SERVER_IP>:<SERVER_PORT>
      BCRYPT_SALT_ROUNDS: 10
      UI_LANG: en
    ports:
      - <HOST_PORT>:3000

  mongodb:
    image: mongo:latest
    container_name: mongodb
    environment:
      MONGO_INITDB_ROOT_USERNAME: <MONGODB_USERNAME>
      MONGO_INITDB_ROOT_PASSWORD: <MONGODB_PASSWORD>
    ports:
      - 27017:27017
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
      - ./mongodb:/data/db

Details about some of the parameters:

  • image - Use latest tag for always starting the latest version, set to :X.Y.Z to lock on a specific version.
  • ports - Internally port 3000 is used, open a mapping from your HOST_PORT of choice to access the GUI at.
  • extra_hosts - Adding “host.docker.internal:host-gateway” makes it possible for docker container to access host machine from host.docker.internal
  • MONGODB_URI - The mongodb connection string including credentials, API_USER and API_PASSWORD should match what you wrote in mongo-init.js
  • AGILE_URL - The URL to the Agile-live system controller REST API
  • AGILE_CREDENTIALS - Credentials for the Agile-live system controller REST API, used by backend to talk to the Agile-live REST API.
  • NODE_TLS_REJECT_UNAUTHORIZED - Set to 0 to disable SSL verification. This is useful if testing using self-signed certs
  • NEXTAUTH_SECRET - The secret used to encrypt the JWT Token, can be generated by openssl rand -base64 32
  • NEXTAUTH_URL - The base url for the service, used for redirecting after login, eg. http://my-host-machine-ip:3000
  • BCRYPT_SALT_ROUNDS - The number of salt rounds the bcrypt hashing function will perform, you probably don’t want this higher than 13 ( 13 = ~1 hash/second )
  • UI_LANG - Set language for the user interface (en|sv). Default is en
  • MONGODB_USERNAME - Select a username for a root user in MongoDB
  • MONGODB_PASSWORD - Select a password for your root user in MongoDB

HTTPS support

The Agile-live GUI doesn’t have native support for HTTPS. In order to secure the communication to it you need to add something that can handle HTTPS termination in front of it. An example would be a load balancer on AWS or a container running nginx.

nginx example

This is an example nginx config and docker compose service definition that solves the task of redirecting from HTTP to HTTPS and also terminates the HTTPS connection and forwards the request to the Agile-live GUI. For more examples and documentation please visit the official nginx site.

Create an nginx server config in a directory called nginx along side your docker-compose.yml file, and add the file nginx/nginx.conf:

server {
    listen 80;
    listen [::]:80;

    server_name $hostname;
    server_tokens off;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 default_server ssl http2;
    listen [::]:443 ssl http2;

    server_name $hostname;

    ssl_certificate /etc/nginx/ssl/live/agileui/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/live/agileui/key.pem;

    location / {
        proxy_pass http://agileui:3000;
        proxy_set_header  Host $host;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Proto $scheme;
        proxy_set_header  X-Forwarded-Ssl on; # Optional
        proxy_set_header  X-Forwarded-Port $server_port;
        proxy_set_header  X-Forwarded-Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
    }
}

Store your certificate and key file next to the docker-compose.yml file (cert.pem and key.pem in this example).

Update the docker-compose.yml file to also start the official nginx container, and point it to the nginx.conf, cert.pem and key.pem file via volume mounts.

version: '3.7'

services:
  agileui:
    image: 263637530387.dkr.ecr.eu-north-1.amazonaws.com/agile-live-gui:latest
    container_name: agileui
    environment:
      MONGODB_URI: mongodb://<API_USER>:<API_PASSWORD>@mongodb:27017/agile-live-gui
      AGILE_URL: https://<SYSTEM_CONTROLLER_IP>:<SYSTEM_CONTROLLER_PORT>
      AGILE_CREDENTIALS: <SYSTEM_CONTROLLER_USER>:<SYSTEM_CONTROLLER_PASSWORD>
      NODE_TLS_REJECT_UNAUTHORIZED: 1
      NEXTAUTH_SECRET: <INSERT_GENERATED_SECRET>
      NEXTAUTH_URL: https://<SERVER_IP>
      BCRYPT_SALT_ROUNDS: 10
      UI_LANG: en
    ports:
      - <HOST_PORT>:3000

  webserver:
    image: nginx:latest
    ports:
      - 80:80
      - 443:443
    restart: always
    volumes:
      - ./nginx/:/etc/nginx/conf.d/:ro
      - ./cert.pem:/etc/nginx/ssl/live/agileui/cert.pem:ro
      - ./key.pem:/etc/nginx/ssl/live/agileui/key.pem:ro 

  mongodb:
    image: mongo:latest
    container_name: mongodb
    environment:
      MONGO_INITDB_ROOT_USERNAME: <MONGODB_USERNAME>
      MONGO_INITDB_ROOT_PASSWORD: <MONGODB_PASSWORD>
    ports:
      - 27017:27017
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
      - ./mongodb:/data/db

Note that the NEXTAUTH_URL parameter now should be the https address and not specify the port, as we use the default HTTP and HTTPS ports (without nginx we specified the internal GUI port, 3000).

Start, stop and signing in to the Agile-live GUI

Start the UI container by running Docker compose in the same directory as the docker-compose.yml file`:

sudo docker compose up -d

Once the containers are started you should now be able to reach the GUI at the host-port that you selected in the docker-compose.yml-file.

To login to the GUI, use username admin and type a password longer than 8 characters. This password will now be stored in the database and required for any new logins. For more information on how to reset passwords and add new users, read more here

After signing in to the GUI, the statuses in the bottom left should all be green, else there is probably a problem in your System Controller or database configuration in the docker-compose.yml-file.

To stop the GUI and database container run:

sudo docker compose down

Installing support for VLC on client machine, to open Multiview directly from GUI:

On Windows operating system, the GUI supports redirecting the user via links to VLC. To make this work, the following open-source program needs to be installed: https://github.com/stefansundin/vlc-protocol/tree/main

This is not supported on Linux or Mac.

Custom MongoDB installation

Instructions for installing MongoDB instead of running it in docker