DataSourcePlugins: more generics improvements (#16965)

* more types for query editor

* generic datasources

* update

* change ComponentClass to ComponentType

* more types

* remove input

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

@@ -1,4 +1,4 @@
-import { ComponentClass } from 'react';
+import { ComponentType, ComponentClass } from 'react';
 import { TimeRange } from './time';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 import { TableData, TimeSeries, SeriesData, LoadingState } from './data';
@@ -11,19 +11,20 @@ export interface DataSourcePluginOptionsEditorProps<TOptions> {
 }
 
 export class DataSourcePlugin<
+  DSType extends DataSourceApi<TQuery, TOptions>,
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
 > extends GrafanaPlugin<DataSourcePluginMeta> {
-  DataSourceClass: DataSourceConstructor<TQuery, TOptions>;
-  components: DataSourcePluginComponents<TQuery, TOptions>;
+  DataSourceClass: DataSourceConstructor<DSType, TQuery, TOptions>;
+  components: DataSourcePluginComponents<DSType, TQuery, TOptions>;
 
-  constructor(DataSourceClass: DataSourceConstructor<TQuery, TOptions>) {
+  constructor(DataSourceClass: DataSourceConstructor<DSType, TQuery, TOptions>) {
     super();
     this.DataSourceClass = DataSourceClass;
     this.components = {};
   }
 
-  setConfigEditor(editor: React.ComponentType<DataSourcePluginOptionsEditorProps<DataSourceSettings<TOptions>>>) {
+  setConfigEditor(editor: ComponentType<DataSourcePluginOptionsEditorProps<DataSourceSettings<TOptions>>>) {
     this.components.ConfigEditor = editor;
     return this;
   }
@@ -38,12 +39,12 @@ export class DataSourcePlugin<
     return this;
   }
 
-  setQueryEditor(QueryEditor: ComponentClass<QueryEditorProps<DataSourceApi, TQuery>>) {
+  setQueryEditor(QueryEditor: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
     this.components.QueryEditor = QueryEditor;
     return this;
   }
 
-  setExploreQueryField(ExploreQueryField: ComponentClass<ExploreQueryFieldProps<DataSourceApi, TQuery>>) {
+  setExploreQueryField(ExploreQueryField: ComponentClass<ExploreQueryFieldProps<DSType, TQuery, TOptions>>) {
     this.components.ExploreQueryField = ExploreQueryField;
     return this;
   }
@@ -91,23 +92,26 @@ interface PluginMetaQueryOptions {
 }
 
 export interface DataSourcePluginComponents<
+  DSType extends DataSourceApi<TQuery, TOptions>,
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
 > {
   QueryCtrl?: any;
   AnnotationsQueryCtrl?: any;
   VariableQueryEditor?: any;
-  QueryEditor?: ComponentClass<QueryEditorProps<DataSourceApi, TQuery>>;
-  ExploreQueryField?: ComponentClass<ExploreQueryFieldProps<DataSourceApi, TQuery>>;
+  QueryEditor?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
+  ExploreQueryField?: ComponentClass<ExploreQueryFieldProps<DSType, TQuery, TOptions>>;
   ExploreStartPage?: ComponentClass<ExploreStartPageProps>;
-  ConfigEditor?: React.ComponentType<DataSourcePluginOptionsEditorProps<DataSourceSettings<TOptions>>>;
+  ConfigEditor?: ComponentType<DataSourcePluginOptionsEditorProps<DataSourceSettings<TOptions>>>;
 }
 
+// Only exported for tests
 export interface DataSourceConstructor<
+  DSType extends DataSourceApi<TQuery, TOptions>,
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
 > {
-  new (instanceSettings: DataSourceInstanceSettings<TOptions>, ...args: any[]): DataSourceApi<TQuery, TOptions>;
+  new (instanceSettings: DataSourceInstanceSettings<TOptions>, ...args: any[]): DSType;
 }
 
 /**
@@ -166,7 +170,7 @@ export interface DataSourceApi<
    * 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<TQuery, TOptions>;
+  components?: DataSourcePluginComponents<DataSourceApi<TQuery, TOptions>, TQuery, TOptions>;
 
   /**
    * static information about the datasource
@@ -174,13 +178,20 @@ export interface DataSourceApi<
   meta?: DataSourcePluginMeta;
 }
 
-export interface ExploreDataSourceApi<TQuery extends DataQuery = DataQuery> extends DataSourceApi {
+export interface ExploreDataSourceApi<
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> extends DataSourceApi<TQuery, TOptions> {
   modifyQuery?(query: TQuery, action: QueryFixAction): TQuery;
   getHighlighterExpression?(query: TQuery): string;
   languageProvider?: any;
 }
 
-export interface QueryEditorProps<DSType extends DataSourceApi, TQuery extends DataQuery> {
+export interface QueryEditorProps<
+  DSType extends DataSourceApi<TQuery, TOptions>,
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> {
   datasource: DSType;
   query: TQuery;
   onRunQuery: () => void;
@@ -194,7 +205,11 @@ export enum DataSourceStatus {
   Disconnected,
 }
 
-export interface ExploreQueryFieldProps<DSType extends DataSourceApi, TQuery extends DataQuery> {
+export interface ExploreQueryFieldProps<
+  DSType extends DataSourceApi<TQuery, TOptions>,
+  TQuery extends DataQuery = DataQuery,
+  TOptions extends DataSourceJsonData = DataSourceJsonData
+> {
   datasource: DSType;
   datasourceStatus: DataSourceStatus;
   query: TQuery;

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 
 // Components
 import Page from 'app/core/components/Page/Page';
-import PluginSettings from './PluginSettings';
+import { PluginSettings, GenericDataSourcePlugin } from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
 
@@ -22,7 +22,7 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 
 // Types
 import { StoreState } from 'app/types/';
-import { NavModel, DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui';
+import { NavModel, DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
@@ -37,12 +37,12 @@ export interface Props {
   setDataSourceName: typeof setDataSourceName;
   updateDataSource: typeof updateDataSource;
   setIsDefault: typeof setIsDefault;
-  plugin?: DataSourcePlugin;
+  plugin?: GenericDataSourcePlugin;
 }
 
 interface State {
   dataSource: DataSourceSettings;
-  plugin: DataSourcePlugin;
+  plugin: GenericDataSourcePlugin;
   isTesting?: boolean;
   testingMessage?: string;
   testingStatus?: string;
@@ -60,7 +60,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
 
   async loadPlugin(pluginId?: string) {
     const { dataSourceMeta } = this.props;
-    let importedPlugin: DataSourcePlugin;
+    let importedPlugin: GenericDataSourcePlugin;
 
     try {
       importedPlugin = await importDataSourcePlugin(dataSourceMeta);

public/app/features/datasources/settings/PluginSettings.tsx

@@ -1,10 +1,19 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
-import { DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui';
+import {
+  DataSourceSettings,
+  DataSourcePlugin,
+  DataSourcePluginMeta,
+  DataSourceApi,
+  DataQuery,
+  DataSourceJsonData,
+} from '@grafana/ui';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
+export type GenericDataSourcePlugin = DataSourcePlugin<DataSourceApi<DataQuery, DataSourceJsonData>>;
+
 export interface Props {
-  plugin: DataSourcePlugin;
+  plugin: GenericDataSourcePlugin;
   dataSource: DataSourceSettings;
   dataSourceMeta: DataSourcePluginMeta;
   onModelChange: (dataSource: DataSourceSettings) => void;

public/app/plugins/datasource/input/InputQueryEditor.tsx

@@ -3,11 +3,11 @@ import React, { PureComponent } from 'react';
 
 // Types
 import { InputDatasource } from './InputDatasource';
-import { InputQuery } from './types';
+import { InputQuery, InputOptions } from './types';
 
 import { FormLabel, Select, QueryEditorProps, SelectOptionItem, SeriesData, TableInputCSV, toCSV } from '@grafana/ui';
 
-type Props = QueryEditorProps<InputDatasource, InputQuery>;
+type Props = QueryEditorProps<InputDatasource, InputQuery, InputOptions>;
 
 const options = [
   { value: 'panel', label: 'Panel', description: 'Save data in the panel configuration.' },

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<InputQuery, InputOptions>(InputDatasource)
+export const plugin = new DataSourcePlugin<InputDatasource, InputQuery, InputOptions>(InputDatasource)
   .setConfigEditor(InputConfigEditor)
   .setQueryEditor(InputQueryEditor);

public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

@@ -66,7 +66,7 @@ export interface CascaderOption {
   disabled?: boolean;
 }
 
-export interface LokiQueryFieldFormProps extends ExploreQueryFieldProps<ExploreDataSourceApi, LokiQuery> {
+export interface LokiQueryFieldFormProps extends ExploreQueryFieldProps<ExploreDataSourceApi<LokiQuery>, LokiQuery> {
   history: HistoryItem[];
   syntax: any;
   logLabelOptions: any[];

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -102,7 +102,7 @@ interface CascaderOption {
   disabled?: boolean;
 }
 
-interface PromQueryFieldProps extends ExploreQueryFieldProps<ExploreDataSourceApi, PromQuery> {
+interface PromQueryFieldProps extends ExploreQueryFieldProps<ExploreDataSourceApi<PromQuery>, PromQuery> {
   history: HistoryItem[];
 }