prometheus: Add support for external Prometheus URLs

Co-authored-by: Tusharjamdade <tusharnjamdade@gmail.com>
Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>

Author: Tusharjamdade

prometheus/src/components/Settings/Settings.tsx

@@ -12,17 +12,29 @@ import Switch from '@mui/material/Switch';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
+import { isHttpUrl } from '../../helpers';
 
 /**
- * Validates if the given address string is in the correct format.
- * The format should be: namespace/service:port
+ * Validates whether the given address is in a supported format.
+ * Supports namespace/service:port and HTTP/HTTPS URLs.
+ * Examples: monitoring/prometheus:9090, https://prometheus.example.com
  *
  * @param {string} address - The address string to validate.
  * @returns {boolean} True if the address is valid, false otherwise.
  */
 function isValidAddress(address: string): boolean {
-  const regex = /^[a-z0-9-]+\/[a-z0-9-]+:[0-9]+$/;
-  return regex.test(address);
+  if (!address) return false;
+
+  const value = address.trim().replace(/\/$/, '');
+
+  // namespace/service:port
+  const k8sRegex = /^[a-z0-9-]+\/[a-z0-9-]+:[0-9]+$/;
+  if (k8sRegex.test(value)) {
+    return true;
+  }
+
+  // http(s)://...
+  return isHttpUrl(value);
 }
 
 /**
@@ -107,17 +119,33 @@ export function Settings(props: SettingsProps) {
     setTestMessage(t('Testing Connection'));
 
     try {
-      const [namespace, serviceAndPort] = selectedClusterData.address.split('/');
-      const [service, port] = serviceAndPort.split(':');
+      const address = selectedClusterData.address.trim().replace(/\/$/, '');
+      const normalizeSubPath = (value: string) => {
+        const trimmed = value.trim().replace(/^\/+|\/+$/g, '');
+        return trimmed ? `/${trimmed}` : '';
+      };
+      const subPath = normalizeSubPath(selectedClusterData.subPath || '');
 
-      let subPath = selectedClusterData.subPath || '';
-      if (subPath && !subPath.startsWith('/')) {
-        subPath = '/' + subPath;
+      if (isHttpUrl(address)) {
+        // External URL: direct fetch
+        const url = new URL(address);
+        const basePath = url.pathname.replace(/\/+$/g, '');
+        url.pathname = `${basePath}${subPath}/-/healthy`;
+        const response = await fetch(url.toString(), { method: 'GET' });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status} ${response.statusText}`);
+        }
+      } else {
+        // Kubernetes service proxy: namespace/service:port
+        const [namespace, serviceAndPort] = address.split('/');
+        const [service, port] = serviceAndPort.split(':');
+        const proxyUrl = `/clusters/${selectedCluster}/api/v1/namespaces/${namespace}/services/${service}:${port}/proxy${subPath}/-/healthy`;
+        const response = await request(proxyUrl, { method: 'GET', isJSON: false });
+        if (response.status !== 200) {
+          throw new Error(`HTTP ${response.status} ${response.statusText}`);
+        }
       }
 
-      const proxyUrl = `/clusters/${selectedCluster}/api/v1/namespaces/${namespace}/services/${service}:${port}/proxy${subPath}/-/healthy`;
-      await request(proxyUrl);
-
       setTestStatus('success');
       setTestMessage(t('Connection successful!'));
     } catch (err) {
@@ -167,17 +195,19 @@ export function Settings(props: SettingsProps) {
       ),
     },
     {
-      name: t('Prometheus Service Address'),
+      name: t('Prometheus Address'),
       value: (
         <Box display="flex" flexDirection="column" width="100%">
           <Box display="flex" gap={2} alignItems="flex-start">
             <TextField
               disabled={!isAddressFieldEnabled}
               helperText={
                 addressError
-                  ? t('Invalid format. Use: namespace/service-name:port')
+                  ? t(
+                      'Invalid format. Use: namespace/service-name:port or https://prometheus.example.com'
+                    )
                   : t(
-                      'Address of the Prometheus Service, only used when auto-detection is disabled. Format: namespace/service-name:port'
+                      'Prometheus address. Used only when auto-detection is disabled. Examples: namespace/service-name:port or https://prometheus.example.com. External URLs require CORS to be enabled on the Prometheus server.'
                     )
               }
               error={addressError}
@@ -220,16 +250,16 @@ export function Settings(props: SettingsProps) {
       ),
     },
     {
-      name: t('Prometheus Service Subpath'),
+      name: t('Prometheus Subpath'),
       value: (
         <TextField
           value={selectedClusterData.subPath || ''}
           disabled={!isAddressFieldEnabled}
           helperText={t(
-            "Optional subpath to the Prometheus Service endpoint. Only used when auto-detection is disabled. Examples: 'prometheus'."
+            "Optional subpath to the Prometheus endpoint. Only used when auto-detection is disabled. Examples: 'prometheus'."
           )}
           onChange={e => {
-            const newSubPath = e.target.value;
+            const newSubPath = e.target.value.trim().replace(/^\/+|\/+$/g, '');
             onDataChange({
               ...(data || {}),
               [selectedCluster]: { ...((data || {})[selectedCluster] || {}), subPath: newSubPath },

prometheus/src/helpers.ts

@@ -0,0 +1,14 @@
+/**
+ * Checks whether the given string is a valid HTTP or HTTPS URL.
+ *
+ * @param {string} value - The value to validate.
+ * @returns {boolean} True if the value is a valid http/https URL, otherwise false.
+ */
+export function isHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}

