IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

explore logs styling poc, WIP

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-05 15:53:20 +01:00 committed by David Kaltschmidt
parent 8bac55ca70
commit c7d701c8fa
4 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
public/app/features/explore/Logs.tsx
View File

@ -64,18 +64,18 @@ function Row({
'logs-row-match-highlight--preview': previewHighlights, 'logs-row-match-highlight--preview': previewHighlights,
}); });
return ( return (
<> <div className="logs-row">
{showDuplicates && ( {showDuplicates && (
<div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div> <div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
)} )}
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} /> <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}
</div> </div>
)} )}
{showLocalTime && ( {showLocalTime && (
<div className="logs-row-time" title={`${row.timestamp} (${row.timeFromNow})`}> <div className="logs-row__time" title={`${row.timestamp} (${row.timeFromNow})`}>
{row.timeLocal} {row.timeLocal}
</div> </div>
)} )}
@ -96,7 +96,7 @@ function Row({
row.entry row.entry
)} )}
</div> </div>
</> </div>
); );
} }
@ -263,25 +263,25 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
} }
// Grid options // Grid options
const cssColumnSizes = []; // const cssColumnSizes = [];
if (showDuplicates) { // if (showDuplicates) {
cssColumnSizes.push('max-content'); // cssColumnSizes.push('max-content');
} // }
// Log-level indicator line // // Log-level indicator line
cssColumnSizes.push('3px'); // cssColumnSizes.push('3px');
if (showUtc) { // if (showUtc) {
cssColumnSizes.push('minmax(100px, max-content)'); // cssColumnSizes.push('minmax(220px, max-content)');
} // }
if (showLocalTime) { // if (showLocalTime) {
cssColumnSizes.push('minmax(100px, max-content)'); // cssColumnSizes.push('minmax(140px, max-content)');
} // }
if (showLabels) { // if (showLabels) {
cssColumnSizes.push('fit-content(20%)'); // cssColumnSizes.push('fit-content(20%)');
} // }
cssColumnSizes.push('1fr'); // cssColumnSizes.push('1fr');
const logEntriesStyle = { // const logEntriesStyle = {
gridTemplateColumns: cssColumnSizes.join(' '), // gridTemplateColumns: cssColumnSizes.join(' '),
}; // };
const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...'; const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
@ -342,7 +342,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
</div> </div>
</div> </div>
<div className="logs-entries" style={logEntriesStyle}> <div className="logs-rows">
{hasData && {hasData &&
!deferLogs && !deferLogs &&
// Only inject highlighterExpression in the first set for performance reasons // Only inject highlighterExpression in the first set for performance reasons

1
public/sass/_grafana.scss
View File

@ -101,6 +101,7 @@
@import 'components/delete_button'; @import 'components/delete_button';
@import 'components/add_data_source.scss'; @import 'components/add_data_source.scss';
@import 'components/page_loader'; @import 'components/page_loader';
@import 'components/logs-rows';
// PAGES // PAGES
@import 'pages/login'; @import 'pages/login';

23
public/sass/components/_logs-rows.scss Normal file
View File

@ -0,0 +1,23 @@
.logs-rows {
// display: grid;
// grid-column-gap: 1rem;
// grid-row-gap: 0.1rem;
// font-family: $font-family-monospace;
// font-size: 12px;
display: table;
}
.logs-row {
display: table-row;
> div {
display: table-cell;
}
}
.logs-row__time {
white-space: nowrap;
}
.logs-row__message {
}

11
public/sass/pages/_explore.scss
View File

@ -289,14 +289,6 @@
top: 4px; top: 4px;
} }
.logs-entries {
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 0.1rem;
font-family: $font-family-monospace;
font-size: 12px;
}
.logs-row-match-highlight { .logs-row-match-highlight {
// Undoing mark styling // Undoing mark styling
background: inherit; background: inherit;
@ -319,6 +311,9 @@
opacity: 0.8; opacity: 0.8;
} }
.logs-row__time {
}
.logs-row-level-critical, .logs-row-level-critical,
.logs-row-level-crit { .logs-row-level-crit {
background-color: #705da0; background-color: #705da0;