began work on react query editor props and integration

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

 import { TimeRange, RawTimeRange } from './time';
 import { TimeRange, RawTimeRange } from './time';
 import { TimeSeries } from './series';
 import { TimeSeries } from './series';
-import { PluginExports, PluginMeta } from './plugin';
+import { PluginMeta } from './plugin';
 
 
 export interface DataQueryResponse {
 export interface DataQueryResponse {
   data: TimeSeries[];
   data: TimeSeries[];
@@ -43,42 +43,6 @@ export interface QueryHint {
   fix?: QueryFix;
   fix?: QueryFix;
 }
 }
 
 
-export interface DataSourceApi {
-  name: string;
-  meta: PluginMeta;
-  pluginExports: PluginExports;
-
-  /**
-   *  min interval range
-   */
-  interval?: string;
-
-  /**
-   * Imports queries from a different datasource
-   */
-  importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise<DataQuery[]>;
-
-  /**
-   * Initializes a datasource after instantiation
-   */
-  init?: () => void;
-
-  /**
-   * Main metrics / data query action
-   */
-  query(options: DataQueryOptions): Promise<DataQueryResponse>;
-
-  /**
-   * Test & verify datasource settings & connection details
-   */
-  testDatasource(): Promise<any>;
-
-  /**
-   *  Get hints for query improvements
-   */
-  getQueryHints(query: DataQuery, results: any[], ...rest: any): QueryHint[];
-}
-
 export interface DataSourceSettings {
 export interface DataSourceSettings {
   id: number;
   id: number;
   orgId: number;
   orgId: number;

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

 import { ComponentClass } from 'react';
 import { ComponentClass } from 'react';
 import { PanelProps, PanelOptionsProps } from './panel';
 import { PanelProps, PanelOptionsProps } from './panel';
+import { DataQueryOptions, DataQuery, DataQueryResponse, QueryHint } from './datasource';
+
+export interface DataSourceApi {
+  name: string;
+  meta: PluginMeta;
+  pluginExports: PluginExports;
+
+  /**
+   *  min interval range
+   */
+  interval?: string;
+
+  /**
+   * Imports queries from a different datasource
+   */
+  importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise<DataQuery[]>;
+
+  /**
+   * Initializes a datasource after instantiation
+   */
+  init?: () => void;
+
+  /**
+   * Main metrics / data query action
+   */
+  query(options: DataQueryOptions): Promise<DataQueryResponse>;
+
+  /**
+   * Test & verify datasource settings & connection details
+   */
+  testDatasource(): Promise<any>;
+
+  /**
+   *  Get hints for query improvements
+   */
+  getQueryHints(query: DataQuery, results: any[], ...rest: any): QueryHint[];
+}
+
+export interface QueryEditorProps {
+  datasource: DataSourceApi;
+  query: DataQuery;
+  onExecuteQuery?: () => void;
+  onQueryChange?: (value: DataQuery) => void;
+}
 
 
 export interface PluginExports {
 export interface PluginExports {
   Datasource?: any;
   Datasource?: any;
   QueryCtrl?: any;
   QueryCtrl?: any;
-  QueryEditor?: any;
+  QueryEditor?: ComponentClass<QueryEditorProps>;
   ConfigCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
   AnnotationsQueryCtrl?: any;
   VariableQueryEditor?: any;
   VariableQueryEditor?: any;

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -103,7 +103,17 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     this.setState({ isCollapsed: !this.state.isCollapsed });
     this.setState({ isCollapsed: !this.state.isCollapsed });
   };
   };
 
 
+  onQueryChange = (query: DataQuery) => {
+    Object.assign(this.props.query, query);
+    this.onExecuteQuery();
+  };
+
+  onExecuteQuery = () => {
+    this.props.panel.refresh();
+  };
+
   renderPluginEditor() {
   renderPluginEditor() {
+    const { query } = this.props;
     const { datasource } = this.state;
     const { datasource } = this.state;
 
 
     if (datasource.pluginExports.QueryCtrl) {
     if (datasource.pluginExports.QueryCtrl) {
@@ -112,7 +122,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
 
     if (datasource.pluginExports.QueryEditor) {
     if (datasource.pluginExports.QueryEditor) {
       const QueryEditor = datasource.pluginExports.QueryEditor;
       const QueryEditor = datasource.pluginExports.QueryEditor;
-      return <QueryEditor />;
+      return (
+        <QueryEditor
+          query={query}
+          datasource={datasource}
+          onQueryChange={this.onQueryChange}
+          onExecuteQuery={this.onExecuteQuery}
+        />
+      );
     }
     }
 
 
     return <div>Data source plugin does not export any Query Editor component</div>;
     return <div>Data source plugin does not export any Query Editor component</div>;

public/app/plugins/datasource/testdata/QueryEditor.tsx

+// Libraries
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
+import _ from 'lodash';
 
 
-interface Props {
+// Services & Utils
+import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
+
+// Components
+import { FormLabel, Select, SelectOptionItem } from '@grafana/ui';
+
+// Types
+import { QueryEditorProps } from '@grafana/ui/src/types';
+
+interface Scenario {
+  id: string;
+  name: string;
+}
+
+interface State {
+  scenarioList: Scenario[];
+  current: Scenario | null;
 }
 }
 
 
-export class QueryEditor extends PureComponent<Props> {
+export class QueryEditor extends PureComponent<QueryEditorProps> {
+  backendSrv: BackendSrv = getBackendSrv();
+
+  state: State = {
+    scenarioList: [],
+    current: null,
+  };
+
+  async componentDidMount() {
+    const { query } = this.props;
+
+    query.scenarioId = query.scenarioId || 'random_walk';
+
+    const scenarioList = await this.backendSrv.get('/api/tsdb/testdata/scenarios');
+    const current = _.find(scenarioList, { id: query.scenarioId });
+
+    this.setState({ scenarioList: scenarioList, current: current });
+  }
+
+  onScenarioChange = (item: SelectOptionItem) => {
+    this.props.onQueryChange({
+      scenarioId: item.value,
+      ...this.props.query
+    });
+  }
+
   render() {
   render() {
+    const { query } = this.props;
+    const options = this.state.scenarioList.map(item => ({ label: item.name, value: item.id }));
+    const current = options.find(item => item.value === query.scenarioId);
+
     return (
     return (
-      <h2>Test data</h2>
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <FormLabel className="query-keyword" width={7}>
+            Scenario
+          </FormLabel>
+          <Select options={options} value={current} onChange={this.onScenarioChange} />
+        </div>
+      </div>
     );
     );
   }
   }
 }
 }

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

 import { TestDataDatasource } from './datasource';
 import { TestDataDatasource } from './datasource';
 import { TestDataQueryCtrl } from './query_ctrl';
 import { TestDataQueryCtrl } from './query_ctrl';
+// import { QueryEditor } from './QueryEditor';
 
 
 class TestDataAnnotationsQueryCtrl {
 class TestDataAnnotationsQueryCtrl {
   annotation: any;
   annotation: any;
@@ -10,7 +11,7 @@ class TestDataAnnotationsQueryCtrl {
 }
 }
 
 
 export {
 export {
-  TestDataDatasource,
+  // QueryEditor,
   TestDataDatasource as Datasource,
   TestDataDatasource as Datasource,
   TestDataQueryCtrl as QueryCtrl,
   TestDataQueryCtrl as QueryCtrl,
   TestDataAnnotationsQueryCtrl as AnnotationsQueryCtrl,
   TestDataAnnotationsQueryCtrl as AnnotationsQueryCtrl,