diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index 4e1d3b6658b..173b4fba7fd 100644 --- 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: () => {}, }; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 8270e44b0b6..72bbb6d628a 100644 --- 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 { 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 { addQueryRowButtonHidden={false} richHistoryButtonActive={showRichHistory} queryInspectorButtonActive={showQueryInspector} - loadingLogsVolumeAvailable={hasLogsVolumeSupport(datasourceInstance) && !!logsVolumeDataProvider} onClickAddQueryRowButton={this.onClickAddQueryRowButton} onClickRichHistoryButton={this.toggleShowRichHistory} onClickQueryInspectorButton={this.toggleShowQueryInspector} - onClickLoadLogsVolume={() => loadLogsVolumeData(exploreId)} /> @@ -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, diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index a7d34cb4584..a17ca23d537 100644 --- 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>; addResultsToCache: () => void; clearCache: () => void; + loadingLogsVolumeAvailable: boolean; + onClickLoadLogsVolume: () => void; } interface State { @@ -268,6 +270,8 @@ export class UnthemedLogs extends PureComponent { logsQueries, clearCache, addResultsToCache, + onClickLoadLogsVolume, + loadingLogsVolumeAvailable, } = this.props; const { @@ -340,16 +344,30 @@ export class UnthemedLogs extends PureComponent { /> - +
+ {loadingLogsVolumeAvailable && ( + + )} + +
{ 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` diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index e9035b9cd6e..d9e44cbaa47 100644 --- 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 { render() { const { + datasourceInstance, loading, loadingState, logRows, @@ -87,6 +89,8 @@ export class LogsContainer extends PureComponent { exploreId, addResultsToCache, clearCache, + logsVolumeDataProvider, + loadLogsVolumeData, } = this.props; if (!logRows) { @@ -146,6 +150,8 @@ export class LogsContainer extends PureComponent { getFieldLinks={this.getFieldLinks} addResultsToCache={() => addResultsToCache(exploreId)} clearCache={() => clearCache(exploreId)} + loadingLogsVolumeAvailable={hasLogsVolumeSupport(datasourceInstance) && !!logsVolumeDataProvider} + onClickLoadLogsVolume={() => loadLogsVolumeData(exploreId)} /> @@ -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); diff --git a/public/app/features/explore/SecondaryActions.test.tsx b/public/app/features/explore/SecondaryActions.test.tsx index 9bf7566f02b..6b55113f6d8 100644 --- 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( ); @@ -72,8 +65,5 @@ describe('SecondaryActions', () => { wrapper.find(queryInspectorButtonSelector).simulate('click'); expect(onClickQueryInspector).toBeCalled(); - - wrapper.find(onClickLoadLogsVolumeSelector).simulate('click'); - expect(onClickQueryInspector).toBeCalled(); }); }); diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx index 53aacd54cff..4f56f8c8b4e 100644 --- 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 - {props.loadingLogsVolumeAvailable && ( - - )} ); diff --git a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap index fc9e55f9bf0..193e62eaaa0 100644 --- 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`] = `