DataSource Plugins: consistent generics order <TQuery,TOptions> (#16936)

* consistent TQuery,TOptions

* add json for azure

* cloudwatch

packages/grafana-ui/src/types/datasource.ts

@@ -11,13 +11,13 @@ export interface DataSourcePluginOptionsEditorProps<TOptions> {
 }
 
 export class DataSourcePlugin<
-  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  TQuery extends DataQuery = DataQuery
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
 > extends GrafanaPlugin<DataSourcePluginMeta> {
-  DataSourceClass: DataSourceConstructor<TQuery>;
-  components: DataSourcePluginComponents<TOptions, TQuery>;
+  DataSourceClass: DataSourceConstructor<TQuery, TOptions>;
+  components: DataSourcePluginComponents<TQuery, TOptions>;
 
-  constructor(DataSourceClass: DataSourceConstructor<TQuery>) {
+  constructor(DataSourceClass: DataSourceConstructor<TQuery, TOptions>) {
     super();
     this.DataSourceClass = DataSourceClass;
     this.components = {};
@@ -89,8 +89,8 @@ interface PluginMetaQueryOptions {
 }
 
 export interface DataSourcePluginComponents<
-  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  TQuery extends DataQuery = DataQuery
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
 > {
   QueryCtrl?: any;
   AnnotationsQueryCtrl?: any;
@@ -101,14 +101,20 @@ export interface DataSourcePluginComponents<
   ConfigEditor?: React.ComponentType<DataSourcePluginOptionsEditorProps<DataSourceSettings<TOptions>>>;
 }
 
-export interface DataSourceConstructor<TQuery extends DataQuery = DataQuery> {
-  new (instanceSettings: DataSourceInstanceSettings, ...args: any[]): DataSourceApi<TQuery>;
+export interface DataSourceConstructor<
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> {
+  new (instanceSettings: DataSourceInstanceSettings<TOptions>, ...args: any[]): DataSourceApi<TQuery, TOptions>;
 }
 
 /**
  * The main data source abstraction interface, represents an instance of a data source
  */
-export interface DataSourceApi<TQuery extends DataQuery = DataQuery> {
+export interface DataSourceApi<
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> {
   /**
    *  min interval range
    */
@@ -158,7 +164,7 @@ export interface DataSourceApi<TQuery extends DataQuery = DataQuery> {
    * Set after constructor call, as the data source instance is the most common thing to pass around
    * we attach the components to this instance for easy access
    */
-  components?: DataSourcePluginComponents;
+  components?: DataSourcePluginComponents<TQuery, TOptions>;
 
   /**
    * static information about the datasource

public/app/features/dashboard/state/PanelQueryRunner.ts

@@ -10,10 +10,21 @@ import templateSrv from 'app/features/templating/template_srv';
 import { PanelQueryState } from './PanelQueryState';
 
 // Types
-import { PanelData, DataQuery, TimeRange, ScopedVars, DataQueryRequest, DataSourceApi } from '@grafana/ui';
+import {
+  PanelData,
+  DataQuery,
+  TimeRange,
+  ScopedVars,
+  DataQueryRequest,
+  DataSourceApi,
+  DataSourceJsonData,
+} from '@grafana/ui';
 
-export interface QueryRunnerOptions<TQuery extends DataQuery = DataQuery> {
-  datasource: string | DataSourceApi<TQuery>;
+export interface QueryRunnerOptions<
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> {
+  datasource: string | DataSourceApi<TQuery, TOptions>;
   queries: TQuery[];
   panelId: number;
   dashboardId?: number;

public/app/plugins/datasource/cloudwatch/datasource.ts

@@ -3,7 +3,10 @@ import _ from 'lodash';
 import * as dateMath from '@grafana/ui/src/utils/datemath';
 import kbn from 'app/core/utils/kbn';
 import { CloudWatchQuery } from './types';
-import { DataSourceApi, DataQueryRequest } from '@grafana/ui/src/types';
+import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui/src/types';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 // import * as moment from 'moment';
 
 export default class CloudWatchDatasource implements DataSourceApi<CloudWatchQuery> {
@@ -11,10 +14,16 @@ export default class CloudWatchDatasource implements DataSourceApi<CloudWatchQue
   name: any;
   proxyUrl: any;
   defaultRegion: any;
-  instanceSettings: any;
   standardStatistics: any;
+
   /** @ngInject */
-  constructor(instanceSettings, private $q, private backendSrv, private templateSrv, private timeSrv) {
+  constructor(
+    private instanceSettings: DataSourceInstanceSettings,
+    private $q,
+    private backendSrv: BackendSrv,
+    private templateSrv: TemplateSrv,
+    private timeSrv: TimeSrv
+  ) {
     this.type = 'cloudwatch';
     this.name = instanceSettings.name;
     this.proxyUrl = instanceSettings.url;

public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts

@@ -5,11 +5,14 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
 import { CustomVariable } from 'app/features/templating/all';
 import _ from 'lodash';
 import { CloudWatchQuery } from '../types';
+import { DataSourceInstanceSettings } from '@grafana/ui';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 describe('CloudWatchDatasource', () => {
   const instanceSettings = {
-    jsonData: { defaultRegion: 'us-east-1', access: 'proxy' },
-  };
+    jsonData: { defaultRegion: 'us-east-1' },
+  } as DataSourceInstanceSettings;
 
   const templateSrv = new TemplateSrv();
 
@@ -21,8 +24,8 @@ describe('CloudWatchDatasource', () => {
         to: dateMath.parse(timeSrv.time.to, true),
       };
     },
-  };
-  const backendSrv = {};
+  } as TimeSrv;
+  const backendSrv = {} as BackendSrv;
   const ctx = {
     backendSrv,
     templateSrv,

public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts

@@ -2,6 +2,10 @@ import _ from 'lodash';
 import AppInsightsQuerystringBuilder from './app_insights_querystring_builder';
 import LogAnalyticsQuerystringBuilder from '../log_analytics/querystring_builder';
 import ResponseParser from './response_parser';
+import { DataSourceInstanceSettings } from '@grafana/ui';
+import { AzureDataSourceJsonData } from '../types';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export interface LogAnalyticsColumn {
   text: string;
@@ -16,7 +20,12 @@ export default class AppInsightsDatasource {
   logAnalyticsColumns: { [key: string]: LogAnalyticsColumn[] } = {};
 
   /** @ngInject */
-  constructor(instanceSettings, private backendSrv, private templateSrv, private $q) {
+  constructor(
+    instanceSettings: DataSourceInstanceSettings<AzureDataSourceJsonData>,
+    private backendSrv: BackendSrv,
+    private templateSrv: TemplateSrv,
+    private $q
+  ) {
     this.id = instanceSettings.id;
     this.applicationId = instanceSettings.jsonData.appInsightsAppId;
     this.baseUrl = `/appinsights/${this.version}/apps/${this.applicationId}`;

public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_log_analytics/azure_log_analytics_datasource.ts

@@ -1,8 +1,10 @@
 import _ from 'lodash';
 import LogAnalyticsQuerystringBuilder from '../log_analytics/querystring_builder';
 import ResponseParser from './response_parser';
-import { AzureMonitorQuery } from '../types';
-import { DataQueryRequest } from '@grafana/ui/src/types';
+import { AzureMonitorQuery, AzureDataSourceJsonData } from '../types';
+import { DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui/src/types';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export default class AzureLogAnalyticsDatasource {
   id: number;
@@ -14,7 +16,12 @@ export default class AzureLogAnalyticsDatasource {
   subscriptionId: string;
 
   /** @ngInject */
-  constructor(private instanceSettings, private backendSrv, private templateSrv, private $q) {
+  constructor(
+    private instanceSettings: DataSourceInstanceSettings<AzureDataSourceJsonData>,
+    private backendSrv: BackendSrv,
+    private templateSrv: TemplateSrv,
+    private $q
+  ) {
     this.id = instanceSettings.id;
     this.baseUrl = this.instanceSettings.jsonData.azureLogAnalyticsSameAs
       ? '/sameasloganalyticsazure'

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

@@ -4,8 +4,10 @@ import UrlBuilder from './url_builder';
 import ResponseParser from './response_parser';
 import SupportedNamespaces from './supported_namespaces';
 import TimegrainConverter from '../time_grain_converter';
-import { AzureMonitorQuery } from '../types';
-import { DataQueryRequest } from '@grafana/ui/src/types';
+import { AzureMonitorQuery, AzureDataSourceJsonData } from '../types';
+import { DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui/src/types';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export default class AzureMonitorDatasource {
   apiVersion = '2018-01-01';
@@ -20,7 +22,11 @@ export default class AzureMonitorDatasource {
   supportedMetricNamespaces: any[] = [];
 
   /** @ngInject */
-  constructor(private instanceSettings, private backendSrv, private templateSrv) {
+  constructor(
+    private instanceSettings: DataSourceInstanceSettings<AzureDataSourceJsonData>,
+    private backendSrv: BackendSrv,
+    private templateSrv: TemplateSrv
+  ) {
     this.id = instanceSettings.id;
     this.subscriptionId = instanceSettings.jsonData.subscriptionId;
     this.cloudName = instanceSettings.jsonData.cloudName || 'azuremonitor';

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

@@ -2,10 +2,12 @@ import _ from 'lodash';
 import AzureMonitorDatasource from './azure_monitor/azure_monitor_datasource';
 import AppInsightsDatasource from './app_insights/app_insights_datasource';
 import AzureLogAnalyticsDatasource from './azure_log_analytics/azure_log_analytics_datasource';
-import { AzureMonitorQuery } from './types';
-import { DataSourceApi, DataQueryRequest } from '@grafana/ui/src/types';
+import { AzureMonitorQuery, AzureDataSourceJsonData } from './types';
+import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui/src/types';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
-export default class Datasource implements DataSourceApi<AzureMonitorQuery> {
+export default class Datasource implements DataSourceApi<AzureMonitorQuery, AzureDataSourceJsonData> {
   id: number;
   name: string;
   azureMonitorDatasource: AzureMonitorDatasource;
@@ -13,7 +15,12 @@ export default class Datasource implements DataSourceApi<AzureMonitorQuery> {
   azureLogAnalyticsDatasource: AzureLogAnalyticsDatasource;
 
   /** @ngInject */
-  constructor(instanceSettings, private backendSrv, private templateSrv, private $q) {
+  constructor(
+    instanceSettings: DataSourceInstanceSettings<AzureDataSourceJsonData>,
+    private backendSrv: BackendSrv,
+    private templateSrv: TemplateSrv,
+    private $q
+  ) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
     this.azureMonitorDatasource = new AzureMonitorDatasource(instanceSettings, this.backendSrv, this.templateSrv);

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

@@ -1,4 +1,4 @@
-import { DataQuery } from '@grafana/ui/src/types';
+import { DataQuery, DataSourceJsonData } from '@grafana/ui/src/types';
 
 export interface AzureMonitorQuery extends DataQuery {
   format: string;
@@ -8,6 +8,25 @@ export interface AzureMonitorQuery extends DataQuery {
   //   appInsights: any;
 }
 
+export interface AzureDataSourceJsonData extends DataSourceJsonData {
+  subscriptionId: string;
+  cloudName: string;
+
+  // monitor
+  tenantId?: string;
+  clientId?: string;
+
+  // logs
+  logAnalyticsSubscriptionId?: string;
+  logAnalyticsTenantId?: string;
+  logAnalyticsClientId?: string;
+  azureLogAnalyticsSameAs?: string;
+  logAnalyticsDefaultWorkspace?: string;
+
+  // App Insights
+  appInsightsAppId?: string;
+}
+
 export interface AzureMetricQuery {
   resourceGroup: string;
   resourceName: string;

public/app/plugins/datasource/input/InputDatasource.ts

@@ -8,7 +8,7 @@ import {
 } from '@grafana/ui/src/types';
 import { InputQuery, InputOptions } from './types';
 
-export class InputDatasource implements DataSourceApi<InputQuery> {
+export class InputDatasource implements DataSourceApi<InputQuery, InputOptions> {
   data: SeriesData[];
 
   // Filled in by grafana plugin system

public/app/plugins/datasource/input/module.ts

@@ -6,6 +6,6 @@ import { InputQueryEditor } from './InputQueryEditor';
 import { InputConfigEditor } from './InputConfigEditor';
 import { InputOptions, InputQuery } from './types';
 
-export const plugin = new DataSourcePlugin<InputOptions, InputQuery>(InputDatasource)
+export const plugin = new DataSourcePlugin<InputQuery, InputOptions>(InputDatasource)
   .setConfigEditor(InputConfigEditor)
   .setQueryEditor(InputQueryEditor);