Logs: handle clicks on legend labels in histogram (#49931)

* logs: move new-histogram next to old-histogram

* logs: handle legend-click in new-histogram

* minor visual change

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',
 };

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<Props, ExploreState> {
     );
   }
 
-  renderLogsVolume(width: number) {
-    const { logsVolumeData, exploreId, loadLogsVolumeData, absoluteRange, timeZone, splitOpen } = this.props;
-
-    return (
-      <LogsVolumePanel
-        absoluteRange={absoluteRange}
-        width={width}
-        logsVolumeData={logsVolumeData}
-        onUpdateTimeRange={this.onUpdateTimeRange}
-        timeZone={timeZone}
-        splitOpen={splitOpen}
-        onLoadLogsVolume={() => loadLogsVolumeData(exploreId)}
-      />
-    );
-  }
-
   renderTablePanel(width: number) {
     const { exploreId, datasourceInstance, timeZone } = this.props;
     return (
@@ -400,7 +383,6 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
                           {showMetrics && graphResult && (
                             <ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
                           )}
-                          {<ErrorBoundaryAlert>{this.renderLogsVolume(width)}</ErrorBoundaryAlert>}
                           {showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
                           {showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
                           {showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
@@ -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,
 };

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

@@ -17,6 +17,9 @@ describe('Logs', () => {
     return render(
       <Logs
         exploreId={ExploreId.left}
+        splitOpen={() => undefined}
+        logsVolumeData={undefined}
+        loadLogsVolumeData={() => undefined}
         logRows={rows}
         timeZone={'utc'}
         width={50}

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<Props, State> {
   render() {
     const {
       width,
+      splitOpen,
       logRows,
       logsMeta,
       logsSeries,
       visibleRange,
+      logsVolumeData,
+      loadLogsVolumeData,
       loading = false,
       loadingState,
       onClickFilterLabel,
@@ -335,6 +344,16 @@ class UnthemedLogs extends PureComponent<Props, State> {
             />
           </>
         ) : undefined}
+        <LogsVolumePanel
+          absoluteRange={absoluteRange}
+          width={width}
+          logsVolumeData={logsVolumeData}
+          onUpdateTimeRange={onChangeTime}
+          timeZone={timeZone}
+          splitOpen={splitOpen}
+          onLoadLogsVolume={() => loadLogsVolumeData(exploreId)}
+          onHiddenSeriesChanged={this.onToggleLogLevel}
+        />
         <div className={styles.logOptions} ref={this.topLogsRef}>
           <InlineFieldRow>
             <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
@@ -465,7 +484,6 @@ class UnthemedLogs extends PureComponent<Props, State> {
             </Button>
           </div>
         )}
-
         {scanning && (
           <div className={styles.noData}>
             <span>{scanText}</span>

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<LogsContainerProps> {
       logsMeta,
       logsSeries,
       logsQueries,
+      logsVolumeData,
+      loadLogsVolumeData,
       onClickFilterLabel,
       onClickFilterOutLabel,
       onStartScanning,
@@ -86,6 +88,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
       scanning,
       range,
       width,
+      splitOpen,
       isLive,
       exploreId,
       addResultsToCache,
@@ -131,10 +134,13 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
               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);

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

@@ -22,6 +22,7 @@ function renderPanel(logsVolumeData?: DataQueryResponse) {
       onUpdateTimeRange={() => {}}
       logsVolumeData={logsVolumeData}
       onLoadLogsVolume={() => {}}
+      onHiddenSeriesChanged={() => null}
     />
   );
 }

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 (
-    <Collapse label="Log volume" isOpen={true} loading={logsVolumeData?.state === LoadingState.Loading}>
+    <Collapse label="" isOpen={true} loading={logsVolumeData?.state === LoadingState.Loading}>
       <div style={{ height }} className={styles.contentContainer}>
         {LogsVolumePanelContent}
       </div>