UI for Jobs and Scrape Configs in Target Allocator Server

[CharlieTLe]

Component(s)

target allocator

Is your feature request related to a problem? Please describe.

There's a way to see the jobs and scrape configs that have been discovered via the Prometheus Operator CRDs on the Target Allocator's HTTP Endpoints as described in the documentation.

opentelemetry-operator/cmd/otel-allocator/README.md

Lines 266 to 350 in a36367b

	#### Endpoints
	`/scrape_configs`:
	```json
	{
	"job1": {
	"follow_redirects": true,
	"honor_timestamps": true,
	"job_name": "job1",
	"metric_relabel_configs": [],
	"metrics_path": "/metrics",
	"scheme": "http",
	"scrape_interval": "1m",
	"scrape_timeout": "10s",
	"static_configs": []
	},
	"job2": {
	"follow_redirects": true,
	"honor_timestamps": true,
	"job_name": "job2",
	"metric_relabel_configs": [],
	"metrics_path": "/metrics",
	"relabel_configs": [],
	"scheme": "http",
	"scrape_interval": "1m",
	"scrape_timeout": "10s",
	"kubernetes_sd_configs": []
	}
	}
	```
	`/jobs`:
	```json
	{
	"job1": {
	"_link": "/jobs/job1/targets"
	},
	"job2": {
	"_link": "/jobs/job1/targets"
	}
	}
	```
	`/jobs/{jobID}/targets`:
	```json
	{
	"collector-1": {
	"_link": "/jobs/job1/targets?collector_id=collector-1",
	"targets": [
	{
	"Targets": [
	"10.100.100.100",
	"10.100.100.101",
	"10.100.100.102"
	],
	"Labels": {
	"namespace": "a_namespace",
	"pod": "a_pod"
	}
	}
	]
	}
	}
	```
	`/jobs/{jobID}/targets?collector_id={collectorID}`:
	```json
	[
	{
	"targets": [
	"10.100.100.100",
	"10.100.100.101",
	"10.100.100.102"
	],
	"labels": {
	"namespace": "a_namespace",
	"pod": "a_pod"
	}
	}
	]
	```

The JSON that is returned is not pretty and requires some formatting on behalf of the user for any form of interaction. There are _link properties, but they require copy and pasting to find out more information about the job/collector. This can be tedious and adds friction in the process of understanding how the targets are allocated.

Describe the solution you'd like

When these pages are navigated to via the browser, the information like the discovered targets and where they have been allocated should be formatted with some HTML to make it human readable.

Describe alternatives you've considered

No response

Additional context

No response

[jaronoff97]

Definitely not opposed to this, the question is really how much UI we want to throw on top of the TA. I would be okay with some light HTMX for displaying what we have access to.

[CharlieTLe]

I have a basic UI that makes the data more accessible and interactive.

Here's the page you get on the localhost:8080 for the TA.

Clicking on the Jobs or Targets links at the top takes you to the Jobs or Targets pages with all of the jobs or targets available respectively.

Jobs page

Clicking on a job takes you to the Job page

Targets page

Clicking on the target, collector, or job takes you to the respective page for that resource.

Job page

Target page

Collector page

[jaronoff97]

This is a great start! Would you be willing to put a PR up? This is surely better than what we have today. cc @swiatekm who also probs has thoughts here.

[swiatekm]

I agree, this would be good to have even if it's not very pretty. I wonder if we need to make it possible to disable it? The information included shouldn't be any different than the JSON version, but in principle it might eventually become an attack surface in the future.

[CharlieTLe]

Started a draft PR here: #3652.

[pavolloffay]

+1 on the feature. I would limit this only to HTML