prometheus/src/request.tsx

@@ -1,4 +1,5 @@
 import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';
+import { isHttpUrl } from './helpers';
 
 const request = ApiProxy.request;
 
@@ -280,7 +281,7 @@ async function testPrometheusQuery(
 /**
  * Fetches metrics data from Prometheus using the provided parameters.
  * @param {object} data - The parameters for fetching metrics.
- * @param {string} data.prefix - The namespace prefix.
+ * @param {string} data.prefix - Either a Kubernetes proxy prefix in the form {namespace}/{pods|services}/{name}:port, or a full HTTP/HTTPS Prometheus base URL.
  * @param {string} data.query - The Prometheus query string.
  * @param {number} data.from - The start time for the query (Unix timestamp).
  * @param {number} data.to - The end time for the query (Unix timestamp).
@@ -309,17 +310,57 @@ export async function fetchMetrics(data: {
   if (data.query) {
     params.append('query', data.query);
   }
-  var url = `/api/v1/namespaces/${data.prefix}/proxy/api/v1/query_range?${params.toString()}`;
-  if (data.subPath && data.subPath !== '') {
-    if (data.subPath.startsWith('/')) {
-      data.subPath = data.subPath.slice(1);
+
+  const isExternal = isHttpUrl(data.prefix);
+  var url: string;
+
+  if (isExternal) {
+    const baseUrl = new URL(data.prefix);
+
+    // Build the path segments
+    const pathSegments = [baseUrl.pathname.replace(/\/$/, '')];
+    if (data.subPath && data.subPath !== '') {
+      pathSegments.push(data.subPath.replace(/^\/|\/$/g, ''));
+    }
+    pathSegments.push('api/v1/query_range');
+    baseUrl.pathname = pathSegments.join('/');
+
+    // Merge query params (preserve any existing params in the URL)
+    params.forEach((value, key) => {
+      baseUrl.searchParams.set(key, value);
+    });
+
+    url = baseUrl.toString();
+  } else {
+    url = `/api/v1/namespaces/${data.prefix}/proxy/api/v1/query_range?${params.toString()}`;
+    if (data.subPath && data.subPath !== '') {
+      if (data.subPath.startsWith('/')) {
+        data.subPath = data.subPath.slice(1);
+      }
+      if (data.subPath.endsWith('/')) {
+        data.subPath = data.subPath.slice(0, -1);
+      }
+      url = `/api/v1/namespaces/${data.prefix}/proxy/${
+        data.subPath
+      }/api/v1/query_range?${params.toString()}`;
     }
-    if (data.subPath.endsWith('/')) {
-      data.subPath = data.subPath.slice(0, -1);
+  }
+
+  if (isExternal) {
+    const response = await fetch(url, { method: 'GET' });
+    if (response.ok) {
+      return response.json();
+    }
+    let message = `Request failed with status ${response.status} ${response.statusText}`;
+    try {
+      const bodyText = await response.text();
+      if (bodyText) {
+        message += `: ${bodyText}`;
+      }
+    } catch {
+      // Ignore errors while reading the error body; fallback to status-only message.
     }
-    url = `/api/v1/namespaces/${data.prefix}/proxy/${
-      data.subPath
-    }/api/v1/query_range?${params.toString()}`;
+    throw new Error(message);
   }
 
   const response = await request(url, {