AzureMonitor: Show error message when subscriptions request fails in ConfigEditor (#37837)

* Fix jsdoc description for datasourceRequest

* Align default subscription width with other fields

* AzureMonitor: Show error message when requesting default subscriptions in ConfigEditor

* update snapshots:

packages/grafana-runtime/src/services/backendSrv.ts

@@ -152,11 +152,12 @@ export interface BackendSrv {
   request(options: BackendSrvRequest): Promise<any>;
 
   /**
-   * @deprecated Use the fetch function instead
    * Special function used to communicate with datasources that will emit core
    * events that the Grafana QueryInspector and QueryEditor is listening for to be able
    * to display datasource query information. Can be skipped by adding `option.silent`
    * when initializing the request.
+   *
+   * @deprecated Use the fetch function instead
    */
   datasourceRequest<T = any>(options: BackendSrvRequest): Promise<FetchResponse<T>>;
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

@@ -252,7 +252,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
           <div className="gf-form-inline">
             <div className="gf-form">
               <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
-              <div className="width-25">
+              <div className="width-30">
                 <Select
                   menuShouldPortal
                   value={

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx

@@ -7,6 +7,7 @@ import {
   updateDatasourcePluginResetOption,
   updateDatasourcePluginSecureJsonDataOption,
 } from '@grafana/data';
+import { Alert } from '@grafana/ui';
 import { MonitorConfig } from './MonitorConfig';
 import { AnalyticsConfig } from './AnalyticsConfig';
 import { getBackendSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
@@ -18,9 +19,16 @@ import { routeNames } from '../utils/common';
 
 export type Props = DataSourcePluginOptionsEditorProps<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;
 
+interface ErrorMessage {
+  title: string;
+  description: string;
+  details?: string;
+}
+
 export interface State {
   unsaved: boolean;
   appInsightsInitiallyConfigured: boolean;
+  error?: ErrorMessage;
 }
 
 export class ConfigEditor extends PureComponent<Props, State> {
@@ -60,12 +68,26 @@ export class ConfigEditor extends PureComponent<Props, State> {
     await this.saveOptions();
 
     const query = `?api-version=2019-03-01`;
-    const result = await getBackendSrv().datasourceRequest({
-      url: this.baseURL + query,
-      method: 'GET',
-    });
+    try {
+      const result = await getBackendSrv()
+        .fetch({
+          url: this.baseURL + query,
+          method: 'GET',
+        })
+        .toPromise();
 
-    return ResponseParser.parseSubscriptionsForSelect(result);
+      this.setState({ error: undefined });
+      return ResponseParser.parseSubscriptionsForSelect(result);
+    } catch (err) {
+      this.setState({
+        error: {
+          title: 'Error requesting subscriptions',
+          description: 'Could not request subscriptions from Azure. Check your credentials and try again.',
+          details: err?.data?.message,
+        },
+      });
+      return Promise.resolve([]);
+    }
   };
 
   // TODO: Used only by InsightsConfig
@@ -89,6 +111,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
   render() {
     const { options } = this.props;
+    const { error } = this.state;
 
     return (
       <>
@@ -102,6 +125,13 @@ export class ConfigEditor extends PureComponent<Props, State> {
             onResetOptionKey={this.resetSecureKey}
           />
         )}
+
+        {error && (
+          <Alert severity="error" title={error.title}>
+            <p>{error.description}</p>
+            {error.details && <details style={{ whiteSpace: 'pre-wrap' }}>{error.details}</details>}
+          </Alert>
+        )}
       </>
     );
   }

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap

@@ -160,7 +160,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
         Default Subscription
       </FormLabel>
       <div
-        className="width-25"
+        className="width-30"
       >
         <Select
           allowCustomValue={false}
@@ -365,7 +365,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
         Default Subscription
       </FormLabel>
       <div
-        className="width-25"
+        className="width-30"
       >
         <Select
           allowCustomValue={false}
@@ -570,7 +570,7 @@ exports[`Render should render component 1`] = `
         Default Subscription
       </FormLabel>
       <div
-        className="width-25"
+        className="width-30"
       >
         <Select
           allowCustomValue={false}