Azure Monitor: Standardize Config Editor Implementation (#20455)

* initial changes - removal from state, remove anon functions, reset secrets empty * post testing cleanup * init promise cancellation, other cleanup * workspaces response parser, remove version incrementing * update datasource funcs - DRYer * remove prop mutation * func to modify root config opt * fix version issue * update snapshot
2025-02-25 18:55:37 -06:00 · 2019-12-04 14:35:53 -05:00 · 2019-12-04 14:35:53 -05:00 · 2098b9eb44
commit 2098b9eb44
parent 5f72bfe6e7
15 changed files with 391 additions and 514 deletions
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/packages/grafana-data/src/types/datasource.ts
@ -272,6 +272,64 @@ export abstract class DataSourceApi<
  interpolateVariablesInQueries?(queries: TQuery[]): TQuery[];
 }

+export function updateDatasourcePluginOption(props: DataSourcePluginOptionsEditorProps, key: string, val: any) {
+  let config = props.options;
+
+  config = {
+    ...config,
+    [key]: val,
+  };
+
+  props.onOptionsChange(config);
+}
+
+export function updateDatasourcePluginJsonDataOption(
+  props: DataSourcePluginOptionsEditorProps,
+  key: string,
+  val: any,
+  secure: boolean
+) {
+  let config = props.options;
+
+  if (secure) {
+    config = {
+      ...config,
+      secureJsonData: {
+        ...config.secureJsonData,
+        [key]: val,
+      },
+    };
+  } else {
+    config = {
+      ...config,
+      jsonData: {
+        ...config.jsonData,
+        [key]: val,
+      },
+    };
+  }
+
+  props.onOptionsChange(config);
+}
+
+export function updateDatasourcePluginResetKeyOption(props: DataSourcePluginOptionsEditorProps, key: string) {
+  let config = props.options;
+
+  config = {
+    ...config,
+    secureJsonData: {
+      ...config.secureJsonData,
+      [key]: '',
+    },
+    secureJsonFields: {
+      ...config.secureJsonFields,
+      [key]: false,
+    },
+  };
+
+  props.onOptionsChange(config);
+}
+
 export interface QueryEditorProps<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts
@ -149,4 +149,25 @@ export default class ResponseParser {

    return list;
  }
+
+  static parseWorkspacesForSelect(result: any): Array<{ label: string; value: string }> {
+    const list: Array<{ label: string; value: string }> = [];
+
+    if (!result) {
+      return list;
+    }
+
+    const valueFieldName = 'customerId';
+    const textFieldName = 'name';
+    for (let i = 0; i < result.data.value.length; i++) {
+      if (!_.find(list, ['value', _.get(result.data.value[i].properties, valueFieldName)])) {
+        list.push({
+          label: _.get(result.data.value[i], textFieldName),
+          value: _.get(result.data.value[i].properties, valueFieldName),
+        });
+      }
+    }
+
+    return list;
+  }
 }
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
@ -4,7 +4,7 @@ import AnalyticsConfig, { Props } from './AnalyticsConfig';

 const setup = (propOverrides?: object) => {
  const props: Props = {
-    datasourceConfig: {
+    options: {
      id: 21,
      orgId: 1,
      name: 'Azure Monitor-10-10',
@ -24,9 +24,10 @@ const setup = (propOverrides?: object) => {
        logAnalyticsClientSecret: false,
      },
      jsonData: {
+        cloudName: '',
+        subscriptionId: '',
        azureLogAnalyticsSameAs: false,
        logAnalyticsDefaultWorkspace: '',
-        logAnalyticsClientSecret: '',
        logAnalyticsTenantId: '',
      },
      secureJsonData: {
@ -35,9 +36,10 @@ const setup = (propOverrides?: object) => {
      version: 1,
      readOnly: false,
    },
-    logAnalyticsSubscriptions: [],
-    logAnalyticsWorkspaces: [],
-    onDatasourceUpdate: jest.fn(),
+    subscriptions: [],
+    workspaces: [],
+    onUpdateOption: jest.fn(),
+    onResetOptionKey: jest.fn(),
    onLoadSubscriptions: jest.fn(),
    onLoadWorkspaces: jest.fn(),
  };
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
@ -1,117 +1,52 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ChangeEvent } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AzureCredentialsForm } from './AzureCredentialsForm';
 import { Switch, FormLabel, Select, Button } from '@grafana/ui';
+import { AzureDataSourceSettings } from '../types';

 export interface Props {
-  datasourceConfig: any;
-  logAnalyticsSubscriptions: SelectableValue[];
-  logAnalyticsWorkspaces: SelectableValue[];
-  onDatasourceUpdate: (config: any) => void;
+  options: AzureDataSourceSettings;
+  subscriptions: SelectableValue[];
+  workspaces: SelectableValue[];
+  onUpdateOption: (key: string, val: any, secure: boolean) => void;
+  onResetOptionKey: (key: string) => void;
  onLoadSubscriptions: (type?: string) => void;
  onLoadWorkspaces: (type?: string) => void;
 }
-
-export interface State {
-  config: any;
-  logAnalyticsSubscriptions: SelectableValue[];
-  logAnalyticsWorkspaces: SelectableValue[];
-}
-
-export class AnalyticsConfig extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const { datasourceConfig } = this.props;
-
-    this.state = {
-      config: datasourceConfig,
-      logAnalyticsSubscriptions: [],
-      logAnalyticsWorkspaces: [],
-    };
-  }
-
-  static getDerivedStateFromProps(props: Props, state: State) {
-    return {
-      ...state,
-      config: props.datasourceConfig,
-      logAnalyticsSubscriptions: props.logAnalyticsSubscriptions,
-      logAnalyticsWorkspaces: props.logAnalyticsWorkspaces,
-    };
-  }
-
-  onLogAnalyticsTenantIdChange = (logAnalyticsTenantId: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        logAnalyticsTenantId,
-      },
-    });
+export class AnalyticsConfig extends PureComponent<Props> {
+  onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('logAnalyticsTenantId', event.target.value, false);
  };

-  onLogAnalyticsClientIdChange = (logAnalyticsClientId: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        logAnalyticsClientId,
-      },
-    });
+  onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('logAnalyticsClientId', event.target.value, false);
  };

-  onLogAnalyticsClientSecretChange = (logAnalyticsClientSecret: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      secureJsonData: {
-        ...this.state.config.secureJsonData,
-        logAnalyticsClientSecret,
-      },
-    });
-  };
-
-  onLogAnalyticsResetClientSecret = () => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      version: this.state.config.version + 1,
-      secureJsonFields: { ...this.state.config.secureJsonFields, logAnalyticsClientSecret: false },
-    });
+  onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('logAnalyticsClientSecret', event.target.value, true);
  };

  onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        logAnalyticsSubscriptionId: logAnalyticsSubscription.value,
-      },
-    });
+    this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value, false);
  };

  onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        logAnalyticsDefaultWorkspace: logAnalyticsDefaultWorkspace.value,
-      },
-    });
+    this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value, false);
  };

-  onAzureLogAnalyticsSameAsChange = (azureLogAnalyticsSameAs: boolean) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        azureLogAnalyticsSameAs,
-      },
-    });
+  onAzureLogAnalyticsSameAsChange = () => {
+    const { options } = this.props;
+    this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs, false);
+  };
+
+  onLogAnalyticsResetClientSecret = () => {
+    this.props.onResetOptionKey('logAnalyticsClientSecret');
  };

  hasWorkspaceRequiredFields = () => {
    const {
-      config: { jsonData, secureJsonData, secureJsonFields },
-    } = this.state;
+      options: { jsonData, secureJsonData, secureJsonFields },
+    } = this.props;

    if (jsonData.azureLogAnalyticsSameAs) {
      return (
@ -134,10 +69,14 @@ export class AnalyticsConfig extends PureComponent<Props, State> {

  render() {
    const {
-      config: { jsonData, secureJsonData, secureJsonFields },
-      logAnalyticsSubscriptions,
-      logAnalyticsWorkspaces,
-    } = this.state;
+      options: { jsonData, secureJsonData, secureJsonFields },
+      subscriptions,
+      workspaces,
+    } = this.props;
+
+    if (!jsonData.hasOwnProperty('azureLogAnalyticsSameAs')) {
+      jsonData.azureLogAnalyticsSameAs = true;
+    }

    const addtlAttrs = {
      ...(jsonData.azureLogAnalyticsSameAs && {
@ -150,12 +89,12 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
        <Switch
          label="Same details as Azure Monitor API"
          checked={jsonData.azureLogAnalyticsSameAs}
-          onChange={event => this.onAzureLogAnalyticsSameAsChange(!jsonData.azureLogAnalyticsSameAs)}
+          onChange={this.onAzureLogAnalyticsSameAsChange}
          {...addtlAttrs}
        />
        {!jsonData.azureLogAnalyticsSameAs && (
          <AzureCredentialsForm
-            subscriptionOptions={logAnalyticsSubscriptions}
+            subscriptionOptions={subscriptions}
            selectedSubscription={jsonData.logAnalyticsSubscriptionId}
            tenantId={jsonData.logAnalyticsTenantId}
            clientId={jsonData.logAnalyticsClientId}
@ -180,10 +119,8 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
              </FormLabel>
              <div className="width-25">
                <Select
-                  value={logAnalyticsWorkspaces.find(
-                    workspace => workspace.value === jsonData.logAnalyticsDefaultWorkspace
-                  )}
-                  options={logAnalyticsWorkspaces}
+                  value={workspaces.find(workspace => workspace.value === jsonData.logAnalyticsDefaultWorkspace)}
+                  options={workspaces}
                  defaultValue={jsonData.logAnalyticsDefaultWorkspace}
                  onChange={this.onWorkspaceSelectChange}
                />
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.test.tsx
@ -5,15 +5,15 @@ import AzureCredentialsForm, { Props } from './AzureCredentialsForm';
 const setup = (propOverrides?: object) => {
  const props: Props = {
    selectedAzureCloud: 'azuremonitor',
-    selectedSubscription: '44693801-6ee6-49de-9b2d-9106972f9572',
+    selectedSubscription: '44987801-6nn6-49he-9b2d-9106972f9789',
    azureCloudOptions: [
      { value: 'azuremonitor', label: 'Azure' },
      { value: 'govazuremonitor', label: 'Azure US Government' },
      { value: 'germanyazuremonitor', label: 'Azure Germany' },
      { value: 'chinaazuremonitor', label: 'Azure China' },
    ],
-    tenantId: 'e7f3f661-a933-4b3f-8176-51c4f982ec48',
-    clientId: '77409fad-c0a9-45df-9e25-f1ff95af6554',
+    tenantId: 'e7f3f661-a933-3h3f-0294-31c4f962ec48',
+    clientId: '34509fad-c0r9-45df-9e25-f1ee34af6900',
    clientSecret: '',
    clientSecretConfigured: false,
    subscriptionOptions: [],
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
@ -13,58 +13,22 @@ export interface Props {
  subscriptionOptions?: SelectableValue[];
  onAzureCloudChange?: (value: SelectableValue<string>) => void;
  onSubscriptionSelectChange?: (value: SelectableValue<string>) => void;
-  onTenantIdChange: (tenantId: string) => void;
-  onClientIdChange: (clientId: string) => void;
-  onClientSecretChange: (clientSecret: string) => void;
+  onTenantIdChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onClientIdChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onClientSecretChange: (event: ChangeEvent<HTMLInputElement>) => void;
  onResetClientSecret: () => void;
  onLoadSubscriptions?: () => void;
 }

-export interface State {
-  selectedAzureCloud?: string;
-  selectedSubscription: string;
-  tenantId: string;
-  clientId: string;
-  clientSecret: string;
-  clientSecretConfigured: boolean;
-}
-
-export class AzureCredentialsForm extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const {
-      selectedAzureCloud,
-      selectedSubscription,
-      tenantId,
-      clientId,
-      clientSecret,
-      clientSecretConfigured,
-    } = this.props;
-
-    this.state = {
-      selectedAzureCloud,
-      selectedSubscription,
-      tenantId,
-      clientId,
-      clientSecret,
-      clientSecretConfigured,
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps: Props, prevState: Props) {
-    const { selectedAzureCloud, tenantId, clientId, clientSecret, clientSecretConfigured } = nextProps;
-    return {
-      selectedAzureCloud,
-      tenantId,
-      clientId,
-      clientSecret,
-      clientSecretConfigured,
-    };
-  }
-
+export class AzureCredentialsForm extends PureComponent<Props> {
  render() {
    const {
+      selectedAzureCloud,
+      selectedSubscription,
+      tenantId,
+      clientId,
+      clientSecret,
+      clientSecretConfigured,
      azureCloudOptions,
      subscriptionOptions,
      onAzureCloudChange,
@ -75,16 +39,9 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
      onResetClientSecret,
      onLoadSubscriptions,
    } = this.props;
-    const {
-      selectedAzureCloud,
-      selectedSubscription,
-      tenantId,
-      clientId,
-      clientSecret,
-      clientSecretConfigured,
-    } = this.state;
    const hasRequiredFields = tenantId && clientId && (clientSecret || clientSecretConfigured);
    const hasSubscriptions = onLoadSubscriptions && subscriptionOptions;
+
    return (
      <>
        <div className="gf-form-group">
@ -112,7 +69,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
                  className="width-30"
                  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                  value={tenantId || ''}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => onTenantIdChange(event.target.value)}
+                  onChange={onTenantIdChange}
                />
              </div>
            </div>
@ -125,7 +82,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
                  className="width-30"
                  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                  value={clientId || ''}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => onClientIdChange(event.target.value)}
+                  onChange={onClientIdChange}
                />
              </div>
            </div>
@ -153,7 +110,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
                    className="width-30"
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    value={clientSecret || ''}
-                    onChange={(event: ChangeEvent<HTMLInputElement>) => onClientSecretChange(event.target.value)}
+                    onChange={onClientSecretChange}
                  />
                </div>
              </div>
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.test.tsx
@ -21,7 +21,7 @@ const setup = () => {
      withCredentials: false,
      isDefault: false,
      jsonData: {
-        subscriptionId: '',
+        subscriptionId: '44987801-6nn6-49he-9b2d-9106972f9789',
        azureLogAnalyticsSameAs: true,
        cloudName: 'azuremonitor',
      },
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
@ -1,112 +1,114 @@
 import React, { PureComponent } from 'react';
-import { SelectableValue, DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
+import {
+  SelectableValue,
+  DataSourcePluginOptionsEditorProps,
+  updateDatasourcePluginOption,
+  updateDatasourcePluginResetKeyOption,
+  updateDatasourcePluginJsonDataOption,
+} from '@grafana/data';
 import { MonitorConfig } from './MonitorConfig';
 import { AnalyticsConfig } from './AnalyticsConfig';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 import { InsightsConfig } from './InsightsConfig';
 import ResponseParser from '../azure_monitor/response_parser';
-import { AzureDataSourceJsonData, AzureDataSourceSecureJsonData } from '../types';
+import { AzureDataSourceJsonData, AzureDataSourceSecureJsonData, AzureDataSourceSettings } from '../types';
+import { makePromiseCancelable, CancelablePromise } from 'app/core/utils/CancelablePromise';

-export type Props = DataSourcePluginOptionsEditorProps<AzureDataSourceJsonData>;
-
-type AzureDataSourceSettings = DataSourceSettings<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;
+export type Props = DataSourcePluginOptionsEditorProps<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;

 export interface State {
-  config: AzureDataSourceSettings;
  subscriptions: SelectableValue[];
  logAnalyticsSubscriptions: SelectableValue[];
  logAnalyticsWorkspaces: SelectableValue[];
+  subscriptionId: string;
+  logAnalyticsSubscriptionId: string;
 }

 export class ConfigEditor extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);

-    const { options } = this.props;
-
    this.state = {
-      config: ConfigEditor.defaults(options),
      subscriptions: [],
      logAnalyticsSubscriptions: [],
      logAnalyticsWorkspaces: [],
+      subscriptionId: '',
+      logAnalyticsSubscriptionId: '',
    };

    this.backendSrv = getBackendSrv();
    this.templateSrv = new TemplateSrv();
-
-    if (options.id) {
-      this.state.config.url = '/api/datasources/proxy/' + options.id;
-      this.init();
+    if (this.props.options.id) {
+      updateDatasourcePluginOption(this.props, 'url', '/api/datasources/proxy/' + this.props.options.id);
    }
-
-    this.updateDatasource(this.state.config);
  }

-  static getDerivedStateFromProps(props: Props, state: State) {
-    return {
-      ...state,
-      config: ConfigEditor.defaults(props.options),
-    };
-  }
-
-  static defaults = (options: any) => {
-    options.jsonData.cloudName = options.jsonData.cloudName || 'azuremonitor';
-
-    if (!options.jsonData.hasOwnProperty('azureLogAnalyticsSameAs')) {
-      options.jsonData.azureLogAnalyticsSameAs = true;
-    }
-
-    if (!options.hasOwnProperty('secureJsonData')) {
-      options.secureJsonData = {};
-    }
-
-    if (!options.hasOwnProperty('secureJsonFields')) {
-      options.secureJsonFields = {
-        clientSecret: false,
-        logAnalyticsClientSecret: false,
-        appInsightsApiKey: false,
-      };
-    }
-
-    return options;
-  };
-
+  initPromise: CancelablePromise<any> = null;
  backendSrv: BackendSrv = null;
  templateSrv: TemplateSrv = null;

+  componentDidMount() {
+    this.initPromise = makePromiseCancelable(this.init());
+    this.initPromise.promise.catch(({ isCanceled }) => {
+      if (isCanceled) {
+        console.warn('Azure Monitor ConfigEditor has unmounted, intialization was canceled');
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.initPromise.cancel();
+  }
+
  init = async () => {
    await this.getSubscriptions();

-    if (!this.state.config.jsonData.azureLogAnalyticsSameAs) {
+    if (!this.props.options.jsonData.azureLogAnalyticsSameAs) {
      await this.getLogAnalyticsSubscriptions();
    }
  };

-  updateDatasource = async (config: any) => {
-    for (const j in config.jsonData) {
-      if (config.jsonData[j].length === 0) {
-        delete config.jsonData[j];
-      }
-    }
+  updateOption = (key: string, val: any, secure: boolean) => {
+    updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
+  };

-    for (const k in config.secureJsonData) {
-      if (config.secureJsonData[k].length === 0) {
-        delete config.secureJsonData[k];
+  resetKey = (key: string) => {
+    updateDatasourcePluginResetKeyOption(this.props, key);
+  };
+
+  updateOptions = (options: AzureDataSourceSettings) => {
+    if (options.hasOwnProperty('secureJsonData')) {
+      if (options.secureJsonData.hasOwnProperty('clientSecret') && options.secureJsonData.clientSecret.length === 0) {
+        delete options.secureJsonData.clientSecret;
+      }
+
+      if (
+        options.secureJsonData.hasOwnProperty('logAnalyticsClientSecret') &&
+        options.secureJsonData.logAnalyticsClientSecret.length === 0
+      ) {
+        delete options.secureJsonData.logAnalyticsClientSecret;
+      }
+
+      if (
+        options.secureJsonData.hasOwnProperty('appInsightsApiKey') &&
+        options.secureJsonData.appInsightsApiKey.length === 0
+      ) {
+        delete options.secureJsonData.appInsightsApiKey;
      }
    }

    this.props.onOptionsChange({
-      ...config,
+      ...options,
    });
  };

  hasNecessaryCredentials = () => {
-    if (!this.state.config.secureJsonFields.clientSecret && !this.state.config.secureJsonData.clientSecret) {
+    if (!this.props.options.secureJsonFields.clientSecret && !this.props.options.secureJsonData.clientSecret) {
      return false;
    }

-    if (!this.state.config.jsonData.clientId || !this.state.config.jsonData.tenantId) {
+    if (!this.props.options.jsonData.clientId || !this.props.options.jsonData.tenantId) {
      return false;
    }

@ -115,30 +117,28 @@ export class ConfigEditor extends PureComponent<Props, State> {

  logAnalyticsHasNecessaryCredentials = () => {
    if (
-      !this.state.config.secureJsonFields.logAnalyticsClientSecret &&
-      !this.state.config.secureJsonData.logAnalyticsClientSecret
+      !this.props.options.secureJsonFields.logAnalyticsClientSecret &&
+      !this.props.options.secureJsonData.logAnalyticsClientSecret
    ) {
      return false;
    }

-    if (!this.state.config.jsonData.logAnalyticsClientId || !this.state.config.jsonData.logAnalyticsTenantId) {
+    if (!this.props.options.jsonData.logAnalyticsClientId || !this.props.options.jsonData.logAnalyticsTenantId) {
      return false;
    }

    return true;
  };

-  onConfigUpdate = (config: any) => {
-    this.updateDatasource(config);
-  };
-
  onLoadSubscriptions = async (type?: string) => {
-    await this.backendSrv.put(`/api/datasources/${this.state.config.id}`, this.state.config).then(() => {
-      this.updateDatasource({
-        ...this.state.config,
-        version: this.state.config.version + 1,
+    await this.backendSrv
+      .put(`/api/datasources/${this.props.options.id}`, this.props.options)
+      .then((result: AzureDataSourceSettings) => {
+        this.updateOptions({
+          ...this.props.options,
+          version: result.version,
+        });
      });
-    });

    if (type && type === 'workspacesloganalytics') {
      this.getLogAnalyticsSubscriptions();
@ -148,25 +148,20 @@ export class ConfigEditor extends PureComponent<Props, State> {
  };

  loadSubscriptions = async (route?: string) => {
-    const url = `/${route || this.state.config.jsonData.cloudName}/subscriptions?api-version=2019-03-01`;
+    const url = `/${route || this.props.options.jsonData.cloudName}/subscriptions?api-version=2019-03-01`;

-    return this.backendSrv
-      .datasourceRequest({
-        url: this.state.config.url + url,
-        method: 'GET',
-      })
-      .then((result: any) => {
-        return ResponseParser.parseSubscriptionsForSelect(result);
-      })
-      .catch((error: any) => {
-        throw error;
-      });
+    const result = await this.backendSrv.datasourceRequest({
+      url: this.props.options.url + url,
+      method: 'GET',
+    });
+
+    return ResponseParser.parseSubscriptionsForSelect(result);
  };

  loadWorkspaces = async (subscription: string) => {
-    const { azureLogAnalyticsSameAs, cloudName, logAnalyticsSubscriptionId } = this.state.config.jsonData;
+    const { azureLogAnalyticsSameAs, cloudName, logAnalyticsSubscriptionId } = this.props.options.jsonData;
    let azureMonitorUrl = '',
-      subscriptionId = this.templateSrv.replace(subscription || this.state.config.jsonData.subscriptionId);
+      subscriptionId = this.templateSrv.replace(subscription || this.props.options.jsonData.subscriptionId);

    if (!!subscriptionId || !!azureLogAnalyticsSameAs) {
      const azureCloud = cloudName || 'azuremonitor';
@ -180,22 +175,12 @@ export class ConfigEditor extends PureComponent<Props, State> {
      azureMonitorUrl +
      `/${subscriptionId}/providers/Microsoft.OperationalInsights/workspaces?api-version=2017-04-26-preview`;

-    return this.backendSrv
-      .datasourceRequest({
-        url: this.state.config.url + workspaceListUrl,
-        method: 'GET',
-      })
-      .then((result: any) => {
-        return result.data.value.map((val: any) => {
-          return {
-            value: val.properties.customerId,
-            label: val.name,
-          };
-        });
-      })
-      .catch((error: any) => {
-        throw error;
-      });
+    const result = await this.backendSrv.datasourceRequest({
+      url: this.props.options.url + workspaceListUrl,
+      method: 'GET',
+    });
+
+    return ResponseParser.parseWorkspacesForSelect(result);
  };

  getSubscriptions = async () => {
@ -203,15 +188,15 @@ export class ConfigEditor extends PureComponent<Props, State> {
      return;
    }

-    const subscriptions = (await this.loadSubscriptions()) || [];
+    const subscriptions = ((await this.loadSubscriptions()) || []) as SelectableValue[];

    if (subscriptions && subscriptions.length > 0) {
      this.setState({ subscriptions });

-      this.state.config.jsonData.subscriptionId = this.state.config.jsonData.subscriptionId || subscriptions[0].value;
+      this.updateOption('subscriptionId', this.props.options.jsonData.subscriptionId || subscriptions[0].value, false);
    }

-    if (this.state.config.jsonData.subscriptionId && this.state.config.jsonData.azureLogAnalyticsSameAs) {
+    if (this.props.options.jsonData.subscriptionId && this.props.options.jsonData.azureLogAnalyticsSameAs) {
      await this.getWorkspaces();
    }
  };
@ -221,60 +206,73 @@ export class ConfigEditor extends PureComponent<Props, State> {
      return;
    }

-    const logAnalyticsSubscriptions = (await this.loadSubscriptions('workspacesloganalytics')) || [];
+    const logAnalyticsSubscriptions = ((await this.loadSubscriptions('workspacesloganalytics')) ||
+      []) as SelectableValue[];

    if (logAnalyticsSubscriptions && logAnalyticsSubscriptions.length > 0) {
      this.setState({ logAnalyticsSubscriptions });

-      this.state.config.jsonData.logAnalyticsSubscriptionId =
-        this.state.config.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value;
+      this.updateOption(
+        'logAnalyticsSubscriptionId',
+        this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value,
+        false
+      );
    }

-    if (this.state.config.jsonData.logAnalyticsSubscriptionId) {
+    if (this.props.options.jsonData.logAnalyticsSubscriptionId) {
      await this.getWorkspaces();
    }
  };

  getWorkspaces = async () => {
-    const sameAs = this.state.config.jsonData.azureLogAnalyticsSameAs && this.state.config.jsonData.subscriptionId;
-    if (!sameAs && !this.state.config.jsonData.logAnalyticsSubscriptionId) {
+    const sameAs = this.props.options.jsonData.azureLogAnalyticsSameAs && this.props.options.jsonData.subscriptionId;
+    if (!sameAs && !this.props.options.jsonData.logAnalyticsSubscriptionId) {
      return;
    }

    const logAnalyticsWorkspaces = await this.loadWorkspaces(
-      sameAs ? this.state.config.jsonData.subscriptionId : this.state.config.jsonData.logAnalyticsSubscriptionId
+      sameAs ? this.props.options.jsonData.subscriptionId : this.props.options.jsonData.logAnalyticsSubscriptionId
    );

    if (logAnalyticsWorkspaces.length > 0) {
      this.setState({ logAnalyticsWorkspaces });

-      this.state.config.jsonData.logAnalyticsDefaultWorkspace =
-        this.state.config.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value;
+      this.updateOption(
+        'logAnalyticsDefaultWorkspace',
+        this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value,
+        false
+      );
    }
  };

  render() {
-    const { config, subscriptions, logAnalyticsSubscriptions, logAnalyticsWorkspaces } = this.state;
+    const { subscriptions, logAnalyticsSubscriptions, logAnalyticsWorkspaces } = this.state;
+    const { options } = this.props;
+
+    options.jsonData.cloudName = options.jsonData.cloudName || 'azuremonitor';
+    options.secureJsonData = (options.secureJsonData || {}) as AzureDataSourceSecureJsonData;

    return (
      <>
        <MonitorConfig
-          datasourceConfig={config}
+          options={options}
          subscriptions={subscriptions}
          onLoadSubscriptions={this.onLoadSubscriptions}
-          onDatasourceUpdate={this.onConfigUpdate}
+          onUpdateOption={this.updateOption}
+          onResetOptionKey={this.resetKey}
        />

        <AnalyticsConfig
-          datasourceConfig={config}
-          logAnalyticsWorkspaces={logAnalyticsWorkspaces}
-          logAnalyticsSubscriptions={logAnalyticsSubscriptions}
+          options={options}
+          workspaces={logAnalyticsWorkspaces}
+          subscriptions={logAnalyticsSubscriptions}
+          onUpdateOption={this.updateOption}
+          onResetOptionKey={this.resetKey}
          onLoadSubscriptions={this.onLoadSubscriptions}
-          onDatasourceUpdate={this.onConfigUpdate}
          onLoadWorkspaces={this.getWorkspaces}
        />

-        <InsightsConfig datasourceConfig={config} onDatasourceUpdate={this.onConfigUpdate} />
+        <InsightsConfig options={options} onUpdateOption={this.updateOption} onResetOptionKey={this.resetKey} />
      </>
    );
  }
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.test.tsx
@ -4,7 +4,7 @@ import InsightsConfig, { Props } from './InsightsConfig';

 const setup = (propOverrides?: object) => {
  const props: Props = {
-    datasourceConfig: {
+    options: {
      id: 21,
      orgId: 1,
      name: 'Azure Monitor-10-10',
@ -24,15 +24,18 @@ const setup = (propOverrides?: object) => {
        appInsightsApiKey: false,
      },
      jsonData: {
-        appInsightsAppId: 'cddcc020-2c94-460a-a3d0-df3147ffa792',
+        cloudName: '',
+        subscriptionId: '',
+        appInsightsAppId: 'cvvcc020-2cpo-123a-a3d0-df6547fki792',
      },
      secureJsonData: {
-        appInsightsApiKey: 'e7f3f661-a933-4b3f-8176-51c4f982ec48',
+        appInsightsApiKey: 'e7f3f775-a987-4b3f-3835-51c4f982kl48',
      },
      version: 1,
      readOnly: false,
    },
-    onDatasourceUpdate: jest.fn(),
+    onUpdateOption: jest.fn(),
+    onResetOptionKey: jest.fn(),
  };

  Object.assign(props, propOverrides);
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.tsx
@ -1,71 +1,32 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ChangeEvent } from 'react';
 import { FormLabel, Button, Input } from '@grafana/ui';
+import { AzureDataSourceSettings } from '../types';

 export interface Props {
-  datasourceConfig: any;
-  onDatasourceUpdate: (config: any) => void;
+  options: AzureDataSourceSettings;
+  onUpdateOption: (key: string, val: any, secure: boolean) => void;
+  onResetOptionKey: (key: string) => void;
 }
-
-export interface State {
-  config: any;
-}
-
-export class InsightsConfig extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const { datasourceConfig } = this.props;
-
-    this.state = {
-      config: datasourceConfig,
-    };
-  }
-
-  static getDerivedStateFromProps(props: Props, state: State) {
-    return {
-      ...state,
-      config: props.datasourceConfig,
-    };
-  }
-
-  onAppInsightsAppIdChange = (appInsightsAppId: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        appInsightsAppId,
-      },
-    });
+export class InsightsConfig extends PureComponent<Props> {
+  onAppInsightsAppIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('appInsightsAppId', event.target.value, false);
  };

-  onAppInsightsApiKeyChange = (appInsightsApiKey: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      secureJsonData: {
-        ...this.state.config.secureJsonData,
-        appInsightsApiKey,
-      },
-    });
+  onAppInsightsApiKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('appInsightsApiKey', event.target.value, true);
  };

  onAppInsightsResetApiKey = () => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      version: this.state.config.version + 1,
-      secureJsonFields: {
-        ...this.state.config.secureJsonFields,
-        appInsightsApiKey: false,
-      },
-    });
+    this.props.onResetOptionKey('appInsightsApiKey');
  };

  render() {
-    const { config } = this.state;
+    const { options } = this.props;
    return (
      <>
        <h3 className="page-heading">Application Insights Details</h3>
        <div className="gf-form-group">
-          {config.secureJsonFields.appInsightsApiKey ? (
+          {options.secureJsonFields.appInsightsApiKey ? (
            <div className="gf-form-inline">
              <div className="gf-form">
                <FormLabel className="width-12">API Key</FormLabel>
@ -87,8 +48,8 @@ export class InsightsConfig extends PureComponent<Props, State> {
                  <Input
                    className="width-30"
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                    value={config.secureJsonData.appInsightsApiKey || ''}
-                    onChange={event => this.onAppInsightsApiKeyChange(event.target.value)}
+                    value={options.secureJsonData.appInsightsApiKey || ''}
+                    onChange={this.onAppInsightsApiKeyChange}
                  />
                </div>
              </div>
@ -100,8 +61,8 @@ export class InsightsConfig extends PureComponent<Props, State> {
              <div className="width-15">
                <Input
                  className="width-30"
-                  value={config.jsonData.appInsightsAppId || ''}
-                  onChange={event => this.onAppInsightsAppIdChange(event.target.value)}
+                  value={options.jsonData.appInsightsAppId || ''}
+                  onChange={this.onAppInsightsAppIdChange}
                />
              </div>
            </div>
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx
@ -1,121 +1,62 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ChangeEvent } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AzureCredentialsForm } from './AzureCredentialsForm';
+import { AzureDataSourceSettings } from '../types';
+
+const azureClouds = [
+  { value: 'azuremonitor', label: 'Azure' },
+  { value: 'govazuremonitor', label: 'Azure US Government' },
+  { value: 'germanyazuremonitor', label: 'Azure Germany' },
+  { value: 'chinaazuremonitor', label: 'Azure China' },
+] as SelectableValue[];

 export interface Props {
-  datasourceConfig: any;
+  options: AzureDataSourceSettings;
  subscriptions: SelectableValue[];
-  onDatasourceUpdate: (config: any) => void;
+  onUpdateOption: (key: string, val: any, secure: boolean) => void;
+  onResetOptionKey: (key: string) => void;
  onLoadSubscriptions: () => void;
 }

-export interface State {
-  config: any;
-  azureClouds: SelectableValue[];
-  subscriptions: SelectableValue[];
-}
-
-export class MonitorConfig extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const { datasourceConfig } = this.props;
-
-    this.state = {
-      config: datasourceConfig,
-      azureClouds: [
-        { value: 'azuremonitor', label: 'Azure' },
-        { value: 'govazuremonitor', label: 'Azure US Government' },
-        { value: 'germanyazuremonitor', label: 'Azure Germany' },
-        { value: 'chinaazuremonitor', label: 'Azure China' },
-      ],
-      subscriptions: [],
-    };
-  }
-
-  static getDerivedStateFromProps(props: Props, state: State) {
-    return {
-      ...state,
-      config: props.datasourceConfig,
-      subscriptions: props.subscriptions,
-    };
-  }
-
+export class MonitorConfig extends PureComponent<Props> {
  onAzureCloudSelect = (cloudName: SelectableValue<string>) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        cloudName: cloudName.value,
-      },
-    });
+    this.props.onUpdateOption('cloudName', cloudName.value, false);
  };

-  onTenantIdChange = (tenantId: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        tenantId,
-      },
-    });
+  onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('tenantId', event.target.value, false);
  };

-  onClientIdChange = (clientId: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        clientId,
-      },
-    });
+  onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('clientId', event.target.value, false);
  };

-  onClientSecretChange = (clientSecret: string) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      secureJsonData: {
-        ...this.state.config.secureJsonData,
-        clientSecret,
-      },
-    });
+  onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.onUpdateOption('clientSecret', event.target.value, true);
  };

  onResetClientSecret = () => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      version: this.state.config.version + 1,
-      secureJsonFields: {
-        ...this.state.config.secureJsonFields,
-        clientSecret: false,
-      },
-    });
+    this.props.onResetOptionKey('clientSecret');
  };

  onSubscriptionSelect = (subscription: SelectableValue<string>) => {
-    this.props.onDatasourceUpdate({
-      ...this.state.config,
-      jsonData: {
-        ...this.state.config.jsonData,
-        subscriptionId: subscription.value,
-      },
-    });
+    this.props.onUpdateOption('subscriptionId', subscription.value, false);
  };

  render() {
-    const { azureClouds, config, subscriptions } = this.state;
+    const { options, subscriptions } = this.props;
    return (
      <>
        <h3 className="page-heading">Azure Monitor Details</h3>
        <AzureCredentialsForm
-          selectedAzureCloud={config.jsonData.cloudName}
+          selectedAzureCloud={options.jsonData.cloudName || 'azuremonitor'}
          azureCloudOptions={azureClouds}
          subscriptionOptions={subscriptions}
-          selectedSubscription={config.jsonData.subscriptionId}
-          tenantId={config.jsonData.tenantId}
-          clientId={config.jsonData.clientId}
-          clientSecret={config.secureJsonData.clientSecret}
-          clientSecretConfigured={config.secureJsonFields.clientSecret}
+          selectedSubscription={options.jsonData.subscriptionId}
+          tenantId={options.jsonData.tenantId}
+          clientId={options.jsonData.clientId}
+          clientSecret={options.secureJsonData.clientSecret}
+          clientSecretConfigured={options.secureJsonFields.clientSecret}
          onAzureCloudChange={this.onAzureCloudSelect}
          onSubscriptionSelectChange={this.onSubscriptionSelect}
          onTenantIdChange={this.onTenantIdChange}
--- 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
@ -86,9 +86,9 @@ exports[`Render should disable azure monitor secret input 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+            value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
          />
        </div>
      </div>
@ -109,9 +109,9 @@ exports[`Render should disable azure monitor secret input 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="77409fad-c0a9-45df-9e25-f1ff95af6554"
+            value="34509fad-c0r9-45df-9e25-f1ee34af6900"
          />
        </div>
      </div>
@ -177,7 +177,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
                "SingleValue": [Function],
              }
            }
-            defaultValue="44693801-6ee6-49de-9b2d-9106972f9572"
+            defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
            isClearable={false}
            isDisabled={false}
            isLoading={false}
@ -303,9 +303,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+            value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
          />
        </div>
      </div>
@ -326,9 +326,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="77409fad-c0a9-45df-9e25-f1ff95af6554"
+            value="34509fad-c0r9-45df-9e25-f1ee34af6900"
          />
        </div>
      </div>
@ -349,7 +349,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
          />
@ -384,7 +384,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
                "SingleValue": [Function],
              }
            }
-            defaultValue="44693801-6ee6-49de-9b2d-9106972f9572"
+            defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
            isClearable={false}
            isDisabled={false}
            isLoading={false}
@ -510,9 +510,9 @@ exports[`Render should render component 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+            value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
          />
        </div>
      </div>
@ -533,9 +533,9 @@ exports[`Render should render component 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="77409fad-c0a9-45df-9e25-f1ff95af6554"
+            value="34509fad-c0r9-45df-9e25-f1ee34af6900"
          />
        </div>
      </div>
@ -556,7 +556,7 @@ exports[`Render should render component 1`] = `
        >
          <Input
            className="width-30"
-            onChange={[Function]}
+            onChange={[MockFunction]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
            value=""
          />
@ -591,7 +591,7 @@ exports[`Render should render component 1`] = `
                "SingleValue": [Function],
              }
            }
-            defaultValue="44693801-6ee6-49de-9b2d-9106972f9572"
+            defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
            isClearable={false}
            isDisabled={false}
            isLoading={false}
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/snapshots/ConfigEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/snapshots/ConfigEditor.test.tsx.snap
@ -3,7 +3,10 @@
 exports[`Render should render component 1`] = `
 <Fragment>
  <MonitorConfig
-    datasourceConfig={
+    onLoadSubscriptions={[Function]}
+    onResetOptionKey={[Function]}
+    onUpdateOption={[Function]}
+    options={
      Object {
        "access": "proxy",
        "basicAuth": false,
@ -15,6 +18,7 @@ exports[`Render should render component 1`] = `
        "jsonData": Object {
          "azureLogAnalyticsSameAs": true,
          "cloudName": "azuremonitor",
+          "subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
        },
        "name": "Azure Monitor-10-10",
        "orgId": 1,
@ -24,52 +28,20 @@ exports[`Render should render component 1`] = `
        "secureJsonFields": Object {},
        "type": "grafana-azure-monitor-datasource",
        "typeLogoUrl": "",
-        "url": "/api/datasources/proxy/21",
+        "url": "",
        "user": "",
        "version": 1,
        "withCredentials": false,
      }
    }
-    onDatasourceUpdate={[Function]}
-    onLoadSubscriptions={[Function]}
    subscriptions={Array []}
  />
  <AnalyticsConfig
-    datasourceConfig={
-      Object {
-        "access": "proxy",
-        "basicAuth": false,
-        "basicAuthPassword": "",
-        "basicAuthUser": "",
-        "database": "",
-        "id": 21,
-        "isDefault": false,
-        "jsonData": Object {
-          "azureLogAnalyticsSameAs": true,
-          "cloudName": "azuremonitor",
-        },
-        "name": "Azure Monitor-10-10",
-        "orgId": 1,
-        "password": "",
-        "readOnly": false,
-        "secureJsonData": Object {},
-        "secureJsonFields": Object {},
-        "type": "grafana-azure-monitor-datasource",
-        "typeLogoUrl": "",
-        "url": "/api/datasources/proxy/21",
-        "user": "",
-        "version": 1,
-        "withCredentials": false,
-      }
-    }
-    logAnalyticsSubscriptions={Array []}
-    logAnalyticsWorkspaces={Array []}
-    onDatasourceUpdate={[Function]}
    onLoadSubscriptions={[Function]}
    onLoadWorkspaces={[Function]}
-  />
-  <InsightsConfig
-    datasourceConfig={
+    onResetOptionKey={[Function]}
+    onUpdateOption={[Function]}
+    options={
      Object {
        "access": "proxy",
        "basicAuth": false,
@ -81,6 +53,7 @@ exports[`Render should render component 1`] = `
        "jsonData": Object {
          "azureLogAnalyticsSameAs": true,
          "cloudName": "azuremonitor",
+          "subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
        },
        "name": "Azure Monitor-10-10",
        "orgId": 1,
@ -90,13 +63,46 @@ exports[`Render should render component 1`] = `
        "secureJsonFields": Object {},
        "type": "grafana-azure-monitor-datasource",
        "typeLogoUrl": "",
-        "url": "/api/datasources/proxy/21",
+        "url": "",
+        "user": "",
+        "version": 1,
+        "withCredentials": false,
+      }
+    }
+    subscriptions={Array []}
+    workspaces={Array []}
+  />
+  <InsightsConfig
+    onResetOptionKey={[Function]}
+    onUpdateOption={[Function]}
+    options={
+      Object {
+        "access": "proxy",
+        "basicAuth": false,
+        "basicAuthPassword": "",
+        "basicAuthUser": "",
+        "database": "",
+        "id": 21,
+        "isDefault": false,
+        "jsonData": Object {
+          "azureLogAnalyticsSameAs": true,
+          "cloudName": "azuremonitor",
+          "subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
+        },
+        "name": "Azure Monitor-10-10",
+        "orgId": 1,
+        "password": "",
+        "readOnly": false,
+        "secureJsonData": Object {},
+        "secureJsonFields": Object {},
+        "type": "grafana-azure-monitor-datasource",
+        "typeLogoUrl": "",
+        "url": "",
        "user": "",
        "version": 1,
        "withCredentials": false,
      }
    }
-    onDatasourceUpdate={[Function]}
  />
 </Fragment>
 `;
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/snapshots/InsightsConfig.test.tsx.snap
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/snapshots/InsightsConfig.test.tsx.snap
@ -21,25 +21,15 @@ exports[`Render should disable insights api key input 1`] = `
        >
          API Key
        </Component>
-        <Input
-          className="width-25"
-          disabled={true}
-          placeholder="configured"
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
        <div
-          className="max-width-30 gf-form-inline"
+          className="width-15"
        >
-          <Button
-            onClick={[Function]}
-            type="button"
-            variant="secondary"
-          >
-            reset
-          </Button>
+          <Input
+            className="width-30"
+            onChange={[Function]}
+            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+            value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
+          />
        </div>
      </div>
    </div>
@ -60,7 +50,7 @@ exports[`Render should disable insights api key input 1`] = `
          <Input
            className="width-30"
            onChange={[Function]}
-            value="cddcc020-2c94-460a-a3d0-df3147ffa792"
+            value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
          />
        </div>
      </div>
@ -97,7 +87,7 @@ exports[`Render should enable insights api key input 1`] = `
            className="width-30"
            onChange={[Function]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+            value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
          />
        </div>
      </div>
@ -119,7 +109,7 @@ exports[`Render should enable insights api key input 1`] = `
          <Input
            className="width-30"
            onChange={[Function]}
-            value="cddcc020-2c94-460a-a3d0-df3147ffa792"
+            value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
          />
        </div>
      </div>
@ -156,7 +146,7 @@ exports[`Render should render component 1`] = `
            className="width-30"
            onChange={[Function]}
            placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-            value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+            value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
          />
        </div>
      </div>
@ -178,7 +168,7 @@ exports[`Render should render component 1`] = `
          <Input
            className="width-30"
            onChange={[Function]}
-            value="cddcc020-2c94-460a-a3d0-df3147ffa792"
+            value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
          />
        </div>
      </div>
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts
@ -1,4 +1,6 @@
-import { DataQuery, DataSourceJsonData } from '@grafana/data';
+import { DataQuery, DataSourceJsonData, DataSourceSettings } from '@grafana/data';
+
+export type AzureDataSourceSettings = DataSourceSettings<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;

 export interface AzureMonitorQuery extends DataQuery {
  refId: string;
@ -29,8 +31,9 @@ export interface AzureDataSourceJsonData extends DataSourceJsonData {
 }

 export interface AzureDataSourceSecureJsonData {
-  clientSecret: string;
-  logAnalyticsClientSecret: string;
+  clientSecret?: string;
+  logAnalyticsClientSecret?: string;
+  appInsightsApiKey?: string;
 }

 export interface AzureMetricQuery {