mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14352 from grafana/explore-logs-css-refactor
Explore logs css refactor
This commit is contained in:
Torkel Ödegaard
GitHub
@@ -61,31 +61,31 @@ function Row({
|
||||
const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords);
|
||||
const highlights = previewHighlights ? highlighterExpressions : row.searchWords;
|
||||
const needsHighlighter = highlights && highlights.length > 0;
|
||||
const highlightClassName = classnames('logs-row-match-highlight', {
|
||||
'logs-row-match-highlight--preview': previewHighlights,
|
||||
const highlightClassName = classnames('logs-row__match-highlight', {
|
||||
'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="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 && (
|
||||
<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>
|
||||
)}
|
||||
{showLabels && (
|
||||
<div className="logs-row-labels">
|
||||
<div className="logs-row__labels">
|
||||
<LogLabels allRows={allRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} />
|
||||
</div>
|
||||
)}
|
||||
<div className="logs-row-message">
|
||||
<div className="logs-row__message">
|
||||
{needsHighlighter ? (
|
||||
<Highlighter
|
||||
textToHighlight={row.entry}
|
||||
@@ -97,14 +97,14 @@ function Row({
|
||||
row.entry
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderMetaItem(value: any, kind: LogsMetaKind) {
|
||||
if (kind === LogsMetaKind.LabelsMap) {
|
||||
return (
|
||||
<span className="logs-meta-item__value-labels">
|
||||
<span className="logs-meta-item__labels">
|
||||
<LogLabels labels={value} plain />
|
||||
</span>
|
||||
);
|
||||
@@ -113,7 +113,6 @@ function renderMetaItem(value: any, kind: LogsMetaKind) {
|
||||
}
|
||||
|
||||
interface LogsProps {
|
||||
className?: string;
|
||||
data: LogsModel;
|
||||
highlighterExpressions: string[];
|
||||
loading: boolean;
|
||||
@@ -221,7 +220,6 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
|
||||
render() {
|
||||
const {
|
||||
className = '',
|
||||
data,
|
||||
highlighterExpressions,
|
||||
loading = false,
|
||||
@@ -264,31 +262,31 @@ 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...';
|
||||
|
||||
return (
|
||||
<div className={`${className} logs`}>
|
||||
<div className="logs-graph">
|
||||
<div className="logs-panel">
|
||||
<div className="logs-panel-graph">
|
||||
<Graph
|
||||
data={data.series}
|
||||
height="100px"
|
||||
@@ -299,9 +297,8 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
userOptions={graphOptions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="logs-options">
|
||||
<div className="logs-controls">
|
||||
<div className="logs-panel-options">
|
||||
<div className="logs-panel-controls">
|
||||
<Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
|
||||
<Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
|
||||
<Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
|
||||
@@ -331,11 +328,11 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
/>
|
||||
{hasData &&
|
||||
meta && (
|
||||
<div className="logs-meta">
|
||||
<div className="logs-panel-meta">
|
||||
{meta.map(item => (
|
||||
<div className="logs-meta-item" key={item.label}>
|
||||
<span className="logs-meta-item__label">{item.label}:</span>
|
||||
<span className="logs-meta-item__value">{renderMetaItem(item.value, item.kind)}</span>
|
||||
<div className="logs-panel-meta__item" key={item.label}>
|
||||
<span className="logs-panel-meta__label">{item.label}:</span>
|
||||
<span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -343,7 +340,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
|
||||
@@ -380,7 +377,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
{!loading &&
|
||||
!hasData &&
|
||||
!scanning && (
|
||||
<div className="logs-nodata">
|
||||
<div className="logs-panel-nodata">
|
||||
No logs found.
|
||||
<a className="link" onClick={this.onClickScan}>
|
||||
Scan for older logs
|
||||
@@ -389,7 +386,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
|
||||
)}
|
||||
|
||||
{scanning && (
|
||||
<div className="logs-nodata">
|
||||
<div className="logs-panel-nodata">
|
||||
<span>{scanText}</span>
|
||||
<a className="link" onClick={this.onClickStopScan}>
|
||||
Stop scan
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
@import 'components/panel_text';
|
||||
@import 'components/panel_heatmap';
|
||||
@import 'components/panel_add_panel';
|
||||
@import 'components/panel_logs';
|
||||
@import 'components/settings_permissions';
|
||||
@import 'components/tagsinput';
|
||||
@import 'components/tables_lists';
|
||||
|
||||
223
public/sass/components/_panel_logs.scss
Normal file
223
public/sass/components/_panel_logs.scss
Normal file
@@ -0,0 +1,223 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -238,212 +238,6 @@
|
||||
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
|
||||
|
||||
.explore {
|
||||
|
||||
Reference in New Issue
Block a user