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,
});
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

1
public/sass/_grafana.scss
View File

@ -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
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;
}
.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;