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
2025-02-25 18:55:37 -06:00 · 2021-10-20 13:58:04 +02:00 · 2021-10-20 13:58:04 +02:00 · bd97c79454
commit bd97c79454
parent 1e471a6f76
7 changed files with 52 additions and 53 deletions
--- a/public/app/features/explore/Explore.test.tsx
+++ b/public/app/features/explore/Explore.test.tsx
@ -84,7 +84,6 @@ const dummyProps: Props = {
  showNodeGraph: true,
  splitOpen: (() => {}) as any,
  logsVolumeData: undefined,
-  logsVolumeDataProvider: undefined,
  loadLogsVolumeData: () => {},
 };

--- a/public/app/features/explore/Explore.tsx
+++ b/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 {
-  AbsoluteTimeRange,
-  DataFrame,
-  DataQuery,
-  GrafanaTheme2,
-  hasLogsVolumeSupport,
-  LoadingState,
-  RawTimeRange,
-} from '@grafana/data';
+import { AbsoluteTimeRange, DataFrame, DataQuery, GrafanaTheme2, 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,
--- a/public/app/features/explore/Logs.tsx
+++ b/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,16 +344,30 @@ export class UnthemedLogs extends PureComponent<Props, State> {
              />
            </InlineField>
          </InlineFieldRow>
-          <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}
-            onClick={this.onChangeLogsSortOrder}
-          >
-            {isFlipping ? 'Flipping...' : 'Flip results order'}
-          </Button>
+          <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.headerButton}
+              onClick={this.onChangeLogsSortOrder}
+            >
+              {isFlipping ? 'Flipping...' : 'Flip results order'}
+            </Button>
+          </div>
        </div>
        <LogsMetaRow
          logRows={logRows}
@ -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`
--- a/public/app/features/explore/LogsContainer.tsx
+++ b/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);
--- a/public/app/features/explore/SecondaryActions.test.tsx
+++ b/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();
  });
 });
--- a/public/app/features/explore/SecondaryActions.tsx
+++ b/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>
  );
--- a/public/app/features/explore/snapshots/Explore.test.tsx.snap
+++ b/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}