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
This commit is contained in:
Gábor Farkas 2022-06-07 14:27:32 +02:00 committed by GitHub
parent be712a5f17
commit cbfac157fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 28 deletions

View File

@ -81,8 +81,6 @@ const dummyProps: Props = {
showTrace: true,
showNodeGraph: true,
splitOpen: (() => {}) as any,
logsVolumeData: undefined,
loadLogsVolumeData: () => {},
changeGraphStyle: () => {},
graphStyle: 'lines',
};

View File

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

View File

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

View File

@ -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>

View File

@ -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);

View File

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

View File

@ -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>