Explore: Add throttling when doing live queries (#19085)

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

@@ -1,5 +1,6 @@
 // Libraries
-import { map } from 'rxjs/operators';
+import { map, throttleTime } from 'rxjs/operators';
+import { identity } from 'rxjs';
 // Services & Utils
 import store from 'app/core/store';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -481,9 +482,11 @@ export function runQueries(exploreId: ExploreId): ThunkResult<void> {
 
     const newQuerySub = runRequest(datasourceInstance, transaction.request)
       .pipe(
-        map((data: PanelData) => {
-          return preProcessPanelData(data, queryResponse);
-        })
+        map((data: PanelData) => preProcessPanelData(data, queryResponse)),
+        // Simple throttle for live tailing, in case of > 1000 rows per interval we spend about 200ms on processing and
+        // rendering. In case this is optimized this can be tweaked, but also it should be only as fast as user
+        // actually can see what is happening.
+        live ? throttleTime(500) : identity
       )
       .subscribe((data: PanelData) => {
         if (!data.error && firstResponse) {