Reusing Prometheus Web UI in OpenTelemetry Collector Prometheus Receiver

[Grace Wehner]

Hi all,

Currently, the Prometheus Receiver component of the OpenTelemetry Collector (https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/prometheusreceiver) takes a Prometheus config, uses the Prometheus packages to scrape the metrics, and forwards them as OTLP metrics through the OpenTelemetry Collector pipeline. We would like to reuse the Prometheus Web UI to allow easier troubleshooting for scrape configs with the Config, Targets, and Service Discovery pages.

I have a working prototype that uses the React assets. A webHandler is created in the Receiver code using the Prometheus web package, and the ScrapeManager that's already used in the Receiver is passed to the webHandler. I have started the conversation on the OpenTelemetry Collector Prometheus Receiver side: https://github.com/open-telemetry/wg-prometheus/issues/63, but I also wanted to bring up in this forum some limitations.

Right now for the prototype I have, I am building the react app from the Prometheus repo and copying these static files into the directory where I am running the modified OpenTelemetry Collector. It would be great to have an NPM package for the UI so that it could be built or accessed in the OpenTelemetry Collector repo. Another option would be using the golang embed package to have these files embedded in the Prometheus UI golang package. There is an open PR to introduce this https://github.com/prometheus/prometheus/pull/9380/files, but I believe the built react app files would need to be checked into the Prometheus repo for this to work for outside code using it.

Thank you,

Grace Wehner