mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14283 from grafana/explore-styling-fixes
Misc styling fixes to explore
This commit is contained in:
commit
6cb639baaa
@ -14,7 +14,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
|
|||||||
background: #555651\
|
background: #555651\
|
||||||
}\
|
}\
|
||||||
.gf-code-dark {\
|
.gf-code-dark {\
|
||||||
background-color: #111;\
|
background-color: #09090b;\
|
||||||
color: #e0e0e0\
|
color: #e0e0e0\
|
||||||
}\
|
}\
|
||||||
.gf-code-dark .ace_cursor {\
|
.gf-code-dark .ace_cursor {\
|
||||||
|
@ -15,7 +15,7 @@ const CHEAT_SHEET_ITEMS = [
|
|||||||
|
|
||||||
export default (props: any) => (
|
export default (props: any) => (
|
||||||
<div>
|
<div>
|
||||||
<h1>Logging Cheat Sheet</h1>
|
<h2>Logging Cheat Sheet</h2>
|
||||||
{CHEAT_SHEET_ITEMS.map(item => (
|
{CHEAT_SHEET_ITEMS.map(item => (
|
||||||
<div className="cheat-sheet-item" key={item.expression}>
|
<div className="cheat-sheet-item" key={item.expression}>
|
||||||
<div className="cheat-sheet-item__title">{item.title}</div>
|
<div className="cheat-sheet-item__title">{item.title}</div>
|
||||||
|
@ -1,59 +1,15 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import LoggingCheatSheet from './LoggingCheatSheet';
|
import LoggingCheatSheet from './LoggingCheatSheet';
|
||||||
|
|
||||||
const TAB_MENU_ITEMS = [
|
interface Props {
|
||||||
{
|
onClickExample: () => void;
|
||||||
text: 'Start',
|
}
|
||||||
id: 'start',
|
|
||||||
icon: 'fa fa-rocket',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default class LoggingStartPage extends PureComponent<any, { active: string }> {
|
|
||||||
state = {
|
|
||||||
active: 'start',
|
|
||||||
};
|
|
||||||
|
|
||||||
onClickTab = active => {
|
|
||||||
this.setState({ active });
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default class LoggingStartPage extends PureComponent<Props> {
|
||||||
render() {
|
render() {
|
||||||
const { active } = this.state;
|
|
||||||
const customCss = '';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
|
<div className="grafana-info-box grafana-info-box--max-lg">
|
||||||
<div className="page-header-canvas">
|
<LoggingCheatSheet onClickExample={this.props.onClickExample} />
|
||||||
<div className="page-container">
|
|
||||||
<div className="page-header">
|
|
||||||
<nav>
|
|
||||||
<ul className={`gf-tabs ${customCss}`}>
|
|
||||||
{TAB_MENU_ITEMS.map((tab, idx) => {
|
|
||||||
const tabClasses = classNames({
|
|
||||||
'gf-tabs-link': true,
|
|
||||||
active: tab.id === active,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li className="gf-tabs-item" key={tab.id}>
|
|
||||||
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
|
|
||||||
<i className={tab.icon} />
|
|
||||||
{tab.text}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="page-container page-body">
|
|
||||||
{active === 'start' && <LoggingCheatSheet onClickExample={this.props.onClickExample} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,7 @@ const tokenizer = {
|
|||||||
greedy: true,
|
greedy: true,
|
||||||
alias: 'attr-value',
|
alias: 'attr-value',
|
||||||
},
|
},
|
||||||
|
punctuation: /[{]/,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/,
|
// number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/,
|
||||||
|
@ -21,7 +21,7 @@ const CHEAT_SHEET_ITEMS = [
|
|||||||
|
|
||||||
export default (props: any) => (
|
export default (props: any) => (
|
||||||
<div>
|
<div>
|
||||||
<h1>PromQL Cheat Sheet</h1>
|
<h2>PromQL Cheat Sheet</h2>
|
||||||
{CHEAT_SHEET_ITEMS.map(item => (
|
{CHEAT_SHEET_ITEMS.map(item => (
|
||||||
<div className="cheat-sheet-item" key={item.expression}>
|
<div className="cheat-sheet-item" key={item.expression}>
|
||||||
<div className="cheat-sheet-item__title">{item.title}</div>
|
<div className="cheat-sheet-item__title">{item.title}</div>
|
||||||
|
@ -1,59 +1,15 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import PromCheatSheet from './PromCheatSheet';
|
import PromCheatSheet from './PromCheatSheet';
|
||||||
|
|
||||||
const TAB_MENU_ITEMS = [
|
interface Props {
|
||||||
{
|
onClickExample: () => void;
|
||||||
text: 'Start',
|
}
|
||||||
id: 'start',
|
|
||||||
icon: 'fa fa-rocket',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default class PromStart extends PureComponent<any, { active: string }> {
|
|
||||||
state = {
|
|
||||||
active: 'start',
|
|
||||||
};
|
|
||||||
|
|
||||||
onClickTab = active => {
|
|
||||||
this.setState({ active });
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default class PromStart extends PureComponent<Props> {
|
||||||
render() {
|
render() {
|
||||||
const { active } = this.state;
|
|
||||||
const customCss = '';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
|
<div className="grafana-info-box grafana-info-box--max-lg">
|
||||||
<div className="page-header-canvas">
|
<PromCheatSheet onClickExample={this.props.onClickExample} />
|
||||||
<div className="page-container">
|
|
||||||
<div className="page-header">
|
|
||||||
<nav>
|
|
||||||
<ul className={`gf-tabs ${customCss}`}>
|
|
||||||
{TAB_MENU_ITEMS.map((tab, idx) => {
|
|
||||||
const tabClasses = classNames({
|
|
||||||
'gf-tabs-link': true,
|
|
||||||
active: tab.id === active,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li className="gf-tabs-item" key={tab.id}>
|
|
||||||
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
|
|
||||||
<i className={tab.icon} />
|
|
||||||
{tab.text}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="page-container page-body">
|
|
||||||
{active === 'start' && <PromCheatSheet onClickExample={this.props.onClickExample} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -386,9 +386,10 @@ const tokenizer = {
|
|||||||
lookbehind: true,
|
lookbehind: true,
|
||||||
inside: {
|
inside: {
|
||||||
'label-key': {
|
'label-key': {
|
||||||
pattern: /[^,\s][^,]*[^,\s]*/,
|
pattern: /[^(),\s][^,)]*[^),\s]*/,
|
||||||
alias: 'attr-name',
|
alias: 'attr-name',
|
||||||
},
|
},
|
||||||
|
punctuation: /[()]/,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'context-labels': {
|
'context-labels': {
|
||||||
@ -403,6 +404,7 @@ const tokenizer = {
|
|||||||
greedy: true,
|
greedy: true,
|
||||||
alias: 'attr-value',
|
alias: 'attr-value',
|
||||||
},
|
},
|
||||||
|
punctuation: /[{]/,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'),
|
function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'),
|
||||||
|
@ -44,9 +44,10 @@ $brand-success: $green;
|
|||||||
$brand-warning: $brand-primary;
|
$brand-warning: $brand-primary;
|
||||||
$brand-danger: $red;
|
$brand-danger: $red;
|
||||||
|
|
||||||
$query-red: $red;
|
$query-red: #e24d42;
|
||||||
$query-green: $green;
|
$query-green: #74e680;
|
||||||
$query-purple: $purple;
|
$query-purple: #fe85fc;
|
||||||
|
$query-keyword: #66d9ef;
|
||||||
$query-orange: $orange;
|
$query-orange: $orange;
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue;
|
|||||||
// Typeahead
|
// Typeahead
|
||||||
$typeahead-shadow: 0 5px 10px 0 $black;
|
$typeahead-shadow: 0 5px 10px 0 $black;
|
||||||
$typeahead-selected-bg: $dark-4;
|
$typeahead-selected-bg: $dark-4;
|
||||||
$typeahead-selected-color: $blue;
|
$typeahead-selected-color: $yellow;
|
||||||
|
|
||||||
// Dropdowns
|
// Dropdowns
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
@ -49,6 +49,7 @@ $query-red: $red;
|
|||||||
$query-green: $green;
|
$query-green: $green;
|
||||||
$query-purple: $purple;
|
$query-purple: $purple;
|
||||||
$query-orange: $orange;
|
$query-orange: $orange;
|
||||||
|
$query-keyword: $blue;
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@ -219,8 +220,8 @@ $search-filter-box-bg: $gray-7;
|
|||||||
|
|
||||||
// Typeahead
|
// Typeahead
|
||||||
$typeahead-shadow: 0 5px 10px 0 $gray-5;
|
$typeahead-shadow: 0 5px 10px 0 $gray-5;
|
||||||
$typeahead-selected-bg: lighten($blue, 57%);
|
$typeahead-selected-bg: $gray-6;
|
||||||
$typeahead-selected-color: $blue;
|
$typeahead-selected-color: $yellow;
|
||||||
|
|
||||||
// Dropdowns
|
// Dropdowns
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
@ -32,6 +32,10 @@
|
|||||||
a {
|
a {
|
||||||
@extend .external-link;
|
@extend .external-link;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--max-lg {
|
||||||
|
max-width: map-get($grid-breakpoints, 'lg');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grafana-info-box__close {
|
.grafana-info-box__close {
|
||||||
|
@ -12,8 +12,8 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
color: $text-color-weak;
|
color: $text-color;
|
||||||
background-color: $panel-bg;
|
background-color: $input-bg;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: $panel-border;
|
border: $panel-border;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
@ -95,45 +95,45 @@
|
|||||||
color: $text-color-weak;
|
color: $text-color-weak;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.punctuation {
|
.token.variable,
|
||||||
color: $text-color-weak;
|
.token.entity {
|
||||||
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.property,
|
.token.property,
|
||||||
.token.tag,
|
.token.tag,
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.function-name,
|
|
||||||
.token.constant,
|
.token.constant,
|
||||||
.token.symbol,
|
.token.symbol,
|
||||||
.token.deleted {
|
.token.deleted {
|
||||||
color: $query-red;
|
color: $query-red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.token.attr-value,
|
||||||
.token.selector,
|
.token.selector,
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
.token.string,
|
||||||
.token.char,
|
.token.char,
|
||||||
.token.function,
|
|
||||||
.token.builtin,
|
.token.builtin,
|
||||||
.token.inserted {
|
.token.inserted {
|
||||||
color: $query-green;
|
color: $query-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
.token.operator,
|
.token.operator,
|
||||||
.token.entity,
|
.token.url {
|
||||||
.token.url,
|
|
||||||
.token.variable {
|
|
||||||
color: $query-purple;
|
color: $query-purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.function-name,
|
||||||
.token.atrule,
|
.token.atrule,
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword,
|
.token.keyword,
|
||||||
.token.class-name {
|
.token.class-name {
|
||||||
color: $blue;
|
color: $query-keyword;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.token.punctuation,
|
||||||
.token.regex,
|
.token.regex,
|
||||||
.token.important {
|
.token.important {
|
||||||
color: $query-orange;
|
color: $query-orange;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
padding: 2rem;
|
padding: $dashboard-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
@ -36,10 +36,6 @@
|
|||||||
transition: all 0.1s linear;
|
transition: all 0.1s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.explore-panel__header:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.explore-panel__header-label {
|
.explore-panel__header-label {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-right: $panel-margin;
|
margin-right: $panel-margin;
|
||||||
@ -308,7 +304,7 @@
|
|||||||
|
|
||||||
color: $typeahead-selected-color;
|
color: $typeahead-selected-color;
|
||||||
border-bottom: 1px solid $typeahead-selected-color;
|
border-bottom: 1px solid $typeahead-selected-color;
|
||||||
background-color: lighten($typeahead-selected-color, 60%);
|
background-color: rgba($typeahead-selected-color, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logs-row-level {
|
.logs-row-level {
|
||||||
|
Loading…
Reference in New Issue
Block a user