Skip to content

N
nexpie-grafana-theme
Commit 7b92c560 by Ryan McKinley Committed by Torkel Ödegaard
Options

DataSourcePlugins: more generics improvements (#16965) 

* more types for query editor

* generic datasources

* update

* change ComponentClass to ComponentType

* more types

* remove input
parent e1d408a6
Showing with 51 additions and 27 deletions
packages/grafana-ui/src/types/datasource.ts
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
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[];
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment