Loki: change query row to be single field again

- tried split selector and search for a week, and it did not feel natural
- keeping some of the original modifications in QueryField from splitting PR
- adapted CheatSheet and placeholder text
- added new label selector state: No labels found

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

@@ -3,22 +3,22 @@ import React from 'react';
 const CHEAT_SHEET_ITEMS = [
   {
     title: 'See your logs',
-    label: 'Start by selecting a log stream from the Log Labels selector.',
+    label: 'Start by selecting a log stream from the Log labels selector.',
   },
   {
-    title: 'Logs From a Job',
+    title: 'Logs from a "job"',
     expression: '{job="default/prometheus"}',
     label: 'Returns all log lines emitted by instances of this job.',
   },
   {
-    title: 'Combine Stream Selectors',
+    title: 'Combine stream selectors',
     expression: '{app="cassandra",namespace="prod"}',
     label: 'Returns all log lines from streams that have both labels.',
   },
   {
-    title: 'Search For Text',
+    title: 'Search for text',
     expression: '{app="cassandra"} (duration|latency)\\s*(=|is|of)\\s*[\\d\\.]+',
-    label: 'The right search field takes a regular expression to search for.',
+    label: 'Add a regular expression after the selector to filter for.',
   },
 ];
 

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

@@ -12,14 +12,18 @@ 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';
 
-const SEARCH_FIELD_STYLES = {
-  width: '66%',
-  marginLeft: 3,
-};
+function getChooserText(hasSytax, hasLogLabels) {
+  if (!hasSytax) {
+    return 'Loading labels...';
+  }
+  if (!hasLogLabels) {
+    return '(No labels found)';
+  }
+  return 'Log labels';
+}
 
 export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string {
   // Modify suggestion based on context
@@ -145,35 +149,12 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
   };
 
   onChangeQuery = (value: string, override?: boolean) => {
-    const enableSearchField = !this.modifiedQuery && value;
-    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,
-      };
-      onQueryChange(query, override);
-    }
-    // Enable the search field if we have a selector query
-    if (enableSearchField) {
-      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,
+        expr: value,
       };
       onQueryChange(query, override);
     }
@@ -223,10 +204,8 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
     const { error, hint, initialQuery } = this.props;
     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;
+    const hasLogLabels = logLabelOptions && logLabelOptions.length > 0;
+    const chooserText = getChooserText(syntaxLoaded, hasLogLabels);
 
     return (
       <div className="prom-query-field">
@@ -241,11 +220,11 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
           <QueryField
             additionalPlugins={this.plugins}
             cleanText={cleanText}
-            initialQuery={parsedInitialQuery.query}
+            initialQuery={initialQuery.expr}
             onTypeahead={this.onTypeahead}
             onWillApplySuggestion={willApplySuggestion}
             onValueChanged={this.onChangeQuery}
-            placeholder="Start with a Loki stream selector"
+            placeholder="Enter a Loki query"
             portalOrigin="loki"
             syntaxLoaded={syntaxLoaded}
           />
@@ -261,16 +240,6 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
-        <div className="prom-query-field-wrapper" style={SEARCH_FIELD_STYLES}>
-          <QueryField
-            additionalPlugins={this.pluginsSearch}
-            disabled={searchDisabled}
-            initialQuery={parsedInitialQuery.regexp}
-            onValueChanged={this.onChangeSearch}
-            placeholder="Search by regular expression"
-            portalOrigin="loki"
-          />
-        </div>
       </div>
     );
   }