From 44414c4346a5b7bbeeb240ed579aa43ca09d6c75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 3 Dec 2018 17:20:02 +0100 Subject: [PATCH 1/7] Misc styling fixes to explore: start page, slate code editor colors, text highlight in auto completeter suggestion --- .../prometheus/components/PromStart.tsx | 53 ++----------------- public/sass/_variables.dark.scss | 9 ++-- public/sass/_variables.light.scss | 7 +-- public/sass/components/_slate_editor.scss | 26 ++++----- public/sass/pages/_explore.scss | 2 +- 5 files changed, 26 insertions(+), 71 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx index fbd4d8ba201..b2b6f31574c 100644 --- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx @@ -1,59 +1,12 @@ 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 }); - }; - +export default class PromStart extends PureComponent { render() { - const { active } = this.state; - const customCss = ''; - return ( -
-
-
-
- -
-
-
-
- {active === 'start' && } -
+
+ } etdiv>
); } 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..24485b1c826 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 // ------------------------- @@ -217,10 +218,10 @@ $tab-border-color: $gray-5; $search-shadow: 0 5px 30px 0 $gray-4; $search-filter-box-bg: $gray-7; -// Typeahead +// ypeahead $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/_slate_editor.scss b/public/sass/components/_slate_editor.scss index b70990d4618..47c52a1a397 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -12,7 +12,7 @@ width: 100%; cursor: text; line-height: $line-height-base; - color: $text-color-weak; + color: $text-color; background-color: $panel-bg; background-image: none; border: $panel-border; @@ -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 91af104a98e..3fc391f4f26 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 { From 729d1d1da9de10f55a116976b429b8135e5b15b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 3 Dec 2018 11:55:30 -0800 Subject: [PATCH 2/7] another style fix for broken dark theme word highlight --- public/sass/pages/_explore.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 3fc391f4f26..789fa85dd9c 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -326,7 +326,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 { From 1828ace4b396c2ef0dc809247f751822b638c583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 Dec 2018 09:41:36 +0100 Subject: [PATCH 3/7] fix: align input backgrounds for code editors --- public/app/core/components/code_editor/theme-grafana-dark.js | 2 +- public/sass/components/_slate_editor.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index 47c52a1a397..25b20f180ef 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -13,7 +13,7 @@ cursor: text; line-height: $line-height-base; color: $text-color; - background-color: $panel-bg; + background-color: $input-bg; background-image: none; border: $panel-border; border-radius: $border-radius; From 1283a3292dc720d7ebd64cb0a6e23e839cde15b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 Dec 2018 10:16:51 +0100 Subject: [PATCH 4/7] fixed grabage in markup --- .../app/plugins/datasource/prometheus/components/PromStart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx index b2b6f31574c..19d704d7c0e 100644 --- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx @@ -6,7 +6,7 @@ export default class PromStart extends PureComponent { render() { return (
- } etdiv> +
); } From 47523f80ddbf4396053e0335aeb3d203d3e8f6e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 Dec 2018 12:59:24 +0100 Subject: [PATCH 5/7] fixed logging start page --- .../logging/components/LoggingCheatSheet.tsx | 2 +- .../logging/components/LoggingStartPage.tsx | 56 ++----------------- .../prometheus/components/PromCheatSheet.tsx | 2 +- .../prometheus/components/PromStart.tsx | 7 ++- public/sass/_variables.light.scss | 2 +- 5 files changed, 14 insertions(+), 55 deletions(-) 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..fee64af27ca 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/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 19d704d7c0e..eed654f7cfa 100644 --- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx @@ -1,8 +1,11 @@ import React, { PureComponent } from 'react'; - import PromCheatSheet from './PromCheatSheet'; -export default class PromStart extends PureComponent { +interface Props { + onClickExample: () => void; +} + +export default class PromStart extends PureComponent { render() { return (
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 24485b1c826..c70f75c9946 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -218,7 +218,7 @@ $tab-border-color: $gray-5; $search-shadow: 0 5px 30px 0 $gray-4; $search-filter-box-bg: $gray-7; -// ypeahead +// Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; $typeahead-selected-bg: $gray-6; $typeahead-selected-color: $yellow; From 1fddb6144d14757731a156d27d876b43e89b2403 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 Dec 2018 14:57:01 +0100 Subject: [PATCH 6/7] fixed promql and loggging syntax so all punctuation chars are treated the same, remove hover move --- public/app/plugins/datasource/logging/syntax.ts | 1 + public/app/plugins/datasource/prometheus/promql.ts | 4 +++- public/sass/pages/_explore.scss | 4 ---- 3 files changed, 4 insertions(+), 5 deletions(-) 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/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/pages/_explore.scss b/public/sass/pages/_explore.scss index b62483d2a67..5617939e9ec 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -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; From 401b470ebbdf0948fc8b8c11ddb54a6447ec2164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 Dec 2018 15:04:55 +0100 Subject: [PATCH 7/7] added max-widths to explore start pages boxes --- .../datasource/logging/components/LoggingStartPage.tsx | 2 +- .../plugins/datasource/prometheus/components/PromStart.tsx | 2 +- public/sass/components/_infobox.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx index fee64af27ca..b9d951b7d92 100644 --- a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx +++ b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx @@ -8,7 +8,7 @@ interface Props { export default class LoggingStartPage extends PureComponent { render() { return ( -
+
); diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx index eed654f7cfa..9acfc534853 100644 --- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx @@ -8,7 +8,7 @@ interface Props { export default class PromStart extends PureComponent { render() { return ( -
+
); 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 {