Explore: Allow pausing and resuming of live tailing (#18836)

Adding pause/resume buttons and pause on scroll to prevent new rows messing with the scroll position.

public/app/features/explore/LogsContainer.tsx

@@ -18,7 +18,11 @@ import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 
 import { changeDedupStrategy, updateTimeRange } from './state/actions';
-import { toggleLogLevelAction, changeRefreshIntervalAction } from 'app/features/explore/state/actionTypes';
+import {
+  toggleLogLevelAction,
+  changeRefreshIntervalAction,
+  setPausedStateAction,
+} from 'app/features/explore/state/actionTypes';
 import { deduplicatedLogsSelector, exploreItemUIStateSelector } from 'app/features/explore/state/selectors';
 import { getTimeZone } from '../profile/state/selectors';
 import { LiveLogsWithTheme } from './LiveLogs';
@@ -48,6 +52,8 @@ interface LogsContainerProps {
   updateTimeRange: typeof updateTimeRange;
   range: TimeRange;
   absoluteRange: AbsoluteTimeRange;
+  setPausedStateAction: typeof setPausedStateAction;
+  isPaused: boolean;
 }
 
 export class LogsContainer extends PureComponent<LogsContainerProps> {
@@ -62,6 +68,16 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
     this.props.stopLive({ exploreId, refreshInterval: offOption.value });
   };
 
+  onPause = () => {
+    const { exploreId } = this.props;
+    this.props.setPausedStateAction({ exploreId, isPaused: true });
+  };
+
+  onResume = () => {
+    const { exploreId } = this.props;
+    this.props.setPausedStateAction({ exploreId, isPaused: false });
+  };
+
   handleDedupStrategyChange = (dedupStrategy: LogsDedupStrategy) => {
     this.props.changeDedupStrategy(this.props.exploreId, dedupStrategy);
   };
@@ -104,7 +120,14 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
     if (isLive) {
       return (
         <Collapse label="Logs" loading={false} isOpen>
-          <LiveLogsWithTheme logsResult={logsResult} timeZone={timeZone} stopLive={this.onStopLive} />
+          <LiveLogsWithTheme
+            logsResult={logsResult}
+            timeZone={timeZone}
+            stopLive={this.onStopLive}
+            isPaused={this.props.isPaused}
+            onPause={this.onPause}
+            onResume={this.onResume}
+          />
         </Collapse>
       );
     }
@@ -146,6 +169,7 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     scanning,
     datasourceInstance,
     isLive,
+    isPaused,
     range,
     absoluteRange,
   } = item;
@@ -163,6 +187,7 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     dedupedResult,
     datasourceInstance,
     isLive,
+    isPaused,
     range,
     absoluteRange,
   };
@@ -173,6 +198,7 @@ const mapDispatchToProps = {
   toggleLogLevelAction,
   stopLive: changeRefreshIntervalAction,
   updateTimeRange,
+  setPausedStateAction,
 };
 
 export default hot(module)(