diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index 92d957855b0..89fc4595cf2 100644 --- a/public/app/features/explore/Explore.test.tsx +++ b/public/app/features/explore/Explore.test.tsx @@ -81,8 +81,6 @@ const dummyProps: Props = { showTrace: true, showNodeGraph: true, splitOpen: (() => {}) as any, - logsVolumeData: undefined, - loadLogsVolumeData: () => {}, changeGraphStyle: () => {}, graphStyle: 'lines', }; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index df058b92202..9bb700a148e 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -24,7 +24,6 @@ import { ExploreGraphLabel } from './ExploreGraphLabel'; import ExploreQueryInspector from './ExploreQueryInspector'; import { ExploreToolbar } from './ExploreToolbar'; import LogsContainer from './LogsContainer'; -import { LogsVolumePanel } from './LogsVolumePanel'; import { NoData } from './NoData'; import { NoDataSourceCallToAction } from './NoDataSourceCallToAction'; import { NodeGraphContainer } from './NodeGraphContainer'; @@ -36,7 +35,7 @@ import TableContainer from './TableContainer'; import { TraceViewContainer } from './TraceView/TraceViewContainer'; import { changeSize, changeGraphStyle } from './state/explorePane'; import { splitOpen } from './state/main'; -import { addQueryRow, loadLogsVolumeData, modifyQueries, scanStart, scanStopAction, setQueries } from './state/query'; +import { addQueryRow, modifyQueries, scanStart, scanStopAction, setQueries } from './state/query'; import { makeAbsoluteTime, updateTimeRange } from './state/time'; const getStyles = (theme: GrafanaTheme2) => { @@ -250,22 +249,6 @@ export class Explore extends React.PureComponent { ); } - renderLogsVolume(width: number) { - const { logsVolumeData, exploreId, loadLogsVolumeData, absoluteRange, timeZone, splitOpen } = this.props; - - return ( - loadLogsVolumeData(exploreId)} - /> - ); - } - renderTablePanel(width: number) { const { exploreId, datasourceInstance, timeZone } = this.props; return ( @@ -400,7 +383,6 @@ export class Explore extends React.PureComponent { {showMetrics && graphResult && ( {this.renderGraphPanel(width)} )} - {{this.renderLogsVolume(width)}} {showTable && {this.renderTablePanel(width)}} {showLogs && {this.renderLogsPanel(width)}} {showNodeGraph && {this.renderNodeGraphPanel()}} @@ -446,7 +428,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { queryKeys, isLive, graphResult, - logsVolumeData, logsResult, showLogs, showMetrics, @@ -465,7 +446,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { queryKeys, isLive, graphResult, - logsVolumeData, logsResult: logsResult ?? undefined, absoluteRange, queryResponse, @@ -490,7 +470,6 @@ const mapDispatchToProps = { setQueries, updateTimeRange, makeAbsoluteTime, - loadLogsVolumeData, addQueryRow, splitOpen, }; diff --git a/public/app/features/explore/Logs.test.tsx b/public/app/features/explore/Logs.test.tsx index e491945ebe5..5efc23bf0db 100644 --- a/public/app/features/explore/Logs.test.tsx +++ b/public/app/features/explore/Logs.test.tsx @@ -17,6 +17,9 @@ describe('Logs', () => { return render( undefined} + logsVolumeData={undefined} + loadLogsVolumeData={() => undefined} logRows={rows} timeZone={'utc'} width={50} diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index d1ae1172991..516f53c4bd9 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -20,6 +20,8 @@ import { DataFrame, GrafanaTheme2, LoadingState, + SplitOpen, + DataQueryResponse, } from '@grafana/data'; import { TooltipDisplayMode } from '@grafana/schema'; import { @@ -40,6 +42,7 @@ import { ExploreId } from 'app/types/explore'; import { ExploreGraph } from './ExploreGraph'; import { LogsMetaRow } from './LogsMetaRow'; import LogsNavigation from './LogsNavigation'; +import { LogsVolumePanel } from './LogsVolumePanel'; const SETTINGS_KEYS = { showLabels: 'grafana.explore.logs.showLabels', @@ -51,6 +54,7 @@ const SETTINGS_KEYS = { interface Props extends Themeable2 { width: number; + splitOpen: SplitOpen; logRows: LogRowModel[]; logsMeta?: LogsMetaItem[]; logsSeries?: DataFrame[]; @@ -64,6 +68,8 @@ interface Props extends Themeable2 { scanning?: boolean; scanRange?: RawTimeRange; exploreId: ExploreId; + logsVolumeData: DataQueryResponse | undefined; + loadLogsVolumeData: (exploreId: ExploreId) => void; showContextToggle?: (row?: LogRowModel) => boolean; onChangeTime: (range: AbsoluteTimeRange) => void; onClickFilterLabel?: (key: string, value: string) => void; @@ -268,10 +274,13 @@ class UnthemedLogs extends PureComponent { render() { const { width, + splitOpen, logRows, logsMeta, logsSeries, visibleRange, + logsVolumeData, + loadLogsVolumeData, loading = false, loadingState, onClickFilterLabel, @@ -335,6 +344,16 @@ class UnthemedLogs extends PureComponent { /> ) : undefined} + loadLogsVolumeData(exploreId)} + onHiddenSeriesChanged={this.onToggleLogLevel} + />
@@ -465,7 +484,6 @@ class UnthemedLogs extends PureComponent {
)} - {scanning && (
{scanText} diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index cc9660f7d82..750de6ba9e4 100644 --- a/public/app/features/explore/LogsContainer.tsx +++ b/public/app/features/explore/LogsContainer.tsx @@ -19,7 +19,7 @@ import { getTimeZone } from '../profile/state/selectors'; import { LiveLogsWithTheme } from './LiveLogs'; import { Logs } from './Logs'; import { splitOpen } from './state/main'; -import { addResultsToCache, clearCache } from './state/query'; +import { addResultsToCache, clearCache, loadLogsVolumeData } from './state/query'; import { updateTimeRange } from './state/time'; import { LiveTailControls } from './useLiveTailControls'; import { LogsCrossFadeTransition } from './utils/LogsCrossFadeTransition'; @@ -76,6 +76,8 @@ class LogsContainer extends PureComponent { logsMeta, logsSeries, logsQueries, + logsVolumeData, + loadLogsVolumeData, onClickFilterLabel, onClickFilterOutLabel, onStartScanning, @@ -86,6 +88,7 @@ class LogsContainer extends PureComponent { scanning, range, width, + splitOpen, isLive, exploreId, addResultsToCache, @@ -131,10 +134,13 @@ class LogsContainer extends PureComponent { logRows={logRows} logsMeta={logsMeta} logsSeries={logsSeries} + logsVolumeData={logsVolumeData} logsQueries={logsQueries} width={width} + splitOpen={splitOpen} loading={loading} loadingState={loadingState} + loadLogsVolumeData={loadLogsVolumeData} onChangeTime={this.onChangeTime} onClickFilterLabel={onClickFilterLabel} onClickFilterOutLabel={onClickFilterOutLabel} @@ -200,6 +206,7 @@ const mapDispatchToProps = { splitOpen, addResultsToCache, clearCache, + loadLogsVolumeData, }; const connector = connect(mapStateToProps, mapDispatchToProps); diff --git a/public/app/features/explore/LogsVolumePanel.test.tsx b/public/app/features/explore/LogsVolumePanel.test.tsx index b42b3c37d1b..cd67dc85e11 100644 --- a/public/app/features/explore/LogsVolumePanel.test.tsx +++ b/public/app/features/explore/LogsVolumePanel.test.tsx @@ -22,6 +22,7 @@ function renderPanel(logsVolumeData?: DataQueryResponse) { onUpdateTimeRange={() => {}} logsVolumeData={logsVolumeData} onLoadLogsVolume={() => {}} + onHiddenSeriesChanged={() => null} /> ); } diff --git a/public/app/features/explore/LogsVolumePanel.tsx b/public/app/features/explore/LogsVolumePanel.tsx index 08e6fb47039..436eb08da86 100644 --- a/public/app/features/explore/LogsVolumePanel.tsx +++ b/public/app/features/explore/LogsVolumePanel.tsx @@ -14,6 +14,7 @@ type Props = { width: number; onUpdateTimeRange: (timeRange: AbsoluteTimeRange) => void; onLoadLogsVolume: () => void; + onHiddenSeriesChanged: (hiddenSeries: string[]) => void; }; const SHORT_ERROR_MESSAGE_LIMIT = 100; @@ -46,7 +47,16 @@ function ErrorAlert(props: { error: DataQueryError }) { } export function LogsVolumePanel(props: Props) { - const { width, logsVolumeData, absoluteRange, timeZone, splitOpen, onUpdateTimeRange, onLoadLogsVolume } = props; + const { + width, + logsVolumeData, + absoluteRange, + timeZone, + splitOpen, + onUpdateTimeRange, + onLoadLogsVolume, + onHiddenSeriesChanged, + } = props; const theme = useTheme2(); const styles = useStyles2(getStyles); const spacing = parseInt(theme.spacing(2).slice(0, -2), 10); @@ -74,6 +84,7 @@ export function LogsVolumePanel(props: Props) { timeZone={timeZone} splitOpenFn={splitOpen} tooltipDisplayMode={TooltipDisplayMode.Multi} + onHiddenSeriesChanged={onHiddenSeriesChanged} /> ); } else { @@ -93,7 +104,7 @@ export function LogsVolumePanel(props: Props) { } return ( - +
{LogsVolumePanelContent}