OTLP Realtime Dashboard - Basic Usage Examples

1. Standalone Usage (File System Access API)

Open the dashboard HTML file directly in a browser that supports File System Access API:

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="src/main.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { App } from './src/app.js';
    const app = new App(document.getElementById('app'));
    app.initialize();
  </script>
</body>
</html>

2. Served by Rust Service

When the Rust service has dashboard.enabled: true, access the dashboard at:

http://localhost:8080

The dashboard will still use File System Access API to read Arrow IPC files directly from the output directory.

3. Programmatic Usage

import { App } from './src/app.js';

const app = new App(document.getElementById('app'));

// Initialize the application
await app.initialize();

// The app will prompt for directory selection
// Or you can programmatically set the directory if you have a handle

4. Keyboard Shortcuts

Ctrl+1 or Cmd+1: Switch to Traces view
Ctrl+2 or Cmd+2: Switch to Metrics view
/: Focus search bar
Escape: Clear search
Ctrl+P or Cmd+P: Pause/Resume live stream

5. Configuration

Access settings via the Settings button (⚙️) in the header to configure:

Polling interval (how often to check for new files)
Max traces (maximum number of traces to keep in memory)
Max graph points (maximum data points per metric graph)
Max loaded tables (maximum DuckDB tables in memory)