Bug 1877198: Query Browser: Improve error message when Prometheus API returns 403

frontend/public/components/monitoring/metrics.tsx

@@ -55,6 +55,7 @@ import {
 import { setAllQueryArguments } from '../utils/router';
 import IntervalDropdown from './poll-interval-dropdown';
 import { colors, Error, QueryObj, QueryBrowser } from './query-browser';
+import { PrometheusAPIError } from './types';
 
 const operators = [
   'and',
@@ -224,7 +225,7 @@ export const ToggleGraph = connect(graphStateToProps, { toggle: UIActions.monito
 
 const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({ insertText, setMetrics }) => {
   const [items, setItems] = React.useState<MetricsDropdownItems>();
-  const [isError, setIsError] = React.useState(false);
+  const [error, setError] = React.useState<PrometheusAPIError>();
 
   const safeFetch = React.useCallback(useSafeFetch(), []);
 
@@ -235,7 +236,11 @@ const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({ insertText, setMetri
         setItems(_.zipObject(metrics, metrics));
         setMetrics(metrics);
       })
-      .catch(() => setIsError(true));
+      .catch((err) => {
+        if (err.name !== 'AbortError') {
+          setError(err);
+        }
+      });
   }, [safeFetch, setMetrics]);
 
   const onChange = (metric: string) => {
@@ -252,10 +257,12 @@ const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({ insertText, setMetri
   };
 
   let title: React.ReactNode = 'Insert Metric at Cursor';
-  if (isError) {
+  if (error !== undefined) {
+    const message =
+      error?.response?.status === 403 ? 'Access restricted.' : 'Failed to load metrics list.';
     title = (
       <span>
-        <RedExclamationCircleIcon /> Failed to load metrics list.
+        <RedExclamationCircleIcon /> {message}
       </span>
     );
   } else if (items === undefined) {
@@ -271,7 +278,7 @@ const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({ insertText, setMetri
   return (
     <Dropdown
       autocompleteFilter={fuzzyCaseInsensitive}
-      disabled={isError}
+      disabled={error !== undefined}
       id="metrics-dropdown"
       items={items || {}}
       menuClassName="query-browser__metrics-dropdown-menu query-browser__metrics-dropdown-menu--insert"
@@ -625,7 +632,7 @@ const QueryTable_: React.FC<QueryTableProps> = ({
   series,
 }) => {
   const [data, setData] = React.useState<PrometheusData>();
-  const [error, setError] = React.useState();
+  const [error, setError] = React.useState<PrometheusAPIError>();
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(50);
   const [sortBy, setSortBy] = React.useState<ISortBy>();

frontend/public/components/monitoring/query-browser.tsx

@@ -27,7 +27,6 @@ import {
 } from '@patternfly/react-core';
 import { ChartLineIcon } from '@patternfly/react-icons';
 import { connect } from 'react-redux';
-import { APIError } from '@console/shared';
 import { withFallback } from '@console/shared/src/components/error/error-boundary';
 
 import * as UIActions from '../../actions/ui';
@@ -50,6 +49,7 @@ import {
   twentyFourHourTime,
   twentyFourHourTimeWithSeconds,
 } from '../utils/datetime';
+import { PrometheusAPIError } from './types';
 
 const spans = ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', '1w', '2w'];
 const dropdownItems = _.zipObject(spans, spans);
@@ -514,7 +514,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
     defaultSamples || _.clamp(Math.round(span / minStep), minSamples, maxSamples);
 
   const [xDomain, setXDomain] = React.useState<AxisDomain>();
-  const [error, setError] = React.useState<QueryBrowserError>();
+  const [error, setError] = React.useState<PrometheusAPIError>();
   const [isDatasetTooBig, setIsDatasetTooBig] = React.useState(false);
   const [graphData, setGraphData] = React.useState(null);
   const [samples, setSamples] = React.useState(maxSamplesForSpan);
@@ -783,14 +783,8 @@ export type FormatLegendLabel = (labels: PrometheusLabels, i: number) => string;
 
 export type PatchQuery = (index: number, patch: QueryObj) => any;
 
-type QueryBrowserError = {
-  json?: {
-    error?: string;
-  };
-} & APIError;
-
 type ErrorProps = {
-  error: QueryBrowserError;
+  error: PrometheusAPIError;
   title?: string;
 };
 

frontend/public/components/monitoring/types.ts

@@ -1,3 +1,5 @@
+import { APIError } from '@console/shared';
+
 import { RowFunction } from '../factory';
 import { RowFilter } from '../filter-toolbar';
 import { PrometheusLabels } from '../graphs';
@@ -113,6 +115,15 @@ type Group = {
   name: string;
 };
 
+export type PrometheusAPIError = {
+  response?: {
+    status: number;
+  };
+  json?: {
+    error?: string;
+  };
+} & APIError;
+
 export type PrometheusRulesResponse = {
   data: {
     groups: Group[];