codemirror-promql: Add request header to client (#13118)

With this commit we make it possible to adjust the request headers sent
to Prometheus by the codemirror-promql extension. This enables
customizing the headers sent, without re-implementing the Prometheus
client completely.

Signed-off-by: Jacob Baungard Hansen <jacobbaungard@redhat.com>

web/ui/module/codemirror-promql/README.md

@@ -161,6 +161,15 @@ You can change it to use the HTTP method `GET` if you prefer.
 const promQL = new PromQLExtension().setComplete({remote: {httpMethod: 'GET'}})
 ```
 
+###### HTTP request headers
+
+If you need to send specific HTTP headers along with the requests to Prometheus, you can adjust that as follows:
+
+```typescript
+const customHeaders = new Headers({'header-name': 'test-value'});
+const promql = new PromQLExtension().setComplete({remote: {requestHeaders: customHeaders}})
+```
+
 ###### Override the API Prefix
 
 The default Prometheus Client, when building the query to get data from Prometheus, is using an API prefix which is by

web/ui/module/codemirror-promql/src/client/prometheus.ts

@@ -58,6 +58,7 @@ export interface PrometheusConfig {
   cache?: CacheConfig;
   httpMethod?: 'POST' | 'GET';
   apiPrefix?: string;
+  requestHeaders?: Headers;
 }
 
 interface APIResponse<T> {
@@ -84,6 +85,7 @@ export class HTTPPrometheusClient implements PrometheusClient {
   // For some reason, just assigning via "= fetch" here does not end up executing fetch correctly
   // when calling it, thus the indirection via another function wrapper.
   private readonly fetchFn: FetchFn = (input: RequestInfo, init?: RequestInit): Promise<Response> => fetch(input, init);
+  private requestHeaders: Headers = new Headers();
 
   constructor(config: PrometheusConfig) {
     this.url = config.url ? config.url : '';
@@ -100,6 +102,9 @@ export class HTTPPrometheusClient implements PrometheusClient {
     if (config.apiPrefix) {
       this.apiPrefix = config.apiPrefix;
     }
+    if (config.requestHeaders) {
+      this.requestHeaders = config.requestHeaders;
+    }
   }
 
   labelNames(metricName?: string): Promise<string[]> {
@@ -221,6 +226,11 @@ export class HTTPPrometheusClient implements PrometheusClient {
   }
 
   private fetchAPI<T>(resource: string, init?: RequestInit): Promise<T> {
+    if (init) {
+      init.headers = this.requestHeaders;
+    } else {
+      init = { headers: this.requestHeaders };
+    }
     return this.fetchFn(this.url + resource, init)
       .then((res) => {
         if (!res.ok && ![badRequest, unprocessableEntity, serviceUnavailable].includes(res.status)) {