From 6b9200a606748bbb6391fbbf0a5c8e8847ac2226 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 9 Dec 2018 18:44:59 +0100
Subject: [PATCH 1/3] Explore: Split logging query into selector and search

- add second query field to logging datasource query component
- second field manages search term, first field manages stream selectors
- improved logging cheat sheet to get started
---
 public/app/features/explore/QueryField.tsx    | 11 ++++-
 .../loki/components/LokiCheatSheet.tsx        | 27 +++++++----
 .../loki/components/LokiQueryField.tsx        | 48 +++++++++++++++++--
 .../plugins/datasource/loki/query_utils.ts    |  1 +
 public/sass/components/_slate_editor.scss     |  6 ++-
 5 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/public/app/features/explore/QueryField.tsx b/public/app/features/explore/QueryField.tsx
index d5cba981951..24b8b8f5b16 100644
--- a/public/app/features/explore/QueryField.tsx
+++ b/public/app/features/explore/QueryField.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { Change, Value } from 'slate';
 import { Editor } from 'slate-react';
 import Plain from 'slate-plain-serializer';
+import classnames from 'classnames';
 
 import { CompletionItem, CompletionItemGroup, TypeaheadOutput } from 'app/types/explore';
 
@@ -30,6 +31,7 @@ function hasSuggestions(suggestions: CompletionItemGroup[]): boolean {
 export interface QueryFieldProps {
   additionalPlugins?: any[];
   cleanText?: (text: string) => string;
+  disabled?: boolean;
   initialQuery: string | null;
   onBlur?: () => void;
   onFocus?: () => void;
@@ -78,7 +80,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     this.placeholdersBuffer = new PlaceholdersBuffer(props.initialQuery || '');
 
     // Base plugins
-    this.plugins = [ClearPlugin(), NewlinePlugin(), ...props.additionalPlugins].filter(p => p);
+    this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p);
 
     this.state = {
       suggestions: [],
@@ -440,12 +442,17 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   };
 
   render() {
+    const { disabled } = this.props;
+    const wrapperClassName = classnames('slate-query-field__wrapper', {
+      'slate-query-field__wrapper--disabled': disabled,
+    });
     return (
-      <div className="slate-query-field-wrapper">
+      <div className={wrapperClassName}>
         <div className="slate-query-field">
           {this.renderMenu()}
           <Editor
             autoCorrect={false}
+            readOnly={this.props.disabled}
             onBlur={this.handleBlur}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
diff --git a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
index 01c6519916d..c3a85495a59 100644
--- a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
@@ -1,15 +1,24 @@
 import React from 'react';
 
 const CHEAT_SHEET_ITEMS = [
+  {
+    title: 'See your logs',
+    label: 'Start by selecting a log stream from the Log Labels selector.',
+  },
   {
     title: 'Logs From a Job',
     expression: '{job="default/prometheus"}',
     label: 'Returns all log lines emitted by instances of this job.',
   },
+  {
+    title: 'Combine Stream Selectors',
+    expression: '{app="cassandra",namespace="prod"}',
+    label: 'Returns all log lines from streams that have both labels.',
+  },
   {
     title: 'Search For Text',
-    expression: '{app="cassandra"} Maximum memory usage',
-    label: 'Returns all log lines for the selector and highlights the given text in the results.',
+    expression: '{app="cassandra"} (duration|latency)\\s*(=|is|of)\\s*[\\d\\.]+',
+    label: 'The right search field takes a regular expression to search for.',
   },
 ];
 
@@ -19,12 +28,14 @@ export default (props: any) => (
     {CHEAT_SHEET_ITEMS.map(item => (
       <div className="cheat-sheet-item" key={item.expression}>
         <div className="cheat-sheet-item__title">{item.title}</div>
-        <div
-          className="cheat-sheet-item__expression"
-          onClick={e => props.onClickExample({ refId: '1', expr: item.expression })}
-        >
-          <code>{item.expression}</code>
-        </div>
+        {item.expression && (
+          <div
+            className="cheat-sheet-item__expression"
+            onClick={e => props.onClickExample({ refId: '1', expr: item.expression })}
+          >
+            <code>{item.expression}</code>
+          </div>
+        )}
         <div className="cheat-sheet-item__label">{item.label}</div>
       </div>
     ))}
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index 005706bb8d1..137033bf6d7 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -12,6 +12,7 @@ import BracesPlugin from 'app/features/explore/slate-plugins/braces';
 import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
 import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField';
 import { DataQuery } from 'app/types';
+import { parseQuery, formatQuery } from '../query_utils';
 
 const PRISM_SYNTAX = 'promql';
 
@@ -67,7 +68,10 @@ interface LokiQueryFieldState {
 
 class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryFieldState> {
   plugins: any[];
+  pluginsSearch: any[];
   languageProvider: any;
+  modifiedSearch: string;
+  modifiedQuery: string;
 
   constructor(props: LokiQueryFieldProps, context) {
     super(props, context);
@@ -85,6 +89,8 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
       }),
     ];
 
+    this.pluginsSearch = [RunnerPlugin({ handler: props.onPressEnter })];
+
     this.state = {
       logLabelOptions: [],
       syntaxLoaded: false,
@@ -134,12 +140,35 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
   };
 
   onChangeQuery = (value: string, override?: boolean) => {
+    const firstModified = this.modifiedQuery === undefined;
+    this.modifiedQuery = value;
     // Send text change to parent
     const { initialQuery, onQueryChange } = this.props;
     if (onQueryChange) {
+      const search = this.modifiedSearch || parseQuery(initialQuery.expr).regexp;
+      const expr = formatQuery(value, search);
       const query = {
         ...initialQuery,
-        expr: value,
+        expr,
+      };
+      onQueryChange(query, override);
+    }
+    // Enable the search field if we have a selector query
+    if (firstModified) {
+      this.forceUpdate();
+    }
+  };
+
+  onChangeSearch = (value: string, override?: boolean) => {
+    this.modifiedSearch = value;
+    // Send text change to parent
+    const { initialQuery, onQueryChange } = this.props;
+    if (onQueryChange) {
+      const selector = this.modifiedQuery || parseQuery(initialQuery.expr).query;
+      const expr = formatQuery(selector, value);
+      const query = {
+        ...initialQuery,
+        expr,
       };
       onQueryChange(query, override);
     }
@@ -190,6 +219,9 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
     const { logLabelOptions, syntaxLoaded } = this.state;
     const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
     const chooserText = syntaxLoaded ? 'Log labels' : 'Loading labels...';
+    const parsedInitialQuery = parseQuery(initialQuery.expr);
+    // Disable search field to make clear that we need a selector query first
+    const searchDisabled = !parsedInitialQuery.query && !this.modifiedQuery;
 
     return (
       <div className="prom-query-field">
@@ -204,11 +236,11 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
           <QueryField
             additionalPlugins={this.plugins}
             cleanText={cleanText}
-            initialQuery={initialQuery.expr}
+            initialQuery={parsedInitialQuery.query}
             onTypeahead={this.onTypeahead}
             onWillApplySuggestion={willApplySuggestion}
             onValueChanged={this.onChangeQuery}
-            placeholder="Enter a Loki Log query"
+            placeholder="Start with a Loki stream selector"
             portalOrigin="loki"
             syntaxLoaded={syntaxLoaded}
           />
@@ -224,6 +256,16 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
+        <div className="prom-query-field-wrapper">
+          <QueryField
+            additionalPlugins={this.pluginsSearch}
+            disabled={searchDisabled}
+            initialQuery={parsedInitialQuery.regexp}
+            onValueChanged={this.onChangeSearch}
+            placeholder="Search by regular expression"
+            portalOrigin="loki"
+          />
+        </div>
       </div>
     );
   }
diff --git a/public/app/plugins/datasource/loki/query_utils.ts b/public/app/plugins/datasource/loki/query_utils.ts
index 795d1e2ceeb..4f246ea8e28 100644
--- a/public/app/plugins/datasource/loki/query_utils.ts
+++ b/public/app/plugins/datasource/loki/query_utils.ts
@@ -1,5 +1,6 @@
 const selectorRegexp = /(?:^|\s){[^{]*}/g;
 export function parseQuery(input: string) {
+  input = input || '';
   const match = input.match(selectorRegexp);
   let query = '';
   let regexp = input;
diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss
index 25b20f180ef..714b8c487c2 100644
--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@@ -5,7 +5,7 @@
   word-break: break-word;
 }
 
-.slate-query-field-wrapper {
+.slate-query-field__wrapper {
   position: relative;
   display: inline-block;
   padding: 6px 7px 4px;
@@ -20,6 +20,10 @@
   transition: all 0.3s;
 }
 
+.slate-query-field__wrapper--disabled {
+  background-color: inherit;
+}
+
 .slate-typeahead {
   .typeahead {
     position: absolute;

From 9293ff06cd9ac8a984a3184b7e0efa0f09ecd2b7 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 9 Dec 2018 18:53:03 +0100
Subject: [PATCH 2/3] Enable search also after editing

---
 .../app/plugins/datasource/loki/components/LokiQueryField.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index 137033bf6d7..b63cdc3cece 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -140,7 +140,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
   };
 
   onChangeQuery = (value: string, override?: boolean) => {
-    const firstModified = this.modifiedQuery === undefined;
+    const enableSearchField = !this.modifiedQuery && value;
     this.modifiedQuery = value;
     // Send text change to parent
     const { initialQuery, onQueryChange } = this.props;
@@ -154,7 +154,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
       onQueryChange(query, override);
     }
     // Enable the search field if we have a selector query
-    if (firstModified) {
+    if (enableSearchField) {
       this.forceUpdate();
     }
   };

From 117adbbe5d4b37eafa2d60a9680d5b9e6ca07668 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 9 Dec 2018 14:39:25 -0800
Subject: [PATCH 3/3] Fix search field styles

---
 .../plugins/datasource/loki/components/LokiQueryField.tsx  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index b63cdc3cece..f5d42a2e8cf 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -16,6 +16,11 @@ import { parseQuery, formatQuery } from '../query_utils';
 
 const PRISM_SYNTAX = 'promql';
 
+const SEARCH_FIELD_STYLES = {
+  width: '66%',
+  marginLeft: 3,
+};
+
 export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string {
   // Modify suggestion based on context
   switch (typeaheadContext) {
@@ -256,7 +261,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
-        <div className="prom-query-field-wrapper">
+        <div className="prom-query-field-wrapper" style={SEARCH_FIELD_STYLES}>
           <QueryField
             additionalPlugins={this.pluginsSearch}
             disabled={searchDisabled}