Skip to content

InfoLogger

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

InfoLogger

README.md

InfoLogger GUI (ILG)

Actions Status codecov

Contents

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:

Screenshot of ILG

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.

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

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