Skip to content

N
nexpie-grafana-theme
Commit 9a06fad2 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14352 from grafana/explore-logs-css-refactor 

Explore logs css refactor
parents 25b55203 665ac229
Showing with 265 additions and 250 deletions
public/app/features/explore/Logs.tsx
...@@ -61,31 +61,31 @@ function Row({ ...@@ -61,31 +61,31 @@ function Row({
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;
const highlightClassName = classnames('logs-row-match-highlight', { const highlightClassName = classnames('logs-row__match-highlight', {
'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>
)} )}
{showLabels && ( {showLabels && (
<div className="logs-row-labels"> <div className="logs-row__labels">
<LogLabels allRows={allRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} /> <LogLabels allRows={allRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} />
</div> </div>
)} )}
<div className="logs-row-message"> <div className="logs-row__message">
{needsHighlighter ? ( {needsHighlighter ? (
<Highlighter <Highlighter
textToHighlight={row.entry} textToHighlight={row.entry}
...@@ -97,14 +97,14 @@ function Row({ ...@@ -97,14 +97,14 @@ function Row({
row.entry row.entry
)} )}
</div> </div>
</> </div>
); );
} }
function renderMetaItem(value: any, kind: LogsMetaKind) { function renderMetaItem(value: any, kind: LogsMetaKind) {
if (kind === LogsMetaKind.LabelsMap) { if (kind === LogsMetaKind.LabelsMap) {
return ( return (
<span className="logs-meta-item__value-labels"> <span className="logs-meta-item__labels">
<LogLabels labels={value} plain /> <LogLabels labels={value} plain />
</span> </span>
); );
...@@ -113,7 +113,6 @@ function renderMetaItem(value: any, kind: LogsMetaKind) { ...@@ -113,7 +113,6 @@ function renderMetaItem(value: any, kind: LogsMetaKind) {
} }
interface LogsProps { interface LogsProps {
className?: string;
data: LogsModel; data: LogsModel;
highlighterExpressions: string[]; highlighterExpressions: string[];
loading: boolean; loading: boolean;
...@@ -221,7 +220,6 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -221,7 +220,6 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
render() { render() {
const { const {
className = '',
data, data,
highlighterExpressions, highlighterExpressions,
loading = false, loading = false,
...@@ -264,31 +262,31 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -264,31 +262,31 @@ 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...';
return ( return (
<div className={`${className} logs`}> <div className="logs-panel">
<div className="logs-graph"> <div className="logs-panel-graph">
<Graph <Graph
data={data.series} data={data.series}
height="100px" height="100px"
...@@ -299,9 +297,8 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -299,9 +297,8 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
userOptions={graphOptions} userOptions={graphOptions}
/> />
</div> </div>
<div className="logs-panel-options">
<div className="logs-options"> <div className="logs-panel-controls">
<div className="logs-controls">
<Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small /> <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
<Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small /> <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
<Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small /> <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
...@@ -331,11 +328,11 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -331,11 +328,11 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
/> />
{hasData && {hasData &&
meta && ( meta && (
<div className="logs-meta"> <div className="logs-panel-meta">
{meta.map(item => ( {meta.map(item => (
<div className="logs-meta-item" key={item.label}> <div className="logs-panel-meta__item" key={item.label}>
<span className="logs-meta-item__label">{item.label}:</span> <span className="logs-panel-meta__label">{item.label}:</span>
<span className="logs-meta-item__value">{renderMetaItem(item.value, item.kind)}</span> <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
</div> </div>
))} ))}
</div> </div>
...@@ -343,7 +340,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -343,7 +340,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
...@@ -380,7 +377,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -380,7 +377,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
{!loading && {!loading &&
!hasData && !hasData &&
!scanning && ( !scanning && (
<div className="logs-nodata"> <div className="logs-panel-nodata">
No logs found. No logs found.
<a className="link" onClick={this.onClickScan}> <a className="link" onClick={this.onClickScan}>
Scan for older logs Scan for older logs
...@@ -389,7 +386,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> { ...@@ -389,7 +386,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
)} )}
{scanning && ( {scanning && (
<div className="logs-nodata"> <div className="logs-panel-nodata">
<span>{scanText}</span> <span>{scanText}</span>
<a className="link" onClick={this.onClickStopScan}> <a className="link" onClick={this.onClickStopScan}>
Stop scan Stop scan
......
public/sass/_grafana.scss
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
@import 'components/panel_text'; @import 'components/panel_text';
@import 'components/panel_heatmap'; @import 'components/panel_heatmap';
@import 'components/panel_add_panel'; @import 'components/panel_add_panel';
@import 'components/panel_logs';
@import 'components/settings_permissions'; @import 'components/settings_permissions';
@import 'components/tagsinput'; @import 'components/tagsinput';
@import 'components/tables_lists'; @import 'components/tables_lists';
......
public/sass/components/_panel_logs.scss 0 → 100644
.logs-panel-controls {
display: flex;
background-color: $page-bg;
padding: $panel-padding;
padding-top: 10px;
border-radius: $border-radius;
margin: 2*$panel-margin 0;
border: $panel-border;
justify-items: flex-start;
align-items: flex-start;
> * {
margin-right: 1em;
}
}
.logs-panel-nodata {
> * {
margin-left: 0.5em;
}
}
.logs-panel-meta {
flex: 1;
color: $text-color-weak;
// Align first line with controls labels
margin-top: -2px;
}
.logs-panel-meta__item {
margin-right: 1em;
}
.logs-panel-meta__label {
margin-right: 0.5em;
font-size: 0.9em;
font-weight: 500;
}
.logs-panel-meta__value {
font-family: $font-family-monospace;
}
.logs-panel-meta-item__labels {
// compensate for the labels padding
position: relative;
top: 4px;
}
.logs-rows {
font-family: $font-family-monospace;
font-size: 12px;
display: table;
table-layout: fixed;
}
.logs-row {
display: table-row;
> div {
display: table-cell;
padding-left: 10px;
border: 1px solid transparent;
}
}
.logs-row__time {
white-space: nowrap;
}
.logs-row__labels {
max-width: 20%;
}
.logs-row__message {
word-break: break-all;
min-width: 80%;
}
.logs-row__match-highlight {
// Undoing mark styling
background: inherit;
padding: inherit;
color: $typeahead-selected-color;
border-bottom: 1px solid $typeahead-selected-color;
background-color: rgba($typeahead-selected-color, 0.1);
&--preview {
background-color: rgba($typeahead-selected-color, 0.2);
border-bottom-style: dotted;
}
}
.logs-row__level {
background-color: transparent;
position: relative;
width: 3px;
padding: 0 !important;
&--critical,
&--crit {
background-color: #705da0;
}
&--error,
&--err {
background-color: #e24d42;
}
&--warning,
&--warn {
background-color: #eab839;
}
&--info {
background-color: #7eb26d;
}
&--debug {
background-color: #1f78c1;
}
&--trace {
background-color: #6ed0e0;
}
}
.logs-row__duplicates {
text-align: right;
}
.logs-label {
display: inline-block;
padding: 0 2px;
background-color: $btn-inverse-bg;
border-radius: $border-radius;
margin: 0 4px 2px 0;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.logs-label__icon {
border-left: $panel-border;
padding: 0 2px;
cursor: pointer;
margin-left: 2px;
}
.logs-label__stats {
position: absolute;
top: 1.25em;
left: -10px;
z-index: 100;
background-color: $popover-bg;
color: $popover-color;
border: 1px solid $popover-border-color;
padding: 10px;
border-radius: $border-radius;
justify-content: space-between;
box-shadow: $popover-shadow;
}
.logs-row__labels {
line-height: 1.2;
}
.logs-stats__info {
margin-bottom: $spacer / 2;
}
.logs-stats__icon {
margin-left: 0.5em;
cursor: pointer;
}
.logs-stats-row {
margin: $spacer/1.75 0;
&--active {
color: $blue;
position: relative;
}
&--active::after {
display: inline;
content: '*';
position: absolute;
top: 0;
left: -8px;
}
&__label {
display: flex;
margin-bottom: 1px;
}
&__value {
flex: 1;
}
&__count,
&__percent {
text-align: right;
margin-left: 0.5em;
}
&__percent {
width: 3em;
}
&__bar,
&__innerbar {
height: 4px;
overflow: hidden;
background: $text-color-faint;
}
&__innerbar {
background-color: $blue;
}
}
public/sass/pages/_explore.scss
...@@ -238,212 +238,6 @@ ...@@ -238,212 +238,6 @@
padding-right: 0.25em; padding-right: 0.25em;
} }
.explore {
.logs {
.logs-controls {
display: flex;
background-color: $page-bg;
padding: $panel-padding;
padding-top: 10px;
border-radius: $border-radius;
margin: 2*$panel-margin 0;
border: $panel-border;
justify-items: flex-start;
align-items: flex-start;
> * {
margin-right: 1em;
}
}
.logs-nodata {
> * {
margin-left: 0.5em;
}
}
.logs-meta {
flex: 1;
color: $text-color-weak;
// Align first line with controls labels
margin-top: -2px;
}
.logs-meta-item {
margin-right: 1em;
}
.logs-meta-item__label {
margin-right: 0.5em;
font-size: 0.9em;
font-weight: 500;
}
.logs-meta-item__value {
font-family: $font-family-monospace;
}
.logs-meta-item__value-labels {
// compensate for the labels padding
position: relative;
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;
padding: inherit;
color: $typeahead-selected-color;
border-bottom: 1px solid $typeahead-selected-color;
background-color: rgba($typeahead-selected-color, 0.1);
}
.logs-row-match-highlight--preview {
background-color: rgba($typeahead-selected-color, 0.2);
border-bottom-style: dotted;
}
.logs-row-level {
background-color: transparent;
margin: 2px 0;
position: relative;
opacity: 0.8;
}
.logs-row-level-critical,
.logs-row-level-crit {
background-color: #705da0;
}
.logs-row-level-error,
.logs-row-level-err {
background-color: #e24d42;
}
.logs-row-level-warning,
.logs-row-level-warn {
background-color: #eab839;
}
.logs-row-level-info {
background-color: #7eb26d;
}
.logs-row-level-debug {
background-color: #1f78c1;
}
.logs-row-level-trace {
background-color: #6ed0e0;
}
.logs-row-duplicates {
text-align: right;
}
.logs-label {
display: inline-block;
padding: 0 2px;
background-color: $btn-inverse-bg;
border-radius: $border-radius;
margin: 0 4px 2px 0;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.logs-label__icon {
border-left: $panel-border;
padding: 0 2px;
cursor: pointer;
margin-left: 2px;
}
.logs-label__stats {
position: absolute;
top: 1.25em;
left: -10px;
z-index: 100;
background-color: $popover-bg;
color: $popover-color;
border: 1px solid $popover-border-color;
padding: 10px;
border-radius: $border-radius;
justify-content: space-between;
box-shadow: $popover-shadow;
}
.logs-row-labels {
line-height: 1.2;
}
.logs-stats__info {
margin-bottom: $spacer / 2;
}
.logs-stats__icon {
margin-left: 0.5em;
cursor: pointer;
}
.logs-stats-row {
margin: $spacer/1.75 0;
&--active {
color: $blue;
position: relative;
}
&--active:after {
display: inline;
content: '*';
position: absolute;
top: 0;
left: -8px;
}
&__label {
display: flex;
margin-bottom: 1px;
}
&__value {
flex: 1;
}
&__count,
&__percent {
text-align: right;
margin-left: 0.5em;
}
&__percent {
width: 3em;
}
&__bar,
&__innerbar {
height: 4px;
overflow: hidden;
background: $text-color-faint;
}
&__innerbar {
background-color: $blue;
}
}
}
}
// Prometheus-specifics, to be extracted to datasource soon // Prometheus-specifics, to be extracted to datasource soon
.explore { .explore {
......
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