Merge pull request #652 from input-output-hk/ch1bo/live-prototype-visualization

Visualizer: support live logs from Loki

Author: ch1bo

ui/README.md

@@ -66,4 +66,47 @@ Then update `public/scenarios.json` accordingly:
 }
 ```
 
-Now add that
+## Add a live Loki streaming scenario
+
+For live visualization of node logs, you can configure scenarios that connect to a Loki instance via WebSocket. This allows real-time monitoring of running Cardano nodes.
+
+First, ensure your Loki instance is running and accessible, for example by following the [leios-demo](https://github.com/input-output-hk/leios-demo/) instructions.
+Then add a scenario with a `loki` field instead of `trace` to `public/scenarios.json`:
+
+```json
+{
+  "scenarios": [
+    {
+      "name": "Leios Demo 202511",
+      "topology": "topologies/prototype.yaml",
+      "duration": 300,
+      "loki": "localhost:3100"
+    }
+  ]
+}
+```
+
+## Configuration
+
+Scenarios support two modes:
+
+- **Stored traces**: Use the `trace` field pointing to a JSONL file (optionally gzipped)
+- **Live streaming**: Use the `loki` field with host:port of your Loki instance
+
+Both modes require a `topology` field specifying the network topology YAML file and a `duration` defining the amount of loaded data.
+
+### Auto-starting scenarios
+
+Scenarios can be auto-loaded/-connected using a URL query parameter:
+
+```
+?scenario=<index>
+```
+
+Where `<index>` is the zero-based index of the scenario in the scenarios.json array. For example:
+
+- `?scenario=0` - Auto-loads the first scenario (e.g., "200 TxkB/s")
+- `?scenario=1` - Auto-loads the second scenario (e.g., "1 TxkB/s")
+- `?scenario=2` - Auto-connects to the third scenario (e.g., "Leios Demo 202511")
+
+This is useful for direct links, bookmarking, or embedding specific scenarios.

ui/public/scenarios.json

@@ -11,6 +11,12 @@
       "topology": "topologies/small.yaml",
       "duration": 120,
       "trace": "traces/small-1txkbs-nocpu.jsonl.gz"
+    },
+    {
+      "name": "Leios Demo 202511",
+      "topology": "topologies/prototype.yaml",
+      "duration": 300,
+      "loki": "localhost:3100"
     }
   ]
 }

ui/public/topologies/prototype.yaml

@@ -0,0 +1,23 @@
+nodes:
+  UpstreamNode:
+    stake: 1
+    location:
+      - 0
+      - 0
+    producers: {}
+  Node0:
+    stake: 0
+    location:
+      - 0
+      - 100
+    producers:
+      UpstreamNode:
+        latency-ms: 200.0
+  DownstreamNode:
+    stake: 0
+    location:
+      - 0
+      - 200
+    producers:
+      Node0:
+        latency-ms: 200.0