InfoLogger GUI (ILG)

Contents

• InfoLogger GUI (ILG)
  • Contents
  • Introduction
  • Interface User Guide
  • Requirements
  • Project Layout
  • Backend
  • Frontend
  • Local Development
    • First-time setup
    • Query & Live mode Against a remote backend (e.g. a staging instance)
    • Live mode against synthetic logs (thoroughly test Live mode)
    • Query against a local DB
  • Testing
    • Integration tests (live elsewhere)
  • CI
    • infologger.yml
    • release.yml
    • system-configuration pipeline
  • InfoLogger Insights

Introduction

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

• Query - historical logs from a database.
• Live - real-time logs from a TCP endpoint over the InfoLogger protocol.

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

Interface User Guide

• Use upper panel to:
  • match and/or exclude filters (Supports SQL Wildcard %, empty value toggling)
  • control the zoom level of the log table
  • limit the number of logs displayed
  • match severity and level
  • reset the filters
• Show/hide columns by clicking on labels on top of page
• Click "Query" or "Live" button to start the respective mode
• Double click on a log or toggle the inspector view from the bottom right corner to see all fields of the log
• Right-click a log to open a context menu with copy / use-as-filter / open inspector actions
• Use arrow keys to navigate quickly between logs
• Download the logs in a file via the top left download icon

Requirements

• nodejs >= 22.x
• InfoLogger MariaDB database for Query mode
• InfoLoggerServer endpoint for Live mode

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

• Entry point - index.js starts the HttpServer from @aliceo2/web-ui and attaches a WebSocket. lib/api.js instantiates the services, wires them to the DB and InfoLoggerServer, and registers HTTP routes. Config is loaded by configProvider.js.
• Query - POST /query and GET /query/stats → QueryController → QueryService. Both routes are gated by serviceAvailabilityCheck.
• Live - LiveService wraps InfoLoggerReceiver, parses each TCP line per the InfoLogger protocol, and broadcasts to connected clients over WebSocket.
• Status / Config - StatusController reports DB / Server / GUI health; ConfigController exposes the runtime config to the frontend.
• Profiles - ProfileService persists per-user column visibility/width to a JSON file (JSONFileConnector) via getUserProfile / saveUserProfile. The named-profile endpoint (getProfile) is a stub - it returns the hard-coded defaults regardless of the profile requested.
• Utilities - utils/ contains the InfoLogger message-command parser, SQL to native error mapping, prepared-statement parsing, and query cancellation.

Frontend

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

• App shell - index.html bootstraps index.js, which mounts the top-level Model and renders view.js.
• Sub-models - log/Log.js drives the log table (rendering in tableLogs*.js, inspector, status bar, context menu, zoom, etc.). logFilter/LogFilter.js owns the filter inputs. table/Table.js holds shared table state.
• Supporting code - services/, constants/, common/, about/ (about component).
• Styles - app.css, layered on the framework's bootstrap.css.

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

• npm test - eslint + mocha. npm run mocha runs the suite alone.
  • Backend tests: test/lib/.
  • Frontend tests: test/public/.
  • Add or update the matching test when fixing a bug.
• npm run eslint - config in eslint.config.js. Lint failures block CI.

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:

• npm test (eslint + mocha) on ubuntu-latest.
• npm run coverage with a CodeCov report; coverage cannot decrease.

release.yml

• Publishes a new version to the NPM Registry under @aliceo2/infologger.
• Builds a tgz archive of the project for local-repository installations.

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

• InfoLogger message protocol
• Database schema