Tracking: Alloy Live Debugging to improve debugging capabilities

[wildum]

Goals

• Provide better feedback to users creating and debugging pipelines
• Enable users to reap the benefits of Alloy’s flexible component system fully
• Build a foundation for richer UI experiences in the future

Description

The X-ray functionality allows users to see live data exposed by the components in their pipelines via Alloy's UI.

Non-functional requirements

• Very low overhead when inactive
• Low overhead when active
• Low impact on code complexity
• Capable of handling large volumes of data (UI not crashing the browser, not using too much memory, etc.)
• High extensibility (should be easy to hook a new component to it)

Implementation

The initial implementation that we made during the hackathon can be used as an example: https://github.com/grafana/agent/pull/6045/files

Tracking list

Tasks

Preview Give feedback

1. X-ray: Create the x-ray service and connect the prometheus.relabel component to it #790
   frozen-due-to-age +1
2. Implement the x-ray front-end in the UI #831
   frozen-due-to-age +1
3. Run benchmark and optimise if necessary #832
   frozen-due-to-age +1
4. Live debugging doc #833
   frozen-due-to-age +1
5. Merge live debugging to main #986
   frozen-due-to-age +1
6. Consider performance optimizations #974
   needs-attention +1
7. Live Debugging button in UI should appear only for components that supports the feature #1008
   needs-attention +1
8. Live debugging should report when the service drops data when the buffer is full #1010
   needs-attention +1
9. Add live debugging support to otel processors #1030
   frozen-due-to-age +1
   
10. Add live debugging support to prometheus.scrape #1031
    needs-attention +1
11. Add live debugging support to prometheus.remote_write #1032
    needs-attention +1
12. Add live debugging support to beyla.ebpf #1033
    needs-attention +1
13. Add live debugging support to discovery components #1034
    needs-attention +1
14. Live debugging front-end: autocomplete checkbox #1021
    enhancement good first issue help wanted javascript +4
15. Add live debugging support to otel receivers #1040
    frozen-due-to-age +1
16. Add live debugging support to otel exporters #1041
    needs-attention +1
17. Live debugging: split the data in the UI for components that deal with multiple signals #1187
    needs-attention +1
18. Add live debugging support to loki.process #1276
    frozen-due-to-age +1
19. Add live debugging support to loki.relabel #1303
    frozen-due-to-age +1
20. Add live debugging support to discovery.relabel #1306
    needs-attention +1
21. Add live debugging support to otel connectors #2254
    +0