From 1e221b645270587ffa657d77eec34d7577e500c1 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 17 Aug 2021 16:46:15 +0100
Subject: [PATCH] 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:
---
 .../src/services/backendSrv.ts                |  3 +-
 .../components/AzureCredentialsForm.tsx       |  2 +-
 .../components/ConfigEditor.tsx               | 40 ++++++++++++++++---
 .../AzureCredentialsForm.test.tsx.snap        |  6 +--
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-runtime/src/services/backendSrv.ts b/packages/grafana-runtime/src/services/backendSrv.ts
index eb9249daf8a..8f39f2551c1 100644
--- a/packages/grafana-runtime/src/services/backendSrv.ts
+++ b/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>>;
 
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
index bdfa47550ef..57cc9517c9e 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
+++ b/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={
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
index 5dda4b38fec..973168c541c 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
+++ b/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>
+        )}
       </>
     );
   }
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
index 4bf5b932f13..f2849b33ad6 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
+++ b/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}