WebUi

InfoLogger GUI (ILG)

Actions Status codecov

Contents

Introduction

The Web User Interface for ALICE O2 InfoLogger. The application operates in two distinct modes:

Screenshot of the current interface, running locally against a fake InfoLoggerServer emitting synthetic logs:

Screenshot of ILG

Interface User Guide

Requirements

Project Layout

ILG is a Node.js API Gateway and Single-Page Application built on top of the @aliceo2/web-ui framework. It serves as a unified interface to two separate operational backends: a MariaDB database for historical queries and an InfoLoggerServer TCP endpoint for live log streaming.

Backend

Frontend

Static files served from public/; no build step. A lightweight MVC app on top of @aliceo2/web-ui.

Local Development

First-time setup

git clone https://github.com/AliceO2Group/WebUi.git
cd WebUi/InfoLogger
npm ci
cp config-default.js config.js

Edit config.js for the setup you’re using below.

npm run dev runs the backend under nodemon. The frontend has no hot reload - refresh the browser to pick up changes.

Query & Live mode Against a remote backend (e.g. a staging instance)

  1. Point mysql and infoLoggerServer in config.js at the remote host and port.
  2. npm start, then open http://localhost:8080.

Live mode against synthetic logs (thoroughly test Live mode)

The bundled fake InfoLoggerServer emits a log every 0-100 ms, shuffling through test/live-simulator/fakeData.json.

  1. Set infoLoggerServer in config.js to localhost:6102.
  2. Terminal 1: npm run simul.
  3. Terminal 2: npm run dev.
  4. Open http://localhost:8080 and click Live.

Query against a local DB

Requires Docker Desktop.

  1. In a working dir, create compose.yaml:

    services:
  mariadb:
    image: mariadb
    restart: unless-stopped
    ports: ['3306:3306']
    environment:
      MARIADB_ROOT_PASSWORD: root # this is just an example, not intended to be a production configuration
  phpmyadmin:
    image: phpmyadmin
    restart: unless-stopped
    ports: ['9090:80']
    environment:
      - PMA_HOST=mariadb

    Gives you a MariaDB server with phpMyAdmin on the latest image. Pin a specific version (e.g. mariadb:11.5) by changing the image: tag.

  2. docker compose up -d.
  3. Open http://localhost:9090/ → log in root / root → New → create database INFOLOGGER.
  4. Open the SQL tab, paste docs/database-specs.sql, click Go.

  5. In config.js:

    mysql: {
  host: '127.0.0.1', 
  user: 'root',
  password: 'root',
  database: 'INFOLOGGER',
  port: 3306,
  timeout: 60000,
  retryMs: 5000,
},
  6. npm run dev - startup should log Connection to DB successfully established: 127.0.0.1:3306.

Testing

Integration tests (live elsewhere)

ILG integration tests live in the system-configuration repo and run in its pipeline against a pipeline ILG. They are not executed by this repo’s CI. To run them locally, clone system-configuration and run npx mocha ilg-main.js.

⚠️ If you change behaviour covered by integration tests, update the system-configuration suite during the next ILG release.

CI

infologger.yml

Runs on every PR touching InfoLogger/**. Must pass to merge:

release.yml

system-configuration pipeline

Runs the integration suite against a pipeline instance. Runs separately from this repo’s CI, so run the suite locally before merging and flag any required changes to the team at release time.

InfoLogger Insights

This site is open source. Improve this page.