diff --git a/public/app/features/explore/LogLabels.tsx b/public/app/features/explore/LogLabels.tsx index eb9c39050f6..8aa1789017e 100644 --- a/public/app/features/explore/LogLabels.tsx +++ b/public/app/features/explore/LogLabels.tsx @@ -69,7 +69,7 @@ export class Stats extends PureComponent<{ class Label extends PureComponent< { - allRows?: LogRow[]; + getRows?: () => LogRow[]; label: string; plain?: boolean; value: string; @@ -98,13 +98,14 @@ class Label extends PureComponent< if (state.showStats) { return { showStats: false, stats: null }; } - const stats = calculateLogsLabelStats(this.props.allRows, this.props.label); + const allRows = this.props.getRows(); + const stats = calculateLogsLabelStats(allRows, this.props.label); return { showStats: true, stats }; }); }; render() { - const { allRows, label, plain, value } = this.props; + const { getRows, label, plain, value } = this.props; const { showStats, stats } = this.state; const tooltip = `${label}: ${value}`; return ( @@ -115,12 +116,12 @@ class Label extends PureComponent< {!plain && ( )} - {!plain && allRows && } + {!plain && getRows && } {showStats && ( LogRow[]; labels: LogsStreamLabels; plain?: boolean; onClickLabel?: (label: string, value: string) => void; }> { render() { - const { allRows, labels, onClickLabel, plain } = this.props; + const { getRows, labels, onClickLabel, plain } = this.props; return Object.keys(labels).map(key => ( - + )); } } diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 108d4f37a6e..e53b265851e 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -56,13 +56,13 @@ const FieldHighlight = onClick => props => { }; interface RowProps { - allRows: LogRow[]; highlighterExpressions?: string[]; row: LogRow; showDuplicates: boolean; showLabels: boolean | null; // Tristate: null means auto showLocalTime: boolean; showUtc: boolean; + getRows: () => LogRow[]; onClickLabel?: (label: string, value: string) => void; } @@ -107,11 +107,12 @@ class Row extends PureComponent { }; onClickHighlight = (fieldText: string) => { - const { allRows } = this.props; + const { getRows } = this.props; const { parser } = this.state; const fieldMatch = fieldText.match(parser.fieldRegex); if (fieldMatch) { + const allRows = getRows(); // Build value-agnostic row matcher based on the field label const fieldLabel = fieldMatch[1]; const fieldValue = fieldMatch[2]; @@ -151,7 +152,7 @@ class Row extends PureComponent { render() { const { - allRows, + getRows, highlighterExpressions, onClickLabel, row, @@ -193,7 +194,7 @@ class Row extends PureComponent { )} {showLabels && ( - + )} @@ -416,6 +417,9 @@ export default class Logs extends PureComponent { const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...'; + // React profiler becomes unusable if we pass all rows to all rows and their labels, using getter instead + const getRows = () => processedRows; + return ( @@ -473,7 +477,7 @@ export default class Logs extends PureComponent { firstRows.map(row => ( { lastRows.map(row => (