Commit 0c855fb9 by Torkel Ödegaard Committed by GitHub

Merge pull request #14308 from grafana/davkal/explore-dedup-number

Explore: Display duplicate row count as number
parents c4a89eb3 6980d2e1
...@@ -40,13 +40,23 @@ interface RowProps { ...@@ -40,13 +40,23 @@ interface RowProps {
allRows: LogRow[]; allRows: LogRow[];
highlighterExpressions?: string[]; highlighterExpressions?: string[];
row: LogRow; row: LogRow;
showDuplicates: boolean;
showLabels: boolean | null; // Tristate: null means auto showLabels: boolean | null; // Tristate: null means auto
showLocalTime: boolean; showLocalTime: boolean;
showUtc: boolean; showUtc: boolean;
onClickLabel?: (label: string, value: string) => void; onClickLabel?: (label: string, value: string) => void;
} }
function Row({ allRows, highlighterExpressions, onClickLabel, row, showLabels, showLocalTime, showUtc }: RowProps) { function Row({
allRows,
highlighterExpressions,
onClickLabel,
row,
showDuplicates,
showLabels,
showLocalTime,
showUtc,
}: RowProps) {
const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords); const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords);
const highlights = previewHighlights ? highlighterExpressions : row.searchWords; const highlights = previewHighlights ? highlighterExpressions : row.searchWords;
const needsHighlighter = highlights && highlights.length > 0; const needsHighlighter = highlights && highlights.length > 0;
...@@ -55,15 +65,10 @@ function Row({ allRows, highlighterExpressions, onClickLabel, row, showLabels, s ...@@ -55,15 +65,10 @@ function Row({ allRows, highlighterExpressions, onClickLabel, row, showLabels, s
}); });
return ( return (
<> <>
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''}> {showDuplicates && (
{row.duplicates > 0 && ( <div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
<div className="logs-row-level__duplicates" title={`${row.duplicates} duplicates`}>
{Array.apply(null, { length: row.duplicates }).map((bogus, index) => (
<div className="logs-row-level__duplicate" key={`${index}`} />
))}
</div>
)} )}
</div> <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
{showUtc && ( {showUtc && (
<div className="logs-row-time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}> <div className="logs-row-time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
{row.timestamp} {row.timestamp}
...@@ -228,6 +233,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -228,6 +233,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
const { dedup, deferLogs, hiddenLogLevels, renderAll, showLocalTime, showUtc } = this.state; const { dedup, deferLogs, hiddenLogLevels, renderAll, showLocalTime, showUtc } = this.state;
let { showLabels } = this.state; let { showLabels } = this.state;
const hasData = data && data.rows && data.rows.length > 0; const hasData = data && data.rows && data.rows.length > 0;
const showDuplicates = dedup !== LogsDedupStrategy.none;
// Filtering // Filtering
const filteredData = filterLogLevels(data, hiddenLogLevels); const filteredData = filterLogLevels(data, hiddenLogLevels);
...@@ -257,7 +263,12 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -257,7 +263,12 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
} }
// Grid options // Grid options
const cssColumnSizes = ['3px']; // Log-level indicator line const cssColumnSizes = [];
if (showDuplicates) {
cssColumnSizes.push('max-content');
}
// Log-level indicator line
cssColumnSizes.push('3px');
if (showUtc) { if (showUtc) {
cssColumnSizes.push('minmax(100px, max-content)'); cssColumnSizes.push('minmax(100px, max-content)');
} }
...@@ -341,6 +352,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -341,6 +352,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
allRows={processedRows} allRows={processedRows}
highlighterExpressions={highlighterExpressions} highlighterExpressions={highlighterExpressions}
row={row} row={row}
showDuplicates={showDuplicates}
showLabels={showLabels} showLabels={showLabels}
showLocalTime={showLocalTime} showLocalTime={showLocalTime}
showUtc={showUtc} showUtc={showUtc}
...@@ -355,6 +367,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -355,6 +367,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
key={row.key + row.duplicates} key={row.key + row.duplicates}
allRows={processedRows} allRows={processedRows}
row={row} row={row}
showDuplicates={showDuplicates}
showLabels={showLabels} showLabels={showLabels}
showLocalTime={showLocalTime} showLocalTime={showLocalTime}
showUtc={showUtc} showUtc={showUtc}
......
...@@ -346,23 +346,8 @@ ...@@ -346,23 +346,8 @@
background-color: #6ed0e0; background-color: #6ed0e0;
} }
.logs-row-level__duplicates { .logs-row-duplicates {
position: absolute; text-align: right;
width: 9px;
height: 100%;
top: 0;
left: 5px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
}
.logs-row-level__duplicate {
width: 2px;
height: 3px;
background-color: #1f78c1;
margin: 0 1px 1px 0;
} }
.logs-label { .logs-label {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment