mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
explore logs styling poc, WIP
This commit is contained in:
parent
8bac55ca70
commit
c7d701c8fa
@ -64,18 +64,18 @@ function Row({
|
||||
'logs-row-match-highlight--preview': previewHighlights,
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<div className="logs-row">
|
||||
{showDuplicates && (
|
||||
<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}` : ''} />
|
||||
{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}
|
||||
</div>
|
||||
)}
|
||||
{showLocalTime && (
|
||||
<div className="logs-row-time" title={`${row.timestamp} (${row.timeFromNow})`}>
|
||||
<div className="logs-row__time" title={`${row.timestamp} (${row.timeFromNow})`}>
|
||||
{row.timeLocal}
|
||||
</div>
|
||||
)}
|
||||
@ -96,7 +96,7 @@ function Row({
|
||||
row.entry
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -263,25 +263,25 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
}
|
||||
|
||||
// Grid options
|
||||
const cssColumnSizes = [];
|
||||
if (showDuplicates) {
|
||||
cssColumnSizes.push('max-content');
|
||||
}
|
||||
// Log-level indicator line
|
||||
cssColumnSizes.push('3px');
|
||||
if (showUtc) {
|
||||
cssColumnSizes.push('minmax(100px, max-content)');
|
||||
}
|
||||
if (showLocalTime) {
|
||||
cssColumnSizes.push('minmax(100px, max-content)');
|
||||
}
|
||||
if (showLabels) {
|
||||
cssColumnSizes.push('fit-content(20%)');
|
||||
}
|
||||
cssColumnSizes.push('1fr');
|
||||
const logEntriesStyle = {
|
||||
gridTemplateColumns: cssColumnSizes.join(' '),
|
||||
};
|
||||
// const cssColumnSizes = [];
|
||||
// if (showDuplicates) {
|
||||
// cssColumnSizes.push('max-content');
|
||||
// }
|
||||
// // Log-level indicator line
|
||||
// cssColumnSizes.push('3px');
|
||||
// if (showUtc) {
|
||||
// cssColumnSizes.push('minmax(220px, max-content)');
|
||||
// }
|
||||
// if (showLocalTime) {
|
||||
// cssColumnSizes.push('minmax(140px, max-content)');
|
||||
// }
|
||||
// if (showLabels) {
|
||||
// cssColumnSizes.push('fit-content(20%)');
|
||||
// }
|
||||
// cssColumnSizes.push('1fr');
|
||||
// const logEntriesStyle = {
|
||||
// gridTemplateColumns: cssColumnSizes.join(' '),
|
||||
// };
|
||||
|
||||
const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
|
||||
|
||||
@ -342,7 +342,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="logs-entries" style={logEntriesStyle}>
|
||||
<div className="logs-rows">
|
||||
{hasData &&
|
||||
!deferLogs &&
|
||||
// Only inject highlighterExpression in the first set for performance reasons
|
||||
|
@ -101,6 +101,7 @@
|
||||
@import 'components/delete_button';
|
||||
@import 'components/add_data_source.scss';
|
||||
@import 'components/page_loader';
|
||||
@import 'components/logs-rows';
|
||||
|
||||
// PAGES
|
||||
@import 'pages/login';
|
||||
|
23
public/sass/components/_logs-rows.scss
Normal file
23
public/sass/components/_logs-rows.scss
Normal 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 {
|
||||
}
|
@ -289,14 +289,6 @@
|
||||
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 {
|
||||
// Undoing mark styling
|
||||
background: inherit;
|
||||
@ -319,6 +311,9 @@
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logs-row__time {
|
||||
}
|
||||
|
||||
.logs-row-level-critical,
|
||||
.logs-row-level-crit {
|
||||
background-color: #705da0;
|
||||
|
Loading…
Reference in New Issue
Block a user