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/features/explore/Explore.tsx

@@ -36,16 +36,10 @@ import {
   TimeZone,
   AbsoluteTimeRange,
   LoadingState,
+  ExploreMode,
 } from '@grafana/data';
 
-import {
-  ExploreItemState,
-  ExploreUrlState,
-  ExploreId,
-  ExploreUpdateState,
-  ExploreUIState,
-  ExploreMode,
-} from 'app/types/explore';
+import { ExploreItemState, ExploreUrlState, ExploreId, ExploreUpdateState, ExploreUIState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 import {
   ensureQueries,

public/app/features/explore/ExploreToolbar.tsx

@@ -6,9 +6,9 @@ import memoizeOne from 'memoize-one';
 import classNames from 'classnames';
 import { css } from 'emotion';
 
-import { ExploreId, ExploreItemState, ExploreMode } from 'app/types/explore';
+import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { ToggleButtonGroup, ToggleButton, Tooltip, ButtonSelect, SetInterval } from '@grafana/ui';
-import { RawTimeRange, TimeZone, TimeRange, DataQuery } from '@grafana/data';
+import { RawTimeRange, TimeZone, TimeRange, DataQuery, ExploreMode } from '@grafana/data';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { StoreState } from 'app/types/store';
 import {

public/app/features/explore/QueryRow.tsx

@@ -20,9 +20,10 @@ import {
   TimeRange,
   AbsoluteTimeRange,
   LoadingState,
+  ExploreMode,
 } from '@grafana/data';
 
-import { ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore';
+import { ExploreItemState, ExploreId } from 'app/types/explore';
 import { Emitter } from 'app/core/utils/emitter';
 import { highlightLogsExpressionAction, removeQueryRowAction } from './state/actionTypes';
 
@@ -148,6 +149,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
               onChange={this.onChange}
               data={queryResponse}
               absoluteRange={absoluteRange}
+              exploreMode={mode}
             />
           ) : (
             <QueryEditor

public/app/features/explore/state/actionTypes.ts

@@ -13,8 +13,9 @@ import {
   PanelData,
   QueryFixAction,
   TimeRange,
+  ExploreMode,
 } from '@grafana/data';
-import { ExploreId, ExploreItemState, ExploreMode, ExploreUIState } from 'app/types/explore';
+import { ExploreId, ExploreItemState, ExploreUIState } from 'app/types/explore';
 
 export interface AddQueryRowPayload {
   exploreId: ExploreId;

public/app/features/explore/state/actions.test.ts

@@ -1,9 +1,9 @@
 import { PayloadAction } from '@reduxjs/toolkit';
-import { DataQuery, DefaultTimeZone, LogsDedupStrategy, RawTimeRange, toUtc } from '@grafana/data';
+import { DataQuery, DefaultTimeZone, LogsDedupStrategy, RawTimeRange, toUtc, ExploreMode } from '@grafana/data';
 
 import * as Actions from './actions';
 import { changeDatasource, loadDatasource, navigateToExplore, refreshExplore } from './actions';
-import { ExploreId, ExploreMode, ExploreUpdateState, ExploreUrlState } from 'app/types';
+import { ExploreId, ExploreUpdateState, ExploreUrlState } from 'app/types';
 import { thunkTester } from 'test/core/thunk/thunkTester';
 import {
   initializeExploreAction,

public/app/features/explore/state/actions.ts

@@ -16,6 +16,7 @@ import {
   QueryFixAction,
   RawTimeRange,
   TimeRange,
+  ExploreMode,
 } from '@grafana/data';
 // Services & Utils
 import store from 'app/core/store';
@@ -40,7 +41,7 @@ import {
 // Types
 import { ExploreItemState, ExploreUrlState, ThunkResult } from 'app/types';
 
-import { ExploreId, ExploreMode, ExploreUIState, QueryOptions } from 'app/types/explore';
+import { ExploreId, ExploreUIState, QueryOptions } from 'app/types/explore';
 import {
   addQueryRowAction,
   changeModeAction,

public/app/features/explore/state/reducers.test.ts

@@ -4,8 +4,9 @@ import {
   dateTime,
   LoadingState,
   LogsDedupStrategy,
-  RawTimeRange,
   toDataFrame,
+  ExploreMode,
+  RawTimeRange,
 } from '@grafana/data';
 
 import {
@@ -16,7 +17,7 @@ import {
   makeExploreItemState,
   makeInitialUpdateState,
 } from './reducers';
-import { ExploreId, ExploreItemState, ExploreMode, ExploreState, ExploreUrlState } from 'app/types/explore';
+import { ExploreId, ExploreItemState, ExploreState, ExploreUrlState } from 'app/types/explore';
 import { reducerTester } from 'test/core/redux/reducerTester';
 import {
   changeModeAction,

public/app/features/explore/state/reducers.ts

@@ -11,6 +11,7 @@ import {
   PanelEvents,
   TimeZone,
   toLegacyResponseData,
+  ExploreMode,
 } from '@grafana/data';
 import { RefreshPicker } from '@grafana/ui';
 import { LocationUpdate } from '@grafana/runtime';
@@ -25,7 +26,7 @@ import {
   sortLogsResult,
   stopQueryState,
 } from 'app/core/utils/explore';
-import { ExploreId, ExploreItemState, ExploreMode, ExploreState, ExploreUpdateState } from 'app/types/explore';
+import { ExploreId, ExploreItemState, ExploreState, ExploreUpdateState } from 'app/types/explore';
 import {
   addQueryRowAction,
   changeLoadingStateAction,

public/app/features/explore/utils/ResultProcessor.test.ts

@@ -14,9 +14,9 @@ jest.mock('@grafana/data/src/datetime/moment_wrapper', () => ({
 }));
 
 import { ResultProcessor } from './ResultProcessor';
-import { ExploreItemState, ExploreMode } from 'app/types/explore';
+import { ExploreItemState } from 'app/types/explore';
 import TableModel from 'app/core/table_model';
-import { TimeSeries, LogRowModel, toDataFrame, FieldType } from '@grafana/data';
+import { TimeSeries, LogRowModel, toDataFrame, FieldType, ExploreMode } from '@grafana/data';
 
 const testContext = (options: any = {}) => {
   const timeSeries = toDataFrame({

public/app/features/explore/utils/ResultProcessor.ts

@@ -6,8 +6,9 @@ import {
   TimeZone,
   toDataFrame,
   getDisplayProcessor,
+  ExploreMode,
 } from '@grafana/data';
-import { ExploreItemState, ExploreMode } from 'app/types/explore';
+import { ExploreItemState } from 'app/types/explore';
 import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
 import { sortLogsResult, refreshIntervalToSortOrder } from 'app/core/utils/explore';
 import { dataFrameToLogsModel } from 'app/core/logs_model';