Skip to content

N
nexpie-grafana-theme
Commit afd75805 by Torkel Ödegaard Committed by David Kaltschmidt
Options

explore logs css refactoring, step1

parent c7d701c8
Showing with 241 additions and 245 deletions
public/app/features/explore/Logs.tsx
......@@ -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
......
public/sass/_grafana.scss
......@@ -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';
......
public/sass/components/_logs-rows.scss deleted 100644 → 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 {
}
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 {
// 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;
}
}
public/sass/pages/_explore.scss
......@@ -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 {
......
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