apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explore logs css refactoring, step1

Browse Source
pull/14352/head
Torkel Ödegaard 7 years ago committed by David Kaltschmidt
parent c7d701c8fa
commit afd7580598
5 changed files with 241 additions and 245 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 37
      public/app/features/explore/Logs.tsx
  2. 2
      public/sass/_grafana.scss
  3. 23
      public/sass/components/_logs-rows.scss
  4. 223
      public/sass/components/_panel_logs.scss
  5. 201
      public/sass/pages/_explore.scss

37
public/app/features/explore/Logs.tsx
Unescape View File

@ -60,15 +60,15 @@ 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})`}>
{row.timestamp}
@ -80,11 +80,11 @@ function Row({
</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}
@ -103,7 +103,7 @@ function Row({
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>
);
@ -112,7 +112,6 @@ function renderMetaItem(value: any, kind: LogsMetaKind) {
}
interface LogsProps {
className?: string;
data: LogsModel;
highlighterExpressions: string[];
loading: boolean;
@ -220,7 +219,6 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
render() {
const {
className = '',
data,
highlighterExpressions,
loading = false,
@ -286,8 +284,8 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
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"
@ -298,9 +296,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 />
@ -330,11 +327,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>
@ -379,7 +376,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
@ -388,7 +385,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

2
public/sass/_grafana.scss
Unescape View File

@ -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';
@ -101,7 +102,6 @@
@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
Unescape View File

@ -1,23 +0,0 @@
.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 {
}

223
public/sass/components/_panel_logs.scss
Unescape View 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 {
// 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;
padding-left: 10px;
}
}
.logs-row__time {
white-space: nowrap;
}
.logs-row__message {
word-break: break-all;
}
.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;
margin: 2px 0;
position: relative;
opacity: 0.8;
padding: 0 3px 0 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__time {
}
.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;
}
}

201
public/sass/pages/_explore.scss
Unescape View File

@ -238,207 +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-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__time {
}
.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 {

Write Preview
Loading…
Cancel
Save