Logs: Move button to load logs volume to logs options header (#40578)

* Move button to load logs volume to logs options header

* Update snapshot

* Do not show load logs volume button when data source does not support it

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

@@ -84,7 +84,6 @@ const dummyProps: Props = {
   showNodeGraph: true,
   splitOpen: (() => {}) as any,
   logsVolumeData: undefined,
-  logsVolumeDataProvider: undefined,
   loadLogsVolumeData: () => {},
 };
 

public/app/features/explore/Explore.tsx

@@ -6,15 +6,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import memoizeOne from 'memoize-one';
 import { selectors } from '@grafana/e2e-selectors';
 import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui';
-import {
+import { AbsoluteTimeRange, DataFrame, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data';
-  AbsoluteTimeRange,
-  DataFrame,
-  DataQuery,
-  GrafanaTheme2,
-  hasLogsVolumeSupport,
-  LoadingState,
-  RawTimeRange,
-} from '@grafana/data';
 
 import LogsContainer from './LogsContainer';
 import { QueryRows } from './QueryRows';
@@ -302,8 +294,6 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
       showLogs,
       showTrace,
       showNodeGraph,
-      logsVolumeDataProvider,
-      loadLogsVolumeData,
     } = this.props;
     const { openDrawer } = this.state;
     const styles = getStyles(theme);
@@ -326,11 +316,9 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
                 addQueryRowButtonHidden={false}
                 richHistoryButtonActive={showRichHistory}
                 queryInspectorButtonActive={showQueryInspector}
-                loadingLogsVolumeAvailable={hasLogsVolumeSupport(datasourceInstance) && !!logsVolumeDataProvider}
                 onClickAddQueryRowButton={this.onClickAddQueryRowButton}
                 onClickRichHistoryButton={this.toggleShowRichHistory}
                 onClickQueryInspectorButton={this.toggleShowQueryInspector}
-                onClickLoadLogsVolume={() => loadLogsVolumeData(exploreId)}
               />
               <ResponseErrorContainer exploreId={exploreId} />
             </div>
@@ -392,7 +380,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     queryKeys,
     isLive,
     graphResult,
-    logsVolumeDataProvider,
     logsVolumeData,
     logsResult,
     showLogs,
@@ -411,7 +398,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     queryKeys,
     isLive,
     graphResult,
-    logsVolumeDataProvider,
     logsVolumeData,
     logsResult: logsResult ?? undefined,
     absoluteRange,

public/app/features/explore/Logs.tsx

@@ -69,6 +69,8 @@ interface Props extends Themeable2 {
   getFieldLinks: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
   addResultsToCache: () => void;
   clearCache: () => void;
+  loadingLogsVolumeAvailable: boolean;
+  onClickLoadLogsVolume: () => void;
 }
 
 interface State {
@@ -268,6 +270,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
       logsQueries,
       clearCache,
       addResultsToCache,
+      onClickLoadLogsVolume,
+      loadingLogsVolumeAvailable,
     } = this.props;
 
     const {
@@ -340,17 +344,31 @@ export class UnthemedLogs extends PureComponent<Props, State> {
               />
             </InlineField>
           </InlineFieldRow>
+          <div>
+            {loadingLogsVolumeAvailable && (
+              <Button
+                variant="secondary"
+                aria-label="Load volume button"
+                title="Execute a query to show full range logs volume"
+                onClick={onClickLoadLogsVolume}
+                icon="graph-bar"
+                className={styles.headerButton}
+              >
+                Load volume
+              </Button>
+            )}
             <Button
               variant="secondary"
               disabled={isFlipping}
               title={logsSortOrder === LogsSortOrder.Ascending ? 'Change to newest first' : 'Change to oldest first'}
               aria-label="Flip results order"
-            className={styles.flipButton}
+              className={styles.headerButton}
               onClick={this.onChangeLogsSortOrder}
             >
               {isFlipping ? 'Flipping...' : 'Flip results order'}
             </Button>
           </div>
+        </div>
         <LogsMetaRow
           logRows={logRows}
           meta={logsMeta || []}
@@ -441,7 +459,7 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
       margin: ${theme.spacing(2, 0, 1)};
       border: 1px solid ${theme.colors.border.medium};
     `,
-    flipButton: css`
+    headerButton: css`
       margin: ${theme.spacing(0.5, 0, 0, 1)};
     `,
     radioButtons: css`

public/app/features/explore/LogsContainer.tsx

@@ -6,6 +6,7 @@ import {
   AbsoluteTimeRange,
   Field,
   hasLogsContextSupport,
+  hasLogsVolumeSupport,
   LoadingState,
   LogRowModel,
   RawTimeRange,
@@ -13,7 +14,7 @@ import {
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 import { splitOpen } from './state/main';
-import { addResultsToCache, clearCache } from './state/query';
+import { addResultsToCache, clearCache, loadLogsVolumeData } from './state/query';
 import { updateTimeRange } from './state/time';
 import { getTimeZone } from '../profile/state/selectors';
 import { LiveLogsWithTheme } from './LiveLogs';
@@ -67,6 +68,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
 
   render() {
     const {
+      datasourceInstance,
       loading,
       loadingState,
       logRows,
@@ -87,6 +89,8 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
       exploreId,
       addResultsToCache,
       clearCache,
+      logsVolumeDataProvider,
+      loadLogsVolumeData,
     } = this.props;
 
     if (!logRows) {
@@ -146,6 +150,8 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
               getFieldLinks={this.getFieldLinks}
               addResultsToCache={() => addResultsToCache(exploreId)}
               clearCache={() => clearCache(exploreId)}
+              loadingLogsVolumeAvailable={hasLogsVolumeSupport(datasourceInstance) && !!logsVolumeDataProvider}
+              onClickLoadLogsVolume={() => loadLogsVolumeData(exploreId)}
             />
           </Collapse>
         </LogsCrossFadeTransition>
@@ -158,7 +164,18 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
   const explore = state.explore;
   // @ts-ignore
   const item: ExploreItemState = explore[exploreId];
-  const { logsResult, loading, scanning, datasourceInstance, isLive, isPaused, range, absoluteRange } = item;
+  const {
+    logsResult,
+    loading,
+    scanning,
+    datasourceInstance,
+    isLive,
+    isPaused,
+    range,
+    absoluteRange,
+    logsVolumeDataProvider,
+    logsVolumeData,
+  } = item;
   const timeZone = getTimeZone(state.user);
 
   return {
@@ -175,6 +192,8 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     isPaused,
     range,
     absoluteRange,
+    logsVolumeDataProvider,
+    logsVolumeData,
   };
 }
 
@@ -183,6 +202,7 @@ const mapDispatchToProps = {
   splitOpen,
   addResultsToCache,
   clearCache,
+  loadLogsVolumeData,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

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

@@ -6,7 +6,6 @@ import { SecondaryActions } from './SecondaryActions';
 const addQueryRowButtonSelector = '[aria-label="Add row button"]';
 const richHistoryButtonSelector = '[aria-label="Rich history button"]';
 const queryInspectorButtonSelector = '[aria-label="Query inspector button"]';
-const onClickLoadLogsVolumeSelector = '[aria-label="Load logs volume button"]';
 
 describe('SecondaryActions', () => {
   it('should render component two buttons', () => {
@@ -15,7 +14,6 @@ describe('SecondaryActions', () => {
         onClickAddQueryRowButton={noop}
         onClickRichHistoryButton={noop}
         onClickQueryInspectorButton={noop}
-        onClickLoadLogsVolume={noop}
       />
     );
     expect(wrapper.find(addQueryRowButtonSelector)).toHaveLength(1);
@@ -29,7 +27,6 @@ describe('SecondaryActions', () => {
         onClickAddQueryRowButton={noop}
         onClickRichHistoryButton={noop}
         onClickQueryInspectorButton={noop}
-        onClickLoadLogsVolume={noop}
       />
     );
     expect(wrapper.find(addQueryRowButtonSelector)).toHaveLength(0);
@@ -43,7 +40,6 @@ describe('SecondaryActions', () => {
         onClickAddQueryRowButton={noop}
         onClickRichHistoryButton={noop}
         onClickQueryInspectorButton={noop}
-        onClickLoadLogsVolume={noop}
       />
     );
     expect(wrapper.find(addQueryRowButtonSelector).props().disabled).toBe(true);
@@ -53,14 +49,11 @@ describe('SecondaryActions', () => {
     const onClickAddRow = jest.fn();
     const onClickHistory = jest.fn();
     const onClickQueryInspector = jest.fn();
-    const onClickLoadLogsVolumeInspector = jest.fn();
     const wrapper = shallow(
       <SecondaryActions
         onClickAddQueryRowButton={onClickAddRow}
         onClickRichHistoryButton={onClickHistory}
         onClickQueryInspectorButton={onClickQueryInspector}
-        loadingLogsVolumeAvailable={true}
-        onClickLoadLogsVolume={onClickLoadLogsVolumeInspector}
       />
     );
 
@@ -72,8 +65,5 @@ describe('SecondaryActions', () => {
 
     wrapper.find(queryInspectorButtonSelector).simulate('click');
     expect(onClickQueryInspector).toBeCalled();
-
-    wrapper.find(onClickLoadLogsVolumeSelector).simulate('click');
-    expect(onClickQueryInspector).toBeCalled();
   });
 });

public/app/features/explore/SecondaryActions.tsx

@@ -8,12 +8,10 @@ type Props = {
   addQueryRowButtonHidden?: boolean;
   richHistoryButtonActive?: boolean;
   queryInspectorButtonActive?: boolean;
-  loadingLogsVolumeAvailable?: boolean;
 
   onClickAddQueryRowButton: () => void;
   onClickRichHistoryButton: () => void;
   onClickQueryInspectorButton: () => void;
-  onClickLoadLogsVolume: () => void;
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
@@ -58,16 +56,6 @@ export function SecondaryActions(props: Props) {
         >
           Inspector
         </Button>
-        {props.loadingLogsVolumeAvailable && (
-          <Button
-            variant="secondary"
-            aria-label="Load logs volume button"
-            onClick={props.onClickLoadLogsVolume}
-            icon="graph-bar"
-          >
-            Load logs volume
-          </Button>
-        )}
       </HorizontalGroup>
     </div>
   );

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

@@ -20,9 +20,7 @@ exports[`Explore should render component 1`] = `
       <SecondaryActions
         addQueryRowButtonDisabled={false}
         addQueryRowButtonHidden={false}
-        loadingLogsVolumeAvailable={false}
         onClickAddQueryRowButton={[Function]}
-        onClickLoadLogsVolume={[Function]}
         onClickQueryInspectorButton={[Function]}
         onClickRichHistoryButton={[Function]}
         queryInspectorButtonActive={false}