Implement runtime-configurable Grafana endpoints and database names

Signed-off-by: Harshit Nayan <[email protected]>

updated README with grafana config

Signed-off-by: Harshit Nayan <[email protected]>

Author: LogicalGuy77

README.md

@@ -52,6 +52,30 @@ The following is a list of environment variables that can be set for any web app
 | CSRF_SAMESITE | Strict| Controls the [SameSite value](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#SameSite) of the CSRF cookie |
 | USERID_HEADER | kubeflow-userid | Header in each request that will contain the username of the logged in user |
 | USERID_PREFIX | "" | Prefix to remove from the `USERID_HEADER` value to extract the logged in user name |
+| GRAFANA_PREFIX | /grafana | Controls the Grafana endpoint prefix for metrics dashboards |
+| GRAFANA_CPU_MEMORY_DB | db/knative-serving-revision-cpu-and-memory-usage | Grafana dashboard name for CPU and memory metrics |
+| GRAFANA_HTTP_REQUESTS_DB | db/knative-serving-revision-http-requests | Grafana dashboard name for HTTP request metrics |
+
+## Grafana Configuration
+
+The application supports runtime configuration of Grafana endpoints and dashboard names, allowing you to use custom Grafana instances and dashboard configurations without rebuilding the application.
+
+### Configuration API
+
+You can verify your grafana configuration by accessing the `/api/config` endpoint:
+
+```bash
+curl http://your-app-url/api/config
+```
+
+Expected response:
+```json
+{
+  "grafanaPrefix": "/custom-grafana",
+  "grafanaCpuMemoryDb": "db/custom-cpu-memory-dashboard",
+  "grafanaHttpRequestsDb": "db/custom-http-requests-dashboard"
+}
+```
 
 ## Development
 

backend/apps/v1beta1/routes/__init__.py

@@ -4,4 +4,4 @@
 
 bp = Blueprint("default_routes", __name__)
 
-from . import post, put  # noqa: F401, E402
+from . import get, post, put  # noqa: F401, E402

backend/apps/v1beta1/routes/get.py

@@ -0,0 +1,27 @@
+"""GET routes of the backend."""
+
+import os
+from flask import jsonify
+
+from kubeflow.kubeflow.crud_backend import api, logging
+
+from . import bp
+
+log = logging.getLogger(__name__)
+
+
+@bp.route("/api/config", methods=["GET"])
+def get_config():
+    """Handle retrieval of application configuration."""
+    try:
+        config = {
+            "grafanaPrefix": os.environ.get("GRAFANA_PREFIX", "/grafana"),
+            "grafanaCpuMemoryDb": os.environ.get("GRAFANA_CPU_MEMORY_DB", "db/knative-serving-revision-cpu-and-memory-usage"),
+            "grafanaHttpRequestsDb": os.environ.get("GRAFANA_HTTP_REQUESTS_DB", "db/knative-serving-revision-http-requests")
+        }
+        
+        log.info("Configuration requested: %s", config)
+        return jsonify(config)
+    except Exception as e:
+        log.error("Error retrieving configuration: %s", str(e))
+        return api.error_response("message", "Failed to retrieve configuration"), 500

backend/entrypoint.py

@@ -15,6 +15,11 @@
 PREFIX = os.environ.get("APP_PREFIX", "/")
 APP_VERSION = os.environ.get("APP_VERSION", "v1beta1")
 
+# Grafana configuration
+GRAFANA_PREFIX = os.environ.get("GRAFANA_PREFIX", "/grafana")
+GRAFANA_CPU_MEMORY_DB = os.environ.get("GRAFANA_CPU_MEMORY_DB", "db/knative-serving-revision-cpu-and-memory-usage")
+GRAFANA_HTTP_REQUESTS_DB = os.environ.get("GRAFANA_HTTP_REQUESTS_DB", "db/knative-serving-revision-http-requests")
+
 cfg = config.get_config(BACKEND_MODE)
 cfg.PREFIX = PREFIX
 cfg.APP_VERSION = APP_VERSION

config/base/kustomization.yaml

@@ -14,6 +14,9 @@ images:
 configMapGenerator:
 - literals:
   - APP_DISABLE_AUTH="True"
+  - GRAFANA_PREFIX="/grafana"
+  - GRAFANA_CPU_MEMORY_DB="db/knative-serving-revision-cpu-and-memory-usage"
+  - GRAFANA_HTTP_REQUESTS_DB="db/knative-serving-revision-http-requests"
   name: kserve-models-web-app-config
 apiVersion: kustomize.config.k8s.io/v1beta1
 kind: Kustomization

frontend/src/app/app.module.ts

@@ -12,6 +12,8 @@ import {
   MatSnackBarConfig,
   MAT_SNACK_BAR_DEFAULT_OPTIONS,
 } from '@angular/material/snack-bar';
+import { ConfigService } from './services/config.service';
+import { take } from 'rxjs/operators';
 
 /**
  * MAT_SNACK_BAR_DEFAULT_OPTIONS values can be found
@@ -39,6 +41,12 @@ const MwaSnackBarConfig: MatSnackBarConfig = {
       useFactory: () => configureAce,
       multi: true,
     },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (configService: ConfigService) => () => configService.getConfig().pipe(take(1)).toPromise(),
+      deps: [ConfigService],
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
 })

frontend/src/app/pages/server-info/metrics/metrics.component.ts

@@ -1,22 +1,56 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { GrafanaService } from 'src/app/services/grafana.service';
+import { ConfigService } from 'src/app/services/config.service';
 import { InferenceServiceStatus } from 'src/app/types/kfserving/v1beta1';
 import { GrafanaIframeConfig } from 'src/app/types/grafana';
+import { AppConfig } from 'src/app/types/config';
 
 @Component({
   selector: 'app-metrics',
   templateUrl: './metrics.component.html',
   styleUrls: ['./metrics.component.scss'],
 })
-export class MetricsComponent {
+export class MetricsComponent implements OnInit {
   public configs = {
     predictor: [],
     transformer: [],
     explainer: [],
   };
 
+  private cpuMemoryDb: string;
+  private httpRequestsDb: string;
+
   @Input() namespace: string;
 
+  constructor(private configService: ConfigService) {}
+
+  ngOnInit(): void {
+    this.configService.getConfig().subscribe(
+      config => {
+        this.cpuMemoryDb = config.grafanaCpuMemoryDb;
+        this.httpRequestsDb = config.grafanaHttpRequestsDb;
+        // Regenerate configs if status is already set
+        if (this.statusPrv) {
+          ['predictor', 'transformer', 'explainer'].forEach(comp => {
+            this.configs[comp] = this.generateComponentGraphsConfig(comp);
+          });
+        }
+      },
+      error => {
+        console.error('Failed to load configuration for MetricsComponent:', error);
+        // Use default database names as fallback
+        this.cpuMemoryDb = 'db/knative-serving-revision-cpu-and-memory-usage';
+        this.httpRequestsDb = 'db/knative-serving-revision-http-requests';
+        // Regenerate configs if status is already set
+        if (this.statusPrv) {
+          ['predictor', 'transformer', 'explainer'].forEach(comp => {
+            this.configs[comp] = this.generateComponentGraphsConfig(comp);
+          });
+        }
+      }
+    );
+  }
+
   @Input()
   set status(s: InferenceServiceStatus) {
     this.statusPrv = s;
@@ -104,11 +138,12 @@ export class MetricsComponent {
     configuration: string,
     revision: string,
   ): GrafanaIframeConfig {
+    const dashboardUri = this.httpRequestsDb || 'db/knative-serving-revision-http-requests';
     return this.generateRevisionGraphConfig(
       panelId,
       450,
       200,
-      'db/knative-serving-revision-http-requests',
+      dashboardUri, // Use configurable value with fallback
       configuration,
       revision,
     );
@@ -119,11 +154,12 @@ export class MetricsComponent {
     configuration: string,
     revision: string,
   ): GrafanaIframeConfig {
+    const dashboardUri = this.cpuMemoryDb || 'db/knative-serving-revision-cpu-and-memory-usage';
     return this.generateRevisionGraphConfig(
       panelId,
       450,
       200,
-      'db/knative-serving-revision-cpu-and-memory-usage',
+      dashboardUri, // Use configurable value with fallback
       configuration,
       revision,
     );

frontend/src/app/pages/server-info/server-info.component.ts

@@ -15,10 +15,10 @@ import {
   Status,
 } from 'kubeflow';
 import { MWABackendService } from 'src/app/services/backend.service';
+import { ConfigService } from 'src/app/services/config.service';
 import { isEqual } from 'lodash';
 import { generateDeleteConfig } from '../index/config';
 import { HttpClient } from '@angular/common/http';
-import { environment } from 'src/environments/environment';
 import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
 import {
   InferenceServiceOwnedObjects,
@@ -78,6 +78,7 @@ export class ServerInfoComponent implements OnInit, OnDestroy {
     private backend: MWABackendService,
     private confirmDialog: ConfirmDialogService,
     private snack: SnackBarService,
+    private configService: ConfigService,
   ) {}
 
   ngOnInit() {
@@ -95,31 +96,16 @@ export class ServerInfoComponent implements OnInit, OnDestroy {
 
     // don't show a METRICS tab if Grafana is not exposed
     console.log($localize`Checking if Grafana endpoint is exposed`);
-    const grafanaApi = environment.grafanaPrefix + '/api/search';
-
-    this.http
-      .get(grafanaApi)
-      .pipe(timeout(1000))
-      .subscribe({
-        next: resp => {
-          if (!Array.isArray(resp)) {
-            console.log(
-              $localize`Response from the Grafana endpoint was not as expected.`,
-            );
-            this.grafanaFound = false;
-            return;
-          }
-
-          console.log(
-            $localize`Grafana endpoint detected. Will expose a metrics tab.`,
-          );
-          this.grafanaFound = true;
-        },
-        error: () => {
-          console.log($localize`Could not detect a Grafana endpoint.`);
-          this.grafanaFound = false;
-        },
-      });
+    this.configService.getConfig().subscribe(
+      config => {
+        this.checkGrafanaAvailability(config.grafanaPrefix);
+      },
+      error => {
+        console.error('Failed to load configuration for ServerInfoComponent:', error);
+        // Use default prefix as fallback
+        this.checkGrafanaAvailability('/grafana');
+      }
+    );
   }
 
   ngOnDestroy() {
@@ -323,6 +309,34 @@ export class ServerInfoComponent implements OnInit, OnDestroy {
     }
   }
 
+  private checkGrafanaAvailability(grafanaPrefix: string): void {
+    const grafanaApi = grafanaPrefix + '/api/search';
+
+    this.http
+      .get(grafanaApi)
+      .pipe(timeout(1000))
+      .subscribe({
+        next: resp => {
+          if (!Array.isArray(resp)) {
+            console.log(
+              $localize`Response from the Grafana endpoint was not as expected.`,
+            );
+            this.grafanaFound = false;
+            return;
+          }
+
+          console.log(
+            $localize`Grafana endpoint detected. Will expose a metrics tab.`,
+          );
+          this.grafanaFound = true;
+        },
+        error: () => {
+          console.log($localize`Could not detect a Grafana endpoint.`);
+          this.grafanaFound = false;
+        },
+      });
+  }
+
   private isRawDeployment(svc: InferenceServiceK8s): boolean {
     const annotations = svc.metadata?.annotations || {};
 

frontend/src/app/services/config.service.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BackendService, SnackBarService } from 'kubeflow';
+import { ReplaySubject, Observable, of } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+import { AppConfig } from '../types/config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfigService extends BackendService {
+  private config$ = new ReplaySubject<AppConfig>(1);
+  private configLoaded = false;
+
+  constructor(public http: HttpClient, public snack: SnackBarService) {
+    super(http, snack);
+    this.loadConfig();
+  }
+
+  private loadConfig(): void {
+    console.log('Loading application configuration');
+    
+    this.http.get<AppConfig>('api/config').pipe(
+      catchError(error => {
+        console.warn('Failed to load config from backend, using defaults:', error);
+        return of(this.getDefaultConfig());
+      }),
+      tap(config => {
+        console.log('Configuration loaded:', config);
+        this.configLoaded = true;
+      })
+    ).subscribe(
+      config => this.config$.next(config),
+      error => {
+        console.error('Error loading configuration:', error);
+        this.config$.next(this.getDefaultConfig());
+        this.configLoaded = true;
+      }
+    );
+  }
+
+  private getDefaultConfig(): AppConfig {
+    return {
+      grafanaPrefix: '/grafana',
+      grafanaCpuMemoryDb: 'db/knative-serving-revision-cpu-and-memory-usage',
+      grafanaHttpRequestsDb: 'db/knative-serving-revision-http-requests'
+    };
+  }
+
+  public getConfig(): Observable<AppConfig> {
+    return this.config$.asObservable();
+  }
+
+  public isConfigLoaded(): boolean {
+    return this.configLoaded;
+  }
+
+  public reloadConfig(): void {
+    this.configLoaded = false;
+    this.loadConfig();
+  }
+}