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 {
allRows: LogRow[];
highlighterExpressions?: string[];
row: LogRow;
showDuplicates: boolean;
showLabels: boolean | null; // Tristate: null means auto
showLocalTime: boolean;
showUtc: boolean;
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 highlights = previewHighlights ? highlighterExpressions : row.searchWords;
const needsHighlighter = highlights && highlights.length > 0;
......@@ -55,15 +65,10 @@ function Row({ allRows, highlighterExpressions, onClickLabel, row, showLabels, s
});
return (
<>
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''}>
{row.duplicates > 0 && (
<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>
{showDuplicates && (
<div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
)}
</div>
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
{showUtc && (
<div className="logs-row-time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
{row.timestamp}
......@@ -228,6 +233,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
const { dedup, deferLogs, hiddenLogLevels, renderAll, showLocalTime, showUtc } = this.state;
let { showLabels } = this.state;
const hasData = data && data.rows && data.rows.length > 0;
const showDuplicates = dedup !== LogsDedupStrategy.none;
// Filtering
const filteredData = filterLogLevels(data, hiddenLogLevels);
......@@ -257,7 +263,12 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
}
// 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) {
cssColumnSizes.push('minmax(100px, max-content)');
}
......@@ -341,6 +352,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
allRows={processedRows}
highlighterExpressions={highlighterExpressions}
row={row}
showDuplicates={showDuplicates}
showLabels={showLabels}
showLocalTime={showLocalTime}
showUtc={showUtc}
......@@ -355,6 +367,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
key={row.key + row.duplicates}
allRows={processedRows}
row={row}
showDuplicates={showDuplicates}
showLabels={showLabels}
showLocalTime={showLocalTime}
showUtc={showUtc}
......
......@@ -346,23 +346,8 @@
background-color: #6ed0e0;
}
.logs-row-level__duplicates {
position: absolute;
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-row-duplicates {
text-align: right;
}
.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