OU-1031: Show the alert request error to the user

web/src/components/alerting/AlertRulesPage.tsx

@@ -202,7 +202,9 @@ const AlertRulesPage_: FC = () => {
           onFilterChange={onFilterChange}
           rowFilters={rowFilters}
         />
-        {silences?.loadError && <SilencesNotLoadedWarning silencesLoadError={silences.loadError} />}
+        {silences?.loadError && !rulesAlertLoading?.loadError && (
+          <SilencesNotLoadedWarning silencesLoadError={silences.loadError} />
+        )}
         <div id="alert-rules-table-scroll">
           <VirtualizedTable<Rule>
             aria-label={t('Alerting rules')}

web/src/components/alerting/AlertsPage.tsx

@@ -28,10 +28,10 @@ import {
   severityRowFilter,
   SilencesNotLoadedWarning,
 } from './AlertUtils';
-import Error from './Error';
 import useSelectedFilters from './useSelectedFilters';
 import { MonitoringProvider } from '../../contexts/MonitoringContext';
 import { useAlerts } from '../../hooks/useAlerts';
+import { AccessDenied } from '../console/console-shared/src/components/empty-state/AccessDenied';
 
 const AlertsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -115,7 +115,7 @@ const AlertsPage_: FC = () => {
 
   const filteredAggregatedAlerts = getAggregateAlertsLists(filteredData);
   const loaded = !!rulesAlertLoading?.loaded;
-  const loadError = rulesAlertLoading?.loadError ? rulesAlertLoading.loadError : null;
+  const loadError = rulesAlertLoading?.loadError ? rulesAlertLoading.loadError : undefined;
 
   return (
     <>
@@ -135,10 +135,11 @@ const AlertsPage_: FC = () => {
             <DownloadCSVButton loaded={loaded} filteredData={filteredAggregatedAlerts} />
           )}
         </Flex>
-        {silences?.loadError && (
+        {/* Only show the silences error when the alerts have loaded, since failing to load the
+          silences doesn't matter if the alerts haven't loaded*/}
+        {silences?.loadError && !loadError && (
           <SilencesNotLoadedWarning silencesLoadError={silences?.loadError} />
         )}
-
         {filteredAggregatedAlerts?.length > 0 && loaded && (
           <Table gridBreakPoint={TableGridBreakpoint.none} role="presentation">
             <Thead>
@@ -159,8 +160,7 @@ const AlertsPage_: FC = () => {
             ))}
           </Table>
         )}
-
-        {loadError && <Error error={loadError} />}
+        {loadError && <AccessDenied message={loadError.message} />}
         {loaded && filteredAggregatedAlerts?.length === 0 && !loadError && (
           <EmptyBox label={t('Alerts')} />
         )}

web/src/components/console/console-shared/src/components/empty-state/AccessDenied.tsx

@@ -1,35 +1,26 @@
-import type { FC } from 'react';
-import { Alert, Flex, FlexItem } from '@patternfly/react-core';
+import { Alert, EmptyState, Flex, FlexItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { ConsoleEmptyState } from './ConsoleEmptyState';
-import * as restrictedSignImg from '../../../../imgs/restricted-sign.svg';
+import RestrictedSignImg from '../../../../imgs/restricted-sign.svg';
 
 const RestrictedSignIcon = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
-  return <img src={restrictedSignImg} alt={t('Restricted access')} />;
+  return <img src={RestrictedSignImg} alt={t('Restricted access')} />;
 };
 
-export const AccessDenied: FC = ({ children }) => {
+export const AccessDenied = ({ message }: { message: string }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <ConsoleEmptyState
-      data-test="access-denied"
-      Icon={RestrictedSignIcon}
-      title={t('Restricted access')}
-    >
+    <EmptyState data-test="access-denied" icon={RestrictedSignIcon} title={t('Restricted access')}>
       <Flex direction={{ default: 'column' }}>
         <FlexItem>{t("You don't have access to this section due to cluster policy")}</FlexItem>
-        {children && (
-          <FlexItem>
-            <Alert variant="danger" title={t('Error details')}>
-              {children}
-            </Alert>
-          </FlexItem>
-        )}
+        <FlexItem>
+          <Alert variant="danger" title={t('Error details')}>
+            {message}
+          </Alert>
+        </FlexItem>
       </Flex>
-    </ConsoleEmptyState>
+    </EmptyState>
   );
 };
-AccessDenied.displayName = 'AccessDenied';

web/src/components/console/console-shared/src/components/status/StatusBox.tsx

@@ -54,7 +54,7 @@ export const StatusBox: FC<StatusBoxProps> = (props) => {
       );
     }
     if (status === 403) {
-      return <AccessDenied>{loadError.message}</AccessDenied>;
+      return <AccessDenied message={loadError.message} />;
     }
 
     if (loadError instanceof IncompleteDataError && !_.isEmpty(data)) {

web/src/store/thunks.ts

@@ -33,13 +33,27 @@ export const fetchAlertingData =
     ]);
 
     if (rulesResponse.status === 'rejected') {
+      if (rulesResponse.reason?.response) {
+        // Set the error message to be the RBAC denial reason
+        const responseText = await rulesResponse.reason?.response?.text();
+        if (responseText) {
+          rulesResponse.reason.message = responseText;
+        }
+      }
       dispatch(alertingSetErrored(prometheus, namespace, rulesResponse.reason));
     } else {
       const { alerts, rules } = getAlertsAndRules(rulesResponse.value.data);
       dispatch(alertingSetRulesLoaded(prometheus, namespace, rules, alerts));
     }
 
     if (silencesResponse.status === 'rejected') {
+      if (silencesResponse.reason?.response) {
+        // Set the error message to be the RBAC denial reason
+        const responseText = await silencesResponse.reason?.response?.text();
+        if (responseText) {
+          silencesResponse.reason.message = responseText;
+        }
+      }
       dispatch(alertingSetSilencesErrored(prometheus, namespace, silencesResponse.reason));
     } else {
       const silences = silencesResponse.value.map((silence) => ({