Minor progress on react query editor support, solving updating query persisted state

public/app/core/components/Select/MetricSelect.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { Select } from '@grafana/ui';
-import { SelectOptionItem } from '@grafana/ui';
+import { Select, SelectOptionItem } from '@grafana/ui';
 import { Variable } from 'app/types/templates';
 
 export interface Props {

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

@@ -165,6 +165,11 @@ export class QueriesTab extends PureComponent<Props, State> {
     this.setState({ isAddingMixed: false });
   };
 
+  onQueryChange = (query: DataQuery, index) => {
+    this.props.panel.changeQuery(query, index);
+    this.forceUpdate();
+  };
+
   setScrollTop = (event: React.MouseEvent<HTMLElement>) => {
     const target = event.target as HTMLElement;
     this.setState({ scrollTop: target.scrollTop });
@@ -201,6 +206,7 @@ export class QueriesTab extends PureComponent<Props, State> {
                 key={query.refId}
                 panel={panel}
                 query={query}
+                onChange={query => this.onQueryChange(query, index)}
                 onRemoveQuery={this.onRemoveQuery}
                 onAddQuery={this.onAddQuery}
                 onMoveQuery={this.onMoveQuery}

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

@@ -18,6 +18,7 @@ interface Props {
   onAddQuery: (query?: DataQuery) => void;
   onRemoveQuery: (query: DataQuery) => void;
   onMoveQuery: (query: DataQuery, direction: number) => void;
+  onChange: (query: DataQuery) => void;
   dataSourceValue: string | null;
   inMixedMode: boolean;
 }
@@ -105,16 +106,12 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     this.setState({ isCollapsed: !this.state.isCollapsed });
   };
 
-  onQueryChange = (query: DataQuery) => {
-    Object.assign(this.props.query, query);
-  };
-
   onRunQuery = () => {
     this.props.panel.refresh();
   };
 
   renderPluginEditor() {
-    const { query } = this.props;
+    const { query, onChange } = this.props;
     const { datasource } = this.state;
 
     if (datasource.pluginExports.QueryCtrl) {
@@ -127,7 +124,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
         <QueryEditor
           query={query}
           datasource={datasource}
-          onChange={this.onQueryChange}
+          onChange={onChange}
           onRunQuery={this.onRunQuery}
         />
       );
@@ -165,7 +162,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   onDisableQuery = () => {
     this.props.query.hide = !this.props.query.hide;
-    this.onExecuteQuery();
+    this.onRunQuery();
     this.forceUpdate();
   };
 

public/app/features/dashboard/panel_model.ts

@@ -268,6 +268,19 @@ export class PanelModel {
     });
   }
 
+  changeQuery(query: DataQuery, index: number) {
+    // ensure refId is maintained
+    query.refId = this.targets[index].refId;
+
+    // update query in array
+    this.targets = this.targets.map((item, itemIndex) => {
+      if (itemIndex === index) {
+        return query;
+      }
+      return item;
+    });
+  }
+
   destroy() {
     this.events.emit('panel-teardown');
     this.events.removeAllListeners();

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

@@ -1,6 +1,9 @@
 // Libraries
 import React, { PureComponent } from 'react';
 
+// Components
+import { Select, SelectOptionItem } from '@grafana/ui';
+
 // Types
 import { QueryEditorProps } from '@grafana/ui/src/types';
 import { LokiDatasource } from '../datasource';
@@ -14,13 +17,12 @@ interface State {
 }
 
 export class LokiQueryEditor extends PureComponent<Props> {
-
   state: State = {
-    query: this.props.query
+    query: this.props.query,
   };
 
   onRunQuery = () => {
-    const { query  } = this.state;
+    const { query } = this.state;
 
     this.props.onChange(query);
     this.props.onRunQuery();
@@ -28,17 +30,44 @@ export class LokiQueryEditor extends PureComponent<Props> {
 
   onFieldChange = (query: LokiQuery, override?) => {
     this.setState({
-      query:  query
+      query: {
+        ...this.state.query,
+        expr: query.expr,
+      }
+    });
+  };
+
+  onFormatChanged = (option: SelectOptionItem) => {
+    this.props.onChange({
+      ...this.state.query,
+      resultFormat: option.value,
     });
   };
 
   render() {
-    const { query  } = this.state;
+    const { query } = this.state;
     const { datasource } = this.props;
+    const formatOptions: SelectOptionItem[] = [
+      { label: 'Time Series', value: 'time_series' },
+      { label: 'Table', value: 'table' },
+      { label: 'Logs', value: 'logs' },
+    ];
+
+    query.resultFormat = query.resultFormat || 'time_series';
+    const currentFormat = formatOptions.find(item => item.value === query.resultFormat);
 
     return (
       <div>
-        <LokiQueryField datasource={datasource} initialQuery={query} onQueryChange={this.onFieldChange} onPressEnter={this.onRunQuery} />
+        <LokiQueryField
+          datasource={datasource}
+          initialQuery={query}
+          onQueryChange={this.onFieldChange}
+          onPressEnter={this.onRunQuery}
+        />
+        <div className="gf-form">
+          <div className="gf-form-label">Format as</div>
+          <Select isSearchable={false} options={formatOptions} onChange={this.onFormatChanged} value={currentFormat} />
+        </div>
       </div>
     );
   }

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

@@ -2,5 +2,8 @@ import { DataQuery } from '@grafana/ui/src/types';
 
 export interface LokiQuery extends DataQuery {
   expr: string;
+  resultFormat?: LokiQueryResultFormats;
 }
 
+export type LokiQueryResultFormats = 'time_series' | 'logs';
+