Explore: Adds Loki explore query editor (#21497)

* Explore: updates grafana-data explore query field props with explore mode

* Explore: updates query row to pass down explore mode to query fields

* Explore: adds LokiExploreQueryEditor

* Explore: updates loki query field form to render children

* Explore: adds loki explore extra field component

* Explore: adds extra field element to loki query field form

* Explore: updates loki explore query editor to use extra field element

* Explore: moves ExploreMode to grafana-data

* Explore: updates query row limit string

* Explore: adds maxLines to DataQuery

* Explore: adds maxLines to loki datasource runRangeQueryWithFallback

* Explore: adds onChangeQueryLimit to LokiExploreQueryEditor

* Explore: updates loki explore query editor to render extra field only in logs mode

* Explore: fixes query limits for live and legacy queries

* Explore: fixes result processor max lines limit in get logs result

* Explore: fixes Loki datasource limit test

* Explore: removes unnecessary ExploreMode from Loki language provider

* Explore: fixes formatting

* Explore: updates grafana-data datasource types - replaces strings with explore mode enum

* Explore: updates loki explore query field props to take ReactNode

* Explore: updates the way we calculate loki query lines limit to fall back to 0 lines on negative or invalid input instead of datasource maxLines

* Explore: updates result processor get logs result method to avoid counting invalid/negative line limits

* Explore: updates loki result transformer to process only an appropriate slice of a result instead of an entire one

* Explore: adds a method for query limit preprocessing/mapping

* Explore: updates loki datasource run range query with fallback method to use options.maxDataPoints in dashboards

* Explore: removes unnecessary maxlineslimt from getLogsResult in resultProcessor

* Explore: moves line limit to metadata

* Explore: adds an ability to specify input type of extra field

* Explore: updates LokiExploreQueryEditor - adds an input type

* Explore: updates LokiExploreQueryEditor to run queries when maxLines is positive

* Explore: fixes failing import of ExploreMode

* Explore: fixes reducers test imports formatting

* Explore: updates Loki extra field with min value set to 0

* Explore: exports LokiExploreExtraFieldProps

* Explore: adds render test of LokiExploreQueryEditor

* Explore: adds LokiExploreQueryEditor snapshot

* Explore: updates LokiExploreQueryEditor onChangeQueryLimit method to prevent it from running when query input is empty - fixes cheatsheet display issue

* Explore: updates Loki editor snapshots

* Explore: fixes typo in test set name in LokiExploreQueryEditor

* Explore: adds a render test of LokiExploreExtraField

* Explore: fixes typo in LokiExploreQueryEditor

* Explore: updates LokiExploreQueryEditor snapshot due to timezone issues

* Explore: updates LokiExploreExtraField to export both functional component and a version using memo

* Explore: updates LokiExploreQueryEditor to export both functional component and memoized function

* Explore: updates LokiExploreQueryEditor - removes unnecessary react fragment

* Explore: updates LokiExploreQueryEditor snapshot

* Explore: adds LokiExploreQueryEditor tests for different explore mode cases

* Explore: fixes Loki datasource and result transformer

* Explore: updates LokiExploreQueryEditor snapshot

* Explore: updates LokiExploreQueryEditor tests and test setup

* Explore: updates LokiExploreQueryEditor - refactors component

* Explore: updates LokiExploreQueryEditor to use default import from LokiExploreExtraField

* Explore: updates LokiExploreQueryEditor snapshot

* Explore: fixes formatting

* Explore: updates LokiExploreQueryEditor max lines change

* Explore: updates LokiExploreQueryEditor tests checking ExtraFieldElement

* Explore: adds mock loki datasource to LokiExploreQueryEditor

* Explore: updates LokiExploreQueryEditor test mock - adds language provider

* Explore: updates LokiExploreQueryEditor snapshot

* Explore: updates Loki ResultTransformer to filter out rows on limit - logic to be moved into a component with new form styles

* Explore: updates LokiExploreQueryEditor tests

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

@@ -35,6 +35,7 @@ import {
   DataQueryRequest,
   DataQueryResponse,
   AnnotationQueryRequest,
+  ExploreMode,
   ScopedVars,
 } from '@grafana/data';
 
@@ -48,7 +49,6 @@ import {
   LokiRangeQueryRequest,
   LokiStreamResponse,
 } from './types';
-import { ExploreMode } from 'app/types';
 import { LegacyTarget, LiveStreams } from './live_streams';
 import LanguageProvider from './language_provider';
 
@@ -267,25 +267,45 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
     options: RangeQueryOptions,
     responseListLength = 1
   ): Observable<DataQueryResponse> => {
-    if (target.liveStreaming) {
-      return this.runLiveQuery(target, options);
+    // target.maxLines value already preprocessed
+    // available cases:
+    // 1) empty input -> mapped to NaN, falls back to dataSource.maxLines limit
+    // 2) input with at least 1 character and that is either incorrect (value in the input field is not a number) or negative
+    //    - mapped to 0, falls back to the limit of 0 lines
+    // 3) default case - correct input, mapped to the value from the input field
+
+    let linesLimit = 0;
+    if (target.maxLines === undefined) {
+      // no target.maxLines, using options.maxDataPoints
+      linesLimit = Math.min(options.maxDataPoints || Infinity, this.maxLines);
+    } else {
+      // using target.maxLines
+      if (isNaN(target.maxLines)) {
+        linesLimit = this.maxLines;
+      } else {
+        linesLimit = target.maxLines;
+      }
     }
 
-    const query = this.createRangeQuery(target, options);
+    const queryOptions = { ...options, maxDataPoints: linesLimit };
+    if (target.liveStreaming) {
+      return this.runLiveQuery(target, queryOptions);
+    }
+    const query = this.createRangeQuery(target, queryOptions);
     return this._request(RANGE_QUERY_ENDPOINT, query).pipe(
       catchError((err: any) => this.throwUnless(err, err.cancelled || err.status === 404, target)),
       filter((response: any) => (response.cancelled ? false : true)),
       switchMap((response: { data: LokiResponse; status: number }) =>
         iif<DataQueryResponse, DataQueryResponse>(
           () => response.status === 404,
-          defer(() => this.runLegacyQuery(target, options)),
+          defer(() => this.runLegacyQuery(target, queryOptions)),
           defer(() =>
             processRangeQueryResponse(
               response.data,
               target,
               query,
               responseListLength,
-              this.maxLines,
+              linesLimit,
               this.instanceSettings.jsonData,
               options.reverse
             )