fix(grafana): Grafana dashboard uses contextual path and parameters a…

…nd capability to override URL (#1557)
cryostatio · Feb 4, 2025 · 6f0b1ac · 6f0b1ac
1 parent 0bdaad0
commit 6f0b1ac
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/src/app/Recordings/RecordingActions.tsx b/src/app/Recordings/RecordingActions.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { NotificationCategory, Recording, Target } from '@app/Shared/Services/api.types';
+import { CapabilitiesContext } from '@app/Shared/Services/Capabilities';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
@@ -42,20 +43,26 @@ export interface RecordingActionsProps {
 export const RecordingActions: React.FC<RecordingActionsProps> = ({ recording, uploadFn, ...props }) => {
   const { t } = useCryostatTranslation();
   const context = React.useContext(ServiceContext);
+  const capabilities = React.useContext(CapabilitiesContext);
   const notifications = React.useContext(NotificationsContext);
   const [grafanaEnabled, setGrafanaEnabled] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(false);
 
   const addSubscription = useSubscriptions();
 
   React.useEffect(() => {
-    addSubscription(
-      context.api
-        .grafanaDatasourceUrl()
-        .pipe(first())
-        .subscribe(() => setGrafanaEnabled(true)),
-    );
-  }, [context.api, setGrafanaEnabled, addSubscription]);
+    if (
+      capabilities.openGrafana === true ||
+      (typeof capabilities.openGrafana === 'string' && capabilities.openGrafana)
+    ) {
+      addSubscription(
+        context.api
+          .grafanaDatasourceUrl()
+          .pipe(first())
+          .subscribe(() => setGrafanaEnabled(true)),
+      );
+    }
+  }, [capabilities, context.api, setGrafanaEnabled, addSubscription]);
 
   const grafanaUpload = React.useCallback(() => {
     addSubscription(
@@ -68,11 +75,10 @@ export const RecordingActions: React.FC<RecordingActionsProps> = ({ recording, u
               .pipe(filter((n) => n.message.jobId === jobId)),
           ),
           tap(() => notifications.success('Upload Success', `Recording ${recording.name} uploaded`)),
-          concatMap(() => context.api.grafanaDashboardUrl()),
         )
-        .subscribe((url) => window.open(url, '_blank')),
+        .subscribe(() => context.api.openGrafanaDashboard(capabilities.openGrafana)),
     );
-  }, [addSubscription, notifications, context.api, context.notificationChannel, recording, uploadFn]);
+  }, [capabilities, addSubscription, notifications, context.api, context.notificationChannel, recording, uploadFn]);
 
   const handleDownloadRecording = React.useCallback(() => {
     context.api.downloadRecording(recording);

diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx
@@ -100,18 +100,8 @@ export class ApiService {
   }
 
   private testHealth() {
-    const getDatasourceURL: Observable<GrafanaDashboardUrlGetResponse> = this.ctx
-      .url('/api/v4/grafana_datasource_url')
-      .pipe(
-        concatMap((u) => fromFetch(u)),
-        concatMap((resp) => from(resp.json())),
-      );
-    const getDashboardURL: Observable<GrafanaDashboardUrlGetResponse> = this.ctx
-      .url('/api/v4/grafana_dashboard_url')
-      .pipe(
-        concatMap((u) => fromFetch(u)),
-        concatMap((resp) => from(resp.json())),
-      );
+    const datasourceURL: Observable<GrafanaDashboardUrlGetResponse> = this.doGet('/grafana_datasource_url', 'v4');
+    const dashboardURL: Observable<GrafanaDashboardUrlGetResponse> = this.doGet('/grafana_dashboard_url', 'v4');
     const health: Observable<HealthGetResponse> = this.doGet('/health', 'unversioned');
 
     health
@@ -127,7 +117,7 @@ export class ApiService {
           // if both configured and available then display nothing and just retrieve the URLs
           if (jsonResp.datasourceConfigured) {
             if (jsonResp.datasourceAvailable) {
-              toFetch.push(getDatasourceURL);
+              toFetch.push(datasourceURL);
             } else {
               unavailable.push('datasource URL');
             }
@@ -136,7 +126,7 @@ export class ApiService {
           }
           if (jsonResp.dashboardConfigured) {
             if (jsonResp.dashboardAvailable) {
-              toFetch.push(getDashboardURL);
+              toFetch.push(dashboardURL);
             } else {
               unavailable.push('dashboard URL');
             }
@@ -753,6 +743,18 @@ export class ApiService {
     return this.grafanaDashboardUrlSubject.asObservable();
   }
 
+  openGrafanaDashboard(openGrafana: string | boolean): void {
+    let url: Observable<string>;
+    if (openGrafana === true) {
+      url = this.grafanaDashboardUrl();
+    } else if (typeof openGrafana === 'string' && openGrafana) {
+      url = of(openGrafana);
+    } else {
+      return;
+    }
+    url.subscribe((u) => window.open(u, '_blank'));
+  }
+
   doGet<T>(
     path: string,
     apiVersion: ApiVersion = 'v4',
@@ -1464,8 +1466,8 @@ export class ApiService {
     return JSON.stringify(download);
   }
 
-  private downloadFile(url: string, filename: string, headers = true): void {
-    const qs = this.ctx.headers().pipe(
+  private instanceSelectorHeadersAsQuery(): Observable<string> {
+    return this.ctx.headers().pipe(
       map((headers) => {
         let ns: string | undefined;
         let name: string | undefined;
@@ -1485,8 +1487,10 @@ export class ApiService {
         return '';
       }),
     );
+  }
 
-    const o = headers ? qs : of('');
+  private downloadFile(url: string, filename: string, headers = true): void {
+    const o = headers ? this.instanceSelectorHeadersAsQuery() : of('');
     o.subscribe((q) => {
       const anchor = document.createElement('a');
       anchor.setAttribute('style', 'display: none; visibility: hidden;');

diff --git a/src/app/Shared/Services/Capabilities.tsx b/src/app/Shared/Services/Capabilities.tsx
@@ -17,9 +17,13 @@ import * as React from 'react';
 
 interface Capabilities {
   fileUploads: boolean;
+  // false to disable the feature, true to enable using the default mechanism of
+  // pulling the URL from the Cryostat server, truthy string to override the URL
+  openGrafana: string | boolean;
 }
 const defaultCapabilities: Capabilities = {
   fileUploads: true,
+  openGrafana: true,
 };
 
 const CapabilitiesContext: React.Context<Capabilities> = React.createContext(defaultCapabilities);