initial commit

public/app/features/explore/Explore.tsx

@@ -20,7 +20,7 @@ import {
   getIntervals,
   generateKey,
   generateQueryKeys,
-  hasNonEmptyQuery,
+  // hasNonEmptyQuery,
   makeTimeSeriesList,
   updateHistory,
 } from 'app/core/utils/explore';
@@ -30,6 +30,7 @@ import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer'
 import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
 import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { getTimeSrv } from 'app/features/dashboard/time_srv';
 
 import Panel from './Panel';
 import QueryRows from './QueryRows';
@@ -132,6 +133,13 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       };
     }
     this.modifiedQueries = initialQueries.slice();
+    const timeSrv = getTimeSrv();
+    timeSrv.init({
+      time: { from: 'now-6h', to: 'now' },
+      refresh: false,
+      getTimezone: () => 'utc',
+      timeRangeUpdated: () => console.log('refreshDashboard!'),
+    });
   }
 
   async componentDidMount() {
@@ -691,9 +699,9 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
 
   async runQueries(resultType: ResultType, queryOptions: any, resultGetter?: any) {
     const queries = [...this.modifiedQueries];
-    if (!hasNonEmptyQuery(queries)) {
+    // if (!hasNonEmptyQuery(queries)) {
-      return;
+    //   return;
-    }
+    // }
     const { datasource } = this.state;
     const datasourceId = datasource.meta.id;
     // Run all queries concurrently

public/app/features/explore/QueryEditor.tsx

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import 'app/features/panel/metrics_wrapper';
+import { DataQuery } from 'app/types';
+
+interface QueryEditorProps {
+  datasource: any;
+  error?: string | JSX.Element;
+  onExecuteQuery?: () => void;
+  onQueryChange?: (value: DataQuery, override?: boolean) => void;
+}
+
+export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
+  element: any;
+  component: AngularComponent;
+
+  async componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const { datasource } = this.props;
+    const loader = getAngularLoader();
+    const template = '<metrics-wrapper />';
+    const target = { datasource: datasource.name };
+    // const changeableTarget = onChange(target, () => console.log(target));
+    // const changeable = onChange(target, () => console.log(target));
+    const scopeProps = {
+      target, //: changeable,
+      ctrl: {
+        refresh: () => {
+          this.props.onQueryChange({ refId: 'TEST', ...target }, false);
+          this.props.onExecuteQuery();
+        },
+        events: {
+          on: () => {},
+        },
+        panel: {
+          datasource,
+        },
+        dashboard: {
+          getNextQueryLetter: x => 'TEST',
+        },
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  render() {
+    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
+  }
+}

public/app/features/explore/QueryRows.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 
 import { QueryTransaction, HistoryItem, QueryHint } from 'app/types/explore';
 
-import DefaultQueryField from './QueryField';
+// import DefaultQueryField from './QueryField';
+import QueryEditor from './QueryEditor';
 import QueryTransactionStatus from './QueryTransactionStatus';
 import { DataSource, DataQuery } from 'app/types';
 
@@ -36,6 +37,11 @@ type QueryRowProps = QueryRowCommonProps &
   };
 
 class QueryRow extends PureComponent<QueryRowProps> {
+  onExecuteQuery = () => {
+    const { onExecuteQuery } = this.props;
+    onExecuteQuery();
+  };
+
   onChangeQuery = (value: DataQuery, override?: boolean) => {
     const { index, onChangeQuery } = this.props;
     if (onChangeQuery) {
@@ -80,13 +86,16 @@ class QueryRow extends PureComponent<QueryRowProps> {
     const transactionWithError = transactions.find(t => t.error !== undefined);
     const hint = getFirstHintFromTransactions(transactions);
     const queryError = transactionWithError ? transactionWithError.error : null;
-    const QueryField = datasource.pluginExports.ExploreQueryField || DefaultQueryField;
+    // const QueryField = datasource.pluginExports.ExploreQueryField || DefaultQueryField;
+    const QueryField = datasource.pluginExports.ExploreQueryField;
+    // const QueryEditor = datasource.pluginExports.QueryCtrl;
     return (
       <div className="query-row">
         <div className="query-row-status">
           <QueryTransactionStatus transactions={transactions} />
         </div>
         <div className="query-row-field">
+          {QueryField ? (
             <QueryField
               datasource={datasource}
               error={queryError}
@@ -97,6 +106,20 @@ class QueryRow extends PureComponent<QueryRowProps> {
               onPressEnter={this.onPressEnter}
               onQueryChange={this.onChangeQuery}
             />
+          ) : (
+            <QueryEditor
+              datasource={datasource}
+              error={queryError}
+              onQueryChange={this.onChangeQuery}
+              onExecuteQuery={this.onExecuteQuery}
+              // hint={hint}
+              // initialQuery={initialQuery}
+              // history={history}
+              // onClickHintFix={this.onClickHintFix}
+              // onPressEnter={this.onPressEnter}
+              // onQueryChange={this.onChangeQuery}
+            />
+          )}
         </div>
         <div className="query-row-tools">
           <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>

public/app/features/panel/metrics_wrapper.ts

@@ -0,0 +1,23 @@
+import coreModule from 'app/core/core_module';
+
+/** @ngInject */
+export function metricsWrapperDirective() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    template: `<plugin-component type="query-ctrl"> </plugin-component>`,
+    link: $scope => {
+      $scope.panelCtrl = $scope.ctrl;
+      $scope.ctrl = $scope.panelCtrl;
+      $scope.panel = $scope.panelCtrl.panel;
+      $scope.panel.datasource = $scope.panel.datasource || null;
+      $scope.panel.targets = $scope.panel.targets || [{}];
+      $scope.events = $scope.panelCtrl.events;
+      $scope.refresh = $scope.panelCtrl.refresh;
+      $scope.dashboard = $scope.panelCtrl.dashboard;
+    },
+  };
+}
+
+coreModule.directive('metricsWrapper', metricsWrapperDirective);

public/app/features/plugins/datasource_srv.ts

@@ -93,9 +93,8 @@ export class DatasourceSrv {
 
   getExploreSources() {
     const { datasources } = config;
-    const es = Object.keys(datasources)
+    const es = Object.keys(datasources).map(name => datasources[name]);
-      .map(name => datasources[name])
+    // .filter(ds => ds.meta && ds.meta.explore);
-      .filter(ds => ds.meta && ds.meta.explore);
     return _.sortBy(es, ['name']);
   }