Skip to content

README.md

Latest commit

 

History

History
190 lines (138 loc) · 9.03 KB

README.md

File metadata and controls

190 lines (138 loc) · 9.03 KB

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