From f80c8cc06c3c127857b2716020c0490e5a590038 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 11 Feb 2019 10:32:17 +0100 Subject: [PATCH 01/70] v1 --- package.json | 10 +- .../src/themes/_variables.dark.scss.tmpl.ts | 387 +++++++++ packages/grafana-ui/src/themes/dark.ts | 2 +- public/sass/_variables.dark.scss | 765 +++++++++--------- scripts/cli/nodemon.json | 7 + scripts/cli/tsconfig.json | 6 + scripts/cli/watch.ts | 24 + yarn.lock | 92 ++- 8 files changed, 897 insertions(+), 396 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts create mode 100644 scripts/cli/nodemon.json create mode 100644 scripts/cli/tsconfig.json create mode 100644 scripts/cli/watch.ts diff --git a/package.json b/package.json index 5ac751ced3f..bd11bb3e431 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,13 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", + "@types/chokidar": "^1.7.5", "@types/classnames": "^2.2.6", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/jquery": "^1.10.35", - "@types/node": "^8.0.31", + "@types/node": "^10.12.24", "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "@types/react-grid-layout": "^0.16.6", @@ -35,6 +36,7 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", + "chokidar": "^2.1.0", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.7", "enzyme": "^3.6.0", @@ -69,6 +71,7 @@ "jest-date-mock": "^1.0.6", "lint-staged": "^6.0.0", "load-grunt-tasks": "3.5.2", + "log-timestamp": "^0.2.1", "mini-css-extract-plugin": "^0.4.0", "mocha": "^4.0.1", "monaco-editor": "^0.15.6", @@ -95,6 +98,7 @@ "systemjs-plugin-css": "^0.1.36", "ts-jest": "^23.10.4", "ts-loader": "^5.1.0", + "ts-node": "^8.0.2", "tslib": "^1.9.3", "tslint": "^5.8.0", "tslint-loader": "^3.5.3", @@ -120,7 +124,9 @@ "jest": "jest --notify --watch", "api-tests": "jest --notify --watch --config=tests/api/jest.js", "precommit": "grunt precommit", - "storybook": "cd packages/grafana-ui && yarn storybook" + "storybook": "cd packages/grafana-ui && yarn storybook", + "tmp": "nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run tmp:exec", + "tmp:exec": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/watch.ts" }, "husky": { "hooks": { diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts new file mode 100644 index 00000000000..327b783be3c --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -0,0 +1,387 @@ +import { GrafanaTheme } from '../types'; + +export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` + // Global values + // -------------------------------------------------- + + $theme-name: dark; + + // Grays + // ------------------------- + $black: #000; + $dark-1: #141414; + $dark-2: #1f1f20; + $dark-3: #262628; + $dark-4: #333333; + $dark-5: #444444; + $gray-1: #555555; + $gray-2: #8e8e8e; + $gray-3: #b3b3b3; + $gray-4: #d8d9da; + $gray-5: #ececec; + $gray-7: #fbfbfb; + + $gray-blue: #212327; + $input-black: #09090b; + + $white: #fff; + + // Accent colors + // ------------------------- + $blue: ${theme.colors.blue}; + $blue-dark: #005f81; + $green: #299c46; + $red: #d44a3a; + $yellow: #ecbb13; + $purple: #9933cc; + $variable: #32d1df; + $orange: #eb7b18; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $brand-primary; + $brand-danger: $red; + + $query-red: #e24d42; + $query-green: #74e680; + $query-purple: #fe85fc; + $query-keyword: #66d9ef; + $query-orange: $orange; + + // Status colors + // ------------------------- + $online: #10a345; + $warn: #f79520; + $critical: #ed2e18; + + // Scaffolding + // ------------------------- + $body-bg: rgb(23, 24, 25); + $page-bg: rgb(22, 23, 25); + + $body-color: $gray-4; + $text-color: $gray-4; + $text-color-strong: $white; + $text-color-weak: $gray-2; + $text-color-faint: $dark-5; + $text-color-emphasis: $gray-5; + + $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% + ); + + $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); + $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + + // Links + // ------------------------- + $link-color: darken($white, 11%); + $link-color-disabled: darken($link-color, 30%); + $link-hover-color: $white; + $external-link-color: $blue; + + // Typography + // ------------------------- + $headings-color: darken($white, 11%); + $abbr-border-color: $gray-3 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-4; + + // Panel + // ------------------------- + $panel-bg: #212124; + $panel-border: solid 1px $dark-1; + $panel-header-hover-bg: $dark-4; + $panel-corner: $panel-bg; + + // page header + $page-header-bg: linear-gradient(90deg, #292a2d, black); + $page-header-shadow: inset 0px -4px 14px $dark-2; + $page-header-border-color: $dark-4; + + $divider-border-color: $gray-1; + + // Graphite Target Editor + $tight-form-bg: $dark-3; + $tight-form-func-bg: $dark-4; + $tight-form-func-highlight-bg: $dark-5; + + $modal-backdrop-bg: #353c42; + $code-tag-bg: $dark-1; + $code-tag-border: $dark-4; + + // cards + $card-background: linear-gradient(135deg, #2f2f32, #262628); + $card-background-hover: linear-gradient(135deg, #343436, #262628); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + + // Lists + $list-item-bg: $card-background; + $list-item-hover-bg: lighten($gray-blue, 2%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-blue; + + // Scrollbars + $scrollbarBackground: #404357; + $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $dark-3; // for striping + $table-border: $dark-3; // table and cell border + + $table-bg-odd: $dark-2; + $table-bg-hover: $dark-3; + + // Buttons + // ------------------------- + $btn-primary-bg: #ff6600; + $btn-primary-bg-hl: #bc3e06; + + $btn-secondary-bg-hl: lighten($blue-dark, 5%); + $btn-secondary-bg: $blue-dark; + + $btn-success-bg: $green; + $btn-success-bg-hl: darken($green, 6%); + + $btn-warning-bg: $brand-warning; + $btn-warning-bg-hl: lighten($brand-warning, 8%); + + $btn-danger-bg: $red; + $btn-danger-bg-hl: darken($red, 8%); + + $btn-inverse-bg: $dark-3; + $btn-inverse-bg-hl: lighten($dark-3, 4%); + $btn-inverse-text-color: $link-color; + $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + + $btn-link-color: $gray-3; + + $iconContainerBackground: $black; + + $btn-divider-left: $dark-4; + $btn-divider-right: $dark-2; + + $btn-drag-image: '../img/grab_dark.svg'; + + // Forms + // ------------------------- + $input-bg: $input-black; + $input-bg-disabled: $dark-3; + + $input-color: $gray-4; + $input-border-color: $dark-3; + $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); + $input-border-focus: $input-border-color; + $input-box-shadow-focus: rgba(102, 175, 233, 0.6); + $input-color-placeholder: $gray-1 !default; + $input-label-bg: $gray-blue; + $input-label-border-color: $dark-3; + $input-color-select-arrow: $white; + + // Input placeholder text color + $placeholderText: darken($text-color, 25%); + + // Search + $search-shadow: 0 0 30px 0 $black; + $search-filter-box-bg: $gray-blue; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $black; + $typeahead-selected-bg: $dark-4; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $dark-3; + $dropdownBorder: rgba(0, 0, 0, 0.2); + $dropdownDividerTop: transparent; + $dropdownDividerBottom: #444; + + $dropdownLinkColor: $text-color; + $dropdownLinkColorHover: $white; + $dropdownLinkColorActive: $white; + + $dropdownLinkBackgroundHover: $dark-4; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 55px; + + $navbarBackground: $panel-bg; + $navbarBorder: 1px solid $dark-3; + $navbarShadow: 0 0 20px black; + + $navbarLinkColor: $gray-4; + + $navbarButtonBackground: $navbarBackground; + $navbarButtonBackgroundHighlight: $body-bg; + + $navbar-button-border: #2f2f32; + + // Sidemenu + // ------------------------- + $side-menu-bg: $black; + $side-menu-bg-mobile: $side-menu-bg; + $side-menu-item-hover-bg: $dark-2; + $side-menu-shadow: 0 0 20px black; + $side-menu-link-color: $link-color; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $body-bg; + $menu-dropdown-hover-bg: $dark-2; + $menu-dropdown-shadow: 5px 5px 20px -5px $black; + + // Tabs + // ------------------------- + $tab-border-color: $dark-4; + + // Toolbar + $toolbar-bg: $input-black; + + // Form states and alerts + // ------------------------- + $warning-text-color: $warn; + $error-text-color: #e84d4d; + $success-text-color: #12d95a; + $info-text-color: $blue-dark; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $dark-4; + $popover-shadow: 0 0 20px black; + + $popover-help-bg: $btn-secondary-bg; + $popover-help-color: $text-color; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: $link-color; + $graph-tooltip-bg: $dark-1; + + $tooltipBackground: $black; + $tooltipColor: $gray-4; + $tooltipArrowColor: $tooltipBackground; + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox.png'; + + // info box + $info-box-border-color: darken($blue, 12%); + + // footer + $footer-link-color: $gray-2; + $footer-link-hover: $gray-4; + + // json-explorer + $json-explorer-default-color: $text-color; + $json-explorer-string-color: #23d662; + $json-explorer-number-color: $variable; + $json-explorer-boolean-color: $variable; + $json-explorer-null-color: #eec97d; + $json-explorer-undefined-color: rgb(239, 143, 190); + $json-explorer-function-color: #fd48cb; + $json-explorer-rotate-time: 100ms; + $json-explorer-toggler-opacity: 0.6; + $json-explorer-bracket-color: #9494ff; + $json-explorer-key-color: #23a0db; + $json-explorer-url-color: #027bff; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $dark-2; + $diff-label-fg: $white; + + $diff-group-bg: $dark-4; + $diff-arrow-color: $white; + + $diff-json-bg: $dark-4; + $diff-json-fg: $gray-5; + + $diff-json-added: #457740; + $diff-json-deleted: #a04338; + + $diff-json-old: #a04338; + $diff-json-new: #457740; + + $diff-json-changed-fg: $gray-5; + $diff-json-changed-num: $text-color; + + $diff-json-icon: $gray-7; + + //Submenu + $variable-option-bg: $blue-dark; + + //Switch Slider + // ------------------------- + $switch-bg: $input-bg; + $switch-slider-color: $dark-2; + $switch-slider-off-bg: $gray-1; + $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); + $switch-slider-shadow: 0 0 3px black; + + //Checkbox + // ------------------------- + $checkbox-bg: $dark-1; + $checkbox-border: 1px solid $gray-1; + $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); + $checkbox-color: $dark-1; + + //Panel Edit + // ------------------------- + $panel-editor-shadow: 0 0 20px black; + $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); + $panel-editor-viz-item-shadow: 0 0 8px $dark-5; + $panel-editor-viz-item-border: 1px solid $dark-5; + $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; + $panel-editor-viz-item-border-hover: 1px solid $blue; + $panel-editor-viz-item-bg: $input-black; + $panel-editor-tabs-line-color: #e3e3e3; + $panel-editor-viz-item-bg-hover: darken($blue, 47%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-blue; + + $panel-grid-placeholder-bg: darken($blue, 47%); + $panel-grid-placeholder-shadow: 0 0 4px $blue; + + // logs + $logs-color-unkown: $gray-2; + + // toggle-group + $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); + $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; + $button-toggle-group-btn-seperator-border: 1px solid $page-bg; + + $vertical-resize-handle-bg: $dark-5; + $vertical-resize-handle-dots: $gray-1; +$vertical-resize-handle-dots-hover: $gray-2; +`; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index deae022f63a..97a0d54db18 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -18,7 +18,7 @@ const basicColors = { gray6: '#f4f5f8', gray7: '#fbfbfb', grayBlue: '#212327', - blue: '#33b5e5', + blue: '#ff0000', blueDark: '#005f81', blueLight: '#00a8e6', // not used in dark theme green: '#299c46', diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 149a1247b8e..ce5ccfdf1f9 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -1,383 +1,384 @@ -// Global values -// -------------------------------------------------- - -$theme-name: dark; - -// Grays -// ------------------------- -$black: #000; -$dark-1: #141414; -$dark-2: #1f1f20; -$dark-3: #262628; -$dark-4: #333333; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #d8d9da; -$gray-5: #ececec; -$gray-7: #fbfbfb; - -$gray-blue: #212327; -$input-black: #09090b; - -$white: #fff; - -// Accent colors -// ------------------------- -$blue: #33b5e5; -$blue-dark: #005f81; -$green: #299c46; -$red: #d44a3a; -$yellow: #ecbb13; -$purple: #9933cc; -$variable: #32d1df; -$orange: #eb7b18; - -$brand-primary: $orange; -$brand-success: $green; -$brand-warning: $brand-primary; -$brand-danger: $red; - -$query-red: #e24d42; -$query-green: #74e680; -$query-purple: #fe85fc; -$query-keyword: #66d9ef; -$query-orange: $orange; - -// Status colors -// ------------------------- -$online: #10a345; -$warn: #f79520; -$critical: #ed2e18; - -// Scaffolding -// ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); - -$body-color: $gray-4; -$text-color: $gray-4; -$text-color-strong: $white; -$text-color-weak: $gray-2; -$text-color-faint: $dark-5; -$text-color-emphasis: $gray-5; - -$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); -$textShadow: none; - -// gradients -$brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 0.7) 0%, - rgba(255, 68, 0, 0.7) 99%, - rgba(255, 68, 0, 0.7) 100% -); - -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); - -// Links -// ------------------------- -$link-color: darken($white, 11%); -$link-color-disabled: darken($link-color, 30%); -$link-hover-color: $white; -$external-link-color: $blue; - -// Typography -// ------------------------- -$headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; -$text-muted: $text-color-weak; - -$hr-border-color: $dark-4; - -// Panel -// ------------------------- -$panel-bg: #212124; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; -$panel-corner: $panel-bg; - -// page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; - -$divider-border-color: $gray-1; - -// Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; - -$modal-backdrop-bg: #353c42; -$code-tag-bg: $dark-1; -$code-tag-border: $dark-4; - -// cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - -// Lists -$list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); -$list-item-link-color: $text-color; -$list-item-shadow: $card-shadow; - -$empty-list-cta-bg: $gray-blue; - -// Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; - -// Tables -// ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border - -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; - -// Buttons -// ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; - -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; - -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); - -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); - -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); -$btn-inverse-text-color: $link-color; -$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); - -$btn-link-color: $gray-3; - -$iconContainerBackground: $black; - -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; - -$btn-drag-image: '../img/grab_dark.svg'; - -// Forms -// ------------------------- -$input-bg: $input-black; -$input-bg-disabled: $dark-3; - -$input-color: $gray-4; -$input-border-color: $dark-3; -$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); -$input-color-placeholder: $gray-1 !default; -$input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; -$input-color-select-arrow: $white; - -// Input placeholder text color -$placeholderText: darken($text-color, 25%); - -// Search -$search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; - -// Typeahead -$typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; -$typeahead-selected-color: $yellow; - -// Dropdowns -// ------------------------- -$dropdownBackground: $dark-3; -$dropdownBorder: rgba(0, 0, 0, 0.2); -$dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; - -$dropdownLinkColor: $text-color; -$dropdownLinkColorHover: $white; -$dropdownLinkColorActive: $white; - -$dropdownLinkBackgroundHover: $dark-4; - -// Horizontal forms & lists -// ------------------------- -$horizontalComponentOffset: 180px; - -// Navbar -// ------------------------- -$navbarHeight: 55px; - -$navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; - -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - -$navbar-button-border: #2f2f32; - -// Sidemenu -// ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; -$side-menu-shadow: 0 0 20px black; -$side-menu-link-color: $link-color; - -// Menu dropdowns -// ------------------------- -$menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; -$menu-dropdown-shadow: 5px 5px 20px -5px $black; - -// Tabs -// ------------------------- -$tab-border-color: $dark-4; - -// Toolbar -$toolbar-bg: $input-black; - -// Form states and alerts -// ------------------------- -$warning-text-color: $warn; -$error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; - -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - -// popover -$popover-bg: $page-bg; -$popover-color: $text-color; -$popover-border-color: $dark-4; -$popover-shadow: 0 0 20px black; - -$popover-help-bg: $btn-secondary-bg; -$popover-help-color: $text-color; - -$popover-error-bg: $btn-danger-bg; - -// Tooltips and popovers -// ------------------------- -$tooltipColor: $popover-help-color; -$tooltipArrowWidth: 5px; -$tooltipLinkColor: $link-color; -$graph-tooltip-bg: $dark-1; - -$tooltipBackground: $black; -$tooltipColor: $gray-4; -$tooltipArrowColor: $tooltipBackground; -$tooltipBackgroundError: $brand-danger; - -// images -$checkboxImageUrl: '../img/checkbox.png'; - -// info box -$info-box-border-color: darken($blue, 12%); - -// footer -$footer-link-color: $gray-2; -$footer-link-hover: $gray-4; - -// json-explorer -$json-explorer-default-color: $text-color; -$json-explorer-string-color: #23d662; -$json-explorer-number-color: $variable; -$json-explorer-boolean-color: $variable; -$json-explorer-null-color: #eec97d; -$json-explorer-undefined-color: rgb(239, 143, 190); -$json-explorer-function-color: #fd48cb; -$json-explorer-rotate-time: 100ms; -$json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: #9494ff; -$json-explorer-key-color: #23a0db; -$json-explorer-url-color: #027bff; - -// Changelog and diff -// ------------------------- -$diff-label-bg: $dark-2; -$diff-label-fg: $white; - -$diff-group-bg: $dark-4; -$diff-arrow-color: $white; - -$diff-json-bg: $dark-4; -$diff-json-fg: $gray-5; - -$diff-json-added: #457740; -$diff-json-deleted: #a04338; - -$diff-json-old: #a04338; -$diff-json-new: #457740; - -$diff-json-changed-fg: $gray-5; -$diff-json-changed-num: $text-color; - -$diff-json-icon: $gray-7; - -//Submenu -$variable-option-bg: $blue-dark; - -//Switch Slider -// ------------------------- -$switch-bg: $input-bg; -$switch-slider-color: $dark-2; -$switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); -$switch-slider-shadow: 0 0 3px black; - -//Checkbox -// ------------------------- -$checkbox-bg: $dark-1; -$checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); -$checkbox-color: $dark-1; - -//Panel Edit -// ------------------------- -$panel-editor-shadow: 0 0 20px black; -$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); -$panel-editor-viz-item-shadow: 0 0 8px $dark-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; -$panel-editor-viz-item-bg: $input-black; -$panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); - -$panel-options-group-border: none; -$panel-options-group-header-bg: $gray-blue; - -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; - -// logs -$logs-color-unkown: $gray-2; - -// toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); -$button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; - -$vertical-resize-handle-bg: $dark-5; -$vertical-resize-handle-dots: $gray-1; + + // Global values + // -------------------------------------------------- + + $theme-name: dark; + + // Grays + // ------------------------- + $black: #000; + $dark-1: #141414; + $dark-2: #1f1f20; + $dark-3: #262628; + $dark-4: #333333; + $dark-5: #444444; + $gray-1: #555555; + $gray-2: #8e8e8e; + $gray-3: #b3b3b3; + $gray-4: #d8d9da; + $gray-5: #ececec; + $gray-7: #fbfbfb; + + $gray-blue: #212327; + $input-black: #09090b; + + $white: #fff; + + // Accent colors + // ------------------------- + $blue: #ff0000; + $blue-dark: #005f81; + $green: #299c46; + $red: #d44a3a; + $yellow: #ecbb13; + $purple: #9933cc; + $variable: #32d1df; + $orange: #eb7b18; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $brand-primary; + $brand-danger: $red; + + $query-red: #e24d42; + $query-green: #74e680; + $query-purple: #fe85fc; + $query-keyword: #66d9ef; + $query-orange: $orange; + + // Status colors + // ------------------------- + $online: #10a345; + $warn: #f79520; + $critical: #ed2e18; + + // Scaffolding + // ------------------------- + $body-bg: rgb(23, 24, 25); + $page-bg: rgb(22, 23, 25); + + $body-color: $gray-4; + $text-color: $gray-4; + $text-color-strong: $white; + $text-color-weak: $gray-2; + $text-color-faint: $dark-5; + $text-color-emphasis: $gray-5; + + $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% + ); + + $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); + $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + + // Links + // ------------------------- + $link-color: darken($white, 11%); + $link-color-disabled: darken($link-color, 30%); + $link-hover-color: $white; + $external-link-color: $blue; + + // Typography + // ------------------------- + $headings-color: darken($white, 11%); + $abbr-border-color: $gray-3 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-4; + + // Panel + // ------------------------- + $panel-bg: #212124; + $panel-border: solid 1px $dark-1; + $panel-header-hover-bg: $dark-4; + $panel-corner: $panel-bg; + + // page header + $page-header-bg: linear-gradient(90deg, #292a2d, black); + $page-header-shadow: inset 0px -4px 14px $dark-2; + $page-header-border-color: $dark-4; + + $divider-border-color: $gray-1; + + // Graphite Target Editor + $tight-form-bg: $dark-3; + $tight-form-func-bg: $dark-4; + $tight-form-func-highlight-bg: $dark-5; + + $modal-backdrop-bg: #353c42; + $code-tag-bg: $dark-1; + $code-tag-border: $dark-4; + + // cards + $card-background: linear-gradient(135deg, #2f2f32, #262628); + $card-background-hover: linear-gradient(135deg, #343436, #262628); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + + // Lists + $list-item-bg: $card-background; + $list-item-hover-bg: lighten($gray-blue, 2%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-blue; + + // Scrollbars + $scrollbarBackground: #404357; + $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $dark-3; // for striping + $table-border: $dark-3; // table and cell border + + $table-bg-odd: $dark-2; + $table-bg-hover: $dark-3; + + // Buttons + // ------------------------- + $btn-primary-bg: #ff6600; + $btn-primary-bg-hl: #bc3e06; + + $btn-secondary-bg-hl: lighten($blue-dark, 5%); + $btn-secondary-bg: $blue-dark; + + $btn-success-bg: $green; + $btn-success-bg-hl: darken($green, 6%); + + $btn-warning-bg: $brand-warning; + $btn-warning-bg-hl: lighten($brand-warning, 8%); + + $btn-danger-bg: $red; + $btn-danger-bg-hl: darken($red, 8%); + + $btn-inverse-bg: $dark-3; + $btn-inverse-bg-hl: lighten($dark-3, 4%); + $btn-inverse-text-color: $link-color; + $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + + $btn-link-color: $gray-3; + + $iconContainerBackground: $black; + + $btn-divider-left: $dark-4; + $btn-divider-right: $dark-2; + + $btn-drag-image: '../img/grab_dark.svg'; + + // Forms + // ------------------------- + $input-bg: $input-black; + $input-bg-disabled: $dark-3; + + $input-color: $gray-4; + $input-border-color: $dark-3; + $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); + $input-border-focus: $input-border-color; + $input-box-shadow-focus: rgba(102, 175, 233, 0.6); + $input-color-placeholder: $gray-1 !default; + $input-label-bg: $gray-blue; + $input-label-border-color: $dark-3; + $input-color-select-arrow: $white; + + // Input placeholder text color + $placeholderText: darken($text-color, 25%); + + // Search + $search-shadow: 0 0 30px 0 $black; + $search-filter-box-bg: $gray-blue; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $black; + $typeahead-selected-bg: $dark-4; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $dark-3; + $dropdownBorder: rgba(0, 0, 0, 0.2); + $dropdownDividerTop: transparent; + $dropdownDividerBottom: #444; + + $dropdownLinkColor: $text-color; + $dropdownLinkColorHover: $white; + $dropdownLinkColorActive: $white; + + $dropdownLinkBackgroundHover: $dark-4; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 55px; + + $navbarBackground: $panel-bg; + $navbarBorder: 1px solid $dark-3; + $navbarShadow: 0 0 20px black; + + $navbarLinkColor: $gray-4; + + $navbarButtonBackground: $navbarBackground; + $navbarButtonBackgroundHighlight: $body-bg; + + $navbar-button-border: #2f2f32; + + // Sidemenu + // ------------------------- + $side-menu-bg: $black; + $side-menu-bg-mobile: $side-menu-bg; + $side-menu-item-hover-bg: $dark-2; + $side-menu-shadow: 0 0 20px black; + $side-menu-link-color: $link-color; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $body-bg; + $menu-dropdown-hover-bg: $dark-2; + $menu-dropdown-shadow: 5px 5px 20px -5px $black; + + // Tabs + // ------------------------- + $tab-border-color: $dark-4; + + // Toolbar + $toolbar-bg: $input-black; + + // Form states and alerts + // ------------------------- + $warning-text-color: $warn; + $error-text-color: #e84d4d; + $success-text-color: #12d95a; + $info-text-color: $blue-dark; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $dark-4; + $popover-shadow: 0 0 20px black; + + $popover-help-bg: $btn-secondary-bg; + $popover-help-color: $text-color; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: $link-color; + $graph-tooltip-bg: $dark-1; + + $tooltipBackground: $black; + $tooltipColor: $gray-4; + $tooltipArrowColor: $tooltipBackground; + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox.png'; + + // info box + $info-box-border-color: darken($blue, 12%); + + // footer + $footer-link-color: $gray-2; + $footer-link-hover: $gray-4; + + // json-explorer + $json-explorer-default-color: $text-color; + $json-explorer-string-color: #23d662; + $json-explorer-number-color: $variable; + $json-explorer-boolean-color: $variable; + $json-explorer-null-color: #eec97d; + $json-explorer-undefined-color: rgb(239, 143, 190); + $json-explorer-function-color: #fd48cb; + $json-explorer-rotate-time: 100ms; + $json-explorer-toggler-opacity: 0.6; + $json-explorer-bracket-color: #9494ff; + $json-explorer-key-color: #23a0db; + $json-explorer-url-color: #027bff; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $dark-2; + $diff-label-fg: $white; + + $diff-group-bg: $dark-4; + $diff-arrow-color: $white; + + $diff-json-bg: $dark-4; + $diff-json-fg: $gray-5; + + $diff-json-added: #457740; + $diff-json-deleted: #a04338; + + $diff-json-old: #a04338; + $diff-json-new: #457740; + + $diff-json-changed-fg: $gray-5; + $diff-json-changed-num: $text-color; + + $diff-json-icon: $gray-7; + + //Submenu + $variable-option-bg: $blue-dark; + + //Switch Slider + // ------------------------- + $switch-bg: $input-bg; + $switch-slider-color: $dark-2; + $switch-slider-off-bg: $gray-1; + $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); + $switch-slider-shadow: 0 0 3px black; + + //Checkbox + // ------------------------- + $checkbox-bg: $dark-1; + $checkbox-border: 1px solid $gray-1; + $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); + $checkbox-color: $dark-1; + + //Panel Edit + // ------------------------- + $panel-editor-shadow: 0 0 20px black; + $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); + $panel-editor-viz-item-shadow: 0 0 8px $dark-5; + $panel-editor-viz-item-border: 1px solid $dark-5; + $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; + $panel-editor-viz-item-border-hover: 1px solid $blue; + $panel-editor-viz-item-bg: $input-black; + $panel-editor-tabs-line-color: #e3e3e3; + $panel-editor-viz-item-bg-hover: darken($blue, 47%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-blue; + + $panel-grid-placeholder-bg: darken($blue, 47%); + $panel-grid-placeholder-shadow: 0 0 4px $blue; + + // logs + $logs-color-unkown: $gray-2; + + // toggle-group + $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); + $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; + $button-toggle-group-btn-seperator-border: 1px solid $page-bg; + + $vertical-resize-handle-bg: $dark-5; + $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; diff --git a/scripts/cli/nodemon.json b/scripts/cli/nodemon.json new file mode 100644 index 00000000000..3875f244868 --- /dev/null +++ b/scripts/cli/nodemon.json @@ -0,0 +1,7 @@ + +{ + "watch": ["packages/grafana-ui/src/themes"], + "ext": "ts", + "ignore": ["src/**/*.spec.ts"], + "exec": "ts-node ./src/index.ts" +} diff --git a/scripts/cli/tsconfig.json b/scripts/cli/tsconfig.json new file mode 100644 index 00000000000..babab880588 --- /dev/null +++ b/scripts/cli/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "module": "commonjs" + } +} diff --git a/scripts/cli/watch.ts b/scripts/cli/watch.ts new file mode 100644 index 00000000000..3592959a795 --- /dev/null +++ b/scripts/cli/watch.ts @@ -0,0 +1,24 @@ +// import chokidar from 'chokidar'; +import darkTheme from '@grafana/ui/src/themes/dark'; +import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; +import fs from 'fs'; + +console.log(__dirname + '../../packages/grafana-ui/src/themes/dark.ts'); + +const fileToWatch = [ + __dirname + '/../../packages/grafana-ui/src/themes/dark.ts', + __dirname + '/../../packages/grafana-ui/src/themes/light.ts', +]; +// const watchService = chokidar.watch(fileToWatch); +console.log(`Watching for file changes on ${fileToWatch}`); + +// watchService.on('change', path => { + +const result = darkThemeVarsTemplate(darkTheme); +console.log(result); + +fs.writeFile(__dirname + '/../../public/sass/_variables.dark.scss', result, e => { + console.log(e); +}); + +// }); diff --git a/yarn.lock b/yarn.lock index df2e1cea37e..f14b7ae3ee1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1492,6 +1492,14 @@ resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg== +"@types/chokidar@^1.7.5": + version "1.7.5" + resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.5.tgz#1fa78c8803e035bed6d98e6949e514b133b0c9b6" + integrity sha512-PDkSRY7KltW3M60hSBlerxI8SFPXsO3AL/aRVsO4Kh9IHRW74Ih75gUuTd/aE4LSSFqypb10UIX3QzOJwBQMGQ== + dependencies: + "@types/events" "*" + "@types/node" "*" + "@types/classnames@^2.2.6": version "2.2.7" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" @@ -1712,6 +1720,11 @@ "@types/cheerio" "*" "@types/react" "*" +"@types/events@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" + integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== + "@types/geojson@*": version "7946.0.5" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0" @@ -1737,10 +1750,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67" integrity sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ== -"@types/node@^8.0.31": - version "8.10.39" - resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.39.tgz#e7e87ad00364dd7bc485c940926345b8ec1a26ca" - integrity sha512-rE7fktr02J8ybFf6eysife+WF+L4sAHWzw09DgdCebEu+qDwMvv4zl6Bc+825ttGZP73kCKxa3dhJOoGJ8+5mA== +"@types/node@^10.12.24": + version "10.12.24" + resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.24.tgz#b13564af612a22a20b5d95ca40f1bffb3af315cf" + integrity sha512-GWWbvt+z9G5otRBW8rssOFgRY87J9N/qbhqfjMZ+gUuL6zoL+Hm6gP/8qQBG4jjimqdaNLCehcVapZ/Fs2WjCQ== "@types/prop-types@*": version "15.5.8" @@ -2610,6 +2623,11 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.6" +arg@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0" + integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg== + argparse@^1.0.2, argparse@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" @@ -2813,7 +2831,7 @@ astral-regex@^1.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9" integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg== -async-each@^1.0.0: +async-each@^1.0.0, async-each@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" integrity sha1-GdOGodntxufByF04iu28xW0zYC0= @@ -4137,7 +4155,7 @@ braces@^1.8.2: preserve "^0.2.0" repeat-element "^1.1.2" -braces@^2.3.0, braces@^2.3.1: +braces@^2.3.0, braces@^2.3.1, braces@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729" integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w== @@ -4686,6 +4704,25 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: optionalDependencies: fsevents "^1.2.2" +chokidar@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.0.tgz#5fcb70d0b28ebe0867eb0f09d5f6a08f29a1efa0" + integrity sha512-5t6G2SH8eO6lCvYOoUpaRnF5Qfd//gd7qJAkwRUw9qlGVkiQ13uwQngqbWWaurOsaAm9+kUGbITADxt6H0XFNQ== + dependencies: + anymatch "^2.0.0" + async-each "^1.0.1" + braces "^2.3.2" + glob-parent "^3.1.0" + inherits "^2.0.3" + is-binary-path "^1.0.0" + is-glob "^4.0.0" + normalize-path "^3.0.0" + path-is-absolute "^1.0.0" + readdirp "^2.2.1" + upath "^1.1.0" + optionalDependencies: + fsevents "^1.2.7" + chownr@^1.0.1, chownr@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494" @@ -6330,7 +6367,7 @@ diff@^2.0.2: resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99" integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k= -diff@^3.2.0, diff@^3.5.0: +diff@^3.1.0, diff@^3.2.0, diff@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== @@ -7811,7 +7848,7 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= -fsevents@^1.2.2, fsevents@^1.2.3: +fsevents@^1.2.2, fsevents@^1.2.3, fsevents@^1.2.7: version "1.2.7" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4" integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw== @@ -10935,6 +10972,11 @@ lodash@~4.3.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4" integrity sha1-79nEpuxT87BUEkKZFcPkgk5NJaQ= +log-prefix@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/log-prefix/-/log-prefix-0.1.1.tgz#3ec492138c8044c9f9732298492dca87850cac90" + integrity sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g== + log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -10949,6 +10991,13 @@ log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0: dependencies: chalk "^2.0.1" +log-timestamp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/log-timestamp/-/log-timestamp-0.2.1.tgz#02d4fd07550d6e3226d2741d89e7c693410276d6" + integrity sha512-a+hFCox7Up3gBrfREwXGjUEozdqjJrqpy82a41BUSEKlmvEZbsjR9vaYh/2PNFwydxX1r3zgfS/mAdNmRY/lKQ== + dependencies: + log-prefix "0.1.1" + log-update@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1" @@ -11048,7 +11097,7 @@ make-dir@^1.0.0, make-dir@^1.1.0: dependencies: pify "^3.0.0" -make-error@1.x, make-error@^1.3.5: +make-error@1.x, make-error@^1.1.1, make-error@^1.3.5: version "1.3.5" resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8" integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g== @@ -12002,6 +12051,11 @@ normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1: dependencies: remove-trailing-separator "^1.0.1" +normalize-path@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + normalize-range@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" @@ -14466,7 +14520,7 @@ readdir-scoped-modules@^1.0.0: graceful-fs "^4.1.2" once "^1.3.0" -readdirp@^2.0.0: +readdirp@^2.0.0, readdirp@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525" integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ== @@ -16756,6 +16810,17 @@ ts-loader@^5.1.0: micromatch "^3.1.4" semver "^5.0.1" +ts-node@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.0.2.tgz#9ecdf8d782a0ca4c80d1d641cbb236af4ac1b756" + integrity sha512-MosTrinKmaAcWgO8tqMjMJB22h+sp3Rd1i4fdoWY4mhBDekOwIAKI/bzmRi7IcbCmjquccYg2gcF6NBkLgr0Tw== + dependencies: + arg "^4.1.0" + diff "^3.1.0" + make-error "^1.1.1" + source-map-support "^0.5.6" + yn "^3.0.0" + tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" @@ -17073,7 +17138,7 @@ unzip-response@^2.0.1: resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97" integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c= -upath@^1.0.5: +upath@^1.0.5, upath@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd" integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw== @@ -18075,6 +18140,11 @@ yeoman-generator@^2.0.5: through2 "^2.0.0" yeoman-environment "^2.0.5" +yn@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/yn/-/yn-3.0.0.tgz#0073c6b56e92aed652fbdfd62431f2d6b9a7a091" + integrity sha512-+Wo/p5VRfxUgBUGy2j/6KX2mj9AYJWOHuhMjMcbBFc3y54o9/4buK1ksBvuiK01C3kby8DH9lSmJdSxw+4G/2Q== + zip-stream@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04" From 2542a43ec0f8c490586d50d25eb3782cb498e8a5 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 12 Feb 2019 21:54:20 +0100 Subject: [PATCH 02/70] Regenerating variabless sas on theme edit v1 --- package.json | 11 +- .../src/themes/_variables.dark.scss.tmpl.ts | 29 +- .../src/themes/_variables.light.scss.tmpl.ts | 385 ++++++++++++++++++ public/app/core/specs/search_results.test.ts | 2 +- .../playlist/specs/playlist_srv.test.ts | 6 +- public/sass/_variables.dark.scss | 7 +- public/sass/_variables.light.scss | 102 +++-- scripts/cli/generateSassVariableFiles.ts | 35 ++ scripts/cli/nodemon.json | 7 - scripts/cli/start.js | 23 ++ scripts/cli/watch.ts | 24 -- yarn.lock | 105 ++--- 12 files changed, 562 insertions(+), 174 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts create mode 100644 scripts/cli/generateSassVariableFiles.ts delete mode 100644 scripts/cli/nodemon.json create mode 100644 scripts/cli/start.js delete mode 100644 scripts/cli/watch.ts diff --git a/package.json b/package.json index b9a7fc691a6..7eb3c1dd1c3 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,12 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", - "@types/chokidar": "^1.7.5", "@types/classnames": "^2.2.6", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/jquery": "^1.10.35", - "@types/node": "^10.12.24", + "@types/node": "^8.0.31", "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "@types/react-grid-layout": "^0.16.6", @@ -37,8 +36,8 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", - "chokidar": "^2.1.0", "clean-webpack-plugin": "^0.1.19", + "concurrently": "^4.1.0", "css-loader": "^0.28.7", "enzyme": "^3.6.0", "enzyme-adapter-react-16": "^1.5.0", @@ -72,7 +71,6 @@ "jest-date-mock": "^1.0.6", "lint-staged": "^8.1.3", "load-grunt-tasks": "3.5.2", - "log-timestamp": "^0.2.1", "mini-css-extract-plugin": "^0.4.0", "mocha": "^4.0.1", "monaco-editor": "^0.15.6", @@ -116,7 +114,7 @@ }, "scripts": { "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js", - "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js", + "start": "node ./scripts/cli/start.js", "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", "build": "grunt build", "test": "grunt test", @@ -126,8 +124,7 @@ "api-tests": "jest --notify --watch --config=tests/api/jest.js", "precommit": "grunt precommit", "storybook": "cd packages/grafana-ui && yarn storybook", - "tmp": "nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run tmp:exec", - "tmp:exec": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/watch.ts" + "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts" }, "husky": { "hooks": { diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 327b783be3c..617f9d5fd83 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -8,23 +8,24 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` // Grays // ------------------------- - $black: #000; - $dark-1: #141414; - $dark-2: #1f1f20; - $dark-3: #262628; - $dark-4: #333333; - $dark-5: #444444; - $gray-1: #555555; - $gray-2: #8e8e8e; - $gray-3: #b3b3b3; - $gray-4: #d8d9da; - $gray-5: #ececec; - $gray-7: #fbfbfb; + $black: ${theme.colors.black}; + $dark-1: ${theme.colors.dark2}; + $dark-2: ${theme.colors.dark2}; + $dark-3: ${theme.colors.dark3}; + $dark-4: ${theme.colors.dark4}; + $dark-5: ${theme.colors.dark5}; + $gray-1: ${theme.colors.gray1}; + $gray-2: ${theme.colors.gray2}; + $gray-3: ${theme.colors.gray3}; + $gray-4: ${theme.colors.gray4}; + $gray-5: ${theme.colors.gray5}; + $gray-6: ${theme.colors.gray6}; + $gray-7: ${theme.colors.gray7}; $gray-blue: #212327; $input-black: #09090b; - $white: #fff; + $white: ${theme.colors.white}; // Accent colors // ------------------------- @@ -383,5 +384,5 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` $vertical-resize-handle-bg: $dark-5; $vertical-resize-handle-dots: $gray-1; -$vertical-resize-handle-dots-hover: $gray-2; + $vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts new file mode 100644 index 00000000000..11444e76bab --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -0,0 +1,385 @@ +import { GrafanaTheme } from '../types'; + +export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` + // Global values + // -------------------------------------------------- + + $theme-name: light; + + // Grays + // ------------------------- + $black: ${theme.colors.black}; + $dark-1: ${theme.colors.dark1}; + $dark-2: ${theme.colors.dark2}; + $dark-3: ${theme.colors.dark3}; + $dark-4: ${theme.colors.dark4}; + $dark-5: ${theme.colors.dark5}; + $gray-1: ${theme.colors.gray1}; + $gray-2: ${theme.colors.gray2}; + $gray-3: ${theme.colors.gray3}; + $gray-4: ${theme.colors.gray4}; + $gray-5: ${theme.colors.gray5}; + $gray-6: ${theme.colors.gray6}; + $gray-7: ${theme.colors.gray7}; + + $white: ${theme.colors.white}; + + // Accent colors + // ------------------------- + $blue: ${theme.colors.blue}; + $blue-light: #00a8e6; + $green: #3aa655; + $red: #d44939; + $yellow: #ff851b; + $orange: #ff7941; + $purple: #9954bb; + $variable: $blue; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $orange; + $brand-danger: $red; + + $query-red: $red; + $query-green: $green; + $query-purple: $purple; + $query-orange: $orange; + $query-keyword: $blue; + + // Status colors + // ------------------------- + $online: #01a64f; + $warn: #f79520; + $critical: #ec2128; + + // Scaffolding + // ------------------------- + $body-bg: $gray-7; + $page-bg: $gray-7; + + $body-color: $gray-1; + $text-color: $gray-1; + $text-color-strong: $dark-2; + $text-color-weak: $gray-2; + $text-color-faint: $gray-4; + $text-color-emphasis: $dark-5; + + $text-shadow-faint: none; + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 1) 0%, + rgba(255, 68, 0, 1) 99%, + rgba(255, 68, 0, 1) 100% + ); + + $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); + $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); + + // Links + // ------------------------- + $link-color: $gray-1; + $link-color-disabled: lighten($link-color, 30%); + $link-hover-color: darken($link-color, 20%); + $external-link-color: $blue-light; + + // Typography + // ------------------------- + $headings-color: $text-color; + $abbr-border-color: $gray-2 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-3 !default; + + // Panel + // ------------------------- + $panel-bg: $white; + $panel-border: solid 1px $gray-5; + $panel-header-hover-bg: $gray-6; + $panel-corner: $gray-4; + + // Page header + $page-header-bg: linear-gradient(90deg, $white, $gray-7); + $page-header-shadow: inset 0px -3px 10px $gray-6; + $page-header-border-color: $gray-4; + + $divider-border-color: $gray-2; + + // Graphite Target Editor + $tight-form-bg: #eaebee; + $tight-form-func-bg: $gray-5; + $tight-form-func-highlight-bg: $gray-6; + + $modal-backdrop-bg: $body-bg; + $code-tag-bg: $gray-6; + $code-tag-border: darken($code-tag-bg, 3%); + + // cards + $card-background: linear-gradient(135deg, $gray-6, $gray-5); + $card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + + // Lists + $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; + $list-item-hover-bg: darken($gray-5, 5%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-6; + + // Scrollbars + $scrollbarBackground: $gray-5; + $scrollbarBackground2: $gray-5; + $scrollbarBorder: $gray-4; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $gray-5; // for striping + $table-border: $gray-3; // table and cell border + + $table-bg-odd: $gray-6; + $table-bg-hover: $gray-5; + + // Buttons + // ------------------------- + $btn-primary-bg: $brand-primary; + $btn-primary-bg-hl: lighten($brand-primary, 8%); + + $btn-secondary-bg: $blue; + $btn-secondary-bg-hl: lighten($blue, 4%); + + $btn-success-bg: lighten($green, 3%); + $btn-success-bg-hl: darken($green, 3%); + + $btn-warning-bg: lighten($orange, 3%); + $btn-warning-bg-hl: darken($orange, 3%); + + $btn-danger-bg: lighten($red, 3%); + $btn-danger-bg-hl: darken($red, 3%); + + $btn-inverse-bg: $gray-6; + $btn-inverse-bg-hl: darken($gray-6, 5%); + $btn-inverse-text-color: $gray-1; + $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); + + $btn-link-color: $gray-1; + + $iconContainerBackground: $white; + + $btn-divider-left: $gray-4; + $btn-divider-right: $gray-7; + + $btn-drag-image: '../img/grab_light.svg'; + + // Forms + // ------------------------- + $input-bg: $white; + $input-bg-disabled: $gray-5; + + $input-color: $dark-3; + $input-border-color: $gray-5; + $input-box-shadow: none; + $input-border-focus: $blue !default; + $input-box-shadow-focus: $blue !default; + $input-color-placeholder: $gray-4 !default; + $input-label-bg: $gray-5; + $input-label-border-color: $gray-5; + $input-color-select-arrow: $gray-1; + + // Input placeholder text color + $placeholderText: $gray-2; + + // search + $search-shadow: 0 5px 30px 0 $gray-4; + $search-filter-box-bg: $gray-7; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $gray-5; + $typeahead-selected-bg: $gray-6; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $white; + $dropdownBorder: $gray-4; + $dropdownDividerTop: $gray-6; + $dropdownDividerBottom: $white; + + $dropdownLinkColor: $dark-3; + $dropdownLinkColorHover: $link-color; + $dropdownLinkColorActive: $link-color; + + $dropdownLinkBackgroundHover: $gray-6; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 52px; + + $navbarBackground: $white; + $navbarBorder: 1px solid $gray-4; + $navbarShadow: 0 0 3px #c1c1c1; + + $navbarLinkColor: #444; + + $navbarButtonBackground: lighten($navbarBackground, 3%); + $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + + $navbar-button-border: $gray-4; + + // Sidemenu + // ------------------------- + $side-menu-bg: $dark-2; + $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; + $side-menu-item-hover-bg: $gray-1; + $side-menu-shadow: 5px 0px 10px -5px $gray-1; + $side-menu-link-color: $gray-6; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $gray-7; + $menu-dropdown-hover-bg: $gray-6; + $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; + + // Tabs + // ------------------------- + $tab-border-color: $gray-5; + + // Toolbar + $toolbar-bg: white; + + // Form states and alerts + // ------------------------- + $warning-text-color: lighten($orange, 10%); + $error-text-color: lighten($red, 10%); + $success-text-color: lighten($green, 10%); + $info-text-color: $blue; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); + $alert-info-bg: $blue; + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $gray-5; + $popover-shadow: 0 0 20px $white; + + $popover-help-bg: $blue; + $popover-help-color: $gray-6; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: lighten($popover-help-color, 5%); + $graph-tooltip-bg: $gray-5; + + $tooltipBackground: $gray-1; + $tooltipColor: $gray-7; + $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox_white.png'; + + // info box + $info-box-border-color: lighten($blue, 20%); + + // footer + $footer-link-color: $gray-3; + $footer-link-hover: $dark-5; + + // json explorer + $json-explorer-default-color: black; + $json-explorer-string-color: green; + $json-explorer-number-color: blue; + $json-explorer-boolean-color: red; + $json-explorer-null-color: #855a00; + $json-explorer-undefined-color: rgb(202, 11, 105); + $json-explorer-function-color: #ff20ed; + $json-explorer-rotate-time: 100ms; + $json-explorer-toggler-opacity: 0.6; + $json-explorer-bracket-color: blue; + $json-explorer-key-color: #00008b; + $json-explorer-url-color: blue; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $gray-5; + $diff-label-fg: $gray-2; + + $diff-arrow-color: $dark-3; + $diff-group-bg: $gray-7; + + $diff-json-bg: $gray-5; + $diff-json-fg: $gray-2; + + $diff-json-added: lighten(desaturate($green, 30%), 10%); + $diff-json-deleted: desaturate($red, 35%); + + $diff-json-old: #5a372a; + $diff-json-new: #664e33; + + $diff-json-changed-fg: $gray-6; + $diff-json-changed-num: $gray-4; + + $diff-json-icon: $gray-4; + + //Submenu + $variable-option-bg: $blue-light; + + //Switch Slider + // ------------------------- + $switch-bg: $white; + $switch-slider-color: $gray-7; + $switch-slider-off-bg: $gray-5; + $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); + $switch-slider-shadow: 0 0 3px $dark-5; + + //Checkbox + // ------------------------- + $checkbox-bg: $gray-6; + $checkbox-border: 1px solid $gray-3; + $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); + $checkbox-color: $gray-7; + + //Panel Edit + // ------------------------- + $panel-editor-shadow: 0px 0px 8px $gray-3; + $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); + $panel-editor-viz-item-shadow: 0 0 4px $gray-3; + $panel-editor-viz-item-border: 1px solid $gray-3; + $panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; + $panel-editor-viz-item-border-hover: 1px solid $blue-light; + $panel-editor-viz-item-bg: $white; + $panel-editor-tabs-line-color: $dark-5; + $panel-editor-viz-item-bg-hover: lighten($blue, 62%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-5; + + $panel-grid-placeholder-bg: lighten($blue, 62%); + $panel-grid-placeholder-shadow: 0 0 4px $blue-light; + + // logs + $logs-color-unkown: $gray-5; + + // toggle-group + $button-toggle-group-btn-active-bg: $brand-primary; + $button-toggle-group-btn-active-shadow: inset 0 0 4px $white; + $button-toggle-group-btn-seperator-border: 1px solid $gray-6; + + $vertical-resize-handle-bg: $gray-4; + $vertical-resize-handle-dots: $gray-3; + $vertical-resize-handle-dots-hover: $gray-2; +`; diff --git a/public/app/core/specs/search_results.test.ts b/public/app/core/specs/search_results.test.ts index 96dbc8bb963..af0b9d19873 100644 --- a/public/app/core/specs/search_results.test.ts +++ b/public/app/core/specs/search_results.test.ts @@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events'; jest.mock('app/core/app_events', () => { return { - emit: jest.fn(), + emit: jest.fn(), }; }); diff --git a/public/app/features/playlist/specs/playlist_srv.test.ts b/public/app/features/playlist/specs/playlist_srv.test.ts index d2ff27e54e0..bfb1732d9c6 100644 --- a/public/app/features/playlist/specs/playlist_srv.test.ts +++ b/public/app/features/playlist/specs/playlist_srv.test.ts @@ -2,7 +2,7 @@ import { PlaylistSrv } from '../playlist_srv'; const dashboards = [{ url: 'dash1' }, { url: 'dash2' }]; -const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => { +const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => { const mockBackendSrv = { get: jest.fn(url => { switch (url) { @@ -27,7 +27,7 @@ const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => return [new PlaylistSrv(mockLocation, mockTimeout, mockBackendSrv), mockLocation]; }; -const mockWindowLocation = (): [jest.MockInstance, () => void] => { +const mockWindowLocation = (): [jest.MockInstance, () => void] => { const oldLocation = window.location; const hrefMock = jest.fn(); @@ -50,7 +50,7 @@ const mockWindowLocation = (): [jest.MockInstance, () => void] => { describe('PlaylistSrv', () => { let srv: PlaylistSrv; - let hrefMock: jest.MockInstance; + let hrefMock: jest.MockInstance; let unmockLocation: () => void; const initialUrl = 'http://localhost/playlist'; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 704c1cb7785..4a3f5eb97d2 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -5,8 +5,8 @@ $theme-name: dark; // Grays // ------------------------- -$black: #000; -$dark-1: #141414; +$black: #000000; +$dark-1: #1f1f20; $dark-2: #1f1f20; $dark-3: #262628; $dark-4: #333333; @@ -16,12 +16,13 @@ $gray-2: #8e8e8e; $gray-3: #b3b3b3; $gray-4: #d8d9da; $gray-5: #ececec; +$gray-6: #f4f5f8; $gray-7: #fbfbfb; $gray-blue: #212327; $input-black: #09090b; -$white: #fff; +$white: #ffffff; // Accent colors // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 57ab0d9e12a..ff9e884a39d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -3,24 +3,10 @@ $theme-name: light; -// New Colors -// ------------------------- -$sapphire-faint: #f5f9ff; -$sapphire-light: #a8caff; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; -$green-base: #37872d; -$green-shade: #19730e; -$green-base: #3eb15b; -$green-shade: #369b4f; -$purple-shade: #8f3bb8; -$yellow-base: #f2cc0c; - // Grays // ------------------------- -$black: #000; +$black: #000000; +$dark-1: #13161d; $dark-2: #1e2028; $dark-3: #303133; $dark-4: #35373f; @@ -33,35 +19,35 @@ $gray-5: #dde4ed; $gray-6: #e9edf2; $gray-7: #f7f8fa; -$white: #fff; +$white: #ffffff; // Accent colors // ------------------------- $blue: #0083b3; $blue-light: #00a8e6; $green: #3aa655; -$red: $lobster-base; +$red: #d44939; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $purple-shade; +$variable: $blue; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $lobster-base; +$brand-danger: $red; -$query-red: $lobster-base; +$query-red: $red; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $sapphire-base; +$query-keyword: $blue; // Status colors // ------------------------- -$online: $green-shade; +$online: #01a64f; $warn: #f79520; -$critical: $lobster-shade; +$critical: #ec2128; // Scaffolding // ------------------------- @@ -76,6 +62,7 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; +$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -88,7 +75,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $sapphire-shade; +$external-link-color: $blue-light; // Typography // ------------------------- @@ -150,17 +137,20 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $green-base; -$btn-primary-bg-hl: $green-shade; +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); -$btn-success-bg: $green-base; -$btn-success-bg-hl: $green-shade; +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); + +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); $btn-inverse-bg: $gray-6; $btn-inverse-bg-hl: darken($gray-6, 5%); @@ -184,8 +174,8 @@ $input-bg-disabled: $gray-5; $input-color: $dark-3; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $sapphire-light !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -259,13 +249,14 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: $lobster-shade; +$error-text-color: lighten($red, 10%); $success-text-color: lighten($green, 10%); +$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: $sapphire-base; +$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-info-bg: $blue; // popover $popover-bg: $page-bg; @@ -273,7 +264,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $sapphire-base; +$popover-help-bg: $blue; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -294,7 +285,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: lighten($blue, 20%); // footer $footer-link-color: $gray-3; @@ -303,16 +294,16 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: $sapphire-base; -$json-explorer-boolean-color: $lobster-base; +$json-explorer-number-color: blue; +$json-explorer-boolean-color: red; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: $sapphire-base; +$json-explorer-bracket-color: blue; $json-explorer-key-color: #00008b; -$json-explorer-url-color: $sapphire-base; +$json-explorer-url-color: blue; // Changelog and diff // ------------------------- @@ -323,35 +314,35 @@ $diff-arrow-color: $dark-3; $diff-group-bg: $gray-7; $diff-json-bg: $gray-5; -$diff-json-fg: $gray-1; +$diff-json-fg: $gray-2; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: lighten(desaturate($green, 30%), 10%); +$diff-json-deleted: desaturate($red, 35%); $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-7; +$diff-json-changed-fg: $gray-6; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $dropdownLinkBackgroundHover; +$variable-option-bg: $blue-light; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); +$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); +$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); $checkbox-color: $gray-7; //Panel Edit @@ -365,11 +356,12 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $white; $panel-editor-tabs-line-color: $dark-5; $panel-editor-viz-item-bg-hover: lighten($blue, 62%); + $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: $sapphire-faint; -$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; +$panel-grid-placeholder-bg: lighten($blue, 62%); +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; // logs $logs-color-unkown: $gray-5; diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts new file mode 100644 index 00000000000..aaea77b200d --- /dev/null +++ b/scripts/cli/generateSassVariableFiles.ts @@ -0,0 +1,35 @@ +import fs from 'fs'; +import darkTheme from '@grafana/ui/src/themes/dark'; +import lightTheme from '@grafana/ui/src/themes/light'; +import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; +import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; + +const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; +const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; + +const writeVariablesFile = async (path: string, data: string) => { + return new Promise((resolve, reject) => { + fs.writeFile(path, data, e => { + if (e) { + reject(e); + } else { + resolve(data); + } + }); + }); +}; + +const generateSassVariableFiles = async () => { + try { + await Promise.all([ + writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)), + writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)), + ]); + console.log('\nSASS variable files generated'); + } catch (error) { + console.error('\nWriting SASS variable files failed', error); + process.exit(1); + } +}; + +generateSassVariableFiles(); diff --git a/scripts/cli/nodemon.json b/scripts/cli/nodemon.json deleted file mode 100644 index 3875f244868..00000000000 --- a/scripts/cli/nodemon.json +++ /dev/null @@ -1,7 +0,0 @@ - -{ - "watch": ["packages/grafana-ui/src/themes"], - "ext": "ts", - "ignore": ["src/**/*.spec.ts"], - "exec": "ts-node ./src/index.ts" -} diff --git a/scripts/cli/start.js b/scripts/cli/start.js new file mode 100644 index 00000000000..a31b04b2db2 --- /dev/null +++ b/scripts/cli/start.js @@ -0,0 +1,23 @@ +const concurrently = require('concurrently'); + +const startTask = async () => { + try { + const res = await concurrently([ + { + command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', + name: 'SASS variables generator', + }, + { + command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', + name: 'Dev server', + }, + ], { + killOthers: ['failure', 'failure'], + }); + } catch (e) { + console.error(e); + process.exit(1); + } +}; + +startTask(); diff --git a/scripts/cli/watch.ts b/scripts/cli/watch.ts deleted file mode 100644 index 3592959a795..00000000000 --- a/scripts/cli/watch.ts +++ /dev/null @@ -1,24 +0,0 @@ -// import chokidar from 'chokidar'; -import darkTheme from '@grafana/ui/src/themes/dark'; -import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; -import fs from 'fs'; - -console.log(__dirname + '../../packages/grafana-ui/src/themes/dark.ts'); - -const fileToWatch = [ - __dirname + '/../../packages/grafana-ui/src/themes/dark.ts', - __dirname + '/../../packages/grafana-ui/src/themes/light.ts', -]; -// const watchService = chokidar.watch(fileToWatch); -console.log(`Watching for file changes on ${fileToWatch}`); - -// watchService.on('change', path => { - -const result = darkThemeVarsTemplate(darkTheme); -console.log(result); - -fs.writeFile(__dirname + '/../../public/sass/_variables.dark.scss', result, e => { - console.log(e); -}); - -// }); diff --git a/yarn.lock b/yarn.lock index cedf13bd558..24c20b33a99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1506,14 +1506,6 @@ resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg== -"@types/chokidar@^1.7.5": - version "1.7.5" - resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.5.tgz#1fa78c8803e035bed6d98e6949e514b133b0c9b6" - integrity sha512-PDkSRY7KltW3M60hSBlerxI8SFPXsO3AL/aRVsO4Kh9IHRW74Ih75gUuTd/aE4LSSFqypb10UIX3QzOJwBQMGQ== - dependencies: - "@types/events" "*" - "@types/node" "*" - "@types/classnames@^2.2.6": version "2.2.7" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" @@ -1734,11 +1726,6 @@ "@types/cheerio" "*" "@types/react" "*" -"@types/events@*": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" - integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== - "@types/geojson@*": version "7946.0.5" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0" @@ -1764,11 +1751,16 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-11.9.0.tgz#35fea17653490dab82e1d5e69731abfdbf13160d" integrity sha512-ry4DOrC+xenhQbzk1iIPzCZGhhPGEFv7ia7Iu6XXSLVluiJIe9FfG7Iu3mObH9mpxEXCWLCMU4JWbCCR9Oy1Zg== -"@types/node@^10.12.18", "@types/node@^10.12.24": +"@types/node@^10.12.18": version "10.12.25" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.25.tgz#0d01a7dd6127de60d861ece4a650963042abb538" integrity sha512-IcvnGLGSQFDvC07Bz2I8SX+QKErDZbUdiQq7S2u3XyzTyJfUmT0sWJMbeQkMzpTAkO7/N7sZpW/arUM2jfKsbQ== +"@types/node@^8.0.31": + version "8.10.40" + resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.40.tgz#4314888d5cd537945d73e9ce165c04cc550144a4" + integrity sha512-RRSjdwz63kS4u7edIwJUn8NqKLLQ6LyqF/X4+4jp38MBT3Vwetewi2N4dgJEshLbDwNgOJXNYoOwzVZUSSLhkQ== + "@types/prop-types@*": version "15.5.8" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce" @@ -4702,7 +4694,7 @@ child-process-promise@^2.2.1: node-version "^1.0.0" promise-polyfill "^6.0.1" -chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.0: +chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: version "2.1.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.1.tgz#adc39ad55a2adf26548bd2afa048f611091f9184" integrity sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ== @@ -5216,6 +5208,21 @@ concat-stream@1.6.2, concat-stream@^1.4.6, concat-stream@^1.5.0, concat-stream@^ readable-stream "^2.2.2" typedarray "^0.0.6" +concurrently@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-4.1.0.tgz#17fdf067da71210685d9ea554423ef239da30d33" + integrity sha512-pwzXCE7qtOB346LyO9eFWpkFJVO3JQZ/qU/feGeaAHiX1M3Rw3zgXKc5cZ8vSH5DGygkjzLFDzA/pwoQDkRNGg== + dependencies: + chalk "^2.4.1" + date-fns "^1.23.0" + lodash "^4.17.10" + read-pkg "^4.0.1" + rxjs "^6.3.3" + spawn-command "^0.0.2-1" + supports-color "^4.5.0" + tree-kill "^1.1.0" + yargs "^12.0.1" + config-chain@~1.1.11: version "1.1.12" resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" @@ -6076,7 +6083,7 @@ data-urls@^1.0.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns@^1.27.2: +date-fns@^1.23.0, date-fns@^1.27.2: version "1.30.1" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== @@ -6127,7 +6134,7 @@ debug@^4.0.1, debug@^4.1.0: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -9054,7 +9061,7 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -10764,11 +10771,6 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -10777,29 +10779,12 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: +lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= @@ -10893,11 +10878,6 @@ lodash.mergewith@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ== -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.some@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" @@ -10948,11 +10928,6 @@ lodash@~4.3.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4" integrity sha1-79nEpuxT87BUEkKZFcPkgk5NJaQ= -log-prefix@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/log-prefix/-/log-prefix-0.1.1.tgz#3ec492138c8044c9f9732298492dca87850cac90" - integrity sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g== - log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -10967,13 +10942,6 @@ log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0: dependencies: chalk "^2.0.1" -log-timestamp@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/log-timestamp/-/log-timestamp-0.2.1.tgz#02d4fd07550d6e3226d2741d89e7c693410276d6" - integrity sha512-a+hFCox7Up3gBrfREwXGjUEozdqjJrqpy82a41BUSEKlmvEZbsjR9vaYh/2PNFwydxX1r3zgfS/mAdNmRY/lKQ== - dependencies: - log-prefix "0.1.1" - log-update@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708" @@ -14504,7 +14472,7 @@ readable-stream@~1.1.10: isarray "0.0.1" string_decoder "~0.10.x" -readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0: +readdir-scoped-modules@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747" integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c= @@ -15902,6 +15870,11 @@ space-separated-tokens@^1.0.0: dependencies: trim "0.0.1" +spawn-command@^0.0.2-1: + version "0.0.2-1" + resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0" + integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A= + spawn-promise@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/spawn-promise/-/spawn-promise-0.1.8.tgz#a5bea98814c48f52cbe02720e7fe2d6fc3b5119a" @@ -16346,6 +16319,13 @@ supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" +supports-color@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" + integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s= + dependencies: + has-flag "^2.0.0" + supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -16776,6 +16756,11 @@ traverse@^0.6.6: resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= +tree-kill@^1.1.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a" + integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q== + trim-newlines@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" @@ -18057,7 +18042,7 @@ yargs@^11.0.0, yargs@^11.1.0: y18n "^3.2.1" yargs-parser "^9.0.2" -yargs@^12.0.5: +yargs@^12.0.1, yargs@^12.0.5: version "12.0.5" resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13" integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw== From 4903b03d246b200e92beafca5e5ab417c51d170f Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 12:32:42 +0100 Subject: [PATCH 03/70] Remove precommit from npm scrips --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 7eb3c1dd1c3..72d3078568a 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,6 @@ "typecheck": "tsc --noEmit", "jest": "jest --notify --watch", "api-tests": "jest --notify --watch --config=tests/api/jest.js", - "precommit": "grunt precommit", "storybook": "cd packages/grafana-ui && yarn storybook", "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts" }, From 06bae9aa4658cc060cac10ae3f46b0be76e9c166 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:45:11 +0100 Subject: [PATCH 04/70] Added common theme variabless generation, created GrafanaThemeCommons interface --- .../src/themes/_variables.dark.scss.tmpl.ts | 2 + .../src/themes/_variables.light.scss.tmpl.ts | 2 + .../src/themes/_variables.scss.tmpl.ts | 217 ++++++++++++++++++ packages/grafana-ui/src/themes/default.ts | 19 +- packages/grafana-ui/src/types/theme.ts | 7 +- public/sass/_variables.scss | 8 +- scripts/cli/generateSassVariableFiles.ts | 4 + 7 files changed, 243 insertions(+), 16 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 617f9d5fd83..578de71301a 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -1,3 +1,5 @@ +/* tslint:disable:max-line-length */ + import { GrafanaTheme } from '../types'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 11444e76bab..80e425af0f8 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -1,3 +1,5 @@ +/* tslint:disable:max-line-length */ + import { GrafanaTheme } from '../types'; export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts new file mode 100644 index 00000000000..671ab5bb631 --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -0,0 +1,217 @@ +/* tslint:disable:max-line-length */ + +import { GrafanaThemeCommons } from '../types'; + +export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => ` + // Options + // + // Quickly modify global styling by enabling or disabling optional features. + + $enable-flex: true !default; + $enable-hover-media-query: false !default; + + // Spacing + // + // Control the default styling of most Bootstrap elements by modifying these + // variables. Mostly focused on spacing. + + $spacer: 1rem !default; + $spacer-x: $spacer !default; + $spacer-y: $spacer !default; + $spacers: ( + 0: (x: 0, y: 0), + 1: (x: $spacer-x, y: $spacer-y), + 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), + 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) + ) + !default; + $border-width: 1px !default; + + // Grid breakpoints + // + // Define the minimum and maximum dimensions at which your layout will change, + // adapting to different screen sizes, for use in media queries. + + $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; + + // Grid containers + // + // Define the maximum width of .container for different screen sizes. + + $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; + + // Grid columns + // + // Set the number of columns and specify the width of the gutters. + + $grid-columns: 12 !default; + $grid-gutter-width: 30px !default; + + $enable-flex: true; + + // Typography + // ------------------------- + + $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; + $font-family-serif: ${theme.typography.fontFamily.serif}; + $font-family-monospace: ${theme.typography.fontFamily.monospace}; + $font-family-base: $font-family-sans-serif !default; + + $font-size-root: 14px !default; + $font-size-base: 13px !default; + + $font-size-lg: 18px !default; + $font-size-md: 14px !default; + $font-size-sm: 12px !default; + $font-size-xs: 10px !default; + + $line-height-base: 1.5 !default; + $font-weight-semi-bold: 500; + + $font-size-h1: 2rem !default; + $font-size-h2: 1.75rem !default; + $font-size-h3: 1.5rem !default; + $font-size-h4: 1.3rem !default; + $font-size-h5: 1.2rem !default; + $font-size-h6: 1rem !default; + + $display1-size: 6rem !default; + $display2-size: 5.5rem !default; + $display3-size: 4.5rem !default; + $display4-size: 3.5rem !default; + + $display1-weight: 400 !default; + $display2-weight: 400 !default; + $display3-weight: 400 !default; + $display4-weight: 400 !default; + + $lead-font-size: 1.25rem !default; + $lead-font-weight: 300 !default; + + $headings-margin-bottom: ($spacer / 2) !default; + $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + $headings-font-weight: 400 !default; + $headings-line-height: 1.1 !default; + + $hr-border-width: $border-width !default; + $dt-font-weight: bold !default; + + // Components + // + // Define common padding and border radius sizes and more. + + $line-height-lg: (4 / 3) !default; + $line-height-sm: 1.5 !default; + + $border-radius: 3px !default; + $border-radius-lg: 5px !default; + $border-radius-sm: 2px!default; + + // Page + + $page-sidebar-width: 11rem; + $page-sidebar-margin: 4rem; + + // Links + // ------------------------- + $link-decoration: none !default; + $link-hover-decoration: none !default; + + // Tables + // + // Customizes the table component with basic values, each used across all table variations. + + $table-cell-padding: 4px 10px !default; + + // Forms + $input-padding-x: 10px !default; + $input-padding-y: 8px !default; + $input-line-height: 18px !default; + + $input-btn-border-width: 1px; + $input-border-radius: 0 $border-radius $border-radius 0 !default; + $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; + + $label-border-radius: $border-radius 0 0 $border-radius !default; + $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; + + $input-padding-y-sm: 4px !default; + + $input-padding-x-lg: 20px !default; + $input-padding-y-lg: 10px !default; + + $input-height: 35px !default; + + $gf-form-margin: 0.2rem; + $gf-form-input-height: 35px; + + $cursor-disabled: not-allowed !default; + + // Form validation icons + $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") + !default; + $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") + !default; + $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") + !default; + + // Z-index master list + // ------------------------- + // Used for a bird's eye view of components dependent on the z-axis + // Try to avoid customizing these :) + $zindex-dropdown: 1000; + $zindex-navbar-fixed: 1020; + $zindex-sidemenu: 1025; + $zindex-tooltip: 1030; + $zindex-modal-backdrop: 1040; + $zindex-modal: 1050; + $zindex-typeahead: 1060; + + // Buttons + // + + $btn-padding-x: 1rem !default; + $btn-padding-y: 0.7rem !default; + $btn-line-height: 1 !default; + $btn-font-weight: 500 !default; + + $btn-padding-x-sm: 0.5rem !default; + $btn-padding-y-sm: 0.25rem !default; + + $btn-padding-x-lg: 21px !default; + $btn-padding-y-lg: 11px !default; + + $btn-padding-x-xl: 21px !default; + $btn-padding-y-xl: 11px !default; + + $btn-border-radius: 2px; + + $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; + + // sidemenu + $side-menu-width: 60px; + + // dashboard + $panel-margin: 10px; + $dashboard-padding: $panel-margin * 2; + $panel-horizontal-padding: 10; + $panel-vertical-padding: 5; + $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; + + // tabs + $tabs-padding: 10px 15px 9px; + + $external-services: ( + github: (bgColor: #464646, borderColor: #393939, icon: ''), + gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), + google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), + grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), + oauth: (bgColor: #262628, borderColor: #393939, icon: '') + ) + !default; + + :export { + panelHorizontalPadding: $panel-horizontal-padding; + panelVerticalPadding: $panel-vertical-padding; + } +`; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index bf318f526e7..57ee960f3d6 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -1,12 +1,12 @@ +import { GrafanaThemeCommons } from '../types/theme'; - -const theme = { +const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { sansSerif: "'Roboto', Helvetica, Arial, sans-serif;", serif: "Georgia, 'Times New Roman', Times, serif;", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;" + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;", }, size: { base: '13px', @@ -31,23 +31,22 @@ const theme = { lineHeight: { xs: 1, s: 1.1, - m: 4/3, - l: 1.5 - } + m: 4 / 3, + l: 1.5, + }, }, brakpoints: { xs: '0', s: '544px', m: '768px', l: '992px', - xl: '1200px' + xl: '1200px', }, spacing: { xs: '0', s: '0.2rem', m: '1rem', l: '1.5rem', - xl: '3rem', gutter: '30px', }, border: { @@ -55,8 +54,8 @@ const theme = { xs: '2px', s: '3px', m: '5px', - } - } + }, + }, }; export default theme; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 8a79658b423..2d281cc3d9f 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -3,8 +3,7 @@ export enum GrafanaThemeType { Dark = 'dark', } -export interface GrafanaTheme { - type: GrafanaThemeType; +export interface GrafanaThemeCommons { name: string; // TODO: not sure if should be a part of theme brakpoints: { @@ -62,6 +61,10 @@ export interface GrafanaTheme { m: string; }; }; +} + +export interface GrafanaTheme extends GrafanaThemeCommons { + type: GrafanaThemeType; background: { dropdown: string; scrollbar: string; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 4e9e69c4d2f..1fbc22337e8 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -31,7 +31,7 @@ $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default // Grid containers // -// Define the maximum width of `.container` for different screen sizes. +// Define the maximum width of .container for different screen sizes. $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; @@ -114,7 +114,7 @@ $link-hover-decoration: none !default; // Tables // -// Customizes the `.table` component with basic values, each used across all table variations. +// Customizes the table component with basic values, each used across all table variations. $table-cell-padding: 4px 10px !default; @@ -206,6 +206,6 @@ $external-services: ( !default; :export { - panelHorizontalPadding: $panel-horizontal-padding; - panelVerticalPadding: $panel-vertical-padding; + panelhorizontalpadding: $panel-horizontal-padding; + panelverticalpadding: $panel-vertical-padding; } diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts index aaea77b200d..5d0434f6f9d 100644 --- a/scripts/cli/generateSassVariableFiles.ts +++ b/scripts/cli/generateSassVariableFiles.ts @@ -1,11 +1,14 @@ import fs from 'fs'; import darkTheme from '@grafana/ui/src/themes/dark'; import lightTheme from '@grafana/ui/src/themes/light'; +import defaultTheme from '@grafana/ui/src/themes/default'; import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; +import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl'; const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; +const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss'; const writeVariablesFile = async (path: string, data: string) => { return new Promise((resolve, reject) => { @@ -24,6 +27,7 @@ const generateSassVariableFiles = async () => { await Promise.all([ writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)), writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)), + writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)), ]); console.log('\nSASS variable files generated'); } catch (error) { From a09250a309d51f5d7972354b01e49bece6c61a64 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:47:59 +0100 Subject: [PATCH 05/70] Simple CLI for running grafana in dev env --- package.json | 7 ++++++- scripts/cli/index.ts | 22 ++++++++++++++++++++++ scripts/cli/start.js | 23 ----------------------- scripts/cli/start.ts | 32 ++++++++++++++++++++++++++++++++ yarn.lock | 34 ++++++++++++++++++++++++---------- 5 files changed, 84 insertions(+), 34 deletions(-) create mode 100644 scripts/cli/index.ts delete mode 100644 scripts/cli/start.js create mode 100644 scripts/cli/start.ts diff --git a/package.json b/package.json index 72d3078568a..cff733a84db 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,9 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", + "@types/chalk": "^2.2.0", "@types/classnames": "^2.2.6", + "@types/commander": "^2.12.2", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", @@ -36,6 +38,7 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", + "chalk": "^2.4.2", "clean-webpack-plugin": "^0.1.19", "concurrently": "^4.1.0", "css-loader": "^0.28.7", @@ -114,7 +117,9 @@ }, "scripts": { "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js", - "start": "node ./scripts/cli/start.js", + "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme", + "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme", + "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot", "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", "build": "grunt build", "test": "grunt test", diff --git a/scripts/cli/index.ts b/scripts/cli/index.ts new file mode 100644 index 00000000000..51919f13173 --- /dev/null +++ b/scripts/cli/index.ts @@ -0,0 +1,22 @@ +import program from 'commander'; +import { startTask } from './start'; +import chalk from 'chalk'; + +program + .option('-h, --hot', 'Runs front-end with hot reload enabled') + .option('-t, --theme', 'Watches for theme changes and regenerates variables.scss files') + .option('-d, --depreciate ', 'Inform about npm script deprecation', v => v.split(',')) + .parse(process.argv); + +if (program.depreciate && program.depreciate.length === 2) { + console.log( + chalk.yellow.bold( + `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!` + ) + ); +} + +startTask({ + watchThemes: !!program.theme, + hot: !!program.hot, +}); diff --git a/scripts/cli/start.js b/scripts/cli/start.js deleted file mode 100644 index a31b04b2db2..00000000000 --- a/scripts/cli/start.js +++ /dev/null @@ -1,23 +0,0 @@ -const concurrently = require('concurrently'); - -const startTask = async () => { - try { - const res = await concurrently([ - { - command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', - name: 'SASS variables generator', - }, - { - command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', - name: 'Dev server', - }, - ], { - killOthers: ['failure', 'failure'], - }); - } catch (e) { - console.error(e); - process.exit(1); - } -}; - -startTask(); diff --git a/scripts/cli/start.ts b/scripts/cli/start.ts new file mode 100644 index 00000000000..7df202387d7 --- /dev/null +++ b/scripts/cli/start.ts @@ -0,0 +1,32 @@ +const concurrently = require('concurrently'); + +export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => { + const jobs = []; + if (watchThemes) { + jobs.push({ + command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', + name: 'SASS variables generator', + }); + } + + if (!hot) { + jobs.push({ + command: 'webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js', + name: 'Webpack', + }); + } else { + jobs.push({ + command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', + name: 'Dev server', + }); + } + + try { + await concurrently(jobs, { + killOthers: ['failure', 'failure'], + }); + } catch (e) { + console.error(e); + process.exit(1); + } +}; diff --git a/yarn.lock b/yarn.lock index 24c20b33a99..4c32912ea5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1501,6 +1501,13 @@ react-input-autosize "^2.2.1" react-transition-group "^2.2.1" +"@types/chalk@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@types/chalk/-/chalk-2.2.0.tgz#b7f6e446f4511029ee8e3f43075fb5b73fbaa0ba" + integrity sha512-1zzPV9FDe1I/WHhRkf9SNgqtRJWZqrBWgu7JGveuHmmyR9CnAPCie2N/x+iHrgnpYBIcCJWHBoMRv2TRWktsvw== + dependencies: + chalk "*" + "@types/cheerio@*": version "0.22.10" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" @@ -1511,6 +1518,13 @@ resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg== +"@types/commander@^2.12.2": + version "2.12.2" + resolved "https://registry.yarnpkg.com/@types/commander/-/commander-2.12.2.tgz#183041a23842d4281478fa5d23c5ca78e6fd08ae" + integrity sha512-0QEFiR8ljcHp9bAbWxecjVRuAMr16ivPiGOw6KFQBVrVd0RQIcM3xKdRisH2EDWgVWujiYtHwhSkSUoAAGzH7Q== + dependencies: + commander "*" + "@types/d3-array@*": version "1.2.5" resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.5.tgz#7f87eccfe53396d48700294a518c379be14c8254" @@ -4596,6 +4610,15 @@ center-align@^0.1.1: align-text "^0.1.3" lazy-cache "^1.0.3" +chalk@*, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + chalk@2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" @@ -4616,15 +4639,6 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3, chalk@~1.1.1: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" - integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== - dependencies: - ansi-styles "^3.2.1" - escape-string-regexp "^1.0.5" - supports-color "^5.3.0" - chalk@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f" @@ -5102,7 +5116,7 @@ comma-separated-tokens@^1.0.0: dependencies: trim "0.0.1" -commander@2, commander@^2.12.1, commander@^2.13.0, commander@^2.14.1, commander@^2.19.0, commander@^2.8.1, commander@^2.9.0: +commander@*, commander@2, commander@^2.12.1, commander@^2.13.0, commander@^2.14.1, commander@^2.19.0, commander@^2.8.1, commander@^2.9.0: version "2.19.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg== From 4366b1588e4f963bab6443c0ec6c57b6c3b1cbcf Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:58:01 +0100 Subject: [PATCH 06/70] Added deprecation warning to npm watch script - use start script instead --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cff733a84db..dc17c344ee4 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme", "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme", "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot", - "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", + "watch": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme -d watch,start", "build": "grunt build", "test": "grunt test", "tslint": "tslint -c tslint.json --project tsconfig.json", From d3b90d5b78178c38489e545f2b2d7743cfc9ee17 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:58:27 +0100 Subject: [PATCH 07/70] Fixed sass vars template files --- .../src/themes/_variables.dark.scss.tmpl.ts | 770 +++++++++--------- .../src/themes/_variables.light.scss.tmpl.ts | 759 +++++++++-------- .../src/themes/_variables.scss.tmpl.ts | 322 ++++---- packages/grafana-ui/src/themes/default.ts | 6 +- 4 files changed, 926 insertions(+), 931 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 578de71301a..5b5a229a7f9 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -2,389 +2,389 @@ import { GrafanaTheme } from '../types'; -export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: dark; - - // Grays - // ------------------------- - $black: ${theme.colors.black}; - $dark-1: ${theme.colors.dark2}; - $dark-2: ${theme.colors.dark2}; - $dark-3: ${theme.colors.dark3}; - $dark-4: ${theme.colors.dark4}; - $dark-5: ${theme.colors.dark5}; - $gray-1: ${theme.colors.gray1}; - $gray-2: ${theme.colors.gray2}; - $gray-3: ${theme.colors.gray3}; - $gray-4: ${theme.colors.gray4}; - $gray-5: ${theme.colors.gray5}; - $gray-6: ${theme.colors.gray6}; - $gray-7: ${theme.colors.gray7}; - - $gray-blue: #212327; - $input-black: #09090b; - - $white: ${theme.colors.white}; - - // Accent colors - // ------------------------- - $blue: ${theme.colors.blue}; - $blue-dark: #005f81; - $green: #299c46; - $red: #d44a3a; - $yellow: #ecbb13; - $purple: #9933cc; - $variable: #32d1df; - $orange: #eb7b18; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $brand-primary; - $brand-danger: $red; - - $query-red: #e24d42; - $query-green: #74e680; - $query-purple: #fe85fc; - $query-keyword: #66d9ef; - $query-orange: $orange; - - // Status colors - // ------------------------- - $online: #10a345; - $warn: #f79520; - $critical: #ed2e18; - - // Scaffolding - // ------------------------- - $body-bg: rgb(23, 24, 25); - $page-bg: rgb(22, 23, 25); - - $body-color: $gray-4; - $text-color: $gray-4; - $text-color-strong: $white; - $text-color-weak: $gray-2; - $text-color-faint: $dark-5; - $text-color-emphasis: $gray-5; - - $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 0.7) 0%, - rgba(255, 68, 0, 0.7) 99%, - rgba(255, 68, 0, 0.7) 100% - ); - - $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); - $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); - - // Links - // ------------------------- - $link-color: darken($white, 11%); - $link-color-disabled: darken($link-color, 30%); - $link-hover-color: $white; - $external-link-color: $blue; - - // Typography - // ------------------------- - $headings-color: darken($white, 11%); - $abbr-border-color: $gray-3 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-4; - - // Panel - // ------------------------- - $panel-bg: #212124; - $panel-border: solid 1px $dark-1; - $panel-header-hover-bg: $dark-4; - $panel-corner: $panel-bg; - - // page header - $page-header-bg: linear-gradient(90deg, #292a2d, black); - $page-header-shadow: inset 0px -4px 14px $dark-2; - $page-header-border-color: $dark-4; - - $divider-border-color: $gray-1; - - // Graphite Target Editor - $tight-form-bg: $dark-3; - $tight-form-func-bg: $dark-4; - $tight-form-func-highlight-bg: $dark-5; - - $modal-backdrop-bg: #353c42; - $code-tag-bg: $dark-1; - $code-tag-border: $dark-4; - - // cards - $card-background: linear-gradient(135deg, #2f2f32, #262628); - $card-background-hover: linear-gradient(135deg, #343436, #262628); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - - // Lists - $list-item-bg: $card-background; - $list-item-hover-bg: lighten($gray-blue, 2%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-blue; - - // Scrollbars - $scrollbarBackground: #404357; - $scrollbarBackground2: #3a3a3a; - $scrollbarBorder: black; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $dark-3; // for striping - $table-border: $dark-3; // table and cell border - - $table-bg-odd: $dark-2; - $table-bg-hover: $dark-3; - - // Buttons - // ------------------------- - $btn-primary-bg: #ff6600; - $btn-primary-bg-hl: #bc3e06; - - $btn-secondary-bg-hl: lighten($blue-dark, 5%); - $btn-secondary-bg: $blue-dark; - - $btn-success-bg: $green; - $btn-success-bg-hl: darken($green, 6%); - - $btn-warning-bg: $brand-warning; - $btn-warning-bg-hl: lighten($brand-warning, 8%); - - $btn-danger-bg: $red; - $btn-danger-bg-hl: darken($red, 8%); - - $btn-inverse-bg: $dark-3; - $btn-inverse-bg-hl: lighten($dark-3, 4%); - $btn-inverse-text-color: $link-color; - $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); - - $btn-link-color: $gray-3; - - $iconContainerBackground: $black; - - $btn-divider-left: $dark-4; - $btn-divider-right: $dark-2; - - $btn-drag-image: '../img/grab_dark.svg'; - - // Forms - // ------------------------- - $input-bg: $input-black; - $input-bg-disabled: $dark-3; - - $input-color: $gray-4; - $input-border-color: $dark-3; - $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); - $input-border-focus: $input-border-color; - $input-box-shadow-focus: rgba(102, 175, 233, 0.6); - $input-color-placeholder: $gray-1 !default; - $input-label-bg: $gray-blue; - $input-label-border-color: $dark-3; - $input-color-select-arrow: $white; - - // Input placeholder text color - $placeholderText: darken($text-color, 25%); - - // Search - $search-shadow: 0 0 30px 0 $black; - $search-filter-box-bg: $gray-blue; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $black; - $typeahead-selected-bg: $dark-4; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $dark-3; - $dropdownBorder: rgba(0, 0, 0, 0.2); - $dropdownDividerTop: transparent; - $dropdownDividerBottom: #444; - - $dropdownLinkColor: $text-color; - $dropdownLinkColorHover: $white; - $dropdownLinkColorActive: $white; - - $dropdownLinkBackgroundHover: $dark-4; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 55px; - - $navbarBackground: $panel-bg; - $navbarBorder: 1px solid $dark-3; - $navbarShadow: 0 0 20px black; - - $navbarLinkColor: $gray-4; - - $navbarButtonBackground: $navbarBackground; - $navbarButtonBackgroundHighlight: $body-bg; - - $navbar-button-border: #2f2f32; - - // Sidemenu - // ------------------------- - $side-menu-bg: $black; - $side-menu-bg-mobile: $side-menu-bg; - $side-menu-item-hover-bg: $dark-2; - $side-menu-shadow: 0 0 20px black; - $side-menu-link-color: $link-color; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $body-bg; - $menu-dropdown-hover-bg: $dark-2; - $menu-dropdown-shadow: 5px 5px 20px -5px $black; - - // Tabs - // ------------------------- - $tab-border-color: $dark-4; - - // Toolbar - $toolbar-bg: $input-black; - - // Form states and alerts - // ------------------------- - $warning-text-color: $warn; - $error-text-color: #e84d4d; - $success-text-color: #12d95a; - $info-text-color: $blue-dark; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $dark-4; - $popover-shadow: 0 0 20px black; - - $popover-help-bg: $btn-secondary-bg; - $popover-help-color: $text-color; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: $link-color; - $graph-tooltip-bg: $dark-1; - - $tooltipBackground: $black; - $tooltipColor: $gray-4; - $tooltipArrowColor: $tooltipBackground; - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox.png'; - - // info box - $info-box-border-color: darken($blue, 12%); - - // footer - $footer-link-color: $gray-2; - $footer-link-hover: $gray-4; - - // json-explorer - $json-explorer-default-color: $text-color; - $json-explorer-string-color: #23d662; - $json-explorer-number-color: $variable; - $json-explorer-boolean-color: $variable; - $json-explorer-null-color: #eec97d; - $json-explorer-undefined-color: rgb(239, 143, 190); - $json-explorer-function-color: #fd48cb; - $json-explorer-rotate-time: 100ms; - $json-explorer-toggler-opacity: 0.6; - $json-explorer-bracket-color: #9494ff; - $json-explorer-key-color: #23a0db; - $json-explorer-url-color: #027bff; - - // Changelog and diff - // ------------------------- - $diff-label-bg: $dark-2; - $diff-label-fg: $white; - - $diff-group-bg: $dark-4; - $diff-arrow-color: $white; - - $diff-json-bg: $dark-4; - $diff-json-fg: $gray-5; - - $diff-json-added: #457740; - $diff-json-deleted: #a04338; - - $diff-json-old: #a04338; - $diff-json-new: #457740; - - $diff-json-changed-fg: $gray-5; - $diff-json-changed-num: $text-color; - - $diff-json-icon: $gray-7; - - //Submenu - $variable-option-bg: $blue-dark; - - //Switch Slider - // ------------------------- - $switch-bg: $input-bg; - $switch-slider-color: $dark-2; - $switch-slider-off-bg: $gray-1; - $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); - $switch-slider-shadow: 0 0 3px black; - - //Checkbox - // ------------------------- - $checkbox-bg: $dark-1; - $checkbox-border: 1px solid $gray-1; - $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); - $checkbox-color: $dark-1; - - //Panel Edit - // ------------------------- - $panel-editor-shadow: 0 0 20px black; - $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); - $panel-editor-viz-item-shadow: 0 0 8px $dark-5; - $panel-editor-viz-item-border: 1px solid $dark-5; - $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; - $panel-editor-viz-item-border-hover: 1px solid $blue; - $panel-editor-viz-item-bg: $input-black; - $panel-editor-tabs-line-color: #e3e3e3; - $panel-editor-viz-item-bg-hover: darken($blue, 47%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-blue; - - $panel-grid-placeholder-bg: darken($blue, 47%); - $panel-grid-placeholder-shadow: 0 0 4px $blue; - - // logs - $logs-color-unkown: $gray-2; - - // toggle-group - $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); - $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; - $button-toggle-group-btn-seperator-border: 1px solid $page-bg; - - $vertical-resize-handle-bg: $dark-5; - $vertical-resize-handle-dots: $gray-1; - $vertical-resize-handle-dots-hover: $gray-2; +export const darkThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: dark; + +// Grays +// ------------------------- +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark2}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; +$gray-6: ${theme.colors.gray6}; +$gray-7: ${theme.colors.gray7}; + +$gray-blue: #212327; +$input-black: #09090b; + +$white: ${theme.colors.white}; + +// Accent colors +// ------------------------- +$blue: ${theme.colors.blue}; +$blue-dark: #005f81; +$green: #299c46; +$red: #d44a3a; +$yellow: #ecbb13; +$purple: #9933cc; +$variable: #32d1df; +$orange: #eb7b18; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $brand-primary; +$brand-danger: $red; + +$query-red: #e24d42; +$query-green: #74e680; +$query-purple: #fe85fc; +$query-keyword: #66d9ef; +$query-orange: $orange; + +// Status colors +// ------------------------- +$online: #10a345; +$warn: #f79520; +$critical: #ed2e18; + +// Scaffolding +// ------------------------- +$body-bg: rgb(23, 24, 25); +$page-bg: rgb(22, 23, 25); + +$body-color: $gray-4; +$text-color: $gray-4; +$text-color-strong: $white; +$text-color-weak: $gray-2; +$text-color-faint: $dark-5; +$text-color-emphasis: $gray-5; + +$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% +); + +$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); +$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + +// Links +// ------------------------- +$link-color: darken($white, 11%); +$link-color-disabled: darken($link-color, 30%); +$link-hover-color: $white; +$external-link-color: $blue; + +// Typography +// ------------------------- +$headings-color: darken($white, 11%); +$abbr-border-color: $gray-3 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-4; + +// Panel +// ------------------------- +$panel-bg: #212124; +$panel-border: solid 1px $dark-1; +$panel-header-hover-bg: $dark-4; +$panel-corner: $panel-bg; + +// page header +$page-header-bg: linear-gradient(90deg, #292a2d, black); +$page-header-shadow: inset 0px -4px 14px $dark-2; +$page-header-border-color: $dark-4; + +$divider-border-color: $gray-1; + +// Graphite Target Editor +$tight-form-bg: $dark-3; +$tight-form-func-bg: $dark-4; +$tight-form-func-highlight-bg: $dark-5; + +$modal-backdrop-bg: #353c42; +$code-tag-bg: $dark-1; +$code-tag-border: $dark-4; + +// cards +$card-background: linear-gradient(135deg, #2f2f32, #262628); +$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + +// Lists +$list-item-bg: $card-background; +$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-blue; + +// Scrollbars +$scrollbarBackground: #404357; +$scrollbarBackground2: #3a3a3a; +$scrollbarBorder: black; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $dark-3; // for striping +$table-border: $dark-3; // table and cell border + +$table-bg-odd: $dark-2; +$table-bg-hover: $dark-3; + +// Buttons +// ------------------------- +$btn-primary-bg: #ff6600; +$btn-primary-bg-hl: #bc3e06; + +$btn-secondary-bg-hl: lighten($blue-dark, 5%); +$btn-secondary-bg: $blue-dark; + +$btn-success-bg: $green; +$btn-success-bg-hl: darken($green, 6%); + +$btn-warning-bg: $brand-warning; +$btn-warning-bg-hl: lighten($brand-warning, 8%); + +$btn-danger-bg: $red; +$btn-danger-bg-hl: darken($red, 8%); + +$btn-inverse-bg: $dark-3; +$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-text-color: $link-color; +$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + +$btn-link-color: $gray-3; + +$iconContainerBackground: $black; + +$btn-divider-left: $dark-4; +$btn-divider-right: $dark-2; + +$btn-drag-image: '../img/grab_dark.svg'; + +// Forms +// ------------------------- +$input-bg: $input-black; +$input-bg-disabled: $dark-3; + +$input-color: $gray-4; +$input-border-color: $dark-3; +$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); +$input-border-focus: $input-border-color; +$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-color-placeholder: $gray-1 !default; +$input-label-bg: $gray-blue; +$input-label-border-color: $dark-3; +$input-color-select-arrow: $white; + +// Input placeholder text color +$placeholderText: darken($text-color, 25%); + +// Search +$search-shadow: 0 0 30px 0 $black; +$search-filter-box-bg: $gray-blue; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $black; +$typeahead-selected-bg: $dark-4; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $dark-3; +$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownDividerTop: transparent; +$dropdownDividerBottom: #444; + +$dropdownLinkColor: $text-color; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundHover: $dark-4; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 55px; + +$navbarBackground: $panel-bg; +$navbarBorder: 1px solid $dark-3; +$navbarShadow: 0 0 20px black; + +$navbarLinkColor: $gray-4; + +$navbarButtonBackground: $navbarBackground; +$navbarButtonBackgroundHighlight: $body-bg; + +$navbar-button-border: #2f2f32; + +// Sidemenu +// ------------------------- +$side-menu-bg: $black; +$side-menu-bg-mobile: $side-menu-bg; +$side-menu-item-hover-bg: $dark-2; +$side-menu-shadow: 0 0 20px black; +$side-menu-link-color: $link-color; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $body-bg; +$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-shadow: 5px 5px 20px -5px $black; + +// Tabs +// ------------------------- +$tab-border-color: $dark-4; + +// Toolbar +$toolbar-bg: $input-black; + +// Form states and alerts +// ------------------------- +$warning-text-color: $warn; +$error-text-color: #e84d4d; +$success-text-color: #12d95a; +$info-text-color: $blue-dark; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $dark-4; +$popover-shadow: 0 0 20px black; + +$popover-help-bg: $btn-secondary-bg; +$popover-help-color: $text-color; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: $link-color; +$graph-tooltip-bg: $dark-1; + +$tooltipBackground: $black; +$tooltipColor: $gray-4; +$tooltipArrowColor: $tooltipBackground; +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox.png'; + +// info box +$info-box-border-color: darken($blue, 12%); + +// footer +$footer-link-color: $gray-2; +$footer-link-hover: $gray-4; + +// json-explorer +$json-explorer-default-color: $text-color; +$json-explorer-string-color: #23d662; +$json-explorer-number-color: $variable; +$json-explorer-boolean-color: $variable; +$json-explorer-null-color: #eec97d; +$json-explorer-undefined-color: rgb(239, 143, 190); +$json-explorer-function-color: #fd48cb; +$json-explorer-rotate-time: 100ms; +$json-explorer-toggler-opacity: 0.6; +$json-explorer-bracket-color: #9494ff; +$json-explorer-key-color: #23a0db; +$json-explorer-url-color: #027bff; + +// Changelog and diff +// ------------------------- +$diff-label-bg: $dark-2; +$diff-label-fg: $white; + +$diff-group-bg: $dark-4; +$diff-arrow-color: $white; + +$diff-json-bg: $dark-4; +$diff-json-fg: $gray-5; + +$diff-json-added: #457740; +$diff-json-deleted: #a04338; + +$diff-json-old: #a04338; +$diff-json-new: #457740; + +$diff-json-changed-fg: $gray-5; +$diff-json-changed-num: $text-color; + +$diff-json-icon: $gray-7; + +//Submenu +$variable-option-bg: $blue-dark; + +//Switch Slider +// ------------------------- +$switch-bg: $input-bg; +$switch-slider-color: $dark-2; +$switch-slider-off-bg: $gray-1; +$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-shadow: 0 0 3px black; + +//Checkbox +// ------------------------- +$checkbox-bg: $dark-1; +$checkbox-border: 1px solid $gray-1; +$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-color: $dark-1; + +//Panel Edit +// ------------------------- +$panel-editor-shadow: 0 0 20px black; +$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); +$panel-editor-viz-item-shadow: 0 0 8px $dark-5; +$panel-editor-viz-item-border: 1px solid $dark-5; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; +$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-bg: $input-black; +$panel-editor-tabs-line-color: #e3e3e3; +$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-blue; + +$panel-grid-placeholder-bg: darken($blue, 47%); +$panel-grid-placeholder-shadow: 0 0 4px $blue; + +// logs +$logs-color-unkown: $gray-2; + +// toggle-group +$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-shadow: inset 0 0 4px $black; +$button-toggle-group-btn-seperator-border: 1px solid $page-bg; + +$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-dots: $gray-1; +$vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 80e425af0f8..552de0fe62c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -2,386 +2,381 @@ import { GrafanaTheme } from '../types'; -export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: light; - - // Grays - // ------------------------- - $black: ${theme.colors.black}; - $dark-1: ${theme.colors.dark1}; - $dark-2: ${theme.colors.dark2}; - $dark-3: ${theme.colors.dark3}; - $dark-4: ${theme.colors.dark4}; - $dark-5: ${theme.colors.dark5}; - $gray-1: ${theme.colors.gray1}; - $gray-2: ${theme.colors.gray2}; - $gray-3: ${theme.colors.gray3}; - $gray-4: ${theme.colors.gray4}; - $gray-5: ${theme.colors.gray5}; - $gray-6: ${theme.colors.gray6}; - $gray-7: ${theme.colors.gray7}; - - $white: ${theme.colors.white}; - - // Accent colors - // ------------------------- - $blue: ${theme.colors.blue}; - $blue-light: #00a8e6; - $green: #3aa655; - $red: #d44939; - $yellow: #ff851b; - $orange: #ff7941; - $purple: #9954bb; - $variable: $blue; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $orange; - $brand-danger: $red; - - $query-red: $red; - $query-green: $green; - $query-purple: $purple; - $query-orange: $orange; - $query-keyword: $blue; - - // Status colors - // ------------------------- - $online: #01a64f; - $warn: #f79520; - $critical: #ec2128; - - // Scaffolding - // ------------------------- - $body-bg: $gray-7; - $page-bg: $gray-7; - - $body-color: $gray-1; - $text-color: $gray-1; - $text-color-strong: $dark-2; - $text-color-weak: $gray-2; - $text-color-faint: $gray-4; - $text-color-emphasis: $dark-5; - - $text-shadow-faint: none; - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 1) 0%, - rgba(255, 68, 0, 1) 99%, - rgba(255, 68, 0, 1) 100% - ); - - $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); - $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); - - // Links - // ------------------------- - $link-color: $gray-1; - $link-color-disabled: lighten($link-color, 30%); - $link-hover-color: darken($link-color, 20%); - $external-link-color: $blue-light; - - // Typography - // ------------------------- - $headings-color: $text-color; - $abbr-border-color: $gray-2 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-3 !default; - - // Panel - // ------------------------- - $panel-bg: $white; - $panel-border: solid 1px $gray-5; - $panel-header-hover-bg: $gray-6; - $panel-corner: $gray-4; - - // Page header - $page-header-bg: linear-gradient(90deg, $white, $gray-7); - $page-header-shadow: inset 0px -3px 10px $gray-6; - $page-header-border-color: $gray-4; - - $divider-border-color: $gray-2; - - // Graphite Target Editor - $tight-form-bg: #eaebee; - $tight-form-func-bg: $gray-5; - $tight-form-func-highlight-bg: $gray-6; - - $modal-backdrop-bg: $body-bg; - $code-tag-bg: $gray-6; - $code-tag-border: darken($code-tag-bg, 3%); - - // cards - $card-background: linear-gradient(135deg, $gray-6, $gray-5); - $card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); - - // Lists - $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; - $list-item-hover-bg: darken($gray-5, 5%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-6; - - // Scrollbars - $scrollbarBackground: $gray-5; - $scrollbarBackground2: $gray-5; - $scrollbarBorder: $gray-4; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $gray-5; // for striping - $table-border: $gray-3; // table and cell border - - $table-bg-odd: $gray-6; - $table-bg-hover: $gray-5; - - // Buttons - // ------------------------- - $btn-primary-bg: $brand-primary; - $btn-primary-bg-hl: lighten($brand-primary, 8%); - - $btn-secondary-bg: $blue; - $btn-secondary-bg-hl: lighten($blue, 4%); - - $btn-success-bg: lighten($green, 3%); - $btn-success-bg-hl: darken($green, 3%); - - $btn-warning-bg: lighten($orange, 3%); - $btn-warning-bg-hl: darken($orange, 3%); - - $btn-danger-bg: lighten($red, 3%); - $btn-danger-bg-hl: darken($red, 3%); - - $btn-inverse-bg: $gray-6; - $btn-inverse-bg-hl: darken($gray-6, 5%); - $btn-inverse-text-color: $gray-1; - $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); - - $btn-link-color: $gray-1; - - $iconContainerBackground: $white; - - $btn-divider-left: $gray-4; - $btn-divider-right: $gray-7; - - $btn-drag-image: '../img/grab_light.svg'; - - // Forms - // ------------------------- - $input-bg: $white; - $input-bg-disabled: $gray-5; - - $input-color: $dark-3; - $input-border-color: $gray-5; - $input-box-shadow: none; - $input-border-focus: $blue !default; - $input-box-shadow-focus: $blue !default; - $input-color-placeholder: $gray-4 !default; - $input-label-bg: $gray-5; - $input-label-border-color: $gray-5; - $input-color-select-arrow: $gray-1; - - // Input placeholder text color - $placeholderText: $gray-2; - - // search - $search-shadow: 0 5px 30px 0 $gray-4; - $search-filter-box-bg: $gray-7; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $gray-5; - $typeahead-selected-bg: $gray-6; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $white; - $dropdownBorder: $gray-4; - $dropdownDividerTop: $gray-6; - $dropdownDividerBottom: $white; - - $dropdownLinkColor: $dark-3; - $dropdownLinkColorHover: $link-color; - $dropdownLinkColorActive: $link-color; - - $dropdownLinkBackgroundHover: $gray-6; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 52px; - - $navbarBackground: $white; - $navbarBorder: 1px solid $gray-4; - $navbarShadow: 0 0 3px #c1c1c1; - - $navbarLinkColor: #444; - - $navbarButtonBackground: lighten($navbarBackground, 3%); - $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - - $navbar-button-border: $gray-4; - - // Sidemenu - // ------------------------- - $side-menu-bg: $dark-2; - $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; - $side-menu-item-hover-bg: $gray-1; - $side-menu-shadow: 5px 0px 10px -5px $gray-1; - $side-menu-link-color: $gray-6; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $gray-7; - $menu-dropdown-hover-bg: $gray-6; - $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; - - // Tabs - // ------------------------- - $tab-border-color: $gray-5; - - // Toolbar - $toolbar-bg: white; - - // Form states and alerts - // ------------------------- - $warning-text-color: lighten($orange, 10%); - $error-text-color: lighten($red, 10%); - $success-text-color: lighten($green, 10%); - $info-text-color: $blue; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-info-bg: $blue; - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $gray-5; - $popover-shadow: 0 0 20px $white; - - $popover-help-bg: $blue; - $popover-help-color: $gray-6; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: lighten($popover-help-color, 5%); - $graph-tooltip-bg: $gray-5; - - $tooltipBackground: $gray-1; - $tooltipColor: $gray-7; - $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox_white.png'; - - // info box - $info-box-border-color: lighten($blue, 20%); - - // footer - $footer-link-color: $gray-3; - $footer-link-hover: $dark-5; - - // json explorer - $json-explorer-default-color: black; - $json-explorer-string-color: green; - $json-explorer-number-color: blue; - $json-explorer-boolean-color: red; - $json-explorer-null-color: #855a00; - $json-explorer-undefined-color: rgb(202, 11, 105); - $json-explorer-function-color: #ff20ed; - $json-explorer-rotate-time: 100ms; - $json-explorer-toggler-opacity: 0.6; - $json-explorer-bracket-color: blue; - $json-explorer-key-color: #00008b; - $json-explorer-url-color: blue; - - // Changelog and diff - // ------------------------- - $diff-label-bg: $gray-5; - $diff-label-fg: $gray-2; - - $diff-arrow-color: $dark-3; - $diff-group-bg: $gray-7; - - $diff-json-bg: $gray-5; - $diff-json-fg: $gray-2; - - $diff-json-added: lighten(desaturate($green, 30%), 10%); - $diff-json-deleted: desaturate($red, 35%); - - $diff-json-old: #5a372a; - $diff-json-new: #664e33; - - $diff-json-changed-fg: $gray-6; - $diff-json-changed-num: $gray-4; - - $diff-json-icon: $gray-4; - - //Submenu - $variable-option-bg: $blue-light; - - //Switch Slider - // ------------------------- - $switch-bg: $white; - $switch-slider-color: $gray-7; - $switch-slider-off-bg: $gray-5; - $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); - $switch-slider-shadow: 0 0 3px $dark-5; - - //Checkbox - // ------------------------- - $checkbox-bg: $gray-6; - $checkbox-border: 1px solid $gray-3; - $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); - $checkbox-color: $gray-7; - - //Panel Edit - // ------------------------- - $panel-editor-shadow: 0px 0px 8px $gray-3; - $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); - $panel-editor-viz-item-shadow: 0 0 4px $gray-3; - $panel-editor-viz-item-border: 1px solid $gray-3; - $panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; - $panel-editor-viz-item-border-hover: 1px solid $blue-light; - $panel-editor-viz-item-bg: $white; - $panel-editor-tabs-line-color: $dark-5; - $panel-editor-viz-item-bg-hover: lighten($blue, 62%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-5; - - $panel-grid-placeholder-bg: lighten($blue, 62%); - $panel-grid-placeholder-shadow: 0 0 4px $blue-light; - - // logs - $logs-color-unkown: $gray-5; - - // toggle-group - $button-toggle-group-btn-active-bg: $brand-primary; - $button-toggle-group-btn-active-shadow: inset 0 0 4px $white; - $button-toggle-group-btn-seperator-border: 1px solid $gray-6; - - $vertical-resize-handle-bg: $gray-4; - $vertical-resize-handle-dots: $gray-3; - $vertical-resize-handle-dots-hover: $gray-2; +export const lightThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: light; + +// Grays +// ------------------------- +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark1}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; +$gray-6: ${theme.colors.gray6}; +$gray-7: ${theme.colors.gray7}; + +$white: ${theme.colors.white}; + +// Accent colors +// ------------------------- +$blue: ${theme.colors.blue}; +$blue-light: #00a8e6; +$green: #3aa655; +$red: #d44939; +$yellow: #ff851b; +$orange: #ff7941; +$purple: #9954bb; +$variable: $blue; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + +$query-red: $red; +$query-green: $green; +$query-purple: $purple; +$query-orange: $orange; +$query-keyword: $blue; + +// Status colors +// ------------------------- +$online: #01a64f; +$warn: #f79520; +$critical: #ec2128; + +// Scaffolding +// ------------------------- +$body-bg: $gray-7; +$page-bg: $gray-7; + +$body-color: $gray-1; +$text-color: $gray-1; +$text-color-strong: $dark-2; +$text-color-weak: $gray-2; +$text-color-faint: $gray-4; +$text-color-emphasis: $dark-5; + +$text-shadow-faint: none; +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); + +$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); +$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); + +// Links +// ------------------------- +$link-color: $gray-1; +$link-color-disabled: lighten($link-color, 30%); +$link-hover-color: darken($link-color, 20%); +$external-link-color: $blue-light; + +// Typography +// ------------------------- +$headings-color: $text-color; +$abbr-border-color: $gray-2 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-3 !default; + +// Panel +// ------------------------- +$panel-bg: $white; +$panel-border: solid 1px $gray-5; +$panel-header-hover-bg: $gray-6; +$panel-corner: $gray-4; + +// Page header +$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-shadow: inset 0px -3px 10px $gray-6; +$page-header-border-color: $gray-4; + +$divider-border-color: $gray-2; + +// Graphite Target Editor +$tight-form-bg: #eaebee; +$tight-form-func-bg: $gray-5; +$tight-form-func-highlight-bg: $gray-6; + +$modal-backdrop-bg: $body-bg; +$code-tag-bg: $gray-6; +$code-tag-border: darken($code-tag-bg, 3%); + +// cards +$card-background: linear-gradient(135deg, $gray-6, $gray-5); +$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + +// Lists +$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; +$list-item-hover-bg: darken($gray-5, 5%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-6; + +// Scrollbars +$scrollbarBackground: $gray-5; +$scrollbarBackground2: $gray-5; +$scrollbarBorder: $gray-4; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $gray-5; // for striping +$table-border: $gray-3; // table and cell border + +$table-bg-odd: $gray-6; +$table-bg-hover: $gray-5; + +// Buttons +// ------------------------- +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); + +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); + +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); + +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); + +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); + +$btn-inverse-bg: $gray-6; +$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-text-color: $gray-1; +$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); + +$btn-link-color: $gray-1; + +$iconContainerBackground: $white; + +$btn-divider-left: $gray-4; +$btn-divider-right: $gray-7; + +$btn-drag-image: '../img/grab_light.svg'; + +// Forms +// ------------------------- +$input-bg: $white; +$input-bg-disabled: $gray-5; + +$input-color: $dark-3; +$input-border-color: $gray-5; +$input-box-shadow: none; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; +$input-color-placeholder: $gray-4 !default; +$input-label-bg: $gray-5; +$input-label-border-color: $gray-5; +$input-color-select-arrow: $gray-1; + +// Input placeholder text color +$placeholderText: $gray-2; + +// search +$search-shadow: 0 5px 30px 0 $gray-4; +$search-filter-box-bg: $gray-7; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $gray-5; +$typeahead-selected-bg: $gray-6; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: $gray-4; +$dropdownDividerTop: $gray-6; +$dropdownDividerBottom: $white; + +$dropdownLinkColor: $dark-3; +$dropdownLinkColorHover: $link-color; +$dropdownLinkColorActive: $link-color; + +$dropdownLinkBackgroundHover: $gray-6; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 52px; + +$navbarBackground: $white; +$navbarBorder: 1px solid $gray-4; +$navbarShadow: 0 0 3px #c1c1c1; + +$navbarLinkColor: #444; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + +$navbar-button-border: $gray-4; + +// Sidemenu +// ------------------------- +$side-menu-bg: $dark-2; +$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; +$side-menu-item-hover-bg: $gray-1; +$side-menu-shadow: 5px 0px 10px -5px $gray-1; +$side-menu-link-color: $gray-6; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $gray-7; +$menu-dropdown-hover-bg: $gray-6; +$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; + +// Tabs +// ------------------------- +$tab-border-color: $gray-5; + +// Toolbar +$toolbar-bg: white; + +// Form states and alerts +// ------------------------- +$warning-text-color: lighten($orange, 10%); +$error-text-color: lighten($red, 10%); +$success-text-color: lighten($green, 10%); +$info-text-color: $blue; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-info-bg: $blue; + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $gray-5; +$popover-shadow: 0 0 20px $white; + +$popover-help-bg: $blue; +$popover-help-color: $gray-6; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: lighten($popover-help-color, 5%); +$graph-tooltip-bg: $gray-5; + +$tooltipBackground: $gray-1; +$tooltipColor: $gray-7; +$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox_white.png'; + +// info box +$info-box-border-color: lighten($blue, 20%); + +// footer +$footer-link-color: $gray-3; +$footer-link-hover: $dark-5; + +// json explorer +$json-explorer-default-color: black; +$json-explorer-string-color: green; +$json-explorer-number-color: blue; +$json-explorer-boolean-color: red; +$json-explorer-null-color: #855a00; +$json-explorer-undefined-color: rgb(202, 11, 105); +$json-explorer-function-color: #ff20ed; +$json-explorer-rotate-time: 100ms; +$json-explorer-toggler-opacity: 0.6; +$json-explorer-bracket-color: blue; +$json-explorer-key-color: #00008b; +$json-explorer-url-color: blue; + +// Changelog and diff +// ------------------------- +$diff-label-bg: $gray-5; +$diff-label-fg: $gray-2; + +$diff-arrow-color: $dark-3; +$diff-group-bg: $gray-7; + +$diff-json-bg: $gray-5; +$diff-json-fg: $gray-2; + +$diff-json-added: lighten(desaturate($green, 30%), 10%); +$diff-json-deleted: desaturate($red, 35%); + +$diff-json-old: #5a372a; +$diff-json-new: #664e33; + +$diff-json-changed-fg: $gray-6; +$diff-json-changed-num: $gray-4; + +$diff-json-icon: $gray-4; + +//Submenu +$variable-option-bg: $blue-light; + +//Switch Slider +// ------------------------- +$switch-bg: $white; +$switch-slider-color: $gray-7; +$switch-slider-off-bg: $gray-5; +$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-shadow: 0 0 3px $dark-5; + +//Checkbox +// ------------------------- +$checkbox-bg: $gray-6; +$checkbox-border: 1px solid $gray-3; +$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-color: $gray-7; + +//Panel Edit +// ------------------------- +$panel-editor-shadow: 0px 0px 8px $gray-3; +$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); +$panel-editor-viz-item-shadow: 0 0 4px $gray-3; +$panel-editor-viz-item-border: 1px solid $gray-3; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$panel-editor-viz-item-bg: $white; +$panel-editor-tabs-line-color: $dark-5; +$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-5; + +$panel-grid-placeholder-bg: lighten($blue, 62%); +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; + +// logs +$logs-color-unkown: $gray-5; + +// toggle-group +$button-toggle-group-btn-active-bg: $brand-primary; +$button-toggle-group-btn-active-shadow: inset 0 0 4px $white; +$button-toggle-group-btn-seperator-border: 1px solid $gray-6; + +$vertical-resize-handle-bg: $gray-4; +$vertical-resize-handle-dots: $gray-3; +$vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 671ab5bb631..0051f74b21b 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -2,216 +2,216 @@ import { GrafanaThemeCommons } from '../types'; -export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => ` - // Options - // - // Quickly modify global styling by enabling or disabling optional features. +export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => + `// Options +// +// Quickly modify global styling by enabling or disabling optional features. - $enable-flex: true !default; - $enable-hover-media-query: false !default; +$enable-flex: true !default; +$enable-hover-media-query: false !default; - // Spacing - // - // Control the default styling of most Bootstrap elements by modifying these - // variables. Mostly focused on spacing. +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. - $spacer: 1rem !default; - $spacer-x: $spacer !default; - $spacer-y: $spacer !default; - $spacers: ( - 0: (x: 0, y: 0), - 1: (x: $spacer-x, y: $spacer-y), - 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), - 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) - ) - !default; - $border-width: 1px !default; +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$spacers: ( + 0: (x: 0, y: 0), + 1: (x: $spacer-x, y: $spacer-y), + 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), + 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) + ) + !default; +$border-width: 1px !default; - // Grid breakpoints - // - // Define the minimum and maximum dimensions at which your layout will change, - // adapting to different screen sizes, for use in media queries. +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. - $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; +$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; - // Grid containers - // - // Define the maximum width of .container for different screen sizes. +// Grid containers +// +// Define the maximum width of .container for different screen sizes. - $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; +$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; - // Grid columns - // - // Set the number of columns and specify the width of the gutters. +// Grid columns +// +// Set the number of columns and specify the width of the gutters. - $grid-columns: 12 !default; - $grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; - $enable-flex: true; +$enable-flex: true; - // Typography - // ------------------------- +// Typography +// ------------------------- - $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; - $font-family-serif: ${theme.typography.fontFamily.serif}; - $font-family-monospace: ${theme.typography.fontFamily.monospace}; - $font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; +$font-family-serif: ${theme.typography.fontFamily.serif}; +$font-family-monospace: ${theme.typography.fontFamily.monospace}; +$font-family-base: $font-family-sans-serif !default; - $font-size-root: 14px !default; - $font-size-base: 13px !default; +$font-size-root: 14px !default; +$font-size-base: 13px !default; - $font-size-lg: 18px !default; - $font-size-md: 14px !default; - $font-size-sm: 12px !default; - $font-size-xs: 10px !default; +$font-size-lg: 18px !default; +$font-size-md: 14px !default; +$font-size-sm: 12px !default; +$font-size-xs: 10px !default; - $line-height-base: 1.5 !default; - $font-weight-semi-bold: 500; +$line-height-base: 1.5 !default; +$font-weight-semi-bold: 500; - $font-size-h1: 2rem !default; - $font-size-h2: 1.75rem !default; - $font-size-h3: 1.5rem !default; - $font-size-h4: 1.3rem !default; - $font-size-h5: 1.2rem !default; - $font-size-h6: 1rem !default; +$font-size-h1: 2rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.5rem !default; +$font-size-h4: 1.3rem !default; +$font-size-h5: 1.2rem !default; +$font-size-h6: 1rem !default; - $display1-size: 6rem !default; - $display2-size: 5.5rem !default; - $display3-size: 4.5rem !default; - $display4-size: 3.5rem !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; - $display1-weight: 400 !default; - $display2-weight: 400 !default; - $display3-weight: 400 !default; - $display4-weight: 400 !default; +$display1-weight: 400 !default; +$display2-weight: 400 !default; +$display3-weight: 400 !default; +$display4-weight: 400 !default; - $lead-font-size: 1.25rem !default; - $lead-font-weight: 300 !default; +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; - $headings-margin-bottom: ($spacer / 2) !default; - $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; - $headings-font-weight: 400 !default; - $headings-line-height: 1.1 !default; +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$headings-font-weight: 400 !default; +$headings-line-height: 1.1 !default; - $hr-border-width: $border-width !default; - $dt-font-weight: bold !default; +$hr-border-width: $border-width !default; +$dt-font-weight: bold !default; - // Components - // - // Define common padding and border radius sizes and more. +// Components +// +// Define common padding and border radius sizes and more. - $line-height-lg: (4 / 3) !default; - $line-height-sm: 1.5 !default; +$line-height-lg: (4 / 3) !default; +$line-height-sm: 1.5 !default; - $border-radius: 3px !default; - $border-radius-lg: 5px !default; - $border-radius-sm: 2px!default; +$border-radius: 3px !default; +$border-radius-lg: 5px !default; +$border-radius-sm: 2px!default; - // Page +// Page - $page-sidebar-width: 11rem; - $page-sidebar-margin: 4rem; +$page-sidebar-width: 11rem; +$page-sidebar-margin: 4rem; - // Links - // ------------------------- - $link-decoration: none !default; - $link-hover-decoration: none !default; +// Links +// ------------------------- +$link-decoration: none !default; +$link-hover-decoration: none !default; - // Tables - // - // Customizes the table component with basic values, each used across all table variations. +// Tables +// +// Customizes the table component with basic values, each used across all table variations. - $table-cell-padding: 4px 10px !default; +$table-cell-padding: 4px 10px !default; - // Forms - $input-padding-x: 10px !default; - $input-padding-y: 8px !default; - $input-line-height: 18px !default; +// Forms +$input-padding-x: 10px !default; +$input-padding-y: 8px !default; +$input-line-height: 18px !default; - $input-btn-border-width: 1px; - $input-border-radius: 0 $border-radius $border-radius 0 !default; - $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; +$input-btn-border-width: 1px; +$input-border-radius: 0 $border-radius $border-radius 0 !default; +$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; - $label-border-radius: $border-radius 0 0 $border-radius !default; - $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; +$label-border-radius: $border-radius 0 0 $border-radius !default; +$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; - $input-padding-y-sm: 4px !default; +$input-padding-y-sm: 4px !default; - $input-padding-x-lg: 20px !default; - $input-padding-y-lg: 10px !default; +$input-padding-x-lg: 20px !default; +$input-padding-y-lg: 10px !default; - $input-height: 35px !default; +$input-height: 35px !default; - $gf-form-margin: 0.2rem; - $gf-form-input-height: 35px; +$gf-form-margin: 0.2rem; +$gf-form-input-height: 35px; - $cursor-disabled: not-allowed !default; +$cursor-disabled: not-allowed !default; - // Form validation icons - $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") - !default; - $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") - !default; - $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") - !default; +// Form validation icons +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") + !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") + !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") + !default; - // Z-index master list - // ------------------------- - // Used for a bird's eye view of components dependent on the z-axis - // Try to avoid customizing these :) - $zindex-dropdown: 1000; - $zindex-navbar-fixed: 1020; - $zindex-sidemenu: 1025; - $zindex-tooltip: 1030; - $zindex-modal-backdrop: 1040; - $zindex-modal: 1050; - $zindex-typeahead: 1060; +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindex-dropdown: 1000; +$zindex-navbar-fixed: 1020; +$zindex-sidemenu: 1025; +$zindex-tooltip: 1030; +$zindex-modal-backdrop: 1040; +$zindex-modal: 1050; +$zindex-typeahead: 1060; - // Buttons - // +// Buttons +// - $btn-padding-x: 1rem !default; - $btn-padding-y: 0.7rem !default; - $btn-line-height: 1 !default; - $btn-font-weight: 500 !default; +$btn-padding-x: 1rem !default; +$btn-padding-y: 0.7rem !default; +$btn-line-height: 1 !default; +$btn-font-weight: 500 !default; - $btn-padding-x-sm: 0.5rem !default; - $btn-padding-y-sm: 0.25rem !default; +$btn-padding-x-sm: 0.5rem !default; +$btn-padding-y-sm: 0.25rem !default; - $btn-padding-x-lg: 21px !default; - $btn-padding-y-lg: 11px !default; +$btn-padding-x-lg: 21px !default; +$btn-padding-y-lg: 11px !default; - $btn-padding-x-xl: 21px !default; - $btn-padding-y-xl: 11px !default; +$btn-padding-x-xl: 21px !default; +$btn-padding-y-xl: 11px !default; - $btn-border-radius: 2px; +$btn-border-radius: 2px; - $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; +$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; - // sidemenu - $side-menu-width: 60px; +// sidemenu +$side-menu-width: 60px; - // dashboard - $panel-margin: 10px; - $dashboard-padding: $panel-margin * 2; - $panel-horizontal-padding: 10; - $panel-vertical-padding: 5; - $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; +// dashboard +$panel-margin: 10px; +$dashboard-padding: $panel-margin * 2; +$panel-horizontal-padding: 10; +$panel-vertical-padding: 5; +$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; - // tabs - $tabs-padding: 10px 15px 9px; +// tabs +$tabs-padding: 10px 15px 9px; - $external-services: ( - github: (bgColor: #464646, borderColor: #393939, icon: ''), - gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), - google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), - grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), - oauth: (bgColor: #262628, borderColor: #393939, icon: '') - ) - !default; +$external-services: ( + github: (bgColor: #464646, borderColor: #393939, icon: ''), + gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), + google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), + grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), + oauth: (bgColor: #262628, borderColor: #393939, icon: '') + ) + !default; - :export { - panelHorizontalPadding: $panel-horizontal-padding; - panelVerticalPadding: $panel-vertical-padding; - } +:export { + panelhorizontalpadding: $panel-horizontal-padding; + panelverticalpadding: $panel-vertical-padding; +} `; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 57ee960f3d6..104edced000 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,9 +4,9 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif;", - serif: "Georgia, 'Times New Roman', Times, serif;", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;", + sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + serif: "Georgia, 'Times New Roman', Times, serif", + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { base: '13px', From 3ca4adf51eaee8321919e6aec7fe47cb97653863 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Thu, 14 Feb 2019 11:24:34 +0100 Subject: [PATCH 08/70] Add missing nodemon dependency --- package.json | 1 + yarn.lock | 44 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dc17c344ee4..0076af4c0bd 100644 --- a/package.json +++ b/package.json @@ -178,6 +178,7 @@ "moment": "^2.22.2", "mousetrap": "^1.6.0", "mousetrap-global-bind": "^1.1.0", + "nodemon": "^1.18.10", "prismjs": "^1.6.0", "prop-types": "^15.6.2", "rc-cascader": "^0.14.0", diff --git a/yarn.lock b/yarn.lock index 4c32912ea5c..e9a78209fe8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4708,7 +4708,7 @@ child-process-promise@^2.2.1: node-version "^1.0.0" promise-polyfill "^6.0.1" -chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: +chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.1.tgz#adc39ad55a2adf26548bd2afa048f611091f9184" integrity sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ== @@ -9000,6 +9000,11 @@ iferr@^0.1.5, iferr@~0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= +ignore-by-default@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09" + integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk= + ignore-walk@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8" @@ -11952,6 +11957,22 @@ node-version@^1.0.0: resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d" integrity sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ== +nodemon@^1.18.10: + version "1.18.10" + resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.18.10.tgz#3ba63f64eb4c283cf3e4f75f30817e9d4f393afe" + integrity sha512-we51yBb1TfEvZamFchRgcfLbVYgg0xlGbyXmOtbBzDwxwgewYS/YbZ5tnlnsH51+AoSTTsT3A2E/FloUbtH8cQ== + dependencies: + chokidar "^2.1.0" + debug "^3.1.0" + ignore-by-default "^1.0.1" + minimatch "^3.0.4" + pstree.remy "^1.1.6" + semver "^5.5.0" + supports-color "^5.2.0" + touch "^3.1.0" + undefsafe "^2.0.2" + update-notifier "^2.5.0" + nomnom@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" @@ -13733,6 +13754,11 @@ psl@^1.1.24, psl@^1.1.28: resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184" integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw== +pstree.remy@^1.1.6: + version "1.1.6" + resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.6.tgz#73a55aad9e2d95814927131fbf4dc1b62d259f47" + integrity sha512-NdF35+QsqD7EgNEI5mkI/X+UwaxVEbQaz9f4IooEmMUv6ZPmlTQYGjBPJGgrlzNdjSvIy4MWMg6Q6vCgBO2K+w== + public-encrypt@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0" @@ -16340,7 +16366,7 @@ supports-color@^4.5.0: dependencies: has-flag "^2.0.0" -supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0: +supports-color@^5.1.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== @@ -16733,6 +16759,13 @@ touch@^2.0.1: dependencies: nopt "~1.0.10" +touch@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b" + integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA== + dependencies: + nopt "~1.0.10" + tough-cookie@>=2.3.3: version "3.0.1" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2" @@ -17014,6 +17047,13 @@ umask@^1.1.0, umask@~1.1.0: resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d" integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0= +undefsafe@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.2.tgz#225f6b9e0337663e0d8e7cfd686fc2836ccace76" + integrity sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY= + dependencies: + debug "^2.2.0" + underscore.string@~2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b" From 28f42bab5bc1661a4572be7f91239ecccb602f72 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 09:26:14 +0100 Subject: [PATCH 09/70] Replace require with import in start task --- scripts/cli/start.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/cli/start.ts b/scripts/cli/start.ts index 7df202387d7..cb68ee7f1dd 100644 --- a/scripts/cli/start.ts +++ b/scripts/cli/start.ts @@ -1,4 +1,4 @@ -const concurrently = require('concurrently'); +import concurrently from 'concurrently'; export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => { const jobs = []; From 6da57d4c0874b7665e469fc3e0a0bb7477a9d514 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 11:03:52 +0100 Subject: [PATCH 10/70] Make clear that variable scss files are generated from templates --- .../src/themes/_variables.dark.scss.tmpl.ts | 4 +- .../src/themes/_variables.light.scss.tmpl.ts | 4 +- .../src/themes/_variables.scss.tmpl.ts | 4 +- .../src/utils/generatedFileBanner.ts | 10 ++++ .../containers/DashboardPage.test.tsx | 60 ++++++++++--------- .../dashboard/dashgrid/PanelChrome.tsx | 2 +- ...rk.scss => _variables.dark.generated.scss} | 10 ++++ ...riables.scss => _variables.generated.scss} | 10 ++++ ...ss.d.ts => _variables.generated.scss.d.ts} | 4 +- ...t.scss => _variables.light.generated.scss} | 10 ++++ public/sass/grafana.dark.scss | 4 +- public/sass/grafana.light.scss | 4 +- scripts/cli/generateSassVariableFiles.ts | 6 +- 13 files changed, 90 insertions(+), 42 deletions(-) create mode 100644 packages/grafana-ui/src/utils/generatedFileBanner.ts rename public/sass/{_variables.dark.scss => _variables.dark.generated.scss} (97%) rename public/sass/{_variables.scss => _variables.generated.scss} (95%) rename public/sass/{_variables.scss.d.ts => _variables.generated.scss.d.ts} (60%) rename public/sass/{_variables.light.scss => _variables.light.generated.scss} (97%) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 5b5a229a7f9..52601aecb18 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaTheme } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => - `// Global values + `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')} +// Global values // -------------------------------------------------- $theme-name: dark; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 552de0fe62c..770c536fcd2 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaTheme } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const lightThemeVarsTemplate = (theme: GrafanaTheme) => - `// Global values + `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')} +// Global values // -------------------------------------------------- $theme-name: light; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 0051f74b21b..ce73f8e6dc8 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaThemeCommons } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => - `// Options + `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')} +// Options // // Quickly modify global styling by enabling or disabling optional features. diff --git a/packages/grafana-ui/src/utils/generatedFileBanner.ts b/packages/grafana-ui/src/utils/generatedFileBanner.ts new file mode 100644 index 00000000000..86ee59dc1a3 --- /dev/null +++ b/packages/grafana-ui/src/utils/generatedFileBanner.ts @@ -0,0 +1,10 @@ +export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify this file! + * - Edit ${themeFile} to regenerate + * - Edit ${templateFile} to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ +`; diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 1e6f8bd888e..30ce4005188 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { DashboardPage, Props, State } from './DashboardPage'; import { DashboardModel } from '../state'; import { cleanUpDashboard } from '../state/actions'; -import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux'; +import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux'; import { DashboardRouteInfo, DashboardInitPhase } from 'app/types'; -jest.mock('sass/_variables.scss', () => ({ +jest.mock('sass/_variables.generated.scss', () => ({ panelhorizontalpadding: 10, panelVerticalPadding: 10, })); @@ -23,17 +23,20 @@ interface ScenarioContext { } function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel { - const data = Object.assign({ - title: 'My dashboard', - panels: [ - { - id: 1, - type: 'graph', - title: 'My graph', - gridPos: { x: 0, y: 0, w: 1, h: 1 }, - }, - ], - }, overrides); + const data = Object.assign( + { + title: 'My dashboard', + panels: [ + { + id: 1, + type: 'graph', + title: 'My graph', + gridPos: { x: 0, y: 0, w: 1, h: 1 }, + }, + ], + }, + overrides + ); const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides); return new DashboardModel(data, meta); @@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) = ctx.dashboard = props.dashboard; ctx.wrapper = shallow(); - } + }, }; beforeEach(() => { @@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) = } describe('DashboardPage', () => { - - dashboardPageScenario("Given initial state", (ctx) => { + dashboardPageScenario('Given initial state', ctx => { ctx.setup(() => { ctx.mount(); }); @@ -97,7 +99,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Dashboard is fetching slowly", (ctx) => { + dashboardPageScenario('Dashboard is fetching slowly', ctx => { ctx.setup(() => { ctx.mount(); ctx.wrapper.setProps({ @@ -111,7 +113,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Dashboard init completed ", (ctx) => { + dashboardPageScenario('Dashboard init completed ', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -126,7 +128,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When user goes into panel edit", (ctx) => { + dashboardPageScenario('When user goes into panel edit', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -149,7 +151,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When user goes back to dashboard from panel edit", (ctx) => { + dashboardPageScenario('When user goes back to dashboard from panel edit', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -179,7 +181,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When dashboard has editview url state", (ctx) => { + dashboardPageScenario('When dashboard has editview url state', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -197,7 +199,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When adding panel", (ctx) => { + dashboardPageScenario('When adding panel', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -214,37 +216,37 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Given panel with id 0", (ctx) => { + dashboardPageScenario('Given panel with id 0', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp({ - panels: [{ id: 0, type: 'graph'}], + panels: [{ id: 0, type: 'graph' }], schemaVersion: 17, }); ctx.wrapper.setProps({ urlEdit: true, urlFullscreen: true, - urlPanelId: '0' + urlPanelId: '0', }); }); - it('Should go into edit mode' , () => { + it('Should go into edit mode', () => { expect(ctx.wrapper.state().isEditing).toBe(true); expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0); }); }); - dashboardPageScenario("When dashboard unmounts", (ctx) => { + dashboardPageScenario('When dashboard unmounts', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp({ - panels: [{ id: 0, type: 'graph'}], + panels: [{ id: 0, type: 'graph' }], schemaVersion: 17, }); ctx.wrapper.unmount(); }); - it('Should call clean up action' , () => { + it('Should call clean up action', () => { expect(ctx.cleanUpDashboardMock.calls).toBe(1); }); }); diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index b29be4b389d..c66a7ff2fe8 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state'; import { PanelPlugin } from 'app/types'; import { TimeRange, LoadingState } from '@grafana/ui'; -import variables from 'sass/_variables.scss'; +import variables from 'sass/_variables.generated.scss'; import templateSrv from 'app/features/templating/template_srv'; import { DataQueryResponse } from '@grafana/ui/src'; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.generated.scss similarity index 97% rename from public/sass/_variables.dark.scss rename to public/sass/_variables.dark.generated.scss index 4a3f5eb97d2..8b019805abc 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/dark.ts to regenerate + * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Global values // -------------------------------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.generated.scss similarity index 95% rename from public/sass/_variables.scss rename to public/sass/_variables.generated.scss index 1fbc22337e8..1d82b1a2f5c 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/default.ts to regenerate + * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Options // // Quickly modify global styling by enabling or disabling optional features. diff --git a/public/sass/_variables.scss.d.ts b/public/sass/_variables.generated.scss.d.ts similarity index 60% rename from public/sass/_variables.scss.d.ts rename to public/sass/_variables.generated.scss.d.ts index f3de2340419..5b44580a7aa 100644 --- a/public/sass/_variables.scss.d.ts +++ b/public/sass/_variables.generated.scss.d.ts @@ -1,6 +1,6 @@ export interface GrafanaVariables { - 'panelHorizontalPadding': number; - 'panelVerticalPadding': number; + panelHorizontalPadding: number; + panelVerticalPadding: number; } declare const variables: GrafanaVariables; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.generated.scss similarity index 97% rename from public/sass/_variables.light.scss rename to public/sass/_variables.light.generated.scss index ff9e884a39d..b5ebb883d1e 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/light.ts to regenerate + * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Global values // -------------------------------------------------- diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss index f7f5163f36f..4c214194c33 100644 --- a/public/sass/grafana.dark.scss +++ b/public/sass/grafana.dark.scss @@ -1,3 +1,3 @@ -@import 'variables'; -@import 'variables.dark'; +@import 'variables.generated'; +@import 'variables.dark.generated'; @import 'grafana'; diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss index d7824edfc5d..fad46b9a206 100644 --- a/public/sass/grafana.light.scss +++ b/public/sass/grafana.light.scss @@ -1,3 +1,3 @@ -@import 'variables'; -@import 'variables.light'; +@import 'variables.generated'; +@import 'variables.light.generated'; @import 'grafana'; diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts index 5d0434f6f9d..43a5ff193c1 100644 --- a/scripts/cli/generateSassVariableFiles.ts +++ b/scripts/cli/generateSassVariableFiles.ts @@ -6,9 +6,9 @@ import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.sc import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl'; -const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; -const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; -const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss'; +const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss'; +const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss'; +const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss'; const writeVariablesFile = async (path: string, data: string) => { return new Promise((resolve, reject) => { From 4721250d199b7e00797df0cd99689bd3cfbd587b Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 11:05:02 +0100 Subject: [PATCH 11/70] Variables regenerated --- public/sass/_variables.dark.generated.scss | 2 +- public/sass/_variables.generated.scss | 2 +- public/sass/_variables.light.generated.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 8b019805abc..0bbb3eaeb25 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/dark.ts to regenerate * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template * diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 1d82b1a2f5c..d77cf9530c8 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/default.ts to regenerate * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template * diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index b5ebb883d1e..9d90f164d86 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/light.ts to regenerate * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template * From 547696af19e773c0824a569eeaa70f084b668ea1 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Tue, 19 Feb 2019 13:40:43 +0100 Subject: [PATCH 12/70] updated theme template files variables to master --- .../src/themes/_variables.dark.scss.tmpl.ts | 211 ++++++++++-------- .../src/themes/_variables.light.scss.tmpl.ts | 147 ++++++------ 2 files changed, 197 insertions(+), 161 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 52601aecb18..c4009347dd0 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -10,6 +10,18 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => $theme-name: dark; +// New Colors +// ------------------------- +$sapphire-faint: #041126; +$sapphire-light: #5794f2; +$sapphire-base: #3274d9; +$sapphire-shade: #1f60c4; +$lobster-base: #e02f44; +$lobster-shade: #c4162a; +$forest-light: #96d98d; +$green-base: #299c46; +$green-shade: #23843b; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -26,6 +38,24 @@ $gray-5: ${theme.colors.gray5}; $gray-6: ${theme.colors.gray6}; $gray-7: ${theme.colors.gray7}; +$black: #000; +$dark-1: #141414; +$dark-2: #161719; +$dark-3: #1f1f20; +$dark-4: #212124; +$dark-5: #222426; +$dark-6: #262628; +$dark-7: #292a2d; +$dark-8: #2f2f32; +$dark-9: #343436; +$dark-10: #424345; +$gray-1: #555555; +$gray-2: #8e8e8e; +$gray-3: #b3b3b3; +$gray-4: #d8d9da; +$gray-5: #ececec; + + $gray-blue: #212327; $input-black: #09090b; @@ -34,41 +64,40 @@ $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$blue-dark: #005f81; $green: #299c46; -$red: #d44a3a; +$red: $lobster-base; $yellow: #ecbb13; $purple: #9933cc; $variable: #32d1df; $orange: #eb7b18; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: #e24d42; -$query-green: #74e680; +$query-red: $lobster-base; +$query-green: $forest-light; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; // Status colors // ------------------------- -$online: #10a345; +$online: $green-base; $warn: #f79520; -$critical: #ed2e18; +$critical: $lobster-base; // Scaffolding // ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); +$body-bg: $dark-2; +$page-bg: $dark-2; $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; $text-color-weak: $gray-2; -$text-color-faint: $dark-5; +$text-color-faint: $dark-10; $text-color-emphasis: $gray-5; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); @@ -82,93 +111,88 @@ $brand-gradient: linear-gradient( rgba(255, 68, 0, 0.7) 100% ); -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); +$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); +$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- $link-color: darken($white, 11%); $link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; -$external-link-color: $blue; +$external-link-color: $sapphire-light; // Typography // ------------------------- $headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; +$abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-4; +$hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; +$panel-bg: $dark-4; $panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; +$panel-header-hover-bg: $dark-9; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; +$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-shadow: inset 0px -4px 14px $dark-3; +$page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; +$tight-form-func-bg: $dark-9; +$tight-form-func-highlight-bg: $dark-10; $modal-backdrop-bg: #353c42; $code-tag-bg: $dark-1; -$code-tag-border: $dark-4; +$code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-background: linear-gradient(135deg, $dark-8, $dark-6); +$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists $list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-hover-bg: $card-background-hover; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; +$scrollbarBackground: $dark-9; +$scrollbarBackground2: $dark-9; +$scrollbarBorder: $dark-10; // Tables // ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border +$table-bg-accent: $dark-6; // for striping +$table-border: $dark-6; // table and cell border -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; +$table-bg-odd: $dark-3; +$table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-bg: $dark-6; +$btn-inverse-bg-hl: lighten($dark-6, 4%); $btn-inverse-text-color: $link-color; $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); @@ -176,24 +200,24 @@ $btn-link-color: $gray-3; $iconContainerBackground: $black; -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; +$btn-divider-left: $dark-9; +$btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- $input-bg: $input-black; -$input-bg-disabled: $dark-3; +$input-bg-disabled: $dark-6; $input-color: $gray-4; -$input-border-color: $dark-3; +$input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-border-focus: $dark-6 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; +$input-label-border-color: $dark-6; $input-color-select-arrow: $white; // Input placeholder text color @@ -205,12 +229,12 @@ $search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; +$typeahead-selected-bg: $dark-9; $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-3; +$dropdownBackground: $dark-6; $dropdownBorder: rgba(0, 0, 0, 0.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -219,7 +243,7 @@ $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; -$dropdownLinkBackgroundHover: $dark-4; +$dropdownLinkBackgroundHover: $dark-9; // Horizontal forms & lists // ------------------------- @@ -230,10 +254,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; +$navbarBorder: 1px solid $dark-6; $navbarButtonBackground: $navbarBackground; $navbarButtonBackgroundHighlight: $body-bg; @@ -244,19 +265,19 @@ $navbar-button-border: #2f2f32; // ------------------------- $side-menu-bg: $black; $side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; +$side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- $menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; // Tabs // ------------------------- -$tab-border-color: $dark-4; +$tab-border-color: $dark-9; // Toolbar $toolbar-bg: $input-black; @@ -265,18 +286,17 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; +$success-text-color: $forest-light; -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); // popover -$popover-bg: $page-bg; +$popover-bg: $dark-2; $popover-color: $text-color; -$popover-border-color: $dark-4; +$popover-border-color: $dark-9; $popover-shadow: 0 0 20px black; $popover-help-bg: $btn-secondary-bg; @@ -300,7 +320,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: darken($blue, 12%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-2; @@ -322,17 +342,17 @@ $json-explorer-url-color: #027bff; // Changelog and diff // ------------------------- -$diff-label-bg: $dark-2; +$diff-label-bg: $dark-3; $diff-label-fg: $white; -$diff-group-bg: $dark-4; +$diff-group-bg: $dark-9; $diff-arrow-color: $white; -$diff-json-bg: $dark-4; +$diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: #457740; -$diff-json-deleted: #a04338; +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -340,53 +360,54 @@ $diff-json-new: #457740; $diff-json-changed-fg: $gray-5; $diff-json-changed-num: $text-color; -$diff-json-icon: $gray-7; +$diff-json-icon: $gray-5; //Submenu -$variable-option-bg: $blue-dark; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $input-bg; -$switch-slider-color: $dark-2; +$switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a); $checkbox-color: $dark-1; //Panel Edit // ------------------------- $panel-editor-shadow: 0 0 20px black; $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); -$panel-editor-viz-item-shadow: 0 0 8px $dark-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-shadow: 0 0 8px $dark-10; +$panel-editor-viz-item-border: 1px solid $dark-10; +$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; +$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; $panel-editor-viz-item-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; // logs $logs-color-unkown: $gray-2; // toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; +$button-toggle-group-btn-seperator-border: 1px solid $dark-2; -$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-bg: $dark-10; $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 770c536fcd2..2a54ab9c68c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -10,6 +10,19 @@ export const lightThemeVarsTemplate = (theme: GrafanaTheme) => $theme-name: light; +// New Colors +// ------------------------- +$sapphire-faint: #f5f9ff; +$sapphire-light: #5794f2; +$sapphire-base: #3274d9; +$sapphire-shade: #1f60c4; +$lobster-base: #e02f44; +$lobster-shade: #c4162a; +$green-base: #3eb15b; +$green-shade: #369b4f; +$purple-shade: #8f3bb8; +$yellow-base: #f2cc0c; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -26,35 +39,45 @@ $gray-5: ${theme.colors.gray5}; $gray-6: ${theme.colors.gray6}; $gray-7: ${theme.colors.gray7}; +$black: #000; +$dark-2: #1e2028; +$dark-5: #41444b; +$gray-1: #52545c; +$gray-2: #767980; +$gray-3: #acb6bf; +$gray-4: #c7d0d9; +$gray-5: #dde4ed; +$gray-6: #e9edf2; +$gray-7: #f7f8fa; + $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$blue-light: #00a8e6; $green: #3aa655; -$red: #d44939; +$red: $lobster-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $blue; +$variable: $purple-shade; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: $red; +$query-red: $lobster-base; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $blue; +$query-keyword: $sapphire-base; // Status colors // ------------------------- -$online: #01a64f; +$online: $green-shade; $warn: #f79520; -$critical: #ec2128; +$critical: $lobster-shade; // Scaffolding // ------------------------- @@ -69,7 +92,6 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; -$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -82,7 +104,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $blue-light; +$external-link-color: $sapphire-shade; // Typography // ------------------------- @@ -90,7 +112,7 @@ $headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-3 !default; +$hr-border-color: $gray-4 !default; // Panel // ------------------------- @@ -107,13 +129,12 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-bg: #eaebee; $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-backdrop-bg: $body-bg; $code-tag-bg: $gray-6; -$code-tag-border: darken($code-tag-bg, 3%); +$code-tag-border: $gray-4; // cards $card-background: linear-gradient(135deg, $gray-6, $gray-5); @@ -129,13 +150,12 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-6; // Scrollbars -$scrollbarBackground: $gray-5; -$scrollbarBackground2: $gray-5; -$scrollbarBorder: $gray-4; +$scrollbarBackground: $gray-4; +$scrollbarBackground2: $gray-4; +$scrollbarBorder: $gray-3; // Tables // ------------------------- -$table-bg: transparent; // overall background-color $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border @@ -144,23 +164,21 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $blue; -$btn-secondary-bg-hl: lighten($blue, 4%); +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); - -$btn-inverse-bg: $gray-6; -$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-bg-hl: $gray-4; $btn-inverse-text-color: $gray-1; $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); @@ -178,11 +196,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-3; +$input-color: $dark-5; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; +$input-border-focus: $gray-5 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -207,7 +225,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-3; +$dropdownLinkColor: $dark-5; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -222,10 +240,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBackground: $white; -$navbarBorder: 1px solid $gray-4; -$navbarShadow: 0 0 3px #c1c1c1; - -$navbarLinkColor: #444; +$navbarBorder: 1px solid $gray-5; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); @@ -256,14 +271,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); +$error-text-color: $lobster-shade; $success-text-color: lighten($green, 10%); -$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue; +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); // popover $popover-bg: $page-bg; @@ -271,7 +285,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue; +$popover-help-bg: $btn-secondary-bg; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -292,7 +306,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: lighten($blue, 20%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-3; @@ -301,55 +315,55 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; +$json-explorer-number-color: $sapphire-base; +$json-explorer-boolean-color: $lobster-base; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: blue; +$json-explorer-bracket-color: $sapphire-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: blue; +$json-explorer-url-color: $sapphire-base; // Changelog and diff // ------------------------- -$diff-label-bg: $gray-5; +$diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-3; -$diff-group-bg: $gray-7; +$diff-arrow-color: $dark-5; +$diff-group-bg: $gray-6; -$diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; +$diff-json-bg: $gray-6; +$diff-json-fg: $gray-1; -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-6; +$diff-json-changed-fg: $gray-7; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $blue-light; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); $checkbox-color: $gray-7; //Panel Edit @@ -358,17 +372,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3; $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); $panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-border: 1px solid $gray-3; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; -$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; +$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; $panel-editor-viz-item-bg: $white; $panel-editor-tabs-line-color: $dark-5; -$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: lighten($blue, 62%); -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; // logs $logs-color-unkown: $gray-5; From 2372474ca888a6e91d7fde799df6ece65c7db7c2 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Tue, 19 Feb 2019 13:57:56 +0100 Subject: [PATCH 13/70] updated theme variables to master --- .../src/themes/_variables.dark.scss.tmpl.ts | 2 + .../src/themes/_variables.light.scss.tmpl.ts | 2 + public/sass/_variables.dark.generated.scss | 212 ++++++++++-------- public/sass/_variables.light.generated.scss | 149 ++++++------ 4 files changed, 204 insertions(+), 161 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index c4009347dd0..32c08d449e8 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -144,6 +144,7 @@ $page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $dark-9; $tight-form-func-highlight-bg: $dark-10; @@ -171,6 +172,7 @@ $scrollbarBorder: $dark-10; // Tables // ------------------------- +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $dark-6; // for striping $table-border: $dark-6; // table and cell border diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 2a54ab9c68c..2418d088979 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -129,6 +129,7 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; @@ -156,6 +157,7 @@ $scrollbarBorder: $gray-3; // Tables // ------------------------- +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 0bbb3eaeb25..a31a8078a10 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -13,6 +13,18 @@ $theme-name: dark; +// New Colors +// ------------------------- +$sapphire-faint: #041126; +$sapphire-light: #5794f2; +$sapphire-base: #3274d9; +$sapphire-shade: #1f60c4; +$lobster-base: #e02f44; +$lobster-shade: #c4162a; +$forest-light: #96d98d; +$green-base: #299c46; +$green-shade: #23843b; + // Grays // ------------------------- $black: #000000; @@ -29,6 +41,23 @@ $gray-5: #ececec; $gray-6: #f4f5f8; $gray-7: #fbfbfb; +$black: #000; +$dark-1: #141414; +$dark-2: #161719; +$dark-3: #1f1f20; +$dark-4: #212124; +$dark-5: #222426; +$dark-6: #262628; +$dark-7: #292a2d; +$dark-8: #2f2f32; +$dark-9: #343436; +$dark-10: #424345; +$gray-1: #555555; +$gray-2: #8e8e8e; +$gray-3: #b3b3b3; +$gray-4: #d8d9da; +$gray-5: #ececec; + $gray-blue: #212327; $input-black: #09090b; @@ -37,41 +66,40 @@ $white: #ffffff; // Accent colors // ------------------------- $blue: #ff0000; -$blue-dark: #005f81; $green: #299c46; -$red: #d44a3a; +$red: $lobster-base; $yellow: #ecbb13; $purple: #9933cc; $variable: #32d1df; $orange: #eb7b18; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: #e24d42; -$query-green: #74e680; +$query-red: $lobster-base; +$query-green: $forest-light; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; // Status colors // ------------------------- -$online: #10a345; +$online: $green-base; $warn: #f79520; -$critical: #ed2e18; +$critical: $lobster-base; // Scaffolding // ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); +$body-bg: $dark-2; +$page-bg: $dark-2; $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; $text-color-weak: $gray-2; -$text-color-faint: $dark-5; +$text-color-faint: $dark-10; $text-color-emphasis: $gray-5; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); @@ -85,93 +113,90 @@ $brand-gradient: linear-gradient( rgba(255, 68, 0, 0.7) 100% ); -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); +$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); +$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- $link-color: darken($white, 11%); $link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; -$external-link-color: $blue; +$external-link-color: $sapphire-light; // Typography // ------------------------- $headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; +$abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-4; +$hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; +$panel-bg: $dark-4; $panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; +$panel-header-hover-bg: $dark-9; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; +$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-shadow: inset 0px -4px 14px $dark-3; +$page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; +$tight-form-bg: $dark-3; //remove after merge!!! +$tight-form-func-bg: $dark-9; +$tight-form-func-highlight-bg: $dark-10; $modal-backdrop-bg: #353c42; $code-tag-bg: $dark-1; -$code-tag-border: $dark-4; +$code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-background: linear-gradient(135deg, $dark-8, $dark-6); +$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists $list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-hover-bg: $card-background-hover; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; +$scrollbarBackground: $dark-9; +$scrollbarBackground2: $dark-9; +$scrollbarBorder: $dark-10; // Tables // ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border +$table-bg: transparent; // remove after merge!!! +$table-bg-accent: $dark-6; // for striping +$table-border: $dark-6; // table and cell border -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; +$table-bg-odd: $dark-3; +$table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-bg: $dark-6; +$btn-inverse-bg-hl: lighten($dark-6, 4%); $btn-inverse-text-color: $link-color; $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); @@ -179,24 +204,24 @@ $btn-link-color: $gray-3; $iconContainerBackground: $black; -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; +$btn-divider-left: $dark-9; +$btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- $input-bg: $input-black; -$input-bg-disabled: $dark-3; +$input-bg-disabled: $dark-6; $input-color: $gray-4; -$input-border-color: $dark-3; +$input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-border-focus: $dark-6 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; +$input-label-border-color: $dark-6; $input-color-select-arrow: $white; // Input placeholder text color @@ -208,12 +233,12 @@ $search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; +$typeahead-selected-bg: $dark-9; $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-3; +$dropdownBackground: $dark-6; $dropdownBorder: rgba(0, 0, 0, 0.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -222,7 +247,7 @@ $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; -$dropdownLinkBackgroundHover: $dark-4; +$dropdownLinkBackgroundHover: $dark-9; // Horizontal forms & lists // ------------------------- @@ -233,10 +258,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; +$navbarBorder: 1px solid $dark-6; $navbarButtonBackground: $navbarBackground; $navbarButtonBackgroundHighlight: $body-bg; @@ -247,19 +269,19 @@ $navbar-button-border: #2f2f32; // ------------------------- $side-menu-bg: $black; $side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; +$side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- $menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; // Tabs // ------------------------- -$tab-border-color: $dark-4; +$tab-border-color: $dark-9; // Toolbar $toolbar-bg: $input-black; @@ -268,18 +290,17 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; +$success-text-color: $forest-light; -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); // popover -$popover-bg: $page-bg; +$popover-bg: $dark-2; $popover-color: $text-color; -$popover-border-color: $dark-4; +$popover-border-color: $dark-9; $popover-shadow: 0 0 20px black; $popover-help-bg: $btn-secondary-bg; @@ -303,7 +324,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: darken($blue, 12%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-2; @@ -325,17 +346,17 @@ $json-explorer-url-color: #027bff; // Changelog and diff // ------------------------- -$diff-label-bg: $dark-2; +$diff-label-bg: $dark-3; $diff-label-fg: $white; -$diff-group-bg: $dark-4; +$diff-group-bg: $dark-9; $diff-arrow-color: $white; -$diff-json-bg: $dark-4; +$diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: #457740; -$diff-json-deleted: #a04338; +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -343,52 +364,53 @@ $diff-json-new: #457740; $diff-json-changed-fg: $gray-5; $diff-json-changed-num: $text-color; -$diff-json-icon: $gray-7; +$diff-json-icon: $gray-5; //Submenu -$variable-option-bg: $blue-dark; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $input-bg; -$switch-slider-color: $dark-2; +$switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a); $checkbox-color: $dark-1; //Panel Edit // ------------------------- $panel-editor-shadow: 0 0 20px black; $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); -$panel-editor-viz-item-shadow: 0 0 8px $dark-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-shadow: 0 0 8px $dark-10; +$panel-editor-viz-item-border: 1px solid $dark-10; +$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; +$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; $panel-editor-viz-item-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; // logs $logs-color-unkown: $gray-2; // toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; +$button-toggle-group-btn-seperator-border: 1px solid $dark-2; -$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-bg: $dark-10; $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 9d90f164d86..d53f3c737e7 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -13,6 +13,19 @@ $theme-name: light; +// New Colors +// ------------------------- +$sapphire-faint: #f5f9ff; +$sapphire-light: #5794f2; +$sapphire-base: #3274d9; +$sapphire-shade: #1f60c4; +$lobster-base: #e02f44; +$lobster-shade: #c4162a; +$green-base: #3eb15b; +$green-shade: #369b4f; +$purple-shade: #8f3bb8; +$yellow-base: #f2cc0c; + // Grays // ------------------------- $black: #000000; @@ -29,35 +42,45 @@ $gray-5: #dde4ed; $gray-6: #e9edf2; $gray-7: #f7f8fa; +$black: #000; +$dark-2: #1e2028; +$dark-5: #41444b; +$gray-1: #52545c; +$gray-2: #767980; +$gray-3: #acb6bf; +$gray-4: #c7d0d9; +$gray-5: #dde4ed; +$gray-6: #e9edf2; +$gray-7: #f7f8fa; + $white: #ffffff; // Accent colors // ------------------------- $blue: #0083b3; -$blue-light: #00a8e6; $green: #3aa655; -$red: #d44939; +$red: $lobster-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $blue; +$variable: $purple-shade; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: $red; +$query-red: $lobster-base; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $blue; +$query-keyword: $sapphire-base; // Status colors // ------------------------- -$online: #01a64f; +$online: $green-shade; $warn: #f79520; -$critical: #ec2128; +$critical: $lobster-shade; // Scaffolding // ------------------------- @@ -72,7 +95,6 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; -$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -85,7 +107,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $blue-light; +$external-link-color: $sapphire-shade; // Typography // ------------------------- @@ -93,7 +115,7 @@ $headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-3 !default; +$hr-border-color: $gray-4 !default; // Panel // ------------------------- @@ -110,13 +132,13 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-bg: #eaebee; +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-backdrop-bg: $body-bg; $code-tag-bg: $gray-6; -$code-tag-border: darken($code-tag-bg, 3%); +$code-tag-border: $gray-4; // cards $card-background: linear-gradient(135deg, $gray-6, $gray-5); @@ -132,13 +154,13 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-6; // Scrollbars -$scrollbarBackground: $gray-5; -$scrollbarBackground2: $gray-5; -$scrollbarBorder: $gray-4; +$scrollbarBackground: $gray-4; +$scrollbarBackground2: $gray-4; +$scrollbarBorder: $gray-3; // Tables // ------------------------- -$table-bg: transparent; // overall background-color +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border @@ -147,23 +169,21 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $blue; -$btn-secondary-bg-hl: lighten($blue, 4%); +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); - -$btn-inverse-bg: $gray-6; -$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-bg-hl: $gray-4; $btn-inverse-text-color: $gray-1; $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); @@ -181,11 +201,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-3; +$input-color: $dark-5; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; +$input-border-focus: $gray-5 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -210,7 +230,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-3; +$dropdownLinkColor: $dark-5; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -225,10 +245,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBackground: $white; -$navbarBorder: 1px solid $gray-4; -$navbarShadow: 0 0 3px #c1c1c1; - -$navbarLinkColor: #444; +$navbarBorder: 1px solid $gray-5; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); @@ -259,14 +276,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); +$error-text-color: $lobster-shade; $success-text-color: lighten($green, 10%); -$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue; +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); // popover $popover-bg: $page-bg; @@ -274,7 +290,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue; +$popover-help-bg: $btn-secondary-bg; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -295,7 +311,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: lighten($blue, 20%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-3; @@ -304,55 +320,55 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; +$json-explorer-number-color: $sapphire-base; +$json-explorer-boolean-color: $lobster-base; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: blue; +$json-explorer-bracket-color: $sapphire-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: blue; +$json-explorer-url-color: $sapphire-base; // Changelog and diff // ------------------------- -$diff-label-bg: $gray-5; +$diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-3; -$diff-group-bg: $gray-7; +$diff-arrow-color: $dark-5; +$diff-group-bg: $gray-6; -$diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; +$diff-json-bg: $gray-6; +$diff-json-fg: $gray-1; -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-6; +$diff-json-changed-fg: $gray-7; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $blue-light; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); $checkbox-color: $gray-7; //Panel Edit @@ -361,17 +377,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3; $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); $panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-border: 1px solid $gray-3; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; -$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; +$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; $panel-editor-viz-item-bg: $white; $panel-editor-tabs-line-color: $dark-5; -$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: lighten($blue, 62%); -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; // logs $logs-color-unkown: $gray-5; From 6f9edf4a228d2dd568326e96ded065668686a980 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Tue, 19 Feb 2019 16:43:39 +0100 Subject: [PATCH 14/70] fix: Filter out values not supported by Explore yet #15281 --- public/app/plugins/datasource/prometheus/datasource.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index be62bd3b9f0..abcedd2af5c 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -396,6 +396,10 @@ export class PrometheusDatasource implements DataSourceApi { const expandedQueries = queries.map(query => ({ ...query, expr: this.templateSrv.replace(query.expr, {}, this.interpolateQueryExpr), + + // null out values we don't support in Explore yet + legendFormat: null, + step: null, })); state = { ...state, From 83bb3fb8d462338d02ddfea04a9b429778e77168 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 17:05:50 +0100 Subject: [PATCH 15/70] Remove old overwritten sass vars --- .../src/themes/_variables.dark.scss.tmpl.ts | 15 --------------- .../src/themes/_variables.light.scss.tmpl.ts | 14 -------------- public/sass/_variables.dark.generated.scss | 14 -------------- public/sass/_variables.light.generated.scss | 14 -------------- 4 files changed, 57 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 32c08d449e8..98e281f2dcc 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -24,20 +24,6 @@ $green-shade: #23843b; // Grays // ------------------------- -$black: ${theme.colors.black}; -$dark-1: ${theme.colors.dark2}; -$dark-2: ${theme.colors.dark2}; -$dark-3: ${theme.colors.dark3}; -$dark-4: ${theme.colors.dark4}; -$dark-5: ${theme.colors.dark5}; -$gray-1: ${theme.colors.gray1}; -$gray-2: ${theme.colors.gray2}; -$gray-3: ${theme.colors.gray3}; -$gray-4: ${theme.colors.gray4}; -$gray-5: ${theme.colors.gray5}; -$gray-6: ${theme.colors.gray6}; -$gray-7: ${theme.colors.gray7}; - $black: #000; $dark-1: #141414; $dark-2: #161719; @@ -55,7 +41,6 @@ $gray-3: #b3b3b3; $gray-4: #d8d9da; $gray-5: #ececec; - $gray-blue: #212327; $input-black: #09090b; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 2418d088979..169187221c6 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -25,20 +25,6 @@ $yellow-base: #f2cc0c; // Grays // ------------------------- -$black: ${theme.colors.black}; -$dark-1: ${theme.colors.dark1}; -$dark-2: ${theme.colors.dark2}; -$dark-3: ${theme.colors.dark3}; -$dark-4: ${theme.colors.dark4}; -$dark-5: ${theme.colors.dark5}; -$gray-1: ${theme.colors.gray1}; -$gray-2: ${theme.colors.gray2}; -$gray-3: ${theme.colors.gray3}; -$gray-4: ${theme.colors.gray4}; -$gray-5: ${theme.colors.gray5}; -$gray-6: ${theme.colors.gray6}; -$gray-7: ${theme.colors.gray7}; - $black: #000; $dark-2: #1e2028; $dark-5: #41444b; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index a31a8078a10..62c67cf5150 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -27,20 +27,6 @@ $green-shade: #23843b; // Grays // ------------------------- -$black: #000000; -$dark-1: #1f1f20; -$dark-2: #1f1f20; -$dark-3: #262628; -$dark-4: #333333; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #d8d9da; -$gray-5: #ececec; -$gray-6: #f4f5f8; -$gray-7: #fbfbfb; - $black: #000; $dark-1: #141414; $dark-2: #161719; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index d53f3c737e7..8c92432dc3b 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -28,20 +28,6 @@ $yellow-base: #f2cc0c; // Grays // ------------------------- -$black: #000000; -$dark-1: #13161d; -$dark-2: #1e2028; -$dark-3: #303133; -$dark-4: #35373f; -$dark-5: #41444b; -$gray-1: #52545c; -$gray-2: #767980; -$gray-3: #acb6bf; -$gray-4: #c7d0d9; -$gray-5: #dde4ed; -$gray-6: #e9edf2; -$gray-7: #f7f8fa; - $black: #000; $dark-2: #1e2028; $dark-5: #41444b; From 56726397e3069520d1e6da6bdf09fa6e48501bba Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 21:15:36 +0100 Subject: [PATCH 16/70] Readme update --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2cb8bfee306..550e7facfa8 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Graphite, Elasticsearch, OpenTSDB, Prometheus and InfluxDB. ![](https://www.grafanacon.org/2019/images/grafanacon_la_nav-logo.png) -Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data. +Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data. Time is running out - grab your ticket now! http://grafanacon.org @@ -75,15 +75,15 @@ $GOPATH/bin/bra run Rebuild on file change, and serve them by Grafana's webserver (http://localhost:3000): ```bash -yarn watch +yarn start ``` Build the assets, rebuild on file change with Hot Module Replacement (HMR), and serve them by webpack-dev-server (http://localhost:3333): ```bash -yarn start +yarn start:hot # OR set a theme -env GRAFANA_THEME=light yarn start +env GRAFANA_THEME=light yarn start:hot ``` *Note: HMR for Angular is not supported. If you edit files in the Angular part of the app, the whole page will reload.* @@ -158,7 +158,7 @@ GRAFANA_TEST_DB=postgres go test ./pkg/... If you have any ideas for improvement or have found a bug, do not hesitate to open an issue. And if you have time, clone this repo and submit a pull request to help me make Grafana -the kickass metrics & devops dashboard we all dream about! +the kickass metrics & devops dashboard we all dream about! Read the [contributing](https://github.com/grafana/grafana/blob/master/CONTRIBUTING.md) guide then check the [`beginner friendly`](https://github.com/grafana/grafana/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22) label to find issues that are easy and that we would like help with. From 5f4f559d1991eb87e3fdf4d3538247f4bd099f5b Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 21:23:04 +0100 Subject: [PATCH 17/70] Fix blue in dark theme --- packages/grafana-ui/src/themes/dark.ts | 2 +- public/sass/_variables.dark.generated.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index add1a6483f0..17b4ea63575 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -18,7 +18,7 @@ const basicColors = { gray6: '#f4f5f8', gray7: '#fbfbfb', grayBlue: '#212327', - blue: '#ff0000', + blue: '#33b5e5', blueDark: '#005f81', blueLight: '#00a8e6', // not used in dark theme green: '#299c46', diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index f2a624fab93..5eeb58b5828 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -51,7 +51,7 @@ $white: #ffffff; // Accent colors // ------------------------- -$blue: #ff0000; +$blue: #33b5e5; $green: #299c46; $red: $lobster-base; $yellow: #ecbb13; From 8e90899c029cb2212fe918b74af0615f372ffab8 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 5 Feb 2019 01:54:14 +0100 Subject: [PATCH 18/70] docs: adds Azure Monitor docs A copy of the docs from the plugin with some additions and new images. --- .../features/datasources/azuremonitor.md | 271 ++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 docs/sources/features/datasources/azuremonitor.md diff --git a/docs/sources/features/datasources/azuremonitor.md b/docs/sources/features/datasources/azuremonitor.md new file mode 100644 index 00000000000..ee8ca62ef0b --- /dev/null +++ b/docs/sources/features/datasources/azuremonitor.md @@ -0,0 +1,271 @@ ++++ +title = "Using Azure Monitor in Grafana" +description = "Guide for using Azure Monitor in Grafana" +keywords = ["grafana", "microsoft", "azure", "monitor", "application", "insights", "log", "analytics", "guide"] +type = "docs" +aliases = ["/datasources/azuremonitor"] +[menu.docs] +name = "AzureMonitor" +parent = "datasources" +weight = 11 ++++ + +# Using Azure Monitor in Grafana + +> Officially released in Grafana v6.0.0 + +As of Grafana 6.0, the Azure Monitor plugin has been moved into Grafana so it now ships with built-in support for Azure Monitor. + +The Azure Monitor Datasource supports multiple services in the Azure cloud: + +- **Azure Monitor** is the platform service that provides a single source for monitoring Azure resources. [Read more about Querying the Azure Monitor Service]({{< relref "#querying-the-azure-monitor-service" >}}). +- **Application Insights** is an extensible Application Performance Management (APM) service for web developers on multiple platforms and can be used to monitor your live web application - it will automatically detect performance anomalies. [Read more about Querying the Application Insights Service]({{< relref "#querying-the-application-insights-service" >}}). +- **Azure Log Analytics** (or Azure Logs) gives you access to log data collected by Azure Monitor. [Read more about Querying the Azure Log Analytics Service]({{< relref "#querying-the-azure-monitor-service" >}}). +- **Application Insights Analytics** allows you to query [Application Insights data](https://docs.microsoft.com/en-us/azure/azure-monitor/app/analytics) using the same query language used for Azure Log Analytics. [Read more about Querying the Application Insights Analytics Service]({{< relref "#writing-analytics-queries-for-the-application-insights-service" >}}). + +## Adding the data source to Grafana + +The datasource can access metrics from four different services. You can configure access to the services that you use. It is also possible to use the same credentials for multiple services if that is how you have set it up in Azure AD. + +- [Guide to setting up an Azure Active Directory Application for Azure Monitor.](https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal) +- [Guide to setting up an Azure Active Directory Application for Azure Log Analytics.](https://dev.loganalytics.io/documentation/Authorization/AAD-Setup) +- [Quickstart Guide for Application Insights.](https://dev.applicationinsights.io/quickstart/) + +1. Accessed from the Grafana main menu, newly installed data sources can be added immediately within the Data Sources section. Next, click the "Add data source" button in the upper right. The data source will be available for selection in the Type select box. + +2. Select Azure Monitor from the Type dropdown: +![Data Source Type](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_1_select_type.png) +3. In the name field, fill in a name for the data source. It can be anything. Some suggestions are Azure Monitor or App Insights. + +4. If you are using Azure Monitor, then you need 4 pieces of information from the Azure portal (see link above for detailed instructions): + - **Tenant Id** (Azure Active Directory -> Properties -> Directory ID) + - **Subscription Id** (Subscriptions -> Choose subscription -> Overview -> Subscription ID) + - **Client Id** (Azure Active Directory -> App Registrations -> Choose your app -> Application ID) + - **Client Secret** ( Azure Active Directory -> App Registrations -> Choose your app -> Keys) + +5. Paste these four items into the fields in the Azure Monitor API Details section: + ![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_2_azure_monitor_api_details.png) + +6. If you are also using the Azure Log Analytics service, then you need to specify these two config values (or you can reuse the Client Id and Secret from the previous step). + - Client Id (Azure Active Directory -> App Registrations -> Choose your app -> Application ID) + - Client Secret ( Azure Active Directory -> App Registrations -> Choose your app -> Keys -> Create a key -> Use client secret) + +7. If you are are using Application Insights, then you need two pieces of information from the Azure Portal (see link above for detailed instructions): + - Application ID + - API Key + +8. Paste these two items into the appropriate fields in the Application Insights API Details section: + ![Application Insights API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_3_app_insights_api_details.png) + +9. Test that the configuration details are correct by clicking on the "Save & Test" button: + ![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_4_save_and_test.png) + +Alternatively on step 4 if creating a new Azure Active Directory App, use the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest): + +```bash +az ad sp create-for-rbac -n "http://localhost:3000" +``` + +## Choose a Service + +In the query editor for a panel, after choosing your Azure Monitor datasource, the first option is to choose a service. There are three options here: Azure Monitor, Application Insights and Azure Log Analytics. The query editor will change depending on which one you pick. Azure Monitor is the default. + +## Querying the Azure Monitor Service + +The Azure Monitor service provides metrics for all the Azure services that you have running. It helps you understand how your applications on Azure are performing and to proactively find issues affecting your applications. + +Examples of metrics that you can get from the service are: + +- Microsoft.Compute/virtualMachines - Percentage CPU +- Microsoft.Network/networkInterfaces - Bytes sent +- Microsoft.Storage/storageAccounts - Used Capacity + +{{< docs-imagebox img="/img/docs/v60/azuremonitor-service-query-editor.png" class="docs-image--no-shadow" caption="Azure Monitor Query Editor" >}} + +### Formatting Legend Keys with Aliases for the Azure Monitor Service + +The default legend formatting for the Azure Monitor API is: + +`resourceName{dimensionValue=dimensionName}.metricName` + +These can be quite long but this formatting can be changed using aliases. In the Legend Format field, the aliases which are defined below can be combined any way you want. + +Azure Monitor Examples: + +- `dimension: {{dimensionvalue}}` +- `{{resourcegroup}} - {{resourcename}}` + +### Alias Patterns for Azure Monitor + +- `{{resourcegroup}}` = replaced with the value of the Resource Group +- `{{namespace}}` = replaced with the value of the Namespace (e.g. Microsoft.Compute/virtualMachines) +- `{{resourcename}}` = replaced with the value of the Resource Name +- `{{metric}}` = replaced with metric name (e.g. Percentage CPU) +- `{{dimensionname}}` = replaced with dimension key/label (e.g. blobtype) +- `{{dimensionvalue}}` = replaced with dimension value (e.g. BlockBlob) + +### Templating with Variables for the Azure Monitor Service + +Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data being displayed in your dashboard. + +Note that the Azure Monitor service does not support multiple values yet. If you want to visualize multiple time series (for example, metrics for server1 and server2) then you have to add multiple queries to able to view them on the same graph or in the same table. + +The Azure Monitor Datasource Plugin provides the following queries you can specify in the `Query` field in the Variable edit view. They allow you to fill a variable's options list. + +| Name | Description | +| -------------------------------------------------------- | -------------------------------------------------------------- | +| *ResourceGroups()* | Returns a list of resource groups. | +| *Namespaces(aResourceGroup)* | Returns a list of namespaces for the specified resource group. | +| *ResourceNames(aResourceGroup, aNamespace)* | Returns a list of resource names. | +| *MetricNames(aResourceGroup, aNamespace, aResourceName)* | Returns a list of metric names. | + +Examples: + +- Resource Groups query: `ResourceGroups()` +- Passing in metric name variable: `Namespaces(cosmo)` +- Chaining template variables: `ResourceNames($rg, $ns)` +- Do not quote parameters: `MetricNames(hg, Microsoft.Network/publicIPAddresses, grafanaIP)` + +{{< docs-imagebox img="/img/docs/v60/azuremonitor-service-variables.png" class="docs-image--no-shadow" caption="Nested Azure Monitor Template Variables" >}} + +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. + +### Azure Monitor Metrics Whitelist + +Not all metrics returned by the Azure Monitor API have values. The Grafana datasource has a whitelist to only return metric names if it is possible they might have values. This whitelist is updated regularly as new services and metrics are added to the Azure cloud. You can find the current whitelist [here](https://github.com/grafana/grafana/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/supported_namespaces.ts). + +### Azure Monitor Alerting + +Grafana alerting is supported for the Azure Monitor service. This is not Azure Alerts support. Read more about how alerting in Grafana works [here]({{< relref "alerting/rules.md" >}}). + +{{< docs-imagebox img="/img/docs/v60/azuremonitor-alerting.png" class="docs-image--no-shadow" caption="Azure Monitor Alerting" >}} + +## Querying the Application Insights Service + +{{< docs-imagebox img="/img/docs/v60/appinsights-service-query-editor.png" class="docs-image--no-shadow" caption="Application Insights Query Editor" >}} + +### Formatting Legend Keys with Aliases for the Application Insights Service + +The default legend formatting is: + +`metric/name{group/by="groupbyvalue"}` + +In the Legend Format field, the aliases which are defined below can be combined any way you want. + +Application Insights Examples: + +- `server: {{groupbyvalue}}` +- `city: {{groupbyvalue}}` +- `{{groupbyname}}: {{groupbyvalue}}` + +### Alias Patterns for Application Insights + +- `{{groupbyvalue}}` = replaced with the value of the group by +- `{{groupbyname}}` = replaced with the name/label of the group by +- `{{metric}}` = replaced with metric name (e.g. requests/count) + +### Filter Expressions for Application Insights + +The filter field takes an OData filter expression. + +Examples: + +- `client/city eq 'Boydton'` +- `client/city ne 'Boydton'` +- `client/city ne 'Boydton' and client/city ne 'Dublin'` +- `client/city eq 'Boydton' or client/city eq 'Dublin'` + +### Templating with Variables for Application Insights + +Use the one of the following queries in the `Query` field in the Variable edit view. + +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. + +| Name | Description | +| ---------------------------------- | ---------------------------------------------------------- | +| *AppInsightsMetricNames()* | Returns a list of metric names. | +| *AppInsightsGroupBys(aMetricName)* | Returns a list of group bys for the specified metric name. | + +Examples: + +- Metric Names query: `AppInsightsMetricNames()` +- Passing in metric name variable: `AppInsightsGroupBys(requests/count)` +- Chaining template variables: `AppInsightsGroupBys($metricnames)` + +{{< docs-imagebox img="/img/docs/v60/appinsights-service-variables.png" class="docs-image--no-shadow" caption="Nested Application Insights Template Variables" >}} + +### Application Insights Alerting + +Not implemented yet. + +## Querying the Azure Log Analytics Service + +Queries are written in the new [Azure Log Analytics (or KustoDB) Query Language](https://docs.loganalytics.io/index). A Log Analytics Query can be formatted as Time Series data or as Table data. + +Time Series queries are for the Graph Panel (and other panels like the Single Stat panel) and must contain a datetime column, a metric name column and a value column. Here is an example query that returns the aggregated count grouped by the Category column and grouped by hour: + +``` +AzureActivity +| where $__timeFilter(TimeGenerated) +| summarize count() by Category, bin(TimeGenerated, 1h) +| order by TimeGenerated asc +``` + +Table queries are mainly used in the Table panel and row a list of columns and rows. This example query returns rows with the 6 specified columns: + +``` +AzureActivity +| where $__timeFilter() +| project TimeGenerated, ResourceGroup, Category, OperationName, ActivityStatus, Caller +| order by TimeGenerated desc +``` + +{{< docs-imagebox img="/img/docs/v60/azureloganalytics-service-query-editor.png" class="docs-image--no-shadow" caption="Azure Log Analytics Query Editor" >}} + +### Azure Log Analytics Macros + +To make writing queries easier there are several Grafana macros that can be used in the where clause of a query: + +- `$__timeFilter()` - Expands to + `TimeGenerated ≥ datetime(2018-06-05T18:09:58.907Z) and` + `TimeGenerated ≤ datetime(2018-06-05T20:09:58.907Z)` where the from and to datetimes are from the Grafana time picker. + +- `$__timeFilter(datetimeColumn)` - Expands to + `datetimeColumn ≥ datetime(2018-06-05T18:09:58.907Z) and` + `datetimeColumn ≤ datetime(2018-06-05T20:09:58.907Z)` where the from and to datetimes are from the Grafana time picker. + +- `$__escapeMulti($myVar)` - is to be used with multi-value template variables that contains illegal characters. If $myVar has the value `'\\grafana-vm\Network(eth0)\Total','\\hello!'`, it expands to: `@'\\grafana-vm\Network(eth0)\Total', @'\\hello!'`. If using single value variables there no need for this macro, simply escape the variable inline instead - `@'\$myVar'` + +- `$__contains(colName, $myVar)` - is to be used with multi-value template variables. If $myVar has the value `'value1','value2'`, it expands to: `colName in ('value1','value2')`. + + If using the `All` option, then check the `Include All Option` checkbox and in the `Custom all value` field type in the following value: `all`. If $myVar has value `all` then the macro will instead expand to `1 == 1`. For template variables with a lot of options, this will increase the query performance by not building a large where..in clause. + +### Azure Log Analytics Builtin Variables + +There are also some Grafana variables that can be used in Azure Log Analytics queries: + +- `$__from` - Returns the From datetime from the Grafana picker. Example: `datetime(2018-06-05T18:09:58.907Z)`. +- `$__to` - Returns the From datetime from the Grafana picker. Example: `datetime(2018-06-05T20:09:58.907Z)`. +- `$__interval` - Grafana calculates the minimum time grain that can be used to group by time in queries. More details on how it works [here](http://docs.grafana.org/reference/templating/#the-interval-variable). It returns a time grain like `5m` or `1h` that can be used in the bin function. E.g. `summarize count() by bin(TimeGenerated, $__interval)` + +### Azure Log Analytics Alerting + +Not implemented yet. + +### Writing Analytics Queries For the Application Insights Service + +If you change the service type to "Application Insights", the menu icon to the right adds another option, "Toggle Edit Mode". Once clicked, the query edit mode changes to give you a full text area in which to write log analytics queries. (This is identical to how the InfluxDB datasource lets you write raw queries.) + +Once a query is written, the column names are automatically parsed out of the response data. You can then select them in the "X-axis", "Y-axis", and "Split On" dropdown menus, or just type them out. + +There are some important caveats to remember: + +- You'll want to order your y-axis in the query, eg. `order by timestamp asc`. The graph may come out looking bizarre otherwise. It's better to have Microsoft sort it on their side where it's faster, than to implement this in the plugin. + +- If you copy a log analytics query, typically they'll end with a render instruction, like `render barchart`. This is unnecessary, but harmless. + +- Currently, four default dashboard variables are supported: `$__timeFilter()`, `$__from`, `$__to`, and `$__interval`. If you're searching in timestamped data, replace the beginning of your where clause to `where $__timeFilter()`. Dashboard changes by time region are handled as you'd expect, as long as you leave the name of the `timestamp` column alone. Likewise, `$__interval` will automatically change based on the dashboard's time region _and_ the width of the chart being displayed. Use it in bins, so `bin(timestamp,$__interval)` changes into something like `bin(timestamp,1s)`. Use `$__from` and `$__to` if you just want the formatted dates to be inserted. + +- Templated dashboard variables are not yet supported! They will come in a future version. From a9c5fe5be140f00a68b2ff2e630809147512450a Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Feb 2019 16:11:36 +0100 Subject: [PATCH 19/70] updated colors in light, dark and theme files, in template file basic colors uses variables from dark/light files, also changed to -basic in some files --- .../_ValueMappingsEditor.scss | 2 +- .../src/themes/_variables.dark.scss.tmpl.ts | 106 ++++++++------- .../src/themes/_variables.light.scss.tmpl.ts | 126 +++++++++--------- packages/grafana-ui/src/themes/dark.ts | 41 +++--- packages/grafana-ui/src/themes/light.ts | 35 +++-- packages/grafana-ui/src/types/theme.ts | 15 ++- public/sass/_variables.dark.generated.scss | 64 +++++---- public/sass/_variables.light.generated.scss | 102 +++++++------- public/sass/components/_gf-form.scss | 2 +- public/sass/components/_modals.scss | 2 +- public/sass/components/_search.scss | 2 +- public/sass/pages/_login.scss | 4 +- 12 files changed, 260 insertions(+), 241 deletions(-) diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss b/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss index 1d62b191763..68f05662dbc 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss @@ -17,7 +17,7 @@ align-items: center; justify-content: center; width: 36px; - background-color: $green; + background-color: $green-base; } .add-mapping-row-label { diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index c8f389b88d6..c7d28551d4d 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -12,36 +12,35 @@ $theme-name: dark; // New Colors // ------------------------- -$sapphire-faint: #041126; -$sapphire-light: #5794f2; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; -$forest-light: #96d98d; -$green-base: #299c46; -$green-shade: #23843b; +$blue-faint: ${theme.colors.blueFaint}; +$blue-light: ${theme.colors.blueLight}; +$blue-base: ${theme.colors.blueBase}; +$blue-shade: ${theme.colors.blueShade}; +$red-base: ${theme.colors.redBase}; +$red-shade: ${theme.colors.redShade}; +$green-base: ${theme.colors.greenBase}; +$green-shade: ${theme.colors.greenShade}; // Grays // ------------------------- -$black: #000; -$dark-1: #141414; -$dark-2: #161719; -$dark-3: #1f1f20; -$dark-4: #212124; -$dark-5: #222426; -$dark-6: #262628; -$dark-7: #292a2d; -$dark-8: #2f2f32; -$dark-9: #343436; -$dark-10: #424345; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #d8d9da; -$gray-5: #ececec; +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark1}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$dark-6: ${theme.colors.dark6}; +$dark-7: ${theme.colors.dark7}; +$dark-8: ${theme.colors.dark8}; +$dark-9:${theme.colors.dark9}; +$dark-10: ${theme.colors.dark10}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; -$gray-blue: #212327; +$gray-blue: ${theme.colors.grayBlue}; $input-black: #09090b; $white: ${theme.colors.white}; @@ -49,20 +48,19 @@ $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$green: #299c46; -$red: $lobster-base; -$yellow: #ecbb13; -$purple: #9933cc; -$variable: #32d1df; -$orange: #eb7b18; +$red: $red-base; +$yellow: ${theme.colors.yellow}; +$orange: ${theme.colors.orange}; +$purple: ${theme.colors.purple}; +$variable: ${theme.colors.variable}; $brand-primary: $orange; $brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $lobster-base; +$brand-danger: $red-base; -$query-red: $lobster-base; -$query-green: $forest-light; +$query-red: $red-base; +$query-green: #74e680; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; @@ -71,7 +69,7 @@ $query-orange: $orange; // ------------------------- $online: $green-base; $warn: #f79520; -$critical: $lobster-base; +$critical: $red-base; // Scaffolding // ------------------------- @@ -104,7 +102,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); $link-color: darken($white, 11%); $link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; -$external-link-color: $sapphire-light; +$external-link-color: $blue-light; // Typography // ------------------------- @@ -164,8 +162,8 @@ $table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue-base; +$btn-secondary-bg-hl: $blue-shade; $btn-primary-bg: $green-base; $btn-primary-bg-hl: $green-shade; @@ -173,8 +171,8 @@ $btn-primary-bg-hl: $green-shade; $btn-success-bg: $green-base; $btn-success-bg-hl: $green-shade; -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-danger-bg: $red-base; +$btn-danger-bg-hl: $red-shade; $btn-inverse-bg: $dark-6; $btn-inverse-bg-hl: lighten($dark-6, 4%); @@ -199,7 +197,7 @@ $input-color: $gray-4; $input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); $input-border-focus: $dark-6 !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-box-shadow-focus: $blue-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; $input-label-border-color: $dark-6; @@ -271,12 +269,12 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: $forest-light; +$success-text-color: #12d95a; -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); +$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); +$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // popover $popover-bg: $dark-2; @@ -305,7 +303,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: $blue-base; // footer $footer-link-color: $gray-2; @@ -336,8 +334,8 @@ $diff-arrow-color: $white; $diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: $blue-shade; +$diff-json-deleted: $red-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -371,18 +369,18 @@ $panel-editor-shadow: 0 0 20px black; $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); $panel-editor-viz-item-shadow: 0 0 8px $dark-10; $panel-editor-viz-item-border: 1px solid $dark-10; -$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; -$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); +$panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: $sapphire-faint; -$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; +$panel-grid-placeholder-bg: $blue-faint; +$panel-grid-placeholder-shadow: 0 0 4px $blue-shade; // logs $logs-color-unkown: $gray-2; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 585e705feac..41d22a2f7a1 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -12,58 +12,56 @@ $theme-name: light; // New Colors // ------------------------- -$sapphire-faint: #f5f9ff; -$sapphire-light: #5794f2; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; -$green-base: #3eb15b; -$green-shade: #369b4f; -$purple-shade: #8f3bb8; -$yellow-base: #f2cc0c; +$blue-faint: ${theme.colors.blueFaint}; +$blue-light: ${theme.colors.blueLight}; +$blue-base: ${theme.colors.blueBase}; +$blue-shade: ${theme.colors.blueShade}; +$red-base: ${theme.colors.redBase}; +$red-shade: ${theme.colors.redShade}; +$green-base: ${theme.colors.greenBase}; +$green-shade: ${theme.colors.greenShade}; // Grays // ------------------------- -$black: #000; -$dark-2: #1e2028; -$dark-5: #41444b; -$gray-1: #52545c; -$gray-2: #767980; -$gray-3: #acb6bf; -$gray-4: #c7d0d9; -$gray-5: #dde4ed; -$gray-6: #e9edf2; -$gray-7: #f7f8fa; +$black: ${theme.colors.black}; + +$dark-1: ${theme.colors.dark1}; +$dark-2: ${theme.colors.dark2}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; +$gray-6: ${theme.colors.gray6}; +$gray-7: ${theme.colors.gray7}; $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$green: #3aa655; -$red: $lobster-base; -$yellow: #ff851b; -$orange: #ff7941; -$purple: #9954bb; -$variable: $purple-shade; +$red: $red-base; +$yellow: ${theme.colors.yellow}; +$orange: ${theme.colors.orange}; +$purple: ${theme.colors.purple}; +$variable: ${theme.colors.variable}; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $orange; -$brand-danger: $lobster-base; +$brand-danger: $red-base; -$query-red: $lobster-base; -$query-green: $green; +$query-red: $red-base; +$query-green: $green-base; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $sapphire-base; +$query-keyword: $blue-base; // Status colors // ------------------------- $online: $green-shade; $warn: #f79520; -$critical: $lobster-shade; +$critical: $red-shade; // Scaffolding // ------------------------- @@ -72,10 +70,10 @@ $page-bg: $gray-7; $body-color: $gray-1; $text-color: $gray-1; -$text-color-strong: $dark-2; +$text-color-strong: $dark-1; $text-color-weak: $gray-2; $text-color-faint: $gray-4; -$text-color-emphasis: $dark-5; +$text-color-emphasis: $dark-2; $text-shadow-faint: none; @@ -90,7 +88,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $sapphire-shade; +$external-link-color: $blue-shade; // Typography // ------------------------- @@ -153,14 +151,14 @@ $table-bg-hover: $gray-5; $btn-primary-bg: $green-base; $btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue-base; +$btn-secondary-bg-hl: $blue-shade; $btn-success-bg: $green-base; $btn-success-bg-hl: $green-shade; -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-danger-bg: $red-base; +$btn-danger-bg-hl: $red-shade; $btn-inverse-bg: $gray-5; $btn-inverse-bg-hl: darken($gray-5, 5%); @@ -182,11 +180,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-5; +$input-color: $dark-2; $input-border-color: $gray-5; $input-box-shadow: none; $input-border-focus: $gray-5 !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-box-shadow-focus: $blue-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -211,7 +209,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-5; +$dropdownLinkColor: $dark-2; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -235,7 +233,7 @@ $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-2; +$side-menu-bg: $dark-1; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; $side-menu-item-hover-bg: $gray-1; $side-menu-shadow: 5px 0px 10px -5px $gray-1; @@ -257,13 +255,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: $lobster-shade; -$success-text-color: lighten($green, 10%); +$error-text-color: $red-shade; +$success-text-color: lighten($green-base, 10%); -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); +$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); +$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // popover $popover-bg: $page-bg; @@ -292,39 +290,39 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: $blue-base; // footer $footer-link-color: $gray-3; -$footer-link-hover: $dark-5; +$footer-link-hover: $dark-2; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: $sapphire-base; -$json-explorer-boolean-color: $lobster-base; +$json-explorer-number-color: $blue-base; +$json-explorer-boolean-color: $red-base; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: $sapphire-base; +$json-explorer-bracket-color: $blue-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: $sapphire-base; +$json-explorer-url-color: $blue-base; // Changelog and diff // ------------------------- $diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-5; +$diff-arrow-color: $dark-2; $diff-group-bg: $gray-6; $diff-json-bg: $gray-6; $diff-json-fg: $gray-1; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: $blue-shade; +$diff-json-deleted: $red-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; @@ -343,7 +341,7 @@ $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; $switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); -$switch-slider-shadow: 0 0 3px $dark-5; +$switch-slider-shadow: 0 0 3px $dark-2; //Checkbox // ------------------------- @@ -358,18 +356,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3; $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); $panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-border: 1px solid $gray-3; -$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; -$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $white; -$panel-editor-tabs-line-color: $dark-5; +$panel-editor-tabs-line-color: $dark-2; -$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); +$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: $sapphire-faint; -$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; +$panel-grid-placeholder-bg: $blue-faint; +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; // logs $logs-color-unkown: $gray-5; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 17b4ea63575..07142742370 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -6,25 +6,34 @@ const basicColors = { black: '#000000', white: '#ffffff', dark1: '#141414', - dark2: '#1f1f20', - dark3: '#262628', - dark4: '#333333', - dark5: '#444444', + dark2: '#161719', + dark3: '#1f1f20', + dark4: '#212124', + dark5: '#222426', + dark6: '#262628', + dark7: '#292a2d', + dark8: '#2f2f32', + dark9: '#343436', + dark10: '#424345', gray1: '#555555', gray2: '#8e8e8e', gray3: '#b3b3b3', gray4: '#d8d9da', gray5: '#ececec', - gray6: '#f4f5f8', - gray7: '#fbfbfb', + gray6: '#f4f5f8', // not used in dark theme + gray7: '#fbfbfb', // not used in dark theme grayBlue: '#212327', + blueBase: '#3274d9', + blueShade: '#1f60c4', + blueLight: '#5794f2', + blueFaint: '#041126', + redBase: '#e02f44', + redShade: '#c4162a', + greenBase: '#299c46', + greenShade: '#23843b', blue: '#33b5e5', - blueDark: '#005f81', - blueLight: '#00a8e6', // not used in dark theme - green: '#299c46', red: '#d44a3a', yellow: '#ecbb13', - pink: '#ff4444', purple: '#9933cc', variable: '#32d1df', orange: '#eb7b18', @@ -37,14 +46,14 @@ const darkTheme: GrafanaTheme = { colors: { ...basicColors, inputBlack: '#09090b', - queryRed: '#e24d42', + queryRed: basicColors.redBase, queryGreen: '#74e680', queryPurple: '#fe85fc', queryKeyword: '#66d9ef', - queryOrange: 'eb7b18', - online: '#10a345', + queryOrange: basicColors.orange, + online: basicColors.greenBase, warn: '#f79520', - critical: '#ed2e18', + critical: basicColors.redBase, bodyBg: '#171819', pageBg: '#161719', bodyColor: basicColors.gray4, @@ -61,8 +70,8 @@ const darkTheme: GrafanaTheme = { }, background: { dropdown: basicColors.dark3, - scrollbar: '#aeb5df', - scrollbar2: '#3a3a3a', + scrollbar: basicColors.dark9, + scrollbar2: basicColors.dark9, }, }; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index fd1f1d05b95..7e8f6300d84 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -5,11 +5,16 @@ import { GrafanaTheme, GrafanaThemeType } from '../types/theme'; const basicColors = { black: '#000000', white: '#ffffff', - dark1: '#13161d', - dark2: '#1e2028', - dark3: '#303133', - dark4: '#35373f', - dark5: '#41444b', + dark1: '#1e2028', + dark2: '#41444b', + dark3: '#303133', // not used in light theme + dark4: '#35373f', // not used in light theme + dark5: '#41444b', // not used in light theme + dark6: '#41444b', // not used in light theme + dark7: '#41444b', // not used in light theme + dark8: '#2f2f32', // not used in light theme + dark9: '#343436', // not used in light theme + dark10: '#424345', // not used in light theme gray1: '#52545c', gray2: '#767980', gray3: '#acb6bf', @@ -18,15 +23,19 @@ const basicColors = { gray6: '#e9edf2', gray7: '#f7f8fa', grayBlue: '#212327', // not used in light theme + blueBase: '#3274d9', + blueShade: '#1f60c4', + blueLight: '#5794f2', + blueFaint: '#f5f9ff', + redBase: '#e02f44', + redShade: '#c4162a', + greenBase: '#3eb15b', + greenShade: '#369b4f', blue: '#0083b3', - blueDark: '#005f81', - blueLight: '#00a8e6', - green: '#3aa655', red: '#d44939', yellow: '#ff851b', - pink: '#e671b8', purple: '#9954bb', - variable: '#0083b3', + variable: '#007580', orange: '#ff7941', }; @@ -39,13 +48,13 @@ const lightTheme: GrafanaTheme = { variable: basicColors.blue, inputBlack: '#09090b', queryRed: basicColors.red, - queryGreen: basicColors.green, + queryGreen: basicColors.greenBase, queryPurple: basicColors.purple, queryKeyword: basicColors.blue, queryOrange: basicColors.orange, - online: '#01a64f', + online: basicColors.greenShade, warn: '#f79520', - critical: '#ec2128', + critical: basicColors.redShade, bodyBg: basicColors.gray7, pageBg: basicColors.gray7, bodyColor: basicColors.gray1, diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 2d281cc3d9f..01886afe3dc 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -78,6 +78,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons { dark3: string; dark4: string; dark5: string; + dark6: string; + dark7: string; + dark8: string; + dark9: string; + dark10: string; gray1: string; gray2: string; gray3: string; @@ -90,12 +95,16 @@ export interface GrafanaTheme extends GrafanaThemeCommons { // Accent colors blue: string; + blueBase: string; + blueShade: string; blueLight: string; - blueDark: string; - green: string; + blueFaint: string; + redBase: string; + redShade: string; + greenBase: string; + greenShade: string; red: string; yellow: string; - pink: string; purple: string; variable: string; orange: string; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 5eeb58b5828..cd4f01e4dd6 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -15,19 +15,18 @@ $theme-name: dark; // New Colors // ------------------------- -$sapphire-faint: #041126; -$sapphire-light: #5794f2; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; -$forest-light: #96d98d; +$blue-faint: #041126; +$blue-light: #5794f2; +$blue-base: #3274d9; +$blue-shade: #1f60c4; +$red-base: #e02f44; +$red-shade: #c4162a; $green-base: #299c46; $green-shade: #23843b; // Grays // ------------------------- -$black: #000; +$black: #000000; $dark-1: #141414; $dark-2: #161719; $dark-3: #1f1f20; @@ -52,20 +51,19 @@ $white: #ffffff; // Accent colors // ------------------------- $blue: #33b5e5; -$green: #299c46; -$red: $lobster-base; +$red: $red-base; $yellow: #ecbb13; +$orange: #eb7b18; $purple: #9933cc; $variable: #32d1df; -$orange: #eb7b18; $brand-primary: $orange; $brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $lobster-base; +$brand-danger: $red-base; -$query-red: $lobster-base; -$query-green: $forest-light; +$query-red: $red-base; +$query-green: #74e680; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; @@ -74,7 +72,7 @@ $query-orange: $orange; // ------------------------- $online: $green-base; $warn: #f79520; -$critical: $lobster-base; +$critical: $red-base; // Scaffolding // ------------------------- @@ -107,7 +105,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); $link-color: darken($white, 11%); $link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; -$external-link-color: $sapphire-light; +$external-link-color: $blue-light; // Typography // ------------------------- @@ -167,8 +165,8 @@ $table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue-base; +$btn-secondary-bg-hl: $blue-shade; $btn-primary-bg: $green-base; $btn-primary-bg-hl: $green-shade; @@ -176,8 +174,8 @@ $btn-primary-bg-hl: $green-shade; $btn-success-bg: $green-base; $btn-success-bg-hl: $green-shade; -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-danger-bg: $red-base; +$btn-danger-bg-hl: $red-shade; $btn-inverse-bg: $dark-6; $btn-inverse-bg-hl: lighten($dark-6, 4%); @@ -202,7 +200,7 @@ $input-color: $gray-4; $input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); $input-border-focus: $dark-6 !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-box-shadow-focus: $blue-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; $input-label-border-color: $dark-6; @@ -274,12 +272,12 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: $forest-light; +$success-text-color: #12d95a; -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); +$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); +$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // popover $popover-bg: $dark-2; @@ -308,7 +306,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: $blue-base; // footer $footer-link-color: $gray-2; @@ -339,8 +337,8 @@ $diff-arrow-color: $white; $diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: $blue-shade; +$diff-json-deleted: $red-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -374,18 +372,18 @@ $panel-editor-shadow: 0 0 20px black; $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); $panel-editor-viz-item-shadow: 0 0 8px $dark-10; $panel-editor-viz-item-border: 1px solid $dark-10; -$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; -$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); +$panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: $sapphire-faint; -$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; +$panel-grid-placeholder-bg: $blue-faint; +$panel-grid-placeholder-shadow: 0 0 4px $blue-shade; // logs $logs-color-unkown: $gray-2; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 2d80e111499..136388fceb5 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -15,22 +15,21 @@ $theme-name: light; // New Colors // ------------------------- -$sapphire-faint: #f5f9ff; -$sapphire-light: #5794f2; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; +$blue-faint: #f5f9ff; +$blue-light: #5794f2; +$blue-base: #3274d9; +$blue-shade: #1f60c4; +$red-base: #e02f44; +$red-shade: #c4162a; $green-base: #3eb15b; $green-shade: #369b4f; -$purple-shade: #8f3bb8; -$yellow-base: #f2cc0c; // Grays // ------------------------- -$black: #000; -$dark-2: #1e2028; -$dark-5: #41444b; +$black: #000000; + +$dark-1: #1e2028; +$dark-2: #41444b; $gray-1: #52545c; $gray-2: #767980; $gray-3: #acb6bf; @@ -44,29 +43,28 @@ $white: #ffffff; // Accent colors // ------------------------- $blue: #0083b3; -$green: #3aa655; -$red: $lobster-base; +$red: $red-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $purple-shade; +$variable: #0083b3; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $orange; -$brand-danger: $lobster-base; +$brand-danger: $red-base; -$query-red: $lobster-base; -$query-green: $green; +$query-red: $red-base; +$query-green: $green-base; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $sapphire-base; +$query-keyword: $blue-base; // Status colors // ------------------------- $online: $green-shade; $warn: #f79520; -$critical: $lobster-shade; +$critical: $red-shade; // Scaffolding // ------------------------- @@ -75,10 +73,10 @@ $page-bg: $gray-7; $body-color: $gray-1; $text-color: $gray-1; -$text-color-strong: $dark-2; +$text-color-strong: $dark-1; $text-color-weak: $gray-2; $text-color-faint: $gray-4; -$text-color-emphasis: $dark-5; +$text-color-emphasis: $dark-2; $text-shadow-faint: none; @@ -93,7 +91,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $sapphire-shade; +$external-link-color: $blue-shade; // Typography // ------------------------- @@ -156,14 +154,14 @@ $table-bg-hover: $gray-5; $btn-primary-bg: $green-base; $btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue-base; +$btn-secondary-bg-hl: $blue-shade; $btn-success-bg: $green-base; $btn-success-bg-hl: $green-shade; -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-danger-bg: $red-base; +$btn-danger-bg-hl: $red-shade; $btn-inverse-bg: $gray-5; $btn-inverse-bg-hl: darken($gray-5, 5%); @@ -185,11 +183,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-5; +$input-color: $dark-2; $input-border-color: $gray-5; $input-box-shadow: none; $input-border-focus: $gray-5 !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-box-shadow-focus: $blue-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -214,7 +212,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-5; +$dropdownLinkColor: $dark-2; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -238,7 +236,7 @@ $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-2; +$side-menu-bg: $dark-1; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; $side-menu-item-hover-bg: $gray-1; $side-menu-shadow: 5px 0px 10px -5px $gray-1; @@ -260,13 +258,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: $lobster-shade; -$success-text-color: lighten($green, 10%); +$error-text-color: $red-shade; +$success-text-color: lighten($green-base, 10%); -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); +$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); +$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // popover $popover-bg: $page-bg; @@ -295,39 +293,39 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: $blue-base; // footer $footer-link-color: $gray-3; -$footer-link-hover: $dark-5; +$footer-link-hover: $dark-2; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: $sapphire-base; -$json-explorer-boolean-color: $lobster-base; +$json-explorer-number-color: $blue-base; +$json-explorer-boolean-color: $red-base; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: $sapphire-base; +$json-explorer-bracket-color: $blue-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: $sapphire-base; +$json-explorer-url-color: $blue-base; // Changelog and diff // ------------------------- $diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-5; +$diff-arrow-color: $dark-2; $diff-group-bg: $gray-6; $diff-json-bg: $gray-6; $diff-json-fg: $gray-1; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: $blue-shade; +$diff-json-deleted: $red-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; @@ -346,7 +344,7 @@ $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; $switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); -$switch-slider-shadow: 0 0 3px $dark-5; +$switch-slider-shadow: 0 0 3px $dark-2; //Checkbox // ------------------------- @@ -361,18 +359,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3; $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); $panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-border: 1px solid $gray-3; -$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; -$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $white; -$panel-editor-tabs-line-color: $dark-5; +$panel-editor-tabs-line-color: $dark-2; -$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); +$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: $sapphire-faint; -$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; +$panel-grid-placeholder-bg: $blue-faint; +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; // logs $logs-color-unkown: $gray-5; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index ed2cd633795..eef341217e4 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -415,7 +415,7 @@ select.gf-form-input ~ .gf-form-help-icon { padding: 1.5rem; background-color: $empty-list-cta-bg; margin-bottom: 2rem; - border-top: 3px solid $green; + border-top: 3px solid $green-base; } .cta-form__close { diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 183cea823eb..405a3cd4ade 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -98,7 +98,7 @@ .confirm-modal-icon { padding-top: 41px; font-size: 280%; - color: $green; + color: $green-base; padding-bottom: 20px; } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 4408d8f66e6..f75a0b8abf7 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -83,7 +83,7 @@ } .search-filter-box__header { - border-bottom: 1px solid $dark-5; + border-bottom: 1px solid $hr-border-color; margin-bottom: $spacer * 1.5; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index c42fd47ba1c..32fcdd54808 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -196,7 +196,7 @@ select:-webkit-autofill:focus { white-space: nowrap; padding-top: 3px; color: darken($text-color, 20%); - border-top: 3px solid $red; + border-top: 3px solid $red-base; &.password-strength-ok { width: 40%; @@ -205,7 +205,7 @@ select:-webkit-autofill:focus { &.password-strength-good { width: 100%; - border-top: 3px solid lighten($green, 10%); + border-top: 3px solid lighten($green-base, 10%); } } From 7d105439f924f2923895ff7b3ca488eee092083b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 09:41:53 +0100 Subject: [PATCH 20/70] Fixed scrollbar issue introduced in theme changes --- .../src/components/CustomScrollbar/CustomScrollbar.tsx | 8 ++++---- .../src/components/CustomScrollbar/_CustomScrollbar.scss | 9 ++++++++- public/app/core/components/Page/Page.tsx | 2 +- public/app/features/explore/Wrapper.tsx | 2 +- public/sass/_variables.dark.scss | 6 +++--- public/sass/_variables.light.scss | 2 +- public/sass/components/_footer.scss | 2 +- 7 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 40f6c6c3c37..39bae62e28b 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -1,9 +1,10 @@ import React, { PureComponent } from 'react'; import _ from 'lodash'; +import classNames from 'classnames'; import Scrollbars from 'react-custom-scrollbars'; interface Props { - customClassName?: string; + className?: string; autoHide?: boolean; autoHideTimeout?: number; autoHideDuration?: number; @@ -21,7 +22,6 @@ interface Props { */ export class CustomScrollbar extends PureComponent { static defaultProps: Partial = { - customClassName: 'custom-scrollbars', autoHide: false, autoHideTimeout: 200, autoHideDuration: 200, @@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent { render() { const { - customClassName, + className, children, autoHeightMax, autoHeightMin, @@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent { return ( { const { buildInfo } = config; return (
- +
{this.props.children} diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx index 35d09cfd9bb..add2ffed235 100644 --- a/public/app/features/explore/Wrapper.tsx +++ b/public/app/features/explore/Wrapper.tsx @@ -53,7 +53,7 @@ export class Wrapper extends Component { return (
- +
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 46b6c923f0a..e491df83ea4 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -144,9 +144,9 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: $dark-9; -$scrollbarBackground2: $dark-9; -$scrollbarBorder: $dark-10; +$scrollbarBackground: #404357; +$scrollbarBackground2: $dark-10; +$scrollbarBorder: black; // Tables // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 94c2134313f..ffc67a735f5 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -131,7 +131,7 @@ $empty-list-cta-bg: $gray-6; // Scrollbars $scrollbarBackground: $gray-4; $scrollbarBackground2: $gray-4; -$scrollbarBorder: $gray-3; +$scrollbarBorder: $gray-7; // Tables // ------------------------- diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index b5617f4e387..88e5b1521f3 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -42,7 +42,7 @@ display: none; } -.is-react .custom-scrollbars .footer { +.is-react .custom-scrollbar .footer { display: block; } From d8e655bbcfed092f51b3d71b60496dd677578e31 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 20 Feb 2019 18:35:03 +0100 Subject: [PATCH 21/70] fix: mysql query using __interval_ms variable throws error fixes #14507 --- public/app/plugins/datasource/mysql/mysql_query.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/mysql/mysql_query.ts b/public/app/plugins/datasource/mysql/mysql_query.ts index e636d66e6fd..9494d867fad 100644 --- a/public/app/plugins/datasource/mysql/mysql_query.ts +++ b/public/app/plugins/datasource/mysql/mysql_query.ts @@ -52,7 +52,7 @@ export default class MysqlQuery { } escapeLiteral(value) { - return value.replace(/'/g, "''"); + return String(value).replace(/'/g, "''"); } hasTimeGroup() { From f5a520bf398e2e0d9b082f5171301e86381aab55 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 11:59:47 +0100 Subject: [PATCH 22/70] Synced variable template files --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 6 +++--- .../grafana-ui/src/themes/_variables.light.scss.tmpl.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index c8f389b88d6..aa1297fe056 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -150,9 +150,9 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: $dark-9; -$scrollbarBackground2: $dark-9; -$scrollbarBorder: $dark-10; +$scrollbarBackground: #404357; +$scrollbarBackground2: $dark-10; +$scrollbarBorder: black; // Tables // ------------------------- diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 585e705feac..566e5be31f4 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -138,7 +138,7 @@ $empty-list-cta-bg: $gray-6; // Scrollbars $scrollbarBackground: $gray-4; $scrollbarBackground2: $gray-4; -$scrollbarBorder: $gray-3; +$scrollbarBorder: $gray-7; // Tables // ------------------------- From 31511ee3ccf3a068725ddd89710df70b368d784b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:10:01 +0100 Subject: [PATCH 23/70] fixed snapshots failing in master --- .../CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap | 2 +- .../app/features/admin/__snapshots__/ServerStats.test.tsx.snap | 2 +- .../containers/__snapshots__/DashboardPage.test.tsx.snap | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap index 60b4a2e0aa5..dd3f59ad1e1 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap +++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
Date: Thu, 21 Feb 2019 12:17:02 +0100 Subject: [PATCH 24/70] updated building from source docs --- docs/sources/project/building_from_source.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/sources/project/building_from_source.md b/docs/sources/project/building_from_source.md index eed05f05fa6..d4eb1a917d6 100644 --- a/docs/sources/project/building_from_source.md +++ b/docs/sources/project/building_from_source.md @@ -57,7 +57,7 @@ For this you need nodejs (v.6+). ```bash npm install -g yarn yarn install --pure-lockfile -yarn watch +yarn start ``` ## Running Grafana Locally @@ -145,4 +145,4 @@ Please contribute to the Grafana project and submit a pull request! Build new fe ## Logging in for the first time To run Grafana open your browser and go to the default port http://localhost:3000 or the port you have configured. -Then follow the instructions [here](/guides/getting_started/). \ No newline at end of file +Then follow the instructions [here](/guides/getting_started/). From 3868602581dbdac5aa80826753f0ef958ba98781 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:32:29 +0100 Subject: [PATCH 25/70] Updated body & page variables to use variables from code theme --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 4 ++-- packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts | 4 ++-- packages/grafana-ui/src/themes/dark.ts | 4 ++-- public/sass/_variables.dark.generated.scss | 4 ++-- public/sass/_variables.light.generated.scss | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index c7d28551d4d..a7f4162a2bd 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -73,8 +73,8 @@ $critical: $red-base; // Scaffolding // ------------------------- -$body-bg: $dark-2; -$page-bg: $dark-2; +$body-bg: ${theme.colors.bodyBg}; +$page-bg: ${theme.colors.pageBg}; $body-color: $gray-4; $text-color: $gray-4; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 41d22a2f7a1..078ca14ece5 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -65,8 +65,8 @@ $critical: $red-shade; // Scaffolding // ------------------------- -$body-bg: $gray-7; -$page-bg: $gray-7; +$body-bg: ${theme.colors.bodyBg}; +$page-bg: ${theme.colors.pageBg}; $body-color: $gray-1; $text-color: $gray-1; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 07142742370..7c3e81a7d35 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -54,8 +54,8 @@ const darkTheme: GrafanaTheme = { online: basicColors.greenBase, warn: '#f79520', critical: basicColors.redBase, - bodyBg: '#171819', - pageBg: '#161719', + bodyBg: basicColors.dark2, + pageBg: basicColors.dark2, bodyColor: basicColors.gray4, textColor: basicColors.gray4, textColorStrong: basicColors.white, diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index cd4f01e4dd6..c0d5eff6521 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -76,8 +76,8 @@ $critical: $red-base; // Scaffolding // ------------------------- -$body-bg: $dark-2; -$page-bg: $dark-2; +$body-bg: #161719; +$page-bg: #161719; $body-color: $gray-4; $text-color: $gray-4; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 136388fceb5..f0e804871bb 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -68,8 +68,8 @@ $critical: $red-shade; // Scaffolding // ------------------------- -$body-bg: $gray-7; -$page-bg: $gray-7; +$body-bg: #f7f8fa; +$page-bg: #f7f8fa; $body-color: $gray-1; $text-color: $gray-1; From 745fd68571116ffa7cc04c2b6b36af18780e99af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:39:22 +0100 Subject: [PATCH 26/70] fixed issue in dark sass template --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 8aec41c23e1..3a2d6db458c 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -32,7 +32,7 @@ $dark-5: ${theme.colors.dark5}; $dark-6: ${theme.colors.dark6}; $dark-7: ${theme.colors.dark7}; $dark-8: ${theme.colors.dark8}; -$dark-9:${theme.colors.dark9}; +$dark-9: ${theme.colors.dark9}; $dark-10: ${theme.colors.dark10}; $gray-1: ${theme.colors.gray1}; $gray-2: ${theme.colors.gray2}; From b4627ec302584ef8b1be2dc0c5b88cf8e0c6a829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 13:44:05 +0100 Subject: [PATCH 27/70] Minor fix/polish to gauge panel and threshold editor --- packages/grafana-ui/src/components/Gauge/Gauge.tsx | 4 ++-- .../src/components/ThresholdsEditor/ThresholdsEditor.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 8dea01589f1..de09cb8e1f8 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -115,9 +115,9 @@ export class Gauge extends PureComponent { getFontScale(length: number): number { if (length > 12) { - return FONT_SCALE - (length * 5) / 120; + return FONT_SCALE - (length * 5) / 110; } - return FONT_SCALE - (length * 5) / 105; + return FONT_SCALE - (length * 5) / 100; } draw() { diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index b3d82982e6c..3361e1bee46 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -55,7 +55,7 @@ export class ThresholdsEditor extends PureComponent { const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2; // Set a color - const color = colors.filter(c => !newThresholds.some(t => t.color === c))[0]; + const color = colors.filter(c => !newThresholds.some(t => t.color === c))[1]; this.setState( { From bd0f55cbb875b88a6986a70ee08a21fb44a757c6 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Thu, 21 Feb 2019 13:34:10 +0100 Subject: [PATCH 28/70] panel: defensive coding that fixes #15563 If a plugin incorrectly uses an attribute in the query-editor-row directive, it should not throw an exception. --- public/app/features/panel/query_editor_row.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/panel/query_editor_row.ts b/public/app/features/panel/query_editor_row.ts index fa25ce832be..3c44fab4db3 100644 --- a/public/app/features/panel/query_editor_row.ts +++ b/public/app/features/panel/query_editor_row.ts @@ -14,7 +14,7 @@ export class QueryRowCtrl { this.target = this.queryCtrl.target; this.panel = this.panelCtrl.panel; - if (this.hasTextEditMode) { + if (this.hasTextEditMode && this.queryCtrl.toggleEditorMode) { // expose this function to react parent component this.panelCtrl.toggleEditorMode = this.queryCtrl.toggleEditorMode.bind(this.queryCtrl); } From 529c1ea53d470144aa3c52de9682a256535d5c41 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 10:58:28 +0100 Subject: [PATCH 29/70] Implemented scripts for building and releasing grafana/ui --- .gitignore | 6 + package.json | 10 +- packages/grafana-ui/CHANGELOG.md | 4 + packages/grafana-ui/index.js | 7 + packages/grafana-ui/package.json | 15 +- packages/grafana-ui/rollup.config.ts | 54 ++++ packages/grafana-ui/tsconfig.build.json | 12 + packages/grafana-ui/tsconfig.json | 6 +- scripts/cli/index.d.ts | 1 + scripts/cli/index.ts | 35 +- scripts/cli/{start.ts => tasks/core.start.ts} | 11 +- scripts/cli/tasks/grafanaui.build.ts | 103 ++++++ scripts/cli/tasks/grafanaui.release.ts | 133 ++++++++ scripts/cli/utils/cwd.ts | 14 + scripts/cli/utils/execTask.ts | 6 + scripts/cli/utils/startSpinner.ts | 7 + yarn.lock | 304 ++++++++++++++++-- 17 files changed, 684 insertions(+), 44 deletions(-) create mode 100644 packages/grafana-ui/CHANGELOG.md create mode 100644 packages/grafana-ui/index.js create mode 100644 packages/grafana-ui/rollup.config.ts create mode 100644 packages/grafana-ui/tsconfig.build.json create mode 100644 scripts/cli/index.d.ts rename scripts/cli/{start.ts => tasks/core.start.ts} (78%) create mode 100644 scripts/cli/tasks/grafanaui.build.ts create mode 100644 scripts/cli/tasks/grafanaui.release.ts create mode 100644 scripts/cli/utils/cwd.ts create mode 100644 scripts/cli/utils/execTask.ts create mode 100644 scripts/cli/utils/startSpinner.ts diff --git a/.gitignore b/.gitignore index 2945746832a..a9547973fc8 100644 --- a/.gitignore +++ b/.gitignore @@ -78,3 +78,9 @@ debug.test /scripts/build/release_publisher/release_publisher *.patch + + +# Ignoring frontend packages specifics +/packages/**/dist +/packages/**/compiled +/packages/**/.rpt2_cache diff --git a/package.json b/package.json index 71339bee2be..9e0b88804fd 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@types/commander": "^2.12.2", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", + "@types/inquirer": "^0.0.43", "@types/jest": "^23.3.2", "@types/jquery": "^1.10.35", "@types/node": "^8.0.31", @@ -47,6 +48,7 @@ "enzyme-to-json": "^3.3.4", "es6-promise": "^3.0.2", "es6-shim": "^0.35.3", + "execa": "^1.0.0", "expect.js": "~0.2.0", "expose-loader": "^0.7.3", "file-loader": "^1.1.11", @@ -70,6 +72,7 @@ "html-webpack-harddisk-plugin": "^0.2.0", "html-webpack-plugin": "^3.2.0", "husky": "^1.3.1", + "inquirer": "^6.2.2", "jest": "^23.6.0", "jest-date-mock": "^1.0.6", "lint-staged": "^8.1.3", @@ -83,6 +86,7 @@ "node-sass": "^4.11.0", "npm": "^5.4.2", "optimize-css-assets-webpack-plugin": "^4.0.2", + "ora": "^3.1.0", "phantomjs-prebuilt": "^2.1.15", "postcss-browser-reporter": "^0.5.0", "postcss-loader": "^2.0.6", @@ -92,8 +96,10 @@ "react-test-renderer": "^16.5.0", "redux-mock-store": "^1.5.3", "regexp-replace-loader": "^1.0.1", + "rimraf": "^2.6.3", "sass-lint": "^1.10.2", "sass-loader": "^7.0.1", + "semver": "^5.6.0", "sinon": "1.17.6", "style-loader": "^0.21.0", "systemjs": "0.20.19", @@ -129,7 +135,9 @@ "api-tests": "jest --notify --watch --config=tests/api/jest.js", "storybook": "cd packages/grafana-ui && yarn storybook", "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts", - "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\"" + "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\"", + "gui:build": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --build", + "gui:release": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --release" }, "husky": { "hooks": { diff --git a/packages/grafana-ui/CHANGELOG.md b/packages/grafana-ui/CHANGELOG.md new file mode 100644 index 00000000000..472c2df8ad8 --- /dev/null +++ b/packages/grafana-ui/CHANGELOG.md @@ -0,0 +1,4 @@ +# 1.0.0-alpha.0 (2019-02-21) + +First public release + diff --git a/packages/grafana-ui/index.js b/packages/grafana-ui/index.js new file mode 100644 index 00000000000..d1a4363350e --- /dev/null +++ b/packages/grafana-ui/index.js @@ -0,0 +1,7 @@ +'use strict' + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./index.production.js'); +} else { + module.exports = require('./index.development.js'); +} diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index a0c76f711af..e1c78b1e2ab 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,12 +1,14 @@ { - "name": "@grafana/ui", - "version": "1.0.0", + "name": "testing-ignore-this", + "version": "1.0.0-beta.0", "description": "", "main": "src/index.ts", "scripts": { "tslint": "tslint -c tslint.json --project tsconfig.json", "typecheck": "tsc --noEmit", - "storybook": "start-storybook -p 9001 -c .storybook -s ../../public" + "storybook": "start-storybook -p 9001 -c .storybook -s ../../public", + "clean": "rimraf ./dist ./compiled", + "build": "rollup -c rollup.config.ts" }, "author": "Grafana Labs", "license": "Apache-2.0", @@ -53,6 +55,13 @@ "react-docgen-typescript-loader": "^3.0.0", "react-docgen-typescript-webpack-plugin": "^1.1.0", "react-test-renderer": "^16.7.0", + "rollup": "^1.1.2", + "rollup-plugin-commonjs": "^9.2.0", + "rollup-plugin-node-resolve": "^4.0.0", + "rollup-plugin-sourcemaps": "^0.4.2", + "rollup-plugin-terser": "^4.0.4", + "rollup-plugin-typescript2": "^0.19.2", + "rollup-plugin-visualizer": "^0.9.2", "typescript": "^3.2.2" }, "resolutions": { diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts new file mode 100644 index 00000000000..28f949d6e4e --- /dev/null +++ b/packages/grafana-ui/rollup.config.ts @@ -0,0 +1,54 @@ +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import sourceMaps from 'rollup-plugin-sourcemaps'; +import { terser } from 'rollup-plugin-terser'; + +const pkg = require('./package.json'); + +const libraryName = pkg.name; + +const buildCjsPackage = ({ env }) => { + return { + input: `compiled/index.js`, + output: [ + { + file: `dist/index.${env}.js`, + name: libraryName, + format: 'cjs', + sourcemap: true, + exports: 'named', + globals: { + react: 'React', + 'prop-types': 'PropTypes', + }, + }, + ], + external: ['react', 'react-dom'], + plugins: [ + commonjs({ + include: /node_modules/, + namedExports: { + '../../node_modules/lodash/lodash.js': [ + 'flatten', + 'find', + 'upperFirst', + 'debounce', + 'isNil', + 'isNumber', + 'flattenDeep', + 'map', + 'chunk', + 'sortBy', + 'uniqueId', + 'zip', + ], + '../../node_modules/react-color/lib/components/common': ['Saturation', 'Hue', 'Alpha'], + }, + }), + resolve(), + sourceMaps(), + env === 'production' && terser(), + ], + }; +}; +export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })]; diff --git a/packages/grafana-ui/tsconfig.build.json b/packages/grafana-ui/tsconfig.build.json new file mode 100644 index 00000000000..b63f4dc67b1 --- /dev/null +++ b/packages/grafana-ui/tsconfig.build.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "exclude": [ + "dist", + "node_modules", + "src/utils/storybook", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.story.tsx", + "**/*.tmpl.ts" + ] +} diff --git a/packages/grafana-ui/tsconfig.json b/packages/grafana-ui/tsconfig.json index 1dfe6e0b44c..0089f89d194 100644 --- a/packages/grafana-ui/tsconfig.json +++ b/packages/grafana-ui/tsconfig.json @@ -5,13 +5,15 @@ "compilerOptions": { "rootDirs": [".", "stories"], "module": "esnext", - "outDir": "dist", + "outDir": "compiled", "declaration": true, + "declarationDir": "dist", "strict": true, "alwaysStrict": true, "noImplicitAny": true, "strictNullChecks": true, "typeRoots": ["./node_modules/@types", "types"], - "skipLibCheck": true // Temp workaround for Duplicate identifier tsc errors + "skipLibCheck": true, // Temp workaround for Duplicate identifier tsc errors, + "removeComments": false } } diff --git a/scripts/cli/index.d.ts b/scripts/cli/index.d.ts new file mode 100644 index 00000000000..5f7aeecc441 --- /dev/null +++ b/scripts/cli/index.d.ts @@ -0,0 +1 @@ +export type Task = (options: T) => Promise; diff --git a/scripts/cli/index.ts b/scripts/cli/index.ts index 51919f13173..f980944e2cd 100644 --- a/scripts/cli/index.ts +++ b/scripts/cli/index.ts @@ -1,22 +1,33 @@ import program from 'commander'; -import { startTask } from './start'; import chalk from 'chalk'; +import { execTask } from './utils/execTask'; +export type Task = (options: T) => Promise; + +// TODO: Refactor to commander commands +// This will enable us to have command scoped options and limit the ifs below program .option('-h, --hot', 'Runs front-end with hot reload enabled') .option('-t, --theme', 'Watches for theme changes and regenerates variables.scss files') .option('-d, --depreciate ', 'Inform about npm script deprecation', v => v.split(',')) + .option('-b, --build', 'Created @grafana/ui build') + .option('-r, --release', 'Releases @grafana/ui to npm') .parse(process.argv); -if (program.depreciate && program.depreciate.length === 2) { - console.log( - chalk.yellow.bold( - `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!` - ) - ); +if (program.build) { + execTask('grafanaui.build'); +} else if (program.release) { + execTask('grafanaui.release'); +} else { + if (program.depreciate && program.depreciate.length === 2) { + console.log( + chalk.yellow.bold( + `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!` + ) + ); + } + execTask('core.start', { + watchThemes: !!program.theme, + hot: !!program.hot, + }); } - -startTask({ - watchThemes: !!program.theme, - hot: !!program.hot, -}); diff --git a/scripts/cli/start.ts b/scripts/cli/tasks/core.start.ts similarity index 78% rename from scripts/cli/start.ts rename to scripts/cli/tasks/core.start.ts index cb68ee7f1dd..4e546c71b8c 100644 --- a/scripts/cli/start.ts +++ b/scripts/cli/tasks/core.start.ts @@ -1,7 +1,14 @@ import concurrently from 'concurrently'; +import { Task } from '..'; -export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => { +interface StartTaskOptions { + watchThemes: boolean; + hot: boolean; +} + +const startTask: Task = async ({ watchThemes, hot }) => { const jobs = []; + if (watchThemes) { jobs.push({ command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', @@ -30,3 +37,5 @@ export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; ho process.exit(1); } }; + +export default startTask; diff --git a/scripts/cli/tasks/grafanaui.build.ts b/scripts/cli/tasks/grafanaui.build.ts new file mode 100644 index 00000000000..f892c13e115 --- /dev/null +++ b/scripts/cli/tasks/grafanaui.build.ts @@ -0,0 +1,103 @@ +import execa from 'execa'; +import fs from 'fs'; +import { Task } from '..'; +import { changeCwdToGrafanaUi, restoreCwd } from '../utils/cwd'; +import chalk from 'chalk'; +import { startSpinner } from '../utils/startSpinner'; + +let distDir, cwd; + +const clean = async () => { + const spinner = startSpinner('Cleaning'); + try { + await execa('npm', ['run', 'clean']); + spinner.succeed(); + } catch (e) { + spinner.fail(); + throw e; + } +}; + +const compile = async () => { + const spinner = startSpinner('Compiling sources'); + try { + await execa('tsc', ['-p', './tsconfig.build.json']); + spinner.succeed(); + } catch (e) { + console.log(e); + spinner.fail(); + } +}; + +const rollup = async () => { + const spinner = startSpinner('Bundling'); + + try { + await execa('npm', ['run', 'build']); + spinner.succeed(); + } catch (e) { + spinner.fail(); + } +}; + +export const savePackage = async (path, pkg) => { + const spinner = startSpinner('Updating package.json'); + + return new Promise((resolve, reject) => { + fs.writeFile(path, JSON.stringify(pkg, null, 2), err => { + if (err) { + spinner.fail(); + console.error(err); + reject(err); + return; + } + spinner.succeed(); + resolve(); + }); + }); +}; + +const preparePackage = async pkg => { + pkg.main = 'index.js'; + pkg.types = 'index.d.ts'; + await savePackage(`${cwd}/dist/package.json`, pkg); +}; + +const moveFiles = async () => { + const files = ['README.md', 'CHANGELOG.md', 'index.js']; + const spinner = startSpinner(`Moving ${files.join(', ')} files`); + + const promises = files.map(file => { + return fs.copyFile(`${cwd}/${file}`, `${distDir}/${file}`, err => { + if (err) { + console.error(err); + return; + } + }); + }); + + try { + await Promise.all(promises); + spinner.succeed(); + } catch (e) { + spinner.fail(); + } +}; + +const buildTask: Task = async () => { + cwd = changeCwdToGrafanaUi(); + distDir = `${cwd}/dist`; + const pkg = require(`${cwd}/package.json`); + + console.log(chalk.yellow(`Building ${pkg.name} @ ${pkg.version}`)); + + await clean(); + await compile(); + await rollup(); + await preparePackage(pkg); + await moveFiles(); + + restoreCwd(); +}; + +export default buildTask; diff --git a/scripts/cli/tasks/grafanaui.release.ts b/scripts/cli/tasks/grafanaui.release.ts new file mode 100644 index 00000000000..b8569858e2b --- /dev/null +++ b/scripts/cli/tasks/grafanaui.release.ts @@ -0,0 +1,133 @@ +import execa from 'execa'; +import { Task } from '..'; +import { execTask } from '../utils/execTask'; +import { changeCwdToGrafanaUiDist, changeCwdToGrafanaUi } from '../utils/cwd'; +import semver from 'semver'; +import inquirer from 'inquirer'; +import chalk from 'chalk'; +import { startSpinner } from '../utils/startSpinner'; +import { savePackage } from './grafanaui.build'; + +type VersionBumpType = 'patch' | 'minor' | 'major'; + +const promptBumpType = async () => { + return inquirer.prompt<{ type: VersionBumpType }>([ + { + type: 'list', + message: 'Select version bump', + name: 'type', + choices: ['patch', 'minor', 'major'], + validate: answer => { + if (answer.length < 1) { + return 'You must choose something'; + } + + return true; + }, + }, + ]); +}; + +const promptPrereleaseId = async () => { + return inquirer.prompt<{ id: string }>([ + { + type: 'list', + message: 'Is this a prerelease?', + name: 'id', + choices: ['no', 'alpha', 'beta'], + validate: answer => { + if (answer.length < 1) { + return 'You must choose something'; + } + + return true; + }, + }, + ]); +}; + +const promptConfirm = async (message?: string) => { + return inquirer.prompt<{ confirmed: boolean }>([ + { + type: 'confirm', + message: message || 'Is that correct?', + name: 'confirmed', + default: false, + }, + ]); +}; + +const bumpVersion = async (version: string) => { + const spinner = startSpinner(`Saving version ${version} to package.json`); + changeCwdToGrafanaUi(); + + try { + await execa('npm', ['version', version]); + spinner.succeed(); + } catch (e) { + console.log(e); + spinner.fail(); + } + + changeCwdToGrafanaUiDist(); + const pkg = require(`${process.cwd()}/package.json`); + pkg.version = version; + await savePackage(`${process.cwd()}/package.json`, pkg); +}; + +const publishPackage = async (name: string, version: string) => { + changeCwdToGrafanaUiDist(); + console.log(chalk.yellowBright.bold(`\nReview dist package.json before proceeding!\n`)); + const { confirmed } = await promptConfirm('Are you ready to publish to npm?'); + + if (!confirmed) { + process.exit(); + } + + const spinner = startSpinner(`Publishing ${name} @ ${version} to npm registry...`); + + try { + await execa('npm', ['publish']); + spinner.succeed(); + } catch (e) { + console.log(e); + spinner.fail(); + process.exit(1); + } +}; + +const releaseTask: Task = async () => { + await execTask('grafanaui.build'); + let releaseConfirmed = false; + let nextVersion; + changeCwdToGrafanaUiDist(); + + const pkg = require(`${process.cwd()}/package.json`); + + console.log(`Current version: ${pkg.version}`); + + do { + const { type } = await promptBumpType(); + const { id } = await promptPrereleaseId(); + + if (id !== 'no') { + nextVersion = semver.inc(pkg.version, `pre${type}`, id); + } else { + nextVersion = semver.inc(pkg.version, type); + } + + console.log(chalk.yellowBright.bold(`You are going to release a new version of ${pkg.name}`)); + console.log(chalk.green(`Version bump: ${pkg.version} ->`), chalk.bold.yellowBright(`${nextVersion}`)); + const { confirmed } = await promptConfirm(); + + releaseConfirmed = confirmed; + } while (!releaseConfirmed); + + await bumpVersion(nextVersion); + await publishPackage(pkg.name, nextVersion); + + console.log(chalk.green(`\nVersion ${nextVersion} of ${pkg.name} succesfully released!`)); + console.log(chalk.yellow(`\nUpdated @grafana/ui/package.json with version bump created - COMMIT THIS FILE!`)); +}; + +export default releaseTask; diff --git a/scripts/cli/utils/cwd.ts b/scripts/cli/utils/cwd.ts new file mode 100644 index 00000000000..9b4241b1369 --- /dev/null +++ b/scripts/cli/utils/cwd.ts @@ -0,0 +1,14 @@ +const cwd = process.cwd(); + +export const changeCwdToGrafanaUi = () => { + process.chdir(`${cwd}/packages/grafana-ui`); + return process.cwd(); +}; + +export const changeCwdToGrafanaUiDist = () => { + process.chdir(`${cwd}/packages/grafana-ui/dist`); +}; + +export const restoreCwd = () => { + process.chdir(cwd); +}; diff --git a/scripts/cli/utils/execTask.ts b/scripts/cli/utils/execTask.ts new file mode 100644 index 00000000000..36071134331 --- /dev/null +++ b/scripts/cli/utils/execTask.ts @@ -0,0 +1,6 @@ +import { Task } from '..'; + +export const execTask = async (taskName, options?: T) => { + const task = await import(`${__dirname}/../tasks/${taskName}.ts`); + return task.default(options) as Task; +}; diff --git a/scripts/cli/utils/startSpinner.ts b/scripts/cli/utils/startSpinner.ts new file mode 100644 index 00000000000..ce895dec722 --- /dev/null +++ b/scripts/cli/utils/startSpinner.ts @@ -0,0 +1,7 @@ +import ora from 'ora'; + +export const startSpinner = (label: string) => { + const spinner = new ora(label); + spinner.start(); + return spinner; +}; diff --git a/yarn.lock b/yarn.lock index b1a2e82e626..3d97ef64374 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1740,11 +1740,24 @@ "@types/cheerio" "*" "@types/react" "*" +"@types/estree@0.0.39": + version "0.0.39" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" + integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== + "@types/geojson@*": version "7946.0.5" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0" integrity sha512-rLlMXpd3rdlrp0+xsrda/hFfOpIxgqFcRpk005UKbHtcdFK+QXAjhBAPnvO58qF4O1LdDXrcaiJxMgstCIlcaw== +"@types/inquirer@^0.0.43": + version "0.0.43" + resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-0.0.43.tgz#1eb0bbb4648e6cc568bd396c1e989f620ad01273" + integrity sha512-xgyfKZVMFqE8aIKy1xfFVsX2MxyXUNgjgmbF6dRbR3sL+ZM5K4ka/9L4mmTwX8eTeVYtduyXu0gUVwVJa1HbNw== + dependencies: + "@types/rx" "*" + "@types/through" "*" + "@types/jest@^23.3.2": version "23.3.14" resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.14.tgz#37daaf78069e7948520474c87b80092ea912520a" @@ -1756,9 +1769,9 @@ integrity sha512-SVtqEcudm7yjkTwoRA1gC6CNMhGDdMx4Pg8BPdiqI7bXXdCn1BPmtxgeWYQOgDxrq53/5YTlhq5ULxBEAlWIBg== "@types/lodash@^4.14.119": - version "4.14.120" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.120.tgz#cf265d06f6c7a710db087ed07523ab8c1a24047b" - integrity sha512-jQ21kQ120mo+IrDs1nFNVm/AsdFxIx2+vZ347DbogHJPd/JzKNMOqU6HCYin1W6v8l5R9XSO2/e9cxmn7HAnVw== + version "4.14.119" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39" + integrity sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw== "@types/node@*": version "11.9.0" @@ -1859,6 +1872,107 @@ dependencies: reselect "*" +"@types/rx-core-binding@*": + version "4.0.4" + resolved "https://registry.yarnpkg.com/@types/rx-core-binding/-/rx-core-binding-4.0.4.tgz#d969d32f15a62b89e2862c17b3ee78fe329818d3" + integrity sha512-5pkfxnC4w810LqBPUwP5bg7SFR/USwhMSaAeZQQbEHeBp57pjKXRlXmqpMrLJB4y1oglR/c2502853uN0I+DAQ== + dependencies: + "@types/rx-core" "*" + +"@types/rx-core@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-core/-/rx-core-4.0.3.tgz#0b3354b1238cedbe2b74f6326f139dbc7a591d60" + integrity sha1-CzNUsSOM7b4rdPYybxOdvHpZHWA= + +"@types/rx-lite-aggregates@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-lite-aggregates/-/rx-lite-aggregates-4.0.3.tgz#6efb2b7f3d5f07183a1cb2bd4b1371d7073384c2" + integrity sha512-MAGDAHy8cRatm94FDduhJF+iNS5//jrZ/PIfm+QYw9OCeDgbymFHChM8YVIvN2zArwsRftKgE33QfRWvQk4DPg== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-async@*": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@types/rx-lite-async/-/rx-lite-async-4.0.2.tgz#27fbf0caeff029f41e2d2aae638b05e91ceb600c" + integrity sha512-vTEv5o8l6702ZwfAM5aOeVDfUwBSDOs+ARoGmWAKQ6LOInQ8J4/zjM7ov12fuTpktUKdMQjkeCp07Vd73mPkxw== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-backpressure@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-lite-backpressure/-/rx-lite-backpressure-4.0.3.tgz#05abb19bdf87cc740196c355e5d0b37bb50b5d56" + integrity sha512-Y6aIeQCtNban5XSAF4B8dffhIKu6aAy/TXFlScHzSxh6ivfQBQw6UjxyEJxIOt3IT49YkS+siuayM2H/Q0cmgA== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-coincidence@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-lite-coincidence/-/rx-lite-coincidence-4.0.3.tgz#80bd69acc4054a15cdc1638e2dc8843498cd85c0" + integrity sha512-1VNJqzE9gALUyMGypDXZZXzR0Tt7LC9DdAZQ3Ou/Q0MubNU35agVUNXKGHKpNTba+fr8GdIdkC26bRDqtCQBeQ== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-experimental@*": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/rx-lite-experimental/-/rx-lite-experimental-4.0.1.tgz#c532f5cbdf3f2c15da16ded8930d1b2984023cbd" + integrity sha1-xTL1y98/LBXaFt7Ykw0bKYQCPL0= + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-joinpatterns@*": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/rx-lite-joinpatterns/-/rx-lite-joinpatterns-4.0.1.tgz#f70fe370518a8432f29158cc92ffb56b4e4afc3e" + integrity sha1-9w/jcFGKhDLykVjMkv+1a05K/D4= + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-testing@*": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/rx-lite-testing/-/rx-lite-testing-4.0.1.tgz#21b19d11f4dfd6ffef5a9d1648e9c8879bfe21e9" + integrity sha1-IbGdEfTf1v/vWp0WSOnIh5v+Iek= + dependencies: + "@types/rx-lite-virtualtime" "*" + +"@types/rx-lite-time@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-lite-time/-/rx-lite-time-4.0.3.tgz#0eda65474570237598f3448b845d2696f2dbb1c4" + integrity sha512-ukO5sPKDRwCGWRZRqPlaAU0SKVxmWwSjiOrLhoQDoWxZWg6vyB9XLEZViKOzIO6LnTIQBlk4UylYV0rnhJLxQw== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite-virtualtime@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/rx-lite-virtualtime/-/rx-lite-virtualtime-4.0.3.tgz#4b30cacd0fe2e53af29f04f7438584c7d3959537" + integrity sha512-3uC6sGmjpOKatZSVHI2xB1+dedgml669ZRvqxy+WqmGJDVusOdyxcKfyzjW0P3/GrCiN4nmRkLVMhPwHCc5QLg== + dependencies: + "@types/rx-lite" "*" + +"@types/rx-lite@*": + version "4.0.6" + resolved "https://registry.yarnpkg.com/@types/rx-lite/-/rx-lite-4.0.6.tgz#3c02921c4244074234f26b772241bcc20c18c253" + integrity sha512-oYiDrFIcor9zDm0VDUca1UbROiMYBxMLMaM6qzz4ADAfOmA9r1dYEcAFH+2fsPI5BCCjPvV9pWC3X3flbrvs7w== + dependencies: + "@types/rx-core" "*" + "@types/rx-core-binding" "*" + +"@types/rx@*": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@types/rx/-/rx-4.1.1.tgz#598fc94a56baed975f194574e0f572fd8e627a48" + integrity sha1-WY/JSla67ZdfGUV04PVy/Y5iekg= + dependencies: + "@types/rx-core" "*" + "@types/rx-core-binding" "*" + "@types/rx-lite" "*" + "@types/rx-lite-aggregates" "*" + "@types/rx-lite-async" "*" + "@types/rx-lite-backpressure" "*" + "@types/rx-lite-coincidence" "*" + "@types/rx-lite-experimental" "*" + "@types/rx-lite-joinpatterns" "*" + "@types/rx-lite-testing" "*" + "@types/rx-lite-time" "*" + "@types/rx-lite-virtualtime" "*" + "@types/storybook__addon-actions@^3.4.1": version "3.4.1" resolved "https://registry.yarnpkg.com/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.1.tgz#8f90d76b023b58ee794170f2fe774a3fddda2c1d" @@ -1905,6 +2019,13 @@ resolved "https://registry.yarnpkg.com/@types/tether/-/tether-1.4.4.tgz#0fde1ccbd2f1fad74f8f465fe6227ff3b7bff634" integrity sha512-6qhsFJVMuMqaQRVyQVi3zUBLfKYyryktL0ZP0Z3zegzeQ7WKm0PZNCdl3JsaitJbzqaoQ9qsFKMfaj5MiMfcSQ== +"@types/through@*": + version "0.0.29" + resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.29.tgz#72943aac922e179339c651fa34a4428a4d722f93" + integrity sha512-9a7C5VHh+1BKblaYiq+7Tfc+EOmjMdZaD1MYtkQjSoxgB69tBjW98ry6SKsi4zEIWztLOMRuL87A3bdT/Fc/4w== + dependencies: + "@types/node" "*" + "@types/tinycolor2@^1.4.1": version "1.4.1" resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253" @@ -4381,6 +4502,11 @@ builtin-modules@^1.0.0, builtin-modules@^1.1.1: resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8= +builtin-modules@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.0.0.tgz#1e587d44b006620d90286cc7a9238bbc6129cab1" + integrity sha512-hMIeU4K2ilbXV6Uv93ZZ0Avg/M91RaKXucQ+4me2Do1txxBDyDZWCBa5bJSLqoNTRpXTLwEzIk1KmloenDDjhg== + builtin-status-codes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" @@ -4848,6 +4974,11 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0: dependencies: restore-cursor "^2.0.0" +cli-spinners@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a" + integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg== + cli-table2@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/cli-table2/-/cli-table2-0.2.0.tgz#2d1ef7f218a0e786e214540562d4bd177fe32d97" @@ -7097,6 +7228,11 @@ estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0: resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13" integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM= +estree-walker@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39" + integrity sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig== + esutils@^2.0.0, esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" @@ -7795,6 +7931,15 @@ fs-constants@^1.0.0: resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow== +fs-extra@7.0.1, fs-extra@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" + integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== + dependencies: + graceful-fs "^4.1.2" + jsonfile "^4.0.0" + universalify "^0.1.0" + fs-extra@^0.30.0: version "0.30.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0" @@ -7824,15 +7969,6 @@ fs-extra@^3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" -fs-extra@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" - integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== - dependencies: - graceful-fs "^4.1.2" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs-minipass@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d" @@ -9211,7 +9347,7 @@ inquirer@^5.2.0: strip-ansi "^4.0.0" through "^2.3.6" -inquirer@^6.0.0, inquirer@^6.2.0: +inquirer@^6.0.0, inquirer@^6.2.0, inquirer@^6.2.2: version "6.2.2" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.2.2.tgz#46941176f65c9eb20804627149b743a218f25406" integrity sha512-Z2rREiXA6cHRR9KBOarR3WuLlFzlIfAEIiB45ll5SSadMg7WqOh1MKEjjndfuH5ewXdixWCxqnVfGOQzPeiztA== @@ -9523,6 +9659,11 @@ is-lower-case@^1.1.0: dependencies: lower-case "^1.1.0" +is-module@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" + integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= + is-my-ip-valid@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824" @@ -10189,6 +10330,14 @@ jest-worker@^23.2.0: dependencies: merge-stream "^1.0.1" +jest-worker@^24.0.0: + version "24.0.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.0.0.tgz#3d3483b077bf04f412f47654a27bba7e947f8b6d" + integrity sha512-s64/OThpfQvoCeHG963MiEZOAAxu8kHsaL/rCMF7lpdzo7vgF0CtPml9hfguOMgykgH/eOm4jFP4ibfHLruytg== + dependencies: + merge-stream "^1.0.1" + supports-color "^6.1.0" + jest@^23.6.0: version "23.6.0" resolved "https://registry.yarnpkg.com/jest/-/jest-23.6.0.tgz#ad5835e923ebf6e19e7a1d7529a432edfee7813d" @@ -11050,6 +11199,13 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +magic-string@^0.25.1: + version "0.25.2" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.2.tgz#139c3a729515ec55e96e69e82a11fe890a293ad9" + integrity sha512-iLs9mPjh9IuTtRsqqhNGYcZXGei0Nh/A4xirrsqW7c+QhKVFL2vm7U09ru6cHRD22azaP/wMDgI+HCqbETMTtg== + dependencies: + sourcemap-codec "^1.4.4" + make-dir@^1.0.0, make-dir@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c" @@ -12525,7 +12681,7 @@ opener@~1.4.3: resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8" integrity sha1-XG2ixdflgx6P+jlklQ+NZnSskLg= -opn@5.4.0, opn@^5.1.0, opn@^5.4.0: +opn@5.4.0, opn@^5.1.0, opn@^5.3.0, opn@^5.4.0: version "5.4.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035" integrity sha512-YF9MNdVy/0qvJvDtunAOzFw9iasOQHpVthTCvGzxt61Il64AYSGdK+rYwld7NAfk9qJ7dt+hymBNSc9LNYS+Sw== @@ -12560,6 +12716,18 @@ optionator@^0.8.1: type-check "~0.3.2" wordwrap "~1.0.0" +ora@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/ora/-/ora-3.1.0.tgz#dbedd8c03b5d017fb67083e87ee52f5ec89823ed" + integrity sha512-vRBPaNCclUi8pUxRF/G8+5qEQkc6EgzKK1G2ZNJUIGu088Un5qIxFXeDgymvPRM9nmrcUOGzQgS1Vmtz+NtlMw== + dependencies: + chalk "^2.4.2" + cli-cursor "^2.1.0" + cli-spinners "^1.3.1" + log-symbols "^2.2.0" + strip-ansi "^5.0.0" + wcwidth "^1.0.1" + ordered-ast-traverse@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ordered-ast-traverse/-/ordered-ast-traverse-1.1.1.tgz#6843a170bc0eee8b520cc8ddc1ddd3aa30fa057c" @@ -13587,12 +13755,7 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks= -prettier@1.16.4: - version "1.16.4" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717" - integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g== - -prettier@^1.12.1: +prettier@1.16.4, prettier@^1.12.1: version "1.16.4" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717" integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g== @@ -15022,6 +15185,13 @@ resolve@1.1.7, resolve@~1.1.0: resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs= +resolve@1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26" + integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA== + dependencies: + path-parse "^1.0.5" + resolve@1.x, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1: version "1.10.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba" @@ -15084,7 +15254,7 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@~2.6.2: +rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2: version "2.6.3" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== @@ -15104,6 +15274,80 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" +rollup-plugin-commonjs@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.2.0.tgz#4604e25069e0c78a09e08faa95dc32dec27f7c89" + integrity sha512-0RM5U4Vd6iHjL6rLvr3lKBwnPsaVml+qxOGaaNUWN1lSq6S33KhITOfHmvxV3z2vy9Mk4t0g4rNlVaJJsNQPWA== + dependencies: + estree-walker "^0.5.2" + magic-string "^0.25.1" + resolve "^1.8.1" + rollup-pluginutils "^2.3.3" + +rollup-plugin-node-resolve@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.0.0.tgz#9bc6b8205e9936cc0e26bba2415f1ecf1e64d9b2" + integrity sha512-7Ni+/M5RPSUBfUaP9alwYQiIKnKeXCOHiqBpKUl9kwp3jX5ZJtgXAait1cne6pGEVUUztPD6skIKH9Kq9sNtfw== + dependencies: + builtin-modules "^3.0.0" + is-module "^1.0.0" + resolve "^1.8.1" + +rollup-plugin-sourcemaps@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.4.2.tgz#62125aa94087aadf7b83ef4dfaf629b473135e87" + integrity sha1-YhJaqUCHqt97g+9N+vYptHMTXoc= + dependencies: + rollup-pluginutils "^2.0.1" + source-map-resolve "^0.5.0" + +rollup-plugin-terser@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz#6f661ef284fa7c27963d242601691dc3d23f994e" + integrity sha512-wPANT5XKVJJ8RDUN0+wIr7UPd0lIXBo4UdJ59VmlPCtlFsE20AM+14pe+tk7YunCsWEiuzkDBY3QIkSCjtrPXg== + dependencies: + "@babel/code-frame" "^7.0.0" + jest-worker "^24.0.0" + serialize-javascript "^1.6.1" + terser "^3.14.1" + +rollup-plugin-typescript2@^0.19.2: + version "0.19.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.19.2.tgz#87d9c799cd6e02efbedbba25af12753a1e92b6c2" + integrity sha512-DRG7SaYX0QzBIz6rII5nm1UkiceS95r8mJjujugybyIueNF3auvzGTHMK62O7As/0q5RHjXsOguWOUv+KJKLFA== + dependencies: + fs-extra "7.0.1" + resolve "1.8.1" + rollup-pluginutils "2.3.3" + tslib "1.9.3" + +rollup-plugin-visualizer@^0.9.2: + version "0.9.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-0.9.2.tgz#bbc8e8e67d5aa3e6c188c5ca0fcfa57234fb9f92" + integrity sha512-EHXHLp9Q8v5QdRTSjgio4Alr2MKxCJroLhJunmcH+pWAM5869nI5mdWjk2jp64rjxzEahrMYmfF/G5sbTHIhKw== + dependencies: + mkdirp "^0.5.1" + opn "^5.3.0" + source-map "^0.7.3" + typeface-oswald "0.0.54" + +rollup-pluginutils@2.3.3, rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz#3aad9b1eb3e7fe8262820818840bf091e5ae6794" + integrity sha512-2XZwja7b6P5q4RZ5FhyX1+f46xi1Z3qBKigLRZ6VTZjwbN0K1IFGMlwm06Uu0Emcre2Z63l77nq/pzn+KxIEoA== + dependencies: + estree-walker "^0.5.2" + micromatch "^2.3.11" + +rollup@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.1.2.tgz#8d094b85683b810d0c05a16bd7618cf70d48eba7" + integrity sha512-OkdMxqMl8pWoQc5D8y1cIinYQPPLV8ZkfLgCzL6SytXeNA2P7UHynEQXI9tYxuAjAMsSyvRaWnyJDLHMxq0XAg== + dependencies: + "@types/estree" "0.0.39" + "@types/node" "*" + acorn "^6.0.5" + rst-selector-parser@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91" @@ -15377,7 +15621,7 @@ sentence-case@^2.1.0: no-case "^2.2.0" upper-case-first "^1.1.2" -serialize-javascript@^1.4.0: +serialize-javascript@^1.4.0, serialize-javascript@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879" integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw== @@ -15908,6 +16152,11 @@ source-map@^0.7.2, source-map@^0.7.3: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== +sourcemap-codec@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz#c63ea927c029dd6bd9a2b7fa03b3fec02ad56e9f" + integrity sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg== + space-separated-tokens@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412" @@ -16562,7 +16811,7 @@ terser-webpack-plugin@^1.1.0: webpack-sources "^1.1.0" worker-farm "^1.5.2" -terser@^3.16.1: +terser@^3.14.1, terser@^3.16.1: version "3.16.1" resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493" integrity sha512-JDJjgleBROeek2iBcSNzOHLKsB/MdDf+E/BOAJ0Tk9r7p9/fVobfv7LMJ/g/k3v9SXdmjZnIlFd5nfn/Rt0Xow== @@ -16887,7 +17136,7 @@ ts-node@^8.0.2: source-map-support "^0.5.6" yn "^3.0.0" -tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: +tslib@1.9.3, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ== @@ -16987,6 +17236,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typeface-oswald@0.0.54: + version "0.0.54" + resolved "https://registry.yarnpkg.com/typeface-oswald/-/typeface-oswald-0.0.54.tgz#1e253011622cdd50f580c04e7d625e7f449763d7" + integrity sha512-U1WMNp4qfy4/3khIfHMVAIKnNu941MXUfs3+H9R8PFgnoz42Hh9pboSFztWr86zut0eXC8byalmVhfkiKON/8Q== + typescript@^3.0.3, typescript@^3.2.2: version "3.3.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3.tgz#f1657fc7daa27e1a8930758ace9ae8da31403221" @@ -17539,7 +17793,7 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -wcwidth@^1.0.0: +wcwidth@^1.0.0, wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g= From d4c40e436063d267479d837fb76191d822cf2b03 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 10:59:13 +0100 Subject: [PATCH 30/70] Imports updates --- .../src/components/ColorPicker/ColorInput.tsx | 4 +-- .../components/ColorPicker/ColorPicker.tsx | 27 +++---------------- .../ColorPicker/ColorPickerPopover.test.tsx | 2 +- .../ColorPicker/ColorPickerPopover.tsx | 20 +++++++++++--- .../ColorPicker/NamedColorsGroup.tsx | 3 ++- .../ColorPicker/SeriesColorPickerPopover.tsx | 3 +-- .../warnAboutColorPickerPropsDeprecation.ts | 9 +++++++ .../CustomScrollbar/CustomScrollbar.tsx | 4 +-- .../src/components/FormField/FormField.tsx | 2 +- .../grafana-ui/src/components/Gauge/Gauge.tsx | 8 +++--- .../src/components/Select/Select.tsx | 2 +- .../src/components/Switch/Switch.tsx | 4 +-- .../ValueMappingsEditor/MappingRow.tsx | 4 ++- .../ValueMappingsEditor.tsx | 2 +- packages/grafana-ui/src/index.ts | 1 - .../grafana-ui/src/themes/ThemeContext.tsx | 2 +- packages/grafana-ui/src/themes/index.ts | 3 +++ packages/grafana-ui/src/utils/colors.ts | 20 ++++++++------ .../src/utils/namedColorsPalette.ts | 4 +-- .../grafana-ui/src/utils/processTimeSeries.ts | 4 +-- .../src/utils/storybook/withTheme.tsx | 2 +- public/app/core/utils/explore.ts | 2 +- 22 files changed, 71 insertions(+), 61 deletions(-) create mode 100644 packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index 4c5df5314b8..9b5f5b98432 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { ColorPickerProps } from './ColorPicker'; +import { ColorPickerProps } from './ColorPickerPopover'; import tinycolor from 'tinycolor2'; -import { debounce } from 'lodash'; +import debounce from 'lodash/debounce'; interface ColorInputState { previousColor: string; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index 321323ac58b..cee562c9474 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -1,32 +1,11 @@ import React, { Component, createRef } from 'react'; import { PopperController } from '../Tooltip/PopperController'; -import { Popper } from '../Tooltip/Popper'; -import { ColorPickerPopover } from './ColorPickerPopover'; -import { Themeable } from '../../types'; +import {Popper} from '../Tooltip/Popper'; +import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; -import propDeprecationWarning from '../../utils/propDeprecationWarning'; + import { withTheme } from '../../themes/ThemeContext'; -type ColorPickerChangeHandler = (color: string) => void; - -export interface ColorPickerProps extends Themeable { - color: string; - onChange: ColorPickerChangeHandler; - - /** - * @deprecated Use onChange instead - */ - onColorChange?: ColorPickerChangeHandler; - enableNamedColors?: boolean; - children?: JSX.Element; -} - -export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => { - const { onColorChange } = props; - if (onColorChange) { - propDeprecationWarning(componentName, 'onColorChange', 'onChange'); - } -}; export const colorPickerFactory = ( popover: React.ComponentType, diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx index 7a5000653d4..df4b5bb24a2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx @@ -3,7 +3,7 @@ import { mount, ReactWrapper } from 'enzyme'; import { ColorPickerPopover } from './ColorPickerPopover'; import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette'; import { ColorSwatch } from './NamedColorsGroup'; -import { flatten } from 'lodash'; +import flatten from 'lodash/flatten'; import { GrafanaThemeType } from '../../types'; import { getTheme } from '../../themes'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index ee879f94762..ce9ca5130d4 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -1,23 +1,37 @@ import React from 'react'; import { NamedColorsPalette } from './NamedColorsPalette'; import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; -import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker'; import { PopperContentProps } from '../Tooltip/PopperController'; import SpectrumPalette from './SpectrumPalette'; -import { GrafanaThemeType } from '../../types/theme'; +import { GrafanaThemeType, Themeable } from '../../types/theme'; +import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation'; +export type ColorPickerChangeHandler = (color: string) => void; + +export interface ColorPickerProps extends Themeable { + color: string; + onChange: ColorPickerChangeHandler; + + /** + * @deprecated Use onChange instead + */ + onColorChange?: ColorPickerChangeHandler; + enableNamedColors?: boolean; + children?: JSX.Element; +} export interface Props extends ColorPickerProps, PopperContentProps { customPickers?: T; } type PickerType = 'palette' | 'spectrum'; -interface CustomPickersDescriptor { +export interface CustomPickersDescriptor { [key: string]: { tabComponent: React.ComponentType; name: string; }; } + interface State { activePicker: PickerType | keyof T; } diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx index 2b5f7bb9b57..b488f14fd62 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx @@ -2,7 +2,8 @@ import React, { FunctionComponent } from 'react'; import { Themeable } from '../../types'; import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette'; import { Color } from 'csstype'; -import { find, upperFirst } from 'lodash'; +import upperFirst from 'lodash/upperFirst'; +import find from 'lodash/find'; import { selectThemeVariant } from '../../themes/selectThemeVariant'; type ColorChangeHandler = (color: ColorDefinition) => void; diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index 5fdad9c43cf..219d2dd357a 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent } from 'react'; -import { ColorPickerPopover } from './ColorPickerPopover'; -import { ColorPickerProps } from './ColorPicker'; +import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover'; import { PopperContentProps } from '../Tooltip/PopperController'; import { Switch } from '../Switch/Switch'; import { withTheme } from '../../themes/ThemeContext'; diff --git a/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts b/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts new file mode 100644 index 00000000000..b8919c682e2 --- /dev/null +++ b/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts @@ -0,0 +1,9 @@ +import propDeprecationWarning from '../../utils/propDeprecationWarning'; +import { ColorPickerProps } from './ColorPickerPopover'; + +export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => { + const { onColorChange } = props; + if (onColorChange) { + propDeprecationWarning(componentName, 'onColorChange', 'onChange'); + } +}; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 39bae62e28b..d52d2fea80d 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import _ from 'lodash'; +import isNil from 'lodash/isNil'; import classNames from 'classnames'; import Scrollbars from 'react-custom-scrollbars'; @@ -41,7 +41,7 @@ export class CustomScrollbar extends PureComponent { updateScroll() { const ref = this.ref.current; - if (ref && !_.isNil(this.props.scrollTop)) { + if (ref && !isNil(this.props.scrollTop)) { if (this.props.scrollTop > 10000) { ref.scrollToBottom(); } else { diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 593678c7383..89e879ccc64 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -1,5 +1,5 @@ import React, { InputHTMLAttributes, FunctionComponent } from 'react'; -import { FormLabel } from '..'; +import { FormLabel } from '../FormLabel/FormLabel'; export interface Props extends InputHTMLAttributes { label: string; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index de09cb8e1f8..d04daae3dab 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; - -import { ValueMapping, Threshold, BasicGaugeColor, GrafanaThemeType } from '../../types'; import { getMappedValue } from '../../utils/valueMappings'; -import { getColorFromHexRgbOrName, getValueFormat } from '../../utils'; -import { Themeable } from '../../index'; +import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; +import { Themeable, GrafanaThemeType } from '../../types/theme'; +import { ValueMapping, Threshold, BasicGaugeColor } from '../../types/panel'; +import { getValueFormat } from '../../utils/valueFormats/valueFormats'; type TimeSeriesValue = string | number | null; diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index 06973dc08e8..5528c886e0f 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -16,7 +16,7 @@ import SelectOptionGroup from './SelectOptionGroup'; import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; import resetSelectStyles from './resetSelectStyles'; -import { CustomScrollbar } from '..'; +import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; export interface SelectOptionItem { label?: string; diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index f79de95fd2d..e2a25682519 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import _ from 'lodash'; +import uniqueId from 'lodash/uniqueId'; export interface Props { label: string; @@ -17,7 +17,7 @@ export interface State { export class Switch extends PureComponent { state = { - id: _.uniqueId('check-'), + id: uniqueId(), }; internalOnChange = (event: React.FormEvent) => { diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx index c5704e8bc88..f5cfdfe6cbf 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx @@ -1,7 +1,9 @@ import React, { ChangeEvent, PureComponent } from 'react'; import { MappingType, ValueMapping } from '../../types'; -import { FormField, FormLabel, Select } from '..'; +import { Select } from '../Select/Select'; +import { FormField } from '../FormField/FormField'; +import { FormLabel } from '../FormLabel/FormLabel'; export interface Props { valueMapping: ValueMapping; diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx index c07369fa283..9778fdf13c4 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import MappingRow from './MappingRow'; import { MappingType, ValueMapping } from '../../types'; -import { PanelOptionsGroup } from '..'; +import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; export interface Props { valueMappings: ValueMapping[]; diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts index 216f2f13bad..1583e1e6334 100644 --- a/packages/grafana-ui/src/index.ts +++ b/packages/grafana-ui/src/index.ts @@ -2,4 +2,3 @@ export * from './components'; export * from './types'; export * from './utils'; export * from './themes'; -export * from './themes/ThemeContext'; diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx index a61a71d8af6..e2d91ce3671 100644 --- a/packages/grafana-ui/src/themes/ThemeContext.tsx +++ b/packages/grafana-ui/src/themes/ThemeContext.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { GrafanaThemeType, Themeable } from '../types'; import { getTheme } from './index'; +import { GrafanaThemeType, Themeable } from '../types/theme'; type Omit = Pick>; type Subtract = Omit; diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts index 1d8d2f62606..cc8d9335e4c 100644 --- a/packages/grafana-ui/src/themes/index.ts +++ b/packages/grafana-ui/src/themes/index.ts @@ -1,6 +1,7 @@ import darkTheme from './dark'; import lightTheme from './light'; import { GrafanaTheme } from '../types/theme'; +import { ThemeContext, withTheme } from './ThemeContext'; let themeMock: ((name?: string) => GrafanaTheme) | null; @@ -12,3 +13,5 @@ export const mockTheme = (mock: (name?: string) => GrafanaTheme) => { themeMock = null; }; }; + +export { ThemeContext, withTheme }; diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts index 65ee605c33b..a316919a9a8 100644 --- a/packages/grafana-ui/src/utils/colors.ts +++ b/packages/grafana-ui/src/utils/colors.ts @@ -1,4 +1,8 @@ -import _ from 'lodash'; +import map from 'lodash/map'; +import sortBy from 'lodash/sortBy'; +import flattenDeep from 'lodash/flattenDeep'; +import chunk from 'lodash/chunk'; +import zip from 'lodash/zip'; import tinycolor from 'tinycolor2'; export const PALETTE_ROWS = 4; @@ -69,16 +73,16 @@ export const colors = [ ]; function sortColorsByHue(hexColors: string[]) { - const hslColors = _.map(hexColors, hexToHsl); + const hslColors = map(hexColors, hexToHsl); - const sortedHSLColors = _.sortBy(hslColors, ['h']); - const chunkedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS); - const sortedChunkedHSLColors = _.map(chunkedHSLColors, chunk => { - return _.sortBy(chunk, 'l'); + const sortedHSLColors = sortBy(hslColors, ['h']); + const chunkedHSLColors = chunk(sortedHSLColors, PALETTE_ROWS); + const sortedChunkedHSLColors = map(chunkedHSLColors, chunk => { + return sortBy(chunk, 'l'); }); - const flattenedZippedSortedChunkedHSLColors = _.flattenDeep(_.zip(...sortedChunkedHSLColors)); + const flattenedZippedSortedChunkedHSLColors = flattenDeep(zip(...sortedChunkedHSLColors)); - return _.map(flattenedZippedSortedChunkedHSLColors, hslToHex); + return map(flattenedZippedSortedChunkedHSLColors, hslToHex); } function hexToHsl(color: string) { diff --git a/packages/grafana-ui/src/utils/namedColorsPalette.ts b/packages/grafana-ui/src/utils/namedColorsPalette.ts index ac1c1be6fa5..deea2374205 100644 --- a/packages/grafana-ui/src/utils/namedColorsPalette.ts +++ b/packages/grafana-ui/src/utils/namedColorsPalette.ts @@ -1,5 +1,5 @@ -import { flatten } from 'lodash'; -import { GrafanaThemeType } from '../types'; +import flatten from 'lodash/flatten'; +import { GrafanaThemeType } from '../types/theme'; import tinycolor from 'tinycolor2'; type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple'; diff --git a/packages/grafana-ui/src/utils/processTimeSeries.ts b/packages/grafana-ui/src/utils/processTimeSeries.ts index 9a18b85fe18..f5e9f96efba 100644 --- a/packages/grafana-ui/src/utils/processTimeSeries.ts +++ b/packages/grafana-ui/src/utils/processTimeSeries.ts @@ -1,5 +1,5 @@ // Libraries -import _ from 'lodash'; +import isNumber from 'lodash/isNumber'; import { colors } from './colors'; @@ -75,7 +75,7 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS } if (currentValue !== null) { - if (_.isNumber(currentValue)) { + if (isNumber(currentValue)) { total += currentValue; allIsNull = false; nonNulls++; diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx index af6d63c6542..dbe2c505069 100644 --- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx +++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { RenderFunction } from '@storybook/react'; import { ThemeContext } from '../../themes/ThemeContext'; import { select } from '@storybook/addon-knobs'; -import { getTheme } from '../../themes'; +import { getTheme } from '../../themes/index'; import { GrafanaThemeType } from '../../types'; const ThemableStory: React.FunctionComponent<{}> = ({ children }) => { diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 9c6be4be242..619391d46d1 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -11,7 +11,7 @@ import { colors } from '@grafana/ui'; import TableModel, { mergeTablesIntoModel } from 'app/core/table_model'; // Types -import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui/src/types'; +import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui'; import TimeSeries from 'app/core/time_series2'; import { ExploreUrlState, From 75e9c1e8fc375946dec95c809634d5366bc189c5 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 11:25:06 +0100 Subject: [PATCH 31/70] Fix version and name in grafana/ui package.json --- packages/grafana-ui/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index e1c78b1e2ab..0fc2686a932 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,6 +1,6 @@ { - "name": "testing-ignore-this", - "version": "1.0.0-beta.0", + "name": "@grafana/ui", + "version": "0.0.0", "description": "", "main": "src/index.ts", "scripts": { From 996588528a8b61e65f64702c16425fe73d3262f6 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 11:52:47 +0100 Subject: [PATCH 32/70] Fixed failing tests because of circular dependency --- packages/grafana-ui/src/themes/ThemeContext.tsx | 2 +- packages/grafana-ui/src/themes/getTheme.ts | 15 +++++++++++++++ packages/grafana-ui/src/themes/index.ts | 17 ++--------------- 3 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 packages/grafana-ui/src/themes/getTheme.ts diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx index e2d91ce3671..11b3d79481a 100644 --- a/packages/grafana-ui/src/themes/ThemeContext.tsx +++ b/packages/grafana-ui/src/themes/ThemeContext.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { getTheme } from './index'; +import { getTheme } from './getTheme'; import { GrafanaThemeType, Themeable } from '../types/theme'; type Omit = Pick>; diff --git a/packages/grafana-ui/src/themes/getTheme.ts b/packages/grafana-ui/src/themes/getTheme.ts new file mode 100644 index 00000000000..9962f1a9a90 --- /dev/null +++ b/packages/grafana-ui/src/themes/getTheme.ts @@ -0,0 +1,15 @@ +import darkTheme from './dark'; +import lightTheme from './light'; +import { GrafanaTheme } from '../types/theme'; + +let themeMock: ((name?: string) => GrafanaTheme) | null; + +export const getTheme = (name?: string) => + (themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme); + +export const mockTheme = (mock: (name?: string) => GrafanaTheme) => { + themeMock = mock; + return () => { + themeMock = null; + }; +}; diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts index cc8d9335e4c..2d29576d968 100644 --- a/packages/grafana-ui/src/themes/index.ts +++ b/packages/grafana-ui/src/themes/index.ts @@ -1,17 +1,4 @@ -import darkTheme from './dark'; -import lightTheme from './light'; -import { GrafanaTheme } from '../types/theme'; import { ThemeContext, withTheme } from './ThemeContext'; +import { getTheme, mockTheme } from './getTheme'; -let themeMock: ((name?: string) => GrafanaTheme) | null; - -export let getTheme = (name?: string) => (themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme); - -export const mockTheme = (mock: (name?: string) => GrafanaTheme) => { - themeMock = mock; - return () => { - themeMock = null; - }; -}; - -export { ThemeContext, withTheme }; +export { ThemeContext, withTheme, mockTheme, getTheme }; From 394ee5dc08e1736962a6399a20216aba4f63baaf Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 11:53:27 +0100 Subject: [PATCH 33/70] Added keywords and description go grafana/ui package --- packages/grafana-ui/package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 0fc2686a932..16a4d5f87b2 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,7 +1,12 @@ { "name": "@grafana/ui", "version": "0.0.0", - "description": "", + "description": "Grafana Components Library", + "keywords": [ + "typescript", + "react", + "react-component" + ], "main": "src/index.ts", "scripts": { "tslint": "tslint -c tslint.json --project tsconfig.json", From 58e1a8bd3cabd7aefeba9dfee7c1b2b67e602875 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 15:13:59 +0100 Subject: [PATCH 34/70] Update docs to match current npm scripts --- docs/sources/project/building_from_source.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/project/building_from_source.md b/docs/sources/project/building_from_source.md index d4eb1a917d6..35e840d6e88 100644 --- a/docs/sources/project/building_from_source.md +++ b/docs/sources/project/building_from_source.md @@ -83,7 +83,7 @@ go get github.com/Unknwon/bra bra run ``` -You'll also need to run `yarn watch` to watch for changes to the front-end (typescript, html, sass) +You'll also need to run `yarn start` to watch for changes to the front-end (typescript, html, sass) ### Running tests From db58ab6c0270875991c344f21f0c93254565bc6c Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 15:40:43 +0100 Subject: [PATCH 35/70] Fixed prettier issue in color picker --- packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index cee562c9474..183cbfed67f 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -1,6 +1,6 @@ import React, { Component, createRef } from 'react'; import { PopperController } from '../Tooltip/PopperController'; -import {Popper} from '../Tooltip/Popper'; +import { Popper } from '../Tooltip/Popper'; import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; From df984059dbafc09e4ef28ecb138790c0b1e3c76e Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 21 Feb 2019 15:43:54 +0100 Subject: [PATCH 36/70] docs: fix order of datasources in menu/index and update alert support --- docs/sources/alerting/rules.md | 9 +++++---- docs/sources/features/datasources/azuremonitor.md | 8 ++++---- docs/sources/features/datasources/cloudwatch.md | 8 ++++---- docs/sources/features/datasources/index.md | 13 ++++++++----- docs/sources/features/datasources/influxdb.md | 2 +- docs/sources/features/datasources/loki.md | 2 +- docs/sources/features/datasources/opentsdb.md | 2 +- docs/sources/features/datasources/prometheus.md | 2 +- docs/sources/features/datasources/stackdriver.md | 8 ++++---- docs/sources/index.md | 2 +- 10 files changed, 30 insertions(+), 26 deletions(-) diff --git a/docs/sources/alerting/rules.md b/docs/sources/alerting/rules.md index 036ff97056d..510f466c3eb 100644 --- a/docs/sources/alerting/rules.md +++ b/docs/sources/alerting/rules.md @@ -27,9 +27,10 @@ and the conditions that need to be met for the alert to change state and trigger ## Execution The alert rules are evaluated in the Grafana backend in a scheduler and query execution engine that is part -of core Grafana. Only some data sources are supported right now. They include `Graphite`, `Prometheus`, `Elasticsearch`, `InfluxDB`, `OpenTSDB`, `MySQL`, `Postgres` and `Cloudwatch`. +of core Grafana. Only some data sources are supported right now. They include `Graphite`, `Prometheus`, `InfluxDB`, `Elasticsearch`, +`Stackdriver`, `Cloudwatch`, `Azure Monitor`, `MySQL`, `PostgreSQL`, `MSSQL` and `OpenTSDB`. -> Alerting support for Elasticsearch is only available in Grafana v5.2 and above. +> Alerting support for Azure Monitor is only available in Grafana v6.0 and above. ### Clustering @@ -52,9 +53,9 @@ Here you can specify the name of the alert rule and how often the scheduler shou > This setting is available in Grafana 5.4 and above. -If an alert rule has a configured `For` and the query violates the configured threshold it will first go from `OK` to `Pending`. Going from `OK` to `Pending` Grafana will not send any notifications. Once the alert rule has been firing for more than `For` duration, it will change to `Alerting` and send alert notifications. +If an alert rule has a configured `For` and the query violates the configured threshold it will first go from `OK` to `Pending`. Going from `OK` to `Pending` Grafana will not send any notifications. Once the alert rule has been firing for more than `For` duration, it will change to `Alerting` and send alert notifications. -Typically, it's always a good idea to use this setting since it's often worse to get false positive than wait a few minutes before the alert notification triggers. Looking at the `Alert list` or `Alert list panels` you will be able to see alerts in pending state. +Typically, it's always a good idea to use this setting since it's often worse to get false positive than wait a few minutes before the alert notification triggers. Looking at the `Alert list` or `Alert list panels` you will be able to see alerts in pending state. Below you can see an example timeline of an alert using the `For` setting. At ~16:04 the alert state changes to `Pending` and after 4 minutes it changes to `Alerting` which is when alert notifications are sent. Once the series falls back to normal the alert rule goes back to `OK`. {{< imgbox img="/img/docs/v54/alerting-for-dark-theme.png" caption="Alerting For" >}} diff --git a/docs/sources/features/datasources/azuremonitor.md b/docs/sources/features/datasources/azuremonitor.md index ee8ca62ef0b..1e628e8f2a8 100644 --- a/docs/sources/features/datasources/azuremonitor.md +++ b/docs/sources/features/datasources/azuremonitor.md @@ -5,9 +5,9 @@ keywords = ["grafana", "microsoft", "azure", "monitor", "application", "insights type = "docs" aliases = ["/datasources/azuremonitor"] [menu.docs] -name = "AzureMonitor" +name = "Azure Monitor" parent = "datasources" -weight = 11 +weight = 5 +++ # Using Azure Monitor in Grafana @@ -216,7 +216,7 @@ AzureActivity Table queries are mainly used in the Table panel and row a list of columns and rows. This example query returns rows with the 6 specified columns: ``` -AzureActivity +AzureActivity | where $__timeFilter() | project TimeGenerated, ResourceGroup, Category, OperationName, ActivityStatus, Caller | order by TimeGenerated desc @@ -232,7 +232,7 @@ To make writing queries easier there are several Grafana macros that can be used `TimeGenerated ≥ datetime(2018-06-05T18:09:58.907Z) and` `TimeGenerated ≤ datetime(2018-06-05T20:09:58.907Z)` where the from and to datetimes are from the Grafana time picker. -- `$__timeFilter(datetimeColumn)` - Expands to +- `$__timeFilter(datetimeColumn)` - Expands to `datetimeColumn ≥ datetime(2018-06-05T18:09:58.907Z) and` `datetimeColumn ≤ datetime(2018-06-05T20:09:58.907Z)` where the from and to datetimes are from the Grafana time picker. diff --git a/docs/sources/features/datasources/cloudwatch.md b/docs/sources/features/datasources/cloudwatch.md index 6ca10b2f8e8..ed88fcfc509 100644 --- a/docs/sources/features/datasources/cloudwatch.md +++ b/docs/sources/features/datasources/cloudwatch.md @@ -8,7 +8,7 @@ aliases = ["/datasources/cloudwatch"] name = "AWS Cloudwatch" identifier = "cloudwatch" parent = "datasources" -weight = 10 +weight = 5 +++ # Using AWS CloudWatch in Grafana @@ -77,9 +77,9 @@ Here is a minimal policy example: }, { "Sid": "AllowReadingResourcesForTags", - "Effect" : "Allow", - "Action" : "tag:GetResources", - "Resource" : "*" + "Effect" : "Allow", + "Action" : "tag:GetResources", + "Resource" : "*" } ] } diff --git a/docs/sources/features/datasources/index.md b/docs/sources/features/datasources/index.md index 42ce3f84819..9046c986f98 100644 --- a/docs/sources/features/datasources/index.md +++ b/docs/sources/features/datasources/index.md @@ -22,15 +22,18 @@ The query language and capabilities of each Data Source are obviously very diffe The following datasources are officially supported: * [Graphite]({{< relref "graphite.md" >}}) -* [Elasticsearch]({{< relref "elasticsearch.md" >}}) -* [CloudWatch]({{< relref "cloudwatch.md" >}}) -* [InfluxDB]({{< relref "influxdb.md" >}}) -* [OpenTSDB]({{< relref "opentsdb.md" >}}) * [Prometheus]({{< relref "prometheus.md" >}}) +* [InfluxDB]({{< relref "influxdb.md" >}}) +* [Elasticsearch]({{< relref "elasticsearch.md" >}}) +* [Google Stackdriver]({{< relref "stackdriver.md" >}}) +* [AWS CloudWatch]({{< relref "cloudwatch.md" >}}) +* [Azure Monitor]({{< relref "azuremonitor.md" >}}) * [Loki]({{< relref "loki.md" >}}) * [MySQL]({{< relref "mysql.md" >}}) -* [Postgres]({{< relref "postgres.md" >}}) +* [PostgreSQL]({{< relref "postgres.md" >}}) * [Microsoft SQL Server (MSSQL)]({{< relref "mssql.md" >}}) +* [OpenTSDB]({{< relref "opentsdb.md" >}}) +* [Testdata]({{< relref "testdata.md" >}}) ## Data source plugins diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index bc96190e9b1..94ae448f16d 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -7,7 +7,7 @@ aliases = ["/datasources/influxdb"] [menu.docs] name = "InfluxDB" parent = "datasources" -weight = 3 +weight = 2 +++ # Using InfluxDB in Grafana diff --git a/docs/sources/features/datasources/loki.md b/docs/sources/features/datasources/loki.md index d43ef982b4b..8dc4eaeaf4c 100644 --- a/docs/sources/features/datasources/loki.md +++ b/docs/sources/features/datasources/loki.md @@ -7,7 +7,7 @@ aliases = ["/datasources/loki"] [menu.docs] name = "Loki" parent = "datasources" -weight = 11 +weight = 6 +++ # Using Loki in Grafana diff --git a/docs/sources/features/datasources/opentsdb.md b/docs/sources/features/datasources/opentsdb.md index d2cd0b1dc0e..866619d380c 100644 --- a/docs/sources/features/datasources/opentsdb.md +++ b/docs/sources/features/datasources/opentsdb.md @@ -7,7 +7,7 @@ aliases = ["/datasources/opentsdb", "docs/features/opentsdb"] [menu.docs] name = "OpenTSDB" parent = "datasources" -weight = 5 +weight = 19 +++ # Using OpenTSDB in Grafana diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index 611a3b4d9e2..2b2704e0d81 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -7,7 +7,7 @@ aliases = ["/datasources/prometheus"] [menu.docs] name = "Prometheus" parent = "datasources" -weight = 2 +weight = 1 +++ # Using Prometheus in Grafana diff --git a/docs/sources/features/datasources/stackdriver.md b/docs/sources/features/datasources/stackdriver.md index d1cc1088276..e0f0e576b8b 100644 --- a/docs/sources/features/datasources/stackdriver.md +++ b/docs/sources/features/datasources/stackdriver.md @@ -5,9 +5,9 @@ keywords = ["grafana", "stackdriver", "google", "guide"] type = "docs" aliases = ["/datasources/stackdriver"] [menu.docs] -name = "Stackdriver" +name = "Google Stackdriver" parent = "datasources" -weight = 11 +weight = 4 +++ # Using Google Stackdriver in Grafana @@ -66,7 +66,7 @@ Click on the links above and click the `Enable` button: 4. Some new fields will appear. Fill in a name for the service account in the `Service account name` field and then choose the `Monitoring Viewer` role from the `Role` dropdown: {{< docs-imagebox img="/img/docs/v53/stackdriver_service_account_choose_role.png" class="docs-image--no-shadow" caption="Choose role" >}} - + 5. Click the Create button. A JSON key file will be created and downloaded to your computer. Store this file in a secure place as it allows access to your Stackdriver data. 6. Upload it to Grafana on the datasource Configuration page. You can either upload the file or paste in the contents of the file. @@ -156,7 +156,7 @@ Example Alias By: `{{metric.type}} - {{metric.labels.instance_name}}` Example Result: `compute.googleapis.com/instance/cpu/usage_time - server1-prod` -It is also possible to resolve the name of the Monitored Resource Type. +It is also possible to resolve the name of the Monitored Resource Type. | Alias Pattern Format | Description | Example Result | | -------------------- | ----------------------------------------------- | -------------- | diff --git a/docs/sources/index.md b/docs/sources/index.md index 3e8e014e606..7b8bfacd6f7 100644 --- a/docs/sources/index.md +++ b/docs/sources/index.md @@ -94,7 +94,7 @@ aliases = ["v1.1", "guides/reference/admin"] }}" class="nav-cards__item nav-cards__item--ds"> -
Cloudwatch
+
AWS CloudWatch
 }}" class="nav-cards__item nav-cards__item--ds"> From ae13352956442d578e6b73901803785f33a34b55 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 21 Feb 2019 15:50:18 +0100 Subject: [PATCH 37/70] docs: fix link --- docs/sources/features/datasources/azuremonitor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/features/datasources/azuremonitor.md b/docs/sources/features/datasources/azuremonitor.md index 1e628e8f2a8..4246a7f7c5d 100644 --- a/docs/sources/features/datasources/azuremonitor.md +++ b/docs/sources/features/datasources/azuremonitor.md @@ -20,7 +20,7 @@ The Azure Monitor Datasource supports multiple services in the Azure cloud: - **Azure Monitor** is the platform service that provides a single source for monitoring Azure resources. [Read more about Querying the Azure Monitor Service]({{< relref "#querying-the-azure-monitor-service" >}}). - **Application Insights** is an extensible Application Performance Management (APM) service for web developers on multiple platforms and can be used to monitor your live web application - it will automatically detect performance anomalies. [Read more about Querying the Application Insights Service]({{< relref "#querying-the-application-insights-service" >}}). -- **Azure Log Analytics** (or Azure Logs) gives you access to log data collected by Azure Monitor. [Read more about Querying the Azure Log Analytics Service]({{< relref "#querying-the-azure-monitor-service" >}}). +- **Azure Log Analytics** (or Azure Logs) gives you access to log data collected by Azure Monitor. [Read more about Querying the Azure Log Analytics Service]({{< relref "#querying-the-azure-log-analytics-service" >}}). - **Application Insights Analytics** allows you to query [Application Insights data](https://docs.microsoft.com/en-us/azure/azure-monitor/app/analytics) using the same query language used for Azure Log Analytics. [Read more about Querying the Application Insights Analytics Service]({{< relref "#writing-analytics-queries-for-the-application-insights-service" >}}). ## Adding the data source to Grafana From c1bacd630fe8ee3b2b929e4d0e96fd60eaaafebf Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 15:56:57 +0100 Subject: [PATCH 38/70] Make published package public by default --- scripts/cli/tasks/grafanaui.release.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/cli/tasks/grafanaui.release.ts b/scripts/cli/tasks/grafanaui.release.ts index b8569858e2b..412c96e7fb5 100644 --- a/scripts/cli/tasks/grafanaui.release.ts +++ b/scripts/cli/tasks/grafanaui.release.ts @@ -87,7 +87,7 @@ const publishPackage = async (name: string, version: string) => { const spinner = startSpinner(`Publishing ${name} @ ${version} to npm registry...`); try { - await execa('npm', ['publish']); + await execa('npm', ['publish', '--access', 'public']); spinner.succeed(); } catch (e) { console.log(e); From ca9a528a62e1a27249527c14f13b8d24bc2df4c6 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 21 Feb 2019 16:12:25 +0100 Subject: [PATCH 39/70] docs: layout fixes --- docs/sources/features/datasources/azuremonitor.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/sources/features/datasources/azuremonitor.md b/docs/sources/features/datasources/azuremonitor.md index 4246a7f7c5d..940db0973f2 100644 --- a/docs/sources/features/datasources/azuremonitor.md +++ b/docs/sources/features/datasources/azuremonitor.md @@ -33,7 +33,7 @@ The datasource can access metrics from four different services. You can configur 1. Accessed from the Grafana main menu, newly installed data sources can be added immediately within the Data Sources section. Next, click the "Add data source" button in the upper right. The data source will be available for selection in the Type select box. -2. Select Azure Monitor from the Type dropdown: +2. Select Azure Monitor from the Type dropdown:
![Data Source Type](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_1_select_type.png) 3. In the name field, fill in a name for the data source. It can be anything. Some suggestions are Azure Monitor or App Insights. @@ -43,8 +43,8 @@ The datasource can access metrics from four different services. You can configur - **Client Id** (Azure Active Directory -> App Registrations -> Choose your app -> Application ID) - **Client Secret** ( Azure Active Directory -> App Registrations -> Choose your app -> Keys) -5. Paste these four items into the fields in the Azure Monitor API Details section: - ![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_2_azure_monitor_api_details.png) +5. Paste these four items into the fields in the Azure Monitor API Details section:
+![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_2_azure_monitor_api_details.png) 6. If you are also using the Azure Log Analytics service, then you need to specify these two config values (or you can reuse the Client Id and Secret from the previous step). - Client Id (Azure Active Directory -> App Registrations -> Choose your app -> Application ID) @@ -54,11 +54,11 @@ The datasource can access metrics from four different services. You can configur - Application ID - API Key -8. Paste these two items into the appropriate fields in the Application Insights API Details section: - ![Application Insights API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_3_app_insights_api_details.png) +8. Paste these two items into the appropriate fields in the Application Insights API Details section:
+![Application Insights API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_3_app_insights_api_details.png) -9. Test that the configuration details are correct by clicking on the "Save & Test" button: - ![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_4_save_and_test.png) +9. Test that the configuration details are correct by clicking on the "Save & Test" button:
+![Azure Monitor API Details](https://raw.githubusercontent.com/grafana/azure-monitor-datasource/master/src/img/config_4_save_and_test.png) Alternatively on step 4 if creating a new Azure Active Directory App, use the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest): From f471be2453dc235b7f3113980d110801f5f250a0 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 16:37:42 +0100 Subject: [PATCH 40/70] Bring back plugins page styles --- public/sass/_grafana.scss | 1 + public/sass/pages/_plugins.scss | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 public/sass/pages/_plugins.scss diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 3170de5ba1a..8928523f2be 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -113,5 +113,6 @@ @import 'pages/styleguide'; @import 'pages/errorpage'; @import 'pages/explore'; +@import 'pages/plugins'; @import 'old_responsive'; @import 'components/view_states.scss'; diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss new file mode 100644 index 00000000000..2570eb6c791 --- /dev/null +++ b/public/sass/pages/_plugins.scss @@ -0,0 +1,31 @@ +.get-more-plugins-link { + color: $gray-3; + font-size: $font-size-sm; + position: relative; + top: 1.2rem; + + &:hover { + color: $link-hover-color; + } + + img { + vertical-align: top; + } +} + +@include media-breakpoint-down(sm) { + .get-more-plugins-link { + display: none; + } +} + +.plugin-info-list-item { + white-space: nowrap; + max-width: $page-sidebar-width; + text-overflow: ellipsis; + overflow: hidden; + + img { + width: 16px; + } +} From 7ea361513da646d249daf81355940d18c99722aa Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 21 Feb 2019 17:39:03 +0100 Subject: [PATCH 41/70] docs: landing page update link to what's new in v6.0 add azure monitor and loki to datasource list change stackdriver icon to a bigger one --- docs/sources/index.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/sources/index.md b/docs/sources/index.md index 7b8bfacd6f7..a0b1ff42ea0 100644 --- a/docs/sources/index.md +++ b/docs/sources/index.md @@ -60,9 +60,9 @@ aliases = ["v1.1", "guides/reference/admin"]

Provisioning

A guide to help you automate your Grafana setup & configuration.

 - }}" class="nav-cards__item nav-cards__item--guide"> -

What's new in v5.4

-

Article on all the new cool features and enhancements in v5.4

+ }}" class="nav-cards__item nav-cards__item--guide"> +

What's new in v6.0

+

Article on all the new cool features and enhancements in v6.0

 }}" class="nav-cards__item nav-cards__item--guide">

Screencasts

@@ -89,13 +89,21 @@ aliases = ["v1.1", "guides/reference/admin"]
Prometheus
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Google Stackdriver
 }}" class="nav-cards__item nav-cards__item--ds">
AWS CloudWatch
 + }}" class="nav-cards__item nav-cards__item--ds"> + +
Azure Monitor
+ + }}" class="nav-cards__item nav-cards__item--ds"> + +
Loki
+ }}" class="nav-cards__item nav-cards__item--ds">
MySQL
From 10916d9192f5e702a817dee4bcdea1598d5ab80c Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 17:45:52 +0100 Subject: [PATCH 42/70] Update grafana/ui readme --- packages/grafana-ui/README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/README.md b/packages/grafana-ui/README.md index 1413965f7da..b62d19d2432 100644 --- a/packages/grafana-ui/README.md +++ b/packages/grafana-ui/README.md @@ -1,3 +1,13 @@ -# Grafana (WIP) shared component library +# Grafana UI components library -Used by internal & external plugins. +@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana) + +Our goal is to deliver Grafana's common UI elements for plugins developers and contributors. + +See [package source](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) for more details. + +## Installation + +`yarn add @grafana/ui` + +`npm install @grafana/ui` From c1d0f11c470d3e81d2d8cf37be555068fd567913 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 22:22:35 +0100 Subject: [PATCH 43/70] grafana/ui 1.0.0-alpha.0 release --- packages/grafana-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 16a4d5f87b2..2795a4d3090 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,6 +1,6 @@ { "name": "@grafana/ui", - "version": "0.0.0", + "version": "1.0.0-alpha.0", "description": "Grafana Components Library", "keywords": [ "typescript", From 60fab15335c774b7fec783f920dbf01fdb5a6890 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 22 Feb 2019 00:19:08 +0100 Subject: [PATCH 44/70] update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index faa2f49faff..ba2cd6572f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ -# 6.0.0-beta3 (unreleased) +# Unreleased + +# 6.0.0-beta3 (2019-02-19) ### Minor * **CLI**: Grafana CLI should preserve permissions for backend binaries for Linux and Darwin [#15500](https://github.com/grafana/grafana/issues/15500) From ad748c05028d49e518653aa6b89cd5972a66effb Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 22 Feb 2019 00:23:10 +0100 Subject: [PATCH 45/70] changelog: add notes about closing #1441 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba2cd6572f3..55292b6d3db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ * **AzureMonitor**: improve autocomplete for Log Analytics and App Insights editor [#15131](https://github.com/grafana/grafana/issues/15131) * **LDAP**: Fix IPA/FreeIPA v4.6.4 does not allow LDAP searches with empty attributes [#14432](https://github.com/grafana/grafana/issues/14432) * **Provisioning**: Allow testing data sources that were added by config [#12164](https://github.com/grafana/grafana/issues/12164) +* **Security**: Fix CSRF Token validation for POSTs [#1441](https://github.com/grafana/grafana/issues/1441) ### Breaking changes From d358088776274496e2829fad3ddfaa111fc7f643 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 22 Feb 2019 00:29:46 +0100 Subject: [PATCH 46/70] changelog: add notes about closing #15303 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55292b6d3db..3fea588259f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -56,6 +56,7 @@ * **Snapshots**: Enable deletion of public snapshot [#14109](https://github.com/grafana/grafana/issues/14109) * **Provisioning**: Provisioning support for alert notifiers [#10487](https://github.com/grafana/grafana/issues/10487), thx [@pbakulev](https://github.com/pbakulev) * **Explore**: A whole new way to do ad-hoc metric queries and exploration. Split view in half and compare metrics & logs and much much more. [Read more here](http://docs.grafana.org/features/explore/) +* **Auth**: Replace remember me cookie solution for Grafana's builtin, LDAP and OAuth authentication with a solution based on short-lived tokens [#15303](https://github.com/grafana/grafana/issues/15303) ### Minor From 34f6d9ab8e5246807c80ca5878fc85d509638add Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 22 Feb 2019 11:30:45 +0100 Subject: [PATCH 47/70] grafana/ui 6.0.0-alpha.0 release version bump --- packages/grafana-ui/CHANGELOG.md | 4 +++- packages/grafana-ui/README.md | 4 ++++ packages/grafana-ui/package.json | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/CHANGELOG.md b/packages/grafana-ui/CHANGELOG.md index 472c2df8ad8..cbc7afc2609 100644 --- a/packages/grafana-ui/CHANGELOG.md +++ b/packages/grafana-ui/CHANGELOG.md @@ -1,4 +1,6 @@ -# 1.0.0-alpha.0 (2019-02-21) +# 6.0.0-alpha.0 (2019-02-22) +Version update to 6.0.0 to keep @grafana/ui version in sync with [Grafana](https://github.com/grafana/grafana) +# 1.0.0-alpha.0 (2019-02-21) First public release diff --git a/packages/grafana-ui/README.md b/packages/grafana-ui/README.md index b62d19d2432..fa482003253 100644 --- a/packages/grafana-ui/README.md +++ b/packages/grafana-ui/README.md @@ -11,3 +11,7 @@ See [package source](https://github.com/grafana/grafana/tree/master/packages/gra `yarn add @grafana/ui` `npm install @grafana/ui` + +## Versioning +To limit the confusion related to @grafana/ui and Grafana versioning we decided to keep the major version in sync between those two. +This means, that first version of @grafana/ui is taged with 6.0.0-alpha.0 to keep version in sync with Grafana 6.0 release. diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 2795a4d3090..2c4db3e30af 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,6 +1,6 @@ { "name": "@grafana/ui", - "version": "1.0.0-alpha.0", + "version": "6.0.0-alpha.0", "description": "Grafana Components Library", "keywords": [ "typescript", From 425636ff7082e7a8bf8d3bfb1c20c7a1a5fd81a7 Mon Sep 17 00:00:00 2001 From: Valentin Agachi Date: Fri, 22 Feb 2019 20:13:10 +0800 Subject: [PATCH 48/70] Improve Loki logs render with ANSI colors (#15558) * Improve Loki logs render with ANSI colors * fixup! Improve Loki logs render with ANSI colors * fixup! Improve Loki logs render with ANSI colors * fixup! Improve Loki logs render with ANSI colors --- public/app/core/logs_model.ts | 6 ++- .../app/features/explore/LogMessageAnsi.tsx | 2 +- public/app/features/explore/LogRow.tsx | 18 ++++---- .../loki/result_transformer.test.ts | 46 ++++++++++++++++++- .../datasource/loki/result_transformer.ts | 11 +++-- 5 files changed, 66 insertions(+), 17 deletions(-) diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts index f4ad11e1b0e..a9b96190d9b 100644 --- a/public/app/core/logs_model.ts +++ b/public/app/core/logs_model.ts @@ -22,7 +22,7 @@ export enum LogLevel { dbug = 'debug', debug = 'debug', trace = 'trace', - unkown = 'unkown', + unknown = 'unknown', } export const LogLevelColor = { @@ -32,7 +32,7 @@ export const LogLevelColor = { [LogLevel.info]: colors[0], [LogLevel.debug]: colors[5], [LogLevel.trace]: colors[2], - [LogLevel.unkown]: getThemeColor('#8e8e8e', '#dde4ed'), + [LogLevel.unknown]: getThemeColor('#8e8e8e', '#dde4ed'), }; export interface LogSearchMatch { @@ -44,9 +44,11 @@ export interface LogSearchMatch { export interface LogRowModel { duplicates?: number; entry: string; + hasAnsi: boolean; key: string; // timestamp + labels labels: LogsStreamLabels; logLevel: LogLevel; + raw: string; searchWords?: string[]; timestamp: string; // ISO with nanosec precision timeFromNow: string; diff --git a/public/app/features/explore/LogMessageAnsi.tsx b/public/app/features/explore/LogMessageAnsi.tsx index bed28bc674d..53147656d6a 100644 --- a/public/app/features/explore/LogMessageAnsi.tsx +++ b/public/app/features/explore/LogMessageAnsi.tsx @@ -38,7 +38,7 @@ export class LogMessageAnsi extends PureComponent { prevValue: '', }; - static getDerivedStateFromProps(props, state) { + static getDerivedStateFromProps(props: Props, state: State) { if (props.value === state.prevValue) { return null; } diff --git a/public/app/features/explore/LogRow.tsx b/public/app/features/explore/LogRow.tsx index e5c3ec0558c..d7615446b21 100644 --- a/public/app/features/explore/LogRow.tsx +++ b/public/app/features/explore/LogRow.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { LogRowModel, LogLabelStatsModel, LogsParser, calculateFieldStats, getParser } from 'app/core/logs_model'; import { LogLabels } from './LogLabels'; -import { findHighlightChunksInText, hasAnsiCodes } from 'app/core/utils/text'; +import { findHighlightChunksInText } from 'app/core/utils/text'; import { LogLabelStats } from './LogLabelStats'; import { LogMessageAnsi } from './LogMessageAnsi'; @@ -130,13 +130,13 @@ export class LogRow extends PureComponent { parsedFieldHighlights, showFieldStats, } = this.state; + const { entry, hasAnsi, raw } = row; const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords); const highlights = previewHighlights ? highlighterExpressions : row.searchWords; - const needsHighlighter = highlights && highlights.length > 0; + const needsHighlighter = highlights && highlights.length > 0 && highlights[0].length > 0; const highlightClassName = classnames('logs-row__match-highlight', { 'logs-row__match-highlight--preview': previewHighlights, }); - const containsAnsiCodes = hasAnsiCodes(row.entry); return (
@@ -160,25 +160,25 @@ export class LogRow extends PureComponent {
)}
- {containsAnsiCodes && } - {!containsAnsiCodes && parsed && ( + {parsed && ( )} - {!containsAnsiCodes && !parsed && needsHighlighter && ( + {!parsed && needsHighlighter && ( )} - {!containsAnsiCodes && !parsed && !needsHighlighter && row.entry} + {hasAnsi && !parsed && !needsHighlighter && } + {!hasAnsi && !parsed && !needsHighlighter && entry} {showFieldStats && (
{ it('returns no log level on empty line', () => { - expect(getLogLevel('')).toBe(LogLevel.unkown); + expect(getLogLevel('')).toBe(LogLevel.unknown); }); it('returns no log level on when level is part of a word', () => { - expect(getLogLevel('this is information')).toBe(LogLevel.unkown); + expect(getLogLevel('this is information')).toBe(LogLevel.unknown); }); it('returns same log level for long and short version', () => { @@ -158,4 +158,46 @@ describe('mergeStreamsToLogs()', () => { }, ]); }); + + it('detects ANSI codes', () => { + expect( + mergeStreamsToLogs([ + { + labels: '{foo="bar"}', + entries: [ + { + line: "foo: 'bar'", + ts: '1970-01-01T00:00:00Z', + }, + ], + }, + { + labels: '{bar="foo"}', + entries: [ + { + line: "bar: 'foo'", + ts: '1970-01-01T00:00:00Z', + }, + ], + }, + ]).rows + ).toMatchObject([ + { + entry: "bar: 'foo'", + hasAnsi: false, + key: 'EK1970-01-01T00:00:00Z{bar="foo"}', + labels: { bar: 'foo' }, + logLevel: 'unknown', + raw: "bar: 'foo'", + }, + { + entry: "foo: 'bar'", + hasAnsi: true, + key: 'EK1970-01-01T00:00:00Z{foo="bar"}', + labels: { foo: 'bar' }, + logLevel: 'unknown', + raw: "foo: 'bar'", + }, + ]); + }); }); diff --git a/public/app/plugins/datasource/loki/result_transformer.ts b/public/app/plugins/datasource/loki/result_transformer.ts index 9cd4ee0779b..1fbabba1789 100644 --- a/public/app/plugins/datasource/loki/result_transformer.ts +++ b/public/app/plugins/datasource/loki/result_transformer.ts @@ -1,3 +1,4 @@ +import ansicolor from 'ansicolor'; import _ from 'lodash'; import moment from 'moment'; @@ -11,6 +12,7 @@ import { LogsStreamLabels, LogsMetaKind, } from 'app/core/logs_model'; +import { hasAnsiCodes } from 'app/core/utils/text'; import { DEFAULT_MAX_LINES } from './datasource'; /** @@ -21,7 +23,7 @@ import { DEFAULT_MAX_LINES } from './datasource'; */ export function getLogLevel(line: string): LogLevel { if (!line) { - return LogLevel.unkown; + return LogLevel.unknown; } let level: LogLevel; Object.keys(LogLevel).forEach(key => { @@ -33,7 +35,7 @@ export function getLogLevel(line: string): LogLevel { } }); if (!level) { - level = LogLevel.unkown; + level = LogLevel.unknown; } return level; } @@ -125,6 +127,7 @@ export function processEntry( const timeFromNow = time.fromNow(); const timeLocal = time.format('YYYY-MM-DD HH:mm:ss'); const logLevel = getLogLevel(line); + const hasAnsi = hasAnsiCodes(line); return { key, @@ -133,7 +136,9 @@ export function processEntry( timeEpochMs, timeLocal, uniqueLabels, - entry: line, + hasAnsi, + entry: hasAnsi ? ansicolor.strip(line) : line, + raw: line, labels: parsedLabels, searchWords: search ? [search] : [], timestamp: ts, From dafcfd70a709f0111ccb6b3bd74d4659c3f51a99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 22 Feb 2019 09:11:21 +0100 Subject: [PATCH 49/70] Fixed bug with getting teams for user --- pkg/api/user.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/api/user.go b/pkg/api/user.go index 6db9c6f6baf..9eb7e75eab0 100644 --- a/pkg/api/user.go +++ b/pkg/api/user.go @@ -121,7 +121,7 @@ func GetUserTeams(c *m.ReqContext) Response { return getUserTeamList(c.OrgId, c.ParamsInt64(":id")) } -func getUserTeamList(userID int64, orgID int64) Response { +func getUserTeamList(orgID int64, userID int64) Response { query := m.GetTeamsByUserQuery{OrgId: orgID, UserId: userID} if err := bus.Dispatch(&query); err != nil { From 9c9691f7af49f146403a443b78f6e117350399be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 22 Feb 2019 11:18:07 +0100 Subject: [PATCH 50/70] Added feature toggle editors_can_own --- pkg/api/frontendsettings.go | 1 + pkg/setting/setting.go | 2 ++ public/app/core/config.ts | 2 ++ 3 files changed, 5 insertions(+) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index d13f0a26ab0..48159e568b6 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -167,6 +167,7 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *m.ReqContext) (map[string]interf "externalUserMngLinkUrl": setting.ExternalUserMngLinkUrl, "externalUserMngLinkName": setting.ExternalUserMngLinkName, "viewersCanEdit": setting.ViewersCanEdit, + "editorsCanOwn": setting.EditorsCanOwn, "disableSanitizeHtml": hs.Cfg.DisableSanitizeHtml, "buildInfo": map[string]interface{}{ "version": setting.BuildVersion, diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 21899482529..a18b1d14e6a 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -118,6 +118,7 @@ var ( ExternalUserMngInfo string OAuthAutoLogin bool ViewersCanEdit bool + EditorsCanOwn bool // Http auth AdminUser string @@ -657,6 +658,7 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error { ExternalUserMngLinkName = users.Key("external_manage_link_name").String() ExternalUserMngInfo = users.Key("external_manage_info").String() ViewersCanEdit = users.Key("viewers_can_edit").MustBool(false) + EditorsCanOwn = users.Key("editors_can_own").MustBool(false) // auth auth := iniFile.Section("auth") diff --git a/public/app/core/config.ts b/public/app/core/config.ts index 8839a6f7942..8fefc1aeb0a 100644 --- a/public/app/core/config.ts +++ b/public/app/core/config.ts @@ -36,6 +36,7 @@ export class Settings { loginHint: any; loginError: any; viewersCanEdit: boolean; + editorsCanOwn: boolean; disableSanitizeHtml: boolean; theme: GrafanaTheme; @@ -57,6 +58,7 @@ export class Settings { isEnterprise: false, }, viewersCanEdit: false, + editorsCanOwn: false, disableSanitizeHtml: false, }; From 769ad21e1691c3f7e5c07e499944daea25c85e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 22 Feb 2019 12:11:26 +0100 Subject: [PATCH 51/70] Moved variable to config struct after PR comments --- pkg/api/frontendsettings.go | 2 +- pkg/setting/setting.go | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 48159e568b6..ff84f290a4f 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -167,7 +167,7 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *m.ReqContext) (map[string]interf "externalUserMngLinkUrl": setting.ExternalUserMngLinkUrl, "externalUserMngLinkName": setting.ExternalUserMngLinkName, "viewersCanEdit": setting.ViewersCanEdit, - "editorsCanOwn": setting.EditorsCanOwn, + "editorsCanOwn": hs.Cfg.EditorsCanOwn, "disableSanitizeHtml": hs.Cfg.DisableSanitizeHtml, "buildInfo": map[string]interface{}{ "version": setting.BuildVersion, diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index a18b1d14e6a..5d44a3585dc 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -118,7 +118,6 @@ var ( ExternalUserMngInfo string OAuthAutoLogin bool ViewersCanEdit bool - EditorsCanOwn bool // Http auth AdminUser string @@ -238,6 +237,9 @@ type Cfg struct { LoginMaxInactiveLifetimeDays int LoginMaxLifetimeDays int TokenRotationIntervalMinutes int + + // User + EditorsCanOwn bool } type CommandLineArgs struct { @@ -645,6 +647,7 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error { AdminUser = security.Key("admin_user").String() AdminPassword = security.Key("admin_password").String() + // users users := iniFile.Section("users") AllowUserSignUp = users.Key("allow_sign_up").MustBool(true) AllowUserOrgCreate = users.Key("allow_org_create").MustBool(true) @@ -658,7 +661,7 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error { ExternalUserMngLinkName = users.Key("external_manage_link_name").String() ExternalUserMngInfo = users.Key("external_manage_info").String() ViewersCanEdit = users.Key("viewers_can_edit").MustBool(false) - EditorsCanOwn = users.Key("editors_can_own").MustBool(false) + cfg.EditorsCanOwn = users.Key("editors_can_own").MustBool(false) // auth auth := iniFile.Section("auth") From 8f6208248245d13bb165aa9665ed5e5e97e73b41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 22 Feb 2019 13:54:15 +0100 Subject: [PATCH 52/70] Added feature toggle to defaults.ini and sample.ini after PR comments --- conf/defaults.ini | 3 +++ conf/sample.ini | 3 +++ 2 files changed, 6 insertions(+) diff --git a/conf/defaults.ini b/conf/defaults.ini index a87aba10adb..df02e01235b 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -243,6 +243,9 @@ external_manage_info = # Viewers can edit/inspect dashboard settings in the browser. But not save the dashboard. viewers_can_edit = false +# Editors can administrate dashboard, folders and teams they create +editors_can_own = false + [auth] # Login cookie name login_cookie_name = grafana_session diff --git a/conf/sample.ini b/conf/sample.ini index dbbb3593f0f..57ff82181de 100644 --- a/conf/sample.ini +++ b/conf/sample.ini @@ -223,6 +223,9 @@ log_queries = # Viewers can edit/inspect dashboard settings in the browser. But not save the dashboard. ;viewers_can_edit = false +# Editors can administrate dashboard, folders and teams they create +;editors_can_own = false + [auth] # Login cookie name ;login_cookie_name = grafana_session From 31ae2813a750667387a4aaf3d3d39ae6c3915353 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Fri, 22 Feb 2019 18:45:24 +0100 Subject: [PATCH 53/70] docs: tweaks to AzureMonitor docs --- docs/sources/features/datasources/azuremonitor.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/sources/features/datasources/azuremonitor.md b/docs/sources/features/datasources/azuremonitor.md index 940db0973f2..d72f5273925 100644 --- a/docs/sources/features/datasources/azuremonitor.md +++ b/docs/sources/features/datasources/azuremonitor.md @@ -18,10 +18,10 @@ As of Grafana 6.0, the Azure Monitor plugin has been moved into Grafana so it no The Azure Monitor Datasource supports multiple services in the Azure cloud: -- **Azure Monitor** is the platform service that provides a single source for monitoring Azure resources. [Read more about Querying the Azure Monitor Service]({{< relref "#querying-the-azure-monitor-service" >}}). -- **Application Insights** is an extensible Application Performance Management (APM) service for web developers on multiple platforms and can be used to monitor your live web application - it will automatically detect performance anomalies. [Read more about Querying the Application Insights Service]({{< relref "#querying-the-application-insights-service" >}}). -- **Azure Log Analytics** (or Azure Logs) gives you access to log data collected by Azure Monitor. [Read more about Querying the Azure Log Analytics Service]({{< relref "#querying-the-azure-log-analytics-service" >}}). -- **Application Insights Analytics** allows you to query [Application Insights data](https://docs.microsoft.com/en-us/azure/azure-monitor/app/analytics) using the same query language used for Azure Log Analytics. [Read more about Querying the Application Insights Analytics Service]({{< relref "#writing-analytics-queries-for-the-application-insights-service" >}}). +- **[Azure Monitor]({{< relref "#querying-the-azure-monitor-service" >}})** is the platform service that provides a single source for monitoring Azure resources. +- **[Application Insights]({{< relref "#querying-the-application-insights-service" >}})** is an extensible Application Performance Management (APM) service for web developers on multiple platforms and can be used to monitor your live web application - it will automatically detect performance anomalies. +- **[Azure Log Analytics]({{< relref "#querying-the-azure-log-analytics-service" >}})** (or Azure Logs) gives you access to log data collected by Azure Monitor. +- **[Application Insights Analytics]({{< relref "#writing-analytics-queries-for-the-application-insights-service" >}})** allows you to query [Application Insights data](https://docs.microsoft.com/en-us/azure/azure-monitor/app/analytics) using the same query language used for Azure Log Analytics. ## Adding the data source to Grafana @@ -133,7 +133,7 @@ types of template variables. ### Azure Monitor Metrics Whitelist -Not all metrics returned by the Azure Monitor API have values. The Grafana datasource has a whitelist to only return metric names if it is possible they might have values. This whitelist is updated regularly as new services and metrics are added to the Azure cloud. You can find the current whitelist [here](https://github.com/grafana/grafana/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/supported_namespaces.ts). +Not all metrics returned by the Azure Monitor API have values. The Grafana datasource has a whitelist to only return metric names if it is possible they might have values. This whitelist is updated regularly as new services and metrics are added to the Azure cloud. You can find the current whitelist [here](https://github.com/grafana/grafana/blob/master/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/supported_namespaces.ts). ### Azure Monitor Alerting @@ -248,7 +248,7 @@ There are also some Grafana variables that can be used in Azure Log Analytics qu - `$__from` - Returns the From datetime from the Grafana picker. Example: `datetime(2018-06-05T18:09:58.907Z)`. - `$__to` - Returns the From datetime from the Grafana picker. Example: `datetime(2018-06-05T20:09:58.907Z)`. -- `$__interval` - Grafana calculates the minimum time grain that can be used to group by time in queries. More details on how it works [here](http://docs.grafana.org/reference/templating/#the-interval-variable). It returns a time grain like `5m` or `1h` that can be used in the bin function. E.g. `summarize count() by bin(TimeGenerated, $__interval)` +- `$__interval` - Grafana calculates the minimum time grain that can be used to group by time in queries. More details on how it works [here]({{< relref "reference/templating.md#interval-variables" >}}). It returns a time grain like `5m` or `1h` that can be used in the bin function. E.g. `summarize count() by bin(TimeGenerated, $__interval)` ### Azure Log Analytics Alerting From f768808b6ee7952ca7ac3c5ae2bcc4d07422cc07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Feb 2019 08:59:00 +0100 Subject: [PATCH 54/70] Fixed value dropdown not updating when it's current value updates, fixes #15566 --- .../app/core/directives/value_select_dropdown.ts | 16 ++++++++-------- .../dashboard/components/SubMenu/template.html | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/public/app/core/directives/value_select_dropdown.ts b/public/app/core/directives/value_select_dropdown.ts index a75ecd46ad0..0df1b2758be 100644 --- a/public/app/core/directives/value_select_dropdown.ts +++ b/public/app/core/directives/value_select_dropdown.ts @@ -240,7 +240,7 @@ export class ValueSelectDropdownCtrl { /** @ngInject */ export function valueSelectDropdown($compile, $window, $timeout, $rootScope) { return { - scope: { variable: '=', onUpdated: '&' }, + scope: { dashboard: '=', variable: '=', onUpdated: '&' }, templateUrl: 'public/app/partials/valueSelectDropdown.html', controller: 'ValueSelectDropdownCtrl', controllerAs: 'vm', @@ -288,13 +288,13 @@ export function valueSelectDropdown($compile, $window, $timeout, $rootScope) { } }); - const cleanUp = $rootScope.$on('template-variable-value-updated', () => { - scope.vm.updateLinkText(); - }); - - scope.$on('$destroy', () => { - cleanUp(); - }); + scope.vm.dashboard.on( + 'template-variable-value-updated', + () => { + scope.vm.updateLinkText(); + }, + scope + ); scope.vm.init(); }, diff --git a/public/app/features/dashboard/components/SubMenu/template.html b/public/app/features/dashboard/components/SubMenu/template.html index 1ccbfcc915c..fd52deaf403 100644 --- a/public/app/features/dashboard/components/SubMenu/template.html +++ b/public/app/features/dashboard/components/SubMenu/template.html @@ -4,7 +4,7 @@ - +
From 3c911cf20866def351b75c6d521f87f6d104f27f Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Sat, 23 Feb 2019 11:05:11 +0100 Subject: [PATCH 55/70] docs: link to azure monitor from what's new in v6.0 --- docs/sources/guides/whats-new-in-v6-0.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/sources/guides/whats-new-in-v6-0.md b/docs/sources/guides/whats-new-in-v6-0.md index 2ba7e86b385..c7091fd855e 100644 --- a/docs/sources/guides/whats-new-in-v6-0.md +++ b/docs/sources/guides/whats-new-in-v6-0.md @@ -126,6 +126,8 @@ One of the goals of the Grafana v6.0 release is to add support for the three maj The Azure Monitor datasource integrates four Azure services with Grafana - Azure Monitor, Azure Log Analytics, Azure Application Insights and Azure Application Insights Analytics. +Please read [Using Azure Monitor in Grafana documentation](/features/datasources/azuremonitor/) for more detailed information on how to get started and use it. + ## Provisioning support for alert notifiers Grafana now added support for provisioning alert notifiers from configuration files. Allowing operators to provision notifiers without using the UI or the API. A new field called `uid` has been introduced which is a string identifier that the administrator can set themselves. Same kind of identifier used for dashboards since v5.0. This feature makes it possible to use the same notifier configuration in multiple environments and refer to notifiers in dashboard json by a string identifier instead of the numeric id which depends on insert order and how many notifiers that exists in the instance. From d1e249a8039aa068af1de9d92d6aaf482e26d461 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Sun, 24 Feb 2019 17:32:47 +0100 Subject: [PATCH 56/70] stackdriver: fix for float64 bounds for distribution metrics Adds support for explicit distribution metrics and float64 bounds Fixes #14509 --- pkg/tsdb/stackdriver/stackdriver.go | 4 +- pkg/tsdb/stackdriver/stackdriver_test.go | 51 ++++- ...es-response-distribution-exponential.json} | 0 ...series-response-distribution-explicit.json | 209 ++++++++++++++++++ pkg/tsdb/stackdriver/types.go | 2 +- 5 files changed, 262 insertions(+), 4 deletions(-) rename pkg/tsdb/stackdriver/test-data/{3-series-response-distribution.json => 3-series-response-distribution-exponential.json} (100%) create mode 100644 pkg/tsdb/stackdriver/test-data/4-series-response-distribution-explicit.json diff --git a/pkg/tsdb/stackdriver/stackdriver.go b/pkg/tsdb/stackdriver/stackdriver.go index 8317e2a748a..76b346553ad 100644 --- a/pkg/tsdb/stackdriver/stackdriver.go +++ b/pkg/tsdb/stackdriver/stackdriver.go @@ -336,6 +336,8 @@ func (e *StackdriverExecutor) unmarshalResponse(res *http.Response) (Stackdriver return StackdriverResponse{}, err } + // slog.Info("stackdriver", "response", string(body)) + if res.StatusCode/100 != 2 { slog.Error("Request failed", "status", res.Status, "body", string(body)) return StackdriverResponse{}, fmt.Errorf(string(body)) @@ -559,7 +561,7 @@ func calcBucketBound(bucketOptions StackdriverBucketOptions, n int) string { } else if bucketOptions.ExponentialBuckets != nil { bucketBound = strconv.FormatInt(int64(bucketOptions.ExponentialBuckets.Scale*math.Pow(bucketOptions.ExponentialBuckets.GrowthFactor, float64(n-1))), 10) } else if bucketOptions.ExplicitBuckets != nil { - bucketBound = strconv.FormatInt(bucketOptions.ExplicitBuckets.Bounds[(n-1)], 10) + bucketBound = fmt.Sprintf("%g", bucketOptions.ExplicitBuckets.Bounds[n]) } return bucketBound } diff --git a/pkg/tsdb/stackdriver/stackdriver_test.go b/pkg/tsdb/stackdriver/stackdriver_test.go index 4b16b6b5294..78c3086a94b 100644 --- a/pkg/tsdb/stackdriver/stackdriver_test.go +++ b/pkg/tsdb/stackdriver/stackdriver_test.go @@ -344,8 +344,8 @@ func TestStackdriver(t *testing.T) { }) }) - Convey("when data from query is distribution", func() { - data, err := loadTestFile("./test-data/3-series-response-distribution.json") + Convey("when data from query is distribution with exponential bounds", func() { + data, err := loadTestFile("./test-data/3-series-response-distribution-exponential.json") So(err, ShouldBeNil) So(len(data.TimeSeries), ShouldEqual, 1) @@ -370,6 +370,14 @@ func TestStackdriver(t *testing.T) { So(res.Series[0].Points[2][1].Float64, ShouldEqual, 1536669060000) }) + Convey("bucket bounds should be correct", func() { + So(res.Series[0].Name, ShouldEqual, "0") + So(res.Series[1].Name, ShouldEqual, "1") + So(res.Series[2].Name, ShouldEqual, "2") + So(res.Series[3].Name, ShouldEqual, "4") + So(res.Series[4].Name, ShouldEqual, "8") + }) + Convey("value should be correct", func() { So(res.Series[8].Points[0][0].Float64, ShouldEqual, 1) So(res.Series[9].Points[0][0].Float64, ShouldEqual, 1) @@ -383,6 +391,45 @@ func TestStackdriver(t *testing.T) { }) }) + Convey("when data from query is distribution with explicit bounds", func() { + data, err := loadTestFile("./test-data/4-series-response-distribution-explicit.json") + So(err, ShouldBeNil) + So(len(data.TimeSeries), ShouldEqual, 1) + + res := &tsdb.QueryResult{Meta: simplejson.New(), RefId: "A"} + query := &StackdriverQuery{AliasBy: "{{bucket}}"} + err = executor.parseResponse(res, data, query) + So(err, ShouldBeNil) + + So(len(res.Series), ShouldEqual, 33) + for i := 0; i < 33; i++ { + if i == 0 { + So(res.Series[i].Name, ShouldEqual, "0") + } + So(len(res.Series[i].Points), ShouldEqual, 2) + } + + Convey("timestamps should be in ascending order", func() { + So(res.Series[0].Points[0][1].Float64, ShouldEqual, 1550859086000) + So(res.Series[0].Points[1][1].Float64, ShouldEqual, 1550859146000) + }) + + Convey("bucket bounds should be correct", func() { + So(res.Series[0].Name, ShouldEqual, "0") + So(res.Series[1].Name, ShouldEqual, "0.01") + So(res.Series[2].Name, ShouldEqual, "0.05") + So(res.Series[3].Name, ShouldEqual, "0.1") + }) + + Convey("value should be correct", func() { + So(res.Series[8].Points[0][0].Float64, ShouldEqual, 381) + So(res.Series[9].Points[0][0].Float64, ShouldEqual, 212) + So(res.Series[10].Points[0][0].Float64, ShouldEqual, 56) + So(res.Series[8].Points[1][0].Float64, ShouldEqual, 375) + So(res.Series[9].Points[1][0].Float64, ShouldEqual, 213) + So(res.Series[10].Points[1][0].Float64, ShouldEqual, 56) + }) + }) }) Convey("when interpolating filter wildcards", func() { diff --git a/pkg/tsdb/stackdriver/test-data/3-series-response-distribution.json b/pkg/tsdb/stackdriver/test-data/3-series-response-distribution-exponential.json similarity index 100% rename from pkg/tsdb/stackdriver/test-data/3-series-response-distribution.json rename to pkg/tsdb/stackdriver/test-data/3-series-response-distribution-exponential.json diff --git a/pkg/tsdb/stackdriver/test-data/4-series-response-distribution-explicit.json b/pkg/tsdb/stackdriver/test-data/4-series-response-distribution-explicit.json new file mode 100644 index 00000000000..98435294762 --- /dev/null +++ b/pkg/tsdb/stackdriver/test-data/4-series-response-distribution-explicit.json @@ -0,0 +1,209 @@ +{ + "timeSeries": [ + { + "metric": { + "type": "custom.googleapis.com\/opencensus\/grpc.io\/client\/roundtrip_latency" + }, + "resource": { + "type": "global", + "labels": { + "project_id": "grafana-demo" + } + }, + "metricKind": "DELTA", + "valueType": "DISTRIBUTION", + "points": [ + { + "interval": { + "startTime": "2019-02-22T18:11:26Z", + "endTime": "2019-02-22T18:12:26Z" + }, + "value": { + "distributionValue": { + "count": "1878", + "mean": 17.813718392255, + "sumOfSquaredDeviation": 7141630.651914, + "bucketOptions": { + "explicitBuckets": { + "bounds": [ + 0, + 0.01, + 0.05, + 0.1, + 0.3, + 0.6, + 0.8, + 1, + 2, + 3, + 4, + 5, + 6, + 8, + 10, + 13, + 16, + 20, + 25, + 30, + 40, + 50, + 65, + 80, + 100, + 130, + 160, + 200, + 250, + 300, + 400, + 500, + 650, + 800, + 1000, + 2000, + 5000, + 10000, + 20000, + 50000, + 100000 + ] + } + }, + "bucketCounts": [ + "0", + "0", + "0", + "0", + "8", + "403", + "297", + "184", + "375", + "213", + "56", + "31", + "15", + "13", + "4", + "1", + "5", + "2", + "8", + "13", + "26", + "13", + "45", + "48", + "61", + "10", + "3", + "6", + "7", + "4", + "7", + "12", + "8" + ] + } + } + }, + { + "interval": { + "startTime": "2019-02-22T18:10:26Z", + "endTime": "2019-02-22T18:11:26Z" + }, + "value": { + "distributionValue": { + "count": "1887", + "mean": 17.654277577766, + "sumOfSquaredDeviation": 7082587.2133073, + "bucketOptions": { + "explicitBuckets": { + "bounds": [ + 0, + 0.01, + 0.05, + 0.1, + 0.3, + 0.6, + 0.8, + 1, + 2, + 3, + 4, + 5, + 6, + 8, + 10, + 13, + 16, + 20, + 25, + 30, + 40, + 50, + 65, + 80, + 100, + 130, + 160, + 200, + 250, + 300, + 400, + 500, + 650, + 800, + 1000, + 2000, + 5000, + 10000, + 20000, + 50000, + 100000 + ] + } + }, + "bucketCounts": [ + "0", + "0", + "0", + "0", + "8", + "404", + "298", + "187", + "381", + "212", + "56", + "31", + "15", + "14", + "4", + "1", + "4", + "2", + "9", + "13", + "24", + "13", + "46", + "46", + "61", + "11", + "3", + "6", + "7", + "5", + "7", + "11", + "8" + ] + } + } + } + ] + } + ] +} diff --git a/pkg/tsdb/stackdriver/types.go b/pkg/tsdb/stackdriver/types.go index 3821ce7ceda..e4ede41d269 100644 --- a/pkg/tsdb/stackdriver/types.go +++ b/pkg/tsdb/stackdriver/types.go @@ -26,7 +26,7 @@ type StackdriverBucketOptions struct { Scale float64 `json:"scale"` } `json:"exponentialBuckets"` ExplicitBuckets *struct { - Bounds []int64 `json:"bounds"` + Bounds []float64 `json:"bounds"` } `json:"explicitBuckets"` } From 35fc0c532994159f5200e4e2a6906175c16f3a35 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Sat, 23 Feb 2019 15:52:40 +0100 Subject: [PATCH 57/70] stackdriver: change reducer mapping for distribution metrics - Distribution metrics are now mapped to more reducers when the metric kind is cumulative. - The witdth of the metrics dropdown is now much wider. - Changed the text from Select Aggregation to Select Reducer to line up with the UI in Stackdriver. --- .../stackdriver/components/Aggregations.test.tsx | 3 ++- .../datasource/stackdriver/components/Aggregations.tsx | 2 +- .../datasource/stackdriver/components/Metrics.tsx | 2 +- .../__snapshots__/Aggregations.test.tsx.snap | 2 +- .../components/__snapshots__/QueryEditor.test.tsx.snap | 4 ++-- public/app/plugins/datasource/stackdriver/constants.ts | 10 +++++----- 6 files changed, 12 insertions(+), 11 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx index 2402cc5da2c..5b14fa73a72 100644 --- a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx @@ -49,7 +49,8 @@ describe('Aggregations', () => { }); it('', () => { const options = wrapper.state().aggOptions[0].options; - expect(options.length).toEqual(5); + + expect(options.length).toEqual(10); expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE'])); }); }); diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx index c616d55ba7a..9b8dca01151 100644 --- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx @@ -73,7 +73,7 @@ export class Aggregations extends React.Component { value={crossSeriesReducer} variables={templateSrv.variables} options={aggOptions} - placeholder="Select Aggregation" + placeholder="Select Reducer" className="width-15" />
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx index 06094d0c1e9..a09b6108370 100644 --- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx @@ -185,7 +185,7 @@ export class Metrics extends React.Component { }, ]} placeholder="Select Metric" - className="width-15" + className="width-26" />
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap index defd8ef01a4..ed9fe98bbf8 100644 --- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap +++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap @@ -28,7 +28,7 @@ Array [
- Select Aggregation + Select Reducer
- Select Aggregation + Select Reducer
Date: Sat, 23 Feb 2019 23:35:26 +0100 Subject: [PATCH 58/70] moves metric package to /infra ref #14679 --- pkg/api/admin_users.go | 2 +- pkg/api/dashboard.go | 2 +- pkg/api/dashboard_snapshot.go | 2 +- pkg/api/dataproxy.go | 2 +- pkg/api/login.go | 2 +- pkg/api/login_oauth.go | 2 +- pkg/api/org.go | 2 +- pkg/api/org_invite.go | 2 +- pkg/api/search.go | 2 +- pkg/api/signup.go | 2 +- pkg/cmd/grafana-server/main.go | 2 +- pkg/cmd/grafana-server/server.go | 2 +- pkg/{ => infra}/metrics/graphitebridge/graphite.go | 0 pkg/{ => infra}/metrics/graphitebridge/graphite_test.go | 0 pkg/{ => infra}/metrics/metrics.go | 0 pkg/{ => infra}/metrics/service.go | 2 +- pkg/{ => infra}/metrics/settings.go | 2 +- pkg/infra/usagestats/usage_stats.go | 2 +- pkg/middleware/request_metrics.go | 2 +- pkg/services/alerting/eval_handler.go | 2 +- pkg/services/alerting/notifier.go | 2 +- pkg/services/alerting/reader.go | 2 +- pkg/services/alerting/result_handler.go | 2 +- pkg/services/sqlstore/dashboard.go | 2 +- pkg/services/sqlstore/datasource.go | 2 +- pkg/tsdb/cloudwatch/cloudwatch.go | 2 +- pkg/tsdb/cloudwatch/metric_find_query.go | 2 +- 27 files changed, 24 insertions(+), 24 deletions(-) rename pkg/{ => infra}/metrics/graphitebridge/graphite.go (100%) rename pkg/{ => infra}/metrics/graphitebridge/graphite_test.go (100%) rename pkg/{ => infra}/metrics/metrics.go (100%) rename pkg/{ => infra}/metrics/service.go (94%) rename pkg/{ => infra}/metrics/settings.go (96%) diff --git a/pkg/api/admin_users.go b/pkg/api/admin_users.go index efc760d2b51..c16c2f126f8 100644 --- a/pkg/api/admin_users.go +++ b/pkg/api/admin_users.go @@ -3,7 +3,7 @@ package api import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/util" ) diff --git a/pkg/api/dashboard.go b/pkg/api/dashboard.go index 20d717ef8fa..f1ad935e621 100644 --- a/pkg/api/dashboard.go +++ b/pkg/api/dashboard.go @@ -13,8 +13,8 @@ import ( "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/dashdiffs" "github.com/grafana/grafana/pkg/components/simplejson" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/plugins" "github.com/grafana/grafana/pkg/services/guardian" diff --git a/pkg/api/dashboard_snapshot.go b/pkg/api/dashboard_snapshot.go index ca7e78a58cd..ba4a09f6f01 100644 --- a/pkg/api/dashboard_snapshot.go +++ b/pkg/api/dashboard_snapshot.go @@ -10,7 +10,7 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/simplejson" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/guardian" "github.com/grafana/grafana/pkg/setting" diff --git a/pkg/api/dataproxy.go b/pkg/api/dataproxy.go index 5cde0efd0b4..54a744fccdc 100644 --- a/pkg/api/dataproxy.go +++ b/pkg/api/dataproxy.go @@ -2,7 +2,7 @@ package api import ( "github.com/grafana/grafana/pkg/api/pluginproxy" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/plugins" ) diff --git a/pkg/api/login.go b/pkg/api/login.go index 106a48dd6a8..1445463852b 100644 --- a/pkg/api/login.go +++ b/pkg/api/login.go @@ -7,9 +7,9 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/login" - "github.com/grafana/grafana/pkg/metrics" "github.com/grafana/grafana/pkg/middleware" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" diff --git a/pkg/api/login_oauth.go b/pkg/api/login_oauth.go index 87a8ecc876f..7d9537b4790 100644 --- a/pkg/api/login_oauth.go +++ b/pkg/api/login_oauth.go @@ -16,9 +16,9 @@ import ( "golang.org/x/oauth2" "github.com/grafana/grafana/pkg/bus" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/login" - "github.com/grafana/grafana/pkg/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/social" diff --git a/pkg/api/org.go b/pkg/api/org.go index 8d0d48bad13..07122ecd6ca 100644 --- a/pkg/api/org.go +++ b/pkg/api/org.go @@ -3,7 +3,7 @@ package api import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/util" diff --git a/pkg/api/org_invite.go b/pkg/api/org_invite.go index 835b03a2cc9..86067cd7721 100644 --- a/pkg/api/org_invite.go +++ b/pkg/api/org_invite.go @@ -6,7 +6,7 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/events" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/util" diff --git a/pkg/api/search.go b/pkg/api/search.go index 8c2b708d5a2..22709bf8a6d 100644 --- a/pkg/api/search.go +++ b/pkg/api/search.go @@ -4,7 +4,7 @@ import ( "strconv" "github.com/grafana/grafana/pkg/bus" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/search" ) diff --git a/pkg/api/signup.go b/pkg/api/signup.go index fe577dd9ef9..c572ccc09f7 100644 --- a/pkg/api/signup.go +++ b/pkg/api/signup.go @@ -4,7 +4,7 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/events" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/util" diff --git a/pkg/cmd/grafana-server/main.go b/pkg/cmd/grafana-server/main.go index d371d4e91da..825d48e0076 100644 --- a/pkg/cmd/grafana-server/main.go +++ b/pkg/cmd/grafana-server/main.go @@ -14,8 +14,8 @@ import ( "time" "github.com/grafana/grafana/pkg/extensions" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" _ "github.com/grafana/grafana/pkg/services/alerting/conditions" _ "github.com/grafana/grafana/pkg/services/alerting/notifiers" "github.com/grafana/grafana/pkg/setting" diff --git a/pkg/cmd/grafana-server/server.go b/pkg/cmd/grafana-server/server.go index f663e6be895..a1db5cd4b4c 100644 --- a/pkg/cmd/grafana-server/server.go +++ b/pkg/cmd/grafana-server/server.go @@ -28,8 +28,8 @@ import ( // self registering services _ "github.com/grafana/grafana/pkg/extensions" + _ "github.com/grafana/grafana/pkg/infra/metrics" _ "github.com/grafana/grafana/pkg/infra/serverlock" - _ "github.com/grafana/grafana/pkg/metrics" _ "github.com/grafana/grafana/pkg/plugins" _ "github.com/grafana/grafana/pkg/services/alerting" _ "github.com/grafana/grafana/pkg/services/auth" diff --git a/pkg/metrics/graphitebridge/graphite.go b/pkg/infra/metrics/graphitebridge/graphite.go similarity index 100% rename from pkg/metrics/graphitebridge/graphite.go rename to pkg/infra/metrics/graphitebridge/graphite.go diff --git a/pkg/metrics/graphitebridge/graphite_test.go b/pkg/infra/metrics/graphitebridge/graphite_test.go similarity index 100% rename from pkg/metrics/graphitebridge/graphite_test.go rename to pkg/infra/metrics/graphitebridge/graphite_test.go diff --git a/pkg/metrics/metrics.go b/pkg/infra/metrics/metrics.go similarity index 100% rename from pkg/metrics/metrics.go rename to pkg/infra/metrics/metrics.go diff --git a/pkg/metrics/service.go b/pkg/infra/metrics/service.go similarity index 94% rename from pkg/metrics/service.go rename to pkg/infra/metrics/service.go index 44b83187cac..ac1d934e375 100644 --- a/pkg/metrics/service.go +++ b/pkg/infra/metrics/service.go @@ -3,8 +3,8 @@ package metrics import ( "context" + "github.com/grafana/grafana/pkg/infra/metrics/graphitebridge" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics/graphitebridge" "github.com/grafana/grafana/pkg/registry" "github.com/grafana/grafana/pkg/setting" ) diff --git a/pkg/metrics/settings.go b/pkg/infra/metrics/settings.go similarity index 96% rename from pkg/metrics/settings.go rename to pkg/infra/metrics/settings.go index 048e4134690..9b4ea4607da 100644 --- a/pkg/metrics/settings.go +++ b/pkg/infra/metrics/settings.go @@ -5,7 +5,7 @@ import ( "strings" "time" - "github.com/grafana/grafana/pkg/metrics/graphitebridge" + "github.com/grafana/grafana/pkg/infra/metrics/graphitebridge" "github.com/grafana/grafana/pkg/setting" "github.com/prometheus/client_golang/prometheus" ) diff --git a/pkg/infra/usagestats/usage_stats.go b/pkg/infra/usagestats/usage_stats.go index 9d7501b7765..77951d1c899 100644 --- a/pkg/infra/usagestats/usage_stats.go +++ b/pkg/infra/usagestats/usage_stats.go @@ -9,7 +9,7 @@ import ( "strings" "time" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/plugins" "github.com/grafana/grafana/pkg/setting" diff --git a/pkg/middleware/request_metrics.go b/pkg/middleware/request_metrics.go index f2d71c0a0fe..4ed2c070f84 100644 --- a/pkg/middleware/request_metrics.go +++ b/pkg/middleware/request_metrics.go @@ -6,7 +6,7 @@ import ( "strings" "time" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" "gopkg.in/macaron.v1" ) diff --git a/pkg/services/alerting/eval_handler.go b/pkg/services/alerting/eval_handler.go index aa24efa77cd..097f4bcb2b6 100644 --- a/pkg/services/alerting/eval_handler.go +++ b/pkg/services/alerting/eval_handler.go @@ -5,8 +5,8 @@ import ( "strings" "time" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" ) type DefaultEvalHandler struct { diff --git a/pkg/services/alerting/notifier.go b/pkg/services/alerting/notifier.go index 59d459f122e..2ef5ebbade3 100644 --- a/pkg/services/alerting/notifier.go +++ b/pkg/services/alerting/notifier.go @@ -7,8 +7,8 @@ import ( "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/imguploader" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" "github.com/grafana/grafana/pkg/services/rendering" "github.com/grafana/grafana/pkg/setting" diff --git a/pkg/services/alerting/reader.go b/pkg/services/alerting/reader.go index 2cdbc57b41d..d9f20a21c8e 100644 --- a/pkg/services/alerting/reader.go +++ b/pkg/services/alerting/reader.go @@ -5,8 +5,8 @@ import ( "time" "github.com/grafana/grafana/pkg/bus" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" m "github.com/grafana/grafana/pkg/models" ) diff --git a/pkg/services/alerting/result_handler.go b/pkg/services/alerting/result_handler.go index ce12a8a6b96..c8e9e2dc25c 100644 --- a/pkg/services/alerting/result_handler.go +++ b/pkg/services/alerting/result_handler.go @@ -5,8 +5,8 @@ import ( "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/simplejson" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" - "github.com/grafana/grafana/pkg/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/annotations" "github.com/grafana/grafana/pkg/services/rendering" diff --git a/pkg/services/sqlstore/dashboard.go b/pkg/services/sqlstore/dashboard.go index 7ebdbfa65e7..8e1f69d1f6a 100644 --- a/pkg/services/sqlstore/dashboard.go +++ b/pkg/services/sqlstore/dashboard.go @@ -5,7 +5,7 @@ import ( "time" "github.com/grafana/grafana/pkg/bus" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/search" "github.com/grafana/grafana/pkg/util" diff --git a/pkg/services/sqlstore/datasource.go b/pkg/services/sqlstore/datasource.go index ccab1106880..1b69cce8c99 100644 --- a/pkg/services/sqlstore/datasource.go +++ b/pkg/services/sqlstore/datasource.go @@ -7,7 +7,7 @@ import ( "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/securejsondata" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" m "github.com/grafana/grafana/pkg/models" ) diff --git a/pkg/tsdb/cloudwatch/cloudwatch.go b/pkg/tsdb/cloudwatch/cloudwatch.go index 8d67fe7db8c..278025db75a 100644 --- a/pkg/tsdb/cloudwatch/cloudwatch.go +++ b/pkg/tsdb/cloudwatch/cloudwatch.go @@ -24,7 +24,7 @@ import ( "github.com/aws/aws-sdk-go/service/resourcegroupstaggingapi/resourcegroupstaggingapiiface" "github.com/grafana/grafana/pkg/components/null" "github.com/grafana/grafana/pkg/components/simplejson" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" ) type CloudWatchExecutor struct { diff --git a/pkg/tsdb/cloudwatch/metric_find_query.go b/pkg/tsdb/cloudwatch/metric_find_query.go index ddda26dfd24..cb95d39d82d 100644 --- a/pkg/tsdb/cloudwatch/metric_find_query.go +++ b/pkg/tsdb/cloudwatch/metric_find_query.go @@ -17,7 +17,7 @@ import ( "github.com/aws/aws-sdk-go/service/ec2" "github.com/aws/aws-sdk-go/service/resourcegroupstaggingapi" "github.com/grafana/grafana/pkg/components/simplejson" - "github.com/grafana/grafana/pkg/metrics" + "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/tsdb" ) From e76655df43c59f43fc1d4f38ef9170281c20d25f Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Sun, 24 Feb 2019 21:55:17 +0100 Subject: [PATCH 59/70] graph: fixes click after scroll in series override menu Makes changes to dropdown-typeahead2 so that a css class for the button can be passed in. Means it can be used instead of dropdown-typeahead. Switches to using dropdown-typeahead2 for series_overrides directive and for the influxdb, mysql and postgres datasources as it already contains a fix for this issue. This commit also fixes the index property which was set using an incorrectly spelled length property in the series_overrides directive. Closes #15621 --- .../app/core/directives/dropdown_typeahead.ts | 8 +- .../influxdb/partials/query.editor.html | 226 +++++++++----- .../mysql/partials/query.editor.html | 6 +- .../postgres/partials/query.editor.html | 6 +- .../panel/graph/series_overrides_ctrl.ts | 2 +- .../app/plugins/panel/graph/tab_display.html | 294 +++++++++++------- 6 files changed, 356 insertions(+), 186 deletions(-) diff --git a/public/app/core/directives/dropdown_typeahead.ts b/public/app/core/directives/dropdown_typeahead.ts index 8bd2d4a3af6..7456df8de53 100644 --- a/public/app/core/directives/dropdown_typeahead.ts +++ b/public/app/core/directives/dropdown_typeahead.ts @@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) { ''; const buttonTemplate = - ''; @@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) { menuItems: '=dropdownTypeahead2', dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect', model: '=ngModel', + buttonTemplateClass: '@', }, link: ($scope, elem, attrs) => { const $input = $(inputTemplate); + + if (!$scope.buttonTemplateClass) { + $scope.buttonTemplateClass = 'gf-form-input'; + } + const $button = $(buttonTemplate); const timeoutId = { blur: null, diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index 658cf18daee..ba99b396e6e 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -1,19 +1,38 @@ - -
+
- +
- +
-
+
- +
@@ -21,108 +40,154 @@
-
+
+
+
+ -
-
- + + +
- - -
+
+ +
-
- -
+
+ +
-
- -
+
+
+
+
-
-
-
-
+
+
+ +
-
-
- -
+
+ + +
-
- - -
+
+ +
-
- -
+
+
+
+
-
-
-
-
+
+
+ -
-
- + + +
- - -
+
+ +
-
- -
- -
-
-
-
+
+
+
+
- +
-
-
+
+
- +
-
-
+
+
- +
-
-
+
+
- +
@@ -133,7 +198,12 @@
- +
@@ -141,15 +211,21 @@
-
+
- +
- diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html index 0cb47061a9e..25f33b6a534 100644 --- a/public/app/plugins/datasource/mysql/partials/query.editor.html +++ b/public/app/plugins/datasource/mysql/partials/query.editor.html @@ -45,8 +45,10 @@
diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html index b5e2b5d87ed..5411427cfe6 100644 --- a/public/app/plugins/datasource/postgres/partials/query.editor.html +++ b/public/app/plugins/datasource/postgres/partials/query.editor.html @@ -45,8 +45,10 @@
diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.ts b/public/app/plugins/panel/graph/series_overrides_ctrl.ts index 90d61a362ab..fdb8f06c270 100644 --- a/public/app/plugins/panel/graph/series_overrides_ctrl.ts +++ b/public/app/plugins/panel/graph/series_overrides_ctrl.ts @@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { const option = { text: name, propertyName: propertyName, - index: $scope.overrideMenu.lenght, + index: $scope.overrideMenu.length, values: values, submenu: _.map(values, value => { return { text: String(value), value: value }; diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html index 976b9bcc940..a6287922cfe 100644 --- a/public/app/plugins/panel/graph/tab_display.html +++ b/public/app/plugins/panel/graph/tab_display.html @@ -1,110 +1,194 @@ +
+
+
Draw Modes
+ + + +
+
+
Mode Options
+
+ +
+ +
+
+
+ +
+ +
+
+ + +
+ +
+ +
+
+
+
+
Hover tooltip
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
-
-
-
Draw Modes
- - - -
-
-
Mode Options
-
- -
- -
-
-
- -
- -
-
- - -
- -
- -
-
-
-
-
Hover tooltip
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
+
+
Stacking & Null value
+ + + + +
+ +
+ +
+
+
+
-
-
Stacking & Null value
- - - - -
- -
- -
-
-
-
+
+
+
+ +
+
+ +
+
+ +
-
-
-
- -
-
- -
-
- -
+
+ + +
-
- - -
- -
-
-
- -
- -
-
-
- -
-
+
+
+
+
+ +
+
+
+ +
+
From 9efe7674d6155f2dae5f4ca52a3452f66b9596cc Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Mon, 25 Feb 2019 02:44:36 +0100 Subject: [PATCH 60/70] changelog: adds notes for #14509 and #15179 --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fea588259f..dee2adcab4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Unreleased +# 6.0.0 stable (unreleased) + +### Bug Fixes +* **Stackdriver**: fix for float64 bounds for distribution metrics [#14509](https://github.com/grafana/grafana/issues/14509) +* **Stackdriver**: no reducers available for distribution type [#15179](https://github.com/grafana/grafana/issues/15179) + # 6.0.0-beta3 (2019-02-19) ### Minor From 26dcabc2dc6b50abf641c2b20f97d315cce99e16 Mon Sep 17 00:00:00 2001 From: Leonard Gram Date: Mon, 25 Feb 2019 13:00:18 +0100 Subject: [PATCH 61/70] Update CHANGELOG.md --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index dee2adcab4d..2c6aaff5444 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ ### Bug Fixes * **Stackdriver**: fix for float64 bounds for distribution metrics [#14509](https://github.com/grafana/grafana/issues/14509) * **Stackdriver**: no reducers available for distribution type [#15179](https://github.com/grafana/grafana/issues/15179) +* **Dashboard**: fixes click after scroll in series override menu [#15621](https://github.com/grafana/grafana/issues/15621) +* **MySQL**: fix mysql query using _interval_ms variable throws error [#14507](https://github.com/grafana/grafana/issues/14507) # 6.0.0-beta3 (2019-02-19) From 0c67194b455a176f132e4139d72415741f897d26 Mon Sep 17 00:00:00 2001 From: bergquist Date: Sat, 23 Feb 2019 23:24:27 +0100 Subject: [PATCH 62/70] moves tracing packge into /infra --- pkg/cmd/grafana-server/server.go | 2 +- pkg/{ => infra}/tracing/tracing.go | 0 pkg/{ => infra}/tracing/tracing_test.go | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename pkg/{ => infra}/tracing/tracing.go (100%) rename pkg/{ => infra}/tracing/tracing_test.go (100%) diff --git a/pkg/cmd/grafana-server/server.go b/pkg/cmd/grafana-server/server.go index a1db5cd4b4c..e27db3d874d 100644 --- a/pkg/cmd/grafana-server/server.go +++ b/pkg/cmd/grafana-server/server.go @@ -30,6 +30,7 @@ import ( _ "github.com/grafana/grafana/pkg/extensions" _ "github.com/grafana/grafana/pkg/infra/metrics" _ "github.com/grafana/grafana/pkg/infra/serverlock" + _ "github.com/grafana/grafana/pkg/infra/tracing" _ "github.com/grafana/grafana/pkg/plugins" _ "github.com/grafana/grafana/pkg/services/alerting" _ "github.com/grafana/grafana/pkg/services/auth" @@ -39,7 +40,6 @@ import ( _ "github.com/grafana/grafana/pkg/services/rendering" _ "github.com/grafana/grafana/pkg/services/search" _ "github.com/grafana/grafana/pkg/services/sqlstore" - _ "github.com/grafana/grafana/pkg/tracing" ) func NewGrafanaServer() *GrafanaServerImpl { diff --git a/pkg/tracing/tracing.go b/pkg/infra/tracing/tracing.go similarity index 100% rename from pkg/tracing/tracing.go rename to pkg/infra/tracing/tracing.go diff --git a/pkg/tracing/tracing_test.go b/pkg/infra/tracing/tracing_test.go similarity index 100% rename from pkg/tracing/tracing_test.go rename to pkg/infra/tracing/tracing_test.go From 60fef31748fde5e97f34dc7b01b817282ee46535 Mon Sep 17 00:00:00 2001 From: bergquist Date: Sat, 23 Feb 2019 23:39:05 +0100 Subject: [PATCH 63/70] moves social package to /login ref #14679 --- pkg/api/login_oauth.go | 2 +- pkg/cmd/grafana-server/server.go | 2 +- pkg/infra/usagestats/service.go | 2 +- pkg/{ => login}/social/common.go | 0 pkg/{ => login}/social/generic_oauth.go | 0 pkg/{ => login}/social/github_oauth.go | 0 pkg/{ => login}/social/gitlab_oauth.go | 0 pkg/{ => login}/social/google_oauth.go | 0 pkg/{ => login}/social/grafana_com_oauth.go | 0 pkg/{ => login}/social/social.go | 0 10 files changed, 3 insertions(+), 3 deletions(-) rename pkg/{ => login}/social/common.go (100%) rename pkg/{ => login}/social/generic_oauth.go (100%) rename pkg/{ => login}/social/github_oauth.go (100%) rename pkg/{ => login}/social/gitlab_oauth.go (100%) rename pkg/{ => login}/social/google_oauth.go (100%) rename pkg/{ => login}/social/grafana_com_oauth.go (100%) rename pkg/{ => login}/social/social.go (100%) diff --git a/pkg/api/login_oauth.go b/pkg/api/login_oauth.go index 7d9537b4790..a4c4a064226 100644 --- a/pkg/api/login_oauth.go +++ b/pkg/api/login_oauth.go @@ -19,9 +19,9 @@ import ( "github.com/grafana/grafana/pkg/infra/metrics" "github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/login" + "github.com/grafana/grafana/pkg/login/social" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" - "github.com/grafana/grafana/pkg/social" ) var ( diff --git a/pkg/cmd/grafana-server/server.go b/pkg/cmd/grafana-server/server.go index a1db5cd4b4c..b4f0fa3a2d2 100644 --- a/pkg/cmd/grafana-server/server.go +++ b/pkg/cmd/grafana-server/server.go @@ -16,9 +16,9 @@ import ( "github.com/grafana/grafana/pkg/api/routing" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/login" + "github.com/grafana/grafana/pkg/login/social" "github.com/grafana/grafana/pkg/middleware" "github.com/grafana/grafana/pkg/registry" - "github.com/grafana/grafana/pkg/social" "golang.org/x/sync/errgroup" diff --git a/pkg/infra/usagestats/service.go b/pkg/infra/usagestats/service.go index c2bf0d06349..ccebf6a17f4 100644 --- a/pkg/infra/usagestats/service.go +++ b/pkg/infra/usagestats/service.go @@ -5,8 +5,8 @@ import ( "time" "github.com/grafana/grafana/pkg/bus" + "github.com/grafana/grafana/pkg/login/social" "github.com/grafana/grafana/pkg/services/sqlstore" - "github.com/grafana/grafana/pkg/social" "github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/registry" diff --git a/pkg/social/common.go b/pkg/login/social/common.go similarity index 100% rename from pkg/social/common.go rename to pkg/login/social/common.go diff --git a/pkg/social/generic_oauth.go b/pkg/login/social/generic_oauth.go similarity index 100% rename from pkg/social/generic_oauth.go rename to pkg/login/social/generic_oauth.go diff --git a/pkg/social/github_oauth.go b/pkg/login/social/github_oauth.go similarity index 100% rename from pkg/social/github_oauth.go rename to pkg/login/social/github_oauth.go diff --git a/pkg/social/gitlab_oauth.go b/pkg/login/social/gitlab_oauth.go similarity index 100% rename from pkg/social/gitlab_oauth.go rename to pkg/login/social/gitlab_oauth.go diff --git a/pkg/social/google_oauth.go b/pkg/login/social/google_oauth.go similarity index 100% rename from pkg/social/google_oauth.go rename to pkg/login/social/google_oauth.go diff --git a/pkg/social/grafana_com_oauth.go b/pkg/login/social/grafana_com_oauth.go similarity index 100% rename from pkg/social/grafana_com_oauth.go rename to pkg/login/social/grafana_com_oauth.go diff --git a/pkg/social/social.go b/pkg/login/social/social.go similarity index 100% rename from pkg/social/social.go rename to pkg/login/social/social.go From 38a116d0f774d9c486167cd780f44fbec8e22fdd Mon Sep 17 00:00:00 2001 From: Leonard Gram Date: Mon, 25 Feb 2019 15:45:35 +0100 Subject: [PATCH 64/70] docs: grafana 6.0 has been released. --- docs/sources/guides/whats-new-in-v6-0.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/sources/guides/whats-new-in-v6-0.md b/docs/sources/guides/whats-new-in-v6-0.md index c7091fd855e..24a32311954 100644 --- a/docs/sources/guides/whats-new-in-v6-0.md +++ b/docs/sources/guides/whats-new-in-v6-0.md @@ -14,8 +14,6 @@ weight = -11 This update to Grafana introduces a new way of exploring your data, support for log data and tons of other features. -Grafana v6.0 is out in **Beta**, [Download Now!](https://grafana.com/grafana/download/beta) - The main highlights are: - [Explore]({{< relref "#explore" >}}) - A new query focused workflow for ad-hoc data exploration and troubleshooting. From e1d27bd79afd1cc76e84bdcfdc3beb8de488de49 Mon Sep 17 00:00:00 2001 From: Leonard Gram Date: Mon, 25 Feb 2019 16:24:02 +0100 Subject: [PATCH 65/70] Update CHANGELOG.md --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c6aaff5444..d67030873c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,4 @@ -# Unreleased - -# 6.0.0 stable (unreleased) +# 6.0.0 stable (2019-02-25) ### Bug Fixes * **Stackdriver**: fix for float64 bounds for distribution metrics [#14509](https://github.com/grafana/grafana/issues/14509) From 3c3e06515e0e91b9319de57ec1021f93482aa3c5 Mon Sep 17 00:00:00 2001 From: Leonard Gram Date: Mon, 25 Feb 2019 17:09:49 +0100 Subject: [PATCH 66/70] Updated latest.json with 6.0 --- latest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/latest.json b/latest.json index dc83446f588..7e69b431a4d 100644 --- a/latest.json +++ b/latest.json @@ -1,4 +1,4 @@ { - "stable": "5.4.3", - "testing": "5.4.3" + "stable": "6.0.0", + "testing": "6.0.0" } From c04395ce3a6e856380d9488c8fed39cc079cb8cc Mon Sep 17 00:00:00 2001 From: Leonard Gram Date: Mon, 25 Feb 2019 19:25:47 +0100 Subject: [PATCH 67/70] docs: 6.0 whats new --- docs/sources/guides/whats-new-in-v6-0.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/sources/guides/whats-new-in-v6-0.md b/docs/sources/guides/whats-new-in-v6-0.md index 24a32311954..7c61df1c3c4 100644 --- a/docs/sources/guides/whats-new-in-v6-0.md +++ b/docs/sources/guides/whats-new-in-v6-0.md @@ -105,9 +105,9 @@ continue to refine and start using in other panels. ### React Panels & Query Editors A major part of all the work that has gone into Grafana v6.0 has been on the migration to React. This investment -is part of the future proofing of Grafana and it's code base and ecosystem. Starting in v6.0 **Panels** and **Data +is part of the future proofing of Grafana's code base and ecosystem. Starting in v6.0 **Panels** and **Data source** plugins can be written in React using our published `@grafana/ui` sdk library. More information on this -will be shared closer to or just after release. +will be shared soon. {{< docs-imagebox img="/img/docs/v60/react_panels.png" max-width="600px" caption="React Panel" >}}
@@ -120,7 +120,7 @@ To get started read the guide: [Using Google Stackdriver in Grafana](/features/d ## Azure Monitor Datasource -One of the goals of the Grafana v6.0 release is to add support for the three major clouds. Amazon Cloudwatch has been a core datasource for years and Google Stackdriver is also now supported. We developed an external plugin for Azure Monitor last year and for this release the [plugin](https://grafana.com/plugins/grafana-azure-monitor-datasource) is being moved into Grafana to be one of the built-in datasources. For users of the external plugin, Grafana will automatically start using the built-in version. As a core datasource, the Azure Monitor datasource will get alerting support for the official 6.0 release. +One of the goals of the Grafana v6.0 release is to add support for the three major clouds. Amazon Cloudwatch has been a core datasource for years and Google Stackdriver is also now supported. We developed an external plugin for Azure Monitor last year and for this release the [plugin](https://grafana.com/plugins/grafana-azure-monitor-datasource) is being moved into Grafana to be one of the built-in datasources. For users of the external plugin, Grafana will automatically start using the built-in version. As a core datasource, the Azure Monitor datasource is able to get alerting support, in the 6.0 release alerting is supported for the Azure Monitor service, with the rest to follow. The Azure Monitor datasource integrates four Azure services with Grafana - Azure Monitor, Azure Log Analytics, Azure Application Insights and Azure Application Insights Analytics. From 1bffde57e35ece5b64532fc0d34cff685bcc777d Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 26 Feb 2019 09:22:21 -0800 Subject: [PATCH 68/70] Need this to be available for plugins --- packages/grafana-ui/src/utils/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts index 52a8535f9e1..c5f4b2c5b1b 100644 --- a/packages/grafana-ui/src/utils/index.ts +++ b/packages/grafana-ui/src/utils/index.ts @@ -2,3 +2,4 @@ export * from './processTimeSeries'; export * from './valueFormats/valueFormats'; export * from './colors'; export * from './namedColorsPalette'; +export { getMappedValue } from './valueMappings'; From 8bdf2111c49e3aa3df1de38cb6810f865594f8cf Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 26 Feb 2019 11:51:52 -0800 Subject: [PATCH 69/70] Bumping grafana ui version (#15669) grafana/ui 6.0.1-alpha.0 release version bump --- packages/grafana-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 2c4db3e30af..6c28c8abbd3 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -1,6 +1,6 @@ { "name": "@grafana/ui", - "version": "6.0.0-alpha.0", + "version": "6.0.1-alpha.0", "description": "Grafana Components Library", "keywords": [ "typescript", From 539333bb0159d0d7bafc6ccb0c61acd975e15608 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Tue, 26 Feb 2019 14:21:46 -0800 Subject: [PATCH 70/70] Explore: Enable click on name label - click on the name label in a prometheus table was disabled - it was disabled because every query used to have a metric which is no longer true - this change enables it --- .../app/plugins/datasource/prometheus/result_transformer.ts | 2 +- .../datasource/prometheus/specs/result_transformer.test.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/result_transformer.ts b/public/app/plugins/datasource/prometheus/result_transformer.ts index 3c21e0c3d51..c3fbd7ee1d7 100644 --- a/public/app/plugins/datasource/prometheus/result_transformer.ts +++ b/public/app/plugins/datasource/prometheus/result_transformer.ts @@ -100,7 +100,7 @@ export class ResultTransformer { table.columns.push({ text: 'Time', type: 'time' }); _.each(sortedLabels, (label, labelIndex) => { metricLabels[label] = labelIndex + 1; - table.columns.push({ text: label, filterable: !label.startsWith('__') }); + table.columns.push({ text: label, filterable: true }); }); const valueText = resultCount > 1 || valueWithRefId ? `Value #${refId}` : 'Value'; table.columns.push({ text: valueText }); diff --git a/public/app/plugins/datasource/prometheus/specs/result_transformer.test.ts b/public/app/plugins/datasource/prometheus/specs/result_transformer.test.ts index d7e42237f8a..3c376334187 100644 --- a/public/app/plugins/datasource/prometheus/specs/result_transformer.test.ts +++ b/public/app/plugins/datasource/prometheus/specs/result_transformer.test.ts @@ -66,11 +66,12 @@ describe('Prometheus Result Transformer', () => { ]); expect(table.columns).toMatchObject([ { text: 'Time', type: 'time' }, - { text: '__name__' }, - { text: 'instance' }, + { text: '__name__', filterable: true }, + { text: 'instance', filterable: true }, { text: 'job' }, { text: 'Value' }, ]); + expect(table.columns[4].filterable).toBeUndefined(); }); it('should column title include refId if response count is more than 2', () => {