Loki query editor is starting to work, had to make changes to explore query field in order to update query from the outside without unmount between

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

@@ -3,7 +3,7 @@ import { TimeSeries } from './series';
 import { PluginMeta } from './plugin';
 
 export interface DataQueryResponse {
-  data: TimeSeries[];
+  data: TimeSeries[] | any;
 }
 
 export interface DataQuery {

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

@@ -44,8 +44,8 @@ export interface DataSourceApi<TQuery extends DataQuery = DataQuery> {
 export interface QueryEditorProps<DSType extends DataSourceApi, TQuery extends DataQuery> {
   datasource: DSType;
   query: TQuery;
-  onExecuteQuery?: () => void;
+  onRunQuery: () => void;
-  onQueryChange?: (value: TQuery) => void;
+  onChange: (value: TQuery) => void;
 }
 
 export interface PluginExports {

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

@@ -107,10 +107,9 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   onQueryChange = (query: DataQuery) => {
     Object.assign(this.props.query, query);
-    this.onExecuteQuery();
   };
 
-  onExecuteQuery = () => {
+  onRunQuery = () => {
     this.props.panel.refresh();
   };
 
@@ -128,8 +127,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
         <QueryEditor
           query={query}
           datasource={datasource}
-          onQueryChange={this.onQueryChange}
+          onChange={this.onQueryChange}
-          onExecuteQuery={this.onExecuteQuery}
+          onRunQuery={this.onRunQuery}
         />
       );
     }

public/app/features/explore/QueryField.tsx

@@ -101,11 +101,20 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   }
 
   componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState) {
+    const { initialQuery, syntax } = this.props;
+    const { value, suggestions } = this.state;
+
+    // if query changed from the outside
+    if (initialQuery !== prevProps.initialQuery) {
+      // and we have a version that differs
+      if (initialQuery !== Plain.serialize(value)) {
+        this.placeholdersBuffer = new PlaceholdersBuffer(initialQuery || '');
+        this.setState({ value: makeValue(this.placeholdersBuffer.toString(), syntax) });
+      }
+    }
+
     // Only update menu location when suggestion existence or text/selection changed
-    if (
+    if (value !== prevState.value || hasSuggestions(suggestions) !== hasSuggestions(prevState.suggestions)) {
-      this.state.value !== prevState.value ||
-      hasSuggestions(this.state.suggestions) !== hasSuggestions(prevState.suggestions)
-    ) {
       this.updateMenu();
     }
   }

public/app/features/explore/QueryRow.tsx

@@ -65,6 +65,10 @@ export class QueryRow extends PureComponent<QueryRowProps> {
     }
   };
 
+  componentWillUnmount() {
+    console.log('QueryRow will unmount');
+  }
+
   onClickAddButton = () => {
     const { exploreId, index } = this.props;
     this.props.addQueryRow(exploreId, index);

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

@@ -0,0 +1,47 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Types
+import { QueryEditorProps } from '@grafana/ui/src/types';
+import { LokiDatasource } from '../datasource';
+import { LokiQuery } from '../types';
+import { LokiQueryField } from './LokiQueryField';
+
+type Props = QueryEditorProps<LokiDatasource, LokiQuery>;
+
+interface State {
+  query: LokiQuery;
+}
+
+export class LokiQueryEditor extends PureComponent<Props> {
+
+  state: State = {
+    query: this.props.query
+  };
+
+  onRunQuery = () => {
+    const { query  } = this.state;
+
+    this.props.onChange(query);
+    this.props.onRunQuery();
+  };
+
+  onFieldChange = (query: LokiQuery, override?) => {
+    this.setState({
+      query:  query
+    });
+  };
+
+  render() {
+    const { query  } = this.state;
+    const { datasource } = this.props;
+
+    return (
+      <div>
+        <LokiQueryField datasource={datasource} initialQuery={query} onQueryChange={this.onFieldChange} onPressEnter={this.onRunQuery} />
+      </div>
+    );
+  }
+}
+
+export default LokiQueryEditor;

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

@@ -12,6 +12,7 @@ import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explor
 import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/dom';
 import BracesPlugin from 'app/features/explore/slate-plugins/braces';
 import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
+import LokiDatasource from '../datasource';
 
 // Types
 import { LokiQuery } from '../types';
@@ -64,7 +65,7 @@ interface CascaderOption {
 }
 
 interface LokiQueryFieldProps {
-  datasource: any;
+  datasource: LokiDatasource;
   error?: string | JSX.Element;
   hint?: any;
   history?: any[];
@@ -79,7 +80,7 @@ interface LokiQueryFieldState {
   syntaxLoaded: boolean;
 }
 
-class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryFieldState> {
+export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryFieldState> {
   plugins: any[];
   pluginsSearch: any[];
   languageProvider: any;

public/app/plugins/datasource/loki/datasource.ts

@@ -32,7 +32,7 @@ function serializeParams(data: any) {
     .join('&');
 }
 
-export default class LokiDatasource {
+export class LokiDatasource {
   languageProvider: LanguageProvider;
   maxLines: number;
 
@@ -173,3 +173,5 @@ export default class LokiDatasource {
       });
   }
 }
+
+export default LokiDatasource;

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

@@ -2,6 +2,7 @@ import Datasource from './datasource';
 
 import LokiStartPage from './components/LokiStartPage';
 import LokiQueryField from './components/LokiQueryField';
+import LokiQueryEditor from './components/LokiQueryEditor';
 
 export class LokiConfigCtrl {
   static templateUrl = 'partials/config.html';
@@ -9,6 +10,7 @@ export class LokiConfigCtrl {
 
 export {
   Datasource,
+  LokiQueryEditor as QueryEditor,
   LokiConfigCtrl as ConfigCtrl,
   LokiQueryField as ExploreQueryField,
   LokiStartPage as ExploreStartPage,

public/app/plugins/datasource/loki/plugin.json

@@ -2,12 +2,14 @@
   "type": "datasource",
   "name": "Loki",
   "id": "loki",
-  "metrics": false,
+
+  "metrics": true,
   "alerting": false,
   "annotations": false,
   "logs": true,
   "explore": true,
   "tables": false,
+
   "info": {
     "description": "Loki Logging Data Source for Grafana",
     "author": {

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

@@ -41,9 +41,9 @@ export class QueryEditor extends PureComponent<Props> {
   }
 
   onScenarioChange = (item: SelectOptionItem) => {
-    this.props.onQueryChange({
+    this.props.onChange({
+      ...this.props.query,
       scenarioId: item.value,
-      ...this.props.query
     });
   }
 

public/sass/pages/_explore.scss

@@ -239,22 +239,20 @@
 
 // Prometheus-specifics, to be extracted to datasource soon
 
-.explore {
+.prom-query-field {
-  .prom-query-field {
+  display: flex;
-    display: flex;
+}
-  }
 
-  .prom-query-field-wrapper {
+.prom-query-field-wrapper {
-    width: 100%;
+  width: 100%;
-  }
+}
 
-  .prom-query-field-info {
+.prom-query-field-info {
-    margin: 0.25em 0.5em 0.5em;
+  margin: 0.25em 0.5em 0.5em;
-    display: flex;
+  display: flex;
 
-    details {
+  details {
-      margin-left: 1em;
+    margin-left: 1em;
-    }
   }
 }