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

@@ -20,6 +20,8 @@ import {
   DashboardCardSizes,
   DashboardCardDescriptor,
 } from '@app/Dashboard/types';
+import { ErrorView } from '@app/ErrorView/ErrorView';
+import { missingSSLMessage, authFailMessage, isAuthFail } from '@app/ErrorView/types';
 import { ThemeType, ThemeSetting } from '@app/Settings/types';
 import { MBeanMetrics } from '@app/Shared/Services/api.types';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
@@ -370,6 +372,8 @@ export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps>
   const addSubscription = useSubscriptions();
   const [samples, setSamples] = React.useState([] as Sample[]);
   const [isLoading, setLoading] = React.useState(true);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const isError = React.useMemo(() => errorMessage != '', [errorMessage]);
 
   const resizeObserver = React.useRef((): void => undefined);
   const [cardWidth, setCardWidth] = React.useState(0);
@@ -411,9 +415,34 @@ export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps>
     addSubscription(
       serviceContext.target.target().subscribe((_) => {
         setSamples([]);
+        setErrorMessage(''); // Reset on change
       }),
     );
-  }, [addSubscription, serviceContext, setSamples, refresh]);
+  }, [addSubscription, serviceContext, setSamples, setErrorMessage, refresh]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.authRetry().subscribe(() => {
+        setErrorMessage(''); // Reset on retry
+      }),
+    );
+  }, [addSubscription, serviceContext.target, setErrorMessage]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.sslFailure().subscribe(() => {
+        setErrorMessage(missingSSLMessage);
+      }),
+    );
+  }, [addSubscription, serviceContext.target, setErrorMessage]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.authFailure().subscribe(() => {
+        setErrorMessage(authFailMessage);
+      }),
+    );
+  }, [addSubscription, serviceContext.target, setErrorMessage]);
 
   React.useEffect(() => {
     refresh();
@@ -424,6 +453,10 @@ export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps>
     addSubscription(controllerContext.mbeanController.loading().subscribe(setLoading));
   }, [addSubscription, controllerContext, setLoading]);
 
+  const authRetry = React.useCallback(() => {
+    serviceContext.target.setAuthRetry();
+  }, [serviceContext.target]);
+
   const refreshButton = React.useMemo(
     () => (
       <Button
@@ -466,20 +499,29 @@ export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps>
     [theme, containerRef, props.themeColor, props.isFullHeight, chartKind, cardWidth, samples],
   );
 
-  return (
-    <DashboardCard
-      id={props.chartKind + '-chart-card'}
-      dashboardId={props.dashboardId}
-      cardSizes={MBeanMetricsChartCardSizes}
-      isCompact
-      isDraggable={props.isDraggable}
-      isResizable={props.isResizable}
-      isFullHeight={props.isFullHeight}
-      cardHeader={header}
-    >
-      <CardBody>{visual}</CardBody>
-    </DashboardCard>
-  );
+  if (isError) {
+    return (
+      <ErrorView
+        title={'Error displaying Mbean Metrics'}
+        message={errorMessage}
+        retry={isAuthFail(errorMessage) ? authRetry : undefined}
+      />
+    );
+  } else
+    return (
+      <DashboardCard
+        id={props.chartKind + '-chart-card'}
+        dashboardId={props.dashboardId}
+        cardSizes={MBeanMetricsChartCardSizes}
+        isCompact
+        isDraggable={props.isDraggable}
+        isResizable={props.isResizable}
+        isFullHeight={props.isFullHeight}
+        cardHeader={header}
+      >
+        <CardBody>{visual}</CardBody>
+      </DashboardCard>
+    );
 };
 
 MBeanMetricsChartCard.cardComponentName = 'MBeanMetricsChartCard';

src/app/RecordingMetadata/BulkEditLabels.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { uploadAsTarget } from '@app/Archives/Archives';
+import { authFailMessage, missingSSLMessage } from '@app/ErrorView/types';
 import { LabelCell } from '@app/RecordingMetadata/LabelCell';
 import { LoadingProps } from '@app/Shared/Components/types';
 import {
@@ -26,13 +27,14 @@ import {
   Target,
   KeyValue,
 } from '@app/Shared/Services/api.types';
+import { isGraphQLAuthError, isGraphQLSSLError } from '@app/Shared/Services/api.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { hashCode, portalRoot } from '@app/utils/utils';
 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';
 
@@ -213,6 +215,19 @@ export const BulkEditLabels: React.FC<BulkEditLabelsProps> = ({
                 { 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

@@ -19,6 +19,7 @@ import {
   ClickableAutomatedAnalysisLabel,
   clickableAutomatedAnalysisKey,
 } from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
+import { authFailMessage, missingSSLMessage } from '@app/ErrorView/types';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 import { DeleteOrDisableWarningType } from '@app/Modal/types';
 import { LoadingProps } from '@app/Shared/Components/types';
@@ -43,6 +44,7 @@ import {
   CategorizedRuleEvaluations,
   AnalysisResult,
 } from '@app/Shared/Services/api.types';
+import { isGraphQLAuthError, isGraphQLSSLError } from '@app/Shared/Services/api.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSort } from '@app/utils/hooks/useSort';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
@@ -77,7 +79,7 @@ import { Tbody, Tr, Td, ExpandableRowContent, TableComposable, SortByDirection }
 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';
@@ -247,7 +249,22 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
     } 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 +276,22 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
           .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({
@@ -275,6 +307,7 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
     handleError,
     queryTargetRecordings,
     queryUploadedRecordings,
+    context.target,
     isUploadsTable,
     propsDirectory,
     propsTarget,

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

@@ -59,7 +59,6 @@ import {
   ActiveRecordingsFilterInput,
   RecordingCountResponse,
   MBeanMetrics,
-  MBeanMetricsResponse,
   EventType,
   NotificationCategory,
   HttpError,
@@ -73,8 +72,16 @@ import {
   Metadata,
   TargetMetadata,
   isTargetMetadata,
+  MBeanMetricsResponse,
 } 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 { TargetService } from './Target.service';
@@ -1295,6 +1302,15 @@ export class ApiService {
         }`,
       { id: target.id! },
     ).pipe(
+      tap((resp) => {
+        if (resp.data == undefined) {
+          if (isGraphQLAuthError(resp)) {
+            this.target.setAuthFailure();
+          } else if (isGraphQLSSLError(resp)) {
+            this.target.setSslFailure();
+          }
+        }
+      }),
       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
 // ======================================