diff --git a/public/app/core/components/code_editor/theme-grafana-dark.js b/public/app/core/components/code_editor/theme-grafana-dark.js index a48715e698e..33d4a84b527 100644 --- a/public/app/core/components/code_editor/theme-grafana-dark.js +++ b/public/app/core/components/code_editor/theme-grafana-dark.js @@ -14,7 +14,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"] background: #555651\ }\ .gf-code-dark {\ - background-color: #111;\ + background-color: #09090b;\ color: #e0e0e0\ }\ .gf-code-dark .ace_cursor {\ diff --git a/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx b/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx index 651c28783d9..4dbf8d1ab89 100644 --- a/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx +++ b/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx @@ -15,7 +15,7 @@ const CHEAT_SHEET_ITEMS = [ export default (props: any) => (
-

Logging Cheat Sheet

+

Logging Cheat Sheet

{CHEAT_SHEET_ITEMS.map(item => (
{item.title}
diff --git a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx index 2c25a248fa9..b9d951b7d92 100644 --- a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx +++ b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx @@ -1,59 +1,15 @@ import React, { PureComponent } from 'react'; -import classNames from 'classnames'; - import LoggingCheatSheet from './LoggingCheatSheet'; -const TAB_MENU_ITEMS = [ - { - text: 'Start', - id: 'start', - icon: 'fa fa-rocket', - }, -]; - -export default class LoggingStartPage extends PureComponent { - state = { - active: 'start', - }; - - onClickTab = active => { - this.setState({ active }); - }; +interface Props { + onClickExample: () => void; +} +export default class LoggingStartPage extends PureComponent { render() { - const { active } = this.state; - const customCss = ''; - return ( -
-
-
-
- -
-
-
-
- {active === 'start' && } -
+
+
); } diff --git a/public/app/plugins/datasource/logging/syntax.ts b/public/app/plugins/datasource/logging/syntax.ts index aca7d09ef4d..0748b4e5ffd 100644 --- a/public/app/plugins/datasource/logging/syntax.ts +++ b/public/app/plugins/datasource/logging/syntax.ts @@ -18,6 +18,7 @@ const tokenizer = { greedy: true, alias: 'attr-value', }, + punctuation: /[{]/, }, }, // number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/, diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx index ea9a373e67a..41606d198c6 100644 --- a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx @@ -21,7 +21,7 @@ const CHEAT_SHEET_ITEMS = [ export default (props: any) => (
-

PromQL Cheat Sheet

+

PromQL Cheat Sheet

{CHEAT_SHEET_ITEMS.map(item => (
{item.title}
diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx index fbd4d8ba201..9acfc534853 100644 --- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx @@ -1,59 +1,15 @@ import React, { PureComponent } from 'react'; -import classNames from 'classnames'; - import PromCheatSheet from './PromCheatSheet'; -const TAB_MENU_ITEMS = [ - { - text: 'Start', - id: 'start', - icon: 'fa fa-rocket', - }, -]; - -export default class PromStart extends PureComponent { - state = { - active: 'start', - }; - - onClickTab = active => { - this.setState({ active }); - }; +interface Props { + onClickExample: () => void; +} +export default class PromStart extends PureComponent { render() { - const { active } = this.state; - const customCss = ''; - return ( -
-
-
-
- -
-
-
-
- {active === 'start' && } -
+
+
); } diff --git a/public/app/plugins/datasource/prometheus/promql.ts b/public/app/plugins/datasource/prometheus/promql.ts index 41463877a8f..ae0c883525a 100644 --- a/public/app/plugins/datasource/prometheus/promql.ts +++ b/public/app/plugins/datasource/prometheus/promql.ts @@ -386,9 +386,10 @@ const tokenizer = { lookbehind: true, inside: { 'label-key': { - pattern: /[^,\s][^,]*[^,\s]*/, + pattern: /[^(),\s][^,)]*[^),\s]*/, alias: 'attr-name', }, + punctuation: /[()]/, }, }, 'context-labels': { @@ -403,6 +404,7 @@ const tokenizer = { greedy: true, alias: 'attr-value', }, + punctuation: /[{]/, }, }, function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'), diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 1896e74d640..3fc3770176d 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -44,9 +44,10 @@ $brand-success: $green; $brand-warning: $brand-primary; $brand-danger: $red; -$query-red: $red; -$query-green: $green; -$query-purple: $purple; +$query-red: #e24d42; +$query-green: #74e680; +$query-purple: #fe85fc; +$query-keyword: #66d9ef; $query-orange: $orange; // Status colors @@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; $typeahead-selected-bg: $dark-4; -$typeahead-selected-color: $blue; +$typeahead-selected-color: $yellow; // Dropdowns // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 45021a210fd..c70f75c9946 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -49,6 +49,7 @@ $query-red: $red; $query-green: $green; $query-purple: $purple; $query-orange: $orange; +$query-keyword: $blue; // Status colors // ------------------------- @@ -219,8 +220,8 @@ $search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; -$typeahead-selected-bg: lighten($blue, 57%); -$typeahead-selected-color: $blue; +$typeahead-selected-bg: $gray-6; +$typeahead-selected-color: $yellow; // Dropdowns // ------------------------- diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index fb2222dd9db..6f7a7bf86dc 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -32,6 +32,10 @@ a { @extend .external-link; } + + &--max-lg { + max-width: map-get($grid-breakpoints, 'lg'); + } } .grafana-info-box__close { diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index b70990d4618..25b20f180ef 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -12,8 +12,8 @@ width: 100%; cursor: text; line-height: $line-height-base; - color: $text-color-weak; - background-color: $panel-bg; + color: $text-color; + background-color: $input-bg; background-image: none; border: $panel-border; border-radius: $border-radius; @@ -95,45 +95,45 @@ color: $text-color-weak; } - .token.punctuation { - color: $text-color-weak; + .token.variable, + .token.entity { + color: $text-color; } .token.property, .token.tag, - .token.boolean, - .token.number, - .token.function-name, .token.constant, .token.symbol, .token.deleted { color: $query-red; } + .token.attr-value, .token.selector, - .token.attr-name, .token.string, .token.char, - .token.function, .token.builtin, .token.inserted { color: $query-green; } + .token.boolean, + .token.number, .token.operator, - .token.entity, - .token.url, - .token.variable { + .token.url { color: $query-purple; } + .token.function, + .token.attr-name, + .token.function-name, .token.atrule, - .token.attr-value, .token.keyword, .token.class-name { - color: $blue; + color: $query-keyword; } + .token.punctuation, .token.regex, .token.important { color: $query-orange; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 9e70697cafb..da73d7cae37 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -2,7 +2,7 @@ width: 100%; &-container { - padding: 2rem; + padding: $dashboard-padding; } &-wrapper { @@ -36,10 +36,6 @@ transition: all 0.1s linear; } - .explore-panel__header:hover { - transform: translateY(-1px); - } - .explore-panel__header-label { font-weight: 500; margin-right: $panel-margin; @@ -308,7 +304,7 @@ color: $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 {