Azure Monitor: Datasource Config Type (#20183)

* fix subscriptions getting, move subscriptions and workspace fetching into react

* config typed

* moved ConfigEditor to components, parser for select objs

* AzureDataSourceSettings type on state

* typing datasource

public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts

@@ -128,4 +128,25 @@ export default class ResponseParser {
 
     return list;
   }
+
+  static parseSubscriptionsForSelect(result: any): Array<{ label: string; value: string }> {
+    const list: Array<{ label: string; value: string }> = [];
+
+    if (!result) {
+      return list;
+    }
+
+    const valueFieldName = 'subscriptionId';
+    const textFieldName = 'displayName';
+    for (let i = 0; i < result.data.value.length; i++) {
+      if (!_.find(list, ['value', _.get(result.data.value[i], valueFieldName)])) {
+        list.push({
+          label: `${_.get(result.data.value[i], textFieldName)} - ${_.get(result.data.value[i], valueFieldName)}`,
+          value: _.get(result.data.value[i], valueFieldName),
+        });
+      }
+    }
+
+    return list;
+  }
 }

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

@@ -21,6 +21,7 @@ const setup = () => {
       withCredentials: false,
       isDefault: false,
       jsonData: {
+        subscriptionId: '',
         azureLogAnalyticsSameAs: true,
         cloudName: 'azuremonitor',
       },

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

@@ -1,17 +1,19 @@
 import React, { PureComponent } from 'react';
-import { SelectableValue, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { SelectableValue, DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { MonitorConfig } from './components/MonitorConfig';
+import { MonitorConfig } from './MonitorConfig';
-import { AnalyticsConfig } from './components/AnalyticsConfig';
+import { AnalyticsConfig } from './AnalyticsConfig';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
-import AzureMonitorDatasource from './azure_monitor/azure_monitor_datasource';
+import { InsightsConfig } from './InsightsConfig';
-import AzureLogAnalyticsDatasource from './azure_log_analytics/azure_log_analytics_datasource';
+import ResponseParser from '../azure_monitor/response_parser';
-import { InsightsConfig } from './components/InsightsConfig';
+import { AzureDataSourceJsonData, AzureDataSourceSecureJsonData } from '../types';
 
-export type Props = DataSourcePluginOptionsEditorProps<any>;
+export type Props = DataSourcePluginOptionsEditorProps<AzureDataSourceJsonData>;
+
+type AzureDataSourceSettings = DataSourceSettings<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;
 
 export interface State {
-  config: any;
+  config: AzureDataSourceSettings;
   subscriptions: SelectableValue[];
   logAnalyticsSubscriptions: SelectableValue[];
   logAnalyticsWorkspaces: SelectableValue[];
@@ -145,20 +147,63 @@ 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`;
+
+    return this.backendSrv
+      .datasourceRequest({
+        url: this.state.config.url + url,
+        method: 'GET',
+      })
+      .then((result: any) => {
+        return ResponseParser.parseSubscriptionsForSelect(result);
+      })
+      .catch((error: any) => {
+        throw error;
+      });
+  };
+
+  loadWorkspaces = async (subscription: string) => {
+    const { azureLogAnalyticsSameAs, cloudName, logAnalyticsSubscriptionId } = this.state.config.jsonData;
+    let azureMonitorUrl = '',
+      subscriptionId = this.templateSrv.replace(subscription || this.state.config.jsonData.subscriptionId);
+
+    if (!!subscriptionId || !!azureLogAnalyticsSameAs) {
+      const azureCloud = cloudName || 'azuremonitor';
+      azureMonitorUrl = `/${azureCloud}/subscriptions`;
+    } else {
+      subscriptionId = logAnalyticsSubscriptionId;
+      azureMonitorUrl = `/workspacesloganalytics/subscriptions`;
+    }
+
+    const workspaceListUrl =
+      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;
+      });
+  };
+
   getSubscriptions = async () => {
     if (!this.hasNecessaryCredentials()) {
       return;
     }
 
-    const azureMonitorDatasource = new AzureMonitorDatasource(this.state.config, this.backendSrv, this.templateSrv);
+    const subscriptions = (await this.loadSubscriptions()) || [];
-
-    let subscriptions = (await azureMonitorDatasource.getSubscriptions()) || [];
-    subscriptions = subscriptions.map((subscription: any) => {
-      return {
-        value: subscription.value,
-        label: subscription.text,
-      };
-    });
 
     if (subscriptions && subscriptions.length > 0) {
       this.setState({ subscriptions });
@@ -176,15 +221,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
       return;
     }
 
-    const azureMonitorDatasource = new AzureMonitorDatasource(this.state.config, this.backendSrv, this.templateSrv);
+    const logAnalyticsSubscriptions = (await this.loadSubscriptions('workspacesloganalytics')) || [];
-
-    let logAnalyticsSubscriptions = (await azureMonitorDatasource.getSubscriptions('workspacesloganalytics')) || [];
-    logAnalyticsSubscriptions = logAnalyticsSubscriptions.map((subscription: any) => {
-      return {
-        value: subscription.value,
-        label: subscription.text,
-      };
-    });
 
     if (logAnalyticsSubscriptions && logAnalyticsSubscriptions.length > 0) {
       this.setState({ logAnalyticsSubscriptions });
@@ -204,21 +241,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
       return;
     }
 
-    const azureLogAnalyticsDatasource = new AzureLogAnalyticsDatasource(
+    const logAnalyticsWorkspaces = await this.loadWorkspaces(
-      this.state.config,
-      this.backendSrv,
-      this.templateSrv
-    );
-
-    let logAnalyticsWorkspaces = await azureLogAnalyticsDatasource.getWorkspaces(
       sameAs ? this.state.config.jsonData.subscriptionId : this.state.config.jsonData.logAnalyticsSubscriptionId
     );
-    logAnalyticsWorkspaces = logAnalyticsWorkspaces.map((workspace: any) => {
-      return {
-        value: workspace.value,
-        label: workspace.text,
-      };
-    });
 
     if (logAnalyticsWorkspaces.length > 0) {
       this.setState({ logAnalyticsWorkspaces });

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

@@ -46,7 +46,7 @@ export class MonitorConfig extends PureComponent<Props, State> {
       ...this.state.config,
       jsonData: {
         ...this.state.config.jsonData,
-        cloudName,
+        cloudName: cloudName.value,
       },
     });
   };

public/app/plugins/datasource/grafana-azure-monitor-datasource/module.tsx

@@ -1,10 +1,11 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { AzureMonitorQueryCtrl } from './query_ctrl';
 import Datasource from './datasource';
-import { ConfigEditor } from './ConfigEditor';
+import { ConfigEditor } from './components/ConfigEditor';
 import { AzureMonitorAnnotationsQueryCtrl } from './annotations_query_ctrl';
+import { AzureMonitorQuery, AzureDataSourceJsonData } from './types';
 
-export const plugin = new DataSourcePlugin(Datasource)
+export const plugin = new DataSourcePlugin<Datasource, AzureMonitorQuery, AzureDataSourceJsonData>(Datasource)
   .setConfigEditor(ConfigEditor)
   .setQueryCtrl(AzureMonitorQueryCtrl)
   .setAnnotationQueryCtrl(AzureMonitorAnnotationsQueryCtrl);

public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts

@@ -21,13 +21,18 @@ export interface AzureDataSourceJsonData extends DataSourceJsonData {
   logAnalyticsSubscriptionId?: string;
   logAnalyticsTenantId?: string;
   logAnalyticsClientId?: string;
-  azureLogAnalyticsSameAs?: string;
+  azureLogAnalyticsSameAs?: boolean;
   logAnalyticsDefaultWorkspace?: string;
 
   // App Insights
   appInsightsAppId?: string;
 }
 
+export interface AzureDataSourceSecureJsonData {
+  clientSecret: string;
+  logAnalyticsClientSecret: string;
+}
+
 export interface AzureMetricQuery {
   resourceGroup: string;
   resourceName: string;