Explore: Remove not running query for collapsed elements (#27026)

* Make graph and table collapsing just a UI thing

* Remove showingGraph and showingTable, set them defaultly to true

* Remove collaapsing for panels in Explore

* UI toggle WiP

* WIP, add query type

* Refactor, clean up

* Update tests

* Clean uo

* Update rangeAll to range and instant

* Remove console logs

* Update packages/grafana-data/src/types/datasource.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/core/utils/explore.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Fix prettier error

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/features/explore/Explore.test.tsx

@@ -5,7 +5,6 @@ import { ExploreId } from 'app/types/explore';
 import { shallow } from 'enzyme';
 import { Explore, ExploreProps } from './Explore';
 import { scanStopAction } from './state/actionTypes';
-import { toggleGraph } from './state/actions';
 import { SecondaryActions } from './SecondaryActions';
 import { getTheme } from '@grafana/ui';
 
@@ -67,11 +66,8 @@ const dummyProps: ExploreProps = {
     from: 0,
     to: 0,
   },
-  showingGraph: false,
-  showingTable: false,
   timeZone: 'UTC',
   onHiddenSeriesChanged: jest.fn(),
-  toggleGraph: toggleGraph,
   queryResponse: {
     state: LoadingState.NotStarted,
     series: [],

public/app/features/explore/Explore.tsx

@@ -37,7 +37,6 @@ import {
   refreshExplore,
   scanStart,
   setQueries,
-  toggleGraph,
   updateTimeRange,
 } from './state/actions';
 
@@ -114,11 +113,8 @@ export interface ExploreProps {
   logsResult?: LogsModel;
   loading?: boolean;
   absoluteRange: AbsoluteTimeRange;
-  showingGraph?: boolean;
-  showingTable?: boolean;
   timeZone?: TimeZone;
   onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
-  toggleGraph: typeof toggleGraph;
   queryResponse: PanelData;
   originPanelId: number;
   addQueryRow: typeof addQueryRow;
@@ -269,11 +265,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     this.props.scanStopAction({ exploreId: this.props.exploreId });
   };
 
-  onToggleGraph = (showingGraph: boolean) => {
-    const { toggleGraph, exploreId } = this.props;
-    toggleGraph(exploreId, showingGraph);
-  };
-
   onUpdateTimeRange = (absoluteRange: AbsoluteTimeRange) => {
     const { exploreId, updateTimeRange } = this.props;
     updateTimeRange({ exploreId, absoluteRange });
@@ -321,8 +312,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       graphResult,
       loading,
       absoluteRange,
-      showingGraph,
-      showingTable,
       timeZone,
       queryResponse,
       syncedTimes,
@@ -396,10 +385,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                               absoluteRange={absoluteRange}
                               isStacked={false}
                               showPanel={true}
-                              showingGraph={showingGraph}
-                              showingTable={showingTable}
                               timeZone={timeZone}
-                              onToggleGraph={this.onToggleGraph}
                               onUpdateTimeRange={this.onUpdateTimeRange}
                               showBars={false}
                               showLines={true}
@@ -484,8 +470,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     showTable,
     showTrace,
     loading,
-    showingGraph,
-    showingTable,
     absoluteRange,
     queryResponse,
   } = item;
@@ -514,8 +498,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     graphResult: graphResult ?? undefined,
     logsResult: logsResult ?? undefined,
     loading,
-    showingGraph,
-    showingTable,
     absoluteRange,
     queryResponse,
     originPanelId,
@@ -537,7 +519,6 @@ const mapDispatchToProps: Partial<ExploreProps> = {
   scanStopAction,
   setQueries,
   updateTimeRange,
-  toggleGraph,
   addQueryRow,
 };
 

public/app/features/explore/ExploreGraphPanel.tsx

@@ -49,11 +49,8 @@ interface Props extends Themeable {
   showBars: boolean;
   showLines: boolean;
   isStacked: boolean;
-  showingGraph?: boolean;
-  showingTable?: boolean;
   timeZone?: TimeZone;
   onUpdateTimeRange: (absoluteRange: AbsoluteTimeRange) => void;
-  onToggleGraph?: (showingGraph: boolean) => void;
   onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
 }
 
@@ -74,13 +71,6 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
     });
   };
 
-  onClickGraphButton = () => {
-    const { onToggleGraph, showingGraph } = this.props;
-    if (onToggleGraph) {
-      onToggleGraph(showingGraph ?? false);
-    }
-  };
-
   onChangeTime = (from: number, to: number) => {
     const { onUpdateTimeRange } = this.props;
     onUpdateTimeRange({ from, to });
@@ -95,8 +85,6 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
       timeZone,
       absoluteRange,
       showPanel,
-      showingGraph,
-      showingTable,
       showBars,
       showLines,
       isStacked,
@@ -116,10 +104,9 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
       },
     };
 
-    const height = showPanel === false ? 100 : showingGraph && showingTable ? 200 : 400;
+    const height = showPanel ? 200 : 100;
     const lineWidth = showLines ? 1 : 5;
     const seriesToShow = showAllTimeSeries ? series : series.slice(0, MAX_NUMBER_OF_TIME_SERIES);
-
     return (
       <GraphSeriesToggler series={seriesToShow} onHiddenSeriesChanged={onHiddenSeriesChanged}>
         {({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => {
@@ -153,7 +140,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
   };
 
   render() {
-    const { series, showPanel, showingGraph, loading, theme } = this.props;
+    const { series, showPanel, loading, theme } = this.props;
     const { showAllTimeSeries } = this.state;
     const style = getStyles(theme);
 
@@ -171,13 +158,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
         )}
 
         {showPanel && (
-          <Collapse
-            label="Graph"
-            collapsible
-            isOpen={showingGraph}
-            loading={loading}
-            onToggle={this.onClickGraphButton}
-          >
+          <Collapse label="Graph" loading={loading} isOpen>
             {this.renderGraph()}
           </Collapse>
         )}

public/app/features/explore/Logs.tsx

@@ -266,8 +266,6 @@ export class Logs extends PureComponent<Props, State> {
             absoluteRange={visibleRange || absoluteRange}
             isStacked={true}
             showPanel={false}
-            showingGraph={true}
-            showingTable={true}
             timeZone={timeZone}
             showBars={true}
             showLines={false}

public/app/features/explore/LogsContainer.tsx

@@ -62,15 +62,7 @@ interface LogsContainerProps {
   splitOpen: typeof splitOpen;
 }
 
-interface LogsContainerState {
-  logsContainerOpen: boolean;
-}
-
-export class LogsContainer extends PureComponent<LogsContainerProps, LogsContainerState> {
-  state: LogsContainerState = {
-    logsContainerOpen: true,
-  };
-
+export class LogsContainer extends PureComponent<LogsContainerProps> {
   onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
     const { exploreId, updateTimeRange } = this.props;
     updateTimeRange({ exploreId, absoluteRange });
@@ -102,12 +94,6 @@ export class LogsContainer extends PureComponent<LogsContainerProps, LogsContain
     return getFieldLinksForExplore(field, rowIndex, this.props.splitOpen, this.props.range);
   };
 
-  onToggleCollapse = () => {
-    this.setState(state => ({
-      logsContainerOpen: !state.logsContainerOpen,
-    }));
-  };
-
   render() {
     const {
       loading,
@@ -130,8 +116,6 @@ export class LogsContainer extends PureComponent<LogsContainerProps, LogsContain
       exploreId,
     } = this.props;
 
-    const { logsContainerOpen } = this.state;
-
     return (
       <>
         <LogsCrossFadeTransition visible={isLive}>
@@ -151,13 +135,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps, LogsContain
           </Collapse>
         </LogsCrossFadeTransition>
         <LogsCrossFadeTransition visible={!isLive}>
-          <Collapse
-            label="Logs"
-            loading={loading}
-            isOpen={logsContainerOpen}
-            onToggle={this.onToggleCollapse}
-            collapsible
-          >
+          <Collapse label="Logs" loading={loading} isOpen>
             <Logs
               dedupStrategy={this.props.dedupStrategy || LogsDedupStrategy.none}
               logRows={logRows}

public/app/features/explore/TableContainer.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, shallow } from 'enzyme';
 import { TableContainer } from './TableContainer';
 import { DataFrame } from '@grafana/data';
-import { toggleTable } from './state/actions';
 import { ExploreId } from 'app/types/explore';
 
 describe('TableContainer', () => {
@@ -12,9 +11,7 @@ describe('TableContainer', () => {
       loading: false,
       width: 800,
       onCellFilterAdded: jest.fn(),
-      showingTable: true,
       tableResult: {} as DataFrame,
-      toggleTable: {} as typeof toggleTable,
       splitOpen: (() => {}) as any,
       range: {} as any,
     };
@@ -29,13 +26,11 @@ describe('TableContainer', () => {
       loading: false,
       width: 800,
       onCellFilterAdded: jest.fn(),
-      showingTable: true,
       tableResult: {
         name: 'TableResultName',
         fields: [],
         length: 0,
       } as DataFrame,
-      toggleTable: {} as typeof toggleTable,
       splitOpen: (() => {}) as any,
       range: {} as any,
     };

public/app/features/explore/TableContainer.tsx

@@ -5,7 +5,7 @@ import { DataFrame, TimeRange, ValueLinkConfig } from '@grafana/data';
 import { Collapse, Table } from '@grafana/ui';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
-import { splitOpen, toggleTable } from './state/actions';
+import { splitOpen } from './state/actions';
 import { config } from 'app/core/config';
 import { PANEL_BORDER } from 'app/core/constants';
 import { MetaInfoText } from './MetaInfoText';
@@ -18,18 +18,12 @@ interface TableContainerProps {
   loading: boolean;
   width: number;
   onCellFilterAdded?: (filter: FilterItem) => void;
-  showingTable: boolean;
   tableResult?: DataFrame;
-  toggleTable: typeof toggleTable;
   splitOpen: typeof splitOpen;
   range: TimeRange;
 }
 
 export class TableContainer extends PureComponent<TableContainerProps> {
-  onClickTableButton = () => {
-    this.props.toggleTable(this.props.exploreId, this.props.showingTable);
-  };
-
   getTableHeight() {
     const { tableResult } = this.props;
 
@@ -42,7 +36,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
   }
 
   render() {
-    const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props;
+    const { loading, onCellFilterAdded, tableResult, width, splitOpen, range, ariaLabel } = this.props;
 
     const height = this.getTableHeight();
     const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER;
@@ -60,7 +54,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
     }
 
     return (
-      <Collapse label="Table" loading={loading} collapsible isOpen={showingTable} onToggle={this.onClickTableButton}>
+      <Collapse label="Table" loading={loading} isOpen>
         {hasTableResult ? (
           <Table
             ariaLabel={ariaLabel}
@@ -81,13 +75,12 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
   const explore = state.explore;
   // @ts-ignore
   const item: ExploreItemState = explore[exploreId];
-  const { loading: loadingInState, showingTable, tableResult, range } = item;
+  const { loading: loadingInState, tableResult, range } = item;
   const loading = tableResult && tableResult.length > 0 ? false : loadingInState;
-  return { loading, showingTable, tableResult, range };
+  return { loading, tableResult, range };
 }
 
 const mapDispatchToProps = {
-  toggleTable,
   splitOpen,
 };
 

public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap

@@ -2,11 +2,9 @@
 
 exports[`TableContainer should render component 1`] = `
 <Collapse
-  collapsible={true}
   isOpen={true}
   label="Table"
   loading={false}
-  onToggle={[Function]}
 >
   <Memo(MetaInfoText)
     metaItems={

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

@@ -126,14 +126,6 @@ export interface SyncTimesPayload {
   syncedTimes: boolean;
 }
 
-export interface ToggleTablePayload {
-  exploreId: ExploreId;
-}
-
-export interface ToggleGraphPayload {
-  exploreId: ExploreId;
-}
-
 export interface UpdateUIStatePayload extends Partial<ExploreUIState> {
   exploreId: ExploreId;
 }
@@ -296,16 +288,6 @@ export const richHistoryUpdatedAction = createAction<any>('explore/richHistoryUp
  */
 export const updateUIStateAction = createAction<UpdateUIStatePayload>('explore/updateUIState');
 
-/**
- * Expand/collapse the table result viewer. When collapsed, table queries won't be run.
- */
-export const toggleTableAction = createAction<ToggleTablePayload>('explore/toggleTable');
-
-/**
- * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run.
- */
-export const toggleGraphAction = createAction<ToggleGraphPayload>('explore/toggleGraph');
-
 /**
  * Updates datasource instance before datasouce loading has started
  */

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

@@ -1,7 +1,7 @@
 // Libraries
 import { map, throttleTime } from 'rxjs/operators';
 import { identity } from 'rxjs';
-import { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit';
+import { PayloadAction } from '@reduxjs/toolkit';
 import { DataSourceSrv } from '@grafana/runtime';
 import { RefreshPicker } from '@grafana/ui';
 import {
@@ -77,10 +77,6 @@ import {
   splitCloseAction,
   splitOpenAction,
   syncTimesAction,
-  toggleGraphAction,
-  ToggleGraphPayload,
-  toggleTableAction,
-  ToggleTablePayload,
   updateDatasourceInstanceAction,
   updateUIStateAction,
   changeLoadingStateAction,
@@ -429,8 +425,6 @@ export const runQueries = (exploreId: ExploreId): ThunkResult<void> => {
       queryResponse,
       querySubscription,
       history,
-      showingGraph,
-      showingTable,
     } = exploreItemState;
 
     if (!hasNonEmptyQuery(queries)) {
@@ -461,8 +455,6 @@ export const runQueries = (exploreId: ExploreId): ThunkResult<void> => {
       // maxDataPoints: mode === ExploreMode.Logs && datasourceId === 'loki' ? undefined : containerWidth,
       maxDataPoints: containerWidth,
       liveStreaming: live,
-      showingGraph,
-      showingTable,
     };
 
     const datasourceName = exploreItemState.requestedDatasourceName;
@@ -577,9 +569,9 @@ export const stateSave = (): ThunkResult<void> => {
       queries: left.queries.map(clearQueryKeys),
       range: toRawTimeRange(left.range),
       ui: {
-        showingGraph: left.showingGraph,
+        showingGraph: true,
         showingLogs: true,
-        showingTable: left.showingTable,
+        showingTable: true,
         dedupStrategy: left.dedupStrategy,
       },
     };
@@ -590,9 +582,9 @@ export const stateSave = (): ThunkResult<void> => {
         queries: right.queries.map(clearQueryKeys),
         range: toRawTimeRange(right.range),
         ui: {
-          showingGraph: right.showingGraph,
+          showingGraph: true,
           showingLogs: true,
-          showingTable: right.showingTable,
+          showingTable: true,
           dedupStrategy: right.dedupStrategy,
         },
       };
@@ -753,46 +745,6 @@ export function syncTimes(exploreId: ExploreId): ThunkResult<void> {
   };
 }
 
-/**
- * Creates action to collapse graph/logs/table panel. When panel is collapsed,
- * queries won't be run
- */
-const togglePanelActionCreator = (
-  actionCreator: ActionCreatorWithPayload<ToggleGraphPayload> | ActionCreatorWithPayload<ToggleTablePayload>
-) => (exploreId: ExploreId, isPanelVisible: boolean): ThunkResult<void> => {
-  return dispatch => {
-    let uiFragmentStateUpdate: Partial<ExploreUIState>;
-    const shouldRunQueries = !isPanelVisible;
-
-    switch (actionCreator.type) {
-      case toggleGraphAction.type:
-        uiFragmentStateUpdate = { showingGraph: !isPanelVisible };
-        break;
-      case toggleTableAction.type:
-        uiFragmentStateUpdate = { showingTable: !isPanelVisible };
-        break;
-    }
-
-    dispatch(actionCreator({ exploreId }));
-    // The switch further up is exhaustive so uiFragmentStateUpdate should definitely be initialized
-    dispatch(updateExploreUIState(exploreId, uiFragmentStateUpdate!));
-
-    if (shouldRunQueries) {
-      dispatch(runQueries(exploreId));
-    }
-  };
-};
-
-/**
- * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run.
- */
-export const toggleGraph = togglePanelActionCreator(toggleGraphAction);
-
-/**
- * Expand/collapse the table result viewer. When collapsed, table queries won't be run.
- */
-export const toggleTable = togglePanelActionCreator(toggleTableAction);
-
 /**
  * Change logs deduplication strategy and update URL.
  */

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

@@ -6,7 +6,6 @@ import {
   LoadingState,
   LogsDedupStrategy,
   RawTimeRange,
-  toDataFrame,
   UrlQueryMap,
   ExploreUrlState,
 } from '@grafana/data';
@@ -28,8 +27,6 @@ import {
   scanStopAction,
   splitCloseAction,
   splitOpenAction,
-  toggleGraphAction,
-  toggleTableAction,
   updateDatasourceInstanceAction,
   addQueryRowAction,
   removeQueryRowAction,
@@ -160,41 +157,6 @@ describe('Explore item reducer', () => {
     });
   });
 
-  describe('toggling panels', () => {
-    describe('when toggleGraphAction is dispatched', () => {
-      it('then it should set correct state', () => {
-        reducerTester<ExploreItemState>()
-          .givenReducer(itemReducer, ({ graphResult: [] } as unknown) as ExploreItemState)
-          .whenActionIsDispatched(toggleGraphAction({ exploreId: ExploreId.left }))
-          .thenStateShouldEqual(({ showingGraph: true, graphResult: [] } as unknown) as ExploreItemState)
-          .whenActionIsDispatched(toggleGraphAction({ exploreId: ExploreId.left }))
-          .thenStateShouldEqual(({ showingGraph: false, graphResult: [] } as unknown) as ExploreItemState);
-      });
-    });
-
-    describe('when toggleTableAction is dispatched', () => {
-      it('then it should set correct state', () => {
-        const table = toDataFrame({
-          name: 'logs',
-          fields: [
-            {
-              name: 'time',
-              type: 'number',
-              values: [1, 2],
-            },
-          ],
-        });
-
-        reducerTester<ExploreItemState>()
-          .givenReducer(itemReducer, ({ tableResult: table } as unknown) as ExploreItemState)
-          .whenActionIsDispatched(toggleTableAction({ exploreId: ExploreId.left }))
-          .thenStateShouldEqual(({ showingTable: true, tableResult: table } as unknown) as ExploreItemState)
-          .whenActionIsDispatched(toggleTableAction({ exploreId: ExploreId.left }))
-          .thenStateShouldEqual(({ showingTable: false, tableResult: table } as unknown) as ExploreItemState);
-      });
-    });
-  });
-
   describe('changing range', () => {
     describe('when changeRangeAction is dispatched', () => {
       it('then it should set correct state', () => {

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

@@ -60,9 +60,7 @@ import {
   SplitCloseActionPayload,
   splitOpenAction,
   syncTimesAction,
-  toggleGraphAction,
   toggleLogLevelAction,
-  toggleTableAction,
   updateDatasourceInstanceAction,
   updateUIStateAction,
   cancelQueriesAction,
@@ -106,8 +104,6 @@ export const makeExploreItemState = (): ExploreItemState => ({
     to: null,
   } as any,
   scanning: false,
-  showingGraph: true,
-  showingTable: true,
   loading: false,
   queryKeys: [],
   urlState: null,
@@ -409,24 +405,6 @@ export const itemReducer = (state: ExploreItemState = makeExploreItemState(), ac
     return { ...state, ...action.payload };
   }
 
-  if (toggleGraphAction.match(action)) {
-    const showingGraph = !state.showingGraph;
-    if (showingGraph) {
-      return { ...state, showingGraph };
-    }
-
-    return { ...state, showingGraph };
-  }
-
-  if (toggleTableAction.match(action)) {
-    const showingTable = !state.showingTable;
-    if (showingTable) {
-      return { ...state, showingTable };
-    }
-
-    return { ...state, showingTable };
-  }
-
   if (queriesImportedAction.match(action)) {
     const { queries } = action.payload;
     return {