IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DataSourcePlugins: more generics improvements (#16965)

Browse Source 
* more types for query editor

* generic datasources

* update

* change ComponentClass to ComponentType

* more types

* remove input
This commit is contained in:
Ryan McKinley 2019-05-09 02:48:13 -07:00 committed by Torkel Ödegaard
parent e1d408a66f
commit 7b92c56055
7 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/grafana-ui/src/types/datasource.ts
View File

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

10
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
View File

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

13
public/app/features/datasources/settings/PluginSettings.tsx
View File

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

4
public/app/plugins/datasource/input/InputQueryEditor.tsx
View File

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

2
public/app/plugins/datasource/input/module.ts
View File

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

2
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
View File

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

2
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
View File

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