feat(graphql): improve error handling

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import { ErrorView } from '@app/ErrorView/ErrorView';
-import { authFailMessage, isAuthFail } from '@app/ErrorView/types';
+import { authFailMessage, isAuthFail, missingSSLMessage } from '@app/ErrorView/types';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import {
   emptyAutomatedAnalysisFilters,
@@ -45,7 +45,7 @@ import {
   AutomatedAnalysisScore,
   AnalysisResult,
 } from '@app/Shared/Services/api.types';
-import { isGraphQLAuthError } from '@app/Shared/Services/api.utils';
+import { isGraphQLAuthError, isGraphQLSSLError } from '@app/Shared/Services/api.utils';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { automatedAnalysisConfigToRecordingAttributes } from '@app/Shared/Services/service.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -363,6 +363,9 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
                     if (isGraphQLAuthError(resp)) {
                       context.target.setAuthFailure();
                       throw new Error(authFailMessage);
+                    } else if (isGraphQLSSLError(resp)) {
+                      context.target.setSslFailure();
+                      throw new Error(missingSSLMessage);
                     } else {
                       throw new Error(resp.errors[0].message);
                     }

src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx

@@ -47,6 +47,8 @@
 import { interval } from 'rxjs';
 import { DashboardCard } from '../../DashboardCard';
 import { ChartContext } from '../context';
+import { ErrorView } from '@app/ErrorView/ErrorView';
+import { missingSSLMessage, authFailMessage, isAuthFail } from '@app/ErrorView/types';
 
 export interface MBeanMetricsChartCardProps extends DashboardCardTypeProps {
   themeColor: string;
@@ -102,6 +104,58 @@
     [units, interpolation],
   );
 
+  const serviceContext = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const [errorMessage, setErrorMessage] = React.useState('');
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.sslFailure().subscribe(() => {
+        setErrorMessage(missingSSLMessage);
+      }),
+    );
+  }, [serviceContext.target, serviceContext.target.sslFailure, setErrorMessage, addSubscription]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.authRetry().subscribe(() => {
+        setErrorMessage(''); // Reset on retry
+      }),
+    );
+  }, [serviceContext.target, serviceContext.target.authRetry, setErrorMessage, addSubscription]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.authFailure().subscribe(() => {
+        setErrorMessage(authFailMessage);
+      }),
+    );
+  }, [serviceContext.target, serviceContext.target.authFailure, setErrorMessage, addSubscription]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.target().subscribe(() => {
+        setErrorMessage(''); // Reset on change
+      }),
+    );
+  }, [serviceContext.target, serviceContext.target.target, setErrorMessage, addSubscription]);
+
+  const authRetry = React.useCallback(() => {
+    serviceContext.target.setAuthRetry();
+  }, [serviceContext.target]);
+
+  const isError = React.useMemo(() => errorMessage != '', [errorMessage]);
+
+  if (isError) {
+    return (
+      <ErrorView
+        title={'Error displaying Mbean Metrics'}
+        message={errorMessage}
+        retry={isAuthFail(errorMessage) ? authRetry : undefined}
+      />
+    );
+  }
+
   return (
     <Chart
       containerComponent={

src/app/RecordingMetadata/BulkEditLabels.tsx

@@ -32,9 +32,11 @@
 import { Button, Split, SplitItem, Stack, StackItem, Text, Tooltip, ValidatedOptions } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { combineLatest, concatMap, filter, first, forkJoin, map, Observable, of } from 'rxjs';
+import { combineLatest, concatMap, filter, first, forkJoin, map, Observable, of, tap } from 'rxjs';
 import { RecordingLabelFields } from './RecordingLabelFields';
 import { includesLabel } from './utils';
+import { isGraphQLAuthError, isGraphQLSSLError } from '@app/Shared/Services/api.utils';
+import { authFailMessage, missingSSLMessage } from '@app/ErrorView/types';
 
 export interface BulkEditLabelsProps {
   isTargetRecording: boolean;
@@ -213,6 +215,19 @@
                 { id: target.id! },
               ),
             ),
+            tap((resp) => {
+              if (resp.data == undefined) {
+                if (isGraphQLAuthError(resp)) {
+                  context.target.setAuthFailure();
+                  throw new Error(authFailMessage);
+                } else if (isGraphQLSSLError(resp)) {
+                  context.target.setSslFailure();
+                  throw new Error(missingSSLMessage);
+                } else {
+                  throw new Error(resp.errors[0].message);
+                }
+              }
+            }),
             map((v) => (v.data?.targetNodes[0]?.target?.archivedRecordings?.data as ArchivedRecording[]) ?? []),
             first(),
           );

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -77,12 +77,14 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Observable, forkJoin, merge, combineLatest } from 'rxjs';
-import { concatMap, filter, first, map } from 'rxjs/operators';
+import { concatMap, filter, first, map, tap } from 'rxjs/operators';
 import { LabelCell } from '../RecordingMetadata/LabelCell';
 import { RecordingActions } from './RecordingActions';
 import { RecordingFiltersCategories, filterRecordings, RecordingFilters } from './RecordingFilters';
 import { RecordingLabelsPanel } from './RecordingLabelsPanel';
 import { ColumnConfig, RecordingsTable } from './RecordingsTable';
+import { isGraphQLAuthError, isGraphQLSSLError } from '@app/Shared/Services/api.utils';
+import { authFailMessage, missingSSLMessage } from '@app/ErrorView/types';
 
 const tableColumns: TableColumn[] = [
   {
@@ -247,7 +249,21 @@
     } else if (isUploadsTable) {
       addSubscription(
         queryUploadedRecordings()
-          .pipe(map((v) => (v?.data?.archivedRecordings?.data as ArchivedRecording[]) ?? []))
+          .pipe(
+            tap((resp) => {
+              if (resp.data == undefined) {
+                if (isGraphQLAuthError(resp)) {
+                  context.target.setAuthFailure();
+                  throw new Error(authFailMessage);
+                } else if (isGraphQLSSLError(resp)) {
+                  context.target.setSslFailure();
+                  throw new Error(missingSSLMessage);
+                } else {
+                  throw new Error(resp.errors[0].message);
+                }
+              }
+            }),
+            map((v) => (v?.data?.archivedRecordings?.data as ArchivedRecording[]) ?? []))
           .subscribe({
             next: handleRecordings,
             error: handleError,
@@ -259,7 +275,20 @@
           .pipe(
             filter((target) => !!target),
             first(),
-            concatMap((target: Target) => queryTargetRecordings(target.id!)),
+            concatMap((target: Target) => queryTargetRecordings(target.id!).pipe(
+              tap((resp) => {
+                if (resp.data == undefined) {
+                  if (isGraphQLAuthError(resp)) {
+                    context.target.setAuthFailure();
+                    throw new Error(authFailMessage);
+                  } else if (isGraphQLSSLError(resp)) {
+                    throw new Error(missingSSLMessage);
+                  } else {
+                    throw new Error(resp.errors[0].message);
+                  }
+                }
+              }),
+            )),
             map((v) => (v.data?.targetNodes[0]?.target?.archivedRecordings?.data as ArchivedRecording[]) ?? []),
           )
           .subscribe({
@@ -268,7 +297,7 @@
           }),
       );
     }
   }, [
     addSubscription,
     setIsLoading,
     handleRecordings,

src/app/Shared/Services/Api.service.tsx

@@ -59,15 +59,16 @@
   KeyValue,
   TargetStub,
   TargetForTest,
   Metadata,
   TargetMetadata,
   isTargetMetadata,
 } from './api.types';
-import { isHttpError, includesTarget, isHttpOk, isXMLHttpError } from './api.utils';
+import { isHttpError, includesTarget, isHttpOk, isXMLHttpError, isGraphQLAuthError, isGraphQLSSLError } from './api.utils';
 import { LoginService } from './Login.service';
 import { NotificationService } from './Notifications.service';
 import { SessionState } from './service.types';
 import { TargetService } from './Target.service';
+import { authFailMessage, missingSSLMessage } from '@app/ErrorView/types';
 
 export class ApiService {
   private readonly archiveEnabled = new ReplaySubject<boolean>(1);
@@ -77,7 +78,7 @@
 
   constructor(
     private readonly target: TargetService,
     private readonly notifications: NotificationService,
     private readonly login: LoginService,
   ) {
     // show recording archives when recordings available
@@ -1278,7 +1279,7 @@
   }
 
   getTargetMBeanMetrics(target: TargetStub, queries: string[]): Observable<MBeanMetrics> {
-    return this.graphql<MBeanMetricsResponse>(
+    return this.graphql<any>(
       `
         query MBeanMXMetricsForTarget($id: BigInteger!) {
           targetNodes(filter: { targetIds: [$id] }) {
@@ -1291,6 +1292,19 @@
         }`,
       { id: target.id! },
     ).pipe(
+      tap((resp) => {
+        if (resp.data == undefined) {
+          if (isGraphQLAuthError(resp)) {
+            this.target.setAuthFailure();
+            throw new Error(authFailMessage);
+          } else if (isGraphQLSSLError(resp)) {
+            this.target.setSslFailure();
+            throw new Error(missingSSLMessage);
+          } else {
+            throw new Error(resp.errors[0].message);
+          }
+        }
+      }),
       map((resp) => {
         const nodes = resp.data?.targetNodes ?? [];
         if (!nodes || nodes.length === 0) {

src/app/Shared/Services/api.utils.ts

@@ -59,6 +59,10 @@ export const isActiveRecording = (toCheck: Recording): toCheck is ActiveRecordin
   return (toCheck as ActiveRecording).state !== undefined;
 };
 
+// ======================================
+// GraphQL Error Handling utils
+// ======================================
+
 /* eslint @typescript-eslint/no-explicit-any: 0 */
 export const isGraphQLAuthError = (resp: any): boolean => {
   if (resp.errors !== undefined) {
@@ -69,6 +73,16 @@ export const isGraphQLAuthError = (resp: any): boolean => {
   return false;
 };
 
+/* eslint @typescript-eslint/no-explicit-any: 0 */
+export const isGraphQLSSLError = (resp: any): boolean => {
+  if (resp.errors !== undefined) {
+    if (resp.errors[0].message.includes('Bad Gateway')) {
+      return true;
+    }
+  }
+  return false;
+};
+
 // ======================================
 // Template utils
 // ======================================

src/app/Topology/Entity/EntityDetails.tsx

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+
+import { authFailMessage, isAuthFail, missingSSLMessage } from '@app/ErrorView/types';
 import { LinearDotSpinner } from '@app/Shared/Components/LinearDotSpinner';
 import { EnvironmentNode, MBeanMetrics, MBeanMetricsResponse, TargetNode } from '@app/Shared/Services/api.types';
-import { isTargetNode } from '@app/Shared/Services/api.utils';
+import { isGraphQLAuthError, isGraphQLSSLError, isTargetNode } from '@app/Shared/Services/api.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { ActionDropdown } from '@app/Topology/Actions/NodeActions';
 import useDayjs from '@app/utils/hooks/useDayjs';
@@ -49,7 +51,7 @@
 import { GraphElement, NodeStatus } from '@patternfly/react-topology';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { catchError, concatMap, map, of } from 'rxjs';
+import { catchError, concatMap, map, of, tap } from 'rxjs';
 import { EmptyText } from '../../Shared/Components/EmptyText';
 import { NodeAction } from '../Actions/types';
 import { actionFactory } from '../Actions/utils';
@@ -75,6 +77,8 @@
   mapSection,
   useResources,
 } from './utils';
+import { ErrorView } from '@app/ErrorView/ErrorView';
+
 
 export interface EntityDetailsProps {
   entity?: GraphElement | ListElement;
@@ -106,6 +110,58 @@
 
       const _actions = actionFactory(entity, 'dropdownItem', actionFilter);
 
+      const [errorMessage, setErrorMessage] = React.useState('');
+      const addSubscription = useSubscriptions();
+      const services = React.useContext(ServiceContext);
+
+      React.useEffect(() => {
+        addSubscription(
+          services.target.sslFailure().subscribe(() => {
+            // also triggered if api calls in Custom Recording form fail
+            setErrorMessage(missingSSLMessage);
+          }),
+        );
+      }, [services.target, setErrorMessage, addSubscription]);
+
+      React.useEffect(() => {
+        addSubscription(
+          services.target.authRetry().subscribe(() => {
+            setErrorMessage(''); // Reset on retry
+          }),
+        );
+      }, [services.target, setErrorMessage, addSubscription]);
+
+      React.useEffect(() => {
+        addSubscription(
+          services.target.authFailure().subscribe(() => {
+            // also triggered if api calls in Custom Recording form fail
+            setErrorMessage(authFailMessage);
+          }),
+        );
+      }, [services.target, setErrorMessage, addSubscription]);
+
+      React.useEffect(() => {
+        addSubscription(
+          services.target.target().subscribe(() => {
+            setErrorMessage(''); // Reset on change
+          }),
+        );
+      }, [services.target, setErrorMessage, addSubscription]);
+
+      const authRetry = React.useCallback(() => {
+        services.target.setAuthRetry();
+      }, [services.target]);
+
+      if (errorMessage != '') {
+        return (
+          <ErrorView
+            title={'Error displaying Mbean Metrics'}
+            message={errorMessage}
+            retry={isAuthFail(errorMessage) ? authRetry : undefined}
+          />
+        );
+      }
+
       return (
         <>
           <EntityDetailHeader
@@ -267,7 +323,7 @@
     if (isExpanded) {
       addSubscription(
         context.api
-          .graphql<MBeanMetricsResponse>(
+          .graphql<any>(
             `
             query MBeanMXMetricsForTarget($id: BigInteger!) {
               targetNodes(filter: { targetIds: [$id] }) {
@@ -306,7 +362,7 @@
           .subscribe(setMbeanMetrics),
       );
     }
-  }, [isExpanded, addSubscription, targetId, context.api, setMbeanMetrics]);
+  }, [isExpanded, addSubscription, targetId, context.api, setMbeanMetrics, context.target]);
 
   const _collapsedData = React.useMemo((): DescriptionConfig[] => {
     return [