From a47183f74010b91a76b3bde71f964106980b093d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 11 Apr 2017 07:43:40 +0200 Subject: [PATCH 001/584] ux: panel title ux improvements poc --- public/app/features/panel/panel_menu.js | 12 ++++- public/sass/_variables.dark.scss | 3 +- public/sass/_variables.light.scss | 3 +- public/sass/components/_cards.scss | 2 +- public/sass/pages/_dashboard.scss | 61 +++++++++++++++++++++---- 5 files changed, 69 insertions(+), 12 deletions(-) diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 2e71fd19ff5..a78753d0944 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -11,10 +11,17 @@ function (angular, $, _, Tether) { .module('grafana.directives') .directive('panelMenu', function($compile) { var linkTemplate = - '' + + '' + '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + + '' + ' {{ctrl.timeInfo}}' + + '' + ''; function createMenuTemplate(ctrl) { @@ -100,6 +107,9 @@ function (angular, $, _, Tether) { } var showMenu = function(e) { + if (true) { + return; + } // if menu item is clicked and menu was just removed from dom ignore this event if (!$.contains(document, e.target)) { return; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8ecad9e3287..e3030df387a 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -89,7 +89,8 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- $panel-bg: $dark-2; -$panel-border: solid 1px $dark-3; +$panel-border-color: $dark-3; +$panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-menu-border: solid 1px black; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index c089be378b4..438dde22e21 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -96,7 +96,8 @@ $component-active-bg: $brand-primary !default; // ------------------------- $panel-bg: $gray-7; -$panel-border: solid 1px $gray-6; +$panel-border-color: $gray-5; +$panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-menu-border: solid 1px white; diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss index 6dba94494b1..3f17d9e94b7 100644 --- a/public/sass/components/_cards.scss +++ b/public/sass/components/_cards.scss @@ -27,7 +27,7 @@ &:nth-child(2) { border-radius: 3px 0 0 3px; - border-right: 1px solid $panel-border; + border-right: $panel-border; } &:nth-child(1) { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index beaf463fa8f..57cf74a9eb1 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -55,7 +55,7 @@ div.flot-text { .panel-title-container { min-height: 9px; - padding-top: 4px; + padding: 2px 0; cursor: pointer; word-wrap: break-word; } @@ -69,6 +69,16 @@ div.flot-text { display: block; } +.panel-title-caret { + color: $text-color-faint; + margin-left: 10px; + padding: 3px 5px; + + &:hover { + background: $dark-4; + } +} + .panel-loading { position:absolute; top: -3px; @@ -78,8 +88,43 @@ div.flot-text { .panel-header { text-align: center; + + &:hover { + background: $side-menu-bg; + + .panel-title-caret { + color: $text-color; + } + } } +.panel-dropdown-menu { + border: none; + left: 50%; + text-align: left; + transform: translateX(-50%); + background: $side-menu-bg; + box-shadow: $search-shadow; + + li a { + display: block; + white-space: nowrap; + color: $text-muted; + font-size: $font-size-sm; + padding: $spacer/2 $spacer; + border-left: 2px solid $side-menu-bg; + i { + display: inline-block; + padding-right: $spacer/2; + } + + &:hover { + @include left-brand-border-gradient(); + color: $link-color; + background: $input-label-bg; + } + } +} .panel-info-corner-inner { width: 0; @@ -181,13 +226,13 @@ div.flot-text { } } -.panel-highlight { - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8) -} - -.panel-hover-highlight { - box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5) -} +// .panel-highlight { +// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8) +// } +// +// .panel-hover-highlight { +// box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5) +// } .on-drag-hover { .panel-container { From 702978eff72e652a3e5dd99f9e53518ce10bb1be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 11 Apr 2017 10:05:30 +0200 Subject: [PATCH 002/584] ux: more work on panel menu --- public/app/core/routes/dashboard_loaders.js | 2 +- .../app/features/dashboard/row/add_panel.ts | 2 +- public/app/features/panel/all.js | 2 +- public/app/features/panel/panel_directive.ts | 2 +- public/app/features/panel/panel_header.ts | 45 +++++++++++++++++ public/app/features/panel/panel_menu.js | 6 --- public/sass/_variables.dark.scss | 2 + public/sass/_variables.light.scss | 1 + public/sass/components/_dropdown.scss | 10 ++-- public/sass/components/_row.scss | 2 +- public/sass/pages/_dashboard.scss | 49 ++++--------------- 11 files changed, 68 insertions(+), 55 deletions(-) create mode 100644 public/app/features/panel/panel_header.ts diff --git a/public/app/core/routes/dashboard_loaders.js b/public/app/core/routes/dashboard_loaders.js index 728b7e0092f..869f486fbfd 100644 --- a/public/app/core/routes/dashboard_loaders.js +++ b/public/app/core/routes/dashboard_loaders.js @@ -34,7 +34,7 @@ function (coreModule) { rows: [ { title: 'Dashboard Row', - height: '250px', + height: '350px', panels:[], isNew: true, } diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts index 1ea0cc5159e..a5cdda2fb83 100644 --- a/public/app/features/dashboard/row/add_panel.ts +++ b/public/app/features/dashboard/row/add_panel.ts @@ -78,7 +78,7 @@ export class AddPanelCtrl { } addPanel(panelPluginInfo) { - var defaultSpan = 12; + var defaultSpan = 6; var span = 12 - this.row.span; var panel = { diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index 2f978e65345..72a70a6c8d7 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -1,5 +1,5 @@ define([ - './panel_menu', + './panel_header', './panel_directive', './solo_panel_ctrl', './query_ctrl', diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 63fdba693cb..ba7e5ef0a01 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -19,7 +19,7 @@ var panelTemplate = ` -
+
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts new file mode 100644 index 00000000000..4c299d0d214 --- /dev/null +++ b/public/app/features/panel/panel_header.ts @@ -0,0 +1,45 @@ +/// + +import angular from 'angular'; +import {coreModule} from 'app/core/core'; + +var template = ` + + + {{ctrl.panel.title | interpolateTemplateVars:this}} + + + + + {{ctrl.timeInfo}} +`; + +/** @ngInject **/ +function panelHeader() { + return { + restrict: 'E', + template: template, + link: function() { + } + }; +} + +coreModule.directive('panelHeader', panelHeader); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index a78753d0944..d6e414610d4 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -16,12 +16,6 @@ function (angular, $, _, Tether) { '{{ctrl.panel.title | interpolateTemplateVars:this}}' + '' + ' {{ctrl.timeInfo}}' + - '' + ''; function createMenuTemplate(ctrl) { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index e3030df387a..57ab4d01aa9 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -192,6 +192,8 @@ $dropdownLinkColorActive: $white; $dropdownLinkBackgroundActive: $dark-4; $dropdownLinkBackgroundHover: $dark-4; +$dropdown-link-color: $gray-3; + // COMPONENT VARIABLES // -------------------------------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 438dde22e21..f6acd0a5930 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -204,6 +204,7 @@ $dropdownLinkColorActive: $link-color; $dropdownLinkBackgroundActive: $gray-6; $dropdownLinkBackgroundHover: $gray-6; +$dropdown-link-color: $gray-3; // COMPONENT VARIABLES // -------------------------------------------------- diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 7b0cbc5fd36..073825b6010 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -31,7 +31,7 @@ width: 0; height: 0; vertical-align: top; - border-top: 4px solid $black; + border-top: 4px solid $text-color-weak; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; @@ -192,7 +192,7 @@ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; - margin-top: -6px; + margin-top: 0px; margin-left: -1px; @include border-radius(0 6px 6px 6px); } @@ -218,9 +218,9 @@ height: 0; border-color: transparent; border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: darken($dropdownBackground, 20%); - margin-top: 5px; + border-width: 4px 0 4px 4px; + border-left-color: $text-color-weak; + margin-top: 4px; margin-right: -10px; } .dropdown-submenu:hover > a::after { diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 840db839607..0d91cf8074d 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -147,7 +147,7 @@ $dash-row-menu-animation-speed: 0.20s; li a { display: block; white-space: nowrap; - color: $text-muted; + color: $dropdown-link-color; font-size: $font-size-sm; padding: $spacer/2 $spacer; border-left: 2px solid $side-menu-bg; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 57cf74a9eb1..5547d449bc2 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -56,22 +56,26 @@ div.flot-text { .panel-title-container { min-height: 9px; padding: 2px 0; - cursor: pointer; + cursor: move; word-wrap: break-word; + display: block; } .panel-title { border: 0px; font-weight: $font-weight-semi-bold; position: relative; - cursor: pointer; width: 100%; display: block; } -.panel-title-caret { +.panel-menu-container { + margin-left: 8px; +} + +.panel-menu-toggle { color: $text-color-faint; - margin-left: 10px; + cursor: pointer; padding: 3px 5px; &:hover { @@ -98,18 +102,16 @@ div.flot-text { } } -.panel-dropdown-menu { +.panel-menu { border: none; - left: 50%; text-align: left; - transform: translateX(-50%); background: $side-menu-bg; box-shadow: $search-shadow; li a { display: block; white-space: nowrap; - color: $text-muted; + color: $dropdown-link-color; font-size: $font-size-sm; padding: $spacer/2 $spacer; border-left: 2px solid $side-menu-bg; @@ -195,37 +197,6 @@ div.flot-text { margin-bottom: 20px; } -.panel-menu { - z-index: 500; - position: absolute; - background: $tight-form-func-bg; - border: $panel-menu-border; - - .panel-menu-row { - white-space: nowrap; - border-bottom: $panel-menu-border; - &:last-child { - border-bottom: none; - } - } - - .panel-menu-link, .panel-menu-icon { - padding: 5px 10px; - } - - .panel-menu-link { - display: inline-block; - border-right: $panel-menu-border; - &:last-child { - border: none; - } - } - - .dropdown-menu { - text-align: left; - } -} - // .panel-highlight { // box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8) // } From 25683c688fffd3f6242eacb2ec9a43229d702bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 8 Jun 2017 16:22:51 +0200 Subject: [PATCH 003/584] ux: minor progress on panel title menu makover --- public/app/features/panel/panel_header.ts | 17 ++++++++++++++++- public/sass/_variables.dark.scss | 3 ++- public/sass/_variables.light.scss | 3 ++- public/sass/components/_view_states.scss | 1 + public/sass/pages/_dashboard.scss | 14 +++++++------- 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 4c299d0d214..359a5cc4125 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -1,5 +1,6 @@ /// +import $ from 'jquery'; import angular from 'angular'; import {coreModule} from 'app/core/core'; @@ -37,7 +38,21 @@ function panelHeader() { return { restrict: 'E', template: template, - link: function() { + link: function(scope, elem, attrs) { + + elem.click(function(evt) { + const targetClass = evt.target.className; + + if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') { + evt.stopPropagation(); + elem.find('[data-toggle=dropdown]').dropdown('toggle'); + } + + // var toggleAttribute = evt.getAttribute('data-toggle'); + // if (!toggleAttribute) { + // elem.find('[data-toggle=dropdown]').click(); + // } + }); } }; } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index ebac8eab5cc..b2b991d6b8b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -92,7 +92,8 @@ $panel-bg: $dark-2; $panel-border-color: $dark-3; $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); -$panel-menu-border: solid 1px black; +$panel-header-hover-bg: $dark-3; +$panel-header-menu-hover-bg: $dark-5; $divider-border-color: #555; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 50e39696f7f..26e3814797d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -99,7 +99,8 @@ $panel-bg: $gray-7; $panel-border-color: $gray-5; $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); -$panel-menu-border: solid 1px white; +$panel-header-hover-bg: $gray-6; +$panel-header-menu-hover-bg: $gray-4; $divider-border-color: $gray-2; diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 900c9d1489b..2a4cd62ae48 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -28,6 +28,7 @@ .panel-drop-zone .dashnav-refresh-action, .dashnav-zoom-out, + .panel-menu-container, .dashnav-action-icons, .panel-info-corner--info, .panel-info-corner--links, diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index e02ffefe5aa..a8a8726a11c 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -70,17 +70,13 @@ div.flot-text { } .panel-menu-container { - margin-left: 8px; + margin-left: 6px; } .panel-menu-toggle { color: $text-color-faint; cursor: pointer; padding: 3px 5px; - - &:hover { - background: $dark-4; - } } .panel-loading { @@ -94,11 +90,13 @@ div.flot-text { text-align: center; &:hover { - background: $side-menu-bg; + background: $panel-header-hover-bg; - .panel-title-caret { + .panel-menu-toggle { color: $text-color; + background: $panel-header-menu-hover-bg; } + } } @@ -107,6 +105,8 @@ div.flot-text { text-align: left; background: $side-menu-bg; box-shadow: $search-shadow; + top: 25px; + left: -100px; li a { display: block; From f3fe664f24ad9f39b30617d62cefcc72d4a9744d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 8 Jun 2017 16:57:37 +0200 Subject: [PATCH 004/584] ux: minor tweak to faintness of icons of panel menu caret --- public/sass/components/_row.scss | 2 +- public/sass/pages/_dashboard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 0d91cf8074d..9c61ac332f8 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -167,7 +167,7 @@ $dash-row-menu-animation-speed: 0.20s; .dash-row-menu-grip { text-align: center; font-size: 130%; - color: $text-color-faint; + color: $text-color-weak; opacity: 1; transition: $dash-row-menu-animation-speed ease-out 0.5s; width: 1rem; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index a8a8726a11c..bd4416963c6 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -74,7 +74,7 @@ div.flot-text { } .panel-menu-toggle { - color: $text-color-faint; + color: $text-color-weak; cursor: pointer; padding: 3px 5px; } From ef9fa7b0cc94d4e678116923ffbb24c6bb425bba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 8 Jun 2017 22:17:43 +0200 Subject: [PATCH 005/584] ux: very early start to new sidemenu --- public/app/core/components/navbar/navbar.html | 3 -- .../core/components/sidemenu/sidemenu.html | 2 -- public/sass/_variables.dark.scss | 9 ++++-- public/sass/_variables.light.scss | 5 ++- public/sass/_variables.scss | 2 +- public/sass/components/_navbar.scss | 21 ------------- public/sass/components/_row.scss | 4 +-- public/sass/components/_sidemenu.scss | 31 +++++++++++-------- 8 files changed, 31 insertions(+), 46 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index ea8eb21d6d6..bed1ef0e270 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -3,9 +3,6 @@ - - - diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 8aa3c6ae571..cc28175bd95 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -13,7 +13,6 @@ {{::ctrl.user.orgName}}
- + + + Find more plugins on Grafana.com + + + +
+ + +
    +
  1. + +
    +
    + + {{plugin.type}} +
    +
    + Update available! +
    +
    +
    +
    + +
    +
    +
    {{plugin.name}}
    +
    By {{plugin.info.author.name}}
    +
    +
    +     +
    2. +
+
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 6172fc77515..5eef1264aca 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -299,7 +299,7 @@ $checkboxImageUrl: '../img/checkbox.png'; $info-box-background: linear-gradient(100deg, #1a4552, #00374a); // footer -$footer-link-color: $gray-1; +$footer-link-color: $gray-2; $footer-link-hover: $gray-4; // collapse box diff --git a/public/views/index.template.html b/public/views/index.template.html index da72f16161d..e022cc4873b 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -35,44 +35,46 @@ -
-
+
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
From 08d470d76a94015287e66ff8c7a2d969d1febd74 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 29 Nov 2017 12:51:14 +0300 Subject: [PATCH 312/584] dashboard: initial repeat row implementation --- .../app/features/dashboard/dashboard_model.ts | 78 +++++++++++++------ .../features/dashboard/specs/repeat.jest.ts | 16 ++-- 2 files changed, 67 insertions(+), 27 deletions(-) diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 0e37acb201a..9481ef6d63b 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -274,7 +274,7 @@ export class DashboardModel { return sourcePanel; } - var clone = new PanelModel(sourcePanel.getSaveModel()); + let clone = new PanelModel(sourcePanel.getSaveModel()); clone.id = this.getNextPanelId(); if (sourcePanel.type === 'row') { @@ -282,7 +282,7 @@ export class DashboardModel { let rowPanels = this.getRowPanels(sourcePanelIndex); clone.panels = _.map(rowPanels, panel => panel.getSaveModel()); - // insert after preceding row's panels + // insert copied row after preceding row's panels let insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex); this.panels.splice(insertPos, 0, clone); } else { @@ -300,12 +300,12 @@ export class DashboardModel { } repeatPanel(panel: PanelModel, panelIndex: number) { - var variable = _.find(this.templating.list, {name: panel.repeat}); + let variable = _.find(this.templating.list, {name: panel.repeat}); if (!variable) { return; } - var selected; + let selected; if (variable.current.text === 'All') { selected = variable.options.slice(1, variable.options.length); } else { @@ -317,38 +317,72 @@ export class DashboardModel { let yPos = panel.gridPos.y; for (let index = 0; index < selected.length; index++) { - var option = selected[index]; - var copy = this.getPanelRepeatClone(panel, index, panelIndex); + let option = selected[index]; + let copy = this.getPanelRepeatClone(panel, index, panelIndex); copy.scopedVars = {}; copy.scopedVars[variable.name] = option; if (copy.type === 'row') { // place row below row panels - } + let rowHeight = this.getRowHeight(copy); + if (rowHeight) { + copy.gridPos.y += rowHeight * index; + let rowPanels = copy.panels; + // insert after preceding row's panels + let insertPos = panelIndex + ((rowPanels.length + 1) * index) + 1; + _.each(rowPanels, (rowPanel, i) => { + let cloneRowPanel = new PanelModel(rowPanel); + cloneRowPanel.id = this.getNextPanelId(); + cloneRowPanel.repeatIteration = this.iteration; + cloneRowPanel.repeatPanelId = rowPanel.id; + cloneRowPanel.repeat = null; + cloneRowPanel.gridPos.y += rowHeight * index; + this.panels.splice(insertPos+i, 0, cloneRowPanel); + }); + copy.panels = []; + yPos += rowHeight; - if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { - copy.gridPos.y = yPos; - yPos += copy.gridPos.h; + // Update gridPos for panels below + for (let i = insertPos+rowPanels.length; i< this.panels.length; i++) { + this.panels[i].gridPos.y += yPos; + } + } } else { - // set width based on how many are selected - // assumed the repeated panels should take up full row width - - copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth); - copy.gridPos.x = xPos; - copy.gridPos.y = yPos; - - xPos += copy.gridPos.w; - - // handle overflow by pushing down one row - if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) { - xPos = 0; + if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { + copy.gridPos.y = yPos; yPos += copy.gridPos.h; + } else { + // set width based on how many are selected + // assumed the repeated panels should take up full row width + + copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth); + copy.gridPos.x = xPos; + copy.gridPos.y = yPos; + + xPos += copy.gridPos.w; + + // handle overflow by pushing down one row + if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) { + xPos = 0; + yPos += copy.gridPos.h; + } } } } } + getRowHeight(rowPanel: PanelModel): number { + if (!rowPanel.panels || rowPanel.panels.length === 0) { + return 0; + } + const positions = _.map(rowPanel.panels, 'gridPos'); + const maxPos = _.maxBy(positions, (pos) => { + return pos.y + pos.h; + }); + return maxPos.h + 1; + } + removePanel(panel: PanelModel) { var index = _.indexOf(this.panels, panel); this.panels.splice(index, 1); diff --git a/public/app/features/dashboard/specs/repeat.jest.ts b/public/app/features/dashboard/specs/repeat.jest.ts index 2ad1400990c..7f5d382fe9c 100644 --- a/public/app/features/dashboard/specs/repeat.jest.ts +++ b/public/app/features/dashboard/specs/repeat.jest.ts @@ -1,3 +1,4 @@ +import _ from 'lodash'; import {DashboardModel} from '../dashboard_model'; jest.mock('app/core/services/context_srv', () => ({ @@ -146,7 +147,7 @@ describe('given dashboard with panel repeat in vertical direction', function() { }); }); -describe.skip('given dashboard with row repeat', function() { +describe('given dashboard with row repeat', function() { var dashboard; beforeEach(function() { @@ -177,14 +178,19 @@ describe.skip('given dashboard with row repeat', function() { }); it('should not repeat only row', function() { - expect(dashboard.panels[1].type).toBe('graph'); + const panel_types = _.map(dashboard.panels, 'type'); + expect(panel_types).toEqual([ + 'row', 'graph', 'graph', + 'row', 'graph', 'graph', + 'row', 'graph' + ]); }); - // + // it('should set scopedVars on panels', function() { // expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}}) // }); - // - // it.skip('should repeat row and panels below two times', function() { + + // it('should repeat row and panels below two times', function() { // expect(dashboard.panels).toMatchObject([ // // first (original row) // {id: 1, type: 'row', repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}}, From dd9c727e6050c515c62b5a97955b4a16c606eec5 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 29 Nov 2017 14:14:43 +0300 Subject: [PATCH 313/584] repeat row: handle collapsed rows --- .../app/features/dashboard/dashboard_model.ts | 71 +++++++++++++------ .../features/dashboard/specs/repeat.jest.ts | 56 ++++++++++++++- 2 files changed, 104 insertions(+), 23 deletions(-) diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 9481ef6d63b..cc5c743cb41 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -181,6 +181,14 @@ export class DashboardModel { if (panel.id > max) { max = panel.id; } + + if (panel.collapsed) { + for (let rowPanel of panel.panels) { + if (rowPanel.id > max) { + max = rowPanel.id; + } + } + } } return max + 1; @@ -266,6 +274,7 @@ export class DashboardModel { this.sortPanelsByGridPos(); this.events.emit('repeats-processed'); + console.log(this.panels); } getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) { @@ -279,11 +288,18 @@ export class DashboardModel { if (sourcePanel.type === 'row') { // for row clones we need to figure out panels under row to clone and where to insert clone - let rowPanels = this.getRowPanels(sourcePanelIndex); - clone.panels = _.map(rowPanels, panel => panel.getSaveModel()); - - // insert copied row after preceding row's panels - let insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex); + let rowPanels, insertPos; + if (sourcePanel.collapsed) { + rowPanels = sourcePanel.panels; + clone.panels = _.cloneDeep(rowPanels); + // insert copied row after preceding row + insertPos = sourcePanelIndex + valueIndex; + } else { + rowPanels = this.getRowPanels(sourcePanelIndex); + clone.panels = _.map(rowPanels, panel => panel.getSaveModel()); + // insert copied row after preceding row's panels + insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex); + } this.panels.splice(insertPos, 0, clone); } else { // insert after source panel + value index @@ -324,27 +340,42 @@ export class DashboardModel { copy.scopedVars[variable.name] = option; if (copy.type === 'row') { - // place row below row panels let rowHeight = this.getRowHeight(copy); if (rowHeight) { - copy.gridPos.y += rowHeight * index; + let panelsBelowIndex; let rowPanels = copy.panels; - // insert after preceding row's panels + // insert after 'row' panel let insertPos = panelIndex + ((rowPanels.length + 1) * index) + 1; - _.each(rowPanels, (rowPanel, i) => { - let cloneRowPanel = new PanelModel(rowPanel); - cloneRowPanel.id = this.getNextPanelId(); - cloneRowPanel.repeatIteration = this.iteration; - cloneRowPanel.repeatPanelId = rowPanel.id; - cloneRowPanel.repeat = null; - cloneRowPanel.gridPos.y += rowHeight * index; - this.panels.splice(insertPos+i, 0, cloneRowPanel); - }); - copy.panels = []; - yPos += rowHeight; + + if (copy.collapsed) { + copy.gridPos.y += index; + yPos += index; + panelsBelowIndex = panelIndex + index + 1; + _.each(copy.panels, (panel, i) => { + panel.id = this.getNextPanelId(); + panel.repeatIteration = this.iteration; + panel.repeatPanelId = rowPanels[i].id; + panel.repeat = null; + copy.panels[i] = panel; + }); + } else { + _.each(rowPanels, (rowPanel, i) => { + let cloneRowPanel = new PanelModel(rowPanel); + cloneRowPanel.id = this.getNextPanelId(); + cloneRowPanel.repeatIteration = this.iteration; + cloneRowPanel.repeatPanelId = rowPanel.id; + cloneRowPanel.repeat = null; + cloneRowPanel.gridPos.y += rowHeight * index; + this.panels.splice(insertPos+i, 0, cloneRowPanel); + }); + copy.panels = []; + copy.gridPos.y += rowHeight * index; + yPos += rowHeight; + panelsBelowIndex = insertPos+rowPanels.length; + } // Update gridPos for panels below - for (let i = insertPos+rowPanels.length; i< this.panels.length; i++) { + for (let i = panelsBelowIndex; i< this.panels.length; i++) { this.panels[i].gridPos.y += yPos; } } diff --git a/public/app/features/dashboard/specs/repeat.jest.ts b/public/app/features/dashboard/specs/repeat.jest.ts index 7f5d382fe9c..cb1da3e767a 100644 --- a/public/app/features/dashboard/specs/repeat.jest.ts +++ b/public/app/features/dashboard/specs/repeat.jest.ts @@ -148,10 +148,10 @@ describe('given dashboard with panel repeat in vertical direction', function() { }); describe('given dashboard with row repeat', function() { - var dashboard; + let dashboard, dashboardJSON; beforeEach(function() { - dashboard = new DashboardModel({ + dashboardJSON = { panels: [ {id: 1, type: 'row', repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}}, {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, @@ -173,7 +173,8 @@ describe('given dashboard with row repeat', function() { ] }] } - }); + }; + dashboard = new DashboardModel(dashboardJSON); dashboard.processRepeats(); }); @@ -186,6 +187,55 @@ describe('given dashboard with row repeat', function() { ]); }); + it('should repeat only row if it is collapsed', function() { + dashboardJSON.panels = [ + { + id: 1, type: 'row', collapsed: true, repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}, + panels: [ + {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, + {id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}}, + ] + }, + {id: 4, type: 'row', gridPos: {x: 0, y: 1, h: 1 , w: 24}}, + {id: 5, type: 'graph', gridPos: {x: 0, y: 2, h: 1 , w: 12}}, + ]; + dashboard = new DashboardModel(dashboardJSON); + dashboard.processRepeats(); + + const panel_types = _.map(dashboard.panels, 'type'); + expect(panel_types).toEqual([ + 'row', 'row', 'row', 'graph' + ]); + expect(dashboard.panels[0].panels).toHaveLength(2); + expect(dashboard.panels[1].panels).toHaveLength(2); + }); + + it('should assign unique ids for repeated panels', function() { + dashboardJSON.panels = [ + { + id: 1, type: 'row', collapsed: true, repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}, + panels: [ + {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, + {id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}}, + ] + }, + {id: 4, type: 'row', gridPos: {x: 0, y: 1, h: 1 , w: 24}}, + {id: 5, type: 'graph', gridPos: {x: 0, y: 2, h: 1 , w: 12}}, + ]; + dashboard = new DashboardModel(dashboardJSON); + dashboard.processRepeats(); + + const panel_ids = _.flattenDeep(_.map(dashboard.panels, (panel) => { + let ids = []; + if (panel.panels && panel.panels.length) { + ids = _.map(panel.panels, 'id'); + } + ids.push(panel.id); + return ids; + })); + expect(panel_ids.length).toEqual(_.uniq(panel_ids).length); + }); + // it('should set scopedVars on panels', function() { // expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}}) // }); From d981fe4f045f13825605c75f6946549a9f783ddd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 29 Nov 2017 13:21:42 +0100 Subject: [PATCH 314/584] ux: search design update --- public/app/core/components/search/search.html | 7 +---- public/sass/_variables.dark.scss | 4 +-- public/sass/_variables.scss | 1 + public/sass/components/_search.scss | 28 +++++++++++++++---- public/sass/layout/_page.scss | 12 ++++---- public/sass/pages/_dashboard.scss | 2 +- 6 files changed, 34 insertions(+), 20 deletions(-) diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index dff9cc6947a..e3d99501d78 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -74,15 +74,10 @@
- + {{tag}} - - - - - diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5eef1264aca..a47e8fcae48 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -51,7 +51,7 @@ $critical: #ed2e18; // Scaffolding // ------------------------- $body-bg: rgb(23,24,25); -$page-bg: $dark-2; +$page-bg: rgb(22, 23, 25); $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; @@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); // 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, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03)); +$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); // Links // ------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index f853c3e4387..19813cd6f1e 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -224,6 +224,7 @@ $side-menu-width: 60px; // dashboard $panel-margin: 10px; $dashboard-padding: $panel-margin * 2; +$panel-padding: 0px 10px 5px 10px; // tabs $tabs-padding-top: 0.6rem; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index d7b8e00ded8..0c550e42922 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -69,6 +69,7 @@ padding: $spacer; position: relative; flex-grow: 10; + margin-bottom: 1rem; .label-tag { margin-left: 6px; @@ -84,9 +85,16 @@ } } +.search-section { + background: $panel-bg; + border: $panel-border; + padding: $panel-padding; + margin-bottom: 8px; +} + .search-section__header { font-size: $font-size-h6; - padding: 0.6rem 0; + padding: 8px 0 2px 0; color: $text-color-weak; display: flex; flex-grow: 1; @@ -105,7 +113,7 @@ } .search-section__header__icon { - padding: 3px 10px; + padding: 5px 10px; } .search-section__header__toggle { @@ -170,24 +178,34 @@ } .search-item__tags { - padding: 8px; + padding: 10px; } .search-item__actions { flex: 0 0 auto; + padding: 0 10px 0 0; } .search-item__actions__item { - display: none; + display: inline-block; + opacity: 0; + width: 0; + transition: all 0.2s ease-in-out; + .fa-star, .fa-star-o { + color: $orange; + line-height: 37px; + } } .search-item:hover { .search-item__actions__item { - opacity: 0.8; + width: 15px; + opacity: 1; } } .search-button-row { text-align: center; padding: $spacer*2 $spacer; + background: $panel-bg; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 310ecd51532..e36e0301162 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -141,16 +141,16 @@ display: block; float: left; font-size: 12px; - line-height: 36px; + line-height: 30px; padding: 0 7px 0 37px; @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); position: relative; box-shadow: $card-shadow; &:first-child { - padding-left: 13px; + padding-left: 10px; border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ - font-size: 20px; + font-size: 18px; } &:first-child:before { @@ -178,11 +178,11 @@ content: ''; position: absolute; top: 0; - right: -18px; // half of square's length + right: -14px; // half of square's length // same dimension as the line-height of .breadcrumb-item - width: 36px; - height: 36px; + width: 30px; + height: 30px; transform: scale(0.707) rotate(45deg); // we need to prevent the arrows from getting buried under the next link diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 766a900ae31..45f2e673372 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -42,7 +42,7 @@ div.flot-text { } .panel-content { - padding: 0px 10px 5px 10px; + padding: $panel-padding; height: calc(100% - 27px); position: relative; overflow: hidden; From 36ef1865875b677ec3b71de822c250e10b2fc4ac Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 29 Nov 2017 16:40:13 +0300 Subject: [PATCH 315/584] repeat row: expose scopedVars to row panels --- .../app/features/dashboard/dashboard_model.ts | 121 +++++++++++------- .../features/dashboard/specs/repeat.jest.ts | 17 +++ 2 files changed, 93 insertions(+), 45 deletions(-) diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index cc5c743cb41..c54a9460c08 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -274,7 +274,6 @@ export class DashboardModel { this.sortPanelsByGridPos(); this.events.emit('repeats-processed'); - console.log(this.panels); } getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) { @@ -286,26 +285,43 @@ export class DashboardModel { let clone = new PanelModel(sourcePanel.getSaveModel()); clone.id = this.getNextPanelId(); - if (sourcePanel.type === 'row') { - // for row clones we need to figure out panels under row to clone and where to insert clone - let rowPanels, insertPos; - if (sourcePanel.collapsed) { - rowPanels = sourcePanel.panels; - clone.panels = _.cloneDeep(rowPanels); - // insert copied row after preceding row - insertPos = sourcePanelIndex + valueIndex; - } else { - rowPanels = this.getRowPanels(sourcePanelIndex); - clone.panels = _.map(rowPanels, panel => panel.getSaveModel()); - // insert copied row after preceding row's panels - insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex); + // insert after source panel + value index + this.panels.splice(sourcePanelIndex+valueIndex, 0, clone); + + clone.repeatIteration = this.iteration; + clone.repeatPanelId = sourcePanel.id; + clone.repeat = null; + return clone; + } + + getRowRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) { + // if first clone return source + if (valueIndex === 0) { + if (!sourcePanel.collapsed) { + let rowPanels = this.getRowPanels(sourcePanelIndex); + sourcePanel.panels = rowPanels; } - this.panels.splice(insertPos, 0, clone); - } else { - // insert after source panel + value index - this.panels.splice(sourcePanelIndex+valueIndex, 0, clone); + return sourcePanel; } + let clone = new PanelModel(sourcePanel.getSaveModel()); + clone.id = this.getNextPanelId(); + + // for row clones we need to figure out panels under row to clone and where to insert clone + let rowPanels, insertPos; + if (sourcePanel.collapsed) { + rowPanels = _.cloneDeep(sourcePanel.panels); + clone.panels = rowPanels; + // insert copied row after preceding row + insertPos = sourcePanelIndex + valueIndex; + } else { + rowPanels = this.getRowPanels(sourcePanelIndex); + clone.panels = _.map(rowPanels, panel => panel.getSaveModel()); + // insert copied row after preceding row's panels + insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex); + } + this.panels.splice(insertPos, 0, clone); + clone.repeatIteration = this.iteration; clone.repeatPanelId = sourcePanel.id; clone.repeat = null; @@ -334,32 +350,43 @@ export class DashboardModel { for (let index = 0; index < selected.length; index++) { let option = selected[index]; - let copy = this.getPanelRepeatClone(panel, index, panelIndex); + let copy; - copy.scopedVars = {}; - copy.scopedVars[variable.name] = option; + if (panel.type === 'row') { + copy = this.getRowRepeatClone(panel, index, panelIndex); + copy.scopedVars = {}; + copy.scopedVars[variable.name] = option; - if (copy.type === 'row') { let rowHeight = this.getRowHeight(copy); - if (rowHeight) { - let panelsBelowIndex; - let rowPanels = copy.panels; - // insert after 'row' panel - let insertPos = panelIndex + ((rowPanels.length + 1) * index) + 1; + // if (rowHeight) { + let panelsBelowIndex; + let rowPanels = copy.panels || []; + // insert after 'row' panel + let insertPos = panelIndex + ((rowPanels.length + 1) * index) + 1; - if (copy.collapsed) { - copy.gridPos.y += index; - yPos += index; - panelsBelowIndex = panelIndex + index + 1; - _.each(copy.panels, (panel, i) => { + if (copy.collapsed) { + copy.gridPos.y += index; + yPos += index; + panelsBelowIndex = panelIndex + index + 1; + + _.each(copy.panels, (panel, i) => { + panel.scopedVars = {}; + panel.scopedVars[variable.name] = option; + + if (index > 0) { panel.id = this.getNextPanelId(); panel.repeatIteration = this.iteration; panel.repeatPanelId = rowPanels[i].id; panel.repeat = null; copy.panels[i] = panel; - }); - } else { - _.each(rowPanels, (rowPanel, i) => { + } + }); + } else { + _.each(rowPanels, (rowPanel, i) => { + rowPanel.scopedVars = {}; + rowPanel.scopedVars[variable.name] = option; + + if (index > 0) { let cloneRowPanel = new PanelModel(rowPanel); cloneRowPanel.id = this.getNextPanelId(); cloneRowPanel.repeatIteration = this.iteration; @@ -367,19 +394,23 @@ export class DashboardModel { cloneRowPanel.repeat = null; cloneRowPanel.gridPos.y += rowHeight * index; this.panels.splice(insertPos+i, 0, cloneRowPanel); - }); - copy.panels = []; - copy.gridPos.y += rowHeight * index; - yPos += rowHeight; - panelsBelowIndex = insertPos+rowPanels.length; - } + } + }); + copy.panels = []; + copy.gridPos.y += rowHeight * index; + yPos += rowHeight; + panelsBelowIndex = insertPos+rowPanels.length; + } - // Update gridPos for panels below - for (let i = panelsBelowIndex; i< this.panels.length; i++) { - this.panels[i].gridPos.y += yPos; - } + // Update gridPos for panels below + for (let i = panelsBelowIndex; i< this.panels.length; i++) { + this.panels[i].gridPos.y += yPos; } } else { + copy = this.getPanelRepeatClone(panel, index, panelIndex); + copy.scopedVars = {}; + copy.scopedVars[variable.name] = option; + if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { copy.gridPos.y = yPos; yPos += copy.gridPos.h; diff --git a/public/app/features/dashboard/specs/repeat.jest.ts b/public/app/features/dashboard/specs/repeat.jest.ts index cb1da3e767a..d44c9b1d610 100644 --- a/public/app/features/dashboard/specs/repeat.jest.ts +++ b/public/app/features/dashboard/specs/repeat.jest.ts @@ -187,6 +187,23 @@ describe('given dashboard with row repeat', function() { ]); }); + it('should set scopedVars for each panel', function() { + dashboardJSON.templating.list[0].options[2].selected = true; + dashboard = new DashboardModel(dashboardJSON); + dashboard.processRepeats(); + const scopedVars = _.compact(_.map(dashboard.panels, (panel) => { + if (panel.scopedVars) { + return panel.scopedVars.apps.value; + } + })); + + expect(scopedVars).toEqual([ + 'se1', 'se1', 'se1', + 'se2', 'se2', 'se2', + 'se3', 'se3', 'se3', + ]); + }); + it('should repeat only row if it is collapsed', function() { dashboardJSON.panels = [ { From ce494fbedb688ab43d8b9b051f97ebfd47ead308 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 29 Nov 2017 14:45:12 +0100 Subject: [PATCH 316/584] Added border radius and tightened up the folder boxes. Still needs to have the bottom margin expanded to 8px when in opened state (this needs @torkelo) --- public/sass/components/_search.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 0c550e42922..9b5c08839b8 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -89,7 +89,8 @@ background: $panel-bg; border: $panel-border; padding: $panel-padding; - margin-bottom: 8px; + margin-bottom: 3px; + border-radius: 5px; } .search-section__header { From c9be5c21ae2e85bbe97ae3d37f6a435db4a20c3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 29 Nov 2017 15:26:16 +0100 Subject: [PATCH 317/584] ux: changed body default font size to 13px --- public/sass/_variables.scss | 22 +++++++++++----------- public/sass/components/_dropdown.scss | 2 +- public/sass/components/_gf-form.scss | 8 +++++++- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 19813cd6f1e..2e0bc160b84 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -86,11 +86,11 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-base: $font-family-sans-serif !default; $font-size-root: 14px !default; +$font-size-base: 13px !default; -$font-size-base: 1rem !default; -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; -$font-size-xs: .75rem !default; +$font-size-lg: 18px !default; +$font-size-sm: 12px !default; +$font-size-xs: 10px !default; $line-height-base: 1.5 !default; $font-weight-semi-bold: 500; @@ -159,9 +159,9 @@ $table-cell-padding: 4px 10px !default; $table-sm-cell-padding: .3rem !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .6rem !default; -$input-line-height: 1.35rem !default; +$input-padding-x: 10px !default; +$input-padding-y: 8px !default; +$input-line-height: 19px !default; $input-btn-border-width: 1px; $input-border-radius: 0 $border-radius $border-radius 0 !default; @@ -172,11 +172,11 @@ $label-border-radius: $border-radius 0 0 $border-radius !default; $label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; +$input-padding-x-sm: 7px !default; +$input-padding-y-sm: 4px !default; -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; +$input-padding-x-lg: 20px !default; +$input-padding-y-lg: 10px !default; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index c10c1ecd0ab..cc6007d0be4 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -18,7 +18,7 @@ position: relative; top: -3px; width: 250px; - font-size: 80%; + font-size: $font-size-sm; margin-left: 22px; color: $gray-2; white-space: normal; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 421e80f89d1..38baae3b6a0 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,5 @@ $gf-form-margin: 3px; +$input-border: 1px solid $input-border-color; .gf-form { margin-bottom: $gf-form-margin; @@ -115,7 +116,7 @@ $gf-form-margin: 3px; background-color: $input-bg; background-image: none; background-clip: padding-box; - border: 1px solid $input-border-color; + border: $input-border; @include border-radius($input-border-radius-sm); @include box-shadow($input-box-shadow); white-space: nowrap; @@ -268,6 +269,7 @@ $gf-form-margin: 3px; position: relative; background-color: $input-bg; padding-right: $input-padding-x; + border: $input-border; &::after { position: absolute; @@ -279,6 +281,10 @@ $gf-form-margin: 3px; content: '\f0d7'; pointer-events: none; } + + .gf-form-input { + border: none; + } } .gf-form-help-icon { From 3d2d789ca265056d6426ab1533d4ac42a9ca5f41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 29 Nov 2017 17:13:50 +0100 Subject: [PATCH 318/584] ux: search filter box --- public/app/core/components/search/search.html | 129 +++++++++--------- public/app/core/components/search/search.ts | 25 +--- public/sass/_variables.dark.scss | 1 + public/sass/_variables.light.scss | 1 + public/sass/_variables.scss | 4 +- public/sass/components/_gf-form.scss | 9 ++ public/sass/components/_search.scss | 40 ++++-- 7 files changed, 108 insertions(+), 101 deletions(-) diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index e3d99501d78..811e21bc64a 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -15,79 +15,74 @@ ng-blur="ctrl.searchInputBlur()" /> -
- - - - starred - | - - - tags - - - | - - - - {{tagName}} - - - -
-
-
-
-
- - - {{tag.term}}  ({{tag.count}}) - -
-
+
+
+
+
No dashboards matching your query were found.
-
-
No dashboards matching your query were found.
+
+ + + {{::section.title}} + + + -
- - - {{::section.title}} - - - + +
+
+
- -
-
+
+
+
+ + Filter by: + + Clear + +
-
- - Find dashboards on Grafana.com - -
-
+
+ + +
+ +
+ + + +
+
+ +
+ + Find dashboards on Grafana.com + +
+
+
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index c7ac381c7ce..728b6a3ee18 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -9,16 +9,18 @@ export class SearchCtrl { selectedIndex: number; results: any; currentSearchId: number; - tagsMode: boolean; showImport: boolean; dismiss: any; ignoreClose: any; isLoading: boolean; + initialFolderFilterTitle: string; /** @ngInject */ constructor($scope, private $location, private $timeout, private searchSrv: SearchSrv, $rootScope) { $rootScope.onAppEvent('show-dash-search', this.openSearch.bind(this), $scope); $rootScope.onAppEvent('hide-dash-search', this.closeSearch.bind(this), $scope); + + this.initialFolderFilterTitle = "All"; } closeSearch() { @@ -44,14 +46,6 @@ export class SearchCtrl { this.query.starred = true; } - if (payload && payload.tagsMode) { - return this.$timeout(() => { - this.ignoreClose = false; - this.giveSearchFocus = this.giveSearchFocus + 1; - this.getTags(); - }, 100); - } - this.$timeout(() => { this.ignoreClose = false; this.giveSearchFocus = this.giveSearchFocus + 1; @@ -70,14 +64,6 @@ export class SearchCtrl { this.moveSelection(-1); } if (evt.keyCode === 13) { - if (this.tagsMode) { - var tag = this.results[this.selectedIndex]; - if (tag) { - this.filterByTag(tag.term, null); - } - return; - } - var selectedDash = this.results[this.selectedIndex]; if (selectedDash) { this.$location.search({}); @@ -93,7 +79,6 @@ export class SearchCtrl { } searchDashboards() { - this.tagsMode = false; this.currentSearchId = this.currentSearchId + 1; var localSearchId = this.currentSearchId; @@ -129,12 +114,8 @@ export class SearchCtrl { getTags() { return this.searchSrv.getDashboardTags().then((results) => { - this.tagsMode = !this.tagsMode; this.results = results; this.giveSearchFocus = this.giveSearchFocus + 1; - if ( !this.tagsMode ) { - this.search(); - } }); } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index a47e8fcae48..1164f8305e0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -180,6 +180,7 @@ $input-invalid-border-color: lighten($red, 5%); // Search $search-shadow: 0 0 35px 0 $body-bg; +$search-filter-box-bg: $gray-blue; // Dropdowns // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 61c2c34962a..f33ef4debed 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -205,6 +205,7 @@ $breadcrumb-hover-hl: #d9dadd; // search $search-shadow: 0 5px 30px 0 $gray-4; +$search-filter-box-bg: $gray-4; // Dropdowns // ------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 2e0bc160b84..8b1805480b2 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -89,8 +89,8 @@ $font-size-root: 14px !default; $font-size-base: 13px !default; $font-size-lg: 18px !default; -$font-size-sm: 12px !default; -$font-size-xs: 10px !default; +$font-size-sm: 11px !default; +$font-size-xs: 9px !default; $line-height-base: 1.5 !default; $font-weight-semi-bold: 500; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 38baae3b6a0..16cb2873cbe 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -21,6 +21,15 @@ $input-border: 1px solid $input-border-color; &--flex-end { justify-content: flex-end; } + + &--alt { + flex-direction: column; + align-items: flex-start; + + .gf-form-label { + padding: 4px 0; + } + } } .gf-form-disabled { diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 9b5c08839b8..240cfe80e5d 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -6,7 +6,7 @@ top: $navbarHeight; z-index: $zindex-modal-backdrop; background-color: $black; - @include opacity(70); + @include opacity(75); } .search-container { @@ -44,12 +44,6 @@ flex-grow: 1; } -.search-switches { - flex-grow: 1; - padding: 1rem 1rem 0.75rem 1rem; - white-space: nowrap; -} - .search-field-icon { font-size: $font-size-lg; padding: 1rem 1rem 0.75rem 1.5rem; @@ -57,12 +51,38 @@ .search-dropdown { display: flex; - flex-direction: column; - max-width: 800px; - background: $page-bg; + flex-direction: row; height: calc(100% - #{$navbarHeight}); } +.search-dropdown__col_1 { + background: $page-bg; + max-width: 700px; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.search-dropdown__col_2 { + flex-grow: 1; + height: 100%; + padding-top: 16px; +} + +.search-filter-box { + background: $search-filter-box-bg; + border-radius: 2px; + padding: $spacer*1.5; + max-width: 340px; + margin-bottom: $spacer * 1.5; + margin-left: $spacer * 1.5; +} + +.search-filter-box__header { + border-bottom: 1px solid $dark-5; + margin-bottom: $spacer * 1.5; +} + .search-results-container { height: 100%; display: block; From 583a4f5314a69f44505fc1c298fe869923370b14 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 29 Nov 2017 16:41:48 -0500 Subject: [PATCH 319/584] new test svg background, minor form tweaks --- public/img/heatmap_bg_test.svg | 2334 ++++++++++++++++++++++++++++++++ public/sass/pages/_login.scss | 7 +- 2 files changed, 2339 insertions(+), 2 deletions(-) create mode 100644 public/img/heatmap_bg_test.svg diff --git a/public/img/heatmap_bg_test.svg b/public/img/heatmap_bg_test.svg new file mode 100644 index 00000000000..41f8d36f1da --- /dev/null +++ b/public/img/heatmap_bg_test.svg @@ -0,0 +1,2334 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index fba8c497a41..268940375ee 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -8,6 +8,8 @@ display: flex; align-items: center; justify-content: center; + background-image: url(../img/heatmap_bg_test.svg); + background-size: 100%; } input:-webkit-autofill, @@ -39,6 +41,7 @@ select:-webkit-autofill:focus { .login-form-input { border: 1px solid #fafafa !important; border-radius: 4px !important; + opacity: .6; } .login-button-group { @@ -69,13 +72,13 @@ select:-webkit-autofill:focus { justify-content: center; border-right: 1px solid #fafafa; img { - width: 12rem; + width: 10rem; } .icon-gf-grafana_wordmark { color: $link-color; position: relative; font-size: 4rem; - text-shadow: 3px 3px 5px black; + text-shadow: 2px 2px 5px rgba(0,0,0,0.3); } } From 66831fb0cde660cca142b31bf8f4cf5c699e1108 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 29 Nov 2017 16:43:06 -0500 Subject: [PATCH 320/584] tweak background size --- public/sass/pages/_login.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 268940375ee..b1e53887a57 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -9,7 +9,7 @@ align-items: center; justify-content: center; background-image: url(../img/heatmap_bg_test.svg); - background-size: 100%; + background-size: cover; } input:-webkit-autofill, From 47f11c26c0b866576c148147f630c55eedef741e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 08:18:23 +0100 Subject: [PATCH 321/584] ux: new page header design --- public/app/core/components/navbar/navbar.html | 16 ++-- public/app/core/components/navbar/navbar.ts | 8 +- .../features/plugins/partials/ds_edit.html | 48 ++++++----- .../plugins/partials/plugin_edit.html | 2 +- public/sass/_old_responsive.scss | 3 +- public/sass/_variables.scss | 4 +- public/sass/components/_tabbed_view.scss | 2 +- public/sass/components/_tabs.scss | 58 +++----------- public/sass/layout/_page.scss | 79 +++++++++++-------- 9 files changed, 97 insertions(+), 123 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index aafd806e47d..6d611692efc 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,13 +1,11 @@
-
-
- - - - - {{::item.text}} - -
+
+ + + + + {{::item.text}} +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index b41ea4a70ef..3bceee51356 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -39,10 +39,10 @@ export function pageH1() { return { restrict: 'E', template: ` -

- - - {{model.node.text}} +

+ + + {{model.node.text}}

`, scope: { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index d083fe1b332..892403a3d92 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,28 +1,34 @@ - -
-
- +
+
+ -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
+ -
- +
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+ +
+ +
+
-
- +
+
@@ -83,7 +89,7 @@
-
+
diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index e2569681a70..283a54a5902 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -28,7 +28,7 @@
-
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index b2ca34837d6..146b11afe0d 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -29,8 +29,9 @@ .dashnav-action-icons { display: none; } + .page-container { - padding: ($spacer * 1) ($spacer * 2); + padding: 0 $spacer * 2; } .dash-row-menu-container { diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 8b1805480b2..2e381256aef 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding-top: 0.6rem; -$tabs-padding-bottom: 0.4rem; -$tabs-top-margin: 0.5rem; +$tabs-padding: 8px 15px 11px; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index c1bc8455205..9eeadf3d61d 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -34,7 +34,7 @@ margin: 0; background-color: transparent; border: none; - padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; + padding: $tabs-padding; color: $text-color; i { font-size: 120%; diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 6aebf846450..739f7b7ae85 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,41 +1,6 @@ -.nav-tabs-alt { - & > li > a { - color: darken($link-color, 20%); - } - - li > a:hover { - border-bottom: none; - } - - li.active > a, - li.active > a:focus, - li.active > a:hover { - @include border-radius(3px); - border: 1px solid $divider-border-color; - background-color: transparent; - border-bottom: 1px solid $page-bg; - color: $link-color; - } - - li.disabled > a { - color: $text-color; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } - - .tab-content { - padding: 10px; - background-color: $panel-bg; - } -} - .gf-tabs { @include clearfix(); float: left; - margin: $tabs-top-margin 0 0 0; } .gf-tabs-item { @@ -44,13 +9,17 @@ } .gf-tabs-link { - padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer; + padding: $tabs-padding; margin-right: $spacer/2; - border: 1px solid transparent; position: relative; display: block; + border: solid transparent; + border-width: 2px 1px 1px; + border-radius: 3px 3px 0 0; - @include border-radius(2px 2px 0 0); + i { + padding-right: 5px; + } &:hover, &:focus { @@ -60,20 +29,11 @@ &.active, &.active:hover, &.active:focus { - @include border-radius(3px); - border-color: rgba(216, 131, 40, 0.77); - border-bottom: 1px solid $page-bg; + border-color: $orange $dark-4 transparent; + background: $page-bg; color: $link-color; position: relative; top: 1px; } } -.form-tabs-wrapper { - @include brand-bottom-border(); - @include clearfix(); -} - -.form-tabs-content { - padding: $spacer*2 $spacer; -} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index e36e0301162..432f6a26a1e 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -16,7 +16,7 @@ .page-container { @extend .container; - padding: $spacer $spacer $spacer $spacer*3; + padding: 0 $spacer * 2; } .scroll-canvas { @@ -31,10 +31,14 @@ } .page-body { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; + padding-top: $spacer*2; + + &--with-sidebar { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } } } @@ -49,31 +53,18 @@ } } +.page-header-canvas { + background: linear-gradient(90deg, #292a2d, black); + box-shadow: inset 0px -4px 14px #2d2d2d; + bottom-border: 1px solid $dark-4; +} + .page-header { padding: 2rem 0 0 0; - margin-bottom: 2rem; - @include brand-bottom-border(); - @include clearfix(); - h1 { - font-size: $font-size-h2; - flex-grow: 1; - display: inline-block; - margin-bottom: 1rem; - - img { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 0.5rem; - position: relative; - top: -3px; - } - } - - a, button { + .btn { float: right; - margin-left: $spacer; + margin-left: 1rem; // better align icons .fa { @@ -83,7 +74,26 @@ } } +.page-header__title { + font-size: $font-size-h2; + flex-grow: 1; + display: inline-block; + margin-bottom: 2.5rem; +} +.page-header__img { + width: 30px; + height: 30px; + border-radius: 50%; + margin-right: 1rem; + position: relative; + top: -3px; +} + +.page-header__icon { + font-size: 150%; + margin-right: 1rem; +} .page-heading { font-size: 1.25rem; @@ -123,7 +133,7 @@ .page-breadcrumbs { display: flex; - padding: 10px 25px; + padding: 10px 0; line-height: 0.5; } @@ -136,6 +146,8 @@ } .breadcrumb-item { + @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + text-decoration: none; outline: none; display: block; @@ -143,7 +155,6 @@ font-size: 12px; line-height: 30px; padding: 0 7px 0 37px; - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); position: relative; box-shadow: $card-shadow; @@ -196,13 +207,13 @@ // 5px - for rounded arrows and // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; - } + border-radius: 0 5px 0 50px; +} - // we dont need an arrow after the last link - &:last-child:after { - content: none; - } +// we dont need an arrow after the last link +&:last-child:after { + content: none; +} } From 88760983ab00c903024f0d277050bdd280762abd Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 30 Nov 2017 10:41:37 +0300 Subject: [PATCH 322/584] repeat row: add more tests --- .../features/dashboard/specs/repeat.jest.ts | 83 +++++++++++++------ 1 file changed, 58 insertions(+), 25 deletions(-) diff --git a/public/app/features/dashboard/specs/repeat.jest.ts b/public/app/features/dashboard/specs/repeat.jest.ts index d44c9b1d610..e6db5725d3d 100644 --- a/public/app/features/dashboard/specs/repeat.jest.ts +++ b/public/app/features/dashboard/specs/repeat.jest.ts @@ -1,5 +1,6 @@ import _ from 'lodash'; import {DashboardModel} from '../dashboard_model'; +import { expect } from 'test/lib/common'; jest.mock('app/core/services/context_srv', () => ({ @@ -153,13 +154,13 @@ describe('given dashboard with row repeat', function() { beforeEach(function() { dashboardJSON = { panels: [ - {id: 1, type: 'row', repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}}, + {id: 1, type: 'row', gridPos: {x: 0, y: 0, h: 1 , w: 24}, repeat: 'apps'}, {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, {id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}}, {id: 4, type: 'row', gridPos: {x: 0, y: 2, h: 1 , w: 24}}, {id: 5, type: 'graph', gridPos: {x: 0, y: 3, h: 1 , w: 12}}, ], - templating: { + templating: { list: [{ name: 'apps', current: { @@ -191,10 +192,12 @@ describe('given dashboard with row repeat', function() { dashboardJSON.templating.list[0].options[2].selected = true; dashboard = new DashboardModel(dashboardJSON); dashboard.processRepeats(); + + expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}}); + expect(dashboard.panels[4].scopedVars).toMatchObject({apps: {text: 'se2', value: 'se2'}}); + const scopedVars = _.compact(_.map(dashboard.panels, (panel) => { - if (panel.scopedVars) { - return panel.scopedVars.apps.value; - } + return panel.scopedVars ? panel.scopedVars.apps.value : null; })); expect(scopedVars).toEqual([ @@ -204,6 +207,11 @@ describe('given dashboard with row repeat', function() { ]); }); + it('should repeat only configured row', function() { + expect(dashboard.panels[6].id).toBe(4); + expect(dashboard.panels[7].id).toBe(5); + }); + it('should repeat only row if it is collapsed', function() { dashboardJSON.panels = [ { @@ -227,6 +235,51 @@ describe('given dashboard with row repeat', function() { expect(dashboard.panels[1].panels).toHaveLength(2); }); + it('should properly repeat multiple rows', function() { + dashboardJSON.panels = [ + {id: 1, type: 'row', gridPos: {x: 0, y: 0, h: 1 , w: 24}, repeat: 'apps'}, // repeat + {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, + {id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}}, + {id: 4, type: 'row', gridPos: {x: 0, y: 2, h: 1 , w: 24}}, // don't touch + {id: 5, type: 'graph', gridPos: {x: 0, y: 3, h: 1 , w: 12}}, + {id: 6, type: 'row', gridPos: {x: 0, y: 4, h: 1 , w: 24}, repeat: 'hosts'}, // repeat + {id: 7, type: 'graph', gridPos: {x: 0, y: 5, h: 1 , w: 6}}, + {id: 8, type: 'graph', gridPos: {x: 6, y: 5, h: 1 , w: 6}} + ]; + dashboardJSON.templating.list.push({ + name: 'hosts', + current: { + text: 'backend01, backend02', + value: ['backend01', 'backend02'] + }, + options: [ + {text: 'backend01', value: 'backend01', selected: true}, + {text: 'backend02', value: 'backend02', selected: true}, + {text: 'backend03', value: 'backend03', selected: false} + ] + }); + dashboard = new DashboardModel(dashboardJSON); + dashboard.processRepeats(); + + const panel_types = _.map(dashboard.panels, 'type'); + expect(panel_types).toEqual([ + 'row', 'graph', 'graph', + 'row', 'graph', 'graph', + 'row', 'graph', + 'row', 'graph', 'graph', + 'row', 'graph', 'graph', + ]); + + expect(dashboard.panels[0].scopedVars['apps'].value).toBe('se1'); + expect(dashboard.panels[1].scopedVars['apps'].value).toBe('se1'); + expect(dashboard.panels[3].scopedVars['apps'].value).toBe('se2'); + expect(dashboard.panels[4].scopedVars['apps'].value).toBe('se2'); + expect(dashboard.panels[8].scopedVars['hosts'].value).toBe('backend01'); + expect(dashboard.panels[9].scopedVars['hosts'].value).toBe('backend01'); + expect(dashboard.panels[11].scopedVars['hosts'].value).toBe('backend02'); + expect(dashboard.panels[12].scopedVars['hosts'].value).toBe('backend02'); + }); + it('should assign unique ids for repeated panels', function() { dashboardJSON.panels = [ { @@ -252,26 +305,6 @@ describe('given dashboard with row repeat', function() { })); expect(panel_ids.length).toEqual(_.uniq(panel_ids).length); }); - - // it('should set scopedVars on panels', function() { - // expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}}) - // }); - - // it('should repeat row and panels below two times', function() { - // expect(dashboard.panels).toMatchObject([ - // // first (original row) - // {id: 1, type: 'row', repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24}}, - // {id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}}, - // {id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}}, - // // repeated row - // {id: 1, type: 'row', repeatPanelId: 1, gridPos: {x: 0, y: 0, h: 1 , w: 24}}, - // {id: 2, type: 'graph', repeatPanelId: 1, gridPos: {x: 0, y: 1, h: 1 , w: 6}}, - // {id: 3, type: 'graph', repeatPanelId: 1, gridPos: {x: 6, y: 1, h: 1 , w: 6}}, - // // row below dont touch - // {id: 4, type: 'row', gridPos: {x: 0, y: 2, h: 1 , w: 24}}, - // {id: 5, type: 'graph', gridPos: {x: 0, y: 3, h: 1 , w: 12}}, - // ]); - // }); }); From 1db9aeaac31735b134eed40c2495a3ac3ae351e0 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 30 Nov 2017 10:50:10 +0100 Subject: [PATCH 323/584] fix: when navigating, scroll to top --- public/app/core/components/scroll/scroll.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 19e66f40c48..14647f9cf60 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -8,6 +8,10 @@ export function geminiScrollbar() { let scrollbar = new PerfectScrollbar(elem[0]); + scope.$on('$routeChangeSuccess', () => { + elem[0].scrollTop = 0; + }); + scope.$on('$destroy', () => { scrollbar.destroy(); }); From 645f49eda49c03d142e7faad3e47109c8e254df9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 11:31:38 +0100 Subject: [PATCH 324/584] ux: updating header design for pages --- pkg/api/index.go | 4 +- public/app/core/components/navbar/navbar.ts | 6 +- public/app/core/nav_model_srv.ts | 22 ++- .../admin/partials/configuration_home.html | 17 +- .../app/features/alerting/alert_list_ctrl.ts | 3 +- .../alerting/notifications_list_ctrl.ts | 1 + .../alerting/partials/alert_list.html | 65 ++++--- .../alerting/partials/notifications_list.html | 35 +++- public/app/features/org/partials/profile.html | 14 +- .../features/plugins/partials/ds_edit.html | 11 +- .../features/plugins/partials/ds_list.html | 27 ++- .../plugins/partials/plugin_edit.html | 173 +++++++++--------- .../plugins/partials/plugin_list.html | 119 ++++++------ public/sass/_grafana.scss | 1 + public/sass/_variables.scss | 2 +- public/sass/base/_icons.scss | 4 + public/sass/components/_footer.scss | 2 +- public/sass/components/_page_header.scss | 61 ++++++ public/sass/components/_tabs.scss | 6 +- public/sass/layout/_page.scss | 88 ++------- 20 files changed, 382 insertions(+), 279 deletions(-) create mode 100644 public/sass/components/_page_header.scss diff --git a/pkg/api/index.go b/pkg/api/index.go index bf5a128a03f..7a954ecdf22 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) { alertChildNavs := []*dtos.NavLink{ - {Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, - {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"}, + {Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, + {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 3bceee51356..54f39eaa889 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -40,9 +40,9 @@ export function pageH1() { restrict: 'E', template: `

- - - {{model.node.text}} + + + {{model.header.text}}

`, scope: { diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 00dc8feb7cd..964f8f4bd91 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -5,15 +5,24 @@ import config from 'app/core/config'; import _ from 'lodash'; export interface NavModelItem { - title: string; + text: string; url: string; icon?: string; - iconUrl?: string; + img?: string; } -export interface NavModel { - section: NavModelItem; - menu: NavModelItem[]; +export class NavModel { + breadcrumbs: NavModelItem[]; + header: NavModelItem; + node: NavModelItem; + + constructor() { + this.breadcrumbs = []; + } + + setPageHeaderIndex(index: number) { + this.header = this.breadcrumbs[index]; + } } export class NavModelSrv { @@ -31,12 +40,13 @@ export class NavModelSrv { getNav(...args) { var children = this.navItems; - var nav = {breadcrumbs: [], node: null}; + var nav = new NavModel(); for (let id of args) { let node = _.find(children, {id: id}); nav.breadcrumbs.push(node); nav.node = node; + nav.header = node; children = node.children; } diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index dd39c80269d..854e4eb848d 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -1,9 +1,14 @@ - -
-
- -
+
+
+ +
+ +
+
+
+ +
  1. @@ -29,4 +34,4 @@
-
\ No newline at end of file +
diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index 5e9d8d80a92..e7a0dbf1298 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -23,7 +23,8 @@ export class AlertListCtrl { /** @ngInject */ constructor(private backendSrv, private $location, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting'); + this.navModel = navModelSrv.getNav('alerting', 'alert-list'); + this.navModel.setPageHeaderIndex(0); var params = $location.search(); this.filters.state = params.state || null; diff --git a/public/app/features/alerting/notifications_list_ctrl.ts b/public/app/features/alerting/notifications_list_ctrl.ts index 15ef891a979..55647857b41 100644 --- a/public/app/features/alerting/notifications_list_ctrl.ts +++ b/public/app/features/alerting/notifications_list_ctrl.ts @@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl { constructor(private backendSrv, navModelSrv) { this.loadNotifications(); this.navModel = navModelSrv.getNav('alerting', 'channels'); + this.navModel.setPageHeaderIndex(0); } loadNotifications() { diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 148757424c5..df7105d0bfe 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -1,29 +1,52 @@ - +
+
+ -
-
- +
+ - - - How to add an alert - - - - Notification channels - -
+ -
-
-
- -
- -
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ + + + How to add an alert + + + + + +
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 9c52dda36f5..064348b64b6 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,10 +1,35 @@ - +
+
+ -
-
- +
+ - + +
+
+
+ +
+
+
+
+ + + New Channel
diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 8113288e15a..851ebe9f9c6 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -1,10 +1,14 @@ - +
+
+ -
-
- -
+
+ +
+
+
+

Information

diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 892403a3d92..b15eb92602a 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -3,9 +3,7 @@
- - -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
    @@ -28,6 +26,13 @@
+ +
+
+ Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
+
+
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 1e9fe24fcee..5bec4a5d44e 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,16 +1,25 @@ - -
-
- +
+
+ - - Add data source - +
+ + +
+
+
+ +
+
+
+ + + Add data source +
-
  1. @@ -43,4 +52,4 @@
    No data sources defined
    -
\ No newline at end of file +
diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 283a54a5902..1fd9e4fa0a3 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,93 +1,94 @@ - +
+
+ -
-
-
- +
+
+ -
-

{{ctrl.model.name}}

-
By {{ctrl.model.info.author.name}}
-
- - {{ctrl.model.type}} - +
+

{{ctrl.model.name}}

+
By {{ctrl.model.info.author.name}}
+
+ + {{ctrl.model.type}} + +
+ +
- - - -
- -
-
-
-
-
- -
-
- - -
- - - -
-
-
- -
- -
- -
+ +
+
+
+
+
+ +
+
+ + +
+ + + +
+
+
+ +
+ +
+ + +
diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index fd7631c68bb..225caf97017 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,63 +1,68 @@ - -
-
-

- - Plugins (currently installed) -

+
+
+ -
- +
+ - - Find more plugins on Grafana.com - -
-
+
+ -
- + + Find more plugins on Grafana.com + +
+
+
+
-
    -
  1. - -
    -
    - - {{plugin.type}} -
    -
    - Update available! -
    -
    -
    -
    - -
    -
    -
    {{plugin.name}}
    -
    By {{plugin.info.author.name}}
    -
    -
    -     -
    2. -
-
+
+
+ + +
    +
  1. + +
    +
    + + {{plugin.type}} +
    +
    + Update available! +
    +
    +
    +
    + +
    +
    +
    {{plugin.name}}
    +
    By {{plugin.info.author.name}}
    +
    +
    +     +
    2. +
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index f067ca3d5cc..af4a97dc1e6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -85,6 +85,7 @@ @import "components/code_editor"; @import "components/dashboard_grid"; @import "components/dashboard_list"; +@import "components/page_header"; // PAGES diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 2e381256aef..c873a7c17e1 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding: 8px 15px 11px; +$tabs-padding: 10px 15px 10px; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 3388afb00d2..d0a9dbebcba 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -43,5 +43,9 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); } +.gicon-alert-notification-channel { + background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); +} + diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 79c0e0178df..6413ed3650f 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -5,7 +5,7 @@ .footer { color: $footer-link-color; padding: 5rem 0 1rem 0; - font-size: $font-size-xs; + font-size: $font-size-sm; width: 98%; /* was causing horiz scrollbars - need to examine */ a { diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss new file mode 100644 index 00000000000..9c3a7dc31ea --- /dev/null +++ b/public/sass/components/_page_header.scss @@ -0,0 +1,61 @@ + +.page-header-canvas { + background: linear-gradient(90deg, #292a2d, black); + box-shadow: inset 0px -4px 14px #2d2d2d; + border-bottom: 1px solid $dark-4; +} + +.page-header { + padding: 2rem 0 0 0; + + .btn { + float: right; + margin-left: 1rem; + + // better align icons + .fa { + position: relative; + top: 1px; + } + } +} + +.page-header__title { + font-size: $font-size-h2; + flex-grow: 1; + margin-bottom: 2.5rem; + line-height: 50px; +} + +.page-header__img { + border-radius: 50%; + margin-right: 0.5rem; + position: relative; + top: -3px; + width: 50px; + height: 50px; +} + +.page-header__icon { + font-size: 150%; + margin-right: 0.5rem; + width: 50px; + height: 50px; + position: relative; + + &.fa { + top: 3px; + } + + &.icon-gf { + top: 3px; + } +} + +.page-heading { + font-size: 1.25rem; + margin-top: 0; + margin-bottom: $spacer * 0.7; +} + + diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 739f7b7ae85..fee6d2cb7b8 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,6 +1,8 @@ .gf-tabs { @include clearfix(); float: left; + position: relative; + top: 1px; } .gf-tabs-item { @@ -18,7 +20,7 @@ border-radius: 3px 3px 0 0; i { - padding-right: 5px; + margin-right: 5px; } &:hover, @@ -32,8 +34,6 @@ border-color: $orange $dark-4 transparent; background: $page-bg; color: $link-color; - position: relative; - top: 1px; } } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 432f6a26a1e..b261c091c37 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -42,6 +42,17 @@ } } +.page-action-bar { + margin-bottom: $spacer * 2; + display: flex; + align-items: flex-start; +} + +.page-action-bar__spacer { + width: $spacer * 2; + flex-grow: 1; +} + .page-content-with-sidebar { width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin } @@ -53,68 +64,6 @@ } } -.page-header-canvas { - background: linear-gradient(90deg, #292a2d, black); - box-shadow: inset 0px -4px 14px #2d2d2d; - bottom-border: 1px solid $dark-4; -} - -.page-header { - padding: 2rem 0 0 0; - - .btn { - float: right; - margin-left: 1rem; - - // better align icons - .fa { - position: relative; - top: 1px; - } - } -} - -.page-header__title { - font-size: $font-size-h2; - flex-grow: 1; - display: inline-block; - margin-bottom: 2.5rem; -} - -.page-header__img { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 1rem; - position: relative; - top: -3px; -} - -.page-header__icon { - font-size: 150%; - margin-right: 1rem; -} - -.page-heading { - font-size: 1.25rem; - margin-top: 0; - margin-bottom: $spacer * 0.7; -} - -.admin-page { - max-width: 800px; - margin-left: 10px; - h2 { - margin-left: 15px; - margin-bottom: 0px; - font-size: $font-size-lg; - color: $text-color; - i { - padding-right: 6px; - } - } -} - .page-sidebar { color: $text-color-weak; h4 { @@ -207,13 +156,12 @@ // 5px - for rounded arrows and // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; + border-radius: 0 5px 0 50px; + } + + // we dont need an arrow after the last link + &:last-child:after { + content: none; + } } -// we dont need an arrow after the last link -&:last-child:after { - content: none; -} -} - - From 74ceb76ec02ec6761618a655a451122e65d0d139 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 15:37:03 +0100 Subject: [PATCH 325/584] ux: work on page header --- pkg/api/dtos/index.go | 1 + pkg/api/index.go | 85 +++++++++--------- public/app/core/angular_wrappers.ts | 2 + public/app/core/components/PageHeader.tsx | 88 +++++++++++++++++++ public/app/core/nav_model_srv.ts | 28 ++++-- .../admin/partials/configuration_home.html | 10 +-- .../app/features/alerting/alert_list_ctrl.ts | 3 +- .../alerting/notifications_list_ctrl.ts | 3 +- .../alerting/partials/alert_list.html | 26 +----- .../alerting/partials/notifications_list.html | 25 +----- public/app/features/org/org_details_ctrl.ts | 2 +- .../app/features/org/partials/orgDetails.html | 59 +++++++++---- public/app/features/plugins/ds_list_ctrl.ts | 2 +- .../features/plugins/partials/ds_list.html | 11 +-- public/sass/_variables.dark.scss | 1 + public/sass/base/_icons.scss | 4 + public/sass/components/_page_header.scss | 40 ++++++--- public/sass/layout/_page.scss | 6 ++ public/sass/pages/_plugins.scss | 50 +++-------- 19 files changed, 254 insertions(+), 192 deletions(-) create mode 100644 public/app/core/components/PageHeader.tsx diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 5661ae1df91..8f1cdd9a92d 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -24,6 +24,7 @@ type NavLink struct { Id string `json:"id,omitempty"` Text string `json:"text,omitempty"` Description string `json:"description,omitempty"` + SubTitle string `json:"subTitle,omitempty"` Icon string `json:"icon,omitempty"` Img string `json:"img,omitempty"` Url string `json:"url,omitempty"` diff --git a/pkg/api/index.go b/pkg/api/index.go index 7a954ecdf22..7f30dcf9f8a 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -104,7 +104,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, - {Text: "Dashboard List", Description: "Manage Dashboards And Folders", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, + {Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ @@ -146,6 +146,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Alerting", + SubTitle: "Alert rules & notifications", Id: "alerting", Icon: "gicon gicon-alert", Url: setting.AppSubUrl + "/alerting/list", @@ -202,10 +203,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.OrgRole == m.ROLE_ADMIN { cfgNode := &dtos.NavLink{ - Id: "cfg", - Text: "Configuration", - Icon: "fa fa-fw fa-cogs", - Url: setting.AppSubUrl + "/configuration", + Id: "cfg", + Text: "Configuration", + SubTitle: "Organization: " + c.OrgName, + Icon: "fa fa-fw fa-cog", + Url: setting.AppSubUrl + "/datasources", Children: []*dtos.NavLink{ { Text: "Data Sources", @@ -218,25 +220,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"}, }, }, - { - Text: "Preferences", - Id: "org", - Description: "Organization preferences", - Icon: "fa fa-fw fa-sliders", - Url: setting.AppSubUrl + "/org", - }, - { - Text: "Plugins", - Id: "plugins", - Description: "View and configure plugins", - Icon: "icon-gf icon-gf-fw icon-gf-apps", - Url: setting.AppSubUrl + "/plugins", - Children: []*dtos.NavLink{ - {Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"}, - {Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"}, - {Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"}, - }, - }, { Text: "Members", Id: "users", @@ -245,12 +228,32 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Url: setting.AppSubUrl + "/org/users", }, { - Text: "Groups", + Text: "Teams", Id: "users", Description: "Manage org groups", - Icon: "fa fa-fw fa-users", + Icon: "gicon gicon-user-group", Url: setting.AppSubUrl + "/org/user-groups", }, + { + Text: "Plugins", + Id: "plugins", + Description: "View and configure plugins", + Icon: "icon-gf icon-gf-fw icon-gf-apps", + Url: setting.AppSubUrl + "/plugins", + // Children: []*dtos.NavLink{ + // {Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"}, + // {Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"}, + // {Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"}, + // }, + }, + { + Text: "Preferences", + Id: "org-settings", + Description: "Organization preferences", + Icon: "fa fa-fw fa-sliders", + Url: setting.AppSubUrl + "/org", + }, + { Text: "API Keys", Id: "apikeys", @@ -261,21 +264,21 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, } - if c.IsGrafanaAdmin { - cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ - Text: "Server Admin", - Id: "admin", - Icon: "fa fa-fw fa-shield", - Url: setting.AppSubUrl + "/admin", - Children: []*dtos.NavLink{ - {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, - {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, - {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, - {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, - {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, - }, - }) - } + // if c.IsGrafanaAdmin { + // cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ + // Text: "Server Admin", + // Id: "admin", + // Icon: "fa fa-fw fa-shield", + // Url: setting.AppSubUrl + "/admin", + // Children: []*dtos.NavLink{ + // {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, + // {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, + // {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, + // {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, + // {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, + // }, + // }) + // } data.NavTree = append(data.NavTree, cfgNode) } diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 7acdc79d55a..00181736119 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,8 +1,10 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { PasswordStrength } from './components/PasswordStrength'; +import PageHeader from './components/PageHeader'; export function registerAngularDirectives() { react2AngularDirective('passwordStrength', PasswordStrength, ['password']); + react2AngularDirective('pageHeader', PageHeader, ['model', "noTabs"]); } diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx new file mode 100644 index 00000000000..bc0fbb3f7b9 --- /dev/null +++ b/public/app/core/components/PageHeader.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { NavModel } from '../nav_model_srv'; +import classNames from 'classnames'; + +export interface IProps { + model: NavModel; +} + +export default class PageHeader extends React.Component { + constructor(props) { + super(props); + } + + renderBreadcrumb(breadcrumb) { + return ( + + {breadcrumb.text} + + ); + } + + renderTab(tab) { + let tabClasses = classNames({ + 'gf-tabs-link': true, + 'active': tab.active, + }); + + console.log(tab.active); + + return ( +
  • + + + {tab.text} + +
    • + ); + } + + renderHeaderTitle(main) { + return ( +
    + + {main.icon && } + {main.img && } + + +
    +

    {main.text}

    + {main.subTitle &&
    {main.subTitle}
    } + {main.subType && ( +
    + + {main.subType.text} +
    + )} +
    +
    + ); + } + + render() { + return ( +
    +
    +
    +
    + + + + {this.props.model.breadcrumbs.map(this.renderBreadcrumb)} +
    +
    + +
    + {this.renderHeaderTitle(this.props.model.main)} + + {this.props.model.main.children && ( +
      + {this.props.model.main.children.map(this.renderTab)} +
    + )} +
    +
    +
    + ); + } +} diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 964f8f4bd91..017b2c6435f 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -1,5 +1,3 @@ -/// - import coreModule from 'app/core/core_module'; import config from 'app/core/config'; import _ from 'lodash'; @@ -9,20 +7,18 @@ export interface NavModelItem { url: string; icon?: string; img?: string; + active?: boolean; + children: NavModelItem[]; } export class NavModel { breadcrumbs: NavModelItem[]; - header: NavModelItem; + main: NavModelItem; node: NavModelItem; constructor() { this.breadcrumbs = []; } - - setPageHeaderIndex(index: number) { - this.header = this.breadcrumbs[index]; - } } export class NavModelSrv { @@ -43,13 +39,29 @@ export class NavModelSrv { var nav = new NavModel(); for (let id of args) { + // if its a number then it's the index to use for main + if (_.isNumber(id)) { + nav.main = nav.breadcrumbs[id]; + break; + } + let node = _.find(children, {id: id}); nav.breadcrumbs.push(node); nav.node = node; - nav.header = node; + nav.main = node; children = node.children; } + if (nav.main.children) { + for (let item of nav.main.children) { + item.active = false; + + if (item.url === nav.node.url) { + item.active = true; + } + } + } + return nav; } diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index 854e4eb848d..7ebc5127b4a 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -1,12 +1,4 @@ -
    -
    - - -
    - -
    -
    -
    +
    diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index e7a0dbf1298..2f70e9bda59 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -23,8 +23,7 @@ export class AlertListCtrl { /** @ngInject */ constructor(private backendSrv, private $location, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting', 'alert-list'); - this.navModel.setPageHeaderIndex(0); + this.navModel = navModelSrv.getNav('alerting', 'alert-list', 0); var params = $location.search(); this.filters.state = params.state || null; diff --git a/public/app/features/alerting/notifications_list_ctrl.ts b/public/app/features/alerting/notifications_list_ctrl.ts index 55647857b41..d1edeb35ac2 100644 --- a/public/app/features/alerting/notifications_list_ctrl.ts +++ b/public/app/features/alerting/notifications_list_ctrl.ts @@ -9,8 +9,7 @@ export class AlertNotificationsListCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { this.loadNotifications(); - this.navModel = navModelSrv.getNav('alerting', 'channels'); - this.navModel.setPageHeaderIndex(0); + this.navModel = navModelSrv.getNav('alerting', 'channels', 0); } loadNotifications() { diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index df7105d0bfe..9a992dd34a3 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -1,28 +1,4 @@ -
    -
    - - -
    - - - - -
    -
    -
    +
    diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 064348b64b6..a2f6f723696 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,27 +1,4 @@ -
    -
    - - -
    - - - -
    -
    -
    +
    diff --git a/public/app/features/org/org_details_ctrl.ts b/public/app/features/org/org_details_ctrl.ts index 63291c346e0..525cb6b8b59 100644 --- a/public/app/features/org/org_details_ctrl.ts +++ b/public/app/features/org/org_details_ctrl.ts @@ -6,7 +6,7 @@ export class OrgDetailsCtrl { constructor($scope, $http, backendSrv, contextSrv, navModelSrv) { $scope.init = function() { $scope.getOrgInfo(); - $scope.navModel = navModelSrv.getNav('cfg', 'org'); + $scope.navModel = navModelSrv.getNav('cfg', 'org-settings', 0); }; $scope.getOrgInfo = function() { diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 69422925dee..8d000a7b8d1 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,26 +1,51 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - -
    + -

    General

    - -
    -
    - Organization name - -
    -
    +
    +

    General

    + +
    +
    + Organization name + +
    +
    - - - - + +
    diff --git a/public/app/features/plugins/ds_list_ctrl.ts b/public/app/features/plugins/ds_list_ctrl.ts index a893ee7475f..5feadb68fe3 100644 --- a/public/app/features/plugins/ds_list_ctrl.ts +++ b/public/app/features/plugins/ds_list_ctrl.ts @@ -13,7 +13,7 @@ export class DataSourcesCtrl { private datasourceSrv, private navModelSrv) { - this.navModel = this.navModelSrv.getNav('cfg', 'datasources'); + this.navModel = this.navModelSrv.getNav('cfg', 'datasources', 0); backendSrv.get('/api/datasources').then(result => { this.datasources = result; diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 5bec4a5d44e..0669beb4129 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,13 +1,4 @@ -
    -
    - - -
    - - -
    -
    -
    +
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 1164f8305e0..437c33d7bbd 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -52,6 +52,7 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(23,24,25); $page-bg: rgb(22, 23, 25); + $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index d0a9dbebcba..e8dc28c96b6 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -47,5 +47,9 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); } +.gicon-user-group { + background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg'); +} + diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 9c3a7dc31ea..6544e15b935 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -20,27 +20,30 @@ } } +.page-header__inner { + flex-grow: 1; + display: flex; + margin-bottom: 2.5rem; +} + .page-header__title { font-size: $font-size-h2; - flex-grow: 1; - margin-bottom: 2.5rem; - line-height: 50px; + margin-bottom: 1px; + padding-top: $spacer; } .page-header__img { border-radius: 50%; - margin-right: 0.5rem; position: relative; top: -3px; - width: 50px; - height: 50px; + width: 65px; + height: 65px; } .page-header__icon { - font-size: 150%; - margin-right: 0.5rem; - width: 50px; - height: 50px; + font-size: 70px; + width: 65; + height: 65; position: relative; &.fa { @@ -52,10 +55,19 @@ } } -.page-heading { - font-size: 1.25rem; - margin-top: 0; - margin-bottom: $spacer * 0.7; +.page-header__logo { + margin-right: $spacer/2; } +.page-header-info-block { +} + +.page-header__sub-title { + color: $text-muted; +} + +.page-header-stamps-type { + color: $link-color-disabled; + text-transform: uppercase; +} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index b261c091c37..6ea39877311 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -42,6 +42,12 @@ } } +.page-heading { + font-size: 1.25rem; + margin-top: 0; + margin-bottom: $spacer * 0.7; +} + .page-action-bar { margin-bottom: $spacer * 2; display: flex; diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index c93d94f40b5..edb4e8ade3c 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -1,41 +1,3 @@ -.plugin-header { - @include clearfix(); - - padding: $spacer 0 $spacer/2 0; - margin-bottom: 2rem; -} - -.plugin-header-logo { - float: left; - width: 7rem; - img { - width: 7rem; - } - margin-right: $spacer; -} - -.plugin-header-info-block { - float: left; -} - -.plugin-header-author { -} - -.plugin-header-stamps-type { - color: $link-color-disabled; - text-transform: uppercase; -} - -.plugin-info-list-item { - img { - width: 16px; - } - - white-space: nowrap; - max-width: $page-sidebar-width; - text-overflow: ellipsis; - overflow: hidden; -} .get-more-plugins-link { color: $gray-3; @@ -55,3 +17,15 @@ display: none; } } + +.plugin-info-list-item { + img { + width: 16px; + } + + white-space: nowrap; + max-width: $page-sidebar-width; + text-overflow: ellipsis; + overflow: hidden; +} + From d83692aa80e52c9b62c93d7ff7c836d53bfc97a3 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 30 Nov 2017 15:59:53 +0100 Subject: [PATCH 326/584] dashboard: when changing route, scroll to top --- public/app/core/components/scroll/scroll.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 14647f9cf60..54c84e2df11 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -12,6 +12,10 @@ export function geminiScrollbar() { elem[0].scrollTop = 0; }); + scope.$on('$routeUpdate', () => { + elem[0].scrollTop = 0; + }); + scope.$on('$destroy', () => { scrollbar.destroy(); }); From b2add1977a328e9ef75ff2c68f53c50932d35d9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 16:35:27 +0100 Subject: [PATCH 327/584] ux: progress on new page header --- pkg/api/index.go | 4 - public/app/features/org/org_users_ctrl.ts | 5 +- .../app/features/org/partials/orgUsers.html | 92 +++++++++++-------- public/app/features/plugins/ds_edit_ctrl.ts | 8 +- .../features/plugins/partials/ds_edit.html | 60 ++++++------ .../plugins/partials/ds_http_settings.html | 4 +- public/sass/layout/_page.scss | 8 ++ 7 files changed, 103 insertions(+), 78 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 7f30dcf9f8a..36f20c82083 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -215,10 +215,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Description: "Add and configure data sources", Id: "datasources", Url: setting.AppSubUrl + "/datasources", - Children: []*dtos.NavLink{ - {Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "gicon gicon-datasources"}, - {Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"}, - }, }, { Text: "Members", diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 8127120e341..1686a1c3424 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -23,7 +23,7 @@ export class OrgUsersCtrl { role: 'Viewer', }; - this.navModel = navModelSrv.getNav('cfg', 'users'); + this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.get(); this.editor = { index: 0 }; @@ -44,8 +44,7 @@ export class OrgUsersCtrl { if (this.externalUserMngLinkName) { return this.externalUserMngLinkName; } - - return "Add Members"; + return "Add Member"; } get() { diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index c612ab95271..5f98614b854 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,34 +1,52 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - + +
    +
    +
    + - -
    - - - - {{ctrl.addUsersBtnName}} - - - -
    -
    + + + {{ctrl.addUsersBtnName}} + +
    @@ -41,26 +59,26 @@ Login Email - - Seen - Time since user was seen using Grafana - + + Seen + Time since user was seen using Grafana + Role - - + + {{user.login}} {{user.email}} - {{user.lastSeenAtAge}} + {{user.lastSeenAtAge}} -
    - -
    +
    + +
    diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 6ea230e054b..46e787738e5 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -41,7 +41,7 @@ export class DataSourceEditCtrl { navModelSrv, ) { - this.navModel = navModelSrv.getNav('cfg', 'datasources'); + this.navModel = navModelSrv.getNav('cfg', 'datasources', 0); this.datasources = []; this.tabIndex = 0; @@ -58,9 +58,7 @@ export class DataSourceEditCtrl { this.isNew = true; this.current = _.cloneDeep(defaults); - // add to nav & breadcrumbs - this.navModel.node = {text: 'New data source', icon: 'icon-gf icon-gf-fw icon-gf-datasources'}; - this.navModel.breadcrumbs.push(this.navModel.node); + this.navModel.breadcrumbs.push({text: 'New'}); // We are coming from getting started if (this.$location.search().gettingstarted) { @@ -87,7 +85,7 @@ export class DataSourceEditCtrl { this.backendSrv.get('/api/datasources/' + id).then(ds => { this.isNew = false; this.current = ds; - this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'}; + this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources', id: 'ds-new'}; this.navModel.breadcrumbs.push(this.navModel.node); if (datasourceCreated) { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index b15eb92602a..c879f74cfad 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,34 +1,40 @@ -
    -
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    - - -
    - -
    -
    -
    -
    +
    -
    -
    +

    Edit Data Source

    +

    New Data Source

    + +
    +
    Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
    diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 39fc7296b32..0bc2e7dd1d9 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -1,7 +1,7 @@
    -

    HTTP settings

    +

    HTTP

    @@ -38,7 +38,7 @@
    -

    HTTP Auth

    +

    Auth

    diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 6ea39877311..bdb85d2a7ce 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -52,6 +52,10 @@ margin-bottom: $spacer * 2; display: flex; align-items: flex-start; + + > a, > button { + margin-left: $spacer; + } } .page-action-bar__spacer { @@ -70,6 +74,10 @@ } } +.page-sub-heading { + margin-bottom: $spacer; +} + .page-sidebar { color: $text-color-weak; h4 { From b1a2344be11fbdc0e524853af6a4f7f6c17cca2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 16:51:06 +0100 Subject: [PATCH 328/584] added bundled dashboards --- .../plugins/import_list/import_list.html | 6 - .../features/plugins/partials/ds_edit.html | 122 +++++++++--------- .../plugins/partials/ds_http_settings.html | 47 ++++--- .../datasource/graphite/partials/config.html | 2 +- 4 files changed, 86 insertions(+), 91 deletions(-) diff --git a/public/app/features/plugins/import_list/import_list.html b/public/app/features/plugins/import_list/import_list.html index b8e6e13cf8c..ff655f0c33a 100644 --- a/public/app/features/plugins/import_list/import_list.html +++ b/public/app/features/plugins/import_list/import_list.html @@ -13,12 +13,6 @@ {{dash.title}} - - - Revision: {{dash.revision}} - (Imported: {{dash.importedRevision}}) - - - - Cancel -
    +
    +

    Bundled Plugin Dashboards

    +
    + +
    +
    -
    -
    -
    +
    +
    Testing....
    +
    +
    + + +
    +
    +
    {{ctrl.testing.message}}
    +
    +
    +
    - -
    -
    - -
    +
    + + + Cancel +
    + +
    +
    +
    + +
    diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 0bc2e7dd1d9..0e36cee833b 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -39,38 +39,37 @@

    Auth

    -
    -
    - - -
    -
    - - -
    -
    - +
    - + +
    +
    + + +
    +
    + +
    +
    Basic Auth Details
    -
    - - User - - -
    +
    + + User + + +
    -
    - - Password - - -
    +
    + + Password + + +
    diff --git a/public/app/plugins/datasource/graphite/partials/config.html b/public/app/plugins/datasource/graphite/partials/config.html index 804d339452e..58afc32de19 100644 --- a/public/app/plugins/datasource/graphite/partials/config.html +++ b/public/app/plugins/datasource/graphite/partials/config.html @@ -3,7 +3,7 @@ suggest-url="http://localhost:8080"> -

    Graphite details

    +

    Graphite details

    From 6f5a9bf76841d762c6381f1f97747efb9241d390 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 17:28:24 +0100 Subject: [PATCH 329/584] ux: new page header progress --- pkg/api/index.go | 11 +-- .../app/features/org/partials/orgDetails.html | 3 +- public/app/features/org/partials/profile.html | 13 +-- public/app/features/org/prefs_control.ts | 2 +- public/app/features/org/profile_ctrl.ts | 2 +- .../plugins/partials/plugin_list.html | 85 +++++++++++-------- .../app/features/plugins/plugin_list_ctrl.ts | 32 +++---- public/sass/components/_page_header.scss | 3 - 8 files changed, 75 insertions(+), 76 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 36f20c82083..a1939eab8f6 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.IsSignedIn { profileNode := &dtos.NavLink{ - Text: c.SignedInUser.Login, + Text: c.SignedInUser.Name, + SubTitle: c.SignedInUser.Login, Id: "profile", Img: data.User.GravatarUrl, Url: setting.AppSubUrl + "/profile", HideFromMenu: true, Children: []*dtos.NavLink{ - {Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"}, + {Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"}, {Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true}, }, } if !setting.DisableSignoutMenu { // add sign out first - profileNode.Children = append([]*dtos.NavLink{ - {Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"}, - }, profileNode.Children...) + profileNode.Children = append(profileNode.Children, &dtos.NavLink{ + Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self", + }) } data.NavTree = append(data.NavTree, profileNode) diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 8d000a7b8d1..da99436a93d 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -32,7 +32,8 @@
    -

    General

    +

    Organization profile

    +
    diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 851ebe9f9c6..02b0d27b84f 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -1,16 +1,9 @@ -
    -
    - - -
    - -
    -
    -
    +
    +

    User Profile

    + -

    Information

    Name diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts index 1bc758bf2cc..7843b5229d1 100644 --- a/public/app/features/org/prefs_control.ts +++ b/public/app/features/org/prefs_control.ts @@ -49,7 +49,7 @@ export class PrefsControlCtrl { var template = ` -

    Preferences

    +

    Preferences

    UI Theme diff --git a/public/app/features/org/profile_ctrl.ts b/public/app/features/org/profile_ctrl.ts index e82df591382..6b007203d89 100644 --- a/public/app/features/org/profile_ctrl.ts +++ b/public/app/features/org/profile_ctrl.ts @@ -14,7 +14,7 @@ export class ProfileCtrl { constructor(private backendSrv, private contextSrv, private $location, navModelSrv) { this.getUser(); this.getUserOrgs(); - this.navModel = navModelSrv.getNav('profile'); + this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0); } getUser() { diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index 225caf97017..efe036ec14f 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,42 +1,55 @@ + -
    -
    - - -
    - - -
    - - - - Find more plugins on Grafana.com - -
    -
    -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + +
    + +
    + + Find more plugins on Grafana.com + +
    +
    diff --git a/public/app/features/plugins/plugin_list_ctrl.ts b/public/app/features/plugins/plugin_list_ctrl.ts index ada1fc6a1ff..e8a501ff39e 100644 --- a/public/app/features/plugins/plugin_list_ctrl.ts +++ b/public/app/features/plugins/plugin_list_ctrl.ts @@ -1,34 +1,28 @@ -/// - import angular from 'angular'; +import _ from 'lodash'; export class PluginListCtrl { plugins: any[]; tabIndex: number; navModel: any; + searchQuery: string; + allPlugins: any[]; /** @ngInject */ constructor(private backendSrv: any, $location, navModelSrv) { this.tabIndex = 0; - this.navModel = navModelSrv.getNav('cfg', 'plugins'); + this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); - var pluginType = $location.search().type || 'panel'; - switch (pluginType) { - case "datasource": { - this.tabIndex = 1; - break; - } - case "app": { - this.tabIndex = 2; - break; - } - case "panel": - default: - this.tabIndex = 0; - } - - this.backendSrv.get('api/plugins', {embedded: 0, type: pluginType}).then(plugins => { + this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => { this.plugins = plugins; + this.allPlugins = plugins; + }); + } + + onQueryUpdated() { + let regex = new RegExp(this.searchQuery, 'ig'); + this.plugins = _.filter(this.allPlugins, item => { + return regex.test(item.name) || regex.test(item.type); }); } } diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 6544e15b935..2183ac23256 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -59,9 +59,6 @@ margin-right: $spacer/2; } -.page-header-info-block { -} - .page-header__sub-title { color: $text-muted; } From d29bf0816d6266987b0c31824c91c2edc6dde8d1 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 30 Nov 2017 14:19:48 -0500 Subject: [PATCH 330/584] tweaked color on heatmap. still not there, but more vibrant --- public/img/heatmap_bg_test.svg | 5740 ++++++++++++++++++++++---------- 1 file changed, 4013 insertions(+), 1727 deletions(-) diff --git a/public/img/heatmap_bg_test.svg b/public/img/heatmap_bg_test.svg index 41f8d36f1da..bda9b387082 100644 --- a/public/img/heatmap_bg_test.svg +++ b/public/img/heatmap_bg_test.svg @@ -1,7 +1,7 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 32ffb2d544614f358ab1b301f130ea36938138e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:27:05 +0100 Subject: [PATCH 331/584] progress on page header --- public/app/core/components/PageHeader.tsx | 92 +++++++-------- public/app/core/nav_model_srv.ts | 1 + .../alerting/partials/alert_list.html | 5 - .../features/org/partials/user_groups.html | 22 ++-- public/app/features/org/user_groups_ctrl.ts | 2 +- .../plugins/partials/plugin_edit.html | 62 ++++++----- public/sass/components/_page_header.scss | 105 ++++++++++++++++-- public/sass/layout/_page.scss | 86 -------------- 8 files changed, 190 insertions(+), 185 deletions(-) diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx index bc0fbb3f7b9..cf3aa0d0cd4 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader.tsx @@ -1,48 +1,63 @@ import React from 'react'; -import { NavModel } from '../nav_model_srv'; -import classNames from 'classnames'; +import { NavModel, NavModelItem } from '../nav_model_srv'; +import classNames from 'classnames'; export interface IProps { model: NavModel; } +// function BreadcrumbItem(item: NavModelItem) { +// return ( +// +// {item.text} +// +// ); +// } +// +// function Breadcrumb(model: NavModel) { +// return ( +//
    +//
    +// +// +// +// {model.breadcrumbs.map(BreadcrumbItem)} +//
    +//
    +// ); +// } + +function TabItem(tab: NavModelItem) { + let tabClasses = classNames({ + 'gf-tabs-link': true, + active: tab.active, + }); + + return ( +
  • + + + {tab.text} + +
    • + ); +} + +function Tabs({main}: {main: NavModelItem}) { + return
      {main.children.map(TabItem)}
    ; +} + export default class PageHeader extends React.Component { constructor(props) { super(props); } - renderBreadcrumb(breadcrumb) { - return ( - - {breadcrumb.text} - - ); - } - - renderTab(tab) { - let tabClasses = classNames({ - 'gf-tabs-link': true, - 'active': tab.active, - }); - - console.log(tab.active); - - return ( -
  • - - - {tab.text} - -
    • - ); - } - renderHeaderTitle(main) { return (
    - {main.icon && } - {main.img && } + {main.icon && } + {main.img && }
    @@ -50,7 +65,7 @@ export default class PageHeader extends React.Component { {main.subTitle &&
    {main.subTitle}
    } {main.subType && (
    - + {main.subType.text}
    )} @@ -63,23 +78,10 @@ export default class PageHeader extends React.Component { return (
    -
    -
    - - - - {this.props.model.breadcrumbs.map(this.renderBreadcrumb)} -
    -
    -
    {this.renderHeaderTitle(this.props.model.main)} - {this.props.model.main.children && ( -
      - {this.props.model.main.children.map(this.renderTab)} -
    - )} + {this.props.model.main.children && }
    diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 017b2c6435f..bfc275015db 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -7,6 +7,7 @@ export interface NavModelItem { url: string; icon?: string; img?: string; + id: string; active?: boolean; children: NavModelItem[]; } diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 9a992dd34a3..e7eb2533463 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -18,11 +18,6 @@ How to add an alert - - - - -
    diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index f7884352865..da3597c044b 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -1,20 +1,23 @@ - + -
    -
    -

    User Groups

    +
    +
    - - - Create User Group - -
    + +
    + + + + Create User Group + +
    +
    @@ -42,7 +45,6 @@ -
    diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts index 92f99712d7b..6534f749260 100644 --- a/public/app/features/org/user_groups_ctrl.ts +++ b/public/app/features/org/user_groups_ctrl.ts @@ -15,7 +15,7 @@ export class UserGroupsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'users'); + this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.get(); } diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 1fd9e4fa0a3..adc1c637a28 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,34 +1,36 @@ -
    -
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - - -
    -

    {{ctrl.model.name}}

    -
    By {{ctrl.model.info.author.name}}
    -
    - - {{ctrl.model.type}} - -
    -
    -
    - - -
    -
    -
    +
    diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 2183ac23256..24e1570b996 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -6,7 +6,7 @@ } .page-header { - padding: 2rem 0 0 0; + padding: 2.5rem 0 0 0; .btn { float: right; @@ -36,18 +36,22 @@ border-radius: 50%; position: relative; top: -3px; - width: 65px; - height: 65px; + width: 50px; + height: 50px; } .page-header__icon { - font-size: 70px; - width: 65; - height: 65; + font-size: 50px; + width: 50px; + height: 50px; position: relative; &.fa { - top: 3px; + top: 8px; + } + + &.gicon { + top: 7px; } &.icon-gf { @@ -56,7 +60,7 @@ } .page-header__logo { - margin-right: $spacer/2; + margin: 0 $spacer; } .page-header__sub-title { @@ -68,3 +72,88 @@ text-transform: uppercase; } +.page-breadcrumbs { + display: flex; + padding: 10px 0; + line-height: 0.5; +} + +.breadcrumb { + display: inline-block; + box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); + overflow: hidden; + border-radius: 5px; + counter-reset: flag; +} + +.breadcrumb-item { + @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + + text-decoration: none; + outline: none; + display: block; + float: left; + font-size: 12px; + line-height: 30px; + padding: 0 7px 0 37px; + position: relative; + box-shadow: $card-shadow; + + &:first-child { + padding-left: 10px; + border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ + font-size: 18px; + } + + &:first-child:before { + left: 14px; + } + + &:last-child { + border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ + padding-right: 20px; + } + + &.active, + &:hover { + background: #333; + background: linear-gradient(#333, #000); + } + + &.active:after, + &:hover:after { + background: #333; + background: linear-gradient(135deg, #333, #000); + } + + &:after { + content: ''; + position: absolute; + top: 0; + right: -14px; // half of square's length + + // same dimension as the line-height of .breadcrumb-item + width: 30px; + height: 30px; + + transform: scale(0.707) rotate(45deg); + // we need to prevent the arrows from getting buried under the next link + z-index: 1; + + // background same as links but the gradient will be rotated to compensate with the transform applied + background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl); + + // stylish arrow design using box shadow + box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + + // 5px - for rounded arrows and + // 50px - to prevent hover glitches on the border created using shadows*/ + border-radius: 0 5px 0 50px; + } + + // we dont need an arrow after the last link + &:last-child:after { + content: none; + } +} + diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index bdb85d2a7ce..d9f91b07887 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -93,89 +93,3 @@ .page-sidebar-section { margin-bottom: $spacer*2; } - -.page-breadcrumbs { - display: flex; - padding: 10px 0; - line-height: 0.5; -} - -.breadcrumb { - display: inline-block; - box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); - overflow: hidden; - border-radius: 5px; - counter-reset: flag; -} - -.breadcrumb-item { - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); - - text-decoration: none; - outline: none; - display: block; - float: left; - font-size: 12px; - line-height: 30px; - padding: 0 7px 0 37px; - position: relative; - box-shadow: $card-shadow; - - &:first-child { - padding-left: 10px; - border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ - font-size: 18px; - } - - &:first-child:before { - left: 14px; - } - - &:last-child { - border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ - padding-right: 20px; - } - - &.active, - &:hover { - background: #333; - background: linear-gradient(#333, #000); - } - - &.active:after, - &:hover:after { - background: #333; - background: linear-gradient(135deg, #333, #000); - } - - &:after { - content: ''; - position: absolute; - top: 0; - right: -14px; // half of square's length - - // same dimension as the line-height of .breadcrumb-item - width: 30px; - height: 30px; - - transform: scale(0.707) rotate(45deg); - // we need to prevent the arrows from getting buried under the next link - z-index: 1; - - // background same as links but the gradient will be rotated to compensate with the transform applied - background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl); - - // stylish arrow design using box shadow - box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1); - - // 5px - for rounded arrows and - // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; - } - - // we dont need an arrow after the last link - &:last-child:after { - content: none; - } -} - From e53b55479abf8fa7152890fd9018d0fc71c99f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:47:21 +0100 Subject: [PATCH 332/584] ux: made plugins page work --- pkg/api/index.go | 2 +- public/app/features/org/all.ts | 1 + .../features/org/partials/user_groups.html | 9 +- public/app/features/org/user_groups_ctrl.ts | 2 +- .../plugins/partials/plugin_edit.html | 147 ++++++++---------- .../app/features/plugins/plugin_edit_ctrl.ts | 2 +- public/sass/layout/_page.scss | 18 +-- 7 files changed, 79 insertions(+), 102 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index a1939eab8f6..8f5e27023e9 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -226,7 +226,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, { Text: "Teams", - Id: "users", + Id: "teams", Description: "Manage org groups", Icon: "gicon gicon-user-group", Url: setting.AppSubUrl + "/org/user-groups", diff --git a/public/app/features/org/all.ts b/public/app/features/org/all.ts index 6b3eb67e7fb..a1106faf061 100644 --- a/public/app/features/org/all.ts +++ b/public/app/features/org/all.ts @@ -5,6 +5,7 @@ import './select_org_ctrl'; import './change_password_ctrl'; import './new_org_ctrl'; import './user_invite_ctrl'; +import './user_groups_ctrl'; import './org_api_keys_ctrl'; import './org_details_ctrl'; import './prefs_control'; diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index da3597c044b..2afeb203ea7 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -3,14 +3,13 @@
    -
    - - + + -
    -
    +
    diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts index 6534f749260..e3d99364595 100644 --- a/public/app/features/org/user_groups_ctrl.ts +++ b/public/app/features/org/user_groups_ctrl.ts @@ -15,7 +15,7 @@ export class UserGroupsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'users', 0); + this.navModel = navModelSrv.getNav('cfg', 'teams', 0); this.get(); } diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index adc1c637a28..9df2775cbb8 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,96 +1,73 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    +
    +
    +
    -
    -
    - +
    -
    - - - +
    +
    -
    -
    - -
    +
    + + +
    + +
    + + +
    diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index d2e704803ba..9daefdcbcf4 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -27,7 +27,7 @@ export class PluginEditCtrl { $routeParams, navModelSrv, ) { - this.navModel = navModelSrv.getNav('cfg', 'plugins'); + this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); this.model = {}; this.pluginId = $routeParams.pluginId; this.tabIndex = 0; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index d9f91b07887..19a4fb1b8e1 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -32,14 +32,6 @@ .page-body { padding-top: $spacer*2; - - &--with-sidebar { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - } } .page-heading { @@ -63,10 +55,18 @@ flex-grow: 1; } -.page-content-with-sidebar { +.sidebar-content { width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin } +.sidebar-container { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } +} + .page-sidebar { @include media-breakpoint-up(md) { width: $page-sidebar-width; From 92d9093fcaabf3b14fb01a11f825bbf02ac8133b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:48:55 +0100 Subject: [PATCH 333/584] fixed sass warnings --- public/sass/components/_page_header.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 24e1570b996..629fcc6f2ca 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -105,7 +105,7 @@ font-size: 18px; } - &:first-child:before { + &:first-child::before { left: 14px; } @@ -120,13 +120,13 @@ background: linear-gradient(#333, #000); } - &.active:after, - &:hover:after { + &.active::after, + &:hover::after { background: #333; background: linear-gradient(135deg, #333, #000); } - &:after { + &::after { content: ''; position: absolute; top: 0; @@ -152,7 +152,7 @@ } // we dont need an arrow after the last link - &:last-child:after { + &:last-child::after { content: none; } } From 75bb8944850f89afd69f8017c6882f16c6b654ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 11:32:00 +0100 Subject: [PATCH 334/584] ux: new page-header design, most pages beside admin done --- pkg/api/dtos/index.go | 1 + pkg/api/index.go | 8 ++++-- public/app/core/components/PageHeader.tsx | 4 +++ public/app/core/nav_model_srv.ts | 2 ++ .../alerting/notification_edit_ctrl.ts | 5 ++-- .../alerting/partials/notification_edit.html | 10 +++---- .../features/dashboard/dashboard_list_ctrl.ts | 2 +- .../dashboard/partials/dashboardList.html | 20 ++++++------- public/app/features/org/org_api_keys_ctrl.ts | 2 +- .../app/features/org/partials/orgApiKeys.html | 12 ++++---- .../features/playlist/partials/playlist.html | 12 ++++---- .../features/playlist/partials/playlists.html | 12 ++++---- .../features/playlist/playlist_edit_ctrl.ts | 12 ++++---- .../app/features/playlist/playlists_ctrl.ts | 2 +- .../features/plugins/partials/ds_edit.html | 28 ------------------- .../features/snapshot/partials/snapshots.html | 10 ++----- public/app/features/snapshot/snapshot_ctrl.ts | 2 +- public/sass/components/_page_header.scss | 2 +- 18 files changed, 58 insertions(+), 88 deletions(-) diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 8f1cdd9a92d..8c7f505277d 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -31,5 +31,6 @@ type NavLink struct { Target string `json:"target,omitempty"` Divider bool `json:"divider,omitempty"` HideFromMenu bool `json:"hideFromMenu,omitempty"` + HideFromTabs bool `json:"hideFromTabs,omitempty"` Children []*NavLink `json:"children,omitempty"` } diff --git a/pkg/api/index.go b/pkg/api/index.go index 8f5e27023e9..a0f21cc9571 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } dashboardChildNavs := []*dtos.NavLink{ - {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"}, + {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true}, + {Divider: true}, + {Text: "Manage", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, - {Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Dashboards", Id: "dashboards", + SubTitle: "Manage dashboards & folders", Icon: "gicon gicon-dashboard", - Url: setting.AppSubUrl + "/", + Url: setting.AppSubUrl + "/dashboards", Children: dashboardChildNavs, }) diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx index cf3aa0d0cd4..57bcdc3b896 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader.tsx @@ -28,6 +28,10 @@ export interface IProps { // } function TabItem(tab: NavModelItem) { + if (tab.hideFromTabs || tab.divider) { + return (null); + } + let tabClasses = classNames({ 'gf-tabs-link': true, active: tab.active, diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index bfc275015db..81a82cd4c5f 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -9,6 +9,8 @@ export interface NavModelItem { img?: string; id: string; active?: boolean; + hideFromTabs?: boolean; + divider?: boolean; children: NavModelItem[]; } diff --git a/public/app/features/alerting/notification_edit_ctrl.ts b/public/app/features/alerting/notification_edit_ctrl.ts index a4ab20e8cf7..bb20b6fbde2 100644 --- a/public/app/features/alerting/notification_edit_ctrl.ts +++ b/public/app/features/alerting/notification_edit_ctrl.ts @@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl { testSeverity = "critical"; notifiers: any; notifierTemplateId: string; - + isNew: boolean; model: any; defaults: any = { type: 'email', @@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl { /** @ngInject */ constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting', 'channels'); + this.navModel = navModelSrv.getNav('alerting', 'channels', 0); + this.isNew = !this.$routeParams.id; this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => { this.notifiers = notifiers; diff --git a/public/app/features/alerting/partials/notification_edit.html b/public/app/features/alerting/partials/notification_edit.html index 2cd0c7984e1..35e335bb02b 100644 --- a/public/app/features/alerting/partials/notification_edit.html +++ b/public/app/features/alerting/partials/notification_edit.html @@ -1,9 +1,9 @@ - + -
    -
    - -
    +
    + +

    Edit Notification Channel

    +

    New Notification Channel

    diff --git a/public/app/features/dashboard/dashboard_list_ctrl.ts b/public/app/features/dashboard/dashboard_list_ctrl.ts index 08bba6450f9..93e9df84c15 100644 --- a/public/app/features/dashboard/dashboard_list_ctrl.ts +++ b/public/app/features/dashboard/dashboard_list_ctrl.ts @@ -17,7 +17,7 @@ export class DashboardListCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'dashboards'); + this.navModel = navModelSrv.getNav('dashboards', 'dashboards', 0); this.query = {query: '', mode: 'tree', tag: [], starred: false}; this.selectedStarredFilter = this.starredFilterOptions[0]; diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 405332128cd..70a19e15718 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -1,8 +1,12 @@ - -
    -
    -

    Dashboards

    + +
    +
    +
    + + +
    +
    Dashboard @@ -12,14 +16,6 @@ Folder
    -
    -
    - - - -
    -
    Filters: diff --git a/public/app/features/org/org_api_keys_ctrl.ts b/public/app/features/org/org_api_keys_ctrl.ts index 368370bed9a..a2639e5c052 100644 --- a/public/app/features/org/org_api_keys_ctrl.ts +++ b/public/app/features/org/org_api_keys_ctrl.ts @@ -4,7 +4,7 @@ export class OrgApiKeysCtrl { /** @ngInject **/ constructor ($scope, $http, backendSrv, navModelSrv) { - $scope.navModel = navModelSrv.getNav('cfg', 'apikeys'); + $scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0); $scope.roleTypes = ['Viewer', 'Editor', 'Admin']; $scope.token = { role: 'Viewer' }; diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 4c9d1e3bfcf..854af218e77 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,11 +1,9 @@ - + -
    -
    - -
    +
    + +

    Add new

    -

    Add new

    @@ -22,7 +20,7 @@
    -

    Existing Keys

    +

    Existing Keys

    diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 233f3ae3e2e..c07fce48d02 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,9 +1,9 @@ - + -
    -
    - -
    +
    + +

    Edit Playlist

    +

    New Playlist

    A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.

    @@ -103,7 +103,7 @@
    - Create new playlist + -
    -
    - - +
    +
    +
    +     New Playlist
    -
    +
    diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index f69279917cb..e876eec1a33 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import coreModule from '../../core/core_module'; @@ -11,10 +9,12 @@ export class PlaylistEditCtrl { playlist: any = { interval: '5m', }; + playlistItems: any = []; dashboardresult: any = []; tagresult: any = []; navModel: any; + isNew: boolean; /** @ngInject */ constructor( @@ -24,7 +24,9 @@ export class PlaylistEditCtrl { $route, navModelSrv ) { - this.navModel = navModelSrv.getNav('dashboards', 'playlists'); + + this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0); + this.isNew = $route.current.params.id; if ($route.current.params.id) { var playlistId = $route.current.params.id; @@ -104,10 +106,6 @@ export class PlaylistEditCtrl { }); } - isNew() { - return !this.playlist.id; - } - isPlaylistEmpty() { return !this.playlistItems.length; } diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts index f732c66c604..eadb7a6eacd 100644 --- a/public/app/features/playlist/playlists_ctrl.ts +++ b/public/app/features/playlist/playlists_ctrl.ts @@ -9,7 +9,7 @@ export class PlaylistsCtrl { /** @ngInject */ constructor(private $scope, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'playlists'); + this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0); backendSrv.get('/api/playlists').then(result => { this.playlists = result; diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 38ae83cd9d3..53a7405e943 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,31 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index 8921109dfd5..8775b527ae1 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,11 +1,7 @@ - + -
    -
    - -
    - -
    Name Start url
    +
    +
    diff --git a/public/app/features/snapshot/snapshot_ctrl.ts b/public/app/features/snapshot/snapshot_ctrl.ts index b4b33d80236..0abb3db47f9 100644 --- a/public/app/features/snapshot/snapshot_ctrl.ts +++ b/public/app/features/snapshot/snapshot_ctrl.ts @@ -9,7 +9,7 @@ export class SnapshotsCtrl { /** @ngInject */ constructor(private $rootScope, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'snapshots'); + this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0); this.backendSrv.get('/api/dashboard/snapshots').then(result => { this.snapshots = result; }); diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 629fcc6f2ca..ebc16a49fd4 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -51,7 +51,7 @@ } &.gicon { - top: 7px; + top: 9px; } &.icon-gf { From 6bff4164300df1a2aee3b43f8335402ecf089285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 12:51:46 +0100 Subject: [PATCH 335/584] navigation: more progress on new page header --- pkg/api/index.go | 42 +++++++++---------- public/app/core/components/PageHeader.tsx | 2 +- .../dashboard/partials/dashboardList.html | 12 +++--- public/sass/components/_dropdown.scss | 1 - public/sass/components/_page_header.scss | 2 +- 5 files changed, 28 insertions(+), 31 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index a0f21cc9571..3c4d658ce19 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -102,7 +102,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { dashboardChildNavs := []*dtos.NavLink{ {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true}, - {Divider: true}, + {Divider: true, HideFromTabs: true}, {Text: "Manage", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, @@ -113,7 +113,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Id: "dashboards", SubTitle: "Manage dashboards & folders", Icon: "gicon gicon-dashboard", - Url: setting.AppSubUrl + "/dashboards", + Url: setting.AppSubUrl + "/", Children: dashboardChildNavs, }) @@ -239,11 +239,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Description: "View and configure plugins", Icon: "icon-gf icon-gf-fw icon-gf-apps", Url: setting.AppSubUrl + "/plugins", - // Children: []*dtos.NavLink{ - // {Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"}, - // {Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"}, - // {Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"}, - // }, }, { Text: "Preferences", @@ -263,21 +258,24 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, } - // if c.IsGrafanaAdmin { - // cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ - // Text: "Server Admin", - // Id: "admin", - // Icon: "fa fa-fw fa-shield", - // Url: setting.AppSubUrl + "/admin", - // Children: []*dtos.NavLink{ - // {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, - // {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, - // {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, - // {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, - // {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, - // }, - // }) - // } + if c.IsGrafanaAdmin { + cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ + Divider: true, HideFromTabs: true, + }) + cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ + Text: "Server Admin", + Id: "admin", + Icon: "fa fa-fw fa-shield", + Url: setting.AppSubUrl + "/admin", + Children: []*dtos.NavLink{ + {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, + {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, + {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, + {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, + {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, + }, + }) + } data.NavTree = append(data.NavTree, cfgNode) } diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx index 57bcdc3b896..7ed72d41b84 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader.tsx @@ -28,7 +28,7 @@ export interface IProps { // } function TabItem(tab: NavModelItem) { - if (tab.hideFromTabs || tab.divider) { + if (tab.hideFromTabs) { return (null); } diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 70a19e15718..9fb598cd80b 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -2,17 +2,17 @@
    -
    +
    - +
    - - + + Dashboard - - + + Folder
    diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index cc6007d0be4..969a4477a93 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -91,7 +91,6 @@ color: $link-color-disabled; position: relative; top: 3px; - padding-left: 5px; } .gicon { diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index ebc16a49fd4..1211e244a91 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -51,7 +51,7 @@ } &.gicon { - top: 9px; + top: 10px; } &.icon-gf { From 68580f06a30db2c2dcf6904183d70203e928171b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 13:49:15 +0100 Subject: [PATCH 336/584] page header now on 99% of pages --- pkg/api/index.go | 20 ++++---- public/app/core/routes/routes.ts | 6 --- public/app/features/admin/admin.ts | 16 ++----- .../app/features/admin/admin_edit_org_ctrl.ts | 2 +- .../features/admin/admin_edit_user_ctrl.ts | 2 +- .../features/admin/admin_list_orgs_ctrl.ts | 2 +- .../features/admin/admin_list_users_ctrl.ts | 2 +- .../features/admin/partials/admin_home.html | 36 +++------------ .../admin/partials/configuration_home.html | 29 ------------ .../app/features/admin/partials/edit_org.html | 8 ++-- .../features/admin/partials/edit_user.html | 25 +++++----- .../app/features/admin/partials/new_user.html | 6 +-- public/app/features/admin/partials/orgs.html | 12 +++-- .../app/features/admin/partials/settings.html | 35 +++++++------- public/app/features/admin/partials/stats.html | 8 +--- public/app/features/admin/partials/users.html | 20 ++++---- .../app/features/org/change_password_ctrl.ts | 2 +- public/app/features/org/new_org_ctrl.ts | 2 +- .../org/partials/change_password.html | 10 ++-- public/app/features/org/partials/newOrg.html | 10 ++-- .../app/features/org/partials/orgApiKeys.html | 4 +- .../app/features/org/partials/orgDetails.html | 31 ------------- public/app/features/org/prefs_control.ts | 2 +- .../app/features/styleguide/styleguide.html | 46 +++++-------------- public/app/features/styleguide/styleguide.ts | 4 +- public/sass/base/_icons.scss | 5 +- public/sass/components/_page_header.scss | 2 +- 27 files changed, 110 insertions(+), 237 deletions(-) delete mode 100644 public/app/features/admin/partials/configuration_home.html diff --git a/pkg/api/index.go b/pkg/api/index.go index 3c4d658ce19..eb9e70bb404 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -263,16 +263,18 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Divider: true, HideFromTabs: true, }) cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ - Text: "Server Admin", - Id: "admin", - Icon: "fa fa-fw fa-shield", - Url: setting.AppSubUrl + "/admin", + Text: "Server Admin", + HideFromTabs: true, + SubTitle: "Manage all users & orgs", + Id: "admin", + Icon: "fa fa-fw fa-shield", + Url: setting.AppSubUrl + "/admin/users", Children: []*dtos.NavLink{ - {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, - {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, - {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, - {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, - {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, + {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users", Icon: "icon-gf icon-gf-fw icon-gf-users"}, + {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs", Icon: "gicon gicon-org"}, + {Text: "Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings", Icon: "fa fa-fw fa-sliders"}, + {Text: "Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats", Icon: "fa fa-fw fa-bar-chart"}, + {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide", Icon: "fa fa-fw fa-eyedropper"}, }, }) } diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 24f9101a88f..68595da4296 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -48,12 +48,6 @@ function setupAngularRoutes($routeProvider, $locationProvider) { reloadOnSearch: false, pageClass: 'page-dashboard', }) - .when('/configuration', { - templateUrl: 'public/app/features/admin/partials/configuration_home.html', - controller : 'ConfigurationHomeCtrl', - controllerAs: 'ctrl', - resolve: loadAdminBundle, - }) .when('/datasources', { templateUrl: 'public/app/features/plugins/partials/ds_list.html', controller : 'DataSourcesCtrl', diff --git a/public/app/features/admin/admin.ts b/public/app/features/admin/admin.ts index 4092669cb15..6683ad6e85b 100644 --- a/public/app/features/admin/admin.ts +++ b/public/app/features/admin/admin.ts @@ -10,7 +10,7 @@ class AdminSettingsCtrl { /** @ngInject **/ constructor($scope, backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings'); + this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings', 1); backendSrv.get('/api/admin/settings').then(function(settings) { $scope.settings = settings; @@ -24,7 +24,7 @@ class AdminHomeCtrl { /** @ngInject **/ constructor(navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'admin'); + this.navModel = navModelSrv.getNav('cfg', 'admin', 1); } } @@ -34,7 +34,7 @@ export class AdminStatsCtrl { /** @ngInject */ constructor(backendSrv: any, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats'); + this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats', 1); backendSrv.get('/api/admin/stats').then(stats => { this.stats = stats; @@ -42,16 +42,6 @@ export class AdminStatsCtrl { } } -export class ConfigurationHomeCtrl { - navModel: any; - - /** @ngInject */ - constructor(navModelSrv) { - this.navModel = navModelSrv.getNav('cfg'); - } -} - -coreModule.controller('ConfigurationHomeCtrl', ConfigurationHomeCtrl); coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl); coreModule.controller('AdminHomeCtrl', AdminHomeCtrl); coreModule.controller('AdminStatsCtrl', AdminStatsCtrl); diff --git a/public/app/features/admin/admin_edit_org_ctrl.ts b/public/app/features/admin/admin_edit_org_ctrl.ts index 40ad467da9f..2c69c00ef9d 100644 --- a/public/app/features/admin/admin_edit_org_ctrl.ts +++ b/public/app/features/admin/admin_edit_org_ctrl.ts @@ -5,7 +5,7 @@ export class AdminEditOrgCtrl { /** @ngInject */ constructor($scope, $routeParams, backendSrv, $location, navModelSrv) { $scope.init = function() { - $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs'); + $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1); if ($routeParams.id) { $scope.getOrg($routeParams.id); diff --git a/public/app/features/admin/admin_edit_user_ctrl.ts b/public/app/features/admin/admin_edit_user_ctrl.ts index 714f38357a9..1ed885505c3 100644 --- a/public/app/features/admin/admin_edit_user_ctrl.ts +++ b/public/app/features/admin/admin_edit_user_ctrl.ts @@ -8,7 +8,7 @@ export class AdminEditUserCtrl { $scope.user = {}; $scope.newOrg = { name: '', role: 'Editor' }; $scope.permissions = {}; - $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users'); + $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1); $scope.init = function() { if ($routeParams.id) { diff --git a/public/app/features/admin/admin_list_orgs_ctrl.ts b/public/app/features/admin/admin_list_orgs_ctrl.ts index 4b016d430de..e8722f7e19b 100644 --- a/public/app/features/admin/admin_list_orgs_ctrl.ts +++ b/public/app/features/admin/admin_list_orgs_ctrl.ts @@ -5,7 +5,7 @@ export class AdminListOrgsCtrl { /** @ngInject */ constructor($scope, backendSrv, navModelSrv) { $scope.init = function() { - $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs'); + $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1); $scope.getOrgs(); }; diff --git a/public/app/features/admin/admin_list_users_ctrl.ts b/public/app/features/admin/admin_list_users_ctrl.ts index b2fcf403702..1574bd07a77 100644 --- a/public/app/features/admin/admin_list_users_ctrl.ts +++ b/public/app/features/admin/admin_list_users_ctrl.ts @@ -10,7 +10,7 @@ export default class AdminListUsersCtrl { /** @ngInject */ constructor(private $scope, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users'); + this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1); this.query = ''; this.getUsers(); } diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html index 266a4698cdc..ea61385f006 100644 --- a/public/app/features/admin/partials/admin_home.html +++ b/public/app/features/admin/partials/admin_home.html @@ -1,35 +1,11 @@ - + -
    -
    - -
    +
    -
    -
      -
    1. - -
      -
      -
      -
      -
      -
      - -
      -
      -
      - {{navItem.text}} -
      -
      - {{navItem.description}} -
      -
      -
      -       -
      2. -
    -
    +
    + Grafana is a multi-tenant system where most can be configured per organization. These + admin pages are for server admins where you can manage orgs, & all users across all orgs. +
    diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html deleted file mode 100644 index 7ebc5127b4a..00000000000 --- a/public/app/features/admin/partials/configuration_home.html +++ /dev/null @@ -1,29 +0,0 @@ - - -
    -
    -
      -
    1. - -
      -
      -
      -
      -
      -
      - -
      -
      -
      - {{navItem.text}} -
      -
      - {{navItem.description}} -
      -
      -
      -       -
      2. -
    -
    -
    diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 39028645b38..c50cf2c7701 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -1,9 +1,7 @@ - + -
    -
    -

    Edit Organization

    -
    +
    +

    Edit Organization

    diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 384601affb7..7686ac7f079 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -1,8 +1,9 @@ - + -
    -
    -

    Edit User

    +
    + +
    +

    Edit User

    @@ -54,7 +55,7 @@
    - Add organization + Add
    @@ -67,12 +68,14 @@
    -
    Name Snapshot url
    - - - - - +
    NameRole
    + + + + + + + '); - tbodyElem.css("max-height", maxHeight - topPadding); tbodyElem.append(tableHeaderElem); tbodyElem.append(seriesElements); - $container.append(tbodyElem); + elem.append(tbodyElem); } else { - var maxLegendHeight = ctrl.height / 2; - $container.css("max-height", maxLegendHeight - 6); - $container.append(seriesElements); + elem.append(seriesElements); + } - if (!legendScrollbar) { - legendScrollbar = new PerfectScrollbar($container[0]); - } + if (!legendScrollbar) { + legendScrollbar = new PerfectScrollbar(elem[0]); + } else { legendScrollbar.update(); } } diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index 6ded97ce33a..0b9eb8227df 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/public/app/plugins/panel/graph/template.ts @@ -1,22 +1,10 @@ var template = ` -
    -
    - -
    - {{ctrl.dataWarning.title}} -
    - -
    -
    - +
    +
    -
    -
    - -
    +
    +
    `; export default template; - - diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index fcf95d6d702..119f1c905cc 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -1,10 +1,39 @@ -.graph-canvas-wrapper { - position: relative; - cursor: crosshair; +.graph-panel { + display: flex; + flex-direction: column; + height: 100%; + + &--legend-right { + flex-direction: row; + + // .graph-panel__chart { + // display: table-cell; + // width: 100%; + // position: relative; + // } + + .graph-legend { + max-height: 100%; + position: relative; + left: 4px; + margin: 0 0 0 1rem; + } + + .graph-legend-series { + display: block; + padding-left: 0px; + } + + .graph-legend-table .graph-legend-series { + display: table-row; + } + } } -.histogram-chart { +.graph-panel__chart { position: relative; + cursor: crosshair; + flex-grow: 1; } .datapoints-warning { @@ -23,6 +52,8 @@ .graph-legend { @include clearfix(); + flex: 0 1 auto; + max-height: 30%; margin: 0 $spacer; text-align: center; width: calc(100% - $spacer); @@ -161,39 +192,6 @@ } } -.graph-legend-rightside { - - &.graph-wrapper { - display: table; - width: 100%; - } - - .graph-canvas-wrapper { - display: table-cell; - width: 100%; - position: relative; - } - - .graph-legend-wrapper { - display: table-cell; - vertical-align: top; - position: relative; - left: 4px; - } - - .graph-legend { - margin: 0 0 0 1rem; - } - - .graph-legend-series { - display: block; - padding-left: 0px; - } - - .graph-legend-table .graph-legend-series { - display: table-row; - } -} .graph-legend-series-hidden { .graph-legend-value, From 3de17ecda7285c20cd826ebd33b69ea254906f18 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 10:21:00 +0300 Subject: [PATCH 402/584] dashboard grid: enable CSS transforms (#10125) --- .../dashboard/dashgrid/DashboardGrid.tsx | 2 +- public/app/features/panel/panel_header.ts | 26 +++++++++++++++++++ public/sass/components/_dashboard_grid.scss | 7 +++++ 3 files changed, 34 insertions(+), 1 deletion(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 283bf0c74d3..bb06df15183 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -30,7 +30,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize isResizable={true} measureBeforeMount={false} containerPadding={[0, 0]} - useCSSTransforms={false} + useCSSTransforms={true} margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]} cols={GRID_COLUMN_COUNT} rowHeight={GRID_CELL_HEIGHT} diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 846202bc61d..eba8d24bdfd 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -1,5 +1,6 @@ /// +import $ from 'jquery'; import {coreModule} from 'app/core/core'; var template = ` @@ -106,13 +107,38 @@ function panelHeader($compile) { } }); + elem.find('.panel-menu-toggle').click((evt) => { + console.log(evt); + togglePanelState(); + }); + function togglePanelMenu(e) { if (!isDragged) { e.stopPropagation(); + togglePanelState(); elem.find('[data-toggle=dropdown]').dropdown('toggle'); } } + /** + * Hack for adding special class 'dropdown-menu-open' to the panel. + * This class sets z-index for panel and prevents menu overlapping. + */ + function togglePanelState() { + const menuOpenClass = 'dropdown-menu-open'; + const panelGridClass = '.react-grid-item.panel'; + + let panelElem = elem.find('[data-toggle=dropdown]').parentsUntil('.panel').parent(); + let menuElem = elem.find('[data-toggle=dropdown]').parent(); + panelElem = panelElem && panelElem.length ? panelElem[0] : undefined; + if (panelElem) { + panelElem = $(panelElem); + $(panelGridClass).removeClass(menuOpenClass); + let state = !menuElem.hasClass('open'); + panelElem.toggleClass(menuOpenClass, state); + } + } + let mouseX, mouseY; elem.mousedown((e) => { mouseX = e.pageX; diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index b7886a3a2dc..a2ec6f5ff4c 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -47,3 +47,10 @@ } } +// Hack for preventing panel menu overlapping. +.react-grid-item.resizing.panel, +.react-grid-item.panel.dropdown-menu-open, +.react-grid-item.react-draggable-dragging.panel { + z-index: $zindex-dropdown; +} + From cd3cf5d19b9ffb413bd7000f74294073e6ee1900 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 10:43:47 +0300 Subject: [PATCH 403/584] grid css transforms: minor refactor (#10128) --- public/app/features/panel/panel_header.ts | 9 ++++----- public/sass/components/_dashboard_grid.scss | 1 - 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index eba8d24bdfd..c83aea05527 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -107,15 +107,14 @@ function panelHeader($compile) { } }); - elem.find('.panel-menu-toggle').click((evt) => { - console.log(evt); - togglePanelState(); + elem.find('.panel-menu-toggle').click(() => { + togglePanelStackPosition(); }); function togglePanelMenu(e) { if (!isDragged) { e.stopPropagation(); - togglePanelState(); + togglePanelStackPosition(); elem.find('[data-toggle=dropdown]').dropdown('toggle'); } } @@ -124,7 +123,7 @@ function panelHeader($compile) { * Hack for adding special class 'dropdown-menu-open' to the panel. * This class sets z-index for panel and prevents menu overlapping. */ - function togglePanelState() { + function togglePanelStackPosition() { const menuOpenClass = 'dropdown-menu-open'; const panelGridClass = '.react-grid-item.panel'; diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index a2ec6f5ff4c..076e8cad0b7 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -53,4 +53,3 @@ .react-grid-item.react-draggable-dragging.panel { z-index: $zindex-dropdown; } - From 4aad4a069c843eaba6cebf16ba52673d4351b6ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 10:54:53 +0100 Subject: [PATCH 404/584] ux: graph legend refactoring --- public/app/plugins/panel/graph/legend.ts | 10 +++++----- public/sass/components/_panel_graph.scss | 14 +++----------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 4444c8b35ce..e7589170301 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -220,12 +220,12 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { elem.append(tbodyElem); } else { elem.append(seriesElements); - } - if (!legendScrollbar) { - legendScrollbar = new PerfectScrollbar(elem[0]); - } else { - legendScrollbar.update(); + if (!legendScrollbar) { + legendScrollbar = new PerfectScrollbar(elem[0]); + } else { + legendScrollbar.update(); + } } } } diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 119f1c905cc..c28a608052d 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -6,17 +6,9 @@ &--legend-right { flex-direction: row; - // .graph-panel__chart { - // display: table-cell; - // width: 100%; - // position: relative; - // } - .graph-legend { + flex: 0 1 10px; max-height: 100%; - position: relative; - left: 4px; - margin: 0 0 0 1rem; } .graph-legend-series { @@ -51,12 +43,10 @@ } .graph-legend { - @include clearfix(); flex: 0 1 auto; max-height: 30%; margin: 0 $spacer; text-align: center; - width: calc(100% - $spacer); padding-top: 6px; position: relative; @@ -121,7 +111,9 @@ display: block; overflow-y: auto; overflow-x: hidden; + height: 100%; padding-bottom: 1px; + padding-right: 5px; } .graph-legend-series { From f78f86d0ab19f631f6f7b39e88b4f0fe48a585aa Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 8 Dec 2017 11:23:57 +0100 Subject: [PATCH 405/584] dashfolders: Hide search input area when showing CTA. #10083 --- .../core/components/manage_dashboards/manage_dashboards.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index 5daa8ddf55a..957bca0262c 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -1,4 +1,4 @@ -
    +
    From 35a7109a6af58ae69ef7f2566ded2d11b9a0f743 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 11:45:44 +0100 Subject: [PATCH 406/584] refactoring: fixing bug when all values are null --- public/app/core/time_series2.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts index c1caf82b348..5a242a5abc1 100644 --- a/public/app/core/time_series2.ts +++ b/public/app/core/time_series2.ts @@ -44,12 +44,18 @@ export function updateLegendValues(data: TimeSeries[], panel) { } export function getDataMinMax(data: TimeSeries[]) { - const datamin = _.minBy(data, (series) => { - return series.stats.min; - }).stats.min; - const datamax = _.maxBy(data, (series: TimeSeries) => { - return series.stats.max; - }).stats.max; + let datamin = null; + let datamax = null; + + for (let series of data) { + if (datamax === null || datamax < series.stats.max) { + datamax = series.stats.max; + } + if (datamin === null || datamin > series.stats.min) { + datamin = series.stats.min; + } + } + return {datamin, datamax}; } From e0c173c5afd3a353fda6fc2fdca396438a5e71b6 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 13:49:14 +0300 Subject: [PATCH 407/584] Don't animate panels on initial render (#10130) * grid: dont animate panels on initial render * grid: dont animate panels on initial render --- .../dashboard/dashgrid/DashboardGrid.tsx | 76 ++++++++++++------- public/sass/components/_dashboard_grid.scss | 9 +++ 2 files changed, 58 insertions(+), 27 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index bb06df15183..392d8f4e805 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -11,37 +11,59 @@ import sizeMe from 'react-sizeme'; let lastGridWidth = 1200; -function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) { - if (size.width === 0) { - console.log('size is zero!'); +export interface GridWrapperProps { + size: any; + layout: any; + children: any; + onResize: any; + onResizeStop: any; + onWidthChange: any; + onLayoutChange: any; +} + +class GridWrapper extends React.Component { + animated: boolean; + + constructor(props) { + super(props); + if (this.props.size.width === 0) { + console.log('size is zero!'); + } + + const width = this.props.size.width > 0 ? this.props.size.width : lastGridWidth; + if (width !== lastGridWidth) { + this.props.onWidthChange(); + lastGridWidth = width; + } } - const width = size.width > 0 ? size.width : lastGridWidth; - if (width !== lastGridWidth) { - onWidthChange(); - lastGridWidth = width; + componentDidMount() { + // Disable animation on initial rendering and enable it when component has been mounted. + this.animated = true; } - return ( - - {children} - - ); + render() { + return ( + + {this.props.children} + + ); + } } const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper); diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 076e8cad0b7..656efe4c880 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -53,3 +53,12 @@ .react-grid-item.react-draggable-dragging.panel { z-index: $zindex-dropdown; } + +// Disable animation on initial rendering and enable it when component has been mounted. +.react-grid-item.cssTransforms.panel { + transition-property: none; +} + +.animated .react-grid-item.cssTransforms.panel { + transition-property: transform; +} From 974d4d9739e43e537f679e9a11f6a8ef5c70fe16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 11:53:51 +0100 Subject: [PATCH 408/584] Revert "Don't animate panels on initial render (#10130)" This reverts commit e0c173c5afd3a353fda6fc2fdca396438a5e71b6. --- .../dashboard/dashgrid/DashboardGrid.tsx | 76 +++++++------------ public/sass/components/_dashboard_grid.scss | 9 --- 2 files changed, 27 insertions(+), 58 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 392d8f4e805..bb06df15183 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -11,59 +11,37 @@ import sizeMe from 'react-sizeme'; let lastGridWidth = 1200; -export interface GridWrapperProps { - size: any; - layout: any; - children: any; - onResize: any; - onResizeStop: any; - onWidthChange: any; - onLayoutChange: any; -} - -class GridWrapper extends React.Component { - animated: boolean; - - constructor(props) { - super(props); - if (this.props.size.width === 0) { - console.log('size is zero!'); - } - - const width = this.props.size.width > 0 ? this.props.size.width : lastGridWidth; - if (width !== lastGridWidth) { - this.props.onWidthChange(); - lastGridWidth = width; - } +function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) { + if (size.width === 0) { + console.log('size is zero!'); } - componentDidMount() { - // Disable animation on initial rendering and enable it when component has been mounted. - this.animated = true; + const width = size.width > 0 ? size.width : lastGridWidth; + if (width !== lastGridWidth) { + onWidthChange(); + lastGridWidth = width; } - render() { - return ( - - {this.props.children} - - ); - } + return ( + + {children} + + ); } const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper); diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 656efe4c880..076e8cad0b7 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -53,12 +53,3 @@ .react-grid-item.react-draggable-dragging.panel { z-index: $zindex-dropdown; } - -// Disable animation on initial rendering and enable it when component has been mounted. -.react-grid-item.cssTransforms.panel { - transition-property: none; -} - -.animated .react-grid-item.cssTransforms.panel { - transition-property: transform; -} From e03abde778dcff9302e0a5b3b25affde461434cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 12:17:09 +0100 Subject: [PATCH 409/584] refactoring: #10130 --- .../dashboard/dashgrid/DashboardGrid.tsx | 16 ++++++++++++++-- public/app/plugins/panel/graph/legend.ts | 2 +- public/sass/components/_dashboard_grid.scss | 9 +++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index bb06df15183..467a65597a5 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -11,7 +11,7 @@ import sizeMe from 'react-sizeme'; let lastGridWidth = 1200; -function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) { +function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange, className}) { if (size.width === 0) { console.log('size is zero!'); } @@ -25,7 +25,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize return ( { this.onResizeStop = this.onResizeStop.bind(this); this.onWidthChange = this.onWidthChange.bind(this); + this.state = {animated: false}; + // subscribe to dashboard events this.dashboard = this.panelContainer.getDashboard(); this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this)); @@ -134,6 +136,14 @@ export class DashboardGrid extends React.Component { this.panelMap[newItem.i].resizeDone(); } + componentDidMount() { + setTimeout(() => { + this.setState(() => { + return {animated: true}; + }); + }); + } + renderPanels() { const panelElements = []; @@ -150,8 +160,10 @@ export class DashboardGrid extends React.Component { } render() { + console.log('animated', this.state.animated); return ( Date: Fri, 8 Dec 2017 12:26:19 +0100 Subject: [PATCH 410/584] tech: updated ngreact and with custom PR applied --- package.json | 1 - public/app/app.ts | 1 - public/app/core/components/grafana_app.ts | 2 - public/app/core/core.ts | 1 + public/app/core/services/ng_react.ts | 301 ++++++++++++++++++ .../dashboard/dashgrid/DashboardGrid.tsx | 1 - 6 files changed, 302 insertions(+), 5 deletions(-) create mode 100644 public/app/core/services/ng_react.ts diff --git a/package.json b/package.json index 492bbf5359e..59608e80403 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,6 @@ "lodash": "^4.17.4", "moment": "^2.18.1", "mousetrap": "^1.6.0", - "ngreact": "^0.4.1", "perfect-scrollbar": "^1.2.0", "prop-types": "^15.6.0", "react": "^16.1.1", diff --git a/public/app/app.ts b/public/app/app.ts index 8e345c6abed..b76dceb4943 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -9,7 +9,6 @@ import 'angular-native-dragdrop'; import 'angular-bindonce'; import 'react'; import 'react-dom'; -import 'ngreact'; import 'vendor/bootstrap/bootstrap'; import 'vendor/angular-ui/ui-bootstrap-tpls'; diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 39601f903ec..eff55405d6f 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -1,5 +1,3 @@ -/// - import config from 'app/core/config'; import _ from 'lodash'; import $ from 'jquery'; diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 2c5c5653fb2..5a9b4265f8c 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -18,6 +18,7 @@ import './components/colorpicker/ColorPicker'; import './components/colorpicker/SeriesColorPicker'; import './components/colorpicker/spectrum_picker'; import './services/search_srv'; +import './services/ng_react'; import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; diff --git a/public/app/core/services/ng_react.ts b/public/app/core/services/ng_react.ts new file mode 100644 index 00000000000..9922772c730 --- /dev/null +++ b/public/app/core/services/ng_react.ts @@ -0,0 +1,301 @@ +// +// This is using ng-react with this PR applied https://github.com/ngReact/ngReact/pull/199 +// + + +// # ngReact +// ### Use React Components inside of your Angular applications +// +// Composed of +// - reactComponent (generic directive for delegating off to React Components) +// - reactDirective (factory for creating specific directives that correspond to reactComponent directives) + +import React from 'react'; +import ReactDOM from 'react-dom'; +import angular from 'angular'; + +// get a react component from name (components can be an angular injectable e.g. value, factory or +// available on window +function getReactComponent(name, $injector) { + // if name is a function assume it is component and return it + if (angular.isFunction(name)) { + return name; + } + + // a React component name must be specified + if (!name) { + throw new Error('ReactComponent name attribute must be specified'); + } + + // ensure the specified React component is accessible, and fail fast if it's not + var reactComponent; + try { + reactComponent = $injector.get(name); + } catch (e) {} + + if (!reactComponent) { + try { + reactComponent = name.split('.').reduce(function(current, namePart) { + return current[namePart]; + }, window); + } catch (e) {} + } + + if (!reactComponent) { + throw Error('Cannot find react component ' + name); + } + + return reactComponent; +} + +// wraps a function with scope.$apply, if already applied just return +function applied(fn, scope) { + if (fn.wrappedInApply) { + return fn; + } + var wrapped: any = function() { + var args = arguments; + var phase = scope.$root.$$phase; + if (phase === '$apply' || phase === '$digest') { + return fn.apply(null, args); + } else { + return scope.$apply(function() { + return fn.apply(null, args); + }); + } + }; + wrapped.wrappedInApply = true; + return wrapped; +} + +/** + * wraps functions on obj in scope.$apply + * + * keeps backwards compatibility, as if propsConfig is not passed, it will + * work as before, wrapping all functions and won't wrap only when specified. + * + * @version 0.4.1 + * @param obj react component props + * @param scope current scope + * @param propsConfig configuration object for all properties + * @returns {Object} props with the functions wrapped in scope.$apply + */ +function applyFunctions(obj, scope, propsConfig?) { + return Object.keys(obj || {}).reduce(function(prev, key) { + var value = obj[key]; + var config = (propsConfig || {})[key] || {}; + /** + * wrap functions in a function that ensures they are scope.$applied + * ensures that when function is called from a React component + * the Angular digest cycle is run + */ + prev[key] = angular.isFunction(value) && config.wrapApply !== false ? applied(value, scope) : value; + + return prev; + }, {}); +} + +/** + * + * @param watchDepth (value of HTML watch-depth attribute) + * @param scope (angular scope) + * + * Uses the watchDepth attribute to determine how to watch props on scope. + * If watchDepth attribute is NOT reference or collection, watchDepth defaults to deep watching by value + */ +function watchProps(watchDepth, scope, watchExpressions, listener) { + var supportsWatchCollection = angular.isFunction(scope.$watchCollection); + var supportsWatchGroup = angular.isFunction(scope.$watchGroup); + + var watchGroupExpressions = []; + + watchExpressions.forEach(function(expr) { + var actualExpr = getPropExpression(expr); + var exprWatchDepth = getPropWatchDepth(watchDepth, expr); + + if (exprWatchDepth === 'collection' && supportsWatchCollection) { + scope.$watchCollection(actualExpr, listener); + } else if (exprWatchDepth === 'reference' && supportsWatchGroup) { + watchGroupExpressions.push(actualExpr); + } else if (exprWatchDepth === 'one-time') { + //do nothing because we handle our one time bindings after this + } else { + scope.$watch(actualExpr, listener, exprWatchDepth !== 'reference'); + } + }); + + if (watchDepth === 'one-time') { + listener(); + } + + if (watchGroupExpressions.length) { + scope.$watchGroup(watchGroupExpressions, listener); + } +} + +// render React component, with scope[attrs.props] being passed in as the component props +function renderComponent(component, props, scope, elem) { + scope.$evalAsync(function() { + ReactDOM.render(React.createElement(component, props), elem[0]); + }); +} + +// get prop name from prop (string or array) +function getPropName(prop) { + return Array.isArray(prop) ? prop[0] : prop; +} + +// get prop name from prop (string or array) +function getPropConfig(prop) { + return Array.isArray(prop) ? prop[1] : {}; +} + +// get prop expression from prop (string or array) +function getPropExpression(prop) { + return Array.isArray(prop) ? prop[0] : prop; +} + +// find the normalized attribute knowing that React props accept any type of capitalization +function findAttribute(attrs, propName) { + var index = Object.keys(attrs).filter(function(attr) { + return attr.toLowerCase() === propName.toLowerCase(); + })[0]; + return attrs[index]; +} + +// get watch depth of prop (string or array) +function getPropWatchDepth(defaultWatch, prop) { + var customWatchDepth = Array.isArray(prop) && angular.isObject(prop[1]) && prop[1].watchDepth; + return customWatchDepth || defaultWatch; +} + +// # reactComponent +// Directive that allows React components to be used in Angular templates. +// +// Usage: +// +// +// This requires that there exists an injectable or globally available 'Hello' React component. +// The 'props' attribute is optional and is passed to the component. +// +// The following would would create and register the component: +// +// var module = angular.module('ace.react.components'); +// module.value('Hello', React.createClass({ +// render: function() { +// return
    Hello {this.props.name}
    ; +// } +// })); +// +var reactComponent = function($injector) { + return { + restrict: 'E', + replace: true, + link: function(scope, elem, attrs) { + var reactComponent = getReactComponent(attrs.name, $injector); + + var renderMyComponent = function() { + var scopeProps = scope.$eval(attrs.props); + var props = applyFunctions(scopeProps, scope); + + renderComponent(reactComponent, props, scope, elem); + }; + + // If there are props, re-render when they change + attrs.props ? watchProps(attrs.watchDepth, scope, [attrs.props], renderMyComponent) : renderMyComponent(); + + // cleanup when scope is destroyed + scope.$on('$destroy', function() { + if (!attrs.onScopeDestroy) { + ReactDOM.unmountComponentAtNode(elem[0]); + } else { + scope.$eval(attrs.onScopeDestroy, { + unmountComponent: ReactDOM.unmountComponentAtNode.bind(this, elem[0]), + }); + } + }); + }, + }; +}; + +// # reactDirective +// Factory function to create directives for React components. +// +// With a component like this: +// +// var module = angular.module('ace.react.components'); +// module.value('Hello', React.createClass({ +// render: function() { +// return
    Hello {this.props.name}
    ; +// } +// })); +// +// A directive can be created and registered with: +// +// module.directive('hello', function(reactDirective) { +// return reactDirective('Hello', ['name']); +// }); +// +// Where the first argument is the injectable or globally accessible name of the React component +// and the second argument is an array of property names to be watched and passed to the React component +// as props. +// +// This directive can then be used like this: +// +// +// +var reactDirective = function($injector) { + return function(reactComponentName, props, conf, injectableProps) { + var directive = { + restrict: 'E', + replace: true, + link: function(scope, elem, attrs) { + var reactComponent = getReactComponent(reactComponentName, $injector); + + // if props is not defined, fall back to use the React component's propTypes if present + props = props || Object.keys(reactComponent.propTypes || {}); + + // for each of the properties, get their scope value and set it to scope.props + var renderMyComponent = function() { + var scopeProps = {}, + config = {}; + + props.forEach(function(prop) { + var propName = getPropName(prop); + scopeProps[propName] = scope.$eval(findAttribute(attrs, propName)); + config[propName] = getPropConfig(prop); + }); + + scopeProps = applyFunctions(scopeProps, scope, config); + scopeProps = angular.extend({}, scopeProps, injectableProps); + renderComponent(reactComponent, scopeProps, scope, elem); + }; + + // watch each property name and trigger an update whenever something changes, + // to update scope.props with new values + var propExpressions = props.map(function(prop) { + return Array.isArray(prop) ? [attrs[getPropName(prop)], getPropConfig(prop)] : attrs[prop]; + }); + + // If we don't have any props, then our watch statement won't fire. + props.length ? watchProps(attrs.watchDepth, scope, propExpressions, renderMyComponent) : renderMyComponent(); + + // cleanup when scope is destroyed + scope.$on('$destroy', function() { + if (!attrs.onScopeDestroy) { + ReactDOM.unmountComponentAtNode(elem[0]); + } else { + scope.$eval(attrs.onScopeDestroy, { + unmountComponent: ReactDOM.unmountComponentAtNode.bind(this, elem[0]), + }); + } + }); + }, + }; + return angular.extend(directive, conf); + }; +}; + +let ngModule = angular.module('react', []); +ngModule.directive('reactComponent', ['$injector', reactComponent]); +ngModule.factory('reactDirective', ['$injector', reactDirective]); diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 467a65597a5..7b0f040e199 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -160,7 +160,6 @@ export class DashboardGrid extends React.Component { } render() { - console.log('animated', this.state.animated); return ( Date: Fri, 8 Dec 2017 13:30:16 +0100 Subject: [PATCH 411/584] ux: added react scrollbar component and added it to add panel panel --- .../core/components/ScrollBar/ScrollBar.tsx | 62 +++++++++++++++++++ .../app/features/dashboard/dashboard_ctrl.ts | 1 - .../dashboard/dashgrid/AddPanelPanel.tsx | 5 +- public/app/features/panel/panel_header.ts | 1 + public/sass/components/_panel_add_panel.scss | 1 + 5 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 public/app/core/components/ScrollBar/ScrollBar.tsx diff --git a/public/app/core/components/ScrollBar/ScrollBar.tsx b/public/app/core/components/ScrollBar/ScrollBar.tsx new file mode 100644 index 00000000000..49a200b0f3b --- /dev/null +++ b/public/app/core/components/ScrollBar/ScrollBar.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import PerfectScrollbar from 'perfect-scrollbar'; + +export interface Props { + children: any; + className: string; +} + +export default class ScrollBar extends React.Component { + + private container: any; + private ps: PerfectScrollbar; + + constructor(props) { + super(props); + } + + componentDidMount() { + this.ps = new PerfectScrollbar(this.container); + } + + componentDidUpdate() { + this.ps.update(); + } + + componentWillUnmount() { + this.ps.destroy(); + } + + // methods can be invoked by outside + setScrollTop(top) { + if (this.container) { + this.container.scrollTop = top; + this.ps.update(); + + return true; + } + return false; + } + + setScrollLeft(left) { + if (this.container) { + this.container.scrollLeft = left; + this.ps.update(); + + return true; + } + return false; + } + + handleRef = ref => { + this.container = ref; + }; + + render() { + return ( +
    + {this.props.children} +
    + ); + } +} diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 750826d386d..2c9d028ddf8 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -129,7 +129,6 @@ export class DashboardCtrl implements PanelContainer { } getPanelContainer() { - console.log('DashboardCtrl:getPanelContainer()'); return this; } diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx index 0dd4b9fcad6..75c8cbf36bc 100644 --- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -4,6 +4,7 @@ import _ from 'lodash'; import config from 'app/core/config'; import {PanelModel} from '../panel_model'; import {PanelContainer} from './PanelContainer'; +import ScrollBar from 'app/core/components/ScrollBar/ScrollBar'; export interface AddPanelPanelProps { panel: PanelModel; @@ -78,9 +79,9 @@ export class AddPanelPanel extends React.ComponentNew Panel Select a visualization
    -
    + {this.state.panelPlugins.map(this.renderPanelItem.bind(this))} -
    +
    ); diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index c83aea05527..5429a992a71 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -84,6 +84,7 @@ function panelHeader($compile) { restrict: 'E', template: template, link: function(scope, elem, attrs) { + console.log(elem.html()); let menuElem = elem.find('.panel-menu'); let menuScope; diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index be645574342..19eb90b2ea6 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -35,6 +35,7 @@ height: calc(100% - 43px); align-content: flex-start; justify-content: space-around; + position: relative; } .add-panel__item { From 9cae579c756b235d0ddc41dd300c59533cb78cc1 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 8 Dec 2017 13:37:37 +0100 Subject: [PATCH 412/584] fix for search dropdown on small screen + icon overlapping fix (#10091) * fix for search dropdown on small screen + icon overlapping fix * fixing search filter for small screen * hid tags and filter box * iphone input zoom fix * moved input styling to old-responsive --- public/sass/_old_responsive.scss | 8 ++++++++ public/sass/components/_search.scss | 15 +++++++++++++++ public/sass/components/_view_states.scss | 1 + 3 files changed, 24 insertions(+) diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 72f4332a51e..fa119047f44 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -18,6 +18,14 @@ // Media queries // --------------------- +@include media-breakpoint-down(xs) { + input[type='text'], + input[type='number'], + textarea { + font-size: 16px; + } +} + @include media-breakpoint-up(sm) { .navbar-page-btn { max-width: 250px; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 25cb9a735a6..6c23f51aaa0 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -217,3 +217,18 @@ padding: $spacer*2 $spacer; background: $panel-bg; } + +@include media-breakpoint-down(xs) { + + .search-container { + left: 0; + } + + .search-dropdown__col_2 { + display: none; + } + + .search-item__tags { + display: none; + } +} diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index a698a81f1dc..b3c9a44e658 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -37,6 +37,7 @@ .navbar { box-shadow: none; background: transparent; + padding-left: $side-menu-width + 20px; } .navbar-page-btn { From 63b717f607d8e0a24ae39ec02b928ed58f195568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 13:54:11 +0100 Subject: [PATCH 413/584] ux: minor change to new folder page --- public/app/features/dashboard/partials/create_folder.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/public/app/features/dashboard/partials/create_folder.html b/public/app/features/dashboard/partials/create_folder.html index 6548057a796..ae5fcc126e8 100644 --- a/public/app/features/dashboard/partials/create_folder.html +++ b/public/app/features/dashboard/partials/create_folder.html @@ -1,15 +1,12 @@
    -

    - Create New Folder -

    - +
    NameRole
    {{org.name}} Current diff --git a/public/app/features/admin/partials/new_user.html b/public/app/features/admin/partials/new_user.html index aca2ef89701..5199d957c33 100644 --- a/public/app/features/admin/partials/new_user.html +++ b/public/app/features/admin/partials/new_user.html @@ -1,7 +1,7 @@ - + -
    -
    +
    +

    Add new user

    diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index 9b337ccb3dd..a3b0f04d39d 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -1,8 +1,12 @@ - + -
    -
    -

    Organizations

    +
    +
    +
    + + + New Org +
    diff --git a/public/app/features/admin/partials/settings.html b/public/app/features/admin/partials/settings.html index c8aa4fd3790..918a0d90f6e 100644 --- a/public/app/features/admin/partials/settings.html +++ b/public/app/features/admin/partials/settings.html @@ -1,25 +1,22 @@ - + -
    -
    -

    Server settings

    +
    + +
    + These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). + To change these you currently need to restart grafana.
    -
    - These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). - To change these you currently need to restart grafana. -
    - -
    - - - - - - - - -
    {{secName}}
    {{keyName}}{{keyValue}}
    + + + + + + + + + +
    {{secName}}
    {{keyName}}{{keyValue}}
    diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index 8cc9134cad0..e2a4bb62301 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -1,10 +1,6 @@ - - -
    -
    -

    Stats

    -
    + +
    diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 601e062def9..e98299eac64 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -1,22 +1,18 @@ - - -
    -
    -

    Users

    + +
    +
    +
    + + +
    +
    Add new user
    -
    - - - - -
    -
    diff --git a/public/app/features/org/change_password_ctrl.ts b/public/app/features/org/change_password_ctrl.ts index 93dc1a3ceef..ebd36d6288c 100644 --- a/public/app/features/org/change_password_ctrl.ts +++ b/public/app/features/org/change_password_ctrl.ts @@ -8,7 +8,7 @@ export class ChangePasswordCtrl { $scope.command = {}; $scope.authProxyEnabled = config.authProxyEnabled; $scope.ldapEnabled = config.ldapEnabled; - $scope.navModel = navModelSrv.getNav('profile', 'change-password'); + $scope.navModel = navModelSrv.getNav('profile', 'change-password', 0); $scope.changePassword = function() { if (!$scope.userForm.$valid) { return; } diff --git a/public/app/features/org/new_org_ctrl.ts b/public/app/features/org/new_org_ctrl.ts index 72601df248f..2fce0ab513f 100644 --- a/public/app/features/org/new_org_ctrl.ts +++ b/public/app/features/org/new_org_ctrl.ts @@ -5,7 +5,7 @@ export class NewOrgCtrl { /** @ngInject **/ constructor($scope, $http, backendSrv, navModelSrv) { - $scope.navModel = navModelSrv.getOrgNav(0); + $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1); $scope.newOrg = {name: ''}; $scope.createOrg = function() { diff --git a/public/app/features/org/partials/change_password.html b/public/app/features/org/partials/change_password.html index 982c2fe16a8..b02f7b4d017 100644 --- a/public/app/features/org/partials/change_password.html +++ b/public/app/features/org/partials/change_password.html @@ -1,9 +1,9 @@ - + -
    -
    - -
    +
    +

    + Change your password +

    You cannot change password when ldap or auth proxy authentication is enabled. diff --git a/public/app/features/org/partials/newOrg.html b/public/app/features/org/partials/newOrg.html index bd2fce86bf7..424c55d6eb7 100644 --- a/public/app/features/org/partials/newOrg.html +++ b/public/app/features/org/partials/newOrg.html @@ -1,9 +1,9 @@ - + -
    -
    -

    New Organization

    -
    +
    +

    + New Organization +

    Each organization contains their own dashboards, data sources and configuration, and cannot be shared between orgs. While users may belong to more than one, mutiple organization are most frequently used in multi-tenant deployments.

    diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 854af218e77..96dba65d1ad 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -2,7 +2,7 @@
    -

    Add new

    +

    Add new

    @@ -20,7 +20,7 @@
    -

    Existing Keys

    +

    Existing Keys

    diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index da99436a93d..f5a49e3d3ee 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,34 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts index 7843b5229d1..1bc758bf2cc 100644 --- a/public/app/features/org/prefs_control.ts +++ b/public/app/features/org/prefs_control.ts @@ -49,7 +49,7 @@ export class PrefsControlCtrl { var template = `
    -

    Preferences

    +

    Preferences

    UI Theme diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 4229349a030..7a003168ec8 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -1,34 +1,10 @@ - + -
    -
    - +
    - - - Switch theme - +

    Buttons

    -
    - -
    - -
    - -
    -
      -
    • - ${{color.name}} - {{color.value}} -
      • -
    -
    - -
    +
    -
    +
    @@ -46,13 +22,13 @@
    -
    -

    From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.

    -

    More information about plugin development can be found at docs.grafana.org

    -
    +

    Forms

    -
    - forms +
    +
    + + +
    diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index 7f3e0f57f95..be155d0a994 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -8,7 +8,7 @@ class StyleGuideCtrl { theme: string; buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; buttonSizes = ['btn-small', '', 'btn-large']; - buttonVariants = ['-', '-outline-']; + buttonVariants = ['-']; icons: any = []; page: any; pages = ['colors', 'buttons', 'icons', 'plugins']; @@ -16,7 +16,7 @@ class StyleGuideCtrl { /** @ngInject **/ constructor(private $http, private $routeParams, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide'); + this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide', 1); this.theme = config.bootData.user.lightTheme ? 'light': 'dark'; this.page = {}; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index e8dc28c96b6..eb4a699eea5 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -51,5 +51,6 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg'); } - - +.gicon-org { + background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg'); +} diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 1211e244a91..8099334446b 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -47,7 +47,7 @@ position: relative; &.fa { - top: 8px; + top: 10px; } &.gicon { From 91e866f14565097d11c348784850fc2b906b95f6 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Fri, 1 Dec 2017 14:27:22 +0100 Subject: [PATCH 337/584] Add multiquery_table table transform The current table transform renders only the first query. This PR adds a new transform to render all query results in a JOIN-ish semantic. * new table transform: Multi-Query table * columns is the union of all non-value fields * one value column per query is added * rows that share all the same label values are merged into one --- .../app/plugins/panel/table/transformers.ts | 120 +++++++++++++++++- 1 file changed, 119 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/panel/table/transformers.ts b/public/app/plugins/panel/table/transformers.ts index 9a94f191646..c6c036161bd 100644 --- a/public/app/plugins/panel/table/transformers.ts +++ b/public/app/plugins/panel/table/transformers.ts @@ -145,12 +145,130 @@ transformers['table'] = { if (data[0].type !== 'table') { throw {message: 'Query result is not in table format, try using another transform.'}; } - model.columns = data[0].columns; model.rows = data[0].rows; } }; +transformers['multiquery_table'] = { + description: 'Multi-Query Table', + getColumns: function(data) { + // Track column indexes: name -> index + const columnNames = {}; + + // Union of all non-value columns + const columns = data.reduce((acc, d, i) => { + d.columns.forEach((col, j) => { + const { text } = col; + if (text !== 'Value') { + if (columnNames[text] === undefined) { + columnNames[text] = acc.length; + acc.push(col); + } + } + }); + return acc; + }, []); + + // Append one value column per data set + data.forEach((_, i) => { + // Value (A), Value (B),... + const text = `Value ${String.fromCharCode(65 + i)}`; + columnNames[text] = columns.length; + columns.push({ text }); + }); + + return columns; + }, + transform: function(data, panel, model) { + if (!data || data.length === 0) { + return; + } + + if (data[0].type !== 'table') { + throw {message: 'Query result is not in table format, try using another transform.'}; + } + + // Track column indexes: name -> index + const columnNames = {}; + const columnIndexes = []; + + // Union of all non-value columns + const columns = data.reduce((acc, d, i) => { + const indexes = []; + d.columns.forEach((col, j) => { + const { text } = col; + if (text !== 'Value') { + if (columnNames[text] === undefined) { + columnNames[text] = acc.length; + acc.push(col); + } + indexes[j] = columnNames[text]; + } + }); + columnIndexes.push(indexes); + return acc; + }, []); + const nonValueColumnCount = columns.length; + + // Append one value column per data set + data.forEach((_, i) => { + // Value (A), Value (B),... + const text = `Value ${String.fromCharCode(65 + i)}`; + columnNames[text] = columns.length; + columns.push({ text }); + columnIndexes[i].push(columnNames[text]); + }); + + model.columns = columns; + + // Adjust rows to new column indexes + let rows = data.reduce((acc, d, i) => { + const indexes = columnIndexes[i]; + d.rows.forEach((r, j) => { + const alteredRow = []; + indexes.forEach((to, from) => { + alteredRow[to] = r[from]; + }); + acc.push(alteredRow); + }); + return acc; + }, []); + + // Merge rows that have same columns + const mergedRows = {}; + rows = rows.reduce((acc, row, i) => { + if (!mergedRows[i]) { + const match = _.findIndex(rows, (other, j) => { + let same = true; + for (let index = 0; index < nonValueColumnCount; index++) { + if (row[index] !== other[index]) { + same = false; + break; + } + } + return same; + }, i + 1); + if (match > -1) { + const matchedRow = rows[match]; + // Merge values into current row + for (let index = nonValueColumnCount; index < columns.length; index++) { + if (row[index] === undefined && matchedRow[index] !== undefined) { + row[index] = matchedRow[index]; + break; + } + } + mergedRows[match] = matchedRow; + } + acc.push(row); + } + return acc; + }, []); + + model.rows = rows; + } +}; + transformers['json'] = { description: 'JSON Data', getColumns: function(data) { From 8bd3d106a2161a6028b19ed866881f42c310e4ff Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 1 Dec 2017 16:31:55 +0300 Subject: [PATCH 338/584] Fix dashboard menu overlapping (#10044) * dashboard menu: fix overlap by singlestat and panel link icon * refactor: navbar z-index * hide grafana icon in solo panel mode --- public/sass/_variables.scss | 4 ++++ public/sass/components/_dropdown.scss | 2 +- public/sass/components/_navbar.scss | 2 +- public/sass/components/_sidemenu.scss | 7 +++---- public/sass/pages/_dashboard.scss | 5 +++-- 5 files changed, 12 insertions(+), 8 deletions(-) diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index c873a7c17e1..bb24edea69f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -201,6 +201,10 @@ $zindex-tooltip: 1020; $zindex-navbar-fixed: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; +$zindex-typeahead: 1060; +$zindex-sidemenu : $zindex-navbar-fixed + 5; + + // Buttons // diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 969a4477a93..5dacb6e242c 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -299,7 +299,7 @@ // Typeahead // --------- .typeahead { - z-index: 1051; + z-index: $zindex-typeahead; margin-top: 2px; // give it some space to breathe } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index c83aca53669..8da2a042612 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -5,7 +5,7 @@ position: relative; padding-left: $side-menu-width; box-shadow: $navbarShadow; - z-index: 1; + z-index: $zindex-navbar-fixed; background: $navbarBackground; } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 2facca8dadc..3ce22688280 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -5,8 +5,7 @@ flex-direction: column; width: $side-menu-width; background: $navbarBackground; - z-index: 10; - + z-index: $zindex-sidemenu; a:focus { text-decoration: none; } @@ -19,7 +18,7 @@ height: auto; box-shadow: $side-menu-shadow; position: relative; - z-index: 2; + z-index: $zindex-sidemenu; } .sidemenu__top, .sidemenu__bottom { @@ -56,7 +55,7 @@ // again by the mouse getting outside the hover space left: $side-menu-width - 2px; @include animation('dropdown-anim 150ms ease-in-out 100ms forwards'); - z-index: 1; + z-index: $zindex-sidemenu; } } } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 45f2e673372..4deefc2b9cb 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -19,6 +19,7 @@ div.flot-text { &--solo { .panel-container { border: none; + z-index: $zindex-sidemenu + 1 } } } @@ -144,14 +145,14 @@ div.flot-text { width: 27px; height: 27px; top: 0; - z-index: 10; + z-index: 1; .fa { position: relative; top: -4px; left: -6px; font-size: 75%; - z-index: 1000; + z-index: 1; } &--info { From 8593ca001d90c423afc63febe8569f4577fa810d Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 1 Dec 2017 16:34:49 +0300 Subject: [PATCH 339/584] repeat row: refactor --- .../app/features/dashboard/dashboard_model.ts | 182 ++++++++++-------- 1 file changed, 97 insertions(+), 85 deletions(-) diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index c54a9460c08..f4cdc26d438 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -305,8 +305,6 @@ export class DashboardModel { } let clone = new PanelModel(sourcePanel.getSaveModel()); - clone.id = this.getNextPanelId(); - // for row clones we need to figure out panels under row to clone and where to insert clone let rowPanels, insertPos; if (sourcePanel.collapsed) { @@ -322,9 +320,7 @@ export class DashboardModel { } this.panels.splice(insertPos, 0, clone); - clone.repeatIteration = this.iteration; - clone.repeatPanelId = sourcePanel.id; - clone.repeat = null; + this.updateRepeatedPanelIds(clone); return clone; } @@ -337,103 +333,119 @@ export class DashboardModel { return; } - let selected; - if (variable.current.text === 'All') { - selected = variable.options.slice(1, variable.options.length); - } else { - selected = _.filter(variable.options, {selected: true}); + if (panel.type === 'row') { + this.repeatRow(panel, panelIndex, variable); + return; } + let selectedOptions = this.getSelectedVariableOptions(variable); let minWidth = panel.minSpan || 6; let xPos = 0; let yPos = panel.gridPos.y; - for (let index = 0; index < selected.length; index++) { - let option = selected[index]; + for (let index = 0; index < selectedOptions.length; index++) { + let option = selectedOptions[index]; let copy; - if (panel.type === 'row') { - copy = this.getRowRepeatClone(panel, index, panelIndex); - copy.scopedVars = {}; - copy.scopedVars[variable.name] = option; + copy = this.getPanelRepeatClone(panel, index, panelIndex); + copy.scopedVars = {}; + copy.scopedVars[variable.name] = option; - let rowHeight = this.getRowHeight(copy); - // if (rowHeight) { - let panelsBelowIndex; - let rowPanels = copy.panels || []; - // insert after 'row' panel - let insertPos = panelIndex + ((rowPanels.length + 1) * index) + 1; - - if (copy.collapsed) { - copy.gridPos.y += index; - yPos += index; - panelsBelowIndex = panelIndex + index + 1; - - _.each(copy.panels, (panel, i) => { - panel.scopedVars = {}; - panel.scopedVars[variable.name] = option; - - if (index > 0) { - panel.id = this.getNextPanelId(); - panel.repeatIteration = this.iteration; - panel.repeatPanelId = rowPanels[i].id; - panel.repeat = null; - copy.panels[i] = panel; - } - }); - } else { - _.each(rowPanels, (rowPanel, i) => { - rowPanel.scopedVars = {}; - rowPanel.scopedVars[variable.name] = option; - - if (index > 0) { - let cloneRowPanel = new PanelModel(rowPanel); - cloneRowPanel.id = this.getNextPanelId(); - cloneRowPanel.repeatIteration = this.iteration; - cloneRowPanel.repeatPanelId = rowPanel.id; - cloneRowPanel.repeat = null; - cloneRowPanel.gridPos.y += rowHeight * index; - this.panels.splice(insertPos+i, 0, cloneRowPanel); - } - }); - copy.panels = []; - copy.gridPos.y += rowHeight * index; - yPos += rowHeight; - panelsBelowIndex = insertPos+rowPanels.length; - } - - // Update gridPos for panels below - for (let i = panelsBelowIndex; i< this.panels.length; i++) { - this.panels[i].gridPos.y += yPos; - } + if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { + copy.gridPos.y = yPos; + yPos += copy.gridPos.h; } else { - copy = this.getPanelRepeatClone(panel, index, panelIndex); - copy.scopedVars = {}; - copy.scopedVars[variable.name] = option; + // set width based on how many are selected + // assumed the repeated panels should take up full row width - if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { - copy.gridPos.y = yPos; + copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selectedOptions.length, minWidth); + copy.gridPos.x = xPos; + copy.gridPos.y = yPos; + + xPos += copy.gridPos.w; + + // handle overflow by pushing down one row + if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) { + xPos = 0; yPos += copy.gridPos.h; - } else { - // set width based on how many are selected - // assumed the repeated panels should take up full row width - - copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth); - copy.gridPos.x = xPos; - copy.gridPos.y = yPos; - - xPos += copy.gridPos.w; - - // handle overflow by pushing down one row - if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) { - xPos = 0; - yPos += copy.gridPos.h; - } } } } } + repeatRow(panel: PanelModel, panelIndex: number, variable) { + let selectedOptions = this.getSelectedVariableOptions(variable); + let yPos = panel.gridPos.y; + + function setScopedVars(panel, variableOption) { + panel.scopedVars = {}; + panel.scopedVars[variable.name] = variableOption; + } + + for (let optionIndex = 0; optionIndex < selectedOptions.length; optionIndex++) { + let option = selectedOptions[optionIndex]; + let rowCopy = this.getRowRepeatClone(panel, optionIndex, panelIndex); + setScopedVars(rowCopy, option); + + let rowHeight = this.getRowHeight(rowCopy); + let rowPanels = rowCopy.panels || []; + let panelBelowIndex; + + if (panel.collapsed) { + // For collapsed row just copy its panels and set scoped vars and proper IDs + _.each(rowPanels, (rowPanel, i) => { + setScopedVars(rowPanel, option); + if (optionIndex > 0) { + this.updateRepeatedPanelIds(rowPanel); + } + }); + rowCopy.gridPos.y += optionIndex; + yPos += optionIndex; + panelBelowIndex = panelIndex + optionIndex + 1; + } else { + // insert after 'row' panel + let insertPos = panelIndex + ((rowPanels.length + 1) * optionIndex) + 1; + _.each(rowPanels, (rowPanel, i) => { + setScopedVars(rowPanel, option); + if (optionIndex > 0) { + let cloneRowPanel = new PanelModel(rowPanel); + this.updateRepeatedPanelIds(cloneRowPanel); + // For exposed row additionally set proper Y grid position and add it to dashboard panels + cloneRowPanel.gridPos.y += rowHeight * optionIndex; + this.panels.splice(insertPos+i, 0, cloneRowPanel); + } + }); + rowCopy.panels = []; + rowCopy.gridPos.y += rowHeight * optionIndex; + yPos += rowHeight; + panelBelowIndex = insertPos+rowPanels.length; + } + + // Update gridPos for panels below + for (let i = panelBelowIndex; i< this.panels.length; i++) { + this.panels[i].gridPos.y += yPos; + } + } + } + + updateRepeatedPanelIds(panel: PanelModel) { + panel.repeatPanelId = panel.id; + panel.id = this.getNextPanelId(); + panel.repeatIteration = this.iteration; + panel.repeat = null; + return panel; + } + + getSelectedVariableOptions(variable) { + let selectedOptions; + if (variable.current.text === 'All') { + selectedOptions = variable.options.slice(1, variable.options.length); + } else { + selectedOptions = _.filter(variable.options, {selected: true}); + } + return selectedOptions; + } + getRowHeight(rowPanel: PanelModel): number { if (!rowPanel.panels || rowPanel.panels.length === 0) { return 0; From 289ba74ede72bd0e67a6f96fb52e489d186348bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 15:56:08 +0100 Subject: [PATCH 340/584] ux: new dashnav design --- .../features/dashboard/dashnav/dashnav.html | 133 +++++++----------- .../dashboard/timepicker/timepicker.html | 56 +++----- public/sass/_variables.dark.scss | 3 +- public/sass/base/_icons.scss | 4 + public/sass/components/_navbar.scss | 133 +++++++++++------- public/sass/components/_scrollbar.scss | 2 +- public/sass/components/_timepicker.scss | 22 +-- 7 files changed, 168 insertions(+), 185 deletions(-) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 1db66f145bf..dd6291ee56b 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,95 +1,62 @@
    -
    - - - {{ctrl.dashboard.title}} - - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    + + + {{ctrl.dashboard.title}} + + - + -
    + + + + + + +
    + + +
    - -
    + +
    diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index a230dd53b4d..dd3dc731c68 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,38 +1,26 @@ - + +
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 437c33d7bbd..5d9ae964529 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -122,8 +122,9 @@ $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; // Scrollbars -$scrollbarBackground: #3a3a3a; +$scrollbarBackground: #404357; $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; // Tables diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index eb4a699eea5..538733be2ef 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -54,3 +54,7 @@ .gicon-org { background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg'); } + +.gicon-zoom-out { + background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); +} diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 8da2a042612..e40b6109aac 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,19 +1,13 @@ .navbar { - display: block; - overflow: visible; position: relative; padding-left: $side-menu-width; box-shadow: $navbarShadow; z-index: $zindex-navbar-fixed; background: $navbarBackground; -} - -.navbar-inner { - min-height: $navbarHeight; + height: $navbarHeight; padding-right: $spacer; display: flex; - @include clearfix(); } .sidemenu-open { @@ -22,48 +16,49 @@ } } -.navbar .nav { - position: relative; - left: 0; - float: left; - - &--grow { - flex-grow: 1; - } -} - - -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - padding: 17px 13px 13px; - color: $navbarLinkColor; - text-decoration: none; - - .fa { font-size: 115%; } -} - -// Hover/focus -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: $navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: $navbarLinkColorActive; - text-decoration: none; - background-color: $navbarLinkBackgroundActive; -} +// .navbar .nav { +// position: relative; +// left: 0; +// float: left; +// +// &--grow { +// flex-grow: 1; +// } +// } +// +// +// .navbar .nav > li { +// float: left; +// } +// +// // Links +// .navbar .nav > li > a { +// float: none; +// padding: 17px 13px 13px; +// color: $navbarLinkColor; +// text-decoration: none; +// +// .fa { font-size: 115%; } +// } +// +// // Hover/focus +// .navbar .nav > li > a:focus, +// .navbar .nav > li > a:hover { +// color: $navbarLinkColorHover; +// text-decoration: none; +// } +// +// // Active nav items +// .navbar .nav > .active > a, +// .navbar .nav > .active > a:hover, +// .navbar .nav > .active > a:focus { +// color: $navbarLinkColorActive; +// text-decoration: none; +// background-color: $navbarLinkBackgroundActive; +// } .navbar-page-btn { + flex-grow: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -106,3 +101,47 @@ .navbar-mini-btn-wrapper { padding: 15px; } + +.navbar-buttons { + height: $navbarHeight; + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: $spacer; +} + +.navbar-button { + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + + display: inline-block; + font-weight: $btn-font-weight; + padding: 5px 10px; + line-height: 16px; + color: $text-muted; + border: 1px solid #151515; + margin-right: 1px; + + .gicon { + font-size: 16px; + } + + .fa { + font-size: 16px; + } + + &--add-panel { + .gicon { + font-size: 22px; + } + padding: 2px 8px; + } + + &--tight { + .fa { + font-size: 14px; + position: relative; + top: 2px; + } + padding: 6px 4px; + } +} diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index dcc3da6f1fe..be1f3562843 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -71,7 +71,7 @@ } .ps__thumb-y { - @include gradient-vertical($blue, lighten($blue, 20%)); + @include gradient-vertical($scrollbarBackground, $scrollbarBackground2); border-radius: 6px; width: 6px; /* there must be 'right' for ps__thumb-y */ diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index a5f311cdb46..f4928bac69b 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -1,15 +1,10 @@ -.nav.gf-timepicker-nav { - margin-right: 0; -} - .timepicker-timestring { font-weight: normal; } -.gf-timepicker-nav-btn { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.gf-timepicker-nav { + flex-wrap: nowrap; + display: flex; } .gf-timepicker-dropdown { @@ -118,14 +113,3 @@ @extend .fa-chevron-left; } -.gf-timepicker-time-control { - font-size: $font-size-sm; - a { - padding: 18px 7px 13px !important; - } -} - -.dashnav-move-timeframe { - position: relative; - top: 1px; -} From 126257845c1c98e1ca9d0557afdde3f8eeb88936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 15:58:12 +0100 Subject: [PATCH 341/584] ux: dashboard nav update --- .../features/dashboard/dashnav/dashnav.html | 2 + public/sass/components/_navbar.scss | 52 +++---------------- 2 files changed, 10 insertions(+), 44 deletions(-) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index dd6291ee56b..0dc1bdfb308 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -18,6 +18,8 @@ +
    +
    ); } } + diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 0dc1bdfb308..260a3783a67 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -20,7 +20,7 @@
    -
    +
    @@ -42,7 +42,7 @@
    - diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index b4697039560..6985d27be5f 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -150,7 +150,7 @@ export class DashNavCtrl { this.dashboard.addPanel({ type: 'add-panel', gridPos: {x: 0, y: 0, w: 12, h: 9}, - title: 'New Graph', + title: 'Panel Title', }); } diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 9fb598cd80b..8bb46ebd127 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -2,7 +2,7 @@
    -
    +
    diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index dd3dc731c68..7c57b76b957 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,13 +1,13 @@ -
    - - -
    @@ -20,7 +20,7 @@   Refresh every {{ctrl.dashboard.refresh}} -
    diff --git a/public/app/features/org/partials/change_password.html b/public/app/features/org/partials/change_password.html index b02f7b4d017..08ab6938fcd 100644 --- a/public/app/features/org/partials/change_password.html +++ b/public/app/features/org/partials/change_password.html @@ -7,9 +7,6 @@
    You cannot change password when ldap or auth proxy authentication is enabled. -
    -
    - Back to profile
    diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index 2afeb203ea7..826c5f9cd48 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -3,9 +3,9 @@
    -
    +
    -
    @@ -13,7 +13,7 @@ - Create User Group + Add Team
    diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 0e36cee833b..2669664887f 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -1,7 +1,7 @@
    -

    HTTP

    +

    HTTP

    @@ -38,7 +38,7 @@
    -

    Auth

    +

    Auth

    diff --git a/public/app/plugins/datasource/graphite/partials/config.html b/public/app/plugins/datasource/graphite/partials/config.html index 58afc32de19..804d339452e 100644 --- a/public/app/plugins/datasource/graphite/partials/config.html +++ b/public/app/plugins/datasource/graphite/partials/config.html @@ -3,7 +3,7 @@ suggest-url="http://localhost:8080"> -

    Graphite details

    +

    Graphite details

    diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 146b11afe0d..912ad653f37 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -6,15 +6,22 @@ // Media queries // --------------------- +@include media-breakpoint-down(lg) { + .navbar-page-btn { + max-width: 290px; + } + .gf-timepicker-nav-btn { + max-width: 240px; + } +} + +@include media-breakpoint-down(md) { + .navbar-buttons--zoom { + display: none; + } +} + @include media-breakpoint-down(sm) { - // div.panel { - // width: 100% !important; - // padding: 0px !important; - // } - // .panel-margin { - // margin-right: 0; - // margin-left: 0; - // } body { padding: 0; } @@ -24,17 +31,7 @@ .gf-timepicker-nav-btn { max-width: 120px; } - .dashnav-zoom-out, - .dashnav-move-timeframe, - .dashnav-action-icons { - display: none; - } - - .page-container { - padding: 0 $spacer * 2; - } - - .dash-row-menu-container { + .navbar-buttons--actions { display: none; } } @@ -50,50 +47,8 @@ .page-dashboard .navbar-page-btn { max-width: 280px; } + .gf-timepicker-nav-btn { max-width: 120px; } - - .dashnav-move-timeframe { - display: none; - } - - .panel-in-fullscreen { - .dashnav-action-icons { - display: none; - } - .dashnav-back-to-dashboard { - display: block; - } - } -} - -@include media-breakpoint-up(lg) { - .page-dashboard .navbar-page-btn { - max-width: 290px; - } - .gf-timepicker-nav-btn { - max-width: 240px; - } - .dashnav-zoom-out { - display: block; - } - .dashnav-move-timeframe { - display: block; - } -} - -@include media-breakpoint-up(xl) { - .panel-in-fullscreen { - .dashnav-action-icons { - display: block; - } - } - - .page-dashboard .navbar-page-btn { - max-width: none; - } - .gf-timepicker-nav-btn { - max-width: none; - } } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5d9ae964529..70493a4363d 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -15,7 +15,7 @@ $dark-3: #262628; $dark-4: #333333; $dark-5: #444444; $gray-1: #555555; -$gray-2: #7B7B7B; +$gray-2: #8e8e8e; $gray-3: #b3b3b3; $gray-4: #D8D9DA; $gray-5: #ECECEC; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index bb24edea69f..49c5addc72d 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -89,6 +89,7 @@ $font-size-root: 14px !default; $font-size-base: 13px !default; $font-size-lg: 18px !default; +$font-size-md: 15px !default; $font-size-sm: 11px !default; $font-size-xs: 9px !default; @@ -197,8 +198,8 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) $zindex-dropdown: 1000; -$zindex-tooltip: 1020; -$zindex-navbar-fixed: 1030; +$zindex-navbar-fixed: 1020; +$zindex-tooltip: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; $zindex-typeahead: 1060; diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 833be5aa2af..a6dd09bcd5a 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -21,7 +21,7 @@ } } -@include media-breakpoint-down(md) { +@include media-breakpoint-down(sm) { .react-grid-layout { height: 100% !important; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 2bae2dde8da..05315439ad4 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -82,6 +82,7 @@ color: $text-muted; border: 1px solid #151515; margin-right: 1px; + white-space: nowrap; .gicon { font-size: 16px; diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 8099334446b..1d5268472bf 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -1,7 +1,7 @@ .page-header-canvas { background: linear-gradient(90deg, #292a2d, black); - box-shadow: inset 0px -4px 14px #2d2d2d; + box-shadow: inset 0px -4px 14px $dark-2; border-bottom: 1px solid $dark-4; } @@ -35,7 +35,7 @@ .page-header__img { border-radius: 50%; position: relative; - top: -3px; + top: 10px; width: 50px; height: 50px; } diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index 6a5f210ce2b..bc275e573f2 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -1,13 +1,40 @@ .add-panel { + height: 100%; +} + +.add-panel__header { + padding: 5px 15px; + display: flex; + align-items: center; + + i { + font-size: 30px; + margin-right: $spacer; + } +} + +.add-panel__title { + font-size: $font-size-md; + margin-right: $spacer/2; +} + +.add-panel__sub-title { + font-style: italic; + color: $text-muted; + position: relative; + top: 1px; +} + +.add-panel__items { + padding: 3px 0; display: flex; flex-direction: row; flex-wrap: wrap; overflow: auto; - height: 100%; + height: calc(100% - 43px); align-content: flex-start; justify-content: space-around; - padding: 3px 0; } .add-panel__item { diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index f4928bac69b..a1fb558c087 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -7,6 +7,11 @@ display: flex; } +.gf-timepicker-nav-btn { + text-overflow: ellipsis; + overflow: hidden; +} + .gf-timepicker-dropdown { margin: -8px -10px 10px 5px; padding: 10px 20px; diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 431c950d58b..a698a81f1dc 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -21,33 +21,22 @@ .playlist-active, .user-activity-low { + .react-resizable-handle .add-row-panel-hint, .dash-row-menu-container, - .panel-drop-zone - .dashnav-refresh-action, - .dashnav-zoom-out, + .navbar-button--refresh, + .navbar-buttons--zoom, + .navbar-buttons--actions, .panel-menu-container, - .dashnav-action-icons, .panel-info-corner--info, - .panel-info-corner--links, - .dashnav-move-timeframe { + .panel-info-corner--links { opacity: 0; transition: all 1.5s ease-in-out 1s; } - // navbar buttons - .navbar { - border-color: transparent; - background: transparent; - transition: all 1.5s ease-in-out 1s; - .fa { - opacity: 0; - transition: all 1.5s ease-in-out 1s; - } - } - .navbar { box-shadow: none; + background: transparent; } .navbar-page-btn { From c8ead22722a66bb447d811fb8c9d6f65d68c6dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 21:04:48 +0100 Subject: [PATCH 344/584] started on dashboard settings refactor --- public/app/core/directives/dash_class.js | 4 ++ public/app/core/directives/dash_edit_link.js | 1 - public/app/features/dashboard/all.ts | 4 +- .../app/features/dashboard/dashnav/dashnav.ts | 2 - .../features/dashboard/settings/settings.html | 27 +++++++++++ .../features/dashboard/settings/settings.ts | 47 +++++++++++++++++++ .../features/dashboard/submenu/submenu.html | 1 - public/app/partials/dashboard.html | 6 +-- 8 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 public/app/features/dashboard/settings/settings.html create mode 100644 public/app/features/dashboard/settings/settings.ts diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js index d8ad335de5c..b7323ea0161 100644 --- a/public/app/core/directives/dash_class.js +++ b/public/app/core/directives/dash_class.js @@ -34,6 +34,10 @@ function (_, $, coreModule) { $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) { elem.toggleClass('playlist-active', newValue === true); }); + + $scope.$watch('ctrl.dashboardViewState.state.editView', function(newValue) { + elem.toggleClass('dashboard-settings-open', _.isString(newValue)); + }); } }; }); diff --git a/public/app/core/directives/dash_edit_link.js b/public/app/core/directives/dash_edit_link.js index 02c7d55b99e..f0dc6f59a6a 100644 --- a/public/app/core/directives/dash_edit_link.js +++ b/public/app/core/directives/dash_edit_link.js @@ -13,7 +13,6 @@ function ($, angular, coreModule, _) { 'templating': { src: 'public/app/features/templating/partials/editor.html'}, 'history': { html: ''}, 'timepicker': { src: 'public/app/features/dashboard/timepicker/dropdown.html' }, - 'add-panel': { html: '' }, 'import': { html: '', isModal: true }, 'permissions': { html: '', isModal: true }, 'new-folder': { diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index b4f1f4e77f0..ec99fcf098a 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -27,8 +27,8 @@ import './acl/acl'; import './folder_picker/picker'; import './folder_modal/folder'; import './move_to_folder_modal/move_to_folder'; +import './settings/settings'; + import coreModule from 'app/core/core_module'; - import {DashboardListCtrl} from './dashboard_list_ctrl'; - coreModule.controller('DashboardListCtrl', DashboardListCtrl); diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 6985d27be5f..57f75b1388d 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import moment from 'moment'; import angular from 'angular'; diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html new file mode 100644 index 00000000000..b2371960a26 --- /dev/null +++ b/public/app/features/dashboard/settings/settings.html @@ -0,0 +1,27 @@ +

    Settings

    + +
    + + +
    + general +
    + +
    + annotations +
    + +
    + annotations +
    + +
    + diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts new file mode 100644 index 00000000000..28065fb5916 --- /dev/null +++ b/public/app/features/dashboard/settings/settings.ts @@ -0,0 +1,47 @@ +import {coreModule, appEvents} from 'app/core/core'; +import {DashboardModel} from '../dashboard_model'; + +export class SettingsCtrl { + dashboard: DashboardModel; + isOpen: boolean; + viewId: string; + + sections: any[] = [ + {title: 'General', id: 'general'}, + {title: 'Annotations', id: 'annotations'}, + {title: 'Templating', id: 'templating'}, + {title: 'Versions', id: 'versions'}, + ]; + + /** @ngInject */ + constructor($scope, private $location, private $rootScope) { + appEvents.on('hide-dash-editor', this.hideSettings.bind(this), $scope); + + var urlParams = this.$location.search(); + this.viewId = urlParams.editview; + } + + hideSettings() { + var urlParams = this.$location.search(); + delete urlParams.editview; + setTimeout(() => { + this.$rootScope.$apply(() => { + this.$location.search(urlParams); + }); + }); + } +} + +export function dashboardSettings() { + return { + restrict: 'E', + templateUrl: 'public/app/features/dashboard/settings/settings.html', + controller: SettingsCtrl, + bindToController: true, + controllerAs: 'ctrl', + transclude: true, + scope: { dashboard: "=" } + }; +} + +coreModule.directive('dashboardSettings', dashboardSettings); diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index 9e9d22fb495..f240a86efba 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -1,5 +1,4 @@
    -
    diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 57f75b1388d..f291913323a 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -37,8 +37,8 @@ export class DashNavCtrl { this.contextSrv.toggleSideMenu(); } - openEditView(editview) { - var search = _.extend(this.$location.search(), {editview: editview}); + openSettings() { + var search = _.extend(this.$location.search(), {editview: 'general'}); this.$location.search(search); } diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index b2371960a26..0781b0c109d 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -1,7 +1,11 @@ -

    Settings

    '; - } - - function render() { - if (!ctrl.panel.legend.show) { - elem.empty(); - firstRender = true; - return; - } - - if (firstRender) { - elem.append($container); - $container.on('click', '.graph-legend-icon', openColorSelector); - $container.on('click', '.graph-legend-alias', toggleSeries); - $container.on('click', 'th', sortLegend); - firstRender = false; - } - - seriesList = data; - - $container.empty(); - - // Set min-width if side style and there is a value, otherwise remove the CSS propery - var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : ""; - $container.css("min-width", width); - - $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); - - var tableHeaderElem; - if (panel.legend.alignAsTable) { - var header = ''; - header += ''; - if (panel.legend.values) { - header += getTableHeaderHtml('min'); - header += getTableHeaderHtml('max'); - header += getTableHeaderHtml('avg'); - header += getTableHeaderHtml('current'); - header += getTableHeaderHtml('total'); - } - header += ''; - tableHeaderElem = $(header); - } - - if (panel.legend.sort) { - seriesList = _.sortBy(seriesList, function(series) { - return series.stats[panel.legend.sort]; - }); - if (panel.legend.sortDesc) { - seriesList = seriesList.reverse(); - } - } - - var seriesShown = 0; - var seriesElements = []; - - for (i = 0; i < seriesList.length; i++) { - var series = seriesList[i]; - - if (series.hideFromLegend(panel.legend)) { - continue; - } - - var html = '
    '; - html += '
    '; - html += ''; - html += '
    '; - - html += '' + series.aliasEscaped + ''; - - if (panel.legend.values) { - var avg = series.formatValue(series.stats.avg); - var current = series.formatValue(series.stats.current); - var min = series.formatValue(series.stats.min); - var max = series.formatValue(series.stats.max); - var total = series.formatValue(series.stats.total); - - if (panel.legend.min) { html += '
    ' + min + '
    '; } - if (panel.legend.max) { html += '
    ' + max + '
    '; } - if (panel.legend.avg) { html += '
    ' + avg + '
    '; } - if (panel.legend.current) { html += '
    ' + current + '
    '; } - if (panel.legend.total) { html += '
    ' + total + '
    '; } - } - - html += '
    '; - seriesElements.push($(html)); - - seriesShown++; - } - - if (panel.legend.alignAsTable) { - var maxHeight = ctrl.height; - - if (!panel.legend.rightSide) { - maxHeight = maxHeight/2; - } - - var topPadding = 6; - var tbodyElem = $('    '); - tbodyElem.css("max-height", maxHeight - topPadding); - tbodyElem.append(tableHeaderElem); - tbodyElem.append(seriesElements); - $container.append(tbodyElem); - } else { - var maxLegendHeight = ctrl.height / 2; - $container.css("max-height", maxLegendHeight - 6); - $container.append(seriesElements); - if (!legendScrollbar) { - legendScrollbar = new PerfectScrollbar.default($container[0]); - } - legendScrollbar.update(); - } - } - } - }; - }); - -}); diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts new file mode 100644 index 00000000000..f9d5fecf993 --- /dev/null +++ b/public/app/plugins/panel/graph/legend.ts @@ -0,0 +1,214 @@ +import angular from 'angular'; +import _ from 'lodash'; +import $ from 'jquery'; +import PerfectScrollbar from 'perfect-scrollbar'; + +var module = angular.module('grafana.directives'); + +module.directive('graphLegend', function(popoverSrv, $timeout) { + + return { + link: function(scope, elem) { + var $container = $('
    '); + var firstRender = true; + var ctrl = scope.ctrl; + var panel = ctrl.panel; + var data; + var seriesList; + var i; + var legendScrollbar; + + ctrl.events.on('render', function() { + data = ctrl.seriesList; + if (data) { + render(); + } + }); + + function getSeriesIndexForElement(el) { + return el.parents('[data-series-index]').data('series-index'); + } + + function openColorSelector(e) { + // if we clicked inside poup container ignore click + if ($(e.target).parents('.popover').length) { + return; + } + + var el = $(e.currentTarget).find('.fa-minus'); + var index = getSeriesIndexForElement(el); + var series = seriesList[index]; + + $timeout(function() { + popoverSrv.show({ + element: el[0], + position: 'bottom center', + template: '' + + '', + openOn: 'hover', + model: { + series: series, + toggleAxis: function() { + ctrl.toggleAxis(series); + }, + colorSelected: function(color) { + ctrl.changeSeriesColor(series, color); + } + }, + }); + }); + } + + function toggleSeries(e) { + var el = $(e.currentTarget); + var index = getSeriesIndexForElement(el); + var seriesInfo = seriesList[index]; + var scrollPosition = $($container.children('tbody')).scrollTop(); + ctrl.toggleSeries(seriesInfo, e); + $($container.children('tbody')).scrollTop(scrollPosition); + } + + function sortLegend(e) { + var el = $(e.currentTarget); + var stat = el.data('stat'); + + if (stat !== panel.legend.sort) { panel.legend.sortDesc = null; } + + // if already sort ascending, disable sorting + if (panel.legend.sortDesc === false) { + panel.legend.sort = null; + panel.legend.sortDesc = null; + ctrl.render(); + return; + } + + panel.legend.sortDesc = !panel.legend.sortDesc; + panel.legend.sort = stat; + ctrl.render(); + } + + function getTableHeaderHtml(statName) { + if (!panel.legend[statName]) { return ""; } + var html = '    '; + } + + function render() { + if (!ctrl.panel.legend.show) { + elem.empty(); + firstRender = true; + return; + } + + if (firstRender) { + elem.append($container); + $container.on('click', '.graph-legend-icon', openColorSelector); + $container.on('click', '.graph-legend-alias', toggleSeries); + $container.on('click', 'th', sortLegend); + firstRender = false; + } + + seriesList = data; + + $container.empty(); + + // Set min-width if side style and there is a value, otherwise remove the CSS propery + var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : ""; + $container.css("min-width", width); + + $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); + + var tableHeaderElem; + if (panel.legend.alignAsTable) { + var header = ''; + header += ''; + if (panel.legend.values) { + header += getTableHeaderHtml('min'); + header += getTableHeaderHtml('max'); + header += getTableHeaderHtml('avg'); + header += getTableHeaderHtml('current'); + header += getTableHeaderHtml('total'); + } + header += ''; + tableHeaderElem = $(header); + } + + if (panel.legend.sort) { + seriesList = _.sortBy(seriesList, function(series) { + return series.stats[panel.legend.sort]; + }); + if (panel.legend.sortDesc) { + seriesList = seriesList.reverse(); + } + } + + var seriesElements = []; + + for (i = 0; i < seriesList.length; i++) { + var series = seriesList[i]; + + if (series.hideFromLegend(panel.legend)) { + continue; + } + + var html = '
    '; + html += '
    '; + html += ''; + html += '
    '; + + html += '' + series.aliasEscaped + ''; + + if (panel.legend.values) { + var avg = series.formatValue(series.stats.avg); + var current = series.formatValue(series.stats.current); + var min = series.formatValue(series.stats.min); + var max = series.formatValue(series.stats.max); + var total = series.formatValue(series.stats.total); + + if (panel.legend.min) { html += '
    ' + min + '
    '; } + if (panel.legend.max) { html += '
    ' + max + '
    '; } + if (panel.legend.avg) { html += '
    ' + avg + '
    '; } + if (panel.legend.current) { html += '
    ' + current + '
    '; } + if (panel.legend.total) { html += '
    ' + total + '
    '; } + } + + html += '
    '; + seriesElements.push($(html)); + } + + if (panel.legend.alignAsTable) { + var maxHeight = ctrl.height; + + if (!panel.legend.rightSide) { + maxHeight = maxHeight/2; + } + + var topPadding = 6; + var tbodyElem = $('    '); + tbodyElem.css("max-height", maxHeight - topPadding); + tbodyElem.append(tableHeaderElem); + tbodyElem.append(seriesElements); + $container.append(tbodyElem); + } else { + var maxLegendHeight = ctrl.height / 2; + $container.css("max-height", maxLegendHeight - 6); + $container.append(seriesElements); + if (!legendScrollbar) { + legendScrollbar = new PerfectScrollbar($container[0]); + } + legendScrollbar.update(); + } + } + } + }; +}); From ae80a589c1697665c81c0b6df61694dc535bd036 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 6 Dec 2017 12:22:35 +0300 Subject: [PATCH 374/584] graph: refactor --- public/app/plugins/panel/graph/graph.ts | 198 ++++++++++++------------ 1 file changed, 103 insertions(+), 95 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 98198e47fc8..61a6cea7443 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -59,6 +59,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { return; } annotations = ctrl.annotations || []; + buildFlotPairs(data); render_panel(); }); @@ -230,7 +231,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { // Function for rendering panel function render_panel() { panelWidth = elem.width(); - if (shouldAbortRender()) { return; } @@ -241,10 +241,107 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { // un-check dashes if lines are unchecked panel.dashes = panel.lines ? panel.dashes : false; - var stack = panel.stack ? true : null; - // Populate element - var options: any = { + let options: any = buildFlotOptions(panel); + prepareXAxis(options, panel); + configureYAxisOptions(data, options); + thresholdManager.addFlotOptions(options, panel); + eventManager.addFlotEvents(annotations, options); + + sortedSeries = sortSeries(data, panel); + + if (shouldDelayDraw(panel)) { + // temp fix for legends on the side, need to render twice to get dimensions right + callPlot(options, false); + setTimeout(function() { callPlot(options, true); }, 50); + legendSideLastValue = panel.legend.rightSide; + } else { + callPlot(options, true); + } + } + + function buildFlotPairs(data) { + for (let i = 0; i < data.length; i++) { + let series = data[i]; + series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); + + // if hidden remove points and disable stack + if (ctrl.hiddenSeries[series.alias]) { + series.data = []; + series.stack = false; + } + } + } + + function prepareXAxis(options, panel) { + switch (panel.xaxis.mode) { + case 'series': { + options.series.bars.barWidth = 0.7; + options.series.bars.align = 'center'; + + for (let i = 0; i < data.length; i++) { + let series = data[i]; + series.data = [[i + 1, series.stats[panel.xaxis.values[0]]]]; + } + + addXSeriesAxis(options); + break; + } + case 'histogram': { + let bucketSize: number; + let values = getSeriesValues(data); + + if (data.length && values.length) { + let histMin = _.min(_.map(data, s => s.stats.min)); + let histMax = _.max(_.map(data, s => s.stats.max)); + let ticks = panel.xaxis.buckets || panelWidth / 50; + bucketSize = tickStep(histMin, histMax, ticks); + let histogram = convertValuesToHistogram(values, bucketSize); + data[0].data = histogram; + options.series.bars.barWidth = bucketSize * 0.8; + } else { + bucketSize = 0; + } + + addXHistogramAxis(options, bucketSize); + break; + } + case 'table': { + options.series.bars.barWidth = 0.7; + options.series.bars.align = 'center'; + addXTableAxis(options); + break; + } + default: { + options.series.bars.barWidth = getMinTimeStepOfSeries(data) / 1.5; + addTimeAxis(options); + break; + } + } + } + + function callPlot(options, incrementRenderCounter) { + try { + plot = $.plot(elem, sortedSeries, options); + if (ctrl.renderError) { + delete ctrl.error; + delete ctrl.inspector; + } + } catch (e) { + console.log('flotcharts error', e); + ctrl.error = e.message || "Render Error"; + ctrl.renderError = true; + ctrl.inspector = {error: e}; + } + + if (incrementRenderCounter) { + ctrl.renderingCompleted(); + } + } + + function buildFlotOptions(panel) { + const stack = panel.stack ? true : null; + let options = { hooks: { draw: [drawHook], processOffset: [processOffsetHook], @@ -301,96 +398,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { mode: 'x' } }; - - for (let i = 0; i < data.length; i++) { - let series = data[i]; - series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); - - // if hidden remove points and disable stack - if (ctrl.hiddenSeries[series.alias]) { - series.data = []; - series.stack = false; - } - } - - switch (panel.xaxis.mode) { - case 'series': { - options.series.bars.barWidth = 0.7; - options.series.bars.align = 'center'; - - for (let i = 0; i < data.length; i++) { - let series = data[i]; - series.data = [[i + 1, series.stats[panel.xaxis.values[0]]]]; - } - - addXSeriesAxis(options); - break; - } - case 'histogram': { - let bucketSize: number; - let values = getSeriesValues(data); - - if (data.length && values.length) { - let histMin = _.min(_.map(data, s => s.stats.min)); - let histMax = _.max(_.map(data, s => s.stats.max)); - let ticks = panel.xaxis.buckets || panelWidth / 50; - bucketSize = tickStep(histMin, histMax, ticks); - let histogram = convertValuesToHistogram(values, bucketSize); - data[0].data = histogram; - options.series.bars.barWidth = bucketSize * 0.8; - } else { - bucketSize = 0; - } - - addXHistogramAxis(options, bucketSize); - break; - } - case 'table': { - options.series.bars.barWidth = 0.7; - options.series.bars.align = 'center'; - addXTableAxis(options); - break; - } - default: { - options.series.bars.barWidth = getMinTimeStepOfSeries(data) / 1.5; - addTimeAxis(options); - break; - } - } - - thresholdManager.addFlotOptions(options, panel); - eventManager.addFlotEvents(annotations, options); - configureAxisOptions(data, options); - - sortedSeries = sortSeries(data, ctrl.panel); - - function callPlot(incrementRenderCounter) { - try { - plot = $.plot(elem, sortedSeries, options); - if (ctrl.renderError) { - delete ctrl.error; - delete ctrl.inspector; - } - } catch (e) { - console.log('flotcharts error', e); - ctrl.error = e.message || "Render Error"; - ctrl.renderError = true; - ctrl.inspector = {error: e}; - } - - if (incrementRenderCounter) { - ctrl.renderingCompleted(); - } - } - - if (shouldDelayDraw(panel)) { - // temp fix for legends on the side, need to render twice to get dimensions right - callPlot(false); - setTimeout(function() { callPlot(true); }, 50); - legendSideLastValue = panel.legend.rightSide; - } else { - callPlot(true); - } + return options; } function sortSeries(series, panel) { @@ -542,7 +550,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { }; } - function configureAxisOptions(data, options) { + function configureYAxisOptions(data, options) { var defaults = { position: 'left', show: panel.yaxes[0].show, From 0c3e04ca606296f74dc6e48e14084db4dbef116e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 6 Dec 2017 14:08:15 +0300 Subject: [PATCH 375/584] graph: render legend before graph --- public/app/plugins/panel/graph/graph.ts | 45 +++++++++++++----------- public/app/plugins/panel/graph/legend.ts | 3 +- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 61a6cea7443..80f829379eb 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -53,18 +53,28 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { } }); - ctrl.events.on('render', function(renderData) { + /** + * Split graph rendering into two parts. + * First, calculate series stats in buildFlotPairs() function. Then legend rendering started + * (see ctrl.events.on('render') in legend.ts). + * When legend is rendered it emits 'legend-rendering-complete' and graph rendered. + */ + ctrl.events.on('render', (renderData) => { data = renderData || data; if (!data) { return; } annotations = ctrl.annotations || []; buildFlotPairs(data); + ctrl.events.emit('render-legend'); + }); + + ctrl.events.on('legend-rendering-complete', () => { render_panel(); }); // global events - appEvents.on('graph-hover', function(evt) { + appEvents.on('graph-hover', (evt) => { // ignore other graph hover events if shared tooltip is disabled if (!dashboard.sharedTooltipModeEnabled()) { return; @@ -78,7 +88,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { tooltip.show(evt.pos); }, scope); - appEvents.on('graph-hover-clear', function(event, info) { + appEvents.on('graph-hover-clear', (event, info) => { if (plot) { tooltip.clear(plot); } @@ -86,9 +96,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { function getLegendHeight(panelHeight) { const LEGEND_TABLE_LINE_HEIGHT = 21; - const LEGEND_LINE_HEIGHT = 17; const LEGEND_PADDING = 23; - const LEGEND_CHAR_WIDTH = 5; if (!panel.legend.show || panel.legend.rightSide) { return 0; @@ -102,25 +110,22 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { let total = LEGEND_PADDING + (LEGEND_TABLE_LINE_HEIGHT * legendSeries.length); return Math.min(total, Math.floor(panelHeight/2)); } else { - let linesCount = getLegendBoxHeight(legendSeries, panelWidth, LEGEND_CHAR_WIDTH); - let total = LEGEND_PADDING + (LEGEND_LINE_HEIGHT * linesCount); + let legendHeight = getLegendContainerHeight(); + let total = LEGEND_PADDING + (legendHeight); return Math.min(total, Math.floor(panelHeight/2)); } } - function getLegendBoxHeight(legendSeries, legendWidth, charWidth) { - let linesCount = 1; - let currentLineLength = 0; - let legendWidthChars = Math.floor(legendWidth / charWidth); - _.each(legendSeries, (series) => { - let nextLength = series.aliasEscaped.length + 4; - currentLineLength += nextLength; - if (currentLineLength > legendWidthChars) { - linesCount++; - currentLineLength = nextLength; - } - }); - return linesCount; + function getLegendContainerHeight() { + try { + let graphWrapperElem = elem.parent().parent(); + let legendElem = graphWrapperElem.find('.graph-legend-wrapper'); + let legendHeight = legendElem.height(); + return legendHeight; + } catch (e) { + console.log(e); + return 0; + } } function setElementHeight() { diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index f9d5fecf993..1da5aa17f2b 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -18,11 +18,12 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var i; var legendScrollbar; - ctrl.events.on('render', function() { + ctrl.events.on('render-legend', () => { data = ctrl.seriesList; if (data) { render(); } + ctrl.events.emit('legend-rendering-complete'); }); function getSeriesIndexForElement(el) { From 6b4b7969fe22efd231f9d41a3ef90de9cadc14ff Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 6 Dec 2017 14:55:57 +0300 Subject: [PATCH 376/584] graph: fix karma tests --- public/app/plugins/panel/graph/specs/graph_specs.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/app/plugins/panel/graph/specs/graph_specs.ts b/public/app/plugins/panel/graph/specs/graph_specs.ts index 17445dd3002..7d310b078c0 100644 --- a/public/app/plugins/panel/graph/specs/graph_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_specs.ts @@ -87,6 +87,8 @@ describe('grafanaGraph', function() { $.plot = ctx.plotSpy = sinon.spy(); ctrl.events.emit('render', ctx.data); + ctrl.events.emit('render-legend'); + ctrl.events.emit('legend-rendering-complete'); ctx.plotData = ctx.plotSpy.getCall(0).args[1]; ctx.plotOptions = ctx.plotSpy.getCall(0).args[2]; })); From 011b2cd1b21f5e7016e7e7eac1f3908e77093fa7 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Wed, 6 Dec 2017 13:12:16 +0100 Subject: [PATCH 377/584] Fix merge issue on multi-query table transforms * after a match has been found the merger should keep looking for more --- .../panel/table/specs/transformers.jest.ts | 16 +++++++- .../app/plugins/panel/table/transformers.ts | 41 +++++++++++-------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/public/app/plugins/panel/table/specs/transformers.jest.ts b/public/app/plugins/panel/table/specs/transformers.jest.ts index f3b58270bfc..1c7fc3e7852 100644 --- a/public/app/plugins/panel/table/specs/transformers.jest.ts +++ b/public/app/plugins/panel/table/specs/transformers.jest.ts @@ -156,6 +156,18 @@ describe('when transforming time series table', () => { rows: [ [time, 'Label Value 1', 'Label Value 2', 13], ], + }, + { + type: 'table', + columns: [ + { text: 'Time' }, + { text: 'Label Key 1' }, + { text: 'Label Key 2' }, + { text: 'Value' }, + ], + rows: [ + [time, 'Label Value 1', 'Label Value 2', 4], + ], } ]; @@ -226,12 +238,13 @@ describe('when transforming time series table', () => { it ('should return the union of columns for multiple queries', () => { table = transformDataToTable(multipleQueriesDataSameLabels, panel); - expect(table.columns.length).toBe(5); + expect(table.columns.length).toBe(6); expect(table.columns[0].text).toBe('Time'); expect(table.columns[1].text).toBe('Label Key 1'); expect(table.columns[2].text).toBe('Label Key 2'); expect(table.columns[3].text).toBe('Value #A'); expect(table.columns[4].text).toBe('Value #B'); + expect(table.columns[5].text).toBe('Value #C'); }); it ('should return 1 row for a single query', () => { @@ -250,6 +263,7 @@ describe('when transforming time series table', () => { expect(table.rows[0][2]).toBe('Label Value 2'); expect(table.rows[0][3]).toBe(42); expect(table.rows[0][4]).toBe(13); + expect(table.rows[0][5]).toBe(4); }); it ('should return 2 rows for a mulitple queries with different label values', () => { diff --git a/public/app/plugins/panel/table/transformers.ts b/public/app/plugins/panel/table/transformers.ts index 5caf8f09f8c..5081ab785b6 100644 --- a/public/app/plugins/panel/table/transformers.ts +++ b/public/app/plugins/panel/table/transformers.ts @@ -235,26 +235,33 @@ transformers['table'] = { const mergedRows = {}; rows = rows.reduce((acc, row, i) => { if (!mergedRows[i]) { - const match = _.findIndex(rows, (other, j) => { - let same = true; - for (let index = 0; index < nonValueColumnCount; index++) { - if (row[index] !== other[index]) { - same = false; - break; + let offset = i + 1; + while (offset < rows.length) { + const match = _.findIndex(rows, (other, j) => { + let same = true; + for (let index = 0; index < nonValueColumnCount; index++) { + if (row[index] !== other[index]) { + same = false; + break; + } } - } - return same; - }, i + 1); - if (match > -1) { - const matchedRow = rows[match]; - // Merge values into current row - for (let index = nonValueColumnCount; index < columns.length; index++) { - if (row[index] === undefined && matchedRow[index] !== undefined) { - row[index] = matchedRow[index]; - break; + return same; + }, offset); + if (match > -1) { + const matchedRow = rows[match]; + // Merge values into current row + for (let index = nonValueColumnCount; index < columns.length; index++) { + if (row[index] === undefined && matchedRow[index] !== undefined) { + row[index] = matchedRow[index]; + break; + } } + mergedRows[match] = matchedRow; + // Keep looking for more rows to merge + offset = match + 1; + } else { + break; } - mergedRows[match] = matchedRow; } acc.push(row); } From dd3c9da0093414715bfe483110edb74372166025 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 6 Dec 2017 14:11:25 +0100 Subject: [PATCH 378/584] dashboard: Dashboard folder page wip #10083 --- .../components/search/search_results.html | 8 ++- .../core/components/search/search_results.ts | 14 ++++ public/app/core/routes/routes.ts | 5 ++ public/app/core/services/search_srv.ts | 4 +- .../features/dashboard/dashboard_list_ctrl.ts | 21 ++++-- .../dashboard/partials/dashboardList.html | 61 ++++++++++------ .../specs/dashboard_list_ctrl.jest.ts | 2 +- public/sass/components/_dashboard_list.scss | 15 ++-- public/sass/components/_switch.scss | 72 +++++++------------ 9 files changed, 120 insertions(+), 82 deletions(-) diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 582fbe2b059..4a235801ee9 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -5,14 +5,18 @@ ng-show="ctrl.editable" on-change="ctrl.selectionChanged($event)" checked="section.checked" - switch-class="gf-form-switch--search-result__section"> + switch-class="gf-form-switch--transparent gf-form-switch--search-result__section"> {{::section.title}} +
    +   +
    +
    diff --git a/public/app/core/components/search/search_results.ts b/public/app/core/components/search/search_results.ts index de34d5bd5d0..0757a53a517 100644 --- a/public/app/core/components/search/search_results.ts +++ b/public/app/core/components/search/search_results.ts @@ -6,12 +6,26 @@ export class SearchResultsCtrl { onSelectionChanged: any; onTagSelected: any; + /** @ngInject */ + constructor(private $location) { + + } + toggleFolderExpand(section) { if (section.toggle) { section.toggle(section); } } + navigateToFolder(section, evt) { + this.$location.path('/dashboards/folder/' + section.id + '/' + section.uri); + + if (evt) { + evt.stopPropagation(); + evt.preventDefault(); + } + } + toggleSelection(item, evt) { item.checked = !item.checked; diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index d3ef3d51477..f4132400c7d 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -73,6 +73,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controller : 'DashboardListCtrl', controllerAs: 'ctrl', }) + .when('/dashboards/folder/:folderId/:type/:slug', { + templateUrl: 'public/app/features/dashboard/partials/dashboardList.html', + controller : 'DashboardListCtrl', + controllerAs: 'ctrl', + }) .when('/org', { templateUrl: 'public/app/features/org/partials/orgDetails.html', controller : 'OrgDetailsCtrl', diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index fdd9b8ca77f..c9e6e60e3e3 100644 --- a/public/app/core/services/search_srv.ts +++ b/public/app/core/services/search_srv.ts @@ -154,12 +154,12 @@ export class SearchSrv { } search(options) { - if (!options.query && (!options.tag || options.tag.length === 0) && !options.starred) { + if (!options.folderIds && !options.query && (!options.tag || options.tag.length === 0) && !options.starred) { return this.browse(options); } let query = _.clone(options); - query.folderIds = []; + query.folderIds = options.folderIds || []; query.type = 'dash-db'; return this.backendSrv.search(query).then(results => { diff --git a/public/app/features/dashboard/dashboard_list_ctrl.ts b/public/app/features/dashboard/dashboard_list_ctrl.ts index ebb7d426089..72861377f71 100644 --- a/public/app/features/dashboard/dashboard_list_ctrl.ts +++ b/public/app/features/dashboard/dashboard_list_ctrl.ts @@ -14,16 +14,29 @@ export class DashboardListCtrl { selectAllChecked = false; starredFilterOptions = [{text: 'Filter by Starred', disabled: true}, {text: 'Yes'}, {text: 'No'}]; selectedStarredFilter: any; + folderTitle = null; /** @ngInject */ - constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { + constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv, private $routeParams) { this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0); this.query = {query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true}; + this.selectedStarredFilter = this.starredFilterOptions[0]; - this.getDashboards().then(() => { - this.getTags(); - }); + if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { + this.folderTitle = result.dashboard.title; + this.query.folderIds = [result.dashboard.id]; + + this.getDashboards().then(() => { + this.getTags(); + }); + }); + } else { + this.getDashboards().then(() => { + this.getTags(); + }); + } } getDashboards() { diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 8a994f12c8c..7cd523dd671 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -1,17 +1,35 @@
    +
    +
    +

    +  {{ctrl.folderTitle}} +

    +
    +
    + +     + + Dashboard + + + + Folder + +
    +
    - + Dashboard - + Folder @@ -39,29 +57,12 @@
    -
    -
    - - -
    -
    -
    +
    + + +
    -
    No dashboards matching your query were found.
    +
    No dashboards matching your query were found.
    { } }, q, searchSrvStub); + return new DashboardListCtrl({}, { getNav: () => { } }, q, searchSrvStub, {}); } diff --git a/public/sass/components/_dashboard_list.scss b/public/sass/components/_dashboard_list.scss index 9d0b3144ba6..e1574f46da6 100644 --- a/public/sass/components/_dashboard_list.scss +++ b/public/sass/components/_dashboard_list.scss @@ -1,20 +1,25 @@ .dashboard-list { - height: 75%; - .search-results-container { - padding-left: 0; - padding-right: 0; + padding: 5px 0 0 0; } } .search-results-filter-row { + height: 35px; display: flex; justify-content: space-between; + + .gf-form-button-row { + padding-top: 0; + + button:last-child { + margin-right: 0; + } + } } .search-results-filter-row__filters { display: flex; - width: 300px; } .search-results-filter-row__filters-item { diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 4888f5c9c4a..b612091d171 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -102,12 +102,23 @@ $switch-height: 1.5rem; } } -.gf-form-switch--search-result__section, .gf-form-switch--search-result__item { - min-width: 2.6rem; - +.gf-form-switch--transparent { input + label { - background-color: inherit; - height: 1.7rem; + background: transparent; + } + + input + label::before, input + label::after { + background: transparent; + } + + &:hover { + input + label::before { + background: transparent; + } + + input + label::after { + background: transparent; + } } } @@ -115,57 +126,24 @@ $switch-height: 1.5rem; min-width: 3.3rem; margin-right: -0.3rem; - &:hover { - input + label::before { - @include buttonBackground($panel-bg, $panel-bg); - } - - input + label::after { - @include buttonBackground($panel-bg, $panel-bg, lighten($orange, 10%)); - } - } - - input + label::before, input + label::after { - @include buttonBackground($panel-bg, $panel-bg); - } - - input + label::before { - color: $gray-2 - } - - input + label::after { - color: $orange + input + label { + height: 1.7rem; } } .gf-form-switch--search-result__item { + min-width: 2.6rem; + input + label { height: 2.7rem; } +} +.gf-form-switch--search-result-filter-row__checkbox { + min-width: 4.7rem; - &:hover { - input + label::before { - @include buttonBackground($list-item-hover-bg, $list-item-hover-bg); - } - - input + label::after { - @include buttonBackground($list-item-hover-bg, $list-item-hover-bg); - color: lighten($orange, 10%); - } - - } - - input + label::before, input + label::after { - @include buttonBackground($list-item-hover-bg, $list-item-hover-bg); - } - - input + label::before { - color: $gray-2 - } - - input + label::after { - color: $orange + input + label { + height: 2.5rem; } } From 0029d96579629f496f819df21a3898825ae3ccfb Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 6 Dec 2017 14:27:07 +0100 Subject: [PATCH 379/584] dashboard: Show CTA for empty lists/folders #10083 --- .../dashboard/partials/dashboardList.html | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 7cd523dd671..cecd52aa891 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -57,7 +57,20 @@
    -
    +
    + +
    + +
    -
    No dashboards matching your query were found.
    Date: Wed, 6 Dec 2017 14:32:22 +0100 Subject: [PATCH 380/584] dashboard: fix search results tests #10083 --- public/app/core/components/search/search_results.jest.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/core/components/search/search_results.jest.ts b/public/app/core/components/search/search_results.jest.ts index ab24242860e..fc661dc8472 100644 --- a/public/app/core/components/search/search_results.jest.ts +++ b/public/app/core/components/search/search_results.jest.ts @@ -8,7 +8,7 @@ describe('SearchResultsCtrl', () => { let selectionChanged = false; beforeEach(() => { - ctrl = new SearchResultsCtrl(); + ctrl = new SearchResultsCtrl({}); ctrl.onSelectionChanged = () => selectionChanged = true; ctrl.toggleSelection(item); }); @@ -27,7 +27,7 @@ describe('SearchResultsCtrl', () => { let selectionChanged = false; beforeEach(() => { - ctrl = new SearchResultsCtrl(); + ctrl = new SearchResultsCtrl({}); ctrl.onSelectionChanged = () => selectionChanged = true; ctrl.toggleSelection(item); }); @@ -45,7 +45,7 @@ describe('SearchResultsCtrl', () => { let selectedTag = null; beforeEach(() => { - ctrl = new SearchResultsCtrl(); + ctrl = new SearchResultsCtrl({}); ctrl.onTagSelected = (tag) => selectedTag = tag; ctrl.selectTag('tag-test'); }); @@ -64,7 +64,7 @@ describe('SearchResultsCtrl', () => { }; beforeEach(() => { - ctrl = new SearchResultsCtrl(); + ctrl = new SearchResultsCtrl({}); ctrl.toggleFolderExpand(folder); }); From ea3447fbfd67ead84db7ce869a1cd595338f44b3 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 6 Dec 2017 16:54:24 +0100 Subject: [PATCH 381/584] fixed 404 for grafana5 + now responsive (#10101) * fixed 404 for grafana5 + now resonsive * code formatting fixes --- public/app/partials/error.html | 109 ++++++++++++++++-------------- public/sass/pages/_errorpage.scss | 35 +++++++++- 2 files changed, 91 insertions(+), 53 deletions(-) diff --git a/public/app/partials/error.html b/public/app/partials/error.html index 0750e860dd5..a7c074fea94 100644 --- a/public/app/partials/error.html +++ b/public/app/partials/error.html @@ -1,55 +1,60 @@ - -
    -
    -

    - Page not found (404) -

    -
    -
    -
    -
    -
    -
    -
    -

    100%

    -

    80%

    -

    60%

    -

    40%

    -

    20%

    -

    0%

    -
    -
    - -
    -

    Then

    -

    Now

    -
    -
    -
    -
    -
    -
    -

    current

    -
    -
    - -
    -
    -

    Chances you are on the page you are looking for.

    -

    0%

    -
    -
    -

    Sorry for the inconvenience

    -

    Please go back to your home dashboard and try again.

    -

    If the error persists, seek help on the community site.

    -
    -
    -
    -
    - -
    -
    - +
    + +
    +

    + Page not found +

    +
    + 404 Error +
    +
    +
    +
    +
    +
    +
    +
    +

    100%

    +

    80%

    +

    60%

    +

    40%

    +

    20%

    +

    0%

    +
    +
    + +
    +

    Then

    +

    Now

    +
    +
    +
    +
    +
    +
    +

    current

    +
    +
    + +
    +
    +

    Chances you are on the page you are looking for.

    +

    0%

    +
    +
    +

    Sorry for the inconvenience

    +

    Please go back to your + home dashboard and try again.

    +

    If the error persists, seek help on the + community site.

    +
    +
    +
    +
    + +
    diff --git a/public/sass/pages/_errorpage.scss b/public/sass/pages/_errorpage.scss index e18306ea05a..dac2768e89b 100644 --- a/public/sass/pages/_errorpage.scss +++ b/public/sass/pages/_errorpage.scss @@ -3,6 +3,11 @@ // Layout // +.error-container { + display: flex; + flex-direction: row; +} + .error-row { display: flex; flex-direction: row; @@ -22,7 +27,7 @@ .info-box { width: 38%; - padding: 2rem 1rem 6rem; + padding: 2rem 1rem 2rem; } .graph-percentage {padding: 0 0 1.5rem;} @@ -58,3 +63,31 @@ } .graph-text {margin: 0;} + +@include media-breakpoint-down(sm) { + .graph-box { + width: 50%; + } + + .info-box { + width: 50%; + } +} + +@include media-breakpoint-down(xs) { + .error-container { + flex-direction: column; + } + + .graph-box { + width: 100%; + } + + .info-box { + width: 100%; + } + + .error-full-width { + width: 100%; + } +} From 8adaf99bff25a353ef3cdaafb765fdaff7e31905 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 6 Dec 2017 16:55:12 +0100 Subject: [PATCH 382/584] other panels now hidden, fixes 10088 (#10102) --- public/sass/components/_dashboard_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index a6dd09bcd5a..b7886a3a2dc 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -8,7 +8,7 @@ } .react-grid-item { - display: none; + display: none !important; transition-property: none !important; } From e8807f4bce62db7a7b95a852c081a947eb886f11 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 6 Dec 2017 17:36:44 +0100 Subject: [PATCH 383/584] Fixing tabs for Grafana 5 - #10082 (#10103) * ux: Make new tabs responsive #10082 * ux: Add possibility to manipulate url in angular router outside of angular - and use it in the responsive navigation #10082 --- public/app/core/angular_wrappers.ts | 6 +-- .../{ => PageHeader}/PageHeader.tsx | 45 +++++++++++++++++-- public/app/core/components/grafana_app.ts | 3 +- public/app/core/services/all.js | 1 + public/app/core/services/global_event_srv.ts | 21 +++++++++ public/app/core/utils/react2angular.ts | 3 -- public/app/features/plugins/ds_list_ctrl.ts | 14 +++++- public/sass/_variables.scss | 2 +- public/sass/components/_page_header.scss | 15 +++++++ public/sass/components/_tabs.scss | 14 +++++- 10 files changed, 109 insertions(+), 15 deletions(-) rename public/app/core/components/{ => PageHeader}/PageHeader.tsx (54%) create mode 100644 public/app/core/services/global_event_srv.ts diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 3880be7de8d..4cb3ca513cc 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,12 +1,10 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { PasswordStrength } from './components/PasswordStrength'; -import PageHeader from './components/PageHeader'; +import PageHeader from './components/PageHeader/PageHeader'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; export function registerAngularDirectives() { - react2AngularDirective('passwordStrength', PasswordStrength, ['password']); - react2AngularDirective('pageHeader', PageHeader, ['model', "noTabs"]); + react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']); react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); - } diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx similarity index 54% rename from public/app/core/components/PageHeader.tsx rename to public/app/core/components/PageHeader/PageHeader.tsx index e0accc03fd4..5371b464ec3 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { NavModel, NavModelItem } from '../nav_model_srv'; +import { NavModel, NavModelItem } from '../../nav_model_srv'; import classNames from 'classnames'; +import appEvents from 'app/core/app_events'; export interface IProps { model: NavModel; @@ -26,8 +27,44 @@ function TabItem(tab: NavModelItem) { ); } -function Tabs({main}: {main: NavModelItem}) { - return
      {main.children.map(TabItem)}
    ; +function SelectOption(navItem: NavModelItem) { + if (navItem.hideFromTabs) { // TODO: Rename hideFromTabs => hideFromNav + return (null); + } + + return ( + + ); +} + +function Navigation({main}: {main: NavModelItem}) { + return (); +} + +function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) { + const defaultSelectedItem = main.children.find(navItem => { + return navItem.active === true; + }); + + const gotoUrl = evt => { + var element = evt.target; + var url = element.options[element.selectedIndex].value; + appEvents.emit('location-change', {href: url}); + }; + + return (); +} + +function Tabs({main, customCss}: {main: NavModelItem, customCss: string}) { + return
      {main.children.map(TabItem)}
    ; } export default class PageHeader extends React.Component { @@ -63,7 +100,7 @@ export default class PageHeader extends React.Component {
    {this.renderHeaderTitle(this.props.model.main)} - {this.props.model.main.children && } + {this.props.model.main.children && }
    diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index c60c8a20a4c..77089b14ddc 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -12,7 +12,7 @@ import Drop from 'tether-drop'; export class GrafanaCtrl { /** @ngInject */ - constructor($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) { + constructor($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv, globalEventSrv) { $scope.init = function() { $scope.contextSrv = contextSrv; @@ -23,6 +23,7 @@ export class GrafanaCtrl { profiler.init(config, $rootScope); alertSrv.init(); utilSrv.init(); + globalEventSrv.init(); $scope.dashAlerts = alertSrv; }; diff --git a/public/app/core/services/all.js b/public/app/core/services/all.js index a308febb219..0053d789cbe 100644 --- a/public/app/core/services/all.js +++ b/public/app/core/services/all.js @@ -8,5 +8,6 @@ define([ './segment_srv', './backend_srv', './dynamic_directive_srv', + './global_event_srv' ], function () {}); diff --git a/public/app/core/services/global_event_srv.ts b/public/app/core/services/global_event_srv.ts new file mode 100644 index 00000000000..a4d5865eb63 --- /dev/null +++ b/public/app/core/services/global_event_srv.ts @@ -0,0 +1,21 @@ +import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; + +// This service is for registering global events. +// Good for communication react > angular and vice verse +export class GlobalEventSrv { + + /** @ngInject */ + constructor(private $location, private $timeout) { + } + + init() { + appEvents.on('location-change', payload => { + this.$timeout(() => { // A hack to use timeout when we're changing things (in this case the url) from outside of Angular. + this.$location.path(payload.href); + }); + }); + } +} + +coreModule.service('globalEventSrv', GlobalEventSrv); diff --git a/public/app/core/utils/react2angular.ts b/public/app/core/utils/react2angular.ts index ad6f7476d6a..e7ad3502f88 100644 --- a/public/app/core/utils/react2angular.ts +++ b/public/app/core/utils/react2angular.ts @@ -1,10 +1,7 @@ import coreModule from 'app/core/core_module'; export function react2AngularDirective(name: string, component: any, options: any) { - coreModule.directive(name, ['reactDirective', reactDirective => { return reactDirective(component, options); }]); - } - diff --git a/public/app/features/plugins/ds_list_ctrl.ts b/public/app/features/plugins/ds_list_ctrl.ts index 5feadb68fe3..ce9047166ef 100644 --- a/public/app/features/plugins/ds_list_ctrl.ts +++ b/public/app/features/plugins/ds_list_ctrl.ts @@ -1,6 +1,7 @@ /// import coreModule from '../../core/core_module'; +import {appEvents} from 'app/core/core'; export class DataSourcesCtrl { datasources: any; @@ -11,13 +12,24 @@ export class DataSourcesCtrl { private $scope, private backendSrv, private datasourceSrv, + private $location, private navModelSrv) { this.navModel = this.navModelSrv.getNav('cfg', 'datasources', 0); - + this.navigateToUrl = this.navigateToUrl.bind(this); backendSrv.get('/api/datasources').then(result => { this.datasources = result; }); + + appEvents.on('location-change', payload => { + this.navigateToUrl(payload.href); + }); + } + + navigateToUrl(url) { + // debugger; + this.$location.path(url); + this.$location.replace(); } removeDataSourceConfirmed(ds) { diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index bb4645504aa..9a1e42995b3 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -235,5 +235,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding: 9px 15px 9px; +$tabs-padding: 10px 15px 9px; diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index b6f44be1c18..dc570e8f13c 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -72,6 +72,21 @@ text-transform: uppercase; } +.page-header__select_nav { + margin-bottom: 10px; + + @include media-breakpoint-up(lg) { + display: none; + } +} + +.page-header__tabs { + display: none; + @include media-breakpoint-up(lg) { + display: block; + } +} + .page-breadcrumbs { display: flex; padding: 10px 0; diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 80874241b79..396c3f98880 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -16,7 +16,7 @@ position: relative; display: block; border: solid transparent; - border-width: 2px 1px 1px; + border-width: 0 1px 1px; border-radius: 3px 3px 0 0; i { @@ -34,6 +34,18 @@ border-color: $orange $tab-border-color transparent; background: $page-bg; color: $link-color; + overflow: hidden; + + &::before { + display: block; + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 2px; + top: 0; + background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%); + } } } From 2cf1c29eae283d9dd3df61a6649e3922ce9c3702 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 6 Dec 2017 21:30:14 +0300 Subject: [PATCH 384/584] graph: refactor (don't render twice) --- public/app/plugins/panel/graph/graph.ts | 36 +++---------------------- 1 file changed, 3 insertions(+), 33 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 80f829379eb..d24aedc66b9 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -34,7 +34,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { var data; var plot; var sortedSeries; - var legendSideLastValue = null; var rootScope = scope.$root; var panelWidth = 0; var eventManager = new EventManager(ctrl); @@ -95,25 +94,14 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { }, scope); function getLegendHeight(panelHeight) { - const LEGEND_TABLE_LINE_HEIGHT = 21; const LEGEND_PADDING = 23; if (!panel.legend.show || panel.legend.rightSide) { return 0; } - let legendSeries = _.filter(data, function(series) { - return series.hideFromLegend(panel.legend) === false; - }); - - if (panel.legend.alignAsTable) { - let total = LEGEND_PADDING + (LEGEND_TABLE_LINE_HEIGHT * legendSeries.length); - return Math.min(total, Math.floor(panelHeight/2)); - } else { - let legendHeight = getLegendContainerHeight(); - let total = LEGEND_PADDING + (legendHeight); - return Math.min(total, Math.floor(panelHeight/2)); - } + let legendHeight = getLegendContainerHeight() + LEGEND_PADDING; + return Math.min(legendHeight, Math.floor(panelHeight/2)); } function getLegendContainerHeight() { @@ -254,15 +242,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { eventManager.addFlotEvents(annotations, options); sortedSeries = sortSeries(data, panel); - - if (shouldDelayDraw(panel)) { - // temp fix for legends on the side, need to render twice to get dimensions right - callPlot(options, false); - setTimeout(function() { callPlot(options, true); }, 50); - legendSideLastValue = panel.legend.rightSide; - } else { - callPlot(options, true); - } + callPlot(options, true); } function buildFlotPairs(data) { @@ -446,16 +426,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { } } - function shouldDelayDraw(panel) { - if (panel.legend.rightSide) { - return true; - } - if (legendSideLastValue !== null && panel.legend.rightSide !== legendSideLastValue) { - return true; - } - return false; - } - function addTimeAxis(options) { var ticks = panelWidth / 100; var min = _.isUndefined(ctrl.range.from) ? null : ctrl.range.from.valueOf(); From f87b9aaa8a3f5e518942eab1a9d8065747980ba1 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 6 Dec 2017 20:34:41 +0100 Subject: [PATCH 385/584] dashboard: keyboard nav in dashboard search - closes #10100 Pressing enter/return for a folder toggles it. Pressing enter/return for a dashboard navigates to it. --- .../app/core/components/search/search.jest.ts | 330 ++++++++++++++++++ public/app/core/components/search/search.ts | 93 ++++- .../components/search/search_results.html | 2 +- public/app/core/services/search_srv.ts | 4 - .../features/dashboard/dashboard_list_ctrl.ts | 4 - .../specs/dashboard_list_ctrl.jest.ts | 3 - public/sass/components/_search.scss | 10 +- 7 files changed, 418 insertions(+), 28 deletions(-) create mode 100644 public/app/core/components/search/search.jest.ts diff --git a/public/app/core/components/search/search.jest.ts b/public/app/core/components/search/search.jest.ts new file mode 100644 index 00000000000..6eaec024e5f --- /dev/null +++ b/public/app/core/components/search/search.jest.ts @@ -0,0 +1,330 @@ +import { SearchCtrl } from './search'; + +describe('SearchCtrl', () => { + let ctrl = new SearchCtrl({}, {}, {}, {}, { onAppEvent: () => { } }); + + describe('Given an empty result', () => { + beforeEach(() => { + ctrl.results = []; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); + + it('should not navigate', () => { + expect(ctrl.selectedIndex).toBe(0); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); + + it('should not navigate', () => { + expect(ctrl.selectedIndex).toBe(0); + }); + }); + }); + + describe('Given a result of one selected collapsed folder with no dashboards and a root folder with 2 dashboards', () => { + beforeEach(() => { + ctrl.results = [ + { + id: 1, + title: 'folder', + items: [], + selected: true, + expanded: false, + toggle: (i) => i.expanded = !i.expanded + }, + { + id: 0, + title: 'Root', + items: [ + { id: 3, selected: false }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first folder', () => { + expect(ctrl.results[0].selected).toBeTruthy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + }); + + describe('Given a result of one selected collapsed folder with 2 dashboards and a root folder with 2 dashboards', () => { + beforeEach(() => { + ctrl.results = [ + { + id: 1, + title: 'folder', + items: [ + { id: 2, selected: false }, + { id: 4, selected: false } + ], + selected: true, + expanded: false, + toggle: (i) => i.expanded = !i.expanded + }, + { + id: 0, + title: 'Root', + items: [ + { id: 3, selected: false }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first folder', () => { + expect(ctrl.results[0].selected).toBeTruthy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + }); + + describe('Given a result of a search with 2 dashboards where the first is selected', () => { + beforeEach(() => { + ctrl.results = [ + { + hideHeader: true, + items: [ + { id: 3, selected: true }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeTruthy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeTruthy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + }); + }); + }); +}); diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index f8dc871e192..08d050c81bf 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -64,18 +64,70 @@ export class SearchCtrl { this.moveSelection(-1); } if (evt.keyCode === 13) { - var selectedDash = this.results[this.selectedIndex]; - if (selectedDash) { - this.$location.search({}); - this.$location.path(selectedDash.url); + const flattenedResult = this.getFlattenedResultForNavigation(); + const currentItem = flattenedResult[this.selectedIndex]; + + if (currentItem) { + if (currentItem.dashboardIndex !== undefined) { + const selectedDash = this.results[currentItem.folderIndex].items[currentItem.dashboardIndex]; + + if (selectedDash) { + this.$location.search({}); + this.$location.path(selectedDash.url); + } + } else { + const selectedFolder = this.results[currentItem.folderIndex]; + + if (selectedFolder) { + selectedFolder.toggle(selectedFolder); + } + } } } } moveSelection(direction) { - var max = (this.results || []).length; - var newIndex = this.selectedIndex + direction; + if (this.results.length === 0) { + return; + } + + const flattenedResult = this.getFlattenedResultForNavigation(); + const currentItem = flattenedResult[this.selectedIndex]; + + if (currentItem) { + if (currentItem.dashboardIndex !== undefined) { + this.results[currentItem.folderIndex].items[currentItem.dashboardIndex].selected = false; + } else { + this.results[currentItem.folderIndex].selected = false; + } + } + + const max = flattenedResult.length; + let newIndex = this.selectedIndex + direction; this.selectedIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex; + const selectedItem = flattenedResult[this.selectedIndex]; + + if (selectedItem.dashboardIndex === undefined && this.results[selectedItem.folderIndex].id === 0) { + this.moveSelection(direction); + return; + } + + if (selectedItem.dashboardIndex !== undefined) { + if (!this.results[selectedItem.folderIndex].expanded) { + this.moveSelection(direction); + return; + } + + this.results[selectedItem.folderIndex].items[selectedItem.dashboardIndex].selected = true; + return; + } + + if (this.results[selectedItem.folderIndex].hideHeader) { + this.moveSelection(direction); + return; + } + + this.results[selectedItem.folderIndex].selected = true; } searchDashboards() { @@ -84,8 +136,9 @@ export class SearchCtrl { return this.searchSrv.search(this.query).then(results => { if (localSearchId < this.currentSearchId) { return; } - this.results = results; + this.results = results || []; this.isLoading = false; + this.moveSelection(1); }); } @@ -125,12 +178,32 @@ export class SearchCtrl { search() { this.showImport = false; - this.selectedIndex = 0; + this.selectedIndex = -1; this.searchDashboards(); } - toggleFolder(section) { - this.searchSrv.toggleSection(section); + private getFlattenedResultForNavigation() { + let folderIndex = 0; + + return _.flatMap(this.results, (s) => { + let result = []; + + result.push({ + folderIndex: folderIndex + }); + + let dashboardIndex = 0; + + result = result.concat(_.map(s.items || [], (i) => { + return { + folderIndex: folderIndex, + dashboardIndex: dashboardIndex++ + }; + })); + + folderIndex++; + return result; + }); } } diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 4a235801ee9..2008910f53a 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -1,5 +1,5 @@
    - +
    { this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results); diff --git a/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts b/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts index a84ea009af9..1c13d138b6d 100644 --- a/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts +++ b/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts @@ -537,9 +537,6 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) { search: (options: any) => { return q.resolve(searchResponse); }, - toggleSection: (section) => { - return; - }, getDashboardTags: () => { return q.resolve(tags || []); } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 0278fd7afb2..caf6084fb9e 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -120,8 +120,9 @@ display: flex; flex-grow: 1; - &:hover { - color: $text-color-weak; + &:hover, &.selected { + color: $link-hover-color; + .search-section__header__toggle { background: $tight-form-func-bg; color: $link-hover-color; @@ -151,11 +152,8 @@ white-space: nowrap; padding: 0px; - &:hover { + &:hover, &.selected { @include left-brand-border-gradient(); - } - - &.selected { background: $list-item-hover-bg; } } From 58fb35c5cbc3d056093420a2c13a88788cb6134c Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 6 Dec 2017 23:51:39 +0100 Subject: [PATCH 386/584] dashboard: fix linting and formating - #10100 --- .../app/core/components/search/search.jest.ts | 633 +++++++++--------- 1 file changed, 319 insertions(+), 314 deletions(-) diff --git a/public/app/core/components/search/search.jest.ts b/public/app/core/components/search/search.jest.ts index 6eaec024e5f..68b1292f9d4 100644 --- a/public/app/core/components/search/search.jest.ts +++ b/public/app/core/components/search/search.jest.ts @@ -1,330 +1,335 @@ import { SearchCtrl } from './search'; +import { SearchSrv } from 'app/core/services/search_srv'; describe('SearchCtrl', () => { - let ctrl = new SearchCtrl({}, {}, {}, {}, { onAppEvent: () => { } }); + const searchSrvStub = { + search: (options: any) => {}, + getDashboardTags: () => {} + }; + let ctrl = new SearchCtrl({}, {}, {}, searchSrvStub, { onAppEvent: () => { } }); - describe('Given an empty result', () => { - beforeEach(() => { - ctrl.results = []; - }); - - describe('When navigating down one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - }); - - it('should not navigate', () => { - expect(ctrl.selectedIndex).toBe(0); - }); - }); - - describe('When navigating up one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(-1); - }); - - it('should not navigate', () => { - expect(ctrl.selectedIndex).toBe(0); - }); - }); + describe('Given an empty result', () => { + beforeEach(() => { + ctrl.results = []; }); - describe('Given a result of one selected collapsed folder with no dashboards and a root folder with 2 dashboards', () => { - beforeEach(() => { - ctrl.results = [ - { - id: 1, - title: 'folder', - items: [], - selected: true, - expanded: false, - toggle: (i) => i.expanded = !i.expanded - }, - { - id: 0, - title: 'Root', - items: [ - { id: 3, selected: false }, - { id: 5, selected: false } - ], - selected: false, - expanded: true, - toggle: (i) => i.expanded = !i.expanded - } - ]; - }); + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); - describe('When navigating down one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - }); - - it('should select first dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeTruthy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); - - describe('When navigating down two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select last dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating down three steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select first folder', () => { - expect(ctrl.results[0].selected).toBeTruthy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); - - describe('When navigating up one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(-1); - }); - - it('should select last dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating up two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(-1); - ctrl.moveSelection(-1); - }); - - it('should select first dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeTruthy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); + it('should not navigate', () => { + expect(ctrl.selectedIndex).toBe(0); + }); }); - describe('Given a result of one selected collapsed folder with 2 dashboards and a root folder with 2 dashboards', () => { - beforeEach(() => { - ctrl.results = [ - { - id: 1, - title: 'folder', - items: [ - { id: 2, selected: false }, - { id: 4, selected: false } - ], - selected: true, - expanded: false, - toggle: (i) => i.expanded = !i.expanded - }, - { - id: 0, - title: 'Root', - items: [ - { id: 3, selected: false }, - { id: 5, selected: false } - ], - selected: false, - expanded: true, - toggle: (i) => i.expanded = !i.expanded - } - ]; - }); + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); - describe('When navigating down one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - }); + it('should not navigate', () => { + expect(ctrl.selectedIndex).toBe(0); + }); + }); + }); - it('should select first dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeTruthy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); - - describe('When navigating down two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select last dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating down three steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select first folder', () => { - expect(ctrl.results[0].selected).toBeTruthy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); - - describe('When navigating up one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(-1); - }); - - it('should select last dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeFalsy(); - expect(ctrl.results[1].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating up two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 0; - ctrl.moveSelection(-1); - ctrl.moveSelection(-1); - }); - - it('should select first dashboard in root folder', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[1].selected).toBeFalsy(); - expect(ctrl.results[1].items[0].selected).toBeTruthy(); - expect(ctrl.results[1].items[1].selected).toBeFalsy(); - }); - }); + describe('Given a result of one selected collapsed folder with no dashboards and a root folder with 2 dashboards', () => { + beforeEach(() => { + ctrl.results = [ + { + id: 1, + title: 'folder', + items: [], + selected: true, + expanded: false, + toggle: (i) => i.expanded = !i.expanded + }, + { + id: 0, + title: 'Root', + items: [ + { id: 3, selected: false }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; }); - describe('Given a result of a search with 2 dashboards where the first is selected', () => { - beforeEach(() => { - ctrl.results = [ - { - hideHeader: true, - items: [ - { id: 3, selected: true }, - { id: 5, selected: false } - ], - selected: false, - expanded: true, - toggle: (i) => i.expanded = !i.expanded - } - ]; - }); + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); - describe('When navigating down one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 1; - ctrl.moveSelection(1); - }); - - it('should select last dashboard', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating down two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 1; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select first dashboard', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeTruthy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - }); - }); - - describe('When navigating down three steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 1; - ctrl.moveSelection(1); - ctrl.moveSelection(1); - ctrl.moveSelection(1); - }); - - it('should select last dashboard', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating up one step', () => { - beforeEach(() => { - ctrl.selectedIndex = 1; - ctrl.moveSelection(-1); - }); - - it('should select last dashboard', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[1].selected).toBeTruthy(); - }); - }); - - describe('When navigating up two steps', () => { - beforeEach(() => { - ctrl.selectedIndex = 1; - ctrl.moveSelection(-1); - ctrl.moveSelection(-1); - }); - - it('should select first dashboard', () => { - expect(ctrl.results[0].selected).toBeFalsy(); - expect(ctrl.results[0].items[0].selected).toBeTruthy(); - expect(ctrl.results[0].items[1].selected).toBeFalsy(); - }); - }); + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first folder', () => { + expect(ctrl.results[0].selected).toBeTruthy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + }); + + describe('Given a result of one selected collapsed folder with 2 dashboards and a root folder with 2 dashboards', () => { + beforeEach(() => { + ctrl.results = [ + { + id: 1, + title: 'folder', + items: [ + { id: 2, selected: false }, + { id: 4, selected: false } + ], + selected: true, + expanded: false, + toggle: (i) => i.expanded = !i.expanded + }, + { + id: 0, + title: 'Root', + items: [ + { id: 3, selected: false }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first folder', () => { + expect(ctrl.results[0].selected).toBeTruthy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeFalsy(); + expect(ctrl.results[1].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 0; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard in root folder', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[1].selected).toBeFalsy(); + expect(ctrl.results[1].items[0].selected).toBeTruthy(); + expect(ctrl.results[1].items[1].selected).toBeFalsy(); + }); + }); + }); + + describe('Given a result of a search with 2 dashboards where the first is selected', () => { + beforeEach(() => { + ctrl.results = [ + { + hideHeader: true, + items: [ + { id: 3, selected: true }, + { id: 5, selected: false } + ], + selected: false, + expanded: true, + toggle: (i) => i.expanded = !i.expanded + } + ]; + }); + + describe('When navigating down one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating down two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select first dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeTruthy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + }); + }); + + describe('When navigating down three steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(1); + ctrl.moveSelection(1); + ctrl.moveSelection(1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up one step', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(-1); + }); + + it('should select last dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[1].selected).toBeTruthy(); + }); + }); + + describe('When navigating up two steps', () => { + beforeEach(() => { + ctrl.selectedIndex = 1; + ctrl.moveSelection(-1); + ctrl.moveSelection(-1); + }); + + it('should select first dashboard', () => { + expect(ctrl.results[0].selected).toBeFalsy(); + expect(ctrl.results[0].items[0].selected).toBeTruthy(); + expect(ctrl.results[0].items[1].selected).toBeFalsy(); + }); + }); + }); }); From fe88658bddf988fb7c9eef4e3dd8cb02b1e725da Mon Sep 17 00:00:00 2001 From: Ben Whaley Date: Thu, 7 Dec 2017 03:41:45 +0000 Subject: [PATCH 387/584] Resolves grafana/grafana:#9309 --- pkg/tsdb/cloudwatch/credentials.go | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/pkg/tsdb/cloudwatch/credentials.go b/pkg/tsdb/cloudwatch/credentials.go index 784f3b729ac..9acdf87f5db 100644 --- a/pkg/tsdb/cloudwatch/credentials.go +++ b/pkg/tsdb/cloudwatch/credentials.go @@ -12,6 +12,7 @@ import ( "github.com/aws/aws-sdk-go/aws/credentials/ec2rolecreds" "github.com/aws/aws-sdk-go/aws/credentials/endpointcreds" "github.com/aws/aws-sdk-go/aws/ec2metadata" + "github.com/aws/aws-sdk-go/aws/defaults" "github.com/aws/aws-sdk-go/aws/session" "github.com/aws/aws-sdk-go/service/cloudwatch" "github.com/aws/aws-sdk-go/service/sts" @@ -128,10 +129,10 @@ func remoteCredProvider(sess *session.Session) credentials.Provider { func ecsCredProvider(sess *session.Session, uri string) credentials.Provider { const host = `169.254.170.2` - c := ec2metadata.New(sess) + d := defaults.Get() return endpointcreds.NewProviderClient( - c.Client.Config, - c.Client.Handlers, + *d.Config, + d.Handlers, fmt.Sprintf("http://%s%s", host, uri), func(p *endpointcreds.Provider) { p.ExpiryWindow = 5 * time.Minute }) } From 3cdf0dce562692ad93125ee09bbc51fe7530c3bc Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 6 Dec 2017 23:50:29 +0300 Subject: [PATCH 388/584] graph: move auto decimals calc to ticks.ts and use it for legend values format. --- public/app/core/core.ts | 6 +- public/app/core/time_series2.ts | 38 ++++++++ public/app/core/utils/ticks.ts | 107 +++++++++++++++++++++++ public/app/plugins/panel/graph/graph.ts | 24 +---- public/app/plugins/panel/graph/legend.ts | 7 ++ 5 files changed, 158 insertions(+), 24 deletions(-) diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 602cb49cb68..4bb1e43cc25 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -52,6 +52,8 @@ import {gfPageDirective} from './components/gf_page'; import {orgSwitcher} from './components/org_switcher'; import {profiler} from './profiler'; import {registerAngularDirectives} from './angular_wrappers'; +import {updateLegendValues} from './time_series2'; +import TimeSeries from './time_series2'; export { profiler, @@ -83,5 +85,7 @@ export { userGroupPicker, geminiScrollbar, gfPageDirective, - orgSwitcher + orgSwitcher, + TimeSeries, + updateLegendValues }; diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts index 0f3dcbc1171..bf8a38761d3 100644 --- a/public/app/core/time_series2.ts +++ b/public/app/core/time_series2.ts @@ -1,4 +1,5 @@ import kbn from 'app/core/utils/kbn'; +import {getFlotTickDecimals} from 'app/core/utils/ticks'; import _ from 'lodash'; function matchSeriesOverride(aliasOrRegex, seriesAlias) { @@ -16,6 +17,43 @@ function translateFillOption(fill) { return fill === 0 ? 0.001 : fill/10; } +/** + * Calculate decimals for legend and update values for each series. + * @param data series data + * @param panel + * @param height Graph height + */ +export function updateLegendValues(data: TimeSeries[], panel, height) { + for (let i = 0; i < data.length; i++) { + let series = data[i]; + let yaxes = panel.yaxes; + let axis = yaxes[series.yaxis - 1]; + let {tickDecimals, scaledDecimals} = getFlotTickDecimals(data, axis, height); + let formater = kbn.valueFormats[panel.yaxes[series.yaxis - 1].format]; + + // decimal override + if (_.isNumber(panel.decimals)) { + series.updateLegendValues(formater, panel.decimals, null); + } else { + // auto decimals + // legend and tooltip gets one more decimal precision + // than graph legend ticks + tickDecimals = (tickDecimals || -1) + 1; + series.updateLegendValues(formater, tickDecimals, scaledDecimals + 2); + } + } +} + +export function getDataMinMax(data: TimeSeries[]) { + const datamin = _.minBy(data, (series) => { + return series.stats.min; + }).stats.min; + const datamax = _.maxBy(data, (series: TimeSeries) => { + return series.stats.max; + }).stats.max; + return {datamin, datamax}; +} + export default class TimeSeries { datapoints: any; id: string; diff --git a/public/app/core/utils/ticks.ts b/public/app/core/utils/ticks.ts index b033e9247a1..334090c056f 100644 --- a/public/app/core/utils/ticks.ts +++ b/public/app/core/utils/ticks.ts @@ -1,3 +1,5 @@ +import {getDataMinMax} from 'app/core/time_series2'; + /** * Calculate tick step. * Implementation from d3-array (ticks.js) @@ -32,6 +34,7 @@ export function getScaledDecimals(decimals, tick_size) { /** * Calculate tick size based on min and max values, number of ticks and precision. + * Implementation from Flot. * @param min Axis minimum * @param max Axis maximum * @param noTicks Number of ticks @@ -65,3 +68,107 @@ export function getFlotTickSize(min: number, max: number, noTicks: number, tickD return size; } + +/** + * Calculate axis range (min and max). + * Implementation from Flot. + */ +export function getFlotRange(panelMin, panelMax, datamin, datamax) { + const autoscaleMargin = 0.02; + + let min = +(panelMin != null ? panelMin : datamin); + let max = +(panelMax != null ? panelMax : datamax); + let delta = max - min; + + if (delta === 0.0) { + // Grafana fix: wide Y min and max using increased wideFactor + // when all series values are the same + var wideFactor = 0.25; + var widen = Math.abs(max === 0 ? 1 : max * wideFactor); + + if (panelMin === null) { + min -= widen; + } + // always widen max if we couldn't widen min to ensure we + // don't fall into min == max which doesn't work + if (panelMax == null || panelMin != null) { + max += widen; + } + } else { + // consider autoscaling + var margin = autoscaleMargin; + if (margin != null) { + if (panelMin == null) { + min -= delta * margin; + // make sure we don't go below zero if all values + // are positive + if (min < 0 && datamin != null && datamin >= 0) { + min = 0; + } + } + if (panelMax == null) { + max += delta * margin; + if (max > 0 && datamax != null && datamax <= 0) { + max = 0; + } + } + } + } + return {min, max}; +} + +/** + * Estimate number of ticks for Y axis. + * Implementation from Flot. + */ +export function getFlotNumberOfTicks(height, ticks?) { + let noTicks; + if (typeof ticks === "number" && ticks > 0) { + noTicks = ticks; + } else { + // heuristic based on the model a*sqrt(x) fitted to + // some data points that seemed reasonable + noTicks = 0.3 * Math.sqrt(height); + } + return noTicks; +} + +/** + * Calculate tick decimals. + * Implementation from Flot. + */ +export function getFlotTickDecimals(data, axis, height) { + let {datamin, datamax} = getDataMinMax(data); + let {min, max} = getFlotRange(axis.min, axis.max, datamin, datamax); + let noTicks = getFlotNumberOfTicks(height); + let tickDecimals, maxDec; + let delta = (max - min) / noTicks; + let dec = -Math.floor(Math.log(delta) / Math.LN10); + + let magn = Math.pow(10, -dec); + // norm is between 1.0 and 10.0 + let norm = delta / magn; + let size; + + if (norm < 1.5) { + size = 1; + } else if (norm < 3) { + size = 2; + // special case for 2.5, requires an extra decimal + if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { + size = 2.5; + ++dec; + } + } else if (norm < 7.5) { + size = 5; + } else { + size = 10; + } + + size *= magn; + + tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); + // grafana addition + const scaledDecimals = tickDecimals - Math.floor(Math.log(size) / Math.LN10); + return {tickDecimals, scaledDecimals}; +} diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index d24aedc66b9..30761238d82 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -22,7 +22,7 @@ import {EventManager} from 'app/features/annotations/all'; import {convertValuesToHistogram, getSeriesValues} from './histogram'; /** @ngInject **/ -function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { +function graphDirective(timeSrv, popoverSrv, contextSrv) { return { restrict: 'A', template: '', @@ -34,7 +34,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { var data; var plot; var sortedSeries; - var rootScope = scope.$root; var panelWidth = 0; var eventManager = new EventManager(ctrl); var thresholdManager = new ThresholdManager(ctrl); @@ -143,27 +142,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { } function drawHook(plot) { - // Update legend values - var yaxis = plot.getYAxes(); - for (var i = 0; i < data.length; i++) { - var series = data[i]; - var axis = yaxis[series.yaxis - 1]; - var formater = kbn.valueFormats[panel.yaxes[series.yaxis - 1].format]; - - // decimal override - if (_.isNumber(panel.decimals)) { - series.updateLegendValues(formater, panel.decimals, null); - } else { - // auto decimals - // legend and tooltip gets one more decimal precision - // than graph legend ticks - var tickDecimals = (axis.tickDecimals || -1) + 1; - series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2); - } - - if (!rootScope.$$phase) { scope.$digest(); } - } - // add left axis labels if (panel.yaxes[0].label && panel.yaxes[0].show) { $("
    ").text(panel.yaxes[0].label).appendTo(elem); diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 1da5aa17f2b..ffb3e390201 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -2,6 +2,7 @@ import angular from 'angular'; import _ from 'lodash'; import $ from 'jquery'; import PerfectScrollbar from 'perfect-scrollbar'; +import {updateLegendValues} from 'app/core/core'; var module = angular.module('grafana.directives'); @@ -26,6 +27,11 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { ctrl.events.emit('legend-rendering-complete'); }); + function updateLegendDecimals() { + let graphHeight = ctrl.height - $container.height(); + updateLegendValues(data, panel, graphHeight); + } + function getSeriesIndexForElement(el) { return el.parents('[data-series-index]').data('series-index'); } @@ -170,6 +176,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { html += '    ' + series.aliasEscaped + ''; if (panel.legend.values) { + updateLegendDecimals(); var avg = series.formatValue(series.stats.avg); var current = series.formatValue(series.stats.current); var min = series.formatValue(series.stats.min); From 58d40eb6a0734233e745339dc98981d1267aa803 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 7 Dec 2017 12:03:39 +0300 Subject: [PATCH 389/584] graph: fix legend height calculation --- public/app/plugins/panel/graph/legend.ts | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index ffb3e390201..7983910ffb3 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -27,8 +27,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { ctrl.events.emit('legend-rendering-complete'); }); - function updateLegendDecimals() { - let graphHeight = ctrl.height - $container.height(); + function updateLegendDecimals(graphHeight) { updateLegendValues(data, panel, graphHeight); } @@ -155,8 +154,21 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } } - var seriesElements = []; + // render first time for getting proper legend height + if (!panel.legend.rightSide) { + renderLegendElement(tableHeaderElem); + let graphHeight = ctrl.height - $container.height() - 23; + updateLegendDecimals(graphHeight); + $container.empty(); + } else { + updateLegendDecimals(ctrl.height); + } + renderLegendElement(tableHeaderElem); + } + + function renderSeriesLegendElements() { + let seriesElements = []; for (i = 0; i < seriesList.length; i++) { var series = seriesList[i]; @@ -176,7 +188,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { html += '' + series.aliasEscaped + ''; if (panel.legend.values) { - updateLegendDecimals(); var avg = series.formatValue(series.stats.avg); var current = series.formatValue(series.stats.current); var min = series.formatValue(series.stats.min); @@ -193,6 +204,11 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { html += '
    '; seriesElements.push($(html)); } + return seriesElements; + } + + function renderLegendElement(tableHeaderElem) { + var seriesElements = renderSeriesLegendElements(); if (panel.legend.alignAsTable) { var maxHeight = ctrl.height; From d0a9770b8bf58f1688814a1d10d19a3d799e2f00 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 7 Dec 2017 11:14:43 +0100 Subject: [PATCH 390/584] dashboard: fix edge case with keyboard nav in dashboard search. #10100 If expanding a folder using mouse, unselect current keyboard selection --- public/app/core/components/search/search.html | 4 +- public/app/core/components/search/search.ts | 9 +++++ .../components/search/search_results.jest.ts | 40 ++++++++++++++----- .../core/components/search/search_results.ts | 8 +++- public/app/core/services/search_srv.ts | 5 ++- 5 files changed, 53 insertions(+), 13 deletions(-) diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 3b0d9c003dd..c458aa51906 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -24,7 +24,9 @@
    No dashboards matching your query were found.
    + on-tag-selected="ctrl.filterByTag($tag)" + on-folder-expanding="ctrl.folderExpanding()" + on-folder-expanded="ctrl.folderExpanded($folder)" />
    diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index 08d050c81bf..ffbec30cc0a 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -102,6 +102,11 @@ export class SearchCtrl { } } + if (direction === 0) { + this.selectedIndex = -1; + return; + } + const max = flattenedResult.length; let newIndex = this.selectedIndex + direction; this.selectedIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex; @@ -182,6 +187,10 @@ export class SearchCtrl { this.searchDashboards(); } + folderExpanding() { + this.moveSelection(0); + } + private getFlattenedResultForNavigation() { let folderIndex = 0; diff --git a/public/app/core/components/search/search_results.jest.ts b/public/app/core/components/search/search_results.jest.ts index fc661dc8472..514eff21dab 100644 --- a/public/app/core/components/search/search_results.jest.ts +++ b/public/app/core/components/search/search_results.jest.ts @@ -55,21 +55,43 @@ describe('SearchResultsCtrl', () => { }); }); - describe('when toggle a folder', () => { - let folderToggled = false; - let folder = { - toggle: () => { - folderToggled = true; - } - }; + describe('when toggle a collapsed folder', () => { + let folderExpanded = false; beforeEach(() => { ctrl = new SearchResultsCtrl({}); + ctrl.onFolderExpanding = () => { folderExpanded = true; }; + + let folder = { + expanded: false, + toggle: () => {} + }; + ctrl.toggleFolderExpand(folder); }); - it('should trigger folder toggle callback', () => { - expect(folderToggled).toBeTruthy(); + it('should trigger folder expanding callback', () => { + expect(folderExpanded).toBeTruthy(); + }); + }); + + describe('when toggle an expanded folder', () => { + let folderExpanded = false; + + beforeEach(() => { + ctrl = new SearchResultsCtrl({}); + ctrl.onFolderExpanding = () => { folderExpanded = true; }; + + let folder = { + expanded: true, + toggle: () => {} + }; + + ctrl.toggleFolderExpand(folder); + }); + + it('should not trigger folder expanding callback', () => { + expect(folderExpanded).toBeFalsy(); }); }); }); diff --git a/public/app/core/components/search/search_results.ts b/public/app/core/components/search/search_results.ts index 0757a53a517..02b6c9f355b 100644 --- a/public/app/core/components/search/search_results.ts +++ b/public/app/core/components/search/search_results.ts @@ -5,6 +5,7 @@ export class SearchResultsCtrl { results: any; onSelectionChanged: any; onTagSelected: any; + onFolderExpanding: any; /** @ngInject */ constructor(private $location) { @@ -13,6 +14,10 @@ export class SearchResultsCtrl { toggleFolderExpand(section) { if (section.toggle) { + if (!section.expanded && this.onFolderExpanding) { + this.onFolderExpanding(); + } + section.toggle(section); } } @@ -62,7 +67,8 @@ export function searchResultsDirective() { editable: '@', results: '=', onSelectionChanged: '&', - onTagSelected: '&' + onTagSelected: '&', + onFolderExpanding: '&' }, }; } diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index 38aeea47b79..52f008e1812 100644 --- a/public/app/core/services/search_srv.ts +++ b/public/app/core/services/search_srv.ts @@ -51,7 +51,7 @@ export class SearchSrv { store.set('search.sections.recent', this.recentIsOpen); if (!section.expanded || section.items.length) { - return; + return Promise.resolve(); } return this.queryForRecentDashboards().then(result => { @@ -62,6 +62,7 @@ export class SearchSrv { private toggleStarred(section) { this.starredIsOpen = section.expanded = !section.expanded; store.set('search.sections.starred', this.starredIsOpen); + return Promise.resolve(); } private getStarred(sections) { @@ -189,7 +190,7 @@ export class SearchSrv { section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder'; if (section.items.length) { - return; + return Promise.resolve(); } let query = { From 548652aab1df7f7c92d15df2a01ab16c12d8b02a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Dec 2017 13:33:46 +0100 Subject: [PATCH 391/584] ux: minor cleanup --- public/app/features/org/partials/profile.html | 5 ----- public/app/features/org/partials/select_org.html | 9 --------- 2 files changed, 14 deletions(-) diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 02b0d27b84f..66e41fbb4b4 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -26,11 +26,6 @@ -

    Password

    -
    - Change Password -
    -

    Organizations

    ' + statName; - - if (panel.legend.sort === statName) { - var cssClass = panel.legend.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up' ; - html += ' '; - } - - return html + '
    ' + statName; + + if (panel.legend.sort === statName) { + var cssClass = panel.legend.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up' ; + html += ' '; + } + + return html + '
    diff --git a/public/app/features/org/partials/select_org.html b/public/app/features/org/partials/select_org.html index 2e7a992b4fa..116bca66286 100644 --- a/public/app/features/org/partials/select_org.html +++ b/public/app/features/org/partials/select_org.html @@ -35,15 +35,6 @@
    - -
    - - -
    -
    - Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}}, - build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }} -
    From 1542e8c1b26d8be430d12d78918e42a167986419 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 7 Dec 2017 14:07:16 +0100 Subject: [PATCH 392/584] removed row to center footer (#10115) * removed row to center footer * code formatting fix --- public/views/index.template.html | 183 ++++++++++++++++--------------- 1 file changed, 94 insertions(+), 89 deletions(-) diff --git a/public/views/index.template.html b/public/views/index.template.html index e022cc4873b..461bc0aa804 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -1,109 +1,114 @@ - - - - - - Grafana + + + + + - + Grafana - + - - + - + + - - + - + + -
    -
    -
    -
    -
    {{alert.title}}
    -
    -
    - -
    -
    + -
    -
    -
    - - -
    +
    +
    +
    + +
    +
    +
    {{alert.title}}
    +
    +
    +
    - +
    - + [[if .GoogleTagManagerId]] + + + + + + [[end]] - [[if .GoogleTagManagerId]] - - - - - - [[end]] + - From 68dab71275cd611e4e584d7369a7ff03c7e9bfee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Dec 2017 16:25:21 +0100 Subject: [PATCH 393/584] refactor: sidemenu toggle & hiding logic --- public/app/core/components/grafana_app.ts | 22 ++--- .../core/components/sidemenu/sidemenu.html | 5 +- .../app/core/components/sidemenu/sidemenu.ts | 18 +--- public/app/core/controllers/error_ctrl.ts | 12 ++- public/app/core/nav_model_srv.ts | 6 +- public/app/core/routes/routes.ts | 6 +- public/app/core/services/context_srv.ts | 4 - .../app/features/dashboard/dashnav/dashnav.ts | 7 -- public/app/partials/error.html | 97 ++++++++----------- public/app/partials/reset_password.html | 15 +-- public/sass/components/_sidemenu.scss | 18 +++- public/sass/pages/_login.scss | 6 -- 12 files changed, 99 insertions(+), 117 deletions(-) diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 77089b14ddc..39601f903ec 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -79,21 +79,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop sidemenuOpen = scope.contextSrv.sidemenu; body.toggleClass('sidemenu-open', sidemenuOpen); - scope.$watch('contextSrv.sidemenu', newVal => { - if (sidemenuOpen !== scope.contextSrv.sidemenu) { - sidemenuOpen = scope.contextSrv.sidemenu; - body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu); - } + appEvents.on('toggle-sidemenu', () => { + body.toggleClass('sidemenu-open'); }); - let sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint; - body.toggleClass('sidemenu-open--xs', sidemenuOpenSmallBreakpoint); + appEvents.on('toggle-sidemenu-mobile', () => { + body.toggleClass('sidemenu-open--xs'); + }); - scope.$watch('contextSrv.sidemenuSmallBreakpoint', newVal => { - if (sidemenuOpenSmallBreakpoint !== scope.contextSrv.sidemenuSmallBreakpoint) { - sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint; - body.toggleClass('sidemenu-open--xs', scope.contextSrv.sidemenuSmallBreakpoint); - } + appEvents.on('toggle-sidemenu-hidden', () => { + body.toggleClass('sidemenu-hidden'); }); // tooltip removal fix @@ -111,6 +106,9 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop } } + // clear body class sidemenu states + body.removeClass('sidemenu-open--xs'); + $("#tooltip, .tooltip").remove(); // check for kiosk url param diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index b47b7fc8265..7ed2ab1f2c7 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -3,11 +3,10 @@ - -

     Close

    + +  Close     -
    diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index cae0b338ce9..489cad72957 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -1,9 +1,8 @@ -/// - import _ from 'lodash'; import config from 'app/core/config'; import $ from 'jquery'; import coreModule from '../../core_module'; +import appEvents from 'app/core/app_events'; export class SideMenuCtrl { user: any; @@ -11,7 +10,7 @@ export class SideMenuCtrl { bottomNav: any; loginUrl: string; isSignedIn: boolean; - smallBPSideMenuOpen = false; + isOpenMobile: boolean; /** @ngInject */ constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) { @@ -29,24 +28,21 @@ export class SideMenuCtrl { } this.$scope.$on('$routeChangeSuccess', () => { - if (this.smallBPSideMenuOpen) { - this.contextSrv.setSideMenuForSmallBreakpoint(false, true); - this.smallBPSideMenuOpen = false; - } this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); }); } toggleSideMenu() { this.contextSrv.toggleSideMenu(); + appEvents.emit('toggle-sidemenu'); + this.$timeout(() => { this.$rootScope.$broadcast('render'); }); } toggleSideMenuSmallBreakpoint() { - this.smallBPSideMenuOpen = !this.smallBPSideMenuOpen; - this.contextSrv.setSideMenuForSmallBreakpoint(this.smallBPSideMenuOpen, false); + appEvents.emit('toggle-sidemenu-mobile'); } switchOrg() { @@ -75,10 +71,6 @@ export function sideMenuDirective() { parent.append(menu); }, 100); }); - - scope.$on("$destory", function() { - elem.off('click.dropdown'); - }); } }; } diff --git a/public/app/core/controllers/error_ctrl.ts b/public/app/core/controllers/error_ctrl.ts index fe894a69806..15cd4281a64 100644 --- a/public/app/core/controllers/error_ctrl.ts +++ b/public/app/core/controllers/error_ctrl.ts @@ -1,5 +1,6 @@ import config from 'app/core/config'; import coreModule from '../core_module'; +import appEvents from 'app/core/app_events'; export class ErrorCtrl { @@ -8,11 +9,14 @@ export class ErrorCtrl { $scope.navModel = navModelSrv.getNotFoundNav(); $scope.appSubUrl = config.appSubUrl; - var showSideMenu = contextSrv.sidemenu; - contextSrv.sidemenu = false; + if (!contextSrv.isSignedIn) { + appEvents.emit('toggle-sidemenu-hidden'); + } - $scope.$on('$destroy', function() { - contextSrv.sidemenu = showSideMenu; + $scope.$on("destroy", () => { + if (!contextSrv.isSignedIn) { + appEvents.emit('toggle-sidemenu-hidden'); + } }); } } diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 2be95aca0da..e77cfb8f09f 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -70,13 +70,15 @@ export class NavModelSrv { getNotFoundNav() { var node = { - text: "Page not found ", + text: "Page not found", icon: "fa fa-fw fa-warning", + subTitle: "404 Error" }; return { breadcrumbs: [node], - node: node + node: node, + main: node }; } diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index f4132400c7d..87437770e0e 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -178,23 +178,27 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/login', { templateUrl: 'public/app/partials/login.html', controller : 'LoginCtrl', - pageClass: 'page-login', + pageClass: 'sidemenu-hidden', }) .when('/invite/:code', { templateUrl: 'public/app/partials/signup_invited.html', controller : 'InvitedCtrl', + pageClass: 'sidemenu-hidden', }) .when('/signup', { templateUrl: 'public/app/partials/signup_step2.html', controller : 'SignUpCtrl', + pageClass: 'sidemenu-hidden', }) .when('/user/password/send-reset-email', { templateUrl: 'public/app/partials/reset_password.html', controller : 'ResetPasswordCtrl', + pageClass: 'sidemenu-hidden', }) .when('/user/password/reset', { templateUrl: 'public/app/partials/reset_password.html', controller : 'ResetPasswordCtrl', + pageClass: 'sidemenu-hidden', }) .when('/dashboard/snapshots', { templateUrl: 'public/app/features/snapshot/partials/snapshots.html', diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index a904acae471..d707afc283d 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -58,10 +58,6 @@ export class ContextSrv { this.sidemenu = !this.sidemenu; store.set('grafana.sidemenu', this.sidemenu); } - - setSideMenuForSmallBreakpoint(show: boolean, persistToggle: boolean) { - this.sidemenuSmallBreakpoint = show; - } } var contextSrv = new ContextSrv(); diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 6985d27be5f..2b174e2c301 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import moment from 'moment'; import angular from 'angular'; @@ -18,7 +16,6 @@ export class DashNavCtrl { private dashboardSrv, private $location, private backendSrv, - private contextSrv, public playlistSrv, navModelSrv) { this.navModel = navModelSrv.getDashboardNav(this.dashboard, this); @@ -35,10 +32,6 @@ export class DashNavCtrl { } } - toggleSideMenu() { - this.contextSrv.toggleSideMenu(); - } - openEditView(editview) { var search = _.extend(this.$location.search(), {editview: editview}); this.$location.search(search); diff --git a/public/app/partials/error.html b/public/app/partials/error.html index a7c074fea94..f489251d040 100644 --- a/public/app/partials/error.html +++ b/public/app/partials/error.html @@ -1,60 +1,47 @@ -
    -
    -
    - -
    -

    - Page not found -

    -
    - 404 Error + + +
    +
    +
    +
    +
    +

    100%

    +

    80%

    +

    60%

    +

    40%

    +

    20%

    +

    0%

    +
    +
    + +
    +

    Then

    +

    Now

    +
    +
    +
    +

    current

    +
    +
    + +
    +
    +

    Chances you are on the page you are looking for.

    +

    0%

    +
    +     +
    +
    +
    +
    -
    -
    -
    -
    -

    100%

    -

    80%

    -

    60%

    -

    40%

    -

    20%

    -

    0%

    -
    -
    - -
    -

    Then

    -

    Now

    -
    -
    -
    -
    -
    -
    -

    current

    -
    -
    - -
    -
    -

    Chances you are on the page you are looking for.

    -

    0%

    -
    -
    -

    Sorry for the inconvenience

    -

    Please go back to your - home dashboard and try again.

    -

    If the error persists, seek help on the - community site.

    -
    -
    -
    -
    - -
    diff --git a/public/app/partials/reset_password.html b/public/app/partials/reset_password.html index 82024932a16..f6caeef2a66 100644 --- a/public/app/partials/reset_password.html +++ b/public/app/partials/reset_password.html @@ -58,13 +58,14 @@
    -
    -
    -
    - Back to login -
    -
    -
    +
    +
    + Back to login +
    +
    +
    + +
    diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 605b15dd5bc..05882d75fc9 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -16,6 +16,14 @@ .sidemenu__close { display: none; } + +} + +// body class that hides sidemenu +.sidemenu-hidden { + .sidemenu { + display: none; + } } @include media-breakpoint-up(sm) { @@ -164,7 +172,7 @@ li.sidemenu-org-switcher { } } -.sidemenu__logo, .sidemenu__logo_small_breakpoint { +.sidemenu__logo { display: block; padding: 0.4rem 1.0rem 0.4rem 0.65rem; min-height: $navbarHeight; @@ -203,6 +211,8 @@ li.sidemenu-org-switcher { .sidemenu__close { display: block; font-size: $font-size-md; + position: relative; + top: -3px; } .sidemenu__top, @@ -215,14 +225,16 @@ li.sidemenu-org-switcher { .sidemenu__logo { display: none; } + .sidemenu__logo_small_breakpoint { + padding: 12px 10px 26px; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; - &:hover { - background: transparent; + .fa-bars { + font-size: 25px; } } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 3c54224c4cc..2b3426b45b5 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -8,12 +8,6 @@ padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */ } -.page-login { - .sidemenu { - display: none; - } -} - .login-form { display: inline-block; max-width: 24rem; From 87ceeb08988bdaa46e7fe57d0188ffa5b437017b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Dec 2017 16:58:57 +0100 Subject: [PATCH 394/584] fix: v5 sidemenu & link to shortcuts now works, fixes #10087 --- public/app/core/components/sidemenu/sidemenu.html | 2 +- public/app/core/components/sidemenu/sidemenu.ts | 7 +++++++ public/app/core/services/keybindingSrv.ts | 2 -- public/sass/components/_shortcuts.scss | 1 - 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 7ed2ab1f2c7..e97d34739ba 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -59,7 +59,7 @@
  • - + {{::child.text}} diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 489cad72957..79d1a0d7e99 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -50,6 +50,13 @@ export class SideMenuCtrl { templateHtml: '', }); } + + itemClicked(item, evt) { + if (item.url === '/shortcuts') { + appEvents.emit('show-modal', {templateHtml: ''}); + evt.preventDefault(); + } + } } export function sideMenuDirective() { diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index a8f36afc468..062eea3506a 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -1,5 +1,3 @@ -/// - import $ from 'jquery'; import _ from 'lodash'; diff --git a/public/sass/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss index 1dedb062183..bfcfbf900fe 100644 --- a/public/sass/components/_shortcuts.scss +++ b/public/sass/components/_shortcuts.scss @@ -11,7 +11,6 @@ .shortcut-table-category-header { font-weight: normal; font-size: $font-size-h6; - font-style: italic; text-align: left; } From 51854ff4fadaa587747c24669ca630038c00b579 Mon Sep 17 00:00:00 2001 From: Ben Whaley Date: Thu, 7 Dec 2017 16:10:13 +0000 Subject: [PATCH 395/584] Fix go fmt --- pkg/tsdb/cloudwatch/credentials.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/tsdb/cloudwatch/credentials.go b/pkg/tsdb/cloudwatch/credentials.go index 9acdf87f5db..41ceaa6676d 100644 --- a/pkg/tsdb/cloudwatch/credentials.go +++ b/pkg/tsdb/cloudwatch/credentials.go @@ -11,8 +11,8 @@ import ( "github.com/aws/aws-sdk-go/aws/credentials" "github.com/aws/aws-sdk-go/aws/credentials/ec2rolecreds" "github.com/aws/aws-sdk-go/aws/credentials/endpointcreds" - "github.com/aws/aws-sdk-go/aws/ec2metadata" "github.com/aws/aws-sdk-go/aws/defaults" + "github.com/aws/aws-sdk-go/aws/ec2metadata" "github.com/aws/aws-sdk-go/aws/session" "github.com/aws/aws-sdk-go/service/cloudwatch" "github.com/aws/aws-sdk-go/service/sts" From 10b0fc79f313b44009e0812ab4889f8f08489ddc Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 7 Dec 2017 13:16:35 +0100 Subject: [PATCH 396/584] fix: move components tests to specs folder --- public/app/core/{components/search => specs}/search.jest.ts | 4 ++-- .../core/{components/search => specs}/search_results.jest.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename public/app/core/{components/search => specs}/search.jest.ts (98%) rename public/app/core/{components/search => specs}/search_results.jest.ts (97%) diff --git a/public/app/core/components/search/search.jest.ts b/public/app/core/specs/search.jest.ts similarity index 98% rename from public/app/core/components/search/search.jest.ts rename to public/app/core/specs/search.jest.ts index 68b1292f9d4..d3058e7550e 100644 --- a/public/app/core/components/search/search.jest.ts +++ b/public/app/core/specs/search.jest.ts @@ -1,5 +1,5 @@ -import { SearchCtrl } from './search'; -import { SearchSrv } from 'app/core/services/search_srv'; +import { SearchCtrl } from '../components/search/search'; +import { SearchSrv } from '../services/search_srv'; describe('SearchCtrl', () => { const searchSrvStub = { diff --git a/public/app/core/components/search/search_results.jest.ts b/public/app/core/specs/search_results.jest.ts similarity index 97% rename from public/app/core/components/search/search_results.jest.ts rename to public/app/core/specs/search_results.jest.ts index 514eff21dab..b8eed3cef9b 100644 --- a/public/app/core/components/search/search_results.jest.ts +++ b/public/app/core/specs/search_results.jest.ts @@ -1,4 +1,4 @@ -import { SearchResultsCtrl } from './search_results'; +import { SearchResultsCtrl } from '../components/search/search_results'; describe('SearchResultsCtrl', () => { let ctrl; From 2ea663df7887ff56f5f4bdc49fc7830eac36ffd7 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 7 Dec 2017 17:29:13 +0100 Subject: [PATCH 397/584] dashfolders: New Dashboard Folder page Fixes #10083. Permissions page is just a placeholder for now. --- pkg/api/index.go | 15 ++ .../core/components/PageHeader/PageHeader.tsx | 20 +- .../manage_dashboards/manage_dashboards.html | 98 ++++++++ .../manage_dashboards/manage_dashboards.ts | 221 ++++++++++++++++++ public/app/core/components/search/search.html | 12 +- .../components/search/search_results.html | 2 +- public/app/core/core.ts | 4 +- public/app/core/routes/routes.ts | 11 +- .../specs/manage_dashboards.jest.ts} | 6 +- public/app/features/dashboard/all.ts | 4 + .../features/dashboard/dashboard_list_ctrl.ts | 207 +--------------- .../dashboard/folder_dashboards_ctrl.ts | 16 ++ .../features/dashboard/folder_page_loader.ts | 21 ++ .../dashboard/folder_permissions_ctrl.ts | 16 ++ .../dashboard/partials/dashboardList.html | 121 ---------- .../dashboard/partials/dashboard_list.html | 5 + .../dashboard/partials/folder_dashboards.html | 5 + .../partials/folder_permissions.html | 5 + 18 files changed, 447 insertions(+), 342 deletions(-) create mode 100644 public/app/core/components/manage_dashboards/manage_dashboards.html create mode 100644 public/app/core/components/manage_dashboards/manage_dashboards.ts rename public/app/{features/dashboard/specs/dashboard_list_ctrl.jest.ts => core/specs/manage_dashboards.jest.ts} (98%) create mode 100644 public/app/features/dashboard/folder_dashboards_ctrl.ts create mode 100644 public/app/features/dashboard/folder_page_loader.ts create mode 100644 public/app/features/dashboard/folder_permissions_ctrl.ts delete mode 100644 public/app/features/dashboard/partials/dashboardList.html create mode 100644 public/app/features/dashboard/partials/dashboard_list.html create mode 100644 public/app/features/dashboard/partials/folder_dashboards.html create mode 100644 public/app/features/dashboard/partials/folder_permissions.html diff --git a/pkg/api/index.go b/pkg/api/index.go index f3e7af0e4b9..1e44ef33050 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -118,6 +118,21 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Children: dashboardChildNavs, }) + dashboardFolderChildNavs := []*dtos.NavLink{ + {Text: "Dashboards", Id: "manage-folder-dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-th-large"}, + {Text: "Permissions", Id: "manage-folder-permissions", Url: setting.AppSubUrl + "/dashboards?1", Icon: "fa fa-fw fa-lock"}, + } + + data.NavTree = append(data.NavTree, &dtos.NavLink{ + Text: "Dashboards", + Id: "manage-folder", + SubTitle: "Manage folder dashboards & permissions", + Icon: "fa fa-folder-open", + Url: setting.AppSubUrl + "/", + HideFromMenu: true, + Children: dashboardFolderChildNavs, + }) + if c.IsSignedIn { profileNode := &dtos.NavLink{ Text: c.SignedInUser.Name, diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 5371b464ec3..3ab6cac8143 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -72,6 +72,19 @@ export default class PageHeader extends React.Component { super(props); } + renderBreadcrumb(breadcrumbs) { + const breadcrumbsResult = []; + for (let i = 0; i < breadcrumbs.length; i++) { + const bc = breadcrumbs[i]; + if (bc.uri) { + breadcrumbsResult.push({bc.title}); + } else { + breadcrumbsResult.push( / {bc.title}); + } + } + return breadcrumbsResult; + } + renderHeaderTitle(main) { return (
    @@ -81,7 +94,12 @@ export default class PageHeader extends React.Component {
    -

    {main.text}

    + {main.text &&

    {main.text}

    } + {main.breadcrumbs && main.breadcrumbs.length > 0 && ( +

    + {this.renderBreadcrumb(main.breadcrumbs)} +

    ) + } {main.subTitle &&
    {main.subTitle}
    } {main.subType && (
    diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html new file mode 100644 index 00000000000..8c5aeb0facd --- /dev/null +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -0,0 +1,98 @@ +
    +
    + + +
    +
    + + + Dashboard + + + + Folder + +
    + +
    + Filters: + + + + {{tagName}} + + +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +
    + + +
    +
    +
    +
    + +
    +
    + +
    + +
    \ No newline at end of file diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts new file mode 100644 index 00000000000..5b74a0e50fc --- /dev/null +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -0,0 +1,221 @@ +import _ from 'lodash'; +import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; +import { SearchSrv } from 'app/core/services/search_srv'; + +export class ManageDashboardsCtrl { + public sections: any[]; + tagFilterOptions: any[]; + selectedTagFilter: any; + query: any; + navModel: any; + canDelete = false; + canMove = false; + hasFilters = false; + selectAllChecked = false; + starredFilterOptions = [{ text: 'Filter by Starred', disabled: true }, { text: 'Yes' }, { text: 'No' }]; + selectedStarredFilter: any; + folderId?: number; + + /** @ngInject */ + constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { + this.query = { query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true }; + + if (this.folderId) { + this.query.folderIds = [this.folderId]; + } + + this.selectedStarredFilter = this.starredFilterOptions[0]; + + this.getDashboards().then(() => { + this.getTags(); + }); + } + + getDashboards() { + return this.searchSrv.search(this.query).then((result) => { + return this.initDashboardList(result); + }); + } + + initDashboardList(result: any) { + this.canMove = false; + this.canDelete = false; + this.selectAllChecked = false; + this.hasFilters = this.query.query.length > 0 || this.query.tag.length > 0 || this.query.starred; + + if (!result) { + this.sections = []; + return; + } + + this.sections = result; + + for (let section of this.sections) { + section.checked = false; + + for (let dashboard of section.items) { + dashboard.checked = false; + } + } + } + + selectionChanged() { + + let selectedDashboards = 0; + + for (let section of this.sections) { + selectedDashboards += _.filter(section.items, { checked: true }).length; + } + + const selectedFolders = _.filter(this.sections, { checked: true }).length; + this.canMove = selectedDashboards > 0 && selectedFolders === 0; + this.canDelete = selectedDashboards > 0 || selectedFolders > 0; + } + + getDashboardsToDelete() { + let selectedDashboards = []; + + for (const section of this.sections) { + if (section.checked) { + selectedDashboards.push(section.uri); + } else { + const selected = _.filter(section.items, { checked: true }); + selectedDashboards.push(..._.map(selected, 'uri')); + } + } + + return selectedDashboards; + } + + getFolderIds(sections) { + const ids = []; + for (let s of sections) { + if (s.checked) { + ids.push(s.id); + } + } + return ids; + } + + delete() { + const selectedDashboards = this.getDashboardsToDelete(); + + appEvents.emit('confirm-modal', { + title: 'Delete', + text: `Do you want to delete the ${selectedDashboards.length} selected dashboards?`, + icon: 'fa-trash', + yesText: 'Delete', + onConfirm: () => { + const promises = []; + for (let dash of selectedDashboards) { + promises.push(this.backendSrv.delete(`/api/dashboards/${dash}`)); + } + + this.$q.all(promises).then(() => { + this.getDashboards(); + }); + } + }); + } + + getDashboardsToMove() { + let selectedDashboards = []; + + for (const section of this.sections) { + const selected = _.filter(section.items, { checked: true }); + selectedDashboards.push(..._.map(selected, 'uri')); + } + + return selectedDashboards; + } + + moveTo() { + const selectedDashboards = this.getDashboardsToMove(); + + const template = '' + + '`'; + appEvents.emit('show-modal', { + templateHtml: template, + modalClass: 'modal--narrow', + model: { dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this) } + }); + } + + getTags() { + return this.searchSrv.getDashboardTags().then((results) => { + this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results); + this.selectedTagFilter = this.tagFilterOptions[0]; + }); + } + + filterByTag(tag) { + if (_.indexOf(this.query.tag, tag) === -1) { + this.query.tag.push(tag); + } + + return this.getDashboards(); + } + + onQueryChange() { + return this.getDashboards(); + } + + onTagFilterChange() { + var res = this.filterByTag(this.selectedTagFilter.term); + this.selectedTagFilter = this.tagFilterOptions[0]; + return res; + } + + removeTag(tag, evt) { + this.query.tag = _.without(this.query.tag, tag); + this.getDashboards(); + if (evt) { + evt.stopPropagation(); + evt.preventDefault(); + } + } + + onStarredFilterChange() { + this.query.starred = this.selectedStarredFilter.text === 'Yes'; + return this.getDashboards(); + } + + onSelectAllChanged() { + for (let section of this.sections) { + if (!section.hideHeader) { + section.checked = this.selectAllChecked; + } + + section.items = _.map(section.items, (item) => { + item.checked = this.selectAllChecked; + return item; + }); + } + + this.selectionChanged(); + } + + clearFilters() { + this.query.query = ''; + this.query.tag = []; + this.query.starred = false; + this.getDashboards(); + } +} + +export function manageDashboardsDirective() { + return { + restrict: 'E', + templateUrl: 'public/app/core/components/manage_dashboards/manage_dashboards.html', + controller: ManageDashboardsCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + folderId: '=' + } + }; +} + +coreModule.directive('manageDashboards', manageDashboardsDirective); diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index c458aa51906..f9b953efcee 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -21,12 +21,12 @@
    -
    No dashboards matching your query were found.
    - +
    No dashboards matching your query were found.
    +
    diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 2008910f53a..ad0aa3e6b71 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -10,7 +10,7 @@
    {{::section.title}} -
    +
     
    diff --git a/public/app/core/core.ts b/public/app/core/core.ts index a1a93c3cdcc..b32651f418a 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -53,6 +53,7 @@ import {orgSwitcher} from './components/org_switcher'; import {profiler} from './profiler'; import {registerAngularDirectives} from './angular_wrappers'; import {searchResultsDirective} from './components/search/search_results'; +import {manageDashboardsDirective} from './components/manage_dashboards/manage_dashboards'; export { profiler, @@ -85,5 +86,6 @@ export { geminiScrollbar, gfPageDirective, orgSwitcher, - searchResultsDirective + searchResultsDirective, + manageDashboardsDirective }; diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 87437770e0e..8b42545d334 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -69,13 +69,18 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controllerAs: 'ctrl', }) .when('/dashboards', { - templateUrl: 'public/app/features/dashboard/partials/dashboardList.html', + templateUrl: 'public/app/features/dashboard/partials/dashboard_list.html', controller : 'DashboardListCtrl', controllerAs: 'ctrl', }) + .when('/dashboards/folder/:folderId/:type/:slug/permissions', { + templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html', + controller : 'FolderPermissionsCtrl', + controllerAs: 'ctrl', + }) .when('/dashboards/folder/:folderId/:type/:slug', { - templateUrl: 'public/app/features/dashboard/partials/dashboardList.html', - controller : 'DashboardListCtrl', + templateUrl: 'public/app/features/dashboard/partials/folder_dashboards.html', + controller : 'FolderDashboardsCtrl', controllerAs: 'ctrl', }) .when('/org', { diff --git a/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts b/public/app/core/specs/manage_dashboards.jest.ts similarity index 98% rename from public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts rename to public/app/core/specs/manage_dashboards.jest.ts index 1c13d138b6d..770679f09bf 100644 --- a/public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts +++ b/public/app/core/specs/manage_dashboards.jest.ts @@ -1,8 +1,8 @@ -import { DashboardListCtrl } from '../dashboard_list_ctrl'; +import { ManageDashboardsCtrl } from 'app/core/components/manage_dashboards/manage_dashboards'; import { SearchSrv } from 'app/core/services/search_srv'; import q from 'q'; -describe('DashboardListCtrl', () => { +describe('ManageDashboards', () => { let ctrl; describe('when browsing dashboards', () => { @@ -542,5 +542,5 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) { } }; - return new DashboardListCtrl({}, { getNav: () => { } }, q, searchSrvStub, {}); + return new ManageDashboardsCtrl({}, { getNav: () => { } }, q, searchSrvStub); } diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index f2f2087a24e..a18af82215d 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -29,7 +29,11 @@ import './move_to_folder_modal/move_to_folder'; import coreModule from 'app/core/core_module'; import {DashboardListCtrl} from './dashboard_list_ctrl'; +import {FolderDashboardsCtrl} from './folder_dashboards_ctrl'; +import {FolderPermissionsCtrl} from './folder_permissions_ctrl'; import {DashboardImportCtrl} from './dashboard_import_ctrl'; coreModule.controller('DashboardListCtrl', DashboardListCtrl); +coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl); +coreModule.controller('FolderPermissionsCtrl', FolderPermissionsCtrl); coreModule.controller('DashboardImportCtrl', DashboardImportCtrl); diff --git a/public/app/features/dashboard/dashboard_list_ctrl.ts b/public/app/features/dashboard/dashboard_list_ctrl.ts index e2b3ee3227d..b5f5cb8e0dc 100644 --- a/public/app/features/dashboard/dashboard_list_ctrl.ts +++ b/public/app/features/dashboard/dashboard_list_ctrl.ts @@ -1,213 +1,8 @@ -import _ from 'lodash'; -import appEvents from 'app/core/app_events'; -import { SearchSrv } from 'app/core/services/search_srv'; - export class DashboardListCtrl { - public sections: any []; - tagFilterOptions: any []; - selectedTagFilter: any; - query: any; navModel: any; - canDelete = false; - canMove = false; - hasFilters = false; - selectAllChecked = false; - starredFilterOptions = [{text: 'Filter by Starred', disabled: true}, {text: 'Yes'}, {text: 'No'}]; - selectedStarredFilter: any; - folderTitle = null; /** @ngInject */ - constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv, private $routeParams) { + constructor(navModelSrv) { this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0); - this.query = {query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true}; - - this.selectedStarredFilter = this.starredFilterOptions[0]; - - if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { - backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { - this.folderTitle = result.dashboard.title; - this.query.folderIds = [result.dashboard.id]; - - this.getDashboards().then(() => { - this.getTags(); - }); - }); - } else { - this.getDashboards().then(() => { - this.getTags(); - }); - } - } - - getDashboards() { - return this.searchSrv.search(this.query).then((result) => { - return this.initDashboardList(result); - }); - } - - initDashboardList(result: any) { - this.canMove = false; - this.canDelete = false; - this.selectAllChecked = false; - this.hasFilters = this.query.query.length > 0 || this.query.tag.length > 0 || this.query.starred; - - if (!result) { - this.sections = []; - return; - } - - this.sections = result; - - for (let section of this.sections) { - section.checked = false; - - for (let dashboard of section.items) { - dashboard.checked = false; - } - } - } - - selectionChanged() { - - let selectedDashboards = 0; - - for (let section of this.sections) { - selectedDashboards += _.filter(section.items, {checked: true}).length; - } - - const selectedFolders = _.filter(this.sections, {checked: true}).length; - this.canMove = selectedDashboards > 0 && selectedFolders === 0; - this.canDelete = selectedDashboards > 0 || selectedFolders > 0; - } - - getDashboardsToDelete() { - let selectedDashboards = []; - - for (const section of this.sections) { - if (section.checked) { - selectedDashboards.push(section.uri); - } else { - const selected = _.filter(section.items, {checked: true}); - selectedDashboards.push(... _.map(selected, 'uri')); - } - } - - return selectedDashboards; - } - - getFolderIds(sections) { - const ids = []; - for (let s of sections) { - if (s.checked) { - ids.push(s.id); - } - } - return ids; - } - - delete() { - const selectedDashboards = this.getDashboardsToDelete(); - - appEvents.emit('confirm-modal', { - title: 'Delete', - text: `Do you want to delete the ${selectedDashboards.length} selected dashboards?`, - icon: 'fa-trash', - yesText: 'Delete', - onConfirm: () => { - const promises = []; - for (let dash of selectedDashboards) { - promises.push(this.backendSrv.delete(`/api/dashboards/${dash}`)); - } - - this.$q.all(promises).then(() => { - this.getDashboards(); - }); - } - }); - } - - getDashboardsToMove() { - let selectedDashboards = []; - - for (const section of this.sections) { - const selected = _.filter(section.items, {checked: true}); - selectedDashboards.push(... _.map(selected, 'uri')); - } - - return selectedDashboards; - } - - moveTo() { - const selectedDashboards = this.getDashboardsToMove(); - - const template = '' + - '`'; - appEvents.emit('show-modal', { - templateHtml: template, - modalClass: 'modal--narrow', - model: {dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this)} - }); - } - - getTags() { - return this.searchSrv.getDashboardTags().then((results) => { - this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results); - this.selectedTagFilter = this.tagFilterOptions[0]; - }); - } - - filterByTag(tag) { - if (_.indexOf(this.query.tag, tag) === -1) { - this.query.tag.push(tag); - } - - return this.getDashboards(); - } - - onQueryChange() { - return this.getDashboards(); - } - - onTagFilterChange() { - var res = this.filterByTag(this.selectedTagFilter.term); - this.selectedTagFilter = this.tagFilterOptions[0]; - return res; - } - - removeTag(tag, evt) { - this.query.tag = _.without(this.query.tag, tag); - this.getDashboards(); - if (evt) { - evt.stopPropagation(); - evt.preventDefault(); - } - } - - onStarredFilterChange() { - this.query.starred = this.selectedStarredFilter.text === 'Yes'; - return this.getDashboards(); - } - - onSelectAllChanged() { - for (let section of this.sections) { - if (!section.hideHeader) { - section.checked = this.selectAllChecked; - } - - section.items = _.map(section.items, (item) => { - item.checked = this.selectAllChecked; - return item; - }); - } - - this.selectionChanged(); - } - - clearFilters() { - this.query.query = ''; - this.query.tag = []; - this.query.starred = false; - this.getDashboards(); } } diff --git a/public/app/features/dashboard/folder_dashboards_ctrl.ts b/public/app/features/dashboard/folder_dashboards_ctrl.ts new file mode 100644 index 00000000000..0eca6449584 --- /dev/null +++ b/public/app/features/dashboard/folder_dashboards_ctrl.ts @@ -0,0 +1,16 @@ +import {FolderPageLoader} from './folder_page_loader'; + +export class FolderDashboardsCtrl { + navModel: any; + folderId: number; + + /** @ngInject */ + constructor(private backendSrv, navModelSrv, private $routeParams) { + if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + this.folderId = $routeParams.folderId; + this.navModel = navModelSrv.getNav('manage-folder', 'manage-folder-dashboards', 0); + + new FolderPageLoader(this.backendSrv, this.$routeParams).load(this.navModel, this.folderId); + } + } +} diff --git a/public/app/features/dashboard/folder_page_loader.ts b/public/app/features/dashboard/folder_page_loader.ts new file mode 100644 index 00000000000..cc2d8010270 --- /dev/null +++ b/public/app/features/dashboard/folder_page_loader.ts @@ -0,0 +1,21 @@ +import _ from "lodash"; + +export class FolderPageLoader { + constructor(private backendSrv, private $routeParams) { } + + load(navModel, folderId) { + this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { + const folderTitle = result.dashboard.title; + navModel.main.text = ''; + navModel.main.breadcrumbs = [ + { title: 'Dashboards', uri: '/dashboards' }, + { title: folderTitle } + ]; + const folderUrl = `/dashboards/folder/${folderId}/${result.meta.type}/${result.meta.slug}`; + const dashTab = _.find(navModel.main.children, { id: 'manage-folder-dashboards' }); + dashTab.url = folderUrl; + const permTab = _.find(navModel.main.children, { id: 'manage-folder-permissions' }); + permTab.url = folderUrl + '/permissions'; + }); + } +} diff --git a/public/app/features/dashboard/folder_permissions_ctrl.ts b/public/app/features/dashboard/folder_permissions_ctrl.ts new file mode 100644 index 00000000000..a7d46088ac5 --- /dev/null +++ b/public/app/features/dashboard/folder_permissions_ctrl.ts @@ -0,0 +1,16 @@ +import {FolderPageLoader} from './folder_page_loader'; + +export class FolderPermissionsCtrl { + navModel: any; + folderId: number; + + /** @ngInject */ + constructor(private backendSrv, navModelSrv, private $routeParams) { + if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + this.folderId = $routeParams.folderId; + this.navModel = navModelSrv.getNav('manage-folder', 'manage-folder-permissions', 0); + + new FolderPageLoader(this.backendSrv, this.$routeParams).load(this.navModel, this.folderId); + } + } +} diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html deleted file mode 100644 index cecd52aa891..00000000000 --- a/public/app/features/dashboard/partials/dashboardList.html +++ /dev/null @@ -1,121 +0,0 @@ - - -
    -
    -
    -

    -  {{ctrl.folderTitle}} -

    -
    -
    - - - - Dashboard - - - - Folder - -
    - -
    -
    - - -
    -
    - - - Dashboard - - - - Folder - -
    - -
    - Filters: - - - - {{tagName}} - - -
    - -
    -
    - -
    -
    - -
    - -
    - -
    -
    - -
    - -
    - - -
    -
    -
    -
    - -
    -
    -
    diff --git a/public/app/features/dashboard/partials/dashboard_list.html b/public/app/features/dashboard/partials/dashboard_list.html new file mode 100644 index 00000000000..241d464434a --- /dev/null +++ b/public/app/features/dashboard/partials/dashboard_list.html @@ -0,0 +1,5 @@ + + +
    + +
    diff --git a/public/app/features/dashboard/partials/folder_dashboards.html b/public/app/features/dashboard/partials/folder_dashboards.html new file mode 100644 index 00000000000..eeda28ad4a4 --- /dev/null +++ b/public/app/features/dashboard/partials/folder_dashboards.html @@ -0,0 +1,5 @@ + + +
    + +
    \ No newline at end of file diff --git a/public/app/features/dashboard/partials/folder_permissions.html b/public/app/features/dashboard/partials/folder_permissions.html new file mode 100644 index 00000000000..ad34618457d --- /dev/null +++ b/public/app/features/dashboard/partials/folder_permissions.html @@ -0,0 +1,5 @@ + + +
    +

    Coming soon! Permissions will be added in Grafana 5.0 beta.

    +
    \ No newline at end of file From ff535a5e9a3b75cfb2093fbf94bdffe36444319f Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 7 Dec 2017 18:05:47 +0100 Subject: [PATCH 398/584] dashfolders: css fix --- public/sass/components/_search.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index caf6084fb9e..25cb9a735a6 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -132,6 +132,7 @@ .search-section__header__icon { padding: 2px 10px; + width: 35px; } .search-section__header__toggle { From c629a58b6d21d811ade290640198f5d96e3713e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Dec 2017 18:13:56 +0100 Subject: [PATCH 399/584] refactor: removed graph height from legend decimal calc --- public/app/core/time_series2.ts | 5 ++--- public/app/core/utils/ticks.ts | 20 ++------------------ public/app/plugins/panel/graph/legend.ts | 14 +++++++++----- 3 files changed, 13 insertions(+), 26 deletions(-) diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts index bf8a38761d3..c1caf82b348 100644 --- a/public/app/core/time_series2.ts +++ b/public/app/core/time_series2.ts @@ -21,14 +21,13 @@ function translateFillOption(fill) { * Calculate decimals for legend and update values for each series. * @param data series data * @param panel - * @param height Graph height */ -export function updateLegendValues(data: TimeSeries[], panel, height) { +export function updateLegendValues(data: TimeSeries[], panel) { for (let i = 0; i < data.length; i++) { let series = data[i]; let yaxes = panel.yaxes; let axis = yaxes[series.yaxis - 1]; - let {tickDecimals, scaledDecimals} = getFlotTickDecimals(data, axis, height); + let {tickDecimals, scaledDecimals} = getFlotTickDecimals(data, axis); let formater = kbn.valueFormats[panel.yaxes[series.yaxis - 1].format]; // decimal override diff --git a/public/app/core/utils/ticks.ts b/public/app/core/utils/ticks.ts index 334090c056f..8b16b528bdd 100644 --- a/public/app/core/utils/ticks.ts +++ b/public/app/core/utils/ticks.ts @@ -117,30 +117,14 @@ export function getFlotRange(panelMin, panelMax, datamin, datamax) { return {min, max}; } -/** - * Estimate number of ticks for Y axis. - * Implementation from Flot. - */ -export function getFlotNumberOfTicks(height, ticks?) { - let noTicks; - if (typeof ticks === "number" && ticks > 0) { - noTicks = ticks; - } else { - // heuristic based on the model a*sqrt(x) fitted to - // some data points that seemed reasonable - noTicks = 0.3 * Math.sqrt(height); - } - return noTicks; -} - /** * Calculate tick decimals. * Implementation from Flot. */ -export function getFlotTickDecimals(data, axis, height) { +export function getFlotTickDecimals(data, axis) { let {datamin, datamax} = getDataMinMax(data); let {min, max} = getFlotRange(axis.min, axis.max, datamin, datamax); - let noTicks = getFlotNumberOfTicks(height); + let noTicks = 3; let tickDecimals, maxDec; let delta = (max - min) / noTicks; let dec = -Math.floor(Math.log(delta) / Math.LN10); diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 7983910ffb3..854adef48fb 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -19,6 +19,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var i; var legendScrollbar; + scope.$on("$destroy", function() { + legendScrollbar.destroy(); + }); + ctrl.events.on('render-legend', () => { data = ctrl.seriesList; if (data) { @@ -27,8 +31,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { ctrl.events.emit('legend-rendering-complete'); }); - function updateLegendDecimals(graphHeight) { - updateLegendValues(data, panel, graphHeight); + function updateLegendDecimals() { + updateLegendValues(data, panel); } function getSeriesIndexForElement(el) { @@ -157,11 +161,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { // render first time for getting proper legend height if (!panel.legend.rightSide) { renderLegendElement(tableHeaderElem); - let graphHeight = ctrl.height - $container.height() - 23; - updateLegendDecimals(graphHeight); + updateLegendDecimals(); $container.empty(); } else { - updateLegendDecimals(ctrl.height); + updateLegendDecimals(); } renderLegendElement(tableHeaderElem); @@ -227,6 +230,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var maxLegendHeight = ctrl.height / 2; $container.css("max-height", maxLegendHeight - 6); $container.append(seriesElements); + if (!legendScrollbar) { legendScrollbar = new PerfectScrollbar($container[0]); } From 017b337f006c4b7e498e37404112143d048aec79 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 7 Dec 2017 19:32:38 +0100 Subject: [PATCH 400/584] dashfolders: create folder page Fixes #10085 --- pkg/api/index.go | 2 +- .../manage_dashboards/manage_dashboards.html | 2 +- public/app/core/routes/routes.ts | 5 ++ public/app/features/dashboard/all.ts | 2 + .../features/dashboard/create_folder_ctrl.ts | 41 +++++++++++++++++ .../dashboard/partials/create_folder.html | 46 +++++++++++++++++++ 6 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 public/app/features/dashboard/create_folder_ctrl.ts create mode 100644 public/app/features/dashboard/partials/create_folder.html diff --git a/pkg/api/index.go b/pkg/api/index.go index 1e44ef33050..058f5541eb5 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -95,7 +95,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Url: "#", Children: []*dtos.NavLink{ {Text: "Dashboard", Icon: "gicon gicon-dashboard-new", Url: setting.AppSubUrl + "/dashboard/new"}, - {Text: "Folder", Icon: "gicon gicon-folder-new", Url: setting.AppSubUrl + "/dashboard/new/?editview=new-folder"}, + {Text: "Folder", SubTitle: "Create a new folder to organize your dashboards", Id: "folder", Icon: "gicon gicon-folder-new", Url: setting.AppSubUrl + "/dashboards/folder/new"}, {Text: "Import", SubTitle: "Import dashboard from file or Grafana.com", Id: "import", Icon: "gicon gicon-dashboard-import", Url: setting.AppSubUrl + "/dashboard/import"}, }, }) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index 8c5aeb0facd..5daa8ddf55a 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -8,7 +8,7 @@ Dashboard - + Folder diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 8b42545d334..a068cd4a789 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -73,6 +73,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controller : 'DashboardListCtrl', controllerAs: 'ctrl', }) + .when('/dashboards/folder/new', { + templateUrl: 'public/app/features/dashboard/partials/create_folder.html', + controller : 'CreateFolderCtrl', + controllerAs: 'ctrl', + }) .when('/dashboards/folder/:folderId/:type/:slug/permissions', { templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html', controller : 'FolderPermissionsCtrl', diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index a18af82215d..f21338f5d6a 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -32,8 +32,10 @@ import {DashboardListCtrl} from './dashboard_list_ctrl'; import {FolderDashboardsCtrl} from './folder_dashboards_ctrl'; import {FolderPermissionsCtrl} from './folder_permissions_ctrl'; import {DashboardImportCtrl} from './dashboard_import_ctrl'; +import {CreateFolderCtrl} from './create_folder_ctrl'; coreModule.controller('DashboardListCtrl', DashboardListCtrl); coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl); coreModule.controller('FolderPermissionsCtrl', FolderPermissionsCtrl); coreModule.controller('DashboardImportCtrl', DashboardImportCtrl); +coreModule.controller('CreateFolderCtrl', CreateFolderCtrl); diff --git a/public/app/features/dashboard/create_folder_ctrl.ts b/public/app/features/dashboard/create_folder_ctrl.ts new file mode 100644 index 00000000000..f194dabbf1e --- /dev/null +++ b/public/app/features/dashboard/create_folder_ctrl.ts @@ -0,0 +1,41 @@ +import appEvents from 'app/core/app_events'; + +export class CreateFolderCtrl { + title = ''; + navModel: any; + nameExists = false; + titleTouched = false; + + constructor(private backendSrv, private $location, navModelSrv) { + this.navModel = navModelSrv.getNav('create', 'folder'); + } + + create() { + if (!this.title || this.title.trim().length === 0) { + return; + } + + const title = this.title.trim(); + + return this.backendSrv.createDashboardFolder(title).then(result => { + appEvents.emit('alert-success', ['Folder Created', 'OK']); + + var folderUrl = `/dashboards/folder/${result.id}/db/${result.slug}`; + this.$location.url(folderUrl); + }); + } + + titleChanged() { + this.titleTouched = true; + + this.backendSrv.search({query: this.title}).then(res => { + this.nameExists = false; + for (let hit of res) { + if (this.title === hit.title) { + this.nameExists = true; + break; + } + } + }); + } +} diff --git a/public/app/features/dashboard/partials/create_folder.html b/public/app/features/dashboard/partials/create_folder.html new file mode 100644 index 00000000000..6548057a796 --- /dev/null +++ b/public/app/features/dashboard/partials/create_folder.html @@ -0,0 +1,46 @@ + + +
    +

    + Create New Folder +

    + +
    +
    +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    + +
    +
    + +
    From 8415ea6c714b2dfd94ada10547284af5b7bf6345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Dec 2017 19:53:32 +0100 Subject: [PATCH 401/584] refactoring: changing how graph height and legend height is calculated, using flex box seems to actually work, #10079 --- public/app/features/panel/panel_directive.ts | 2 +- public/app/plugins/panel/graph/graph.ts | 41 ++--------- public/app/plugins/panel/graph/legend.ts | 45 +++++------- public/app/plugins/panel/graph/template.ts | 20 ++---- public/sass/components/_panel_graph.scss | 72 ++++++++++---------- 5 files changed, 62 insertions(+), 118 deletions(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 0577c6fbfcc..323cd4e6f6b 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -20,7 +20,7 @@ var panelTemplate = `
    - +
    diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 30761238d82..9a67f24890e 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -92,48 +92,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { } }, scope); - function getLegendHeight(panelHeight) { - const LEGEND_PADDING = 23; - - if (!panel.legend.show || panel.legend.rightSide) { - return 0; - } - - let legendHeight = getLegendContainerHeight() + LEGEND_PADDING; - return Math.min(legendHeight, Math.floor(panelHeight/2)); - } - - function getLegendContainerHeight() { - try { - let graphWrapperElem = elem.parent().parent(); - let legendElem = graphWrapperElem.find('.graph-legend-wrapper'); - let legendHeight = legendElem.height(); - return legendHeight; - } catch (e) { - console.log(e); - return 0; - } - } - - function setElementHeight() { - try { - var height = ctrl.height - getLegendHeight(ctrl.height); - elem.css('height', height + 'px'); - - return true; - } catch (e) { // IE throws errors sometimes - console.log(e); - return false; - } - } - function shouldAbortRender() { if (!data) { return true; } - if (!setElementHeight()) { return true; } - if (panelWidth === 0) { return true; } @@ -152,6 +115,10 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { $("
    ").text(panel.yaxes[1].label).appendTo(elem); } + if (ctrl.dataWarning) { + $(`
    ${ctrl.dataWarning.title}
    `).appendTo(elem); + } + thresholdManager.draw(plot); } diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 854adef48fb..4444c8b35ce 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -10,7 +10,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { return { link: function(scope, elem) { - var $container = $('
    '); var firstRender = true; var ctrl = scope.ctrl; var panel = ctrl.panel; @@ -20,7 +19,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var legendScrollbar; scope.$on("$destroy", function() { - legendScrollbar.destroy(); + if (!legendScrollbar) { + legendScrollbar.destroy(); + } }); ctrl.events.on('render-legend', () => { @@ -73,9 +74,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var el = $(e.currentTarget); var index = getSeriesIndexForElement(el); var seriesInfo = seriesList[index]; - var scrollPosition = $($container.children('tbody')).scrollTop(); + var scrollPosition = $(elem.children('tbody')).scrollTop(); ctrl.toggleSeries(seriesInfo, e); - $($container.children('tbody')).scrollTop(scrollPosition); + $(elem.children('tbody')).scrollTop(scrollPosition); } function sortLegend(e) { @@ -117,22 +118,21 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } if (firstRender) { - elem.append($container); - $container.on('click', '.graph-legend-icon', openColorSelector); - $container.on('click', '.graph-legend-alias', toggleSeries); - $container.on('click', 'th', sortLegend); + elem.on('click', '.graph-legend-icon', openColorSelector); + elem.on('click', '.graph-legend-alias', toggleSeries); + elem.on('click', 'th', sortLegend); firstRender = false; } seriesList = data; - $container.empty(); + elem.empty(); // Set min-width if side style and there is a value, otherwise remove the CSS propery var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : ""; - $container.css("min-width", width); + elem.css("min-width", width); - $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); + elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); var tableHeaderElem; if (panel.legend.alignAsTable) { @@ -162,7 +162,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { if (!panel.legend.rightSide) { renderLegendElement(tableHeaderElem); updateLegendDecimals(); - $container.empty(); + elem.empty(); } else { updateLegendDecimals(); } @@ -214,26 +214,17 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var seriesElements = renderSeriesLegendElements(); if (panel.legend.alignAsTable) { - var maxHeight = ctrl.height; - - if (!panel.legend.rightSide) { - maxHeight = maxHeight/2; - } - - var topPadding = 6; var tbodyElem = $('
    • +
    - +
    Username Email
    {{member.login}} {{member.email}} - +
    - + This user group has no members yet.
    diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index 826c5f9cd48..9568cc53465 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -11,14 +11,14 @@
    -     + Add Team
    - +
    @@ -27,18 +27,18 @@ - + @@ -58,7 +58,7 @@ - + No User Groups found. diff --git a/public/app/features/org/specs/user_group_details_ctrl_specs.ts b/public/app/features/org/specs/user_group_details_ctrl_specs.ts index 327dad7ac83..06087e8a05a 100644 --- a/public/app/features/org/specs/user_group_details_ctrl_specs.ts +++ b/public/app/features/org/specs/user_group_details_ctrl_specs.ts @@ -1,8 +1,8 @@ import '../user_group_details_ctrl'; import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common'; -import UserGroupDetailsCtrl from '../user_group_details_ctrl'; +import TeamDetailsCtrl from '../user_group_details_ctrl'; -describe('UserGroupDetailsCtrl', () => { +describe('TeamDetailsCtrl', () => { var ctx: any = {}; var backendSrv = { searchUsers: sinon.stub().returns(Promise.resolve([])), @@ -16,7 +16,7 @@ var backendSrv = { beforeEach(angularMocks.inject(($rootScope, $controller, $q) => { ctx.$q = $q; ctx.scope = $rootScope.$new(); - ctx.ctrl = $controller(UserGroupDetailsCtrl, { + ctx.ctrl = $controller(TeamDetailsCtrl, { $scope: ctx.scope, backendSrv: backendSrv, $routeParams: {id: 1}, @@ -34,13 +34,13 @@ var backendSrv = { }); it('should parse the result and save to db', () => { - expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/user-groups/1/members'); + expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/teams/1/members'); expect(backendSrv.post.getCall(0).args[1].userId).to.eql(2); }); it('should refresh the list after saving.', () => { - expect(backendSrv.get.getCall(0).args[0]).to.eql('/api/user-groups/1'); - expect(backendSrv.get.getCall(1).args[0]).to.eql('/api/user-groups/1/members'); + expect(backendSrv.get.getCall(0).args[0]).to.eql('/api/teams/1'); + expect(backendSrv.get.getCall(1).args[0]).to.eql('/api/teams/1/members'); }); }); }); diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/user_group_details_ctrl.ts index 69ce778ca88..e89df37d02d 100644 --- a/public/app/features/org/user_group_details_ctrl.ts +++ b/public/app/features/org/user_group_details_ctrl.ts @@ -2,9 +2,9 @@ import coreModule from 'app/core/core_module'; -export default class UserGroupDetailsCtrl { - userGroup: UserGroup; - userGroupMembers: User[] = []; +export default class TeamDetailsCtrl { + team: Team; + teamMembers: User[] = []; navModel: any; constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) { @@ -14,49 +14,49 @@ export default class UserGroupDetailsCtrl { get() { if (this.$routeParams && this.$routeParams.id) { - this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}`) + this.backendSrv.get(`/api/teams/${this.$routeParams.id}`) .then(result => { - this.userGroup = result; + this.team = result; }); - this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}/members`) + this.backendSrv.get(`/api/teams/${this.$routeParams.id}/members`) .then(result => { - this.userGroupMembers = result; + this.teamMembers = result; }); } } - removeUserGroupMember(userGroupMember: UserGroupMember) { + removeTeamMember(teamMember: TeamMember) { this.$scope.appEvent('confirm-modal', { title: 'Remove Member', - text: 'Are you sure you want to remove ' + userGroupMember.name + ' from this group?', + text: 'Are you sure you want to remove ' + teamMember.name + ' from this group?', yesText: "Remove", icon: "fa-warning", onConfirm: () => { - this.removeMemberConfirmed(userGroupMember); + this.removeMemberConfirmed(teamMember); } }); } - removeMemberConfirmed(userGroupMember: UserGroupMember) { - this.backendSrv.delete(`/api/user-groups/${this.$routeParams.id}/members/${userGroupMember.userId}`) + removeMemberConfirmed(teamMember: TeamMember) { + this.backendSrv.delete(`/api/teams/${this.$routeParams.id}/members/${teamMember.userId}`) .then(this.get.bind(this)); } update() { - if (!this.$scope.userGroupDetailsForm.$valid) { return; } + if (!this.$scope.teamDetailsForm.$valid) { return; } - this.backendSrv.put('/api/user-groups/' + this.userGroup.id, {name: this.userGroup.name}); + this.backendSrv.put('/api/teams/' + this.team.id, {name: this.team.name}); } userPicked(user) { - this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: user.id}).then(() => { + this.backendSrv.post(`/api/teams/${this.$routeParams.id}/members`, {userId: user.id}).then(() => { this.$scope.$broadcast('user-picker-reset'); this.get(); }); } } -export interface UserGroup { +export interface Team { id: number; name: string; } @@ -68,10 +68,10 @@ export interface User { email: string; } -export interface UserGroupMember { +export interface TeamMember { userId: number; name: string; } -coreModule.controller('UserGroupDetailsCtrl', UserGroupDetailsCtrl); +coreModule.controller('TeamDetailsCtrl', TeamDetailsCtrl); diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts index e3d99364595..d801808cb98 100644 --- a/public/app/features/org/user_groups_ctrl.ts +++ b/public/app/features/org/user_groups_ctrl.ts @@ -3,8 +3,8 @@ import coreModule from 'app/core/core_module'; import {appEvents} from 'app/core/core'; -export class UserGroupsCtrl { - userGroups: any; +export class TeamsCtrl { + teams: any; pages = []; perPage = 50; page = 1; @@ -20,9 +20,9 @@ export class UserGroupsCtrl { } get() { - this.backendSrv.get(`/api/user-groups/search?perpage=${this.perPage}&page=${this.page}&query=${this.query}`) + this.backendSrv.get(`/api/teams/search?perpage=${this.perPage}&page=${this.page}&query=${this.query}`) .then((result) => { - this.userGroups = result.userGroups; + this.teams = result.teams; this.page = result.page; this.perPage = result.perPage; this.totalPages = Math.ceil(result.totalCount / result.perPage); @@ -40,29 +40,29 @@ export class UserGroupsCtrl { this.get(); } - deleteUserGroup(userGroup) { + deleteTeam(team) { appEvents.emit('confirm-modal', { title: 'Delete', - text: 'Are you sure you want to delete User Group ' + userGroup.name + '?', + text: 'Are you sure you want to delete User Group ' + team.name + '?', yesText: "Delete", icon: "fa-warning", onConfirm: () => { - this.deleteUserGroupConfirmed(userGroup); + this.deleteTeamConfirmed(team); } }); } - deleteUserGroupConfirmed(userGroup) { - this.backendSrv.delete('/api/user-groups/' + userGroup.id) + deleteTeamConfirmed(team) { + this.backendSrv.delete('/api/teams/' + team.id) .then(this.get.bind(this)); } - openUserGroupModal() { + openTeamModal() { appEvents.emit('show-modal', { - templateHtml: '', + templateHtml: '', modalClass: 'modal--narrow' }); } } -coreModule.controller('UserGroupsCtrl', UserGroupsCtrl); +coreModule.controller('TeamsCtrl', TeamsCtrl); diff --git a/public/app/plugins/panel/permissionlist/module.html b/public/app/plugins/panel/permissionlist/module.html index a98c1bd75b8..2f83ac5e7a0 100644 --- a/public/app/plugins/panel/permissionlist/module.html +++ b/public/app/plugins/panel/permissionlist/module.html @@ -13,14 +13,14 @@ -
  • +
  • {{permission.permissionName}}
    -
    {{permission.userGroup}}
    +
    {{permission.team}}
    diff --git a/public/app/plugins/panel/permissionlist/module.ts b/public/app/plugins/panel/permissionlist/module.ts index 7280fdf1f82..62012517f86 100644 --- a/public/app/plugins/panel/permissionlist/module.ts +++ b/public/app/plugins/panel/permissionlist/module.ts @@ -7,7 +7,7 @@ class PermissionListCtrl extends PanelCtrl { static templateUrl = 'module.html'; userPermissions: any[]; - userGroupPermissions: any[]; + teamPermissions: any[]; roles: any[]; panelDefaults = { @@ -48,7 +48,7 @@ class PermissionListCtrl extends PanelCtrl { return this.backendSrv.get(`/api/dashboards/id/${this.panel.folderId}/acl`) .then(result => { this.userPermissions = _.filter(result, p => { return p.userId > 0;}); - this.userGroupPermissions = _.filter(result, p => { return p.userGroupId > 0;}); + this.teamPermissions = _.filter(result, p => { return p.teamId > 0;}); // this.roles = this.setRoles(result); }); } diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index e7f76de5f69..60447fa61a1 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -51,7 +51,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); } -.gicon-user-group { +.gicon-team { background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg'); } From 9e62a777c7ab84244dc80b80ff02d682f04dac7e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 18:40:31 +0300 Subject: [PATCH 419/584] refactor: user groups to teams, rename frontend files --- .../components/{user_group_picker.ts => team_picker.ts} | 0 public/app/core/core.ts | 2 +- public/app/core/routes/routes.ts | 4 ++-- public/app/features/org/all.ts | 6 +++--- .../{create_user_group_modal.ts => create_team_modal.ts} | 2 +- .../partials/{create_user_group.html => create_team.html} | 0 .../partials/{user_group_details.html => team_details.html} | 0 .../features/org/partials/{user_groups.html => teams.html} | 0 ...oup_details_ctrl_specs.ts => team_details_ctrl_specs.ts} | 4 ++-- .../{user_group_details_ctrl.ts => team_details_ctrl.ts} | 0 .../app/features/org/{user_groups_ctrl.ts => teams_ctrl.ts} | 0 .../icons_dark_theme/{icon_user_group.svg => icon_team.svg} | 0 .../{icon_user_group.svg => icon_team.svg} | 0 public/sass/base/_icons.scss | 2 +- 14 files changed, 10 insertions(+), 10 deletions(-) rename public/app/core/components/{user_group_picker.ts => team_picker.ts} (100%) rename public/app/features/org/{create_user_group_modal.ts => create_team_modal.ts} (91%) rename public/app/features/org/partials/{create_user_group.html => create_team.html} (100%) rename public/app/features/org/partials/{user_group_details.html => team_details.html} (100%) rename public/app/features/org/partials/{user_groups.html => teams.html} (100%) rename public/app/features/org/specs/{user_group_details_ctrl_specs.ts => team_details_ctrl_specs.ts} (93%) rename public/app/features/org/{user_group_details_ctrl.ts => team_details_ctrl.ts} (100%) rename public/app/features/org/{user_groups_ctrl.ts => teams_ctrl.ts} (100%) rename public/img/icons_dark_theme/{icon_user_group.svg => icon_team.svg} (100%) rename public/img/icons_light_theme/{icon_user_group.svg => icon_team.svg} (100%) diff --git a/public/app/core/components/user_group_picker.ts b/public/app/core/components/team_picker.ts similarity index 100% rename from public/app/core/components/user_group_picker.ts rename to public/app/core/components/team_picker.ts diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 08dabc67310..f43f4df3110 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -47,7 +47,7 @@ import {helpModal} from './components/help/help'; import {JsonExplorer} from './components/json_explorer/json_explorer'; import {NavModelSrv, NavModel} from './nav_model_srv'; import {userPicker} from './components/user_picker'; -import {teamPicker} from './components/user_group_picker'; +import {teamPicker} from './components/team_picker'; import {geminiScrollbar} from './components/scroll/scroll'; import {gfPageDirective} from './components/gf_page'; import {orgSwitcher} from './components/org_switcher'; diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 92f812f3d62..f2527f14e16 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -110,13 +110,13 @@ function setupAngularRoutes($routeProvider, $locationProvider) { resolve: loadOrgBundle, }) .when('/org/teams', { - templateUrl: 'public/app/features/org/partials/user_groups.html', + templateUrl: 'public/app/features/org/partials/teams.html', controller : 'TeamsCtrl', controllerAs: 'ctrl', resolve: loadOrgBundle, }) .when('/org/teams/edit/:id', { - templateUrl: 'public/app/features/org/partials/user_group_details.html', + templateUrl: 'public/app/features/org/partials/team_details.html', controller : 'TeamDetailsCtrl', controllerAs: 'ctrl', resolve: loadOrgBundle, diff --git a/public/app/features/org/all.ts b/public/app/features/org/all.ts index 2b60fc518c7..11a362d728a 100644 --- a/public/app/features/org/all.ts +++ b/public/app/features/org/all.ts @@ -5,9 +5,9 @@ import './select_org_ctrl'; import './change_password_ctrl'; import './new_org_ctrl'; import './user_invite_ctrl'; -import './user_groups_ctrl'; -import './user_group_details_ctrl'; -import './create_user_group_modal'; +import './teams_ctrl'; +import './team_details_ctrl'; +import './create_team_modal'; import './org_api_keys_ctrl'; import './org_details_ctrl'; import './prefs_control'; diff --git a/public/app/features/org/create_user_group_modal.ts b/public/app/features/org/create_team_modal.ts similarity index 91% rename from public/app/features/org/create_user_group_modal.ts rename to public/app/features/org/create_team_modal.ts index 224a11f4e41..8c82dbf3d9f 100644 --- a/public/app/features/org/create_user_group_modal.ts +++ b/public/app/features/org/create_team_modal.ts @@ -27,7 +27,7 @@ export class CreateTeamCtrl { export function createTeamModal() { return { restrict: 'E', - templateUrl: 'public/app/features/org/partials/create_user_group.html', + templateUrl: 'public/app/features/org/partials/create_team.html', controller: CreateTeamCtrl, bindToController: true, controllerAs: 'ctrl', diff --git a/public/app/features/org/partials/create_user_group.html b/public/app/features/org/partials/create_team.html similarity index 100% rename from public/app/features/org/partials/create_user_group.html rename to public/app/features/org/partials/create_team.html diff --git a/public/app/features/org/partials/user_group_details.html b/public/app/features/org/partials/team_details.html similarity index 100% rename from public/app/features/org/partials/user_group_details.html rename to public/app/features/org/partials/team_details.html diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/teams.html similarity index 100% rename from public/app/features/org/partials/user_groups.html rename to public/app/features/org/partials/teams.html diff --git a/public/app/features/org/specs/user_group_details_ctrl_specs.ts b/public/app/features/org/specs/team_details_ctrl_specs.ts similarity index 93% rename from public/app/features/org/specs/user_group_details_ctrl_specs.ts rename to public/app/features/org/specs/team_details_ctrl_specs.ts index 06087e8a05a..84e37bee7e6 100644 --- a/public/app/features/org/specs/user_group_details_ctrl_specs.ts +++ b/public/app/features/org/specs/team_details_ctrl_specs.ts @@ -1,6 +1,6 @@ -import '../user_group_details_ctrl'; +import '../team_details_ctrl'; import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common'; -import TeamDetailsCtrl from '../user_group_details_ctrl'; +import TeamDetailsCtrl from '../team_details_ctrl'; describe('TeamDetailsCtrl', () => { var ctx: any = {}; diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/team_details_ctrl.ts similarity index 100% rename from public/app/features/org/user_group_details_ctrl.ts rename to public/app/features/org/team_details_ctrl.ts diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/teams_ctrl.ts similarity index 100% rename from public/app/features/org/user_groups_ctrl.ts rename to public/app/features/org/teams_ctrl.ts diff --git a/public/img/icons_dark_theme/icon_user_group.svg b/public/img/icons_dark_theme/icon_team.svg similarity index 100% rename from public/img/icons_dark_theme/icon_user_group.svg rename to public/img/icons_dark_theme/icon_team.svg diff --git a/public/img/icons_light_theme/icon_user_group.svg b/public/img/icons_light_theme/icon_team.svg similarity index 100% rename from public/img/icons_light_theme/icon_user_group.svg rename to public/img/icons_light_theme/icon_team.svg diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 60447fa61a1..5ede8cff740 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -52,7 +52,7 @@ } .gicon-team { - background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg'); + background-image: url('../img/icons_#{$theme-name}_theme/icon_team.svg'); } .gicon-org { From 5d3bfee2f1a80da11bbdc0d689f071140f18c4f6 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 18:51:59 +0300 Subject: [PATCH 420/584] refactor: user groups to teams, rename backend files --- pkg/api/{user_group.go => team.go} | 0 pkg/api/{user_group_members.go => team_members.go} | 0 pkg/api/{user_group_test.go => team_test.go} | 0 pkg/models/{user_group.go => team.go} | 0 pkg/models/{user_group_member.go => team_member.go} | 0 .../sqlstore/migrations/{user_group_mig.go => team_mig.go} | 0 pkg/services/sqlstore/{user_group.go => team.go} | 0 pkg/services/sqlstore/{user_group_test.go => team_test.go} | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename pkg/api/{user_group.go => team.go} (100%) rename pkg/api/{user_group_members.go => team_members.go} (100%) rename pkg/api/{user_group_test.go => team_test.go} (100%) rename pkg/models/{user_group.go => team.go} (100%) rename pkg/models/{user_group_member.go => team_member.go} (100%) rename pkg/services/sqlstore/migrations/{user_group_mig.go => team_mig.go} (100%) rename pkg/services/sqlstore/{user_group.go => team.go} (100%) rename pkg/services/sqlstore/{user_group_test.go => team_test.go} (100%) diff --git a/pkg/api/user_group.go b/pkg/api/team.go similarity index 100% rename from pkg/api/user_group.go rename to pkg/api/team.go diff --git a/pkg/api/user_group_members.go b/pkg/api/team_members.go similarity index 100% rename from pkg/api/user_group_members.go rename to pkg/api/team_members.go diff --git a/pkg/api/user_group_test.go b/pkg/api/team_test.go similarity index 100% rename from pkg/api/user_group_test.go rename to pkg/api/team_test.go diff --git a/pkg/models/user_group.go b/pkg/models/team.go similarity index 100% rename from pkg/models/user_group.go rename to pkg/models/team.go diff --git a/pkg/models/user_group_member.go b/pkg/models/team_member.go similarity index 100% rename from pkg/models/user_group_member.go rename to pkg/models/team_member.go diff --git a/pkg/services/sqlstore/migrations/user_group_mig.go b/pkg/services/sqlstore/migrations/team_mig.go similarity index 100% rename from pkg/services/sqlstore/migrations/user_group_mig.go rename to pkg/services/sqlstore/migrations/team_mig.go diff --git a/pkg/services/sqlstore/user_group.go b/pkg/services/sqlstore/team.go similarity index 100% rename from pkg/services/sqlstore/user_group.go rename to pkg/services/sqlstore/team.go diff --git a/pkg/services/sqlstore/user_group_test.go b/pkg/services/sqlstore/team_test.go similarity index 100% rename from pkg/services/sqlstore/user_group_test.go rename to pkg/services/sqlstore/team_test.go From e4675ca5c1f607fb40bacf63e6e1d05c3f083250 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 8 Dec 2017 19:01:10 +0300 Subject: [PATCH 421/584] refactor: user groups to teams, replace rest mentions --- CHANGELOG.md | 2 +- ROADMAP.md | 2 +- public/app/features/dashboard/acl/acl.ts | 2 +- public/app/features/dashboard/acl/specs/acl_specs.ts | 6 +++--- public/app/features/org/partials/create_team.html | 2 +- public/app/features/org/partials/team_details.html | 6 +++--- public/app/features/org/partials/teams.html | 4 ++-- public/app/features/org/specs/team_details_ctrl_specs.ts | 2 +- public/app/features/org/teams_ctrl.ts | 2 +- 9 files changed, 14 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b4adfcdda2..c2d1020498e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ### WIP (in develop branch currently as its unstable or unfinished) - Dashboard folders -- User groups +- Teams - Dashboard permissions (on folder & dashboard level), permissions can be assigned to groups or individual users - UX changes to nav & side menu - New dashboard grid layout system diff --git a/ROADMAP.md b/ROADMAP.md index 4273d8df6a9..479c1933bc0 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -6,7 +6,7 @@ But it will give you an idea of our current vision and plan. ### Short term (1-4 months) - Release Grafana v5 - - User groups + - Teams - Dashboard folders - Dashboard & folder permissions (assigned to users or groups) - New Dashboard layout engine diff --git a/public/app/features/dashboard/acl/acl.ts b/public/app/features/dashboard/acl/acl.ts index 3eb5e6ad11e..55c2eb98572 100644 --- a/public/app/features/dashboard/acl/acl.ts +++ b/public/app/features/dashboard/acl/acl.ts @@ -12,7 +12,7 @@ export class AclCtrl { {value: 4, text: 'Admin'} ]; aclTypes = [ - {value: 'Group', text: 'User Group'}, + {value: 'Group', text: 'Team'}, {value: 'User', text: 'User'}, {value: 'Viewer', text: 'Everyone With Viewer Role'}, {value: 'Editor', text: 'Everyone With Editor Role'} diff --git a/public/app/features/dashboard/acl/specs/acl_specs.ts b/public/app/features/dashboard/acl/specs/acl_specs.ts index 1559cf42fa1..4c746ee9597 100644 --- a/public/app/features/dashboard/acl/specs/acl_specs.ts +++ b/public/app/features/dashboard/acl/specs/acl_specs.ts @@ -54,7 +54,7 @@ describe('AclCtrl', () => { ctx.ctrl.typeChanged(); }); - it('should sort the result by role, user group and user', () => { + it('should sort the result by role, team and user', () => { expect(ctx.ctrl.items[0].role).to.eql('Viewer'); expect(ctx.ctrl.items[1].role).to.eql('Editor'); expect(ctx.ctrl.items[2].teamId).to.eql(2); @@ -124,7 +124,7 @@ describe('AclCtrl', () => { }); }); - describe('when duplicate user group permissions are added', () => { + describe('when duplicate team permissions are added', () => { beforeEach(() => { backendSrv.get.reset(); backendSrv.post.reset(); @@ -148,7 +148,7 @@ describe('AclCtrl', () => { }); }); - describe('when one inherited and one not inherited user group permission are added', () => { + describe('when one inherited and one not inherited team permission are added', () => { beforeEach(() => { backendSrv.get.reset(); backendSrv.post.reset(); diff --git a/public/app/features/org/partials/create_team.html b/public/app/features/org/partials/create_team.html index ec1ffb5392b..02c48f4ef68 100644 --- a/public/app/features/org/partials/create_team.html +++ b/public/app/features/org/partials/create_team.html @@ -14,7 +14,7 @@
    - +
    diff --git a/public/app/features/org/partials/team_details.html b/public/app/features/org/partials/team_details.html index 40462951e36..b95cbcd2ce7 100644 --- a/public/app/features/org/partials/team_details.html +++ b/public/app/features/org/partials/team_details.html @@ -2,7 +2,7 @@
    -

    Edit User Group

    +

    Edit Team

    @@ -17,7 +17,7 @@
    -

    User Group Members

    +

    Team Members

    @@ -44,6 +44,6 @@
    • Name
    - {{userGroup.name}} + {{team.name}} #Count - + Edit    - +
    - This user group has no members yet. + This team has no members yet.
    diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html index 9568cc53465..67d24b1f94b 100644 --- a/public/app/features/org/partials/teams.html +++ b/public/app/features/org/partials/teams.html @@ -5,7 +5,7 @@
    -
    @@ -59,6 +59,6 @@
    - No User Groups found. + No Teams found.
    diff --git a/public/app/features/org/specs/team_details_ctrl_specs.ts b/public/app/features/org/specs/team_details_ctrl_specs.ts index 84e37bee7e6..b0a3c22edd0 100644 --- a/public/app/features/org/specs/team_details_ctrl_specs.ts +++ b/public/app/features/org/specs/team_details_ctrl_specs.ts @@ -24,7 +24,7 @@ var backendSrv = { }); })); - describe('when user is chosen to be added to user group', () => { + describe('when user is chosen to be added to team', () => { beforeEach(() => { const userItem = { id: 2, diff --git a/public/app/features/org/teams_ctrl.ts b/public/app/features/org/teams_ctrl.ts index d801808cb98..089bb9863b9 100644 --- a/public/app/features/org/teams_ctrl.ts +++ b/public/app/features/org/teams_ctrl.ts @@ -43,7 +43,7 @@ export class TeamsCtrl { deleteTeam(team) { appEvents.emit('confirm-modal', { title: 'Delete', - text: 'Are you sure you want to delete User Group ' + team.name + '?', + text: 'Are you sure you want to delete Team ' + team.name + '?', yesText: "Delete", icon: "fa-warning", onConfirm: () => { From 198502754940b8bf563acbb76e078d3ef05c2370 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 8 Dec 2017 17:17:22 +0100 Subject: [PATCH 422/584] dashfolders: Folder picker should set correct default values. Fixes #10135 --- .../manage_dashboards/manage_dashboards.ts | 4 +-- .../dashboard/folder_picker/picker.ts | 33 +++++++++++++++---- .../move_to_folder_modal/move_to_folder.html | 3 +- .../move_to_folder_modal/move_to_folder.ts | 8 +++++ .../features/dashboard/partials/settings.html | 3 +- .../app/features/dashboard/save_as_modal.ts | 6 ++-- .../plugins/panel/permissionlist/editor.html | 3 +- 7 files changed, 43 insertions(+), 17 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 5b74a0e50fc..1aa8a3f014a 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -134,12 +134,12 @@ export class ManageDashboardsCtrl { const selectedDashboards = this.getDashboardsToMove(); const template = '' + + 'dashboards="model.dashboards" from-folder-id="model.fromFolderId" after-save="model.afterSave()">' + '`'; appEvents.emit('show-modal', { templateHtml: template, modalClass: 'modal--narrow', - model: { dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this) } + model: { dashboards: selectedDashboards, fromFolderId: this.folderId ? Number(this.folderId) : 0, afterSave: this.getDashboards.bind(this) } }); } diff --git a/public/app/features/dashboard/folder_picker/picker.ts b/public/app/features/dashboard/folder_picker/picker.ts index 97666365696..ffde1dacc88 100644 --- a/public/app/features/dashboard/folder_picker/picker.ts +++ b/public/app/features/dashboard/folder_picker/picker.ts @@ -5,9 +5,10 @@ import _ from 'lodash'; export class FolderPickerCtrl { initialTitle: string; - initialFolderId: number; + initialFolderId?: number; labelClass: string; onChange: any; + onLoad: any; rootName = 'Root'; folder: any; @@ -17,12 +18,19 @@ export class FolderPickerCtrl { this.labelClass = "width-7"; } - if (this.initialFolderId > 0) { + if (this.initialFolderId && this.initialFolderId > 0) { this.getOptions('').then(result => { this.folder = _.find(result, {value: this.initialFolderId}); + this.onFolderLoad(); }); } else { - this.folder = {text: this.initialTitle, value: null}; + if (this.initialTitle) { + this.folder = {text: this.initialTitle, value: null}; + } else { + this.folder = {text: this.rootName, value: 0}; + } + + this.onFolderLoad(); } } @@ -33,8 +41,12 @@ export class FolderPickerCtrl { }; return this.backendSrv.search(params).then(result => { - if (query === "") { - result.unshift({title: this.rootName, value: 0}); + if (query === '' || + query.toLowerCase() === "r" || + query.toLowerCase() === "ro" || + query.toLowerCase() === "roo" || + query.toLowerCase() === "root") { + result.unshift({title: this.rootName, id: 0}); } return _.map(result, item => { @@ -43,6 +55,12 @@ export class FolderPickerCtrl { }); } + onFolderLoad() { + if (this.onLoad) { + this.onLoad({$folder: {id: this.folder.value, title: this.folder.text}}); + } + } + onFolderChange(option) { this.onChange({$folder: {id: option.value, title: option.text}}); } @@ -69,11 +87,12 @@ export function folderPicker() { bindToController: true, controllerAs: 'ctrl', scope: { - initialTitle: "<", + initialTitle: '<', initialFolderId: '<', labelClass: '@', rootName: '@', - onChange: '&' + onChange: '&', + onLoad: '&' } }; } diff --git a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.html b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.html index 429d6439e57..8f04d393a5d 100644 --- a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.html +++ b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.html @@ -15,7 +15,8 @@
    - diff --git a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts index ce110b3e2a2..4761969662e 100644 --- a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts +++ b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts @@ -7,6 +7,7 @@ export class MoveToFolderCtrl { folder: any; dismiss: any; afterSave: any; + fromFolderId: number; /** @ngInject */ constructor(private backendSrv, private $q) {} @@ -16,10 +17,16 @@ export class MoveToFolderCtrl { } save() { + if (this.folder.id === this.fromFolderId) { + appEvents.emit('alert-error', ['Dashboard(s) already belong to this folder']); + return; + } + const promises = []; for (let dash of this.dashboards) { const promise = this.backendSrv.get('/api/dashboards/' + dash).then(fullDash => { const model = new DashboardModel(fullDash.dashboard, fullDash.meta); + model.folderId = this.folder.id; model.meta.folderId = this.folder.id; model.meta.folderTitle = this.folder.title; @@ -53,6 +60,7 @@ export function moveToFolderModal() { scope: { dismiss: "&", dashboards: "=", + fromFolderId: '<', afterSave: "&" } }; diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 6a8f4792f72..77d6691f8f9 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -37,9 +37,8 @@
    - diff --git a/public/app/features/dashboard/save_as_modal.ts b/public/app/features/dashboard/save_as_modal.ts index bbb2899f665..643d6a36f67 100644 --- a/public/app/features/dashboard/save_as_modal.ts +++ b/public/app/features/dashboard/save_as_modal.ts @@ -22,7 +22,7 @@ const template = `
    - @@ -39,7 +39,7 @@ const template = ` export class SaveDashboardAsModalCtrl { clone: any; - folderTitle: any; + folderId: any; dismiss: () => void; /** @ngInject */ @@ -50,7 +50,7 @@ export class SaveDashboardAsModalCtrl { this.clone.title += ' Copy'; this.clone.editable = true; this.clone.hideControls = false; - this.folderTitle = dashboard.meta.folderTitle || 'Root'; + this.folderId = dashboard.folderId; // remove alerts if source dashboard is already persisted // do not want to create alert dupes diff --git a/public/app/plugins/panel/permissionlist/editor.html b/public/app/plugins/panel/permissionlist/editor.html index fc29351f4d2..3f0708642dc 100644 --- a/public/app/plugins/panel/permissionlist/editor.html +++ b/public/app/plugins/panel/permissionlist/editor.html @@ -2,8 +2,7 @@
    Options
    - From 70b01658353058cc081619991a6a70b6d983a4c4 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 8 Dec 2017 17:49:33 +0100 Subject: [PATCH 423/584] fix: Remove console.log --- public/app/features/panel/panel_header.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 5429a992a71..ef32c43fbb0 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -84,8 +84,6 @@ function panelHeader($compile) { restrict: 'E', template: template, link: function(scope, elem, attrs) { - console.log(elem.html()); - let menuElem = elem.find('.panel-menu'); let menuScope; let isDragged; From 47014ddb651018ee7b0adfec63098a2979052add Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 8 Dec 2017 17:50:37 +0100 Subject: [PATCH 424/584] dashfolders: Do not allow loading a folder as a dashboard --- public/app/features/dashboard/dashboardLoaderSrv.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/public/app/features/dashboard/dashboardLoaderSrv.js b/public/app/features/dashboard/dashboardLoaderSrv.js index 588df632e9b..708e6b563e4 100644 --- a/public/app/features/dashboard/dashboardLoaderSrv.js +++ b/public/app/features/dashboard/dashboardLoaderSrv.js @@ -43,6 +43,13 @@ function (angular, moment, _, $, kbn, dateMath, impressionSrv) { }); } else { promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug) + .then(result => { + if (result.meta.isFolder) { + $rootScope.appEvent("alert-error", ['Dashboard not found']); + throw new Error("Dashboard not found"); + } + return result; + }) .catch(function() { return self._dashboardLoadFailed("Not found"); }); From fbe9f759ad71b1c13f017d026f620ae29e2bfcc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 18:15:24 +0100 Subject: [PATCH 425/584] ux: work on dashboard settings views --- .../features/annotations/partials/editor.html | 214 +++++++++--------- .../features/dashboard/dashnav/dashnav.html | 9 +- .../app/features/dashboard/dashnav/dashnav.ts | 2 +- .../features/dashboard/partials/settings.html | 2 +- .../features/dashboard/settings/settings.html | 38 ++-- .../features/dashboard/settings/settings.ts | 5 +- public/sass/_grafana.scss | 1 - public/sass/_variables.dark.scss | 6 +- .../sass/components/_dashboard_settings.scss | 45 +++- public/sass/components/_navbar.scss | 39 +++- public/sass/components/_sidenav.scss | 15 -- public/sass/components/_view_states.scss | 2 +- 12 files changed, 215 insertions(+), 163 deletions(-) delete mode 100644 public/sass/components/_sidenav.scss diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 4c0b8f7b127..1cdf106ee01 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,57 +1,59 @@ +

    Annotations

    +
    -
    -

    - Annotations -

    - + + + + + + + + + + + + + + - -
    - -
    - -
    -
    -
    What are Annotations?
    -

    - Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons - on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event. - In the Queries tab you can add queries that return annotation events. -

    -

    - You can add annotations directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -

    - Checkout the Annotations documentation for more information. -
    -
    - -
    +
    No annotation queries defined
    +
    @@ -79,67 +81,67 @@
    -
    +
      New
    -
    -
    -
    -
    General
    -
    -
    - Name - -
    -
    - Data source -
    - -
    -
    -
    -
    - -
    -
    - - - - -
    - - - - -
    -
    -
    -
    - -
    Query
    - - - - - -
    -
    - - -
    -
    -
    -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index ca629e247e9..5c01e2099c6 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -43,13 +43,20 @@ -
    +
    + +
    +
    diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 9d8c0e149cc..c87d533d192 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -32,7 +32,7 @@ export class DashNavCtrl { } } - openSettings() { + toggleSettings() { let search = this.$location.search(); if (search.editview) { delete search.editview; diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 6d141e1319a..8823b369440 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -1,4 +1,4 @@ -

    General

    +

    General

    diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index ba30a1697cc..058a6279015 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -1,28 +1,20 @@ -
    - -
    -
    - -
    -
    - -
    - annotations -
    +
    +
    +
    +
    + annotationus +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 179e14f464e..fe4a3efaef5 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -1,4 +1,4 @@ -import {coreModule, appEvents} from 'app/core/core'; +import {coreModule} from 'app/core/core'; import {DashboardModel} from '../dashboard_model'; import $ from 'jquery'; import _ from 'lodash'; @@ -17,6 +17,9 @@ export class SettingsCtrl { /** @ngInject */ constructor($scope, private $location, private $rootScope) { + // temp hack + $scope.dashboard = this.dashboard; + const params = this.$location.search(); const url = $location.path(); diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 83c05db0da0..2cbf193bdc6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -88,7 +88,6 @@ @import "components/page_header"; @import "components/dashboard_settings"; @import "components/empty_list_cta"; -@import "components/sidenav"; // PAGES diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c0d1757dae7..6a9d492b4c5 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -189,7 +189,7 @@ $input-label-border-color: $gray-blue; $input-invalid-border-color: lighten($red, 5%); // Search -$search-shadow: 0 0 35px 0 $body-bg; +$search-shadow: 0 0 30px 0 $black; $search-filter-box-bg: $gray-blue; // Dropdowns @@ -226,10 +226,10 @@ $horizontalComponentOffset: 180px; // ------------------------- $wellBackground: #131517; -$navbarHeight: 52px; +$navbarHeight: 55px; $navbarBackgroundHighlight: $dark-3; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $body-bg; +$navbarBorder: 1px solid $dark-3; $navbarShadow: 0 0 20px black; $navbarText: $gray-4; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 3e1e2b53291..bb2b5a30920 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -1,7 +1,8 @@ .dashboard-settings { opacity: 0; - display: block; - padding: $spacer*2; + height: 100%; + display: flex; + flex-direction: row; } .dashboard-page--settings-opening { @@ -13,6 +14,44 @@ .dashboard-page--settings-open { .dashboard-settings { opacity: 1; - transition: opacity 250ms ease-in-out; + transition: opacity 300ms ease-in-out; + } +} + +.dashboard-settings__content { + flex-grow: 1; + min-width: 0; + height: 100%; + padding: 30px; +} + +.dashboard-settings__aside { + padding: 30px 0 0 30px; + background: $search-filter-box-bg; + display: flex; + flex-direction: column; +} + +.dashboard-settings__aside-header { + color: $text-muted; + font-size: $font-size-h3; + margin-bottom: 20px; + padding-right: 60px; + white-space: nowrap; +} + +.dashboard-settings__header { + font-size: $font-size-h3; + margin-bottom: 20px; +} + +.dashboard-settings__nav-item { + padding: 7px 12px; + color: $text-color; + @include left-brand-border; + + &.active { + @include left-brand-border-gradient(); + background: $page-bg; } } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9e276eaba5f..3a40ed89ccd 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -9,10 +9,26 @@ padding-right: $spacer; display: flex; flex-grow: 1; + border-bottom: 1px solid transparent; + transition: all 300ms ease-in-out; +} - background: $page-header-bg; - box-shadow: $page-header-shadow; - border-bottom: 1px solid $page-header-border-color; +.dashboard-page--settings-open { + .navbar { + background: $page-header-bg; + box-shadow: $search-shadow; + border-bottom: $navbarBorder; + } + + .navbar-buttons--actions, + .navbar-page-btn .fa-caret-down, + .gf-timepicker-nav { + display: none; + } + + .navbar-buttons--close { + display: flex; + } } .sidemenu-open { @@ -29,8 +45,9 @@ margin: 0; color: darken($link-color, 5%); font-size: $font-size-lg; - padding: 1rem 1rem 0.75rem 1rem; + padding-left: 1rem; min-height: $navbarHeight; + line-height: $navbarHeight; .fa-caret-down { font-size: 60%; @@ -71,6 +88,10 @@ align-items: center; justify-content: flex-end; margin-right: $spacer; + + &--close { + display: none; + } } .navbar__spacer { @@ -82,7 +103,7 @@ display: inline-block; font-weight: $btn-font-weight; - padding: 8px 11px; + padding: 6px 11px; line-height: 16px; color: $text-muted; border: 1px solid $navbar-button-border; @@ -98,7 +119,7 @@ } &--add-panel { - padding: 5px 10px; + padding: 3px 10px; .gicon { font-size: 22px; @@ -106,7 +127,7 @@ } &--tight { - padding: 9px 4px; + padding: 7px 4px; .fa { font-size: 14px; @@ -114,4 +135,8 @@ top: 2px; } } + + &--primary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); + } } diff --git a/public/sass/components/_sidenav.scss b/public/sass/components/_sidenav.scss deleted file mode 100644 index 9eb6fea004f..00000000000 --- a/public/sass/components/_sidenav.scss +++ /dev/null @@ -1,15 +0,0 @@ -.sidenav { - display: flex; - flex-direction: row; -} - -.sidenav__content { - flex-grow: 1; - min-width: 0; -} - -.sidenav__aside { - margin-right: $spacer*2; -} - - diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index b3c9a44e658..2e6ecde35da 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -45,7 +45,7 @@ background: transparent; transform: translate3d(-40px, 0, 0); transition: all 1.5s ease-in-out 1s; - .icon-gf { + i { opacity: 0; transition: all 1.5s ease-in-out 1s; } From 55609382f1f7d6402dd9782f7b1a2100a35bb08e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 9 Dec 2017 13:53:03 +0100 Subject: [PATCH 426/584] fix: fixed panel size rerendering issues --- .../app/features/dashboard/view_state_srv.ts | 2 +- public/app/features/panel/panel_ctrl.ts | 10 ---------- public/app/features/panel/panel_directive.ts | 18 +++++++++++++----- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/public/app/features/dashboard/view_state_srv.ts b/public/app/features/dashboard/view_state_srv.ts index dec507d2002..0c4c510b4fc 100644 --- a/public/app/features/dashboard/view_state_srv.ts +++ b/public/app/features/dashboard/view_state_srv.ts @@ -75,7 +75,7 @@ export class DashboardViewState { } // remember if editStateChanged - this.editStateChanged = state.edit !== this.state.edit; + this.editStateChanged = (state.edit || false) !== (this.state.edit || false); _.extend(this.state, state); this.dashboard.meta.fullscreen = this.state.fullscreen; diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 91c1b06cbf4..ab74a006fce 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -52,12 +52,9 @@ export class PanelCtrl { this.events.emit('panel-teardown'); this.events.removeAllListeners(); }); - - this.calculatePanelHeight(); } init() { - this.events.on('panel-size-changed', this.onSizeChanged.bind(this)); this.events.emit('panel-initialized'); this.publishAppEvent('panel-initialized', {scope: this.$scope}); } @@ -184,13 +181,6 @@ export class PanelCtrl { this.events.emit('render', payload); } - private onSizeChanged() { - this.calculatePanelHeight(); - this.$timeout(() => { - this.render(); - }, 100); - } - duplicate() { this.dashboard.duplicatePanel(this.panel); this.$timeout(() => { diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 323cd4e6f6b..d5b4bafa1ae 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -53,7 +53,7 @@ var panelTemplate = `
    `; -module.directive('grafanaPanel', function($rootScope, $document) { +module.directive('grafanaPanel', function($rootScope, $document, $timeout) { return { restrict: 'E', template: panelTemplate, @@ -106,11 +106,19 @@ module.directive('grafanaPanel', function($rootScope, $document) { } }); - ctrl.events.on('render', () => { - if (lastHeight !== ctrl.height) { - panelHeightUpdated(); - } + ctrl.events.on('panel-size-changed', () => { + ctrl.calculatePanelHeight(); + panelHeightUpdated(); + $timeout(() => { + ctrl.render(); + }); + }); + // set initial height + ctrl.calculatePanelHeight(); + panelHeightUpdated(); + + ctrl.events.on('render', () => { if (transparentLastState !== ctrl.panel.transparent) { panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true); transparentLastState = ctrl.panel.transparent; From 4fcf79a3a6c358608b30bea159e2d6f2c29218cb Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Sat, 9 Dec 2017 11:17:34 -0500 Subject: [PATCH 427/584] demonstrate parseTarget issue --- .../plugins/datasource/graphite/specs/query_ctrl_specs.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts index 177c1e2a0d6..22d93976043 100644 --- a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts @@ -170,7 +170,7 @@ describe('GraphiteQueryCtrl', function() { describe('when updating targets with nested query', function() { beforeEach(function() { - ctx.ctrl.target.target = 'scaleToSeconds(#A)'; + ctx.ctrl.target.target = 'scaleToSeconds(#A, 60)'; ctx.ctrl.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([{expandable: false}])); ctx.ctrl.parseTarget(); @@ -183,11 +183,11 @@ describe('GraphiteQueryCtrl', function() { }); it('target should remain the same', function() { - expect(ctx.ctrl.target.target).to.be('scaleToSeconds(#A)'); + expect(ctx.ctrl.target.target).to.be('scaleToSeconds(#A, 60)'); }); it('targetFull should include nexted queries', function() { - expect(ctx.ctrl.target.targetFull).to.be('scaleToSeconds(nested.query.count)'); + expect(ctx.ctrl.target.targetFull).to.be('scaleToSeconds(nested.query.count, 60)'); }); }); From 7f73fae6aeb7d0fe228363a4fc139781b51f7dd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 9 Dec 2017 21:42:48 +0100 Subject: [PATCH 428/584] ux: form styles polish, improvement but can be better --- public/sass/_variables.dark.scss | 9 ++++++--- public/sass/_variables.scss | 18 ++++++++---------- public/sass/components/_gf-form.scss | 12 ++++++------ public/sass/components/_switch.scss | 11 +++++------ 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c0d1757dae7..a2ccc01f071 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -21,7 +21,10 @@ $gray-4: #D8D9DA; $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb; -$gray-blue: #292a2d; + +// $gray-blue: #292a2d; +$gray-blue: #212327; +$input-black: #09090B; $white: #fff; @@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- -$input-bg: $black; +$input-bg: $input-black; $input-bg-disabled: $dark-3; $input-color: $gray-4; @@ -185,7 +188,7 @@ $input-border-focus: $input-border-color !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: $gray-blue; +$input-label-border-color: $dark-3; $input-invalid-border-color: lighten($red, 5%); // Search diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 9a1e42995b3..a0c52dee2ef 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -89,9 +89,9 @@ $font-size-root: 14px !default; $font-size-base: 13px !default; $font-size-lg: 18px !default; -$font-size-md: 15px !default; -$font-size-sm: 11px !default; -$font-size-xs: 9px !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; @@ -135,9 +135,9 @@ $list-inline-padding: 5px !default; $line-height-lg: (4 / 3) !default; $line-height-sm: 1.5 !default; -$border-radius: 0.2rem !default; -$border-radius-lg: 0.3rem !default; -$border-radius-sm: 0.1rem !default; +$border-radius: 3px !default; +$border-radius-lg: 5px !default; +$border-radius-sm: 2px!default; $caret-width: .3em !default; $caret-width-lg: $caret-width !default; @@ -162,7 +162,7 @@ $table-sm-cell-padding: .3rem !default; // Forms $input-padding-x: 10px !default; $input-padding-y: 8px !default; -$input-line-height: 19px !default; +$input-line-height: 18px !default; $input-btn-border-width: 1px; $input-border-radius: 0 $border-radius $border-radius 0 !default; @@ -203,9 +203,7 @@ $zindex-tooltip: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; $zindex-typeahead: 1060; -$zindex-sidemenu : $zindex-navbar-fixed + 5; - - +$zindex-sidemenu: $zindex-navbar-fixed; // Buttons // diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 16cb2873cbe..4701f0df5e8 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -8,7 +8,6 @@ $input-border: 1px solid $input-border-color; align-items: center; text-align: left; position: relative; - font-size: $font-size-sm; &--offset-1 { margin-left: $spacer; @@ -65,7 +64,6 @@ $input-border: 1px solid $input-border-color; .gf-form-label { padding: $input-padding-y $input-padding-x; - margin-right: $gf-form-margin; flex-shrink: 0; font-weight: $font-weight-semi-bold; @@ -74,8 +72,8 @@ $input-border: 1px solid $input-border-color; font-size: $font-size-sm; border: $input-btn-border-width solid $input-label-border-color; - @include border-radius($label-border-radius-sm); - + border-right: none; + border-radius: $label-border-radius; &--grow { flex-grow: 1; @@ -94,6 +92,7 @@ $input-border: 1px solid $input-border-color; margin: 0; margin-right: $gf-form-margin; border: $input-btn-border-width solid transparent; + border-left: none; @include border-radius($label-border-radius-sm); } @@ -119,14 +118,14 @@ $input-border: 1px solid $input-border-color; width: 100%; padding: $input-padding-y $input-padding-x; margin-right: $gf-form-margin; - font-size: $font-size-base; + font-size: $font-size-md; line-height: $input-line-height; color: $input-color; background-color: $input-bg; background-image: none; background-clip: padding-box; border: $input-border; - @include border-radius($input-border-radius-sm); + border-radius: $input-border-radius; @include box-shadow($input-box-shadow); white-space: nowrap; overflow: hidden; @@ -279,6 +278,7 @@ $input-border: 1px solid $input-border-color; background-color: $input-bg; padding-right: $input-padding-x; border: $input-border; + border-radius: $input-border-radius; &::after { position: absolute; diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index b612091d171..66cadd01369 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -1,7 +1,3 @@ -$switch-border-radius: 1rem; -$switch-width: 3.5rem; -$switch-height: 1.5rem; - /* ============================================================ SWITCH 3 - YES NO ============================================================ */ @@ -27,8 +23,10 @@ $switch-height: 1.5rem; outline: none; user-select: none; width: 100%; - height: 2.65rem; - background-color: $page-bg; + height: 37px; + background: $input-bg; + border: 1px solid $input-border-color; + border-left: none; } input + label::before, input + label::after { @@ -47,6 +45,7 @@ $switch-height: 1.5rem; display: flex; flex-direction: column; justify-content: center; + border-radius: $input-border-radius; } &:hover { From 47ecbbab8d20ce8974ee6556288552c212a96b57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 9 Dec 2017 21:47:59 +0100 Subject: [PATCH 429/584] build: fix for tslint --- public/app/features/panel/panel_directive.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index d5b4bafa1ae..626e7c151e9 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -73,7 +73,6 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { var lastHasAlertRule = false; var lastAlertState; var hasAlertRule; - var lastHeight = 0; function mouseEnter() { panelContainer.toggleClass('panel-hover-highlight', true); @@ -90,7 +89,6 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { if (panelScrollbar) { panelScrollbar.update(); } - lastHeight = ctrl.height; } // set initial transparency From 3a1700cbeea2ad6226094992590057f1b9ab166b Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Sat, 9 Dec 2017 16:27:05 -0500 Subject: [PATCH 430/584] improve handling of query references --- .../datasource/graphite/graphite_query.ts | 23 ++++++++++--------- .../plugins/datasource/graphite/query_ctrl.ts | 21 ++++++++++++++++- .../graphite/specs/query_ctrl_specs.ts | 6 ++--- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index 2a70667fdac..c97cf725459 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -91,27 +91,25 @@ export default class GraphiteQuery { this.functions.push(innerFunc); break; case 'series-ref': - this.addFunctionParameter(func, astNode.value, index, this.segments.length > 0); + if (this.segments.length > 0) { + this.addFunctionParameter(func, astNode.value, index, true); + } else { + this.segments.push(astNode); + } break; case 'bool': case 'string': case 'number': - if ((index-1) >= func.def.params.length) { - throw { message: 'invalid number of parameters to method ' + func.def.name }; - } var shiftBack = this.isShiftParamsBack(func); this.addFunctionParameter(func, astNode.value, index, shiftBack); - break; + break; case 'metric': if (this.segments.length > 0) { - if (astNode.segments.length !== 1) { - throw { message: 'Multiple metric params not supported, use text editor.' }; + this.addFunctionParameter(func, _.join(_.map(astNode.segments, 'value'), '.'), index, true); + } else { + this.segments = astNode.segments; } - this.addFunctionParameter(func, astNode.segments[0].value, index, true); break; - } - - this.segments = astNode.segments; } } @@ -149,6 +147,9 @@ export default class GraphiteQuery { if (shiftBack) { index = Math.max(index - 1, 0); } + if (index > func.def.params.length) { + throw { message: 'too many parameters for function ' + func.def.name }; + } func.params[index] = value; } diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index c14836b4bdd..f5daf01f7cc 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -62,6 +62,10 @@ export class GraphiteQueryCtrl extends QueryCtrl { } checkOtherSegments(fromIndex) { + if (this.queryModel.segments.length === 1 && this.queryModel.segments[0].type === 'series-ref') { + return; + } + if (fromIndex === 0) { this.addSelectMetricSegment(); return; @@ -108,8 +112,23 @@ export class GraphiteQueryCtrl extends QueryCtrl { if (altSegments.length === 0) { return altSegments; } + // add query references + if (index === 0) { + _.eachRight(this.panelCtrl.panel.targets, target => { + if (target.refId === this.queryModel.target.refId) { + return; + } + + altSegments.unshift(this.uiSegmentSrv.newSegment({ + type: 'series-ref', + value: '#' + target.refId, + expandable: false, + })); + }); + } + // add template variables - _.each(this.templateSrv.variables, variable => { + _.eachRight(this.templateSrv.variables, variable => { altSegments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: '$' + variable.name, diff --git a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts index 22d93976043..86c32c3c018 100644 --- a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts @@ -95,11 +95,11 @@ describe('GraphiteQueryCtrl', function() { }); it('should not add select metric segment', function() { - expect(ctx.ctrl.segments.length).to.be(0); + expect(ctx.ctrl.segments.length).to.be(1); }); - it('should add both series refs as params', function() { - expect(ctx.ctrl.queryModel.functions[0].params.length).to.be(2); + it('should add second series ref as param', function() { + expect(ctx.ctrl.queryModel.functions[0].params.length).to.be(1); }); }); From e1440dcc440a07533768645f65e1d40f5e49ac4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 9 Dec 2017 22:45:33 +0100 Subject: [PATCH 431/584] ux: navbar progress --- .../features/dashboard/dashnav/dashnav.html | 5 ++-- .../app/features/dashboard/dashnav/dashnav.ts | 12 +++++++++ public/sass/_variables.dark.scss | 2 +- public/sass/_variables.light.scss | 1 + public/sass/components/_navbar.scss | 27 ++++++++++++++++--- public/sass/components/_tabbed_view.scss | 3 ++- public/sass/pages/_dashboard.scss | 4 ++- 7 files changed, 44 insertions(+), 10 deletions(-) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 5c01e2099c6..b5e151bf966 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -51,9 +51,8 @@
    -
    diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index c87d533d192..837d0d76537 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -42,6 +42,18 @@ export class DashNavCtrl { this.$location.search(search); } + close() { + let search = this.$location.search(); + if (search.editview) { + delete search.editview; + } + if (search.fullscreen) { + delete search.fullscreen; + delete search.edit; + } + this.$location.search(search); + } + starDashboard() { this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred) .then(newState => { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index fd5b5be364b..d2895fc2d78 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -22,7 +22,6 @@ $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb; -// $gray-blue: #292a2d; $gray-blue: #212327; $input-black: #09090B; @@ -100,6 +99,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-header-hover-bg: $dark-4; $panel-header-menu-hover-bg: $dark-5; +$panel-edit-shadow: 0 -30px 30px -30px $black; // page header $page-header-bg: linear-gradient(90deg, #292a2d, black); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index f6512aed3c4..0570b6a6e85 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -103,6 +103,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-header-hover-bg: $gray-6; $panel-header-menu-hover-bg: $gray-4; +$panel-edit-shadow: 0 0 30px 20px $black; // Page header $page-header-bg: linear-gradient(90deg, $white, $gray-7); diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 3a40ed89ccd..4f9b8fbbf4f 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -10,14 +10,19 @@ display: flex; flex-grow: 1; border-bottom: 1px solid transparent; - transition: all 300ms ease-in-out; + transition: all 350ms ease-in-out; } +@mixin navbar-alt-look() { + background: $page-header-bg; + box-shadow: $search-shadow; + border-bottom: $navbarBorder; +} + + .dashboard-page--settings-open { .navbar { - background: $page-header-bg; - box-shadow: $search-shadow; - border-bottom: $navbarBorder; + @include navbar-alt-look(); } .navbar-buttons--actions, @@ -31,6 +36,20 @@ } } +.panel-in-fullscreen { + .navbar { + @include navbar-alt-look(); + } + + .navbar-buttons--actions { + display: none; + } + + .navbar-buttons--close { + display: flex; + } +} + .sidemenu-open { .navbar { padding-left: 15px; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index d2c9b24d2a0..dfd760753fe 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -6,7 +6,8 @@ padding: 0; .tabbed-view-header { - padding: 1.5em 1rem 0 1rem; + padding: 0px 25px; + background: none; } } } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 943eb930543..d1951486c4b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -217,4 +217,6 @@ div.flot-text { } } - +.panel-full-edit { + margin: $dashboard-padding (-$dashboard-padding) 0 (-$dashboard-padding); +} From 00c723f04a91e0a3f9fd154519af0af4016ae73d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 10 Dec 2017 12:21:04 +0100 Subject: [PATCH 432/584] ux: minor changes --- .../features/dashboard/partials/settings.html | 26 +++---------------- .../features/dashboard/settings/settings.html | 1 + .../features/dashboard/settings/settings.ts | 13 +++++++--- public/sass/base/_grafana_icons.scss | 1 + .../sass/components/_dashboard_settings.scss | 7 ++++- public/sass/components/_gf-form.scss | 1 + public/sass/components/_switch.scss | 2 +- public/sass/components/_tabs.scss | 6 +++++ 8 files changed, 29 insertions(+), 28 deletions(-) diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index d1ab548677e..80da0fc474a 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -17,11 +17,10 @@
    - - +
    @@ -33,23 +32,6 @@
    -
    - - -
    -
    - - - -
    - -
    diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 058a6279015..0c11e13496e 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -5,6 +5,7 @@ + {{::section.title}} diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index fe4a3efaef5..18775e5fd29 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -9,10 +9,15 @@ export class SettingsCtrl { viewId: string; sections: any[] = [ - {title: 'General', id: 'settings'}, - {title: 'Annotations', id: 'annotations'}, - {title: 'Templating', id: 'templating'}, - {title: 'Versions', id: 'versions'}, + {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, + {title: 'Timepicker', id: 'timepicker', icon: "fa fa-fw fa-clock-o"}, + {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, + {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, + {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, + {title: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"}, + {title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"}, + {title: 'Save As', id: 'save_as', icon: "fa fa-fw fa-copy"}, + {title: 'Delete', id: 'delete', icon: "fa fa-fw fa-trash"}, ]; /** @ngInject */ diff --git a/public/sass/base/_grafana_icons.scss b/public/sass/base/_grafana_icons.scss index 967912eb1ab..9c4b2d0e008 100644 --- a/public/sass/base/_grafana_icons.scss +++ b/public/sass/base/_grafana_icons.scss @@ -19,6 +19,7 @@ text-transform: none; line-height: 1; display: inline-block; + vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index bb2b5a30920..669078c7f91 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -27,7 +27,7 @@ .dashboard-settings__aside { padding: 30px 0 0 30px; - background: $search-filter-box-bg; + background: $panel-bg; display: flex; flex-direction: column; } @@ -48,10 +48,15 @@ .dashboard-settings__nav-item { padding: 7px 12px; color: $text-color; + font-size: $font-size-md; @include left-brand-border; &.active { @include left-brand-border-gradient(); background: $page-bg; } + + i { + padding-right: 5px; + } } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 7783b364861..1174d307ff2 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -66,6 +66,7 @@ $input-border: 1px solid $input-border-color; padding: $input-padding-y $input-padding-x; flex-shrink: 0; font-weight: $font-weight-semi-bold; + font-size: $font-size-sm; background-color: $input-label-bg; display: block; diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 66cadd01369..6b81f144457 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -27,6 +27,7 @@ background: $input-bg; border: 1px solid $input-border-color; border-left: none; + border-radius: $input-border-radius; } input + label::before, input + label::after { @@ -45,7 +46,6 @@ display: flex; flex-direction: column; justify-content: center; - border-radius: $input-border-radius; } &:hover { diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 396c3f98880..ee53ddfbb4c 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -18,11 +18,17 @@ border: solid transparent; border-width: 0 1px 1px; border-radius: 3px 3px 0 0; + color: $text-color; i { margin-right: 5px; } + .gicon { + position: relative; + top: -2px; + } + &:hover, &:focus { color: $link-hover-color; From 511fa7dec1392b4c9ebc9e3978033de8533f1a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 10 Dec 2017 12:41:11 +0100 Subject: [PATCH 433/584] ux: dashboard settings progress --- public/app/core/directives/dash_class.js | 13 - public/app/core/services/keybindingSrv.ts | 4 - .../app/features/dashboard/dashboard_model.ts | 2 - .../features/dashboard/partials/settings.html | 1 - .../features/dashboard/settings/settings.html | 49 +- .../features/dashboard/settings/settings.ts | 1 - .../dashboard/timepicker/settings.html | 32 +- .../features/templating/partials/editor.html | 556 +++++++++--------- .../sass/components/_dashboard_settings.scss | 7 + public/sass/components/_navbar.scss | 14 - public/sass/components/_view_states.scss | 14 - 11 files changed, 336 insertions(+), 357 deletions(-) diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js index 69f1129f636..9df53bdbd48 100644 --- a/public/app/core/directives/dash_class.js +++ b/public/app/core/directives/dash_class.js @@ -18,19 +18,6 @@ function (_, $, coreModule) { elem.toggleClass('panel-in-fullscreen', false); }); - var lastHideControlsVal; - $scope.$watch('ctrl.dashboard.hideControls', function() { - if (!$scope.dashboard) { - return; - } - - var hideControls = $scope.dashboard.hideControls; - if (lastHideControlsVal !== hideControls) { - elem.toggleClass('hide-controls', hideControls); - lastHideControlsVal = hideControls; - } - }); - $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) { elem.toggleClass('playlist-active', newValue === true); }); diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 348e44fe6ce..362b20fc307 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -84,10 +84,6 @@ export class KeybindingSrv { scope.broadcastRefresh(); }); - this.bind('mod+h', () => { - dashboard.hideControls = !dashboard.hideControls; - }); - this.bind('mod+s', e => { scope.appEvent('save-dashboard'); }); diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 10b0d0da67b..034ad7d84e1 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -22,7 +22,6 @@ export class DashboardModel { graphTooltip: any; time: any; timepicker: any; - hideControls: any; templating: any; annotations: any; refresh: any; @@ -67,7 +66,6 @@ export class DashboardModel { this.timezone = data.timezone || ''; this.editable = data.editable !== false; this.graphTooltip = data.graphTooltip || 0; - this.hideControls = data.hideControls || false; this.time = data.time || {from: 'now-6h', to: 'now'}; this.timepicker = data.timepicker || {}; this.templating = this.ensureListExist(data.templating); diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 80da0fc474a..2295ff2713a 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -60,7 +60,6 @@ - diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 0c11e13496e..465e7976d99 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -10,12 +10,55 @@ -
    +
    +

    + General +

    + +
    +
    + + +
    +
    + + +
    +
    + + + +
    + + + + +
    + + + +
    Panel Options
    +
    + +
    + +
    +
    -
    - annotationus +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 18775e5fd29..c013e9d4720 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -10,7 +10,6 @@ export class SettingsCtrl { sections: any[] = [ {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, - {title: 'Timepicker', id: 'timepicker', icon: "fa fa-fw fa-clock-o"}, {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, diff --git a/public/app/features/dashboard/timepicker/settings.html b/public/app/features/dashboard/timepicker/settings.html index 8c40121eaed..3cb8ca061fb 100644 --- a/public/app/features/dashboard/timepicker/settings.html +++ b/public/app/features/dashboard/timepicker/settings.html @@ -1,14 +1,24 @@
    +
    Time Options
    +
    -
    - Auto-refresh - -
    -
    - Now delay now- - -
    - -
    +
    + +
    + +
    +
    + +
    + Auto-refresh + +
    +
    + Now delay now- + +
    + + +
    diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 5a9fe04c625..72f82f43a8f 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,325 +1,293 @@ +

    Templating

    +
    -
    -

    - Templating -

    +
    +
    + No template variables defined +

    +
    + + + + + + + + + + + + - + + + + + + +
    VariableDefinition
    + + ${{variable.name}} + + + {{variable.query}} + + + Duplicate + + + + + +
    +
    - -
    +
    +
    +
    What does templating do?
    +

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application + and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of + the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. +
    +
    -

    + Checkout the Templating documentation for more information. +

    +
    +
    -
    -
    - No template variables defined -

    +
    +
    +   New +
    +
    + + +
    Variable
    +
    +
    +
    + Name + +
    +
    + + Type + + {{variableTypes[current.type].description}} + + +
    + +
    +
    - - - - - - - - - - - - - - - - - - -
    VariableDefinition
    - - ${{variable.name}} - - - {{variable.query}} - - - Duplicate - - - - - -
    -
    +
    + Template names cannot begin with '__' that's reserved for Grafanas global variables +
    -
    -
    -
    What does templating do?
    -

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application - and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of - the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. -
    -
    - - Checkout the Templating documentation for more information. -

    +
    +
    + Label + +
    +
    + Hide +
    + +
    +
    -
    -
    -   New -
    -
    +
    +
    Interval Options
    - -
    Variable
    -
    -
    -
    - Name - -
    -
    - - Type - - {{variableTypes[current.type].description}} - - -
    - -
    -
    -
    +
    + Values + +
    -
    - Template names cannot begin with '__' that's reserved for Grafanas global variables -
    +
    + + -
    -
    - Label - -
    -
    - Hide -
    - -
    -
    -
    -
    +
    + + Step count How many times should the current time range be divided to calculate the value + +
    + +
    +
    +
    + + Min interval The calculated value will not go below this threshold + + +
    +
    +
    -
    -
    Interval Options
    +
    +
    Custom Options
    +
    + Values separated by comma + +
    +
    -
    - Values - -
    +
    +
    Constant options
    +
    + Value + +
    +
    -
    - - +
    +
    Query Options
    -
    - - Step count How many times should the current time range be divided to calculate the value - -
    - -
    -
    -
    - - Min interval The calculated value will not go below this threshold - - -
    -
    -
    +
    +
    + Data source +
    + +
    +
    +
    + + Refresh + + When to update the values of this variable. + + +
    + +
    +
    +
    +
    + Query + +
    +
    + + Regex + + Optional, if you want to extract part of a series name or metric node segment. + + + +
    +
    + + Sort + + How to sort the values of this variable. + + +
    + +
    +
    +
    -
    -
    Custom Options
    -
    - Values separated by comma - -
    -
    +
    +
    Data source options
    -
    -
    Constant options
    -
    - Value - -
    -
    +
    + +
    + +
    +
    -
    -
    Query Options
    +
    +
    + + + +
    +
    -
    -
    Data source options
    +
    +
    Options
    +
    + Data source +
    + +
    +
    +
    -
    - -
    - -
    -
    +
    +
    Selection Options
    +
    + + + + +
    +
    + Custom all value + +
    +
    -
    - - -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    -
    -
    Options
    -
    - Data source -
    - -
    -
    -
    +
    + {{infoText}} +
    -
    -
    Selection Options
    -
    - - - - -
    -
    - Custom all value - -
    -
    +
    + + +
    -
    -
    Value groups/tags (Experimental feature)
    - - -
    - Tags query - -
    -
    -
  • Tag values query
    • - -
    -
    - -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    - -
    - {{infoText}} -
    - -
    - - -
    - - -
    +
    diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 669078c7f91..bb22e6af89e 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -38,6 +38,13 @@ margin-bottom: 20px; padding-right: 60px; white-space: nowrap; + + i { + font-size: 25px; + position: relative; + top: 1px; + padding-right: 5px; + } } .dashboard-settings__header { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 4f9b8fbbf4f..7cde09b1dac 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -87,20 +87,6 @@ } } -.navbar-page-btn-wrapper { - display: inline-block; - position: relative; -} - -.navbar-section-wrapper { - position: relative; - float: left; -} - -.navbar-mini-btn-wrapper { - padding: 15px; -} - .navbar-buttons { height: $navbarHeight; display: flex; diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 2e6ecde35da..e528891547a 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -1,19 +1,5 @@ -@mixin hide-controls() { - .add-row-panel-hint, - .dash-row-menu-container { - display: none; - } - .panel-drop-zone { - visibility: hidden; - } -} - -.hide-controls { - @include hide-controls(); -} .page-kiosk-mode { - @include hide-controls(); dashnav { display: none; } From 8dcfa18761d9eddc9b50aed680506ef1b35008e8 Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Sun, 10 Dec 2017 10:45:41 -0500 Subject: [PATCH 434/584] simplify function parameter addition --- .../datasource/graphite/graphite_query.ts | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index c97cf725459..3b29c57b808 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -46,7 +46,7 @@ export default class GraphiteQuery { } try { - this.parseTargetRecursive(astNode, null, 0); + this.parseTargetRecursive(astNode, null); } catch (err) { console.log('error parsing target:', err.message); this.error = err.message; @@ -75,7 +75,7 @@ export default class GraphiteQuery { }, ""); } - parseTargetRecursive(astNode, func, index) { + parseTargetRecursive(astNode, func) { if (astNode === null) { return null; } @@ -83,8 +83,8 @@ export default class GraphiteQuery { switch (astNode.type) { case 'function': var innerFunc = gfunc.createFuncInstance(astNode.name, { withDefaultParams: false }); - _.each(astNode.params, (param, index) => { - this.parseTargetRecursive(param, innerFunc, index); + _.each(astNode.params, param => { + this.parseTargetRecursive(param, innerFunc); }); innerFunc.updateText(); @@ -92,7 +92,7 @@ export default class GraphiteQuery { break; case 'series-ref': if (this.segments.length > 0) { - this.addFunctionParameter(func, astNode.value, index, true); + this.addFunctionParameter(func, astNode.value); } else { this.segments.push(astNode); } @@ -100,12 +100,11 @@ export default class GraphiteQuery { case 'bool': case 'string': case 'number': - var shiftBack = this.isShiftParamsBack(func); - this.addFunctionParameter(func, astNode.value, index, shiftBack); + this.addFunctionParameter(func, astNode.value); break; case 'metric': if (this.segments.length > 0) { - this.addFunctionParameter(func, _.join(_.map(astNode.segments, 'value'), '.'), index, true); + this.addFunctionParameter(func, _.join(_.map(astNode.segments, 'value'), '.')); } else { this.segments = astNode.segments; } @@ -113,10 +112,6 @@ export default class GraphiteQuery { } } - isShiftParamsBack(func) { - return func.def.name !== 'seriesByTag'; - } - updateSegmentValue(segment, index) { this.segments[index].value = segment.value; } @@ -143,14 +138,11 @@ export default class GraphiteQuery { } } - addFunctionParameter(func, value, index, shiftBack) { - if (shiftBack) { - index = Math.max(index - 1, 0); - } - if (index > func.def.params.length) { + addFunctionParameter(func, value) { + if (func.params.length >= func.def.params.length) { throw { message: 'too many parameters for function ' + func.def.name }; } - func.params[index] = value; + func.params.push(value); } removeFunction(func) { From 525ae4fdf5a1986401a775ea2f3641ec7cc8f39e Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Sun, 10 Dec 2017 10:46:31 -0500 Subject: [PATCH 435/584] support metric trees of varying depth, never send '.select metric' to graphite --- public/app/plugins/datasource/graphite/graphite_query.ts | 2 +- public/app/plugins/datasource/graphite/query_ctrl.ts | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index 3b29c57b808..54504219dad 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -152,7 +152,7 @@ export default class GraphiteQuery { updateModelTarget(targets) { // render query if (!this.target.textEditor) { - var metricPath = this.getSegmentPathUpTo(this.segments.length); + var metricPath = this.getSegmentPathUpTo(this.segments.length).replace(/\.select metric$/, ''); this.target.target = _.reduce(this.functions, wrapFunction, metricPath); } diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index f5daf01f7cc..d00ac90fe65 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -219,10 +219,7 @@ export class GraphiteQueryCtrl extends QueryCtrl { this.updateModelTarget(); if (this.queryModel.target !== oldTarget) { - var lastSegment = this.segments.length > 0 ? this.segments[this.segments.length - 1] : {}; - if (lastSegment.value !== 'select metric') { - this.panelCtrl.refresh(); - } + this.panelCtrl.refresh(); } } From e6bdccbb05bf9b0b8e8224796ee3bc75f3beb874 Mon Sep 17 00:00:00 2001 From: noakup Date: Sun, 10 Dec 2017 18:38:48 +0200 Subject: [PATCH 436/584] hyphenhyphen --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index aefc0c0802b..5358cd3f3d5 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ If you have any problems please read the [troubleshooting guide](http://docs.gra Be sure to read the [getting started guide](http://docs.grafana.org/guides/gettingstarted/) and the other feature guides. ## Run from master -If you want to build a package yourself, or contribute. Here is a guide for how to do that. You can always find +If you want to build a package yourself, or contribute - Here is a guide for how to do that. You can always find the latest master builds [here](https://grafana.com/grafana/download) ### Dependencies @@ -97,7 +97,7 @@ Writing & watching frontend tests (we have two test runners) ## Contribute -If you have any idea for an improvement or found a bug do not hesitate to open an issue. +If you have any idea for an improvement or found a bug, do not hesitate to open an issue. And if you have time clone this repo and submit a pull request and help me make Grafana the kickass metrics & devops dashboard we all dream about! From 588ce6606c4c0a3873539b713ba2ec2fd3b05e79 Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Sun, 10 Dec 2017 21:20:38 -0500 Subject: [PATCH 437/584] fix function re-ordering broken in #9436 --- public/app/plugins/datasource/graphite/func_editor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/graphite/func_editor.js b/public/app/plugins/datasource/graphite/func_editor.js index 57cdc844375..534b0886fff 100644 --- a/public/app/plugins/datasource/graphite/func_editor.js +++ b/public/app/plugins/datasource/graphite/func_editor.js @@ -208,7 +208,7 @@ function (angular, _, $) { if ($target.hasClass('fa-arrow-left')) { $scope.$apply(function() { - _.move(ctrl.functions, $scope.$index, $scope.$index - 1); + _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index - 1); ctrl.targetChanged(); }); return; @@ -216,7 +216,7 @@ function (angular, _, $) { if ($target.hasClass('fa-arrow-right')) { $scope.$apply(function() { - _.move(ctrl.functions, $scope.$index, $scope.$index + 1); + _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index + 1); ctrl.targetChanged(); }); return; From ad2a69bff4e8dfd3933b339783d1da15ce30c1fb Mon Sep 17 00:00:00 2001 From: jomenxiao Date: Mon, 11 Dec 2017 16:01:17 +0800 Subject: [PATCH 438/584] add encoding param --- pkg/api/render.go | 1 + pkg/components/renderer/renderer.go | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/pkg/api/render.go b/pkg/api/render.go index cab9c81505d..e9bce5bc99b 100644 --- a/pkg/api/render.go +++ b/pkg/api/render.go @@ -24,6 +24,7 @@ func RenderToPng(c *middleware.Context) { OrgId: c.OrgId, Timeout: queryReader.Get("timeout", "60"), Timezone: queryReader.Get("tz", ""), + Encoding: queryReader.Get("encoding", ""), } pngPath, err := renderer.RenderToPng(renderOpts) diff --git a/pkg/components/renderer/renderer.go b/pkg/components/renderer/renderer.go index d5980231f0e..fedb68f2e31 100644 --- a/pkg/components/renderer/renderer.go +++ b/pkg/components/renderer/renderer.go @@ -27,6 +27,7 @@ type RenderOpts struct { Timeout string OrgId int64 Timezone string + Encoding string } var ErrTimeout = errors.New("Timeout error. You can set timeout in seconds with &timeout url parameter") @@ -95,6 +96,10 @@ func RenderToPng(params *RenderOpts) (string, error) { "renderKey=" + renderKey, } + if params.Encoding != "" { + cmdArgs = append([]string{fmt.Sprintf("--output-encoding=%s", params.Encoding)}, cmdArgs...) + } + cmd := exec.Command(binPath, cmdArgs...) stdout, err := cmd.StdoutPipe() From 2ce4a8e4c5ad0ca72733acd6dd749f4f87ded79f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 10:52:38 +0100 Subject: [PATCH 439/584] fix: fixed build failure --- public/app/features/dashboard/dashboardLoaderSrv.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/dashboard/dashboardLoaderSrv.js b/public/app/features/dashboard/dashboardLoaderSrv.js index 708e6b563e4..d5e257de665 100644 --- a/public/app/features/dashboard/dashboardLoaderSrv.js +++ b/public/app/features/dashboard/dashboardLoaderSrv.js @@ -43,7 +43,7 @@ function (angular, moment, _, $, kbn, dateMath, impressionSrv) { }); } else { promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug) - .then(result => { + .then(function(result) { if (result.meta.isFolder) { $rootScope.appEvent("alert-error", ['Dashboard not found']); throw new Error("Dashboard not found"); From 795d9c0362b6bd4b68742b3fda0d6c12dbfc42ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 11:42:13 +0100 Subject: [PATCH 440/584] ux: fixed navbar and sidemenu z-index issue and improved responsive rules --- pkg/cmd/grafana-server/main.go | 2 +- public/sass/components/_navbar.scss | 29 ++++++++++++++++++++------- public/sass/components/_sidemenu.scss | 9 +-------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/pkg/cmd/grafana-server/main.go b/pkg/cmd/grafana-server/main.go index 183e4b047cd..46c899d3d81 100644 --- a/pkg/cmd/grafana-server/main.go +++ b/pkg/cmd/grafana-server/main.go @@ -30,7 +30,7 @@ import ( _ "github.com/grafana/grafana/pkg/tsdb/testdata" ) -var version = "4.6.0" +var version = "5.0.0" var commit = "NA" var buildstamp string var build_date string diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 25d7c6ffa82..231adbc4a55 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,7 +1,7 @@ .navbar { position: relative; - padding-left: $side-menu-width; + margin-left: 40px; // box-shadow: $navbarShadow; z-index: $zindex-navbar-fixed; // background: $navbarBackground; @@ -11,12 +11,6 @@ flex-grow: 1; } -.sidemenu-open { - .navbar { - padding-left: 15px; - } -} - .navbar-page-btn { text-overflow: ellipsis; overflow: hidden; @@ -44,6 +38,8 @@ line-height: 8px; opacity: 0.75; margin-right: 8px; + // icon hidden on smaller screens + display: none; } } @@ -111,3 +107,22 @@ } } } + +@include media-breakpoint-up(sm) { + .navbar { + margin-left: 50px; + } + + .sidemenu-open { + .navbar { + margin-left: 15px; + } + } + + .navbar-page-btn { + .gicon { + display: inline-block; + } + } +} + diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 05882d75fc9..3bedd8a9f14 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -16,7 +16,6 @@ .sidemenu__close { display: none; } - } // body class that hides sidemenu @@ -191,12 +190,6 @@ li.sidemenu-org-switcher { } @include media-breakpoint-down(xs) { - .sidemenu-open { - .navbar { - padding-left: 60px !important; - } - } - .sidemenu-open--xs { .sidemenu { width: 100%; @@ -227,7 +220,7 @@ li.sidemenu-org-switcher { } .sidemenu__logo_small_breakpoint { - padding: 12px 10px 26px; + padding: 16px 10px 26px; display: flex; flex-direction: row; justify-content: space-between; From 09cc60ffe4285bc36d9e0097fe879be3a7f2abd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 12:13:45 +0100 Subject: [PATCH 441/584] ux: dashboard settings progress --- .../components/EmptyListCTA/EmptyListCTA.tsx | 4 +- .../features/dashboard/settings/settings.ts | 2 +- .../features/templating/partials/editor.html | 113 ++++++++++-------- public/sass/components/_empty_list_cta.scss | 20 ++-- public/sass/components/_infobox.scss | 10 -- public/sass/components/_navbar.scss | 2 - 6 files changed, 74 insertions(+), 77 deletions(-) diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index a5a78a63bf1..1583303dfa1 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react'; export interface IProps { model: any; @@ -17,7 +17,7 @@ class EmptyListCTA extends Component { proTipTarget } = this.props.model; return ( -
    +
    {title}
    {buttonTitle}
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index c013e9d4720..744fcc46ca2 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -11,7 +11,7 @@ export class SettingsCtrl { sections: any[] = [ {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, - {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, + {title: 'Variables', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, {title: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"}, {title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"}, diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 72f82f43a8f..9013a4642d8 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,64 +1,71 @@ -

    Templating

    +

    Variables

    +
    - No template variables defined -

    +
    +
    There are no template variables added yet
    + + + Add variable + +
    +
    + What does variables do? +
    +

    Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names + in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of + the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. + + Checkout the + + Templating documentation + for more information. +

    +
    - - - - - - - - - - - - - - - - - - -
    VariableDefinition
    - - ${{variable.name}} - - - {{variable.query}} - - - Duplicate - - - - - -
    -
    +
    +
    +
    + New +
    -
    -
    -
    What does templating do?
    -

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application - and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of - the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. -
    -
    + + + + + + + + + + + + - Checkout the Templating documentation for more information. -

    - - - -
    -
    -   New +
    + + + + + +
    VariableDefinition
    + + ${{variable.name}} + + + {{variable.query}} + + + Duplicate + + + + + +

    diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss index a8c235d83db..844c8c87866 100644 --- a/public/sass/components/_empty_list_cta.scss +++ b/public/sass/components/_empty_list_cta.scss @@ -1,21 +1,23 @@ -.empty-list-cta { - background-color: $search-filter-box-bg; - text-align: center; +.empty-list-cta { + background-color: $search-filter-box-bg; + text-align: center; + padding: 2rem 2rem 1rem 2rem; + border-radius: $border-radius; } .empty-list-cta__title { - padding-bottom: 30px; - font-style: italic; + padding-bottom: 30px; + font-style: italic; } .empty-list-cta__button { - margin-bottom: 50px; + margin-bottom: 50px; } .empty-list-cta__pro-tip { - padding-bottom: 20px; + padding-bottom: 1rem; } .empty-list-cta__pro-tip-link { - margin-left: 5px; -} \ No newline at end of file + margin-left: 5px; +} diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index 0d3cbcd52b8..2a9c03cbdfa 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -1,13 +1,3 @@ -// .grafana-info-box::before { -// content: "\f05a"; -// font-family:'FontAwesome'; -// position: absolute; -// top: -13px; -// left: -8px; -// font-size: 20px; -// color: $text-color; -// } - .grafana-info-box { position: relative; background: $info-box-background; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 7cde09b1dac..15f27e81e93 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -2,9 +2,7 @@ .navbar { position: relative; padding-left: $side-menu-width; - // box-shadow: $navbarShadow; z-index: $zindex-navbar-fixed; - // background: $navbarBackground; height: $navbarHeight; padding-right: $spacer; display: flex; From 8d70f13393c42fbcc3a4e3ca6d861d108eecf1fc Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Mon, 11 Dec 2017 12:42:53 +0100 Subject: [PATCH 442/584] Type-agnostic row merge in table transform for multiple queries * moved unique value naming to datasource (credit: @bergquist) * merge rows based on same column-values and empty values * expanded tests --- .../datasource/prometheus/datasource.ts | 7 +- .../panel/table/specs/transformers.jest.ts | 65 +++++++++++++---- .../app/plugins/panel/table/transformers.ts | 73 ++++++++----------- 3 files changed, 82 insertions(+), 63 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index ec295760d49..f90dacc34c1 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -118,7 +118,7 @@ export class PrometheusDatasource { } if (activeTargets[index].format === "table") { - result.push(self.transformMetricDataToTable(response.data.data.result)); + result.push(self.transformMetricDataToTable(response.data.data.result, responseList.length, index)); } else { for (let metricData of response.data.data.result) { if (response.data.data.resultType === 'matrix') { @@ -301,7 +301,7 @@ export class PrometheusDatasource { return { target: metricLabel, datapoints: dps }; } - transformMetricDataToTable(md) { + transformMetricDataToTable(md, resultCount: number, resultIndex: number) { var table = new TableModel(); var i, j; var metricLabels = {}; @@ -326,7 +326,8 @@ export class PrometheusDatasource { metricLabels[label] = labelIndex + 1; table.columns.push({text: label}); }); - table.columns.push({text: 'Value'}); + let valueText = resultCount > 1 ? `Value #${String.fromCharCode(65 + resultIndex)}` : 'Value'; + table.columns.push({text: valueText}); // Populate rows, set value to empty string when label not present. _.each(md, function(series) { diff --git a/public/app/plugins/panel/table/specs/transformers.jest.ts b/public/app/plugins/panel/table/specs/transformers.jest.ts index 1c7fc3e7852..18b3cc213d8 100644 --- a/public/app/plugins/panel/table/specs/transformers.jest.ts +++ b/public/app/plugins/panel/table/specs/transformers.jest.ts @@ -139,7 +139,7 @@ describe('when transforming time series table', () => { { text: 'Time' }, { text: 'Label Key 1' }, { text: 'Label Key 2' }, - { text: 'Value' }, + { text: 'Value #A' }, ], rows: [ [time, 'Label Value 1', 'Label Value 2', 42], @@ -151,7 +151,7 @@ describe('when transforming time series table', () => { { text: 'Time' }, { text: 'Label Key 1' }, { text: 'Label Key 2' }, - { text: 'Value' }, + { text: 'Value #B' }, ], rows: [ [time, 'Label Value 1', 'Label Value 2', 13], @@ -163,11 +163,23 @@ describe('when transforming time series table', () => { { text: 'Time' }, { text: 'Label Key 1' }, { text: 'Label Key 2' }, - { text: 'Value' }, + { text: 'Value #C' }, ], rows: [ [time, 'Label Value 1', 'Label Value 2', 4], ], + }, + { + type: 'table', + columns: [ + { text: 'Time' }, + { text: 'Label Key 1' }, + { text: 'Label Key 2' }, + { text: 'Value #C' }, + ], + rows: [ + [time, 'Label Value 1', 'Label Value 2', 7], + ], } ]; @@ -177,7 +189,7 @@ describe('when transforming time series table', () => { columns: [ { text: 'Time' }, { text: 'Label Key 1' }, - { text: 'Value' }, + { text: 'Value #A' }, ], rows: [ [time, 'Label Value 1', 42], @@ -188,11 +200,22 @@ describe('when transforming time series table', () => { columns: [ { text: 'Time' }, { text: 'Label Key 2' }, - { text: 'Value' }, + { text: 'Value #B' }, ], rows: [ [time, 'Label Value 2', 13], ], + }, + { + type: 'table', + columns: [ + { text: 'Time' }, + { text: 'Label Key 1' }, + { text: 'Value #C' }, + ], + rows: [ + [time, 'Label Value 3', 7], + ], } ]; @@ -217,9 +240,10 @@ describe('when transforming time series table', () => { var columns = transformers[transform].getColumns(multipleQueriesDataDifferentLabels); expect(columns[0].text).toBe('Time'); expect(columns[1].text).toBe('Label Key 1'); - expect(columns[2].text).toBe('Label Key 2'); - expect(columns[3].text).toBe('Value #A'); + expect(columns[2].text).toBe('Value #A'); + expect(columns[3].text).toBe('Label Key 2'); expect(columns[4].text).toBe('Value #B'); + expect(columns[5].text).toBe('Value #C'); }); }); @@ -255,32 +279,41 @@ describe('when transforming time series table', () => { expect(table.rows[0][2]).toBe(42); }); - it ('should return 1 row for a mulitple queries with same label values', () => { + it ('should return 2 rows for a mulitple queries with same label values plus one extra row', () => { table = transformDataToTable(multipleQueriesDataSameLabels, panel); - expect(table.rows.length).toBe(1); + expect(table.rows.length).toBe(2); expect(table.rows[0][0]).toBe(time); expect(table.rows[0][1]).toBe('Label Value 1'); expect(table.rows[0][2]).toBe('Label Value 2'); expect(table.rows[0][3]).toBe(42); expect(table.rows[0][4]).toBe(13); expect(table.rows[0][5]).toBe(4); + expect(table.rows[1][0]).toBe(time); + expect(table.rows[1][1]).toBe('Label Value 1'); + expect(table.rows[1][2]).toBe('Label Value 2'); + expect(table.rows[1][3]).toBeUndefined(); + expect(table.rows[1][4]).toBeUndefined(); + expect(table.rows[1][5]).toBe(7); }); - it ('should return 2 rows for a mulitple queries with different label values', () => { + it ('should return 2 rows for mulitple queries with different label values', () => { table = transformDataToTable(multipleQueriesDataDifferentLabels, panel); expect(table.rows.length).toBe(2); + expect(table.columns.length).toBe(6); expect(table.rows[0][0]).toBe(time); expect(table.rows[0][1]).toBe('Label Value 1'); - expect(table.rows[0][2]).toBeUndefined(); - expect(table.rows[0][3]).toBe(42); - expect(table.rows[0][4]).toBeUndefined(); + expect(table.rows[0][2]).toBe(42); + expect(table.rows[0][3]).toBe('Label Value 2'); + expect(table.rows[0][4]).toBe(13); + expect(table.rows[0][5]).toBeUndefined(); expect(table.rows[1][0]).toBe(time); - expect(table.rows[1][1]).toBeUndefined(); - expect(table.rows[1][2]).toBe('Label Value 2'); + expect(table.rows[1][1]).toBe('Label Value 3'); + expect(table.rows[1][2]).toBeUndefined(); expect(table.rows[1][3]).toBeUndefined(); - expect(table.rows[1][4]).toBe(13); + expect(table.rows[1][4]).toBeUndefined(); + expect(table.rows[1][5]).toBe(7); }); }); }); diff --git a/public/app/plugins/panel/table/transformers.ts b/public/app/plugins/panel/table/transformers.ts index 5081ab785b6..08f259bb168 100644 --- a/public/app/plugins/panel/table/transformers.ts +++ b/public/app/plugins/panel/table/transformers.ts @@ -144,28 +144,18 @@ transformers['table'] = { // Track column indexes: name -> index const columnNames = {}; - // Union of all non-value columns + // Union of all columns const columns = data.reduce((acc, d, i) => { d.columns.forEach((col, j) => { const { text } = col; - if (text !== 'Value') { - if (columnNames[text] === undefined) { - columnNames[text] = acc.length; - acc.push(col); - } + if (columnNames[text] === undefined) { + columnNames[text] = acc.length; + acc.push(col); } }); return acc; }, []); - // Append one value column per data set - data.forEach((_, i) => { - // Value #A, Value #B,... - const text = `Value #${String.fromCharCode(65 + i)}`; - columnNames[text] = columns.length; - columns.push({ text }); - }); - return columns; }, transform: function(data, panel, model) { @@ -194,27 +184,15 @@ transformers['table'] = { const indexes = []; d.columns.forEach((col, j) => { const { text } = col; - if (text !== 'Value') { - if (columnNames[text] === undefined) { - columnNames[text] = acc.length; - acc.push(col); - } - indexes[j] = columnNames[text]; + if (columnNames[text] === undefined) { + columnNames[text] = acc.length; + acc.push(col); } + indexes[j] = columnNames[text]; }); columnIndexes.push(indexes); return acc; }, []); - const nonValueColumnCount = columns.length; - - // Append one value column per data set - data.forEach((_, i) => { - // Value #A, Value #B,... - const text = `Value #${String.fromCharCode(65 + i)}`; - columnNames[text] = columns.length; - columns.push({ text }); - columnIndexes[i].push(columnNames[text]); - }); model.columns = columns; @@ -231,29 +209,36 @@ transformers['table'] = { return acc; }, []); - // Merge rows that have same columns + // Merge rows that have same values for columns const mergedRows = {}; - rows = rows.reduce((acc, row, i) => { - if (!mergedRows[i]) { - let offset = i + 1; + rows = rows.reduce((acc, row, rowIndex) => { + if (!mergedRows[rowIndex]) { + let offset = rowIndex + 1; while (offset < rows.length) { - const match = _.findIndex(rows, (other, j) => { - let same = true; - for (let index = 0; index < nonValueColumnCount; index++) { - if (row[index] !== other[index]) { - same = false; + // Find next row that has the same field values unless the respective field is undefined + const match = _.findIndex(rows, (otherRow) => { + let fieldsAreTheSame = true; + let foundFieldToMatch = false; + for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) { + if (row[columnIndex] !== undefined && otherRow[columnIndex] !== undefined) { + if (row[columnIndex] !== otherRow[columnIndex]) { + fieldsAreTheSame = false; + } + } else if (row[columnIndex] === undefined || otherRow[columnIndex] === undefined) { + foundFieldToMatch = true; + } + if (!fieldsAreTheSame) { break; } } - return same; + return fieldsAreTheSame && foundFieldToMatch; }, offset); if (match > -1) { const matchedRow = rows[match]; // Merge values into current row - for (let index = nonValueColumnCount; index < columns.length; index++) { - if (row[index] === undefined && matchedRow[index] !== undefined) { - row[index] = matchedRow[index]; - break; + for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) { + if (row[columnIndex] === undefined && matchedRow[columnIndex] !== undefined) { + row[columnIndex] = matchedRow[columnIndex]; } } mergedRows[match] = matchedRow; From 05ec7541c80ffaaead518de28091d515b386a02c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 13:04:06 +0100 Subject: [PATCH 443/584] ux: dashboard settings progress --- .../app/features/annotations/editor_ctrl.ts | 15 +- .../features/annotations/partials/editor.html | 212 ++++++++---------- .../features/dashboard/settings/settings.ts | 9 +- public/app/features/templating/editor_ctrl.ts | 6 +- .../features/templating/partials/editor.html | 20 +- public/sass/_variables.scss | 2 +- public/sass/components/_empty_list_cta.scss | 11 +- public/sass/components/_navbar.scss | 3 +- 8 files changed, 121 insertions(+), 157 deletions(-) diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts index a52e241ce35..0dea22f32ad 100644 --- a/public/app/features/annotations/editor_ctrl.ts +++ b/public/app/features/annotations/editor_ctrl.ts @@ -26,7 +26,7 @@ export class AnnotationsEditorCtrl { ]; /** @ngInject */ - constructor(private $scope, private datasourceSrv) { + constructor($scope, private datasourceSrv) { $scope.ctrl = this; this.mode = 'list'; @@ -62,7 +62,6 @@ export class AnnotationsEditorCtrl { update() { this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); } setupNew() { @@ -74,28 +73,16 @@ export class AnnotationsEditorCtrl { this.annotations.push(this.currentAnnotation); this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); - this.$scope.dashboard.updateSubmenuVisibility(); } removeAnnotation(annotation) { var index = _.indexOf(this.annotations, annotation); this.annotations.splice(index, 1); - this.$scope.dashboard.updateSubmenuVisibility(); - this.$scope.broadcastRefresh(); } onColorChange(newColor) { this.currentAnnotation.iconColor = newColor; } - - annotationEnabledChange() { - this.$scope.broadcastRefresh(); - } - - annotationHiddenChanged() { - this.$scope.dashboard.updateSubmenuVisibility(); - } } coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl); diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 1cdf106ee01..b0a0f43a0ec 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,147 +1,113 @@ -

    Annotations

    +

    + Annotations + > New + > Edit +

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - No annotation queries defined +
    + +
    +
    +
    There are no custom annotation queries added yet
    + + + Add Annotation Query + +
    +
    What are Annotations?
    +

    + Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons + on all graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add annotation events + directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. +

    + Checkout the Annotations documentation for more information. +
    +
    - +
    +
    + New +
    + +
    + + + + + + + + - - + - -
    Query nameData source
    +   {{annotation.name}} +   {{annotation.name}} (Built-in) + {{annotation.datasource || 'Default'}} + - - - Edit - -
    -
    + + +
    -
    -
    -   New +
    +
    +
    General
    +
    +
    + Name + +
    +
    + Data source +
    + +
    +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
    +
    + + + + +
    + + + + +
    +
    +
    + +
    Query
    + + + + + +
    +
    + + +
    +
    +
    +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 744fcc46ca2..186d900b3a4 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -20,9 +20,9 @@ export class SettingsCtrl { ]; /** @ngInject */ - constructor($scope, private $location, private $rootScope) { + constructor(private $scope, private $location, private $rootScope) { // temp hack - $scope.dashboard = this.dashboard; + this.$scope.dashboard = this.dashboard; const params = this.$location.search(); const url = $location.path(); @@ -35,6 +35,11 @@ export class SettingsCtrl { this.viewId = params.editview; $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); + + this.$scope.$on('$destroy', () => { + this.dashboard.updateSubmenuVisibility(); + this.$rootScope.$broadcast("refresh"); + }); } onRouteUpdated() { diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index c10bc5bb5ec..63fc862eab9 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import coreModule from 'app/core/core_module'; import {variableTypes} from './variable'; @@ -45,6 +43,10 @@ export class VariableEditorCtrl { }); }; + $scope.setMode = function(mode) { + $scope.mode = mode; + }; + $scope.add = function() { if ($scope.isValid()) { variableSrv.addVariable($scope.current); diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 9013a4642d8..4e6c53eb839 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,19 +1,22 @@ -

    Variables

    -
    + +

    + Variables + > New + > Edit +

    +
    There are no template variables added yet
    - + Add variable
    -
    - What does variables do? -
    +
    What does variables do?

    Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. @@ -29,7 +32,7 @@

    - New + New
    @@ -50,7 +53,6 @@ - - @@ -50,9 +49,6 @@ {{link.type}} - @@ -130,7 +126,7 @@ - diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 6b27d38870e..11e69933800 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -39,9 +39,9 @@ export class DashLinkEditorCtrl { this.mode = 'edit'; } - addLink(type, tags) { - this.dashboard.links.push({ type: type, tags: tags, icon: 'external link' }); - this.dashboard.updateSubmenuVisibility(); + addLink(type) { + this.dashboard.links.push({ type: type, icon: 'external link' }); + //this.dashboard.updateSubmenuVisibility(); this.updated(); this.mode = 'list'; } @@ -61,7 +61,7 @@ export class DashLinkEditorCtrl { deleteLink(index) { this.dashboard.links.splice(index, 1); - this.dashboard.updateSubmenuVisibility(); + //this.dashboard.updateSubmenuVisibility(); this.updated(); } } From ff1b71bc20cc0981a38deaf6f2260c3ad6aab3f9 Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 12 Dec 2017 13:18:00 +0100 Subject: [PATCH 466/584] allow overriding dashboards from api --- pkg/api/dashboard.go | 1 + 1 file changed, 1 insertion(+) diff --git a/pkg/api/dashboard.go b/pkg/api/dashboard.go index 92d4a13d39e..4d2ed4707d9 100644 --- a/pkg/api/dashboard.go +++ b/pkg/api/dashboard.go @@ -139,6 +139,7 @@ func PostDashboard(c *middleware.Context, cmd m.SaveDashboardCommand) Response { Message: cmd.Message, OrgId: c.OrgId, UserId: c.UserId, + Overwrite: cmd.Overwrite, } dashboard, err := dashboards.GetRepository().SaveDashboard(dashItem) From edb2dcf1b0a79a4ffbe8374e48dd0c781ed737e5 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Tue, 12 Dec 2017 13:18:06 +0100 Subject: [PATCH 467/584] Extracted row matching function and added comments --- .../app/plugins/panel/table/transformers.ts | 89 ++++++++++--------- 1 file changed, 49 insertions(+), 40 deletions(-) diff --git a/public/app/plugins/panel/table/transformers.ts b/public/app/plugins/panel/table/transformers.ts index 08f259bb168..a1d49453bcb 100644 --- a/public/app/plugins/panel/table/transformers.ts +++ b/public/app/plugins/panel/table/transformers.ts @@ -145,8 +145,8 @@ transformers['table'] = { const columnNames = {}; // Union of all columns - const columns = data.reduce((acc, d, i) => { - d.columns.forEach((col, j) => { + const columns = data.reduce((acc, series) => { + series.columns.forEach(col => { const { text } = col; if (columnNames[text] === undefined) { columnNames[text] = acc.length; @@ -175,76 +175,84 @@ transformers['table'] = { return; } - // Track column indexes: name -> index + // Track column indexes of union: name -> index const columnNames = {}; - const columnIndexes = []; // Union of all non-value columns - const columns = data.reduce((acc, d, i) => { - const indexes = []; - d.columns.forEach((col, j) => { + const columnsUnion = data.reduce((acc, series) => { + series.columns.forEach(col => { const { text } = col; if (columnNames[text] === undefined) { columnNames[text] = acc.length; acc.push(col); } - indexes[j] = columnNames[text]; }); - columnIndexes.push(indexes); return acc; }, []); - model.columns = columns; + // Map old column index to union index per series, e.g., + // given columnNames {A: 0, B: 1} and + // data [{columns: [{ text: 'A' }]}, {columns: [{ text: 'B' }]}] => [[0], [1]] + const columnIndexMapper = data.map(series => + series.columns.map(col => columnNames[col.text]) + ); - // Adjust rows to new column indexes - let rows = data.reduce((acc, d, i) => { - const indexes = columnIndexes[i]; - d.rows.forEach((r, j) => { + // Flatten rows of all series and adjust new column indexes + const flattenedRows = data.reduce((acc, series, seriesIndex) => { + const mapper = columnIndexMapper[seriesIndex]; + series.rows.forEach(row => { const alteredRow = []; - indexes.forEach((to, from) => { - alteredRow[to] = r[from]; + // Shifting entries according to index mapper + mapper.forEach((to, from) => { + alteredRow[to] = row[from]; }); acc.push(alteredRow); }); return acc; }, []); + // Returns true if both rows have matching non-empty fields as well as matching + // indexes where one field is empty and the other is not + function areRowsMatching(columns, row, otherRow) { + let foundFieldToMatch = false; + for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) { + if (row[columnIndex] !== undefined && otherRow[columnIndex] !== undefined) { + if (row[columnIndex] !== otherRow[columnIndex]) { + return false; + } + } else if (row[columnIndex] === undefined || otherRow[columnIndex] === undefined) { + foundFieldToMatch = true; + } + } + return foundFieldToMatch; + } + // Merge rows that have same values for columns const mergedRows = {}; - rows = rows.reduce((acc, row, rowIndex) => { + const compactedRows = flattenedRows.reduce((acc, row, rowIndex) => { if (!mergedRows[rowIndex]) { + // Look from current row onwards let offset = rowIndex + 1; - while (offset < rows.length) { - // Find next row that has the same field values unless the respective field is undefined - const match = _.findIndex(rows, (otherRow) => { - let fieldsAreTheSame = true; - let foundFieldToMatch = false; - for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) { - if (row[columnIndex] !== undefined && otherRow[columnIndex] !== undefined) { - if (row[columnIndex] !== otherRow[columnIndex]) { - fieldsAreTheSame = false; - } - } else if (row[columnIndex] === undefined || otherRow[columnIndex] === undefined) { - foundFieldToMatch = true; - } - if (!fieldsAreTheSame) { - break; - } - } - return fieldsAreTheSame && foundFieldToMatch; - }, offset); + // More than one row can be merged into current row + while (offset < flattenedRows.length) { + // Find next row that could be merged + const match = _.findIndex(flattenedRows, + otherRow => areRowsMatching(columnsUnion, row, otherRow), + offset); if (match > -1) { - const matchedRow = rows[match]; - // Merge values into current row - for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) { + const matchedRow = flattenedRows[match]; + // Merge values from match into current row if there is a gap in the current row + for (let columnIndex = 0; columnIndex < columnsUnion.length; columnIndex++) { if (row[columnIndex] === undefined && matchedRow[columnIndex] !== undefined) { row[columnIndex] = matchedRow[columnIndex]; } } + // Dont visit this row again mergedRows[match] = matchedRow; // Keep looking for more rows to merge offset = match + 1; } else { + // No match found, stop looking break; } } @@ -253,7 +261,8 @@ transformers['table'] = { return acc; }, []); - model.rows = rows; + model.columns = columnsUnion; + model.rows = compactedRows; } }; From a00af85f36e53be6824e6c21652f45de122861cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 13:21:50 +0100 Subject: [PATCH 468/584] build: fixed unit test failure --- public/app/plugins/datasource/graphite/graphite_query.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index 824b49f8860..a1c4a889efb 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -121,7 +121,11 @@ export default class GraphiteQuery { } hasSelectMetric() { - return this.segments[this.segments.length - 1].value === 'select metric'; + if (this.segments.length > 0) { + return this.segments[this.segments.length - 1].value === 'select metric'; + } else { + return false; + } } addFunction(newFunc) { From df25c9f0fa06d0c5b9c97454141d6d1d22dbeac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 13:27:56 +0100 Subject: [PATCH 469/584] tech: updated version for react-grid item --- package.json | 2 +- public/sass/components/_dashboard_settings.scss | 2 +- yarn.lock | 10 +++------- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 59608e80403..5516ad97fd7 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "prop-types": "^15.6.0", "react": "^16.1.1", "react-dom": "^16.1.1", - "react-grid-layout": "^0.16.0", + "react-grid-layout": "^0.16.1", "react-sizeme": "^2.3.6", "remarkable": "^1.7.1", "rxjs": "^5.4.3", diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 50f157a5a15..762e1202bc5 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -37,6 +37,7 @@ font-size: $font-size-h3; padding-right: 60px; white-space: nowrap; + margin-bottom: $spacer; i { font-size: 25px; @@ -48,7 +49,6 @@ .dashboard-settings__header { font-size: $font-size-h3; - margin-bottom: 20px; } .dashboard-settings__nav-item { diff --git a/yarn.lock b/yarn.lock index 7cdb57448ef..9ce16177ee7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6447,10 +6447,6 @@ ng-annotate@^1.2.1: stringset "~0.2.1" tryor "~0.1.2" -ngreact@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/ngreact/-/ngreact-0.4.1.tgz#53d8f0db7c687c6daa340827a5ef04a903c14701" - ngtemplate-loader@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/ngtemplate-loader/-/ngtemplate-loader-2.0.1.tgz#9d7ed2e8a2363523ad7b64d74aac402d8daff3f3" @@ -7942,9 +7938,9 @@ react-dom@^16.1.1: classnames "^2.2.5" prop-types "^15.5.10" -react-grid-layout@^0.16.0: - version "0.16.0" - resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.0.tgz#f74363cd134b2f8a763224d7b6287cbb68e6de05" +react-grid-layout@^0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.1.tgz#45eb5687da2ae6912b63c1c0b79b7fb6bbd32202" dependencies: classnames "2.x" lodash.isequal "^4.0.0" From d379b501aa53c3ab70483224cd1217c14f2adc82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 13:55:32 +0100 Subject: [PATCH 470/584] ux: search look update --- public/app/features/dashboard/settings/settings.html | 2 +- public/sass/components/_dashboard_settings.scss | 1 + public/sass/components/_search.scss | 9 ++++----- public/sass/components/_switch.scss | 2 ++ 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index e78dcb74127..7de5e2dbcd1 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -23,7 +23,7 @@
    -

    +

    General

    diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 762e1202bc5..af09ca3658a 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -49,6 +49,7 @@ .dashboard-settings__header { font-size: $font-size-h3; + margin-bottom: $spacer*2; } .dashboard-settings__nav-item { diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 6c1048c5cd4..764ae61a0db 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -116,14 +116,14 @@ .search-section { background: $panel-bg; border: $panel-border; - padding: $panel-padding; + padding: 0px 10px 2px 10px; margin-bottom: 3px; border-radius: 5px; } .search-section__header { font-size: $font-size-h6; - padding: 8px 0 2px 0; + padding: 6px 0 4px 0; color: $text-color-weak; display: flex; flex-grow: 1; @@ -139,7 +139,7 @@ } .search-section__header__icon { - padding: 2px 10px; + padding: 5px 10px; width: 35px; } @@ -149,11 +149,11 @@ .search-section__header__text { flex-grow: 1; + line-height: 24px; } .search-item { @include list-item(); - @include left-brand-border(); display: flex; flex-grow: 1; @@ -162,7 +162,6 @@ padding: 0px; &:hover, &.selected { - @include left-brand-border-gradient(); background: $list-item-hover-bg; } } diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 6b81f144457..3d0da7e4579 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -104,10 +104,12 @@ .gf-form-switch--transparent { input + label { background: transparent; + border: none; } input + label::before, input + label::after { background: transparent; + border: none; } &:hover { From 9b9ac45295b7c14cf45ecc7e5ffe035c3fa2b0e7 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Dec 2017 14:05:24 +0100 Subject: [PATCH 471/584] redesigning links editor --- public/app/features/dashlinks/editor.html | 10 ++++------ public/app/features/dashlinks/editor.ts | 22 +++++++++------------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 471055bc8fc..2529f32f0b9 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -12,7 +12,7 @@
    There are no dashboard links added yet
    - + Add Dashboard Link @@ -33,7 +33,7 @@
    {{variable.query}} @@ -70,7 +72,7 @@
    -
    Variable
    +
    General
    diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index a0c52dee2ef..d031a0485f6 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -199,11 +199,11 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // 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; -$zindex-sidemenu: $zindex-navbar-fixed; // Buttons // diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss index 844c8c87866..23399d771aa 100644 --- a/public/sass/components/_empty_list_cta.scss +++ b/public/sass/components/_empty_list_cta.scss @@ -1,8 +1,13 @@ .empty-list-cta { background-color: $search-filter-box-bg; text-align: center; - padding: 2rem 2rem 1rem 2rem; + padding: 2rem; border-radius: $border-radius; + + .grafana-info-box { + max-width: 700px; + margin: 0 auto; + } } .empty-list-cta__title { @@ -14,10 +19,6 @@ margin-bottom: 50px; } -.empty-list-cta__pro-tip { - padding-bottom: 1rem; -} - .empty-list-cta__pro-tip-link { margin-left: 5px; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index b14f604f701..a86d7bf9c54 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -147,7 +147,8 @@ .sidemenu-open { .navbar { - margin-left: 15px; + padding-left: 15px; + margin-left: 0; } } From a682475152dba612898e6dee9120a9d8ad41f9de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 13:09:25 +0100 Subject: [PATCH 444/584] fix: fixed failing test --- .../EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap | 2 +- public/app/features/annotations/editor_ctrl.ts | 4 ++++ public/app/features/annotations/partials/editor.html | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap index 0598d7ecd4e..0da3d94aaa8 100644 --- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap +++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap @@ -2,7 +2,7 @@ exports[`CollorPalette renders correctly 1`] = `

    - Annotations + Annotations > New > Edit

    @@ -32,7 +32,7 @@ New
    - +
    From 61dbcfd35b372f79f2744954178f9abac6d1c048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 13:29:23 +0100 Subject: [PATCH 445/584] ux: dashboard settings progress --- .../features/annotations/partials/editor.html | 40 +++++++++---------- .../features/dashboard/dashnav/dashnav.html | 10 ++--- public/sass/components/_empty_list_cta.scss | 6 +-- public/sass/components/_navbar.scss | 12 +++++- 4 files changed, 38 insertions(+), 30 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 77d67d3986d..62175e5278f 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -7,26 +7,6 @@
    - -
    -
    -
    There are no custom annotation queries added yet
    - - - Add Annotation Query - -
    -
    What are Annotations?
    -

    - Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons - on all graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add annotation events - directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -

    - Checkout the Annotations documentation for more information. -
    -
    -
    -
    New @@ -63,6 +43,26 @@
    Query name
    + + +
    +
    +
    There are no custom annotation queries added yet
    + + + Add Annotation Query + +
    +
    What are Annotations?
    +

    + Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons + on all graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add annotation events + directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. +

    + Checkout the Annotations documentation for more information. +
    +
    +
    diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index b5e151bf966..03453611036 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -27,23 +27,23 @@ - - - - -
    diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss index 23399d771aa..dd50f3a3b8b 100644 --- a/public/sass/components/_empty_list_cta.scss +++ b/public/sass/components/_empty_list_cta.scss @@ -1,7 +1,7 @@ .empty-list-cta { background-color: $search-filter-box-bg; text-align: center; - padding: 2rem; + padding: $spacer*2; border-radius: $border-radius; .grafana-info-box { @@ -11,12 +11,12 @@ } .empty-list-cta__title { - padding-bottom: 30px; + padding-bottom: $spacer*3; font-style: italic; } .empty-list-cta__button { - margin-bottom: 50px; + margin-bottom: $spacer*3; } .empty-list-cta__pro-tip-link { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index a86d7bf9c54..1f8e2419197 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -23,7 +23,10 @@ @include navbar-alt-look(); } - .navbar-buttons--actions, + .navbar-button--add-panel, + .navbar-button--star, + .navbar-button--share, + .navbar-button--settings, .navbar-page-btn .fa-caret-down, .gf-timepicker-nav { display: none; @@ -39,7 +42,11 @@ @include navbar-alt-look(); } - .navbar-buttons--actions { + .navbar-button--add-panel, + .navbar-button--star, + .navbar-button--save, + .navbar-button--settings, + .navbar-page-btn .fa-caret-down { display: none; } @@ -90,6 +97,7 @@ &--close { display: none; + margin-right: 0; } } From 7f597283e8a79d623a854c1daf463d36b347f6e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 13:47:04 +0100 Subject: [PATCH 446/584] ux: dashboard settings progress --- .../app/features/dashboard/dashboard_ctrl.ts | 6 - .../app/features/dashboard/dashnav/dashnav.ts | 12 -- .../features/dashboard/partials/settings.html | 3 +- .../features/dashboard/settings/settings.html | 4 + .../features/dashboard/settings/settings.ts | 11 +- public/app/features/dashlinks/editor.html | 117 +++++++++--------- 6 files changed, 71 insertions(+), 82 deletions(-) diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 2c9d028ddf8..2909c55bad5 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -122,12 +122,6 @@ export class DashboardCtrl implements PanelContainer { this.$rootScope.$broadcast("refresh"); } - onFolderChange(folder) { - this.dashboard.folderId = folder.id; - this.dashboard.meta.folderId = folder.id; - this.dashboard.meta.folderTitle= folder.title; - } - getPanelContainer() { return this; } diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 837d0d76537..284a913401d 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -131,18 +131,6 @@ export class DashNavCtrl { return this.dashboardSrv.showSaveAsModal(); } - viewJson() { - var clone = this.dashboard.getSaveModelClone(); - - this.$rootScope.appEvent('show-json-editor', { - object: clone, - }); - } - - onFolderChange(folderId) { - this.dashboard.folderId = folderId; - } - showSearch() { this.$rootScope.appEvent('show-dash-search'); } diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 2295ff2713a..4285c2248ab 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -56,8 +56,7 @@
    - - +
    diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 465e7976d99..382f2059fea 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -62,3 +62,7 @@
    + +
    + +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 186d900b3a4..60c886e89e5 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -21,8 +21,9 @@ export class SettingsCtrl { /** @ngInject */ constructor(private $scope, private $location, private $rootScope) { - // temp hack - this.$scope.dashboard = this.dashboard; + // temp hack for annotations and variables editors + // that rely on inherited scope + $scope.dashboard = this.dashboard; const params = this.$location.search(); const url = $location.path(); @@ -56,6 +57,12 @@ export class SettingsCtrl { }); }); } + + onFolderChange(folder) { + this.dashboard.folderId = folder.id; + this.dashboard.meta.folderId = folder.id; + this.dashboard.meta.folderTitle= folder.title; + } } export function dashboardSettings() { diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 11dfdf74c1f..155aa78a6fe 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -1,80 +1,77 @@ -
    -
    Links and Dash Navigation
    +

    + Dashboard Links +

    -
    - -
    -
    +
    +
    +
    +
    + Type +
    + +
    +
    +
    + With tags + +
    + +
    + Title + +
    +
    - Type -
    - -
    +
  • Url
    • +
    -
    - With tags - -
    - -
    + +
    Title - +
    -
    -
    -
  • Url
    • - -
    -
    - Title - -
    +
    + Tooltip + +
    -
    - Tooltip - -
    - -
    - Icon -
    - -
    +
    + Icon +
    +
    +
    -
    -
    -
    - Include -
    -
    -
    - - - +
    +
    +
    + Include
    +
    + + + +
    +
    -
    -
    - -
    -
    - -
    -
    - -
    +
    +
    + +
    +
    + +
    +
    +
    - - From c4b759fe6d6c9d0218a5bc6c20a25c3126b3099f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 15:04:48 +0100 Subject: [PATCH 447/584] ux: dashboard settings progress --- .../features/dashboard/history/history.html | 242 ++++++++---------- .../partials/addAnnotationModal.html | 65 ----- .../features/dashboard/partials/settings.html | 64 ----- .../features/dashboard/settings/settings.html | 12 + .../features/dashboard/settings/settings.ts | 13 +- .../features/templating/partials/editor.html | 2 +- 6 files changed, 130 insertions(+), 268 deletions(-) delete mode 100644 public/app/features/dashboard/partials/addAnnotationModal.html delete mode 100644 public/app/features/dashboard/partials/settings.html diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html index 7968f1162c5..8ccf6e5b695 100644 --- a/public/app/features/dashboard/history/history.html +++ b/public/app/features/dashboard/history/history.html @@ -1,146 +1,122 @@ -
    -

    - Version history -

    +

    + Version History + + > Comparing {{ctrl.baseInfo.version}} + + {{ctrl.newInfo.version}} + (Latest) + +

    - - - +
    +
    +
    -
    +
    +
    + + Fetching history list… +
    -
    -
    - - Fetching history list… -
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    VersionDateUpdated ByNotes
    + + + {{revision.version}}{{revision.createdDateString}}{{revision.createdBy}}{{revision.message}} + +   Restore + + +   Latest + +
    -
    -
    - - - - - - - - - - - - - - - - - - - - - -
    VersionDateUpdated ByNotes
    - - - {{revision.version}}{{revision.createdDateString}}{{revision.createdBy}}{{revision.message}} - -   Restore - - -   Latest - -
    - -
    - - Fetching more entries… -
    - -
    -
    - - -
    -
    -
    -
    -
    - -
    - - -
    -
    +
    - Fetching changes… + Fetching more entries…
    -
    - -   Restore to version {{ctrl.baseInfo.version}} - -

    - Comparing Version {{ctrl.baseInfo.version}} - - Version {{ctrl.newInfo.version}} - (Latest) -

    -
    -

    - Version {{ctrl.newInfo.version}} updated by - {{ctrl.newInfo.createdBy}} - {{ctrl.newInfo.ageString}} - - {{ctrl.newInfo.message}} -

    -

    - Version {{ctrl.baseInfo.version}} updated by - {{ctrl.baseInfo.createdBy}} - {{ctrl.baseInfo.ageString}} - - {{ctrl.baseInfo.message}} -

    -
    -
    -
    -
    +
    +
    +
    + +
    +
    + + Fetching changes… +
    + +
    + +
    +

    + Version {{ctrl.newInfo.version}} updated by + {{ctrl.newInfo.createdBy}} + {{ctrl.newInfo.ageString}} + - {{ctrl.newInfo.message}} +

    +

    + Version {{ctrl.baseInfo.version}} updated by + {{ctrl.baseInfo.createdBy}} + {{ctrl.baseInfo.ageString}} + - {{ctrl.baseInfo.message}} +

    +
    + +
    +
    +
    + +
    + +
    + +
    +
    +
    diff --git a/public/app/features/dashboard/partials/addAnnotationModal.html b/public/app/features/dashboard/partials/addAnnotationModal.html deleted file mode 100644 index f55f888375f..00000000000 --- a/public/app/features/dashboard/partials/addAnnotationModal.html +++ /dev/null @@ -1,65 +0,0 @@ -
    - -
    -

    - Add Annotation -

    - - - - -
    - - -
    - -
    -
    -
    diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html deleted file mode 100644 index 4285c2248ab..00000000000 --- a/public/app/features/dashboard/partials/settings.html +++ /dev/null @@ -1,64 +0,0 @@ -

    General

    - -
    -
    - - -
    -
    - - -
    -
    - - - -
    - - -
    - -
    -
    Options
    -
    -
    - -
    - -
    -
    - - - - -
    -
    - -
    -
    Panel Options
    -
    - -
    - -
    -
    -
    - - -
    - - - - - diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 382f2059fea..e594c7c7563 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -66,3 +66,15 @@
    + +
    + +
    + +
    +

    View JSON

    + +
    + +
    +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 60c886e89e5..10dd857e255 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -7,6 +7,7 @@ export class SettingsCtrl { dashboard: DashboardModel; isOpen: boolean; viewId: string; + json: string; sections: any[] = [ {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, @@ -31,21 +32,23 @@ export class SettingsCtrl { for (let section of this.sections) { const sectionParams = _.defaults({editview: section.id}, params); section.url = url + '?' + $.param(sectionParams); - console.log(section.url); } - this.viewId = params.editview; - $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); - this.$scope.$on('$destroy', () => { this.dashboard.updateSubmenuVisibility(); this.$rootScope.$broadcast("refresh"); }); + + this.onRouteUpdated(); + $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); } onRouteUpdated() { - console.log('settings route updated'); this.viewId = this.$location.search().editview; + + if (this.viewId) { + this.json = JSON.stringify(this.dashboard.getSaveModelClone(), null, 2); + } } hideSettings() { diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 4e6c53eb839..424023d6054 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -10,7 +10,7 @@
    -
    There are no template variables added yet
    +
    There are no variables added yet
    Add variable From 008b9bb3e92df492928dec8150df72a2c86def9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 16:28:57 +0100 Subject: [PATCH 448/584] ux: dashboard settings work progress --- public/app/features/dashboard/all.ts | 2 +- .../features/dashboard/dashboard_save_as.ts | 81 ++++++++++++++++ .../app/features/dashboard/dashnav/dashnav.ts | 54 ----------- .../features/dashboard/history/history.html | 26 +++-- .../app/features/dashboard/save_as_modal.ts | 95 ------------------- .../features/dashboard/settings/settings.html | 26 +++++ .../features/dashboard/settings/settings.ts | 31 +++++- ...odal.jest.ts => dashboard_save_as.jest.ts} | 4 +- public/app/features/panel/panel_ctrl.ts | 15 ++- 9 files changed, 161 insertions(+), 173 deletions(-) create mode 100644 public/app/features/dashboard/dashboard_save_as.ts delete mode 100644 public/app/features/dashboard/save_as_modal.ts rename public/app/features/dashboard/specs/{save_as_modal.jest.ts => dashboard_save_as.jest.ts} (92%) diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index 4c7e6058984..eb61ca6aa11 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -4,7 +4,7 @@ import './history/history'; import './dashboardLoaderSrv'; import './dashnav/dashnav'; import './submenu/submenu'; -import './save_as_modal'; +import './dashboard_save_as'; import './save_modal'; import './shareModalCtrl'; import './shareSnapshotCtrl'; diff --git a/public/app/features/dashboard/dashboard_save_as.ts b/public/app/features/dashboard/dashboard_save_as.ts new file mode 100644 index 00000000000..5ce487587e4 --- /dev/null +++ b/public/app/features/dashboard/dashboard_save_as.ts @@ -0,0 +1,81 @@ +import coreModule from 'app/core/core_module'; + +const template = ` +

    Save As

    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    + +`; + +export class SaveDashboardAsCtrl { + clone: any; + folderId: any; + dismiss: () => void; + + /** @ngInject */ + constructor(private dashboardSrv) { + var dashboard = this.dashboardSrv.getCurrent(); + this.clone = dashboard.getSaveModelClone(); + this.clone.id = null; + this.clone.title += ' Copy'; + this.clone.editable = true; + this.clone.hideControls = false; + this.folderId = dashboard.folderId; + + // remove alerts if source dashboard is already persisted + // do not want to create alert dupes + if (dashboard.id > 0) { + this.clone.panels.forEach(panel => { + if (panel.type === "graph" && panel.alert) { + delete panel.thresholds; + } + delete panel.alert; + }); + } + + delete this.clone.autoUpdate; + } + + save() { + return this.dashboardSrv.save(this.clone).then(this.dismiss); + } + + keyDown(evt) { + if (evt.keyCode === 13) { + this.save(); + } + } + + onFolderChange(folder) { + this.clone.folderId = folder.id; + } +} + +export function saveDashboardAsDirective() { + return { + restrict: 'E', + template: template, + controller: SaveDashboardAsCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: {} + }; +} + +coreModule.directive('saveDashboardAs', saveDashboardAsDirective); diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 284a913401d..aed803efb9a 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -1,4 +1,3 @@ -import _ from 'lodash'; import moment from 'moment'; import angular from 'angular'; import {appEvents, NavModel} from 'app/core/core'; @@ -15,13 +14,11 @@ export class DashNavCtrl { private $rootScope, private dashboardSrv, private $location, - private backendSrv, public playlistSrv, navModelSrv) { this.navModel = navModelSrv.getDashboardNav(this.dashboard, this); appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope); - appEvents.on('delete-dashboard', this.deleteDashboard.bind(this), $scope); if (this.dashboard.meta.isSnapshot) { var meta = this.dashboard.meta; @@ -76,61 +73,10 @@ export class DashNavCtrl { angular.element(evt.currentTarget).tooltip('hide'); } - makeEditable() { - this.dashboard.editable = true; - - return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => { - // force refresh whole page - window.location.href = window.location.href; - }); - } - - exitFullscreen() { - this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false}); - } - saveDashboard() { return this.dashboardSrv.saveDashboard(); } - deleteDashboard() { - var confirmText = ''; - var text2 = this.dashboard.title; - - const alerts = _.sumBy(this.dashboard.panels, panel => { - return panel.alert ? 1 : 0; - }); - - if (alerts > 0) { - confirmText = 'DELETE'; - text2 = `This dashboard contains ${alerts} alerts. Deleting this dashboard will also delete those alerts`; - } - - appEvents.emit('confirm-modal', { - title: 'Delete', - text: 'Do you want to delete this dashboard?', - text2: text2, - icon: 'fa-trash', - confirmText: confirmText, - yesText: 'Delete', - onConfirm: () => { - this.dashboard.meta.canSave = false; - this.deleteDashboardConfirmed(); - } - }); - } - - deleteDashboardConfirmed() { - this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { - appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); - this.$location.url('/'); - }); - } - - saveDashboardAs() { - return this.dashboardSrv.showSaveAsModal(); - } - showSearch() { this.$rootScope.appEvent('show-dash-search'); } diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html index 8ccf6e5b695..c79853e5613 100644 --- a/public/app/features/dashboard/history/history.html +++ b/public/app/features/dashboard/history/history.html @@ -8,18 +8,6 @@ -
    -
    - -
    -
    @@ -75,6 +63,14 @@ ng-disabled="ctrl.isLastPage()"> Show more versions +
    @@ -89,9 +85,9 @@
    diff --git a/public/app/features/dashboard/save_as_modal.ts b/public/app/features/dashboard/save_as_modal.ts deleted file mode 100644 index 643d6a36f67..00000000000 --- a/public/app/features/dashboard/save_as_modal.ts +++ /dev/null @@ -1,95 +0,0 @@ -/// - -import coreModule from 'app/core/core_module'; - -const template = ` -
    -
    -

    - - Save As... -

    - -     - - -
    - -
    -
    -
    - - -
    -
    - - -
    -
    - -
    - - Cancel -
    -
    -
    -`; - -export class SaveDashboardAsModalCtrl { - clone: any; - folderId: any; - dismiss: () => void; - - /** @ngInject */ - constructor(private dashboardSrv) { - var dashboard = this.dashboardSrv.getCurrent(); - this.clone = dashboard.getSaveModelClone(); - this.clone.id = null; - this.clone.title += ' Copy'; - this.clone.editable = true; - this.clone.hideControls = false; - this.folderId = dashboard.folderId; - - // remove alerts if source dashboard is already persisted - // do not want to create alert dupes - if (dashboard.id > 0) { - this.clone.panels.forEach(panel => { - if (panel.type === "graph" && panel.alert) { - delete panel.thresholds; - } - delete panel.alert; - }); - } - - delete this.clone.autoUpdate; - } - - save() { - return this.dashboardSrv.save(this.clone).then(this.dismiss); - } - - keyDown(evt) { - if (evt.keyCode === 13) { - this.save(); - } - } - - onFolderChange(folder) { - this.clone.folderId = folder.id; - } -} - -export function saveDashboardAsDirective() { - return { - restrict: 'E', - template: template, - controller: SaveDashboardAsModalCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: {dismiss: "&"} - }; -} - -coreModule.directive('saveDashboardAsModal', saveDashboardAsDirective); diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index e594c7c7563..4727e424214 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -78,3 +78,29 @@
    + +
    + +
    + +
    +

    Delete dashboard

    + +
    +
    +
    This dashboard contains {{ctrl.alertCount}} alerts. Deleting this dashboard will also delete those alerts
    + +
    + + +
    + +
    +
    You cannot delete this dashboard
    +
    + +
    diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 10dd857e255..96aadd0c690 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -1,4 +1,4 @@ -import {coreModule} from 'app/core/core'; +import {coreModule, appEvents} from 'app/core/core'; import {DashboardModel} from '../dashboard_model'; import $ from 'jquery'; import _ from 'lodash'; @@ -8,6 +8,9 @@ export class SettingsCtrl { isOpen: boolean; viewId: string; json: string; + alertCount: number; + confirmValid: boolean; + confirmText: string; sections: any[] = [ {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, @@ -21,7 +24,7 @@ export class SettingsCtrl { ]; /** @ngInject */ - constructor(private $scope, private $location, private $rootScope) { + constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) { // temp hack for annotations and variables editors // that rely on inherited scope $scope.dashboard = this.dashboard; @@ -39,6 +42,10 @@ export class SettingsCtrl { this.$rootScope.$broadcast("refresh"); }); + this.alertCount = _.sumBy(this.dashboard.panels, panel => { + return panel.alert ? 1 : 0; + }); + this.onRouteUpdated(); $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); } @@ -61,6 +68,26 @@ export class SettingsCtrl { }); } + makeEditable() { + this.dashboard.editable = true; + + return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => { + // force refresh whole page + window.location.href = window.location.href; + }); + } + + confirmTextChanged() { + this.confirmValid = this.confirmText === "DELETE"; + } + + deleteDashboard() { + this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { + appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); + this.$location.url('/'); + }); + } + onFolderChange(folder) { this.dashboard.folderId = folder.id; this.dashboard.meta.folderId = folder.id; diff --git a/public/app/features/dashboard/specs/save_as_modal.jest.ts b/public/app/features/dashboard/specs/dashboard_save_as.jest.ts similarity index 92% rename from public/app/features/dashboard/specs/save_as_modal.jest.ts rename to public/app/features/dashboard/specs/dashboard_save_as.jest.ts index b2ab77f2255..21d0fafd6ae 100644 --- a/public/app/features/dashboard/specs/save_as_modal.jest.ts +++ b/public/app/features/dashboard/specs/dashboard_save_as.jest.ts @@ -1,4 +1,4 @@ -import { SaveDashboardAsModalCtrl } from '../save_as_modal'; +import { SaveDashboardAsCtrl } from '../dashboard_save_as'; import { describe, it, expect } from 'test/lib/common'; describe('saving dashboard as', () => { @@ -21,7 +21,7 @@ describe('saving dashboard as', () => { }, }; - var ctrl = new SaveDashboardAsModalCtrl(mockDashboardSrv); + var ctrl = new SaveDashboardAsCtrl(mockDashboardSrv); var ctx: any = { clone: ctrl.clone, ctrl: ctrl, diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index ab74a006fce..4655ff19282 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -134,20 +134,27 @@ export class PanelCtrl { getMenu() { let menu = []; menu.push({text: 'View', click: 'ctrl.viewPanel();', icon: "fa fa-fw fa-eye", shortcut: "v"}); - menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"}); + + if (this.dashboard.meta.canEdit) { + menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"}); + } + menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"}); let extendedMenu = this.getExtendedMenu(); menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu}); - menu.push({divider: true, role: 'Editor'}); - menu.push({text: 'Remove', click: 'ctrl.removePanel();', role: 'Editor', icon: "fa fa-fw fa-trash", shortcut: "p r"}); + if (this.dashboard.meta.canEdit) { + menu.push({divider: true, role: 'Editor'}); + menu.push({text: 'Remove', click: 'ctrl.removePanel();', role: 'Editor', icon: "fa fa-fw fa-trash", shortcut: "p r"}); + } + return menu; } getExtendedMenu() { let menu = []; - if (!this.fullscreen) { + if (!this.fullscreen && this.dashboard.meta.canEdit) { menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); } menu.push({text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();' }); From f77d34f7c969a68c56fbb5e0b058cb0e3620003f Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 11 Dec 2017 16:31:50 +0100 Subject: [PATCH 449/584] ux: wip - Push pixels for new login, remove inline styling, change so we use media queries using min-width instead of max-width and make sure it looks ok across all screen sizes (#9879) --- public/app/partials/login.html | 44 +++----- public/sass/_variables.scss | 2 + public/sass/components/_buttons.scss | 6 +- public/sass/pages/_login.scss | 154 ++++++++++++++++++--------- 4 files changed, 126 insertions(+), 80 deletions(-) diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 0ce9fc7c0f4..37950460a26 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -1,40 +1,30 @@ -
    TypeTags
    - {{link.tags}} -
    @@ -126,8 +126,6 @@ - - + diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 11e69933800..56bab85a318 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -30,26 +30,22 @@ export class DashLinkEditorCtrl { this.mode = 'list'; } - addLinkMode() { - this.mode = 'new'; - } - - editLinkMode(index) { - this.currentLink = index; - this.mode = 'edit'; - } - - addLink(type) { - this.dashboard.links.push({ type: type, icon: 'external link' }); - //this.dashboard.updateSubmenuVisibility(); + addLink() { + this.dashboard.links.push({ type: 'dashboard', icon: 'external link' }); + this.dashboard.updateSubmenuVisibility(); this.updated(); - this.mode = 'list'; + this.mode = 'new'; } editLink(index) { } + saveLink() { + this.updated(); + this.backToList(); + } + moveLink(index, dir) { _.move(this.dashboard.links, index, index+dir); this.updated(); From 01e90536255aee6ab6cd25a6d6cc7ed7b4eda2d4 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Tue, 12 Dec 2017 15:00:04 +0100 Subject: [PATCH 472/584] ux: Update ui of login buttons via third parties and add link to sign up page (#9879) --- public/app/partials/login.html | 16 +++++---- public/sass/_variables.scss | 22 ++++++++++++ public/sass/components/_buttons.scss | 50 ++++++++++++++++++++++++++++ public/sass/pages/_login.scss | 25 +------------- 4 files changed, 83 insertions(+), 30 deletions(-) diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 37950460a26..29988eb8f05 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -1,7 +1,7 @@
    - + Dashboard - + Folder - + Find dashboards on Grafana.com
    diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index ad0aa3e6b71..324654b9815 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -13,9 +13,10 @@
     
    - - + + +
    @@ -44,4 +45,5 @@
    - \ No newline at end of file + + diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 764ae61a0db..6fae1889c24 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -83,11 +83,17 @@ margin-bottom: $spacer * 1.5; } -.search-filter-box-item { +.search-filter-box-link { display:block; margin-bottom: 16px; - i { + + &:last-child { + margin-bottom: 0; + } + + i, img { font-size: 20px; + margin-right: 5px; } } @@ -116,31 +122,27 @@ .search-section { background: $panel-bg; border: $panel-border; - padding: 0px 10px 2px 10px; + padding: 0px 4px 4px 4px; margin-bottom: 3px; border-radius: 5px; } .search-section__header { font-size: $font-size-h6; - padding: 6px 0 4px 0; + padding: 7px 4px 3px 0; color: $text-color-weak; display: flex; flex-grow: 1; &:hover, &.selected { - color: $link-hover-color; - - .search-section__header__toggle { - background: $tight-form-func-bg; - color: $link-hover-color; - } + color: $text-color; } } .search-section__header__icon { - padding: 5px 10px; - width: 35px; + padding: 5px 0px; + width: 43px; + text-align: center; } .search-section__header__toggle { From cfd755eb9389a398fde8261b6e21cd0de80ca644 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 15:19:59 +0100 Subject: [PATCH 474/584] updated new dashboard folder --- .../features/dashboard/create_folder_ctrl.ts | 2 +- .../dashboard/partials/create_folder.html | 68 +++++++++---------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/public/app/features/dashboard/create_folder_ctrl.ts b/public/app/features/dashboard/create_folder_ctrl.ts index f194dabbf1e..69d03e21b5e 100644 --- a/public/app/features/dashboard/create_folder_ctrl.ts +++ b/public/app/features/dashboard/create_folder_ctrl.ts @@ -7,7 +7,7 @@ export class CreateFolderCtrl { titleTouched = false; constructor(private backendSrv, private $location, navModelSrv) { - this.navModel = navModelSrv.getNav('create', 'folder'); + this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0); } create() { diff --git a/public/app/features/dashboard/partials/create_folder.html b/public/app/features/dashboard/partials/create_folder.html index ae5fcc126e8..22dbaab1419 100644 --- a/public/app/features/dashboard/partials/create_folder.html +++ b/public/app/features/dashboard/partials/create_folder.html @@ -2,42 +2,42 @@
    -
    -
    -
    -
    - - - -
    -
    +

    New Dashboard Folder

    -
    -
    - -
    -
    + +
    +
    + + + +
    +
    -
    -
    - -
    -
    -
    +
    +
    + +
    +
    -
    - -
    - +
    +
    + +
    +
    + +
    + +
    +
    From de91d68402b4b9e912effc8d7f4488a8f12a8b52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 15:28:41 +0100 Subject: [PATCH 475/584] fix: don't detect graphite version before it's saved --- public/app/features/plugins/ds_edit_ctrl.ts | 2 -- public/app/plugins/datasource/graphite/config_ctrl.ts | 4 ++++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 46e787738e5..24911b7f103 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import config from 'app/core/config'; diff --git a/public/app/plugins/datasource/graphite/config_ctrl.ts b/public/app/plugins/datasource/graphite/config_ctrl.ts index 595584691a2..232599f8988 100644 --- a/public/app/plugins/datasource/graphite/config_ctrl.ts +++ b/public/app/plugins/datasource/graphite/config_ctrl.ts @@ -15,6 +15,10 @@ export class GraphiteConfigCtrl { } autoDetectGraphiteVersion() { + if (!this.current.id) { + return; + } + this.datasourceSrv.loadDatasource(this.current.name) .then((ds) => { return ds.getVersion(); From 89db9cc97614082076ecce647c47ef6c67da2647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Dec 2017 16:15:24 +0100 Subject: [PATCH 476/584] fix: fixed dashboard api tests --- pkg/api/dashboard_test.go | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/pkg/api/dashboard_test.go b/pkg/api/dashboard_test.go index cd27639c4e4..84ac01bce9a 100644 --- a/pkg/api/dashboard_test.go +++ b/pkg/api/dashboard_test.go @@ -14,10 +14,23 @@ import ( "github.com/grafana/grafana/pkg/middleware" m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/alerting" + "github.com/grafana/grafana/pkg/services/dashboards" . "github.com/smartystreets/goconvey/convey" ) +type fakeDashboardRepo struct { + inserted []*dashboards.SaveDashboardItem + getDashboard []*m.Dashboard +} + +func (repo *fakeDashboardRepo) SaveDashboard(json *dashboards.SaveDashboardItem) (*m.Dashboard, error) { + repo.inserted = append(repo.inserted, json) + return json.Dashboard, nil +} + +var fakeRepo *fakeDashboardRepo + func TestDashboardApiEndpoint(t *testing.T) { Convey("Given a dashboard with a parent folder which does not have an acl", t, func() { fakeDash := m.NewDashboard("Child dash") @@ -500,6 +513,9 @@ func postDashboardScenario(desc string, url string, routePattern string, role m. return PostDashboard(c, cmd) }) + fakeRepo = &fakeDashboardRepo{} + dashboards.SetRepository(fakeRepo) + sc.m.Post(routePattern, sc.defaultHandler) fn(sc) From 86244146575f126ed8cad19cee60d59ed80b713a Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Tue, 12 Dec 2017 16:29:45 +0100 Subject: [PATCH 477/584] ux: Use the previously renamed classes (#9879) --- public/app/features/org/partials/select_org.html | 4 ++-- public/app/partials/reset_password.html | 6 +++--- public/app/partials/signup_invited.html | 6 +++--- public/app/partials/signup_step2.html | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/public/app/features/org/partials/select_org.html b/public/app/features/org/partials/select_org.html index 116bca66286..43fc555bf42 100644 --- a/public/app/features/org/partials/select_org.html +++ b/public/app/features/org/partials/select_org.html @@ -3,9 +3,9 @@ -
    + - + @@ -66,66 +76,65 @@ -
    -
    -
    +
    +
    Type
    - +
    -
    +
    With tags - +
    - -
    + +
    Title - +
    -
    +
  • Url
    • - +
    Title - +
    Tooltip - +
    Icon
    - +
    -
    +
    +
    Include
    -
    - Include -
    -
    -
    - - - + + +
    - + +
    diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 56bab85a318..19969d7c7fc 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -1,15 +1,15 @@ -import angular from 'angular'; -import _ from 'lodash'; -import appEvents from 'app/core/app_events'; +import angular from "angular"; +import _ from "lodash"; +import appEvents from "app/core/app_events"; export var iconMap = { "external link": "fa-external-link", - "dashboard": "fa-th-large", - "question": "fa-question", - "info": "fa-info", - "bolt": "fa-bolt", - "doc": "fa-file-text-o", - "cloud": "fa-cloud", + dashboard: "fa-th-large", + question: "fa-question", + info: "fa-info", + bolt: "fa-bolt", + doc: "fa-file-text-o", + cloud: "fa-cloud" }; export class DashLinkEditorCtrl { @@ -17,62 +17,65 @@ export class DashLinkEditorCtrl { iconMap: any; mode: any; link: any; - currentLink: any; /** @ngInject */ constructor($scope, $rootScope) { this.iconMap = iconMap; this.dashboard.links = this.dashboard.links || []; - this.mode = 'list'; + this.mode = "list"; + + $scope.$on("$destroy", () => { + $rootScope.appEvent("dash-links-updated"); + }); } backToList() { - this.mode = 'list'; + this.mode = "list"; + } + + setupNew() { + this.mode = "new"; + this.link = { type: "dashboards", icon: "external link" }; } addLink() { - this.dashboard.links.push({ type: 'dashboard', icon: 'external link' }); - this.dashboard.updateSubmenuVisibility(); - this.updated(); - this.mode = 'new'; + this.dashboard.links.push(this.link); + this.mode = "list"; } - editLink(index) { - + editLink(link) { + this.link = link; + this.mode = "edit"; + console.log(this.link); } saveLink() { - this.updated(); this.backToList(); } moveLink(index, dir) { - _.move(this.dashboard.links, index, index+dir); - this.updated(); - } - - updated() { - appEvents.emit('dash-links-updated'); + _.move(this.dashboard.links, index, index + dir); } deleteLink(index) { this.dashboard.links.splice(index, 1); - //this.dashboard.updateSubmenuVisibility(); - this.updated(); + this.dashboard.updateSubmenuVisibility(); } } function dashLinksEditor() { return { - restrict: 'E', + restrict: "E", controller: DashLinkEditorCtrl, - templateUrl: 'public/app/features/dashlinks/editor.html', + templateUrl: "public/app/features/dashlinks/editor.html", bindToController: true, - controllerAs: 'ctrl', + controllerAs: "ctrl", scope: { dashboard: "=" } }; } -angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor); +angular + .module("grafana.directives") + .directive("dashLinksEditor", dashLinksEditor); diff --git a/public/app/features/dashlinks/module.ts b/public/app/features/dashlinks/module.ts index 371087c4069..09ff6d76c7e 100644 --- a/public/app/features/dashlinks/module.ts +++ b/public/app/features/dashlinks/module.ts @@ -1,44 +1,50 @@ -import angular from 'angular'; -import _ from 'lodash'; -import {iconMap} from './editor'; +import angular from "angular"; +import _ from "lodash"; +import { iconMap } from "./editor"; function dashLinksContainer() { return { scope: { links: "=" }, - restrict: 'E', - controller: 'DashLinksContainerCtrl', - template: '', - link: function() { } + restrict: "E", + controller: "DashLinksContainerCtrl", + template: + '', + link: function() {} }; } /** @ngInject */ function dashLink($compile, linkSrv) { return { - restrict: 'E', + restrict: "E", link: function(scope, elem) { var link = scope.link; - var template = '
    ' + + var template = + '
    ' + '' + - ' '; + (link.asDropdown + ? ' ng-click="fillDropdown(link)" data-toggle="dropdown"' + : "") + + ">" + + " "; if (link.asDropdown) { - template += '"; } - template += '
    '; + template += "
    "; elem.html(template); $compile(elem.contents())(scope); - var anchor = elem.find('a'); - var icon = elem.find('i'); - var span = elem.find('span'); + var anchor = elem.find("a"); + var icon = elem.find("i"); + var span = elem.find("span"); function update() { var linkInfo = linkSrv.getAnchorInfo(link); @@ -47,17 +53,19 @@ function dashLink($compile, linkSrv) { } // tooltip - elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' }); - icon.attr('class', 'fa fa-fw ' + scope.link.icon); - anchor.attr('target', scope.link.target); + elem + .find("a") + .tooltip({ title: scope.link.tooltip, html: true, container: "body" }); + icon.attr("class", "fa fa-fw " + scope.link.icon); + anchor.attr("target", scope.link.target); // fix for menus on the far right if (link.asDropdown && scope.$last) { - elem.find('.dropdown-menu').addClass('pull-right'); + elem.find(".dropdown-menu").addClass("pull-right"); } update(); - scope.$on('refresh', update); + scope.$on("refresh", update); } }; } @@ -68,36 +76,40 @@ export class DashLinksContainerCtrl { var currentDashId = dashboardSrv.getCurrent().id; function buildLinks(linkDef) { - if (linkDef.type === 'dashboards') { + if (linkDef.type === "dashboards") { if (!linkDef.tags) { - console.log('Dashboard link missing tag'); + console.log("Dashboard link missing tag"); return $q.when([]); } if (linkDef.asDropdown) { - return $q.when([{ - title: linkDef.title, - tags: linkDef.tags, - keepTime: linkDef.keepTime, - includeVars: linkDef.includeVars, - icon: "fa fa-bars", - asDropdown: true - }]); + return $q.when([ + { + title: linkDef.title, + tags: linkDef.tags, + keepTime: linkDef.keepTime, + includeVars: linkDef.includeVars, + icon: "fa fa-bars", + asDropdown: true + } + ]); } return $scope.searchDashboards(linkDef, 7); } - if (linkDef.type === 'link') { - return $q.when([{ - url: linkDef.url, - title: linkDef.title, - icon: iconMap[linkDef.icon], - tooltip: linkDef.tooltip, - target: linkDef.targetBlank ? "_blank" : "_self", - keepTime: linkDef.keepTime, - includeVars: linkDef.includeVars, - }]); + if (linkDef.type === "link") { + return $q.when([ + { + url: linkDef.url, + title: linkDef.title, + icon: iconMap[linkDef.icon], + tooltip: linkDef.tooltip, + target: linkDef.targetBlank ? "_blank" : "_self", + keepTime: linkDef.keepTime, + includeVars: linkDef.includeVars + } + ]); } return $q.when([]); @@ -112,21 +124,27 @@ export class DashLinksContainerCtrl { } $scope.searchDashboards = function(link, limit) { - return backendSrv.search({tag: link.tags, limit: limit}).then(function(results) { - return _.reduce(results, function(memo, dash) { - // do not add current dashboard - if (dash.id !== currentDashId) { - memo.push({ - title: dash.title, - url: 'dashboard/' + dash.uri, - icon: 'fa fa-th-large', - keepTime: link.keepTime, - includeVars: link.includeVars - }); - } - return memo; - }, []); - }); + return backendSrv + .search({ tag: link.tags, limit: limit }) + .then(function(results) { + return _.reduce( + results, + function(memo, dash) { + // do not add current dashboard + if (dash.id !== currentDashId) { + memo.push({ + title: dash.title, + url: "dashboard/" + dash.uri, + icon: "fa fa-th-large", + keepTime: link.keepTime, + includeVars: link.includeVars + }); + } + return memo; + }, + [] + ); + }); }; $scope.fillDropdown = function(link) { @@ -139,10 +157,14 @@ export class DashLinksContainerCtrl { }; updateDashLinks(); - $rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope); + $rootScope.onAppEvent("dash-links-updated", updateDashLinks, $scope); } } -angular.module('grafana.directives').directive('dashLinksContainer', dashLinksContainer); -angular.module('grafana.directives').directive('dashLink', dashLink); -angular.module('grafana.directives').controller("DashLinksContainerCtrl", DashLinksContainerCtrl); +angular + .module("grafana.directives") + .directive("dashLinksContainer", dashLinksContainer); +angular.module("grafana.directives").directive("dashLink", dashLink); +angular + .module("grafana.directives") + .controller("DashLinksContainerCtrl", DashLinksContainerCtrl); From afc89489059d86b51414266ddc6929c15f323de9 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 09:46:55 +0100 Subject: [PATCH 487/584] removed unused declaration --- public/app/features/dashlinks/editor.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 19969d7c7fc..595dca8c9ba 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -1,6 +1,5 @@ import angular from "angular"; import _ from "lodash"; -import appEvents from "app/core/app_events"; export var iconMap = { "external link": "fa-external-link", From d3858d884787d9f888d9f8b9c31f3e9ede14449e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 09:49:24 +0100 Subject: [PATCH 488/584] ux: fixed inactive view mode and removed animation --- public/sass/components/_view_states.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index e528891547a..0b5c5a27ee3 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -17,29 +17,24 @@ .panel-info-corner--info, .panel-info-corner--links { opacity: 0; - transition: all 1.5s ease-in-out 1s; } .navbar { box-shadow: none; background: transparent; - padding-left: $side-menu-width + 20px; } .navbar-page-btn { border-color: transparent; background: transparent; transform: translate3d(-40px, 0, 0); - transition: all 1.5s ease-in-out 1s; i { opacity: 0; - transition: all 1.5s ease-in-out 1s; } } .gf-timepicker-nav-btn { transform: translate3d(40px, 0, 0); - transition: transform 1.5s ease-in-out 1s; } } From 2465fcbd6b4d9033eb20c3256e54fca61d2230fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 10:00:54 +0100 Subject: [PATCH 489/584] fix: FolderId and IsFolder when saving dashboard --- pkg/services/dashboards/dashboards.go | 16 ++++++++-------- pkg/services/provisioning/dashboards/types.go | 3 --- .../app/core/components/search/search_results.ts | 1 - 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/pkg/services/dashboards/dashboards.go b/pkg/services/dashboards/dashboards.go index 24e9f240fd8..4bdba59b18e 100644 --- a/pkg/services/dashboards/dashboards.go +++ b/pkg/services/dashboards/dashboards.go @@ -23,14 +23,12 @@ func SetRepository(rep Repository) { } type SaveDashboardItem struct { - TitleLower string - OrgId int64 - Folder string - UpdatedAt time.Time - UserId int64 - Message string - Overwrite bool - Dashboard *models.Dashboard + OrgId int64 + UpdatedAt time.Time + UserId int64 + Message string + Overwrite bool + Dashboard *models.Dashboard } type DashboardRepository struct{} @@ -57,6 +55,8 @@ func (dr *DashboardRepository) SaveDashboard(json *SaveDashboardItem) (*models.D OrgId: json.OrgId, Overwrite: json.Overwrite, UserId: json.UserId, + FolderId: dashboard.FolderId, + IsFolder: dashboard.IsFolder, } if !json.UpdatedAt.IsZero() { diff --git a/pkg/services/provisioning/dashboards/types.go b/pkg/services/provisioning/dashboards/types.go index 002a56b5f3c..c4c4a67a755 100644 --- a/pkg/services/provisioning/dashboards/types.go +++ b/pkg/services/provisioning/dashboards/types.go @@ -1,7 +1,6 @@ package dashboards import ( - "strings" "time" "github.com/grafana/grafana/pkg/components/simplejson" @@ -23,11 +22,9 @@ func createDashboardJson(data *simplejson.Json, lastModified time.Time, cfg *Das dash := &dashboards.SaveDashboardItem{} dash.Dashboard = models.NewDashboardFromJson(data) - dash.TitleLower = strings.ToLower(dash.Dashboard.Title) dash.UpdatedAt = lastModified dash.Overwrite = true dash.OrgId = cfg.OrgId - dash.Folder = cfg.Folder dash.Dashboard.Data.Set("editable", cfg.Editable) if dash.Dashboard.Title == "" { diff --git a/public/app/core/components/search/search_results.ts b/public/app/core/components/search/search_results.ts index 02b6c9f355b..0c74600d1c3 100644 --- a/public/app/core/components/search/search_results.ts +++ b/public/app/core/components/search/search_results.ts @@ -9,7 +9,6 @@ export class SearchResultsCtrl { /** @ngInject */ constructor(private $location) { - } toggleFolderExpand(section) { From 0b6169b3f55b20484c6f2ad068b991bd6d13a49b Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 10:21:11 +0100 Subject: [PATCH 490/584] removes verbose logging --- pkg/services/alerting/notifier.go | 2 -- 1 file changed, 2 deletions(-) diff --git a/pkg/services/alerting/notifier.go b/pkg/services/alerting/notifier.go index 3f44d01575b..32bece31820 100644 --- a/pkg/services/alerting/notifier.go +++ b/pkg/services/alerting/notifier.go @@ -47,8 +47,6 @@ func (n *notificationService) SendIfNeeded(context *EvalContext) error { return err } - n.log.Info("Sending notifications for", "ruleId", context.Rule.Id, "sent count", len(notifiers)) - if len(notifiers) == 0 { return nil } From c98e15903eeb68a215ce6d1dcdce50473585a166 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Dec 2017 10:54:08 +0100 Subject: [PATCH 491/584] dashfolder: settings page for folder with rename and delete. Fixes #10120 --- public/app/core/routes/routes.ts | 5 ++ public/app/features/dashboard/all.ts | 2 + .../features/dashboard/folder_page_loader.ts | 20 ++++- .../dashboard/folder_settings_ctrl.ts | 83 +++++++++++++++++++ .../dashboard/partials/folder_settings.html | 24 ++++++ 5 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 public/app/features/dashboard/folder_settings_ctrl.ts create mode 100644 public/app/features/dashboard/partials/folder_settings.html diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 90612d4c4e2..9c975f6465a 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -83,6 +83,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controller : 'FolderPermissionsCtrl', controllerAs: 'ctrl', }) + .when('/dashboards/folder/:folderId/:type/:slug/settings', { + templateUrl: 'public/app/features/dashboard/partials/folder_settings.html', + controller : 'FolderSettingsCtrl', + controllerAs: 'ctrl', + }) .when('/dashboards/folder/:folderId/:type/:slug', { templateUrl: 'public/app/features/dashboard/partials/folder_dashboards.html', controller : 'FolderDashboardsCtrl', diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index e9ca2a854be..9e8d034eb21 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -32,11 +32,13 @@ import coreModule from 'app/core/core_module'; import {DashboardListCtrl} from './dashboard_list_ctrl'; import {FolderDashboardsCtrl} from './folder_dashboards_ctrl'; import {FolderPermissionsCtrl} from './folder_permissions_ctrl'; +import {FolderSettingsCtrl} from './folder_settings_ctrl'; import {DashboardImportCtrl} from './dashboard_import_ctrl'; import {CreateFolderCtrl} from './create_folder_ctrl'; coreModule.controller('DashboardListCtrl', DashboardListCtrl); coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl); coreModule.controller('FolderPermissionsCtrl', FolderPermissionsCtrl); +coreModule.controller('FolderSettingsCtrl', FolderSettingsCtrl); coreModule.controller('DashboardImportCtrl', DashboardImportCtrl); coreModule.controller('CreateFolderCtrl', CreateFolderCtrl); diff --git a/public/app/features/dashboard/folder_page_loader.ts b/public/app/features/dashboard/folder_page_loader.ts index 98ab8f2b431..570265d8bff 100644 --- a/public/app/features/dashboard/folder_page_loader.ts +++ b/public/app/features/dashboard/folder_page_loader.ts @@ -29,12 +29,19 @@ export class FolderPageLoader { id: 'manage-folder-permissions', text: 'Permissions', url: '/dashboards/permissions' + }, + { + active: activeChildId === 'manage-folder-settings', + icon: 'fa fa-fw fa-cog', + id: 'manage-folder-settings', + text: 'Settings', + url: '/dashboards/settings' } ] } }; - this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { + return this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { const folderTitle = result.dashboard.title; ctrl.navModel.main.text = ''; ctrl.navModel.main.breadcrumbs = [ @@ -42,13 +49,22 @@ export class FolderPageLoader { { title: folderTitle } ]; - const folderUrl = `/dashboards/folder/${folderId}/${result.meta.type}/${result.meta.slug}`; + const folderUrl = this.createFolderUrl(folderId, result.meta.type, result.meta.slug); const dashTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-dashboards' }); dashTab.url = folderUrl; const permTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-permissions' }); permTab.url = folderUrl + '/permissions'; + + const settingsTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-settings' }); + settingsTab.url = folderUrl + '/settings'; + + return result; }); } + + createFolderUrl(folderId: number, type: string, slug: string) { + return `/dashboards/folder/${folderId}/${type}/${slug}`; + } } diff --git a/public/app/features/dashboard/folder_settings_ctrl.ts b/public/app/features/dashboard/folder_settings_ctrl.ts new file mode 100644 index 00000000000..7d846f8ec60 --- /dev/null +++ b/public/app/features/dashboard/folder_settings_ctrl.ts @@ -0,0 +1,83 @@ +import {FolderPageLoader} from './folder_page_loader'; +import appEvents from 'app/core/app_events'; + +export class FolderSettingsCtrl { + folderPageLoader: FolderPageLoader; + navModel: any; + folderId: number; + canSave = false; + dashboard: any; + meta: any; + + /** @ngInject */ + constructor(private backendSrv, navModelSrv, private $routeParams, private $location) { + if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + this.folderId = $routeParams.folderId; + + this.folderPageLoader = new FolderPageLoader(this.backendSrv, this.$routeParams); + this.folderPageLoader.load(this, this.folderId, 'manage-folder-settings') + .then(result => { + this.dashboard = result.dashboard; + this.meta = result.meta; + this.canSave = result.meta.canSave; + }); + } + } + + save() { + return this.backendSrv.saveDashboard(this.dashboard, {overwrite: false}) + .then(result => { + var folderUrl = this.folderPageLoader.createFolderUrl(this.folderId, this.meta.type, result.slug); + if (folderUrl !== this.$location.path()) { + this.$location.url(folderUrl + '/settings'); + } + + appEvents.emit('dashboard-saved'); + appEvents.emit('alert-success', ['Folder saved']); + }) + .catch(this.handleSaveFolderError); + } + + delete(evt) { + if (evt) { + evt.stopPropagation(); + evt.preventDefault(); + } + + appEvents.emit('confirm-modal', { + title: 'Delete', + text: `Do you want to delete this folder and all its dashboards?`, + icon: 'fa-trash', + yesText: 'Delete', + onConfirm: () => { + return this.backendSrv.delete(`/api/dashboards/${this.meta.type}/${this.meta.slug}`).then(() => { + appEvents.emit('alert-success', ['Folder deleted']); + this.$location.url('/dashboards'); + }); + } + }); + } + + handleSaveFolderError(err) { + if (err.data && err.data.status === 'version-mismatch') { + err.isHandled = true; + + appEvents.emit('confirm-modal', { + title: 'Conflict', + text: 'Someone else has updated this folder.', + text2: 'Would you still like to save this folder?', + yesText: 'Save & Overwrite', + icon: 'fa-warning', + onConfirm: () => { + this.backendSrv.saveDashboard(this.dashboard, {overwrite: true}); + } + }); + } + + if (err.data && err.data.status === 'name-exists') { + err.isHandled = true; + + appEvents.emit('alert-error', ['A folder or dashboard with this name exists already.']); + } + } +} diff --git a/public/app/features/dashboard/partials/folder_settings.html b/public/app/features/dashboard/partials/folder_settings.html new file mode 100644 index 00000000000..3d04b292ce0 --- /dev/null +++ b/public/app/features/dashboard/partials/folder_settings.html @@ -0,0 +1,24 @@ + + +
    + +
    +

    Folder Settings

    +
    +
    + + +
    +
    + + +
    + +
    +
    From 02d3a9f3653735a40ab0a507dbe7db8de5acac3e Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Dec 2017 10:55:58 +0100 Subject: [PATCH 492/584] docs: SSL Mode config settings for Postgres --- docs/sources/installation/configuration.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/sources/installation/configuration.md b/docs/sources/installation/configuration.md index 1333c8c191d..bb411002f08 100644 --- a/docs/sources/installation/configuration.md +++ b/docs/sources/installation/configuration.md @@ -205,7 +205,7 @@ The database user (not applicable for `sqlite3`). ### password -The database user's password (not applicable for `sqlite3`). If the password contains `#` or `;` you have to wrap it with trippel quotes. Ex `"""#password;"""` +The database user's password (not applicable for `sqlite3`). If the password contains `#` or `;` you have to wrap it with triple quotes. Ex `"""#password;"""` ### ssl_mode @@ -214,19 +214,19 @@ For MySQL, use either `true`, `false`, or `skip-verify`. ### ca_cert_path -(MySQL only) The path to the CA certificate to use. On many linux systems, certs can be found in `/etc/ssl/certs`. +The path to the CA certificate to use. On many linux systems, certs can be found in `/etc/ssl/certs`. ### client_key_path -(MySQL only) The path to the client key. Only if server requires client authentication. +The path to the client key. Only if server requires client authentication. ### client_cert_path -(MySQL only) The path to the client cert. Only if server requires client authentication. +The path to the client cert. Only if server requires client authentication. ### server_cert_name -(MySQL only) The common name field of the certificate used by the `mysql` server. Not necessary if `ssl_mode` is set to `skip-verify`. +The common name field of the certificate used by the `mysql` or `postgres` server. Not necessary if `ssl_mode` is set to `skip-verify`. ### max_idle_conn The maximum number of connections in the idle connection pool. From a9ba7b912f5d80972693d2ea2a60384abcacfbae Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 13 Dec 2017 10:57:39 +0100 Subject: [PATCH 493/584] dashfolders: Minor css fixes for bulk edit --- public/sass/components/_dashboard_list.scss | 1 + public/sass/components/_switch.scss | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/sass/components/_dashboard_list.scss b/public/sass/components/_dashboard_list.scss index e1574f46da6..ad02d4c7e1c 100644 --- a/public/sass/components/_dashboard_list.scss +++ b/public/sass/components/_dashboard_list.scss @@ -24,4 +24,5 @@ .search-results-filter-row__filters-item { width: 150px; + margin-right: 0; } \ No newline at end of file diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 3d0da7e4579..a81501b86fb 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -124,7 +124,7 @@ } .gf-form-switch--search-result__section { - min-width: 3.3rem; + min-width: 3.1rem; margin-right: -0.3rem; input + label { @@ -141,7 +141,7 @@ } .gf-form-switch--search-result-filter-row__checkbox { - min-width: 4.7rem; + min-width: 3.8rem; input + label { height: 2.5rem; From c6a02bec81313d5257185dddb23183e508a2278d Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 13 Dec 2017 11:08:28 +0100 Subject: [PATCH 494/584] dashfolders: Minor css fixes for bulk edit --- public/sass/components/_switch.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index a81501b86fb..24db4c157ca 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -124,7 +124,7 @@ } .gf-form-switch--search-result__section { - min-width: 3.1rem; + min-width: 3.05rem; margin-right: -0.3rem; input + label { @@ -133,7 +133,7 @@ } .gf-form-switch--search-result__item { - min-width: 2.6rem; + min-width: 2.7rem; input + label { height: 2.7rem; @@ -141,7 +141,7 @@ } .gf-form-switch--search-result-filter-row__checkbox { - min-width: 3.8rem; + min-width: 3.75rem; input + label { height: 2.5rem; From 60e2ba111f0afe68869173e3382c36decbdf04c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 11:12:09 +0100 Subject: [PATCH 495/584] plugins: fixed plugin edit page and plugin page --- .../core/components/PageHeader/PageHeader.tsx | 4 +- .../app/features/dashboard/dashnav/dashnav.ts | 5 +- .../features/dashboard/folder_page_loader.ts | 2 +- .../plugins/partials/plugin_edit.html | 125 +++++++++--------- .../plugins/partials/plugin_list.html | 37 ------ .../plugins/partials/plugin_page.html | 14 +- .../app/features/plugins/plugin_edit_ctrl.ts | 80 ++++++++--- .../app/features/plugins/plugin_page_ctrl.ts | 18 ++- 8 files changed, 147 insertions(+), 138 deletions(-) diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 3ab6cac8143..5e736332ec2 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -76,8 +76,8 @@ export default class PageHeader extends React.Component { const breadcrumbsResult = []; for (let i = 0; i < breadcrumbs.length; i++) { const bc = breadcrumbs[i]; - if (bc.uri) { - breadcrumbsResult.push({bc.title}); + if (bc.url) { + breadcrumbsResult.push({bc.title}); } else { breadcrumbsResult.push( / {bc.title}); } diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index aed803efb9a..afb7155bb55 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -14,10 +14,7 @@ export class DashNavCtrl { private $rootScope, private dashboardSrv, private $location, - public playlistSrv, - navModelSrv) { - this.navModel = navModelSrv.getDashboardNav(this.dashboard, this); - + public playlistSrv) { appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope); if (this.dashboard.meta.isSnapshot) { diff --git a/public/app/features/dashboard/folder_page_loader.ts b/public/app/features/dashboard/folder_page_loader.ts index 570265d8bff..23917aac085 100644 --- a/public/app/features/dashboard/folder_page_loader.ts +++ b/public/app/features/dashboard/folder_page_loader.ts @@ -12,7 +12,7 @@ export class FolderPageLoader { url: '/fsdfds', text: '', breadcrumbs: [ - { title: 'Dashboards', uri: '/dashboards' }, + { title: 'Dashboards', url: '/dashboards' }, { title: ' ' }, ], children: [ diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 9df2775cbb8..4b4628a3bf7 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,73 +1,68 @@ - +
    + -
    -
    - -
    - -
    - -
    -
    -
    -
    - -
    -
    - - -
    - - - +
    +
    +
    +
    -
    -
    - -
    +
    +
    + - +
    + +
    + +
    + + +
    diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index efe036ec14f..eac4216d818 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,42 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/public/app/features/plugins/partials/plugin_page.html b/public/app/features/plugins/partials/plugin_page.html index 9c4c72121f0..44ffeec5cd6 100644 --- a/public/app/features/plugins/partials/plugin_page.html +++ b/public/app/features/plugins/partials/plugin_page.html @@ -1,8 +1,10 @@ - +
    + -
    -
    - - -
    +
    +
    + + +
    +
    diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 9daefdcbcf4..0169dc7772e 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -11,8 +11,7 @@ export class PluginEditCtrl { includes: any; readmeHtml: any; includedDatasources: any; - tabIndex: number; - tabs: any; + tab: string; navModel: any; hasDashboards: any; preUpdateHook: () => any; @@ -24,24 +23,76 @@ export class PluginEditCtrl { private $rootScope, private backendSrv, private $sce, - $routeParams, + private $routeParams, navModelSrv, ) { - this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); - this.model = {}; - this.pluginId = $routeParams.pluginId; - this.tabIndex = 0; - this.tabs = ['Readme']; + this.pluginId = $routeParams.pluginId; this.preUpdateHook = () => Promise.resolve(); this.postUpdateHook = () => Promise.resolve(); + + this.init(); + } + + setNavModel(model) { + let defaultTab = 'readme'; + + this.navModel = { + main: { + img: model.info.logos.large, + subTitle: model.info.description, + url: '', + text: '', + breadcrumbs: [ + { title: 'Plugins', url: '/plugins' }, + { title: model.name }, + ], + children: [ + { + icon: 'fa fa-fw fa-file-text-o', + id: 'readme', + text: 'Readme', + url: `plugins/${this.model.id}/edit?tab=readme` + } + ] + } + }; + + if (model.type === 'app') { + this.navModel.main.children.push({ + icon: 'fa fa-fw fa-th-large', + id: 'config', + text: 'Config', + url: `plugins/${this.model.id}/edit?tab=config` + }); + + let hasDashboards = _.find(model.includes, {type: 'dashboard'}); + + if (hasDashboards) { + this.navModel.main.children.push({ + icon: 'gicon gicon-dashboard', + id: 'dashboards', + text: 'Dashboards', + url: `plugins/${this.model.id}/edit?tab=dashboards` + }); + } + + defaultTab = 'config'; + } + + this.tab = this.$routeParams.tab || defaultTab; + + for (let tab of this.navModel.main.children) { + if (tab.id === this.tab) { + tab.active = true; + } + } } init() { return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => { this.model = result; this.pluginIcon = this.getPluginIcon(this.model.type); - this.navModel.breadcrumbs.push({text: this.model.name}); this.model.dependencies.plugins.forEach(plug => { plug.icon = this.getPluginIcon(plug.type); @@ -52,16 +103,7 @@ export class PluginEditCtrl { return plug; }); - if (this.model.type === 'app') { - this.hasDashboards = _.find(result.includes, {type: 'dashboard'}); - if (this.hasDashboards) { - this.tabs.unshift('Dashboards'); - } - - this.tabs.unshift('Config'); - this.tabIndex = 0; - } - + this.setNavModel(this.model); return this.initReadme(); }); } diff --git a/public/app/features/plugins/plugin_page_ctrl.ts b/public/app/features/plugins/plugin_page_ctrl.ts index e3c01892a2b..d583355564c 100644 --- a/public/app/features/plugins/plugin_page_ctrl.ts +++ b/public/app/features/plugins/plugin_page_ctrl.ts @@ -1,5 +1,3 @@ -/// - import angular from 'angular'; import _ from 'lodash'; @@ -35,8 +33,20 @@ export class AppPageCtrl { return; } - this.navModel = this.navModelSrv.getNav('plugin-page-' + app.id); - this.navModel.breadcrumbs.push({text: this.page.name}); + let pluginNav = this.navModelSrv.getNav('plugin-page-' + app.id); + + this.navModel = { + main: { + img: app.info.logos.large, + subTitle: app.name, + url: '', + text: '', + breadcrumbs: [ + { title: app.name, url: pluginNav.main.url }, + { title: this.page.name }, + ], + } + }; } loadPluginInfo() { From 22aa1f7e422211d38600a3c8a70a5a8e34f2af21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 11:21:33 +0100 Subject: [PATCH 496/584] ux: change members to users --- pkg/api/index.go | 2 +- public/app/features/org/org_users_ctrl.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 862e9af0519..49d3f1c6cd2 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -221,7 +221,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Url: setting.AppSubUrl + "/datasources", }, { - Text: "Members", + Text: "Users", Id: "users", Description: "Manage org members", Icon: "icon-gf icon-gf-fw icon-gf-users", diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 1686a1c3424..4289860e742 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -1,5 +1,3 @@ -/// - import config from 'app/core/config'; import coreModule from 'app/core/core_module'; import Remarkable from 'remarkable'; @@ -44,7 +42,7 @@ export class OrgUsersCtrl { if (this.externalUserMngLinkName) { return this.externalUserMngLinkName; } - return "Add Member"; + return "Invite User"; } get() { From cacbcb9c99a92ae583ac93193d3e7c401f7ef9ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 11:29:29 +0100 Subject: [PATCH 497/584] ux: added search box to ds list page, closes #10106 --- public/app/features/plugins/ds_list_ctrl.ts | 22 ++++++++----------- .../features/plugins/partials/ds_list.html | 10 +++++++-- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/public/app/features/plugins/ds_list_ctrl.ts b/public/app/features/plugins/ds_list_ctrl.ts index ce9047166ef..a6f3333a15b 100644 --- a/public/app/features/plugins/ds_list_ctrl.ts +++ b/public/app/features/plugins/ds_list_ctrl.ts @@ -1,35 +1,31 @@ -/// - import coreModule from '../../core/core_module'; -import {appEvents} from 'app/core/core'; +import _ from 'lodash'; export class DataSourcesCtrl { datasources: any; + unfiltered: any; navModel: any; + searchQuery: string; /** @ngInject */ constructor( private $scope, private backendSrv, private datasourceSrv, - private $location, private navModelSrv) { this.navModel = this.navModelSrv.getNav('cfg', 'datasources', 0); - this.navigateToUrl = this.navigateToUrl.bind(this); backendSrv.get('/api/datasources').then(result => { this.datasources = result; - }); - - appEvents.on('location-change', payload => { - this.navigateToUrl(payload.href); + this.unfiltered = result; }); } - navigateToUrl(url) { - // debugger; - this.$location.path(url); - this.$location.replace(); + onQueryUpdated() { + let regex = new RegExp(this.searchQuery, 'ig'); + this.datasources = _.filter(this.unfiltered, item => { + return regex.test(item.name) || regex.test(item.type); + }); } removeDataSourceConfirmed(ds) { diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index b645096960c..401eb4eac6c 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,9 +1,15 @@
    -
    +
    +
    + + +
    +
    + Add data source @@ -42,7 +48,7 @@
    -
    +
    +
    -
    +
    Refresh When to update the values of this variable. -
    +
    diff --git a/public/app/plugins/datasource/grafana/partials/annotations.editor.html b/public/app/plugins/datasource/grafana/partials/annotations.editor.html index 9803f082a23..4289a58e5cb 100644 --- a/public/app/plugins/datasource/grafana/partials/annotations.editor.html +++ b/public/app/plugins/datasource/grafana/partials/annotations.editor.html @@ -11,7 +11,7 @@ -
    +
    diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html index a9537e55db2..7c7da95611c 100644 --- a/public/app/plugins/panel/graph/tab_display.html +++ b/public/app/plugins/panel/graph/tab_display.html @@ -78,7 +78,7 @@
    - +
    From 29d1ec561f85c3e4e5710c87ea978065bf817dc5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 12:48:49 +0100 Subject: [PATCH 499/584] fixed edit team header, fixes #10172 --- .../features/org/partials/team_details.html | 34 +++++++++---------- public/app/features/org/team_details_ctrl.ts | 2 +- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/public/app/features/org/partials/team_details.html b/public/app/features/org/partials/team_details.html index b95cbcd2ce7..fdc84f146b7 100644 --- a/public/app/features/org/partials/team_details.html +++ b/public/app/features/org/partials/team_details.html @@ -1,20 +1,18 @@ - + -
    -
    -

    Edit Team

    -
    +
    +

    Edit Team

    -
    -
    - Name - -
    + +
    + Name + +
    -
    - -
    - +
    + +
    +

    Team Members

    @@ -43,7 +41,7 @@
    TypeInfo
    + {{link.type}} +
    + {{link.title}} +
    +
    + {{link.url}} +
    + + {{tag}} + +
    - - This team has no members yet. - -
    + + This team has no members yet. + +
    diff --git a/public/app/features/org/team_details_ctrl.ts b/public/app/features/org/team_details_ctrl.ts index e89df37d02d..598b03b46d4 100644 --- a/public/app/features/org/team_details_ctrl.ts +++ b/public/app/features/org/team_details_ctrl.ts @@ -8,7 +8,7 @@ export default class TeamDetailsCtrl { navModel: any; constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'users'); + this.navModel = navModelSrv.getNav('cfg', 'teams', 0); this.get(); } From dd3dd407ad40e04cb3ab5e8a136595000778886f Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 11:13:49 +0100 Subject: [PATCH 500/584] removes unused property --- pkg/services/dashboards/dashboards.go | 15 +++++++-------- pkg/services/provisioning/dashboards/types.go | 2 -- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/pkg/services/dashboards/dashboards.go b/pkg/services/dashboards/dashboards.go index 24e9f240fd8..af6e26d34b0 100644 --- a/pkg/services/dashboards/dashboards.go +++ b/pkg/services/dashboards/dashboards.go @@ -23,14 +23,13 @@ func SetRepository(rep Repository) { } type SaveDashboardItem struct { - TitleLower string - OrgId int64 - Folder string - UpdatedAt time.Time - UserId int64 - Message string - Overwrite bool - Dashboard *models.Dashboard + OrgId int64 + Folder string + UpdatedAt time.Time + UserId int64 + Message string + Overwrite bool + Dashboard *models.Dashboard } type DashboardRepository struct{} diff --git a/pkg/services/provisioning/dashboards/types.go b/pkg/services/provisioning/dashboards/types.go index 002a56b5f3c..083d56a9a25 100644 --- a/pkg/services/provisioning/dashboards/types.go +++ b/pkg/services/provisioning/dashboards/types.go @@ -1,7 +1,6 @@ package dashboards import ( - "strings" "time" "github.com/grafana/grafana/pkg/components/simplejson" @@ -23,7 +22,6 @@ func createDashboardJson(data *simplejson.Json, lastModified time.Time, cfg *Das dash := &dashboards.SaveDashboardItem{} dash.Dashboard = models.NewDashboardFromJson(data) - dash.TitleLower = strings.ToLower(dash.Dashboard.Title) dash.UpdatedAt = lastModified dash.Overwrite = true dash.OrgId = cfg.OrgId From ccbd18006e35d0ffa79a2a094db508ca026f2610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 13:16:44 +0100 Subject: [PATCH 501/584] ux: org user management changes --- pkg/api/api.go | 3 +- pkg/api/dtos/invite.go | 2 +- pkg/api/org_invite.go | 4 +- public/app/core/nav_model_srv.ts | 91 +--------------- public/app/core/routes/routes.ts | 3 +- public/app/features/org/org_users_ctrl.ts | 58 ++++------ .../app/features/org/partials/add_user.html | 55 ---------- public/app/features/org/partials/invite.html | 72 +++++-------- .../app/features/org/partials/orgUsers.html | 100 ++++++------------ public/app/features/org/user_invite_ctrl.ts | 62 ++++------- .../plugins/partials/plugin_list.html | 2 +- public/sass/layout/_page.scss | 1 + 12 files changed, 107 insertions(+), 346 deletions(-) delete mode 100644 public/app/features/org/partials/add_user.html diff --git a/pkg/api/api.go b/pkg/api/api.go index a37f200f9d1..4b570ce5b89 100644 --- a/pkg/api/api.go +++ b/pkg/api/api.go @@ -40,7 +40,8 @@ func (hs *HttpServer) registerRoutes() { r.Get("/datasources/", reqSignedIn, Index) r.Get("/datasources/new", reqSignedIn, Index) r.Get("/datasources/edit/*", reqSignedIn, Index) - r.Get("/org/users/", reqSignedIn, Index) + r.Get("/org/users/new", reqSignedIn, Index) + r.Get("/org/users/invite", reqSignedIn, Index) r.Get("/org/apikeys/", reqSignedIn, Index) r.Get("/dashboard/import/", reqSignedIn, Index) r.Get("/configuration", reqGrafanaAdmin, Index) diff --git a/pkg/api/dtos/invite.go b/pkg/api/dtos/invite.go index 3f002a8b157..09d53f576b4 100644 --- a/pkg/api/dtos/invite.go +++ b/pkg/api/dtos/invite.go @@ -6,7 +6,7 @@ type AddInviteForm struct { LoginOrEmail string `json:"loginOrEmail" binding:"Required"` Name string `json:"name"` Role m.RoleType `json:"role" binding:"Required"` - SkipEmails bool `json:"skipEmails"` + SendEmail bool `json:"sendEmail"` } type InviteInfo struct { diff --git a/pkg/api/org_invite.go b/pkg/api/org_invite.go index 864e464133d..57d9913d2eb 100644 --- a/pkg/api/org_invite.go +++ b/pkg/api/org_invite.go @@ -61,7 +61,7 @@ func AddOrgInvite(c *middleware.Context, inviteDto dtos.AddInviteForm) Response } // send invite email - if !inviteDto.SkipEmails && util.IsEmail(inviteDto.LoginOrEmail) { + if inviteDto.SendEmail && util.IsEmail(inviteDto.LoginOrEmail) { emailCmd := m.SendEmailCommand{ To: []string{inviteDto.LoginOrEmail}, Template: "new_user_invite.html", @@ -99,7 +99,7 @@ func inviteExistingUserToOrg(c *middleware.Context, user *m.User, inviteDto *dto return ApiError(500, "Error while trying to create org user", err) } else { - if !inviteDto.SkipEmails && util.IsEmail(user.Email) { + if inviteDto.SendEmail && util.IsEmail(user.Email) { emailCmd := m.SendEmailCommand{ To: []string{user.Email}, Template: "invited_to_org.html", diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index e77cfb8f09f..2807f8fc19c 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -27,9 +27,8 @@ export class NavModel { export class NavModelSrv { navItems: any; - /** @ngInject */ - constructor(private contextSrv) { + constructor() { this.navItems = config.bootData.navTree; } @@ -81,94 +80,6 @@ export class NavModelSrv { main: node }; } - - getDashboardNav(dashboard, dashNavCtrl) { - // special handling for snapshots - if (dashboard.meta.isSnapshot) { - return { - section: { - title: dashboard.title, - icon: 'icon-gf icon-gf-snapshot' - }, - menu: [ - { - title: 'Go to original dashboard', - icon: 'fa fa-fw fa-external-link', - url: dashboard.snapshot.originalUrl, - } - ] - }; - } - - var menu = []; - - if (dashboard.meta.canEdit) { - menu.push({ - title: 'Settings', - icon: 'fa fa-fw fa-cog', - clickHandler: () => dashNavCtrl.openEditView('settings') - }); - - menu.push({ - title: 'Templating', - icon: 'fa fa-fw fa-code', - clickHandler: () => dashNavCtrl.openEditView('templating') - }); - - menu.push({ - title: 'Annotations', - icon: 'fa fa-fw fa-comment', - clickHandler: () => dashNavCtrl.openEditView('annotations') - }); - - if (!dashboard.meta.isHome) { - menu.push({ - title: 'Version history', - icon: 'fa fa-fw fa-history', - clickHandler: () => dashNavCtrl.openEditView('history') - }); - } - - menu.push({ - title: 'View JSON', - icon: 'fa fa-fw fa-eye', - clickHandler: () => dashNavCtrl.viewJson() - }); - } - - if (this.contextSrv.isEditor && !dashboard.editable) { - menu.push({ - title: 'Make Editable', - icon: 'fa fa-fw fa-edit', - clickHandler: () => dashNavCtrl.makeEditable() - }); - } - - if (this.contextSrv.isEditor && !dashboard.meta.isFolder) { - menu.push({ - title: 'Save As...', - icon: 'fa fa-fw fa-save', - clickHandler: () => dashNavCtrl.saveDashboardAs() - }); - } - - if (dashboard.meta.canSave) { - menu.push({ - title: 'Delete', - icon: 'fa fa-fw fa-trash', - clickHandler: () => dashNavCtrl.deleteDashboard() - }); - - } - - return { - section: { - title: dashboard.title, - icon: 'icon-gf icon-gf-dashboard' - }, - menu: menu - }; - } } coreModule.service('navModelSrv', NavModelSrv); diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 9c975f6465a..3f6d4916e77 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -109,9 +109,10 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controllerAs: 'ctrl', resolve: loadOrgBundle, }) - .when('/org/users/new', { + .when('/org/users/invite', { templateUrl: 'public/app/features/org/partials/invite.html', controller : 'UserInviteCtrl', + controllerAs: 'ctrl', resolve: loadOrgBundle, }) .when('/org/apikeys', { diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 4289860e742..0e6dec504c6 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -1,10 +1,10 @@ import config from 'app/core/config'; import coreModule from 'app/core/core_module'; import Remarkable from 'remarkable'; +import _ from 'lodash'; export class OrgUsersCtrl { - - user: any; + unfiltered: any; users: any; pendingInvites: any; editor: any; @@ -12,21 +12,18 @@ export class OrgUsersCtrl { externalUserMngLinkUrl: string; externalUserMngLinkName: string; externalUserMngInfo: string; - addUsersBtnName: string; + canInvite: boolean; + searchQuery: string; + showInvites: boolean; /** @ngInject */ constructor(private $scope, private backendSrv, navModelSrv, $sce) { - this.user = { - loginOrEmail: '', - role: 'Viewer', - }; - this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.get(); - this.editor = { index: 0 }; this.externalUserMngLinkUrl = config.externalUserMngLinkUrl; this.externalUserMngLinkName = config.externalUserMngLinkName; + this.canInvite = !config.disableLoginForm && !config.externalUserMngLinkName; // render external user management info markdown if (config.externalUserMngInfo) { @@ -34,21 +31,13 @@ export class OrgUsersCtrl { linkTarget: '__blank', }).render(config.externalUserMngInfo); } - - this.addUsersBtnName = this.getAddUserBtnName(); - } - - getAddUserBtnName(): string { - if (this.externalUserMngLinkName) { - return this.externalUserMngLinkName; - } - return "Invite User"; } get() { this.backendSrv.get('/api/org/users') .then((users) => { this.users = users; + this.unfiltered = users; }); this.backendSrv.get('/api/org/invites') .then((pendingInvites) => { @@ -56,6 +45,13 @@ export class OrgUsersCtrl { }); } + onQueryUpdated() { + let regex = new RegExp(this.searchQuery, 'ig'); + this.users = _.filter(this.unfiltered, item => { + return regex.test(item.email) || regex.test(item.login); + }); + } + updateOrgUser(user) { this.backendSrv.patch('/api/org/users/' + user.userId, user); } @@ -74,38 +70,22 @@ export class OrgUsersCtrl { removeUserConfirmed(user) { this.backendSrv.delete('/api/org/users/' + user.userId) - .then(this.get.bind(this)); + .then(this.get.bind(this)); } revokeInvite(invite, evt) { evt.stopPropagation(); this.backendSrv.patch('/api/org/invites/' + invite.code + '/revoke') - .then(this.get.bind(this)); + .then(this.get.bind(this)); } copyInviteToClipboard(evt) { evt.stopPropagation(); } - getInviteUrl(invite) { - return invite.url; - } - - openAddUsersView() { - var modalScope = this.$scope.$new(); - modalScope.invitesSent = this.get.bind(this); - - var src = config.disableLoginForm - ? 'public/app/features/org/partials/add_user.html' - : 'public/app/features/org/partials/invite.html'; - - this.$scope.appEvent('show-modal', { - src: src, - modalClass: 'invite-modal', - scope: modalScope - }); - } - + getInviteUrl(invite) { + return invite.url; + } } coreModule.controller('OrgUsersCtrl', OrgUsersCtrl); diff --git a/public/app/features/org/partials/add_user.html b/public/app/features/org/partials/add_user.html deleted file mode 100644 index 53fe7884df9..00000000000 --- a/public/app/features/org/partials/add_user.html +++ /dev/null @@ -1,55 +0,0 @@ -
    - -
    -

    - Add Users -

    -     - - -
    - -
    - -
    - Add existing Grafana users to the organization - {{contextSrv.user.orgName}} -
    - -
    -
    -
    -
    - Email or Username - -
    -
    - Role - -
    -
    - - - -
    -
    -
    - -
    -
    - - - Add another - -
    -
    - -
    - - Cancel -
    -
    -
    -
    -
    diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 330441fc88d..a35aa47a4ab 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -1,49 +1,35 @@ - +
    -
    - Send invite or add existing Grafana users to the organization - {{contextSrv.user.orgName}} -
    -
    -
    -
    -
    - Email or Username - -
    -
    - Name - -
    -
    - Role - -
    -
    - - - -
    -
    -
    +

    Invite User

    -
    -
    - - - Invite another - -
    - -
    +
    + Send invite or add existing Grafana user to the organization + {{contextSrv.user.orgName}} +
    -
    - - Cancel -
    -
    -
    +
    +
    +
    + Email or Username + +
    +
    + Name + +
    +
    + Role + +
    + + + +
    + + Back +
    +
    diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 7ab828562f0..28a2757fb2d 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,50 +1,26 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    +
    + + +
    +
    - - + + - {{ctrl.addUsersBtnName}} + Invite - + + - {{ctrl.addUsersBtnName}} + {{ctrl.externalUserMngLinkName}}
    @@ -52,7 +28,7 @@
    -
    +
    @@ -89,46 +65,32 @@
    -
    +
    + - - - - - - - - - - + + + + + +
    Email Name
    {{invite.email}}{{invite.name}} - -   - -
    - {{invite.url}}

    -   - - - Invited: {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} - -
    {{invite.email}}{{invite.name}} + +   + + +
    -
    diff --git a/public/app/features/org/user_invite_ctrl.ts b/public/app/features/org/user_invite_ctrl.ts index 85e4f7699e5..36dde418b2c 100644 --- a/public/app/features/org/user_invite_ctrl.ts +++ b/public/app/features/org/user_invite_ctrl.ts @@ -1,56 +1,30 @@ import coreModule from 'app/core/core_module'; -import _ from 'lodash'; export class UserInviteCtrl { + navModel: any; + invite: any; + inviteForm: any; /** @ngInject **/ - constructor($scope, backendSrv, navModelSrv) { - $scope.navModel = navModelSrv.getNav('cfg', 'users', 0); + constructor(private backendSrv, navModelSrv, private $location) { + this.navModel = navModelSrv.getNav('cfg', 'users', 0); - const defaultInvites = [ - {name: '', email: '', role: 'Editor'}, - ]; - - $scope.invites = _.cloneDeep(defaultInvites); - - $scope.options = {skipEmails: false}; - $scope.init = function() { }; - - $scope.addInvite = function() { - $scope.invites.push({name: '', email: '', role: 'Editor'}); + this.invite = { + name: '', + email: '', + role: 'Editor', + sendEmail: true, }; + } - $scope.removeInvite = function(invite) { - $scope.invites = _.without($scope.invites, invite); - }; + sendInvite() { + if (!this.inviteForm.$valid) { + return; + } - $scope.resetInvites = function() { - $scope.invites = _.cloneDeep(defaultInvites); - }; - - $scope.sendInvites = function() { - if (!$scope.inviteForm.$valid) { return; } - $scope.sendSingleInvite(0); - }; - - $scope.invitesSent = function() { - $scope.resetInvites(); - }; - - $scope.sendSingleInvite = function(index) { - var invite = $scope.invites[index]; - invite.skipEmails = $scope.options.skipEmails; - - return backendSrv.post('/api/org/invites', invite).finally(function() { - index += 1; - - if (index === $scope.invites.length) { - $scope.invitesSent(); - } else { - $scope.sendSingleInvite(index); - } - }); - }; + return this.backendSrv.post('/api/org/invites', this.invite).then(() => { + this.$location.path('org/users/'); + }); } } diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index eac4216d818..e4550171220 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -4,7 +4,7 @@
    - +
    diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 35371cc35a9..9491f18537d 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -36,6 +36,7 @@ .page-body { padding-top: $spacer*2; + min-height: 500px; } .page-heading { From bf999a4f826aab98c3ecfea94bbd16cfb4d1abc7 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 13:37:10 +0100 Subject: [PATCH 502/584] fixes broken alert eval when first condition is using OR closes #9318 --- pkg/services/alerting/eval_handler.go | 5 +++ pkg/services/alerting/eval_handler_test.go | 37 ++++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/pkg/services/alerting/eval_handler.go b/pkg/services/alerting/eval_handler.go index 79b2f231b41..457e02000fa 100644 --- a/pkg/services/alerting/eval_handler.go +++ b/pkg/services/alerting/eval_handler.go @@ -39,6 +39,11 @@ func (e *DefaultEvalHandler) Eval(context *EvalContext) { break } + if i == 0 { + firing = cr.Firing + noDataFound = cr.NoDataFound + } + // calculating Firing based on operator if cr.Operator == "or" { firing = firing || cr.Firing diff --git a/pkg/services/alerting/eval_handler_test.go b/pkg/services/alerting/eval_handler_test.go index cf6422a5250..c942e24818f 100644 --- a/pkg/services/alerting/eval_handler_test.go +++ b/pkg/services/alerting/eval_handler_test.go @@ -36,6 +36,16 @@ func TestAlertingEvaluationHandler(t *testing.T) { So(context.ConditionEvals, ShouldEqual, "true = true") }) + Convey("Show return triggered with single passing condition2", func() { + context := NewEvalContext(context.TODO(), &Rule{ + Conditions: []Condition{&conditionStub{firing: true, operator: "and"}}, + }) + + handler.Eval(context) + So(context.Firing, ShouldEqual, true) + So(context.ConditionEvals, ShouldEqual, "true = true") + }) + Convey("Show return false with not passing asdf", func() { context := NewEvalContext(context.TODO(), &Rule{ Conditions: []Condition{ @@ -131,6 +141,33 @@ func TestAlertingEvaluationHandler(t *testing.T) { So(context.ConditionEvals, ShouldEqual, "[[true OR false] OR true] = true") }) + Convey("Should return false if no condition is firing using OR operator", func() { + context := NewEvalContext(context.TODO(), &Rule{ + Conditions: []Condition{ + &conditionStub{firing: false, operator: "or"}, + &conditionStub{firing: false, operator: "or"}, + &conditionStub{firing: false, operator: "or"}, + }, + }) + + handler.Eval(context) + So(context.Firing, ShouldEqual, false) + So(context.ConditionEvals, ShouldEqual, "[[false OR false] OR false] = false") + }) + + Convey("Should retuasdfrn no data if one condition has nodata", func() { + context := NewEvalContext(context.TODO(), &Rule{ + Conditions: []Condition{ + &conditionStub{operator: "or", noData: false}, + &conditionStub{operator: "or", noData: false}, + &conditionStub{operator: "or", noData: false}, + }, + }) + + handler.Eval(context) + So(context.NoDataFound, ShouldBeFalse) + }) + Convey("Should return no data if one condition has nodata", func() { context := NewEvalContext(context.TODO(), &Rule{ Conditions: []Condition{ From 0be9789364c89c8c9660c26f5ec4dea3d3b75641 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 13 Dec 2017 13:51:52 +0100 Subject: [PATCH 503/584] ux: Move "Sign up" and "Reset password" to its own pages - and remove all inline styling (#9879) --- .../core/components/PageHeader/PageHeader.tsx | 10 +- .../core/controllers/reset_password_ctrl.ts | 11 ++ public/app/core/controllers/signup_ctrl.ts | 11 ++ public/app/partials/reset_password.html | 92 ++++---------- public/app/partials/signup_step2.html | 112 +++++++----------- public/sass/base/_icons.scss | 8 +- public/sass/pages/_signup.scss | 5 + 7 files changed, 110 insertions(+), 139 deletions(-) diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 3ab6cac8143..bf54115cad8 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -113,12 +113,18 @@ export default class PageHeader extends React.Component { } render() { + const { model } = this.props; + + if (!model) { + return null; + } + return (
    - {this.renderHeaderTitle(this.props.model.main)} - {this.props.model.main.children && } + {this.renderHeaderTitle(model.main)} + {model.main.children && }
    diff --git a/public/app/core/controllers/reset_password_ctrl.ts b/public/app/core/controllers/reset_password_ctrl.ts index 524cfb7af64..3bf0b1329b6 100644 --- a/public/app/core/controllers/reset_password_ctrl.ts +++ b/public/app/core/controllers/reset_password_ctrl.ts @@ -14,6 +14,17 @@ export class ResetPasswordCtrl { $scope.formModel.code = params.code; } + $scope.navModel = { + main: { + icon: 'gicon gicon-branding', + subTitle: 'Reset your Grafana password', + breadcrumbs: [ + { title: 'Login', uri: '/login' }, + { title: 'Reset Password' }, + ] + } + }; + $scope.sendResetEmail = function() { if (!$scope.sendResetForm.$valid) { return; diff --git a/public/app/core/controllers/signup_ctrl.ts b/public/app/core/controllers/signup_ctrl.ts index eb54110eb6d..b88379ed6b4 100644 --- a/public/app/core/controllers/signup_ctrl.ts +++ b/public/app/core/controllers/signup_ctrl.ts @@ -26,6 +26,17 @@ export class SignUpCtrl { $scope.verifyEmailEnabled = false; $scope.autoAssignOrg = false; + $scope.navModel = { + main: { + icon: 'gicon gicon-branding', + subTitle: 'Register your Grafana account', + breadcrumbs: [ + { title: 'Login', uri: '/login' }, + { title: 'Sign Up' }, + ] + } + }; + backendSrv.get('/api/user/signup/options').then(options => { $scope.verifyEmailEnabled = options.verifyEmailEnabled; $scope.autoAssignOrg = options.autoAssignOrg; diff --git a/public/app/partials/reset_password.html b/public/app/partials/reset_password.html index 4feec9339b6..b6517a6670b 100644 --- a/public/app/partials/reset_password.html +++ b/public/app/partials/reset_password.html @@ -1,71 +1,31 @@ - - diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html index 44f1cfbd0ec..865c37c4c26 100644 --- a/public/app/partials/signup_step2.html +++ b/public/app/partials/signup_step2.html @@ -1,73 +1,49 @@ -
    + - +
    + +
    + Your name + +
    +
    + Email + +
    +
    + Password + +
    + +
    + + + Back + +
    + +
    +
    \ No newline at end of file diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 5ede8cff740..7ef691bca16 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -63,6 +63,10 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); } +.gicon-branding { + background-image: url('../img/grafana_icon.svg'); +} + .sidemenu { .gicon-dashboard { background-image: url('../img/icons_dark_theme/icon_dashboard.svg'); @@ -70,6 +74,4 @@ .gicon-alert { background-image: url('../img/icons_dark_theme/icon_alert.svg'); } -} - - +} \ No newline at end of file diff --git a/public/sass/pages/_signup.scss b/public/sass/pages/_signup.scss index 7b2b0b0e84a..e037b9a4960 100644 --- a/public/sass/pages/_signup.scss +++ b/public/sass/pages/_signup.scss @@ -15,3 +15,8 @@ } } +.signup__password-strength { + position: absolute; + margin-left: 9rem; + width: 194px; +} \ No newline at end of file From ee5f030ded9fdef01f60f06ce2da430f49896b9f Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 13:53:38 +0100 Subject: [PATCH 504/584] changelog: adds note about closing #9318 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ba7b4a1aff..9ad3875e104 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,6 +51,7 @@ From `/etc/grafana/datasources` to `/etc/grafana/provisioning/datasources` when ## Fixes * **Gzip**: Fixes bug gravatar images when gzip was enabled [#5952](https://github.com/grafana/grafana/issues/5952) * **Alert list**: Now shows alert state changes even after adding manual annotations on dashboard [#9951](https://github.com/grafana/grafana/issues/9951) +* **Alerting**: Fixes bug where rules evaluated as firing when all conditions was false and using OR operator. [#9318](https://github.com/grafana/grafana/issues/9318) # 4.6.2 (2017-11-16) From b8bfe51b030709dc04b5bfb8eef1cf1c175deffc Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 13 Dec 2017 14:20:07 +0100 Subject: [PATCH 505/584] ux: wip - Login animation POC (#9879) --- public/app/core/angular_wrappers.ts | 2 + public/app/core/components/Login/Login.tsx | 1228 ++++++++++++++++++++ public/sass/pages/_login.scss | 108 +- 3 files changed, 1337 insertions(+), 1 deletion(-) create mode 100644 public/app/core/components/Login/Login.tsx diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 4cb3ca513cc..1ac587cb205 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -2,9 +2,11 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { PasswordStrength } from './components/PasswordStrength'; import PageHeader from './components/PageHeader/PageHeader'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; +// import { Login } from './components/Login/Login'; export function registerAngularDirectives() { react2AngularDirective('passwordStrength', PasswordStrength, ['password']); react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']); react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); + // react2AngularDirective('login', Login, []); } diff --git a/public/app/core/components/Login/Login.tsx b/public/app/core/components/Login/Login.tsx new file mode 100644 index 00000000000..b08103cf28a --- /dev/null +++ b/public/app/core/components/Login/Login.tsx @@ -0,0 +1,1228 @@ +import React, { Component } from 'react'; + +const elementsInWidth = 22; +const elementRows = 50; + +// const bgElement = () => ( + +// ); + +const BgElements = ({ flipIndex }) => { + return Array.from(Array(elementsInWidth * elementRows)).map((el, index) => { + // const bgColor1 = getColor(index) + // const bgColor2 = getColor(index+2); + return (
    ); + }); +}; + +const getRandomInt = (min, max) => { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive +}; + +export class Login extends Component { + constructor (props) { + super(props); + this.nrOfElements = elementsInWidth * elementRows; + + this.state = { + flipIndex: null + }; + + this.flipElements = this.flipElements.bind(this); + } + + flipElements() { + const elementIndexToFlip = getRandomInt(0, this.nrOfElements - 1); + this.setState(prevState => { + return { + ...prevState, + flipIndex: elementIndexToFlip + }; + }); + console.log('elementIndexToFlip', elementIndexToFlip); + } + + componentWillMount() { + var intervalID = setInterval(this.flipElements, 3000); + } + + render() { + console.log('re-render!', this.state.flipIndex); + + return ( + + + + + ); + } +} + + +const getColor = index => { + const colors = [ + '#14161A', + '#111920', + '#121E27', + '#13212B', + '#122029', + '#101C24', + '#0F1B23', + '#0F1B22', + '#111C24', + '#101A22', + '#101A21', + '#111D25', + '#101E27', + '#101D26', + '#101B23', + '#11191E', + '#131519', + '#131518', + '#101B21', + '#121F29', + '#10232D', + '#11212B', + '#0E1C25', + '#0E1C24', + '#111F29', + '#11222B', + '#101E28', + '#102028', + '#111F2A', + '#11202A', + '#11191F', + '#121417', + '#12191D', + '#101D25', + '#11212C', + '#10242F', + '#0F212B', + '#0F1E27', + '#0F1D26', + '#0F1F29', + '#0F2029', + '#11232E', + '#10212B', + '#10222C', + '#0F202A', + '#112530', + '#10252F', + '#0F242E', + '#10222D', + '#10202A', + '#0F1C24', + '#0F1E28', + '#0F212A', + '#0F222B', + '#14171A', + '#0F1A20', + '#0F1C25', + '#10232E', + '#0E202A', + '#0E1E27', + '#0E1D26', + '#0F202B', + '#11232F', + '#102632', + '#102530', + '#122430', + '#0F1B21', + '#0F212C', + '#0E1F29', + '#112531', + '#0F2734', + '#0F2835', + '#0D1B23', + '#0F1A21', + '#0F1A23', + '#0F1D27', + '#0F222D', + '#102430', + '#102531', + '#10222E', + '#0F232D', + '#0E2633', + '#0E2734', + '#0F2834', + '#0E2835', + '#0F2633', + '#0F2532', + '#0E1A22', + '#0D1C24', + '#0F2735', + '#0F2937', + '#102A38', + '#112938', + '#102A39', + '#0F2A38', + '#102836', + '#0E1B23', + '#0F2938', + '#102A3A', + '#102D3D', + '#0F3040', + '#102D3E', + '#0F2E3E', + '#112C3B', + '#102B3B', + '#102B3A', + '#102D3C', + '#0F2A39', + '#0F2634', + '#0E2029', + '#0E1A21', + '#0F2B39', + '#0F2D3D', + '#0F2F40', + '#0E3142', + '#113445', + '#122431', + '#102E3E', + '#0F3345', + '#0E2F40', + '#0F3143', + '#102C3C', + '#0F2B3A', + '#0F1F28', + '#0F3344', + '#113548', + '#113C51', + '#144258', + '#103A4E', + '#103A4F', + '#103547', + '#10364A', + '#103649', + '#0F3448', + '#102C3A', + '#0F2836', + '#103447', + '#0F384C', + '#123F55', + '#15445A', + '#133F55', + '#103B50', + '#113E54', + '#103446', + '#0F3A4F', + '#0F3548', + '#0D3142', + '#102C3B', + '#0E2937', + '#103D52', + '#0E3544', + '#184C65', + '#154760', + '#14435B', + '#15465F', + '#124159', + '#0F3D53', + '#103C51', + '#0F3447', + '#0E3243', + '#113143', + '#113D53', + '#184B64', + '#184D67', + '#184C66', + '#174A63', + '#15455C', + '#13425A', + '#14445A', + '#10384C', + '#0E3446', + '#10181E', + '#103243', + '#0F384D', + '#14455C', + '#164761', + '#164C66', + '#1D627D', + '#12425A', + '#164A63', + '#14465D', + '#13435A', + '#0A2B38', + '#0F3446', + '#0D2F40', + '#0D2F3F', + '#0F2531', + '#102937', + '#10384B', + '#0F3649', + '#184E68', + '#1A5472', + '#184D68', + '#154A63', + '#19506B', + '#19536F', + '#1A4F69', + '#144760', + '#114058', + '#0E3A4F', + '#0E3547', + '#0C3042', + '#0E1B24', + '#11222C', + '#154C65', + '#1A5776', + '#1B5675', + '#113847', + '#1A5371', + '#194E68', + '#0E2D3D', + '#112D3B', + '#113D52', + '#18516D', + '#1A5979', + '#1B5878', + '#19526E', + '#1A526E', + '#13435B', + '#0F3E55', + '#0B374C', + '#0E3448', + '#0D2E3F', + '#0F2B3B', + '#112E3E', + '#113B50', + '#15465D', + '#1A526F', + '#1E5E81', + '#1D5B7B', + '#1A5777', + '#154456', + '#113949', + '#0D394E', + '#0F3549', + '#0F2C3B', + '#0E2733', + '#112E3D', + '#123D52', + '#10394C', + '#1B5674', + '#1A5370', + '#144861', + '#104058', + '#104159', + '#0E384C', + '#0D2D3D', + '#0E2533', + '#112C3A', + '#1B5979', + '#1B5C7D', + '#1A5675', + '#104057', + '#0F3C51', + '#11425A', + '#0E394D', + '#0C3243', + '#0E2735', + '#112F3E', + '#134158', + '#1D5E7F', + '#1D6083', + '#1C5877', + '#1A5573', + '#184D66', + '#164962', + '#0F3D54', + '#0E3D53', + '#0E3447', + '#0F2A3A', + '#0F2936', + '#101F28', + '#103040', + '#124056', + '#164E69', + '#144B64', + '#164D66', + '#0F3E54', + '#0E3B51', + '#0D3346', + '#0E1F27', + '#124158', + '#164961', + '#0E3C52', + '#19506C', + '#0F2C3C', + '#0E3244', + '#0E2A39', + '#0E2938', + '#113040', + '#134057', + '#1A5471', + '#154B63', + '#1C597A', + '#164760', + '#10374B', + '#0E374C', + '#0E384D', + '#11242F', + '#10394D', + '#18526E', + '#154B65', + '#103F55', + '#0D3345', + '#102532', + '#102029', + '#113142', + '#1B5973', + '#1A516B', + '#1C5979', + '#1C5A7A', + '#184A65', + '#164C65', + '#0D3041', + '#123142', + '#123E54', + '#1B5877', + '#1A5574', + '#1C5878', + '#13435C', + '#0F374B', + '#0C3143', + '#112F40', + '#123C51', + '#174E68', + '#1D5C7D', + '#14465F', + '#0F3F56', + '#0B3041', + '#123243', + '#15435B', + '#19516D', + '#1D5D7E', + '#1C5C7D', + '#184F69', + '#11374B', + '#103E54', + '#0E3143', + '#0F2D3C', + '#11242E', + '#133445', + '#1A5674', + '#1D6184', + '#1F658B', + '#0D3A50', + '#0C374B', + '#154862', + '#164B64', + '#154961', + '#0D384D', + '#102631', + '#113242', + '#134259', + '#185270', + '#1D6386', + '#1E678C', + '#1C5978', + '#0D3549', + '#0F2632', + '#184961', + '#1D5E80', + '#1E6488', + '#1F678D', + '#1E5B7C', + '#164862', + '#19526D', + '#113C52', + '#15455E', + '#0F2F3F', + '#144259', + '#194D67', + '#1D6991', + '#195777', + '#19516C', + '#103F56', + '#144660', + '#0D2E3E', + '#10212A', + '#113141', + '#16455C', + '#1D5B7C', + '#1F6589', + '#1E668C', + '#1E5F81', + '#0F3B50', + '#0D3244', + '#164A64', + '#184E69', + '#0E364A', + '#0E2E3E', + '#10222B', + '#19475E', + '#1B5A7B', + '#1E5D7F', + '#1E678D', + '#1E6184', + '#19506A', + '#1B5370', + '#1B5573', + '#0E3041', + '#122E3E', + '#16455B', + '#195370', + '#1D6489', + '#1D6B93', + '#164A65', + '#154A64', + '#1A5572', + '#1D6082', + '#1F6286', + '#1D6C94', + '#1E709A', + '#174A65', + '#1B526F', + '#1E6589', + '#1D6384', + '#0D3143', + '#0E2F3F', + '#174760', + '#1F6487', + '#1D668C', + '#0D2F41', + '#103B4F', + '#1C5C7E', + '#1F688F', + '#1C5B7C', + '#164D68', + '#1D6285', + '#0D364A', + '#1D5A7A', + '#1E6990', + '#1D6488', + '#18516B', + '#1A506B', + '#0E3B50', + '#0E3548', + '#124259', + '#13455C', + '#14485F', + '#1E5C7D', + '#122D3C', + '#1E6E98', + '#1E6A91', + '#1E6286', + '#1E6C95', + '#1D6990', + '#101F29', + '#174A62', + '#10394E', + '#1D6D96', + '#1E688E', + '#1D6E97', + '#1E6C94', + '#0E394E', + '#112B39', + '#195270', + '#1E668B', + '#1E6386', + '#1D6385', + '#0C3142', + '#1E6083', + '#1E729C', + '#1F709A', + '#1E6F98', + '#1D5F81', + '#1F688D', + '#1C6488', + '#1D6588', + '#1C6A93', + '#1E658B', + '#1F6C95', + '#0D3C52', + '#1C6385', + '#1E5F82', + '#0E3D54', + '#0F3244', + '#18485F', + '#1E6991', + '#1C5B7B', + '#1F6082', + '#0F3346', + '#18536F', + '#114056', + '#1D6B92', + '#1B5776', + '#0F3C52', + '#1E6890', + '#1F688E', + '#0C394E', + '#0F1D25', + '#1F6386', + '#1E688D', + '#1F6488', + '#20668C', + '#1D5978', + '#0F3D52', + '#0F1E26', + '#13465F', + '#0D374C', + '#1B5C7C', + '#0E1A23', + '#0F374A', + '#1B5574', + '#0F394C', + '#0E2A38', + '#102A37', + '#18506B', + '#1E5A7A', + '#0F3245', + '#0E2E3F', + '#1E678E', + '#1C5D7E', + '#1A5A7A', + '#0E2837', + '#102733', + '#0F3B51', + '#15475E', + '#1E6B93', + '#1E648A', + '#194961', + '#0F3A4E', + '#0E1D25', + '#194F69', + '#103345', + '#0F394D', + '#102B39', + '#103E55', + '#1B5572', + '#164861', + '#174861', + '#113B4F', + '#102936', + '#0F3041', + '#174961', + '#113E53', + '#134056', + '#124057', + '#194B63', + '#0E364B', + '#15445B', + '#16475E', + '#102F3F', + '#16485F', + '#0F2E3D', + '#101920', + '#12222C', + '#122C3B', + '#144157', + '#123B50', + '#16465D', + '#184960', + '#112B3A', + '#12232F', + '#132430', + '#113344', + '#11394C', + '#113649', + '#11364A', + '#133F56', + '#121D25', + '#112733', + '#112A38', + '#0F1F2A', + '#113447', + '#113A4E', + '#0F222C', + '#13222B', + '#112836', + '#102F3E', + '#113243', + '#123445', + '#12374B', + '#121E26', + '#122531', + '#11303F', + '#0D1D25', + '#102835', + '#112834', + '#101C23', + '#111C23', + '#12212B', + '#11222D', + '#0E1B22', + '#0E1D27', + '#121C22', + '#12202A', + '#101A20', + '#13191E', + '#111E28', + '#11212D', + '#0F1B24', + '#0F1C23', + '#13181D', + '#15171A', + '#121D23', + '#121F27', + '#111E27', + '#101B22', + '#121F28', + '#111E26', + '#101D24', + '#111C22', + '#12161E', + '#101925', + '#121E2D', + '#112033', + '#111E2F', + '#0F1B29', + '#0F1A28', + '#101B2A', + '#0E1A27', + '#101C2B', + '#111D2D', + '#111D2B', + '#0F1B28', + '#101923', + '#13161D', + '#13161C', + '#0F1A26', + '#101E2F', + '#112235', + '#102031', + '#0F1B2A', + '#112031', + '#102032', + '#101D2E', + '#121F2F', + '#112133', + '#101E30', + '#101F30', + '#102336', + '#101B2C', + '#0F1C2B', + '#111E2E', + '#0F2134', + '#102236', + '#0F2133', + '#101F31', + '#0F2438', + '#102337', + '#102235', + '#102133', + '#11171E', + '#101F2F', + '#102030', + '#102234', + '#102132', + '#12181F', + '#0F1A25', + '#0F2135', + '#0F1F30', + '#0F1C2D', + '#101D2C', + '#0F2033', + '#0E2338', + '#0F2237', + '#0F2236', + '#0B243B', + '#0D2338', + '#0E1A26', + '#0F1D2E', + '#0F2032', + '#0D2339', + '#0B253F', + '#0A253F', + '#0A253E', + '#0C2439', + '#0E1925', + '#0E2135', + '#0F2235', + '#0A243A', + '#08253E', + '#09253E', + '#0A263F', + '#0A243C', + '#0B233B', + '#0E1A28', + '#0D1A26', + '#09253F', + '#0A2743', + '#0B2844', + '#0B2641', + '#0A2744', + '#0A2844', + '#0B2743', + '#092745', + '#0F2337', + '#101D2D', + '#092743', + '#092846', + '#0E2B4C', + '#102E4F', + '#0E2C4D', + '#0B2A49', + '#082947', + '#0D2B4B', + '#0C2A4A', + '#092946', + '#082845', + '#0C2B4B', + '#0F2D4E', + '#103051', + '#133257', + '#0E2D4E', + '#143156', + '#112F51', + '#0B243A', + '#082744', + '#092844', + '#123054', + '#143359', + '#173A64', + '#183F6E', + '#173F6D', + '#153961', + '#163962', + '#133358', + '#15345B', + '#14345A', + '#102F50', + '#0A2948', + '#082844', + '#092641', + '#16375F', + '#193C69', + '#174170', + '#173E6B', + '#163A63', + '#173D69', + '#183D6A', + '#15365E', + '#112E50', + '#0A2A49', + '#082743', + '#0E1927', + '#173C68', + '#13487E', + '#164476', + '#174375', + '#193F6F', + '#173B66', + '#163B65', + '#082A48', + '#0A2641', + '#09243C', + '#174171', + '#14477C', + '#124980', + '#14487F', + '#174374', + '#15467B', + '#184172', + '#17406F', + '#184070', + '#163C67', + '#16355D', + '#123256', + '#0E1B29', + '#0F1923', + '#113052', + '#184274', + '#164579', + '#13477C', + '#193E6D', + '#0A243E', + '#0B233A', + '#0D1A29', + '#0B2742', + '#17365E', + '#163860', + '#124A84', + '#095191', + '#114A83', + '#0D4D8A', + '#0C4D8C', + '#104B85', + '#15477E', + '#174477', + '#183862', + '#0A233A', + '#092947', + '#09243D', + '#173963', + '#194173', + '#085396', + '#085394', + '#114B87', + '#144983', + '#094F8E', + '#075090', + '#0F4C89', + '#215287', + '#0E1A29', + '#184376', + '#0C4D8B', + '#07549A', + '#0A4E8D', + '#0F4C88', + '#0A4E8C', + '#174273', + '#193C6A', + '#0B2948', + '#0B2C4B', + '#0C4E8D', + '#1259A4', + '#0C579E', + '#0D4D8B', + '#095397', + '#085397', + '#085295', + '#144880', + '#173861', + '#15335A', + '#0F2C4D', + '#0C2949', + '#0B4E8D', + '#08559C', + '#07508F', + '#154578', + '#17365F', + '#122F53', + '#111D2C', + '#092A48', + '#08559D', + '#08559E', + '#0C56A1', + '#164271', + '#163E6A', + '#194071', + '#082642', + '#0F1E30', + '#0D2D4D', + '#114C87', + '#0E59A3', + '#135BA6', + '#085498', + '#085497', + '#095192', + '#0E4D8B', + '#0C4E8A', + '#134982', + '#17457B', + '#121F2E', + '#183E6C', + '#153E69', + '#07508E', + '#173F6C', + '#193D6B', + '#112D4F', + '#0A243B', + '#072946', + '#111E2D', + '#0B2740', + '#10497F', + '#17406E', + '#084F8D', + '#104A80', + '#0E2E4F', + '#143358', + '#16365D', + '#0A2742', + '#13477B', + '#154474', + '#104C86', + '#095291', + '#0B4F8E', + '#114A80', + '#095090', + '#075296', + '#163760', + '#2D6DB5', + '#0C2843', + '#0C233A', + '#153A62', + '#14467A', + '#075498', + '#085293', + '#09263F', + '#122030', + '#09559D', + '#0F4B83', + '#08549A', + '#14375D', + '#085499', + '#075499', + '#0A243D', + '#143E68', + '#10497E', + '#074F8E', + '#085496', + '#0C58A3', + '#065499', + '#085190', + '#0A2B4A', + '#104C88', + '#0D4F8E', + '#0F58A2', + '#0B569B', + '#0D58A1', + '#134A81', + '#09559C', + '#0A5293', + '#114B86', + '#0D2C4C', + '#103255', + '#16457A', + '#074F8C', + '#07559C', + '#185DA9', + '#1D61AD', + '#175CA8', + '#16406D', + '#153C65', + '#0E243A', + '#144679', + '#085192', + '#1A5EAC', + '#1D61AE', + '#11497F', + '#12487E', + '#0C243C', + '#123155', + '#0F59A3', + '#1B5FAB', + '#1E61AD', + '#145CA4', + '#0E599F', + '#11497E', + '#094F8D', + '#15345A', + '#134A85', + '#165CA8', + '#2263AF', + '#124466', + '#0A518F', + '#08569D', + '#16416F', + '#0B2B4A', + '#124A83', + '#0C57A2', + '#1E60AD', + '#1E62AE', + '#165DA8', + '#1059A4', + '#15406C', + '#0A4F8E', + '#12365A', + '#0A5191', + '#16355C', + '#1C5EAB', + '#155CA7', + '#085292', + '#174478', + '#153258', + '#111F2F', + '#174272', + '#1159A5', + '#1C5EAC', + '#2F74BB', + '#0C58A2', + '#0D59A3', + '#14477D', + '#132F53', + '#155BA6', + '#195FAA', + '#2366B1', + '#2967B2', + '#14477E', + '#1B5EAB', + '#175DA8', + '#0F4C86', + '#065090', + '#1C5FAC', + '#185CA8', + '#0D58A3', + '#0C4E8C', + '#134981', + '#14416D', + '#0F5AA5', + '#1F63AF', + '#114B88', + '#09508E', + '#0A569D', + '#195DAA', + '#0F1D2F', + '#1059A2', + '#0E599E', + '#2063AF', + '#1F63AE', + '#1A5EAA', + '#0C57A0', + '#195EAA', + '#1A5EA9', + '#0E4E8A', + '#12487D', + '#185DAA', + '#175EAA', + '#0A508E', + '#1559A6', + '#0E58A3', + '#095399', + '#0B4E8B', + '#0B569F', + '#0C57A1', + '#2967B1', + '#2365B0', + '#2163AE', + '#1A5DAA', + '#195EAB', + '#1E5FAC', + '#2564AF', + '#2767B1', + '#2766B1', + '#0D5A9F', + '#2062AE', + '#1F61AD', + '#195FAB', + '#0D4E8D', + '#173760', + '#111D2E', + '#09518F', + '#1A5FAC', + '#135BA7', + '#085291', + '#183761', + '#0B2845', + '#113457', + '#075393', + '#185EA9', + '#2B69B3', + '#2A67B2', + '#2867B1', + '#155DA8', + '#135CA6', + '#135AA5', + '#114980', + '#2566B1', + '#2064AF', + '#2364AF', + '#13365B', + '#154475', + '#08549B', + '#164373', + '#085392', + '#144576', + '#12497E', + '#0E5392', + '#135BA3', + '#0C5395', + '#0C5291', + '#0E579C', + '#0E5290', + '#134C83', + '#2163AC', + '#195CA6', + '#0D4E8C', + '#082945', + '#133256', + '#0E2F50', + '#105AA6', + '#134677', + '#144475', + '#145BA7', + '#154270', + '#1D60AD', + '#09569B', + '#09243E', + '#134A86', + '#0E59A4', + '#0A4E8B', + '#0E4B83', + '#1D5EAC', + '#101C2A', + '#134A84', + '#0E518F', + '#145CA7', + '#0E5699', + '#145BA5', + '#095292', + '#15416E', + '#153D67', + '#153F6B', + '#125AA5', + '#16406E', + '#0E1B27', + '#0D4F8C', + '#0F58A3', + '#114A82', + '#09569C', + '#0C2339', + '#0E1B28', + '#0D59A4', + '#07559D', + '#08569E', + '#095190', + '#0B253E', + '#0C2B49', + '#2264AF', + '#09549A', + '#09569F', + '#163D68', + '#0C263F', + '#143960', + '#183A65', + '#075496', + '#0C579F', + '#085191', + '#102438', + '#075295', + '#082946', + '#102437', + '#0C2642', + '#101C29', + '#0C253E', + '#15355C', + '#0B2E4D', + '#0F3253', + '#154577', + '#16335B', + '#0F1925', + '#0C2742', + '#0B2946', + '#0E2C4B', + '#0E2B48', + '#0E2237', + '#102237', + '#0B253D', + '#0A2946', + '#0C2841', + '#0D2A47', + '#0C2C4A', + '#08253F', + '#08243D', + '#111C2B', + '#0C2844', + '#0C2945', + '#0D243A', + '#122134', + '#0B2642', + '#113154', + '#113255', + '#0A2642', + '#0A2945', + '#0B263F', + '#0D2E4E', + '#0F1E2E', + '#0A2845', + '#0D2439', + '#0F1A29', + '#101C2E', + '#111923', + '#13181F', + '#111D2F', + '#111F30', + '#121E30', + '#121E2E', + '#101B27', + '#101A27', + '#13171F' + ]; + return colors[index]; + +}; diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index fac7bb2c8aa..6c27cd864f4 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -324,4 +324,110 @@ select:-webkit-autofill:focus { .login-form-input { min-width: 300px; } -} \ No newline at end of file +} + + +login-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + perspective: 1000px; + + .login-bg { + width: 4%; + height: 10px; + // background: hotpink; + // border:1px solid #0F1926; + float: left; + transition: 1s ease-in-out; + z-index: 1; + transform-style: preserve-3d; + + &.login-bg-flip { + transform: rotateY(180deg); + } + + + &:before, &:after { + backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + content: ''; + display: block; + } + + &:before { + z-index: 2; + transform: rotateY(0deg); + background-color: #215392; + } + + &:after { + transform: rotateY(180deg); + background-color: rgb(25, 50, 80); + } + + &:nth-child(3n+0) { + &:before { + background-color: #0f253c; + } + &:after { + background-color: blue; + } + } + + + &:nth-child(3n+1) { + &:before { + background-color: #102438; + } + &:after { + background-color: blue; + } + } + + &:nth-child(3n+2) { + &:before { + background-color: #19314e; + } + &:after { + background-color: blue; + } + } + + &:nth-child(3n+3) { + &:before { + background-color: #215392; + } + &:after { + background-color: blue; + } + } + + // &:nth-child(3n+5) { + // &:before { + // background-color: hotpink; + // } + // &:after { + // background-color: blue; + // } + // } + + + + } +} + +login-bg-fx { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background-image: -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(18, 22, 29, 1) 100%); + z-index:2; +} From dfde6e75ede90cc75ea9a45af446176a259f6e83 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 14:41:28 +0100 Subject: [PATCH 506/584] changelog: adds note about closing #10151 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ad3875e104..5f491e14e38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,7 @@ From `/etc/grafana/datasources` to `/etc/grafana/provisioning/datasources` when * **Gzip**: Fixes bug gravatar images when gzip was enabled [#5952](https://github.com/grafana/grafana/issues/5952) * **Alert list**: Now shows alert state changes even after adding manual annotations on dashboard [#9951](https://github.com/grafana/grafana/issues/9951) * **Alerting**: Fixes bug where rules evaluated as firing when all conditions was false and using OR operator. [#9318](https://github.com/grafana/grafana/issues/9318) +* **Cloudwatch**: CloudWatch no longer display metrics' default alias [#10151](https://github.com/grafana/grafana/issues/10151), thx [@mtanda](https://github.com/mtanda) # 4.6.2 (2017-11-16) From 3b783216fad6dee1f855a6d4d76959bb3fe63e3c Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 15:05:43 +0100 Subject: [PATCH 507/584] added select-wrapper to where it was missing for unified look --- public/app/features/admin/partials/edit_org.html | 8 ++++++-- public/app/features/admin/partials/edit_user.html | 14 ++++++++++---- public/app/features/org/partials/invite.html | 2 +- public/app/features/org/partials/orgApiKeys.html | 4 +++- public/app/features/org/partials/orgUsers.html | 2 +- .../datasource/cloudwatch/partials/config.html | 2 +- .../datasource/elasticsearch/partials/config.html | 12 ++++++++---- .../datasource/graphite/partials/config.html | 4 +++- public/sass/components/_gf-form.scss | 8 ++++---- 9 files changed, 37 insertions(+), 19 deletions(-) diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index c50cf2c7701..51ca261c183 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -27,8 +27,12 @@ {{orgUser.login}} {{orgUser.email}} - +
    + + + +
    diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 7686ac7f079..c047b3ac160 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -59,8 +59,10 @@
    - Role - + Role + + +
    @@ -81,8 +83,12 @@ {{org.name}} Current - +
    + + + +
    diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 330441fc88d..2c0eafaba16 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -17,7 +17,7 @@ Name
    -
    +
    Role diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 96dba65d1ad..a2b4ceb6670 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -12,7 +12,9 @@
    Role - + + +
    diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 7ab828562f0..8dc2b76a817 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -75,7 +75,7 @@ {{user.email}} {{user.lastSeenAtAge}} -
    +
    diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html index 1eb74923ab6..2a19e95f88c 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/config.html +++ b/public/app/plugins/datasource/cloudwatch/partials/config.html @@ -1,7 +1,7 @@

    CloudWatch details

    -
    +
    diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index 42ae4265371..da23e9ddab1 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -11,8 +11,10 @@
    - Pattern - + Pattern + + +
    @@ -22,8 +24,10 @@
    - Version - + Version + + +
    Max concurrent Shard Requests diff --git a/public/app/plugins/datasource/graphite/partials/config.html b/public/app/plugins/datasource/graphite/partials/config.html index 804d339452e..2c31aaf86b4 100644 --- a/public/app/plugins/datasource/graphite/partials/config.html +++ b/public/app/plugins/datasource/graphite/partials/config.html @@ -13,6 +13,8 @@ This option controls what functions are available in the Graphite query editor. - + + +
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 5ee712b0810..0571df226cb 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -53,6 +53,10 @@ $input-border: 1px solid $input-border-color; flex-direction: row; flex-wrap: wrap; align-content: flex-start; + + .gf-form + .gf-form { + margin-right: $gf-form-margin; + } } .gf-form-button-row { @@ -89,10 +93,6 @@ $input-border: 1px solid $input-border-color; margin-right: $gf-form-margin; } -.gf-form + .gf-form { - margin-right: $gf-form-margin; -} - .gf-form-pre { display: block; flex-grow: 1; From 313735bd75699d1189ea62e047edd43a5cd35ed2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 15:51:59 +0100 Subject: [PATCH 508/584] search: worked on search results --- pkg/services/search/models.go | 1 + pkg/services/sqlstore/dashboard.go | 1 + .../components/search/search_results.html | 31 ++-- public/app/core/routes/routes.ts | 6 +- public/app/core/services/search_srv.ts | 139 ++++++++---------- public/app/core/specs/search_srv.jest.ts | 5 +- .../dashboard/folder_dashboards_ctrl.ts | 6 +- .../features/dashboard/folder_page_loader.ts | 8 +- .../dashboard/folder_permissions_ctrl.ts | 2 +- .../dashboard/folder_settings_ctrl.ts | 2 +- .../features/plugins/partials/ds_edit.html | 4 +- public/sass/components/_search.scss | 19 ++- 12 files changed, 111 insertions(+), 113 deletions(-) diff --git a/pkg/services/search/models.go b/pkg/services/search/models.go index dbd4f21a71e..cf510ed8462 100644 --- a/pkg/services/search/models.go +++ b/pkg/services/search/models.go @@ -15,6 +15,7 @@ type Hit struct { Id int64 `json:"id"` Title string `json:"title"` Uri string `json:"uri"` + Slug string `json:"slug"` Type HitType `json:"type"` Tags []string `json:"tags"` IsStarred bool `json:"isStarred"` diff --git a/pkg/services/sqlstore/dashboard.go b/pkg/services/sqlstore/dashboard.go index af27dad59de..31a42a7b3b3 100644 --- a/pkg/services/sqlstore/dashboard.go +++ b/pkg/services/sqlstore/dashboard.go @@ -260,6 +260,7 @@ func makeQueryResult(query *search.FindPersistedDashboardsQuery, res []Dashboard Id: item.Id, Title: item.Title, Uri: "db/" + item.Slug, + Slug: item.Slug, Type: getHitType(item), FolderId: item.FolderId, FolderTitle: item.FolderTitle, diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 324654b9815..8cf5505186b 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -1,21 +1,21 @@
    - +
    + ng-show="ctrl.editable" + on-change="ctrl.selectionChanged($event)" + checked="section.checked" + switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
    {{::section.title}} -
    -   -
    - +     + + + - +
    @@ -23,10 +23,10 @@
    + ng-show="ctrl.editable" + on-change="ctrl.selectionChanged()" + checked="item.checked" + switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
    @@ -34,9 +34,6 @@
    {{::item.title}}
    -
    - {{::item.folderTitle}} -
    diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 3f6d4916e77..1f5b8cacf0e 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -78,17 +78,17 @@ function setupAngularRoutes($routeProvider, $locationProvider) { controller : 'CreateFolderCtrl', controllerAs: 'ctrl', }) - .when('/dashboards/folder/:folderId/:type/:slug/permissions', { + .when('/dashboards/folder/:folderId/:slug/permissions', { templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html', controller : 'FolderPermissionsCtrl', controllerAs: 'ctrl', }) - .when('/dashboards/folder/:folderId/:type/:slug/settings', { + .when('/dashboards/folder/:folderId/:slug/settings', { templateUrl: 'public/app/features/dashboard/partials/folder_settings.html', controller : 'FolderSettingsCtrl', controllerAs: 'ctrl', }) - .when('/dashboards/folder/:folderId/:type/:slug', { + .when('/dashboards/folder/:folderId/:slug', { templateUrl: 'public/app/features/dashboard/partials/folder_dashboards.html', controller : 'FolderDashboardsCtrl', controllerAs: 'ctrl', diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index 52f008e1812..69341757a45 100644 --- a/public/app/core/services/search_srv.ts +++ b/public/app/core/services/search_srv.ts @@ -84,105 +84,96 @@ export class SearchSrv { }); } - private getDashboardsAndFolders(sections) { - const rootFolderId = 0; - - let query = { - folderIds: [rootFolderId], - }; - - return this.backendSrv.search(query).then(results => { - for (let hit of results) { - if (hit.type === 'dash-folder') { - sections[hit.id] = { - id: hit.id, - title: hit.title, - items: [], - icon: 'fa fa-folder', - score: _.keys(sections).length, - uri: hit.uri, - toggle: this.toggleFolder.bind(this), - }; - } - } - - sections[0] = { - id: 0, - title: 'Root', - items: [], - icon: 'fa fa-folder-open', - score: _.keys(sections).length, - expanded: true, - }; - - for (let hit of results) { - if (hit.type === 'dash-folder') { - continue; - } - let section = sections[hit.folderId || 0]; - if (section) { - section.items.push(this.transformToViewModel(hit)); - } else { - console.log('Error: dashboard returned from browse search but not folder', hit.id, hit.folderId); - } - } - }); + private transformToViewModel(hit) { + hit.url = 'dashboard/db/' + hit.slug; + return hit; } - private browse(options) { + search(options) { let sections: any = {}; - let promises = []; + let query = _.clone(options); + let hasFilters = options.query || + (options.tag && options.tag.length > 0) || options.starred || + (options.folderIds && options.folderIds.length > 0); - if (!options.skipRecent) { + if (!options.skipRecent && !hasFilters) { promises.push(this.getRecentDashboards(sections)); } - if (!options.skipStarred) { + if (!options.skipStarred && !hasFilters) { promises.push(this.getStarred(sections)); } - promises.push(this.getDashboardsAndFolders(sections)); + query.folderIds = query.folderIds || []; + if (!hasFilters) { + query.folderIds = [0]; + } + + promises.push(this.backendSrv.search(query).then(results => { + return this.handleSearchResult(sections, results); + })); return this.$q.all(promises).then(() => { return _.sortBy(_.values(sections), 'score'); }); } - private transformToViewModel(hit) { - hit.url = 'dashboard/' + hit.uri; - return hit; - } - - search(options) { - if (!options.folderIds && !options.query && (!options.tag || options.tag.length === 0) && !options.starred) { - return this.browse(options); + private handleSearchResult(sections, results) { + if (results.length === 0) { + return sections; } - let query = _.clone(options); - query.folderIds = options.folderIds || []; - query.type = 'dash-db'; + // create folder index + for (let hit of results) { + if (hit.type === 'dash-folder') { + sections[hit.id] = { + id: hit.id, + title: hit.title, + expanded: false, + items: [], + toggle: this.toggleFolder.bind(this), + url: `dashboards/folder/${hit.id}/${hit.slug}`, + icon: 'fa fa-folder', + score: _.keys(sections).length, + }; + } + } - return this.backendSrv.search(query).then(results => { - if (results.length === 0) { - return results; + for (let hit of results) { + if (hit.type === 'dash-folder') { + continue; } - let section = { - hideHeader: true, - items: [], - expanded: true, - }; - - for (let hit of results) { - if (hit.type === 'dash-folder') { - continue; + let section = sections[hit.folderId || 0]; + if (!section) { + if (hit.folderId) { + section = { + id: hit.folderId, + title: hit.folderTitle, + url: `dashboards/folder/${hit.folderId}/${hit.folderSlug}`, + items: [], + icon: 'fa fa-folder-open', + toggle: this.toggleFolder.bind(this), + score: _.keys(sections).length, + }; + } else { + section = { + id: 0, + title: 'Root', + items: [], + icon: 'fa fa-folder-open', + toggle: this.toggleFolder.bind(this), + score: _.keys(sections).length, + }; } - section.items.push(this.transformToViewModel(hit)); + // add section + sections[hit.folderId || 0] = section; } - return [section]; - }); + section.expanded = true; + section.items.push(this.transformToViewModel(hit)); + } } private toggleFolder(section) { diff --git a/public/app/core/specs/search_srv.jest.ts b/public/app/core/specs/search_srv.jest.ts index 649cfbf00dd..f3135aa5f58 100644 --- a/public/app/core/specs/search_srv.jest.ts +++ b/public/app/core/specs/search_srv.jest.ts @@ -214,9 +214,8 @@ describe('SearchSrv', () => { expect(backendSrvMock.search.mock.calls[0][0].folderIds).toHaveLength(0); }); - it('should place all results in a single section', () => { - expect(results).toHaveLength(1); - expect(results[0].hideHeader).toBe(true); + it('should group results by folder', () => { + expect(results).toHaveLength(2); }); }); diff --git a/public/app/features/dashboard/folder_dashboards_ctrl.ts b/public/app/features/dashboard/folder_dashboards_ctrl.ts index afe7685f5a0..66358fed49d 100644 --- a/public/app/features/dashboard/folder_dashboards_ctrl.ts +++ b/public/app/features/dashboard/folder_dashboards_ctrl.ts @@ -6,10 +6,12 @@ export class FolderDashboardsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv, private $routeParams) { - if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + if (this.$routeParams.folderId && this.$routeParams.slug) { this.folderId = $routeParams.folderId; - new FolderPageLoader(this.backendSrv, this.$routeParams).load(this, this.folderId, 'manage-folder-dashboards'); + const loader = new FolderPageLoader(this.backendSrv, this.$routeParams); + + loader.load(this, this.folderId, 'manage-folder-dashboards'); } } } diff --git a/public/app/features/dashboard/folder_page_loader.ts b/public/app/features/dashboard/folder_page_loader.ts index 23917aac085..0db18fc44a2 100644 --- a/public/app/features/dashboard/folder_page_loader.ts +++ b/public/app/features/dashboard/folder_page_loader.ts @@ -9,7 +9,7 @@ export class FolderPageLoader { icon: 'fa fa-folder-open', id: 'manage-folder', subTitle: 'Manage folder dashboards & permissions', - url: '/fsdfds', + url: '', text: '', breadcrumbs: [ { title: 'Dashboards', url: '/dashboards' }, @@ -41,11 +41,11 @@ export class FolderPageLoader { } }; - return this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => { + return this.backendSrv.getDashboard('db', this.$routeParams.slug).then(result => { const folderTitle = result.dashboard.title; ctrl.navModel.main.text = ''; ctrl.navModel.main.breadcrumbs = [ - { title: 'Dashboards', uri: '/dashboards' }, + { title: 'Dashboards', url: '/dashboards' }, { title: folderTitle } ]; @@ -65,6 +65,6 @@ export class FolderPageLoader { } createFolderUrl(folderId: number, type: string, slug: string) { - return `/dashboards/folder/${folderId}/${type}/${slug}`; + return `/dashboards/folder/${folderId}/${slug}`; } } diff --git a/public/app/features/dashboard/folder_permissions_ctrl.ts b/public/app/features/dashboard/folder_permissions_ctrl.ts index dcc8fe02d6a..d24330399e6 100644 --- a/public/app/features/dashboard/folder_permissions_ctrl.ts +++ b/public/app/features/dashboard/folder_permissions_ctrl.ts @@ -6,7 +6,7 @@ export class FolderPermissionsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv, private $routeParams) { - if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + if (this.$routeParams.folderId && this.$routeParams.slug) { this.folderId = $routeParams.folderId; new FolderPageLoader(this.backendSrv, this.$routeParams).load(this, this.folderId, 'manage-folder-permissions'); diff --git a/public/app/features/dashboard/folder_settings_ctrl.ts b/public/app/features/dashboard/folder_settings_ctrl.ts index 7d846f8ec60..a187606567e 100644 --- a/public/app/features/dashboard/folder_settings_ctrl.ts +++ b/public/app/features/dashboard/folder_settings_ctrl.ts @@ -11,7 +11,7 @@ export class FolderSettingsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv, private $routeParams, private $location) { - if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) { + if (this.$routeParams.folderId && this.$routeParams.slug) { this.folderId = $routeParams.folderId; this.folderPageLoader = new FolderPageLoader(this.backendSrv, this.$routeParams); diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 53a7405e943..69a649b132b 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -65,11 +65,11 @@
    - + - Cancel + Back

    diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 6fae1889c24..bc10f034b68 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -137,6 +137,12 @@ &:hover, &.selected { color: $text-color; } + + &:hover { + .search-section__header__link { + opacity: 1; + } + } } .search-section__header__icon { @@ -154,6 +160,13 @@ line-height: 24px; } +.search-section__header__link { + padding: 2px 10px 0; + color: $text-muted; + opacity: 0; + transition: opacity 150ms ease-in-out; +} + .search-item { @include list-item(); @@ -181,12 +194,6 @@ color: $list-item-link-color; } -.search-item__body-sub-title { - color: $text-muted; - font-size: $font-size-sm; - line-height: 9pt; -} - .search-item__icon { padding: 5px; flex: 0 0 auto; From f18eeaa9205cfe8e1ea23fc8f076f8a81cd20d24 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 16:08:19 +0100 Subject: [PATCH 509/584] change protip to go to manage dashboards --- .../components/manage_dashboards/manage_dashboards.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index a19a63a550b..a4def0dc55e 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -90,9 +90,9 @@ buttonIcon: 'gicon gicon-dashboard-new', buttonLink: '/dashboard/new?folderId={{ctrl.folderId}}', buttonTitle: 'Create Dashboard', - proTip: 'You can bulk move dashboards into this folder from the main dashboard list.', - proTipLink: 'http://docs.grafana.org/administration/provisioning/#datasources?utm_source=grafana_ds_list', - proTipLinkTitle: 'Learn more', + proTip: 'Add dashboards into your folder at ->', + proTipLink: '/dashboards', + proTipLinkTitle: 'Manage dashboards', proTipTarget: '_blank' }" />
    From 7d0ca63b7247d86e02a5dc1ef0a8b6919212c8e8 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Dec 2017 16:28:36 +0100 Subject: [PATCH 510/584] navmodel: fix for signout link on pref page without a target property on the link, the signout tab on the preferences page returned a 404. --- public/app/core/components/PageHeader/PageHeader.tsx | 2 +- public/app/core/nav_model_srv.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 5e736332ec2..cee6e59986f 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -19,7 +19,7 @@ function TabItem(tab: NavModelItem) { return (
  • - + {tab.text} diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 2807f8fc19c..85d4ccfb7e1 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -12,6 +12,7 @@ export interface NavModelItem { hideFromTabs?: boolean; divider?: boolean; children: NavModelItem[]; + target?: string; } export class NavModel { From 3c65015671a61bc9a34ee6236374544029ed4655 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 16:30:31 +0100 Subject: [PATCH 511/584] ux: refactoring login page change --- public/app/core/components/Login/Login.tsx | 4 +- public/app/core/controllers/invited_ctrl.ts | 11 +++ .../core/controllers/reset_password_ctrl.ts | 2 +- public/app/core/controllers/signup_ctrl.ts | 2 +- public/app/partials/signup_invited.html | 78 ++++++++----------- 5 files changed, 47 insertions(+), 50 deletions(-) diff --git a/public/app/core/components/Login/Login.tsx b/public/app/core/components/Login/Login.tsx index b08103cf28a..8d21ec0cd35 100644 --- a/public/app/core/components/Login/Login.tsx +++ b/public/app/core/components/Login/Login.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react'; const elementsInWidth = 22; const elementRows = 50; @@ -55,7 +55,7 @@ export class Login extends Component { - + ); } } diff --git a/public/app/core/controllers/invited_ctrl.ts b/public/app/core/controllers/invited_ctrl.ts index ed4bd1793b8..09c7d33b3ab 100644 --- a/public/app/core/controllers/invited_ctrl.ts +++ b/public/app/core/controllers/invited_ctrl.ts @@ -8,6 +8,17 @@ export class InvitedCtrl { contextSrv.sidemenu = false; $scope.formModel = {}; + $scope.navModel = { + main: { + icon: 'gicon gicon-branding', + subTitle: 'Register your Grafana account', + breadcrumbs: [ + { title: 'Login', url: '/login' }, + { title: 'Invite' }, + ] + } + }; + $scope.init = function() { backendSrv.get('/api/user/invite/' + $routeParams.code).then(function(invite) { $scope.formModel.name = invite.name; diff --git a/public/app/core/controllers/reset_password_ctrl.ts b/public/app/core/controllers/reset_password_ctrl.ts index 3bf0b1329b6..8cd97da1c6f 100644 --- a/public/app/core/controllers/reset_password_ctrl.ts +++ b/public/app/core/controllers/reset_password_ctrl.ts @@ -19,7 +19,7 @@ export class ResetPasswordCtrl { icon: 'gicon gicon-branding', subTitle: 'Reset your Grafana password', breadcrumbs: [ - { title: 'Login', uri: '/login' }, + { title: 'Login', url: '/login' }, { title: 'Reset Password' }, ] } diff --git a/public/app/core/controllers/signup_ctrl.ts b/public/app/core/controllers/signup_ctrl.ts index b88379ed6b4..9db18ad4d4e 100644 --- a/public/app/core/controllers/signup_ctrl.ts +++ b/public/app/core/controllers/signup_ctrl.ts @@ -31,7 +31,7 @@ export class SignUpCtrl { icon: 'gicon gicon-branding', subTitle: 'Register your Grafana account', breadcrumbs: [ - { title: 'Login', uri: '/login' }, + { title: 'Login', url: '/login' }, { title: 'Sign Up' }, ] } diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index 0cebd794381..c4c08c9ded8 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -1,54 +1,40 @@ -
    • -
  • -
    -
    -
    {{permission.permissionName}}
    -
    -
    -
    -
    {{permission.team}}
    -
    -
    -
    -
    • - - -
    diff --git a/public/app/plugins/panel/permissionlist/module.ts b/public/app/plugins/panel/permissionlist/module.ts deleted file mode 100644 index 62012517f86..00000000000 --- a/public/app/plugins/panel/permissionlist/module.ts +++ /dev/null @@ -1,58 +0,0 @@ -/// - -import _ from 'lodash'; -import {PanelCtrl} from 'app/plugins/sdk'; - -class PermissionListCtrl extends PanelCtrl { - static templateUrl = 'module.html'; - - userPermissions: any[]; - teamPermissions: any[]; - roles: any[]; - - panelDefaults = { - folderId: 0 - }; - - /** @ngInject */ - constructor($scope, $injector, private backendSrv) { - super($scope, $injector); - _.defaults(this.panel, this.panelDefaults); - - this.events.on('refresh', this.onRefresh.bind(this)); - this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); - - this.getPermissions(); - } - - onInitEditMode() { - this.editorTabIndex = 1; - this.addEditorTab('Options', 'public/app/plugins/panel/permissionlist/editor.html'); - } - - onRefresh() { - var promises = []; - - promises.push(this.getPermissions()); - - return Promise.all(promises) - .then(this.renderingCompleted.bind(this)); - } - - onFolderChange(folder: any) { - this.panel.folderId = folder.id; - this.refresh(); - } - - getPermissions() { - return this.backendSrv.get(`/api/dashboards/id/${this.panel.folderId}/acl`) - .then(result => { - this.userPermissions = _.filter(result, p => { return p.userId > 0;}); - this.teamPermissions = _.filter(result, p => { return p.teamId > 0;}); - // this.roles = this.setRoles(result); - }); - } - -} - -export {PermissionListCtrl, PermissionListCtrl as PanelCtrl}; diff --git a/public/app/plugins/panel/permissionlist/plugin.json b/public/app/plugins/panel/permissionlist/plugin.json deleted file mode 100644 index c52ac54c79c..00000000000 --- a/public/app/plugins/panel/permissionlist/plugin.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "type": "panel", - "name": "Permission List", - "id": "permissionlist", - - "info": { - "author": { - "name": "Grafana Project", - "url": "https://grafana.com" -}, - "logos": { - "small": "img/icn-singlestat-panel.svg", - "large": "img/icn-singlestat-panel.svg" - } - } -} From c63569b6cef812819a0484ed5f6a7e01b999e168 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 18:01:06 +0100 Subject: [PATCH 519/584] made template link look like input (#10198) --- public/app/partials/valueSelectDropdown.html | 4 ++-- public/sass/components/_submenu.scss | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html index a64f872cd2d..486b0ab1d6e 100644 --- a/public/app/partials/valueSelectDropdown.html +++ b/public/app/partials/valueSelectDropdown.html @@ -1,5 +1,5 @@
    - + {{vm.linkText}} @@ -7,7 +7,7 @@ {{tag.text}} - + diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 8cf5c02a649..6d69cfe26b6 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -38,7 +38,11 @@ .variable-value-link { padding-right: 10px; - padding: 8px 7px; + padding: $input-padding-y $input-padding-x; + background-color: $input-bg; + border: 1px solid $input-border-color; + border-radius: $input-border-radius; + color: $input-color; box-sizing: content-box; display: inline-block; color: $text-color; From e99f846a6f970543a0e549672fc304a67d9546b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 18:07:56 +0100 Subject: [PATCH 520/584] ux: minor text change to #10177 --- public/app/features/dashlinks/editor.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 86c045532e3..14d43b5bd4f 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -17,13 +17,8 @@
    What are Dashboard Links?

    - Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons on all - graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add - annotation events directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be - stored in Grafana's annotation database. + Dashboad Links allow you to place links to other dashboards and web sites directly in below the dashboard header.

    - Checkout the - Annotations documentation for more information.
    From 26b8483fb010608bd295e0e40644e1e208dbc54f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 18:20:49 +0100 Subject: [PATCH 521/584] teams: Fixes to edit team page --- public/app/features/org/partials/create_team.html | 1 + public/app/features/org/partials/team_details.html | 4 ++-- public/app/features/org/team_details_ctrl.ts | 5 ++--- public/sass/components/_modals.scss | 5 +++++ 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/public/app/features/org/partials/create_team.html b/public/app/features/org/partials/create_team.html index 02c48f4ef68..f45ad0b33a0 100644 --- a/public/app/features/org/partials/create_team.html +++ b/public/app/features/org/partials/create_team.html @@ -1,6 +1,7 @@

    + Create Team

    diff --git a/public/app/features/org/partials/team_details.html b/public/app/features/org/partials/team_details.html index fdc84f146b7..bd201e2cc3a 100644 --- a/public/app/features/org/partials/team_details.html +++ b/public/app/features/org/partials/team_details.html @@ -1,7 +1,7 @@
    -

    Edit Team

    +

    Team Details

    @@ -24,7 +24,7 @@
    - +
    diff --git a/public/app/features/org/team_details_ctrl.ts b/public/app/features/org/team_details_ctrl.ts index 598b03b46d4..e4dc91386b5 100644 --- a/public/app/features/org/team_details_ctrl.ts +++ b/public/app/features/org/team_details_ctrl.ts @@ -1,5 +1,3 @@ -/// - import coreModule from 'app/core/core_module'; export default class TeamDetailsCtrl { @@ -28,7 +26,7 @@ export default class TeamDetailsCtrl { removeTeamMember(teamMember: TeamMember) { this.$scope.appEvent('confirm-modal', { title: 'Remove Member', - text: 'Are you sure you want to remove ' + teamMember.name + ' from this group?', + text: 'Are you sure you want to remove ' + teamMember.login + ' from this group?', yesText: "Remove", icon: "fa-warning", onConfirm: () => { @@ -71,6 +69,7 @@ export interface User { export interface TeamMember { userId: number; name: string; + login: string; } coreModule.controller('TeamDetailsCtrl', TeamDetailsCtrl); diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 81009d20f3c..c05ce92bae5 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -48,6 +48,11 @@ float: left; padding-top: $spacer * 0.75; margin: 0 $spacer*3 0 $spacer*1.5; + + .gicon { + position: relative; + top: -2px; + } } .modal-header-close { From d736795fe6bbf79b355dd56631c215af0bc3bd8a Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 13 Dec 2017 18:14:36 +0100 Subject: [PATCH 522/584] dashfolders: remove error message when moving to the same folder. #10135 --- .../core/components/manage_dashboards/manage_dashboards.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 1aa8a3f014a..5b74a0e50fc 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -134,12 +134,12 @@ export class ManageDashboardsCtrl { const selectedDashboards = this.getDashboardsToMove(); const template = '' + + 'dashboards="model.dashboards" after-save="model.afterSave()">' + '`'; appEvents.emit('show-modal', { templateHtml: template, modalClass: 'modal--narrow', - model: { dashboards: selectedDashboards, fromFolderId: this.folderId ? Number(this.folderId) : 0, afterSave: this.getDashboards.bind(this) } + model: { dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this) } }); } From a583f92d16dae1ba670c14f5d1123f32e00e4060 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 13 Dec 2017 18:18:10 +0100 Subject: [PATCH 523/584] dashfolders: bulk move dashboards synchronously #10181 Also added better error handling when moving dashboards to other folders --- .../move_to_folder_modal/move_to_folder.ts | 82 +++++++++++++------ 1 file changed, 59 insertions(+), 23 deletions(-) diff --git a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts index 4761969662e..0a41029fe68 100644 --- a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts +++ b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts @@ -1,52 +1,89 @@ +import _ from 'lodash'; import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; -import {DashboardModel} from '../dashboard_model'; +import { DashboardModel } from '../dashboard_model'; export class MoveToFolderCtrl { dashboards: any; folder: any; dismiss: any; afterSave: any; - fromFolderId: number; /** @ngInject */ - constructor(private backendSrv, private $q) {} + constructor(private backendSrv, private $q) { } onFolderChange(folder) { this.folder = folder; } - save() { - if (this.folder.id === this.fromFolderId) { - appEvents.emit('alert-error', ['Dashboard(s) already belong to this folder']); - return; - } + private doNext(fn, ...args: any[]) { + return function (result) { + return fn.apply(null, args) + .then(res => { + return Array.prototype.concat(result, [res]); + }); + }; + } - const promises = []; - for (let dash of this.dashboards) { - const promise = this.backendSrv.get('/api/dashboards/' + dash).then(fullDash => { + private doInOrder(tasks, init) { + return tasks.reduce(this.$q.when, init); + } + + private moveDashboard(dash) { + let deferred = this.$q.defer(); + + this.backendSrv.get('/api/dashboards/' + dash) + .then(fullDash => { const model = new DashboardModel(fullDash.dashboard, fullDash.meta); + if ((!model.folderId && this.folder.id === 0) || + model.folderId === this.folder.id) { + deferred.resolve({alreadyInFolder: true}); + return; + } + model.folderId = this.folder.id; model.meta.folderId = this.folder.id; model.meta.folderTitle = this.folder.title; const clone = model.getSaveModelClone(); - return this.backendSrv.saveDashboard(clone); + + this.backendSrv.saveDashboard(clone) + .then(() => { + deferred.resolve({succeeded: true}); + }) + .catch(err => { + deferred.resolve({succeeded: false}); + }); }); - promises.push(promise); + return deferred.promise; + } + + save() { + const tasks = []; + + for (let dash of this.dashboards) { + tasks.push(this.doNext(this.moveDashboard.bind(this), dash)); } - return this.$q.all(promises).then(() => { - appEvents.emit('alert-success', ['Dashboards Moved', 'OK']); - this.dismiss(); + return this.doInOrder(tasks, []) + .then(result => { + const totalCount = result.length; + const successCount = _.filter(result, { succeeded: true }).length; + const alreadyInFolderCount = _.filter(result, { alreadyInFolder: true }).length; - return this.afterSave(); - }).then(() => { - console.log('afterSave'); - }).catch(err => { - appEvents.emit('alert-error', [err.message]); - }); + if (successCount > 0) { + const msg = successCount + ' dashboard' + (successCount === 1 ? '' : 's') + ' moved to ' + this.folder.title; + appEvents.emit('alert-success', [ 'Dashboard' + (successCount === 1 ? '' : 's') + ' Moved', msg]); + } + + if (totalCount === alreadyInFolderCount) { + appEvents.emit('alert-error', ['Error', 'Dashboards already belongs to folder ' + this.folder.title]); + } + + this.dismiss(); + return this.afterSave(); + }); } } @@ -60,7 +97,6 @@ export function moveToFolderModal() { scope: { dismiss: "&", dashboards: "=", - fromFolderId: '<', afterSave: "&" } }; From 35106537f2fbee5fce4e53d7118fc79089902a6d Mon Sep 17 00:00:00 2001 From: Carl Bergquist Date: Wed, 13 Dec 2017 18:53:42 +0100 Subject: [PATCH 524/584] Replace Read Only Editor role with ViewersCanEdit setting (#10166) * removes readonly editor role * adds viewersCanEdit setting This enable you to allow viewers to edit/inspect dashboards in grafana in their own browser without allowing them to save dashboards * remove read only editor option from all dropdowns * migrates all read only viewers to viewers * docs: replace readOnlyEditor with viewersCanEdit --- conf/defaults.ini | 3 +++ conf/sample.ini | 3 +++ docs/sources/http_api/auth.md | 2 +- docs/sources/installation/configuration.md | 8 ++++++-- pkg/api/dashboard.go | 2 +- pkg/models/org_user.go | 11 +++++------ pkg/services/sqlstore/migrations/org_mig.go | 6 ++++++ pkg/setting/setting.go | 4 +++- public/app/features/admin/partials/edit_org.html | 2 +- public/app/features/admin/partials/edit_user.html | 4 ++-- public/app/features/org/partials/add_user.html | 2 +- public/app/features/org/partials/invite.html | 2 +- public/app/features/org/partials/orgUsers.html | 2 +- 13 files changed, 34 insertions(+), 17 deletions(-) diff --git a/conf/defaults.ini b/conf/defaults.ini index 218c91608cc..e16ef95178a 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -221,6 +221,9 @@ external_manage_link_url = external_manage_link_name = external_manage_info = +# Viewers can edit/inspect dashboard settings in the browser. But not save the dashboard. +viewers_can_edit = false + [auth] # Set to true to disable (hide) the login form, useful if you use OAuth disable_login_form = false diff --git a/conf/sample.ini b/conf/sample.ini index 7107f8354d6..544fa7e0c7d 100644 --- a/conf/sample.ini +++ b/conf/sample.ini @@ -205,6 +205,9 @@ log_queries = ;external_manage_link_name = ;external_manage_info = +# Viewers can edit/inspect dashboard settings in the browser. But not save the dashboard. +;viewers_can_edit = false + [auth] # Set to true to disable (hide) the login form, useful if you use OAuth, defaults to false ;disable_login_form = false diff --git a/docs/sources/http_api/auth.md b/docs/sources/http_api/auth.md index b526031fdeb..166a5a4fdb9 100644 --- a/docs/sources/http_api/auth.md +++ b/docs/sources/http_api/auth.md @@ -100,7 +100,7 @@ Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk JSON Body schema: - **name** – The key name -- **role** – Sets the access level/Grafana Role for the key. Can be one of the following values: `Viewer`, `Editor`, `Read Only Editor` or `Admin`. +- **role** – Sets the access level/Grafana Role for the key. Can be one of the following values: `Viewer`, `Editor` or `Admin`. **Example Response**: diff --git a/docs/sources/installation/configuration.md b/docs/sources/installation/configuration.md index bb411002f08..91094b3157d 100644 --- a/docs/sources/installation/configuration.md +++ b/docs/sources/installation/configuration.md @@ -292,10 +292,14 @@ organization to be created for that new user. The role new users will be assigned for the main organization (if the above setting is set to true). Defaults to `Viewer`, other valid -options are `Admin` and `Editor` and `Read Only Editor`. e.g. : +options are `Admin` and `Editor`. e.g. : -`auto_assign_org_role = Read Only Editor` +`auto_assign_org_role = Viewer` +### viewers can edit + +Viewers can edit/inspect dashboard settings in the browser. But not save the dashboard. +Defaults to `false`.
    diff --git a/pkg/api/dashboard.go b/pkg/api/dashboard.go index 4d2ed4707d9..e1ab038a2bb 100644 --- a/pkg/api/dashboard.go +++ b/pkg/api/dashboard.go @@ -182,7 +182,7 @@ func PostDashboard(c *middleware.Context, cmd m.SaveDashboardCommand) Response { } func canEditDashboard(role m.RoleType) bool { - return role == m.ROLE_ADMIN || role == m.ROLE_EDITOR || role == m.ROLE_READ_ONLY_EDITOR + return role == m.ROLE_ADMIN || role == m.ROLE_EDITOR || setting.ViewersCanEdit } func GetHomeDashboard(c *middleware.Context) Response { diff --git a/pkg/models/org_user.go b/pkg/models/org_user.go index 67b081fd1ce..16251616509 100644 --- a/pkg/models/org_user.go +++ b/pkg/models/org_user.go @@ -18,21 +18,20 @@ var ( type RoleType string const ( - ROLE_VIEWER RoleType = "Viewer" - ROLE_EDITOR RoleType = "Editor" - ROLE_READ_ONLY_EDITOR RoleType = "Read Only Editor" - ROLE_ADMIN RoleType = "Admin" + ROLE_VIEWER RoleType = "Viewer" + ROLE_EDITOR RoleType = "Editor" + ROLE_ADMIN RoleType = "Admin" ) func (r RoleType) IsValid() bool { - return r == ROLE_VIEWER || r == ROLE_ADMIN || r == ROLE_EDITOR || r == ROLE_READ_ONLY_EDITOR + return r == ROLE_VIEWER || r == ROLE_ADMIN || r == ROLE_EDITOR } func (r RoleType) Includes(other RoleType) bool { if r == ROLE_ADMIN { return true } - if r == ROLE_EDITOR || r == ROLE_READ_ONLY_EDITOR { + if r == ROLE_EDITOR { return other != ROLE_ADMIN } diff --git a/pkg/services/sqlstore/migrations/org_mig.go b/pkg/services/sqlstore/migrations/org_mig.go index 12e0a04256a..cf9b19f6f5b 100644 --- a/pkg/services/sqlstore/migrations/org_mig.go +++ b/pkg/services/sqlstore/migrations/org_mig.go @@ -83,4 +83,10 @@ func addOrgMigrations(mg *Migrator) { mg.AddMigration("Update org_user table charset", NewTableCharsetMigration("org_user", []*Column{ {Name: "role", Type: DB_NVarchar, Length: 20}, })) + + const migrateReadOnlyViewersToViewers = `UPDATE org_user SET role = 'Viewer' WHERE role = 'Read Only Editor'` + mg.AddMigration("Migrate all Read Only Viewers to Viewers", new(RawSqlMigration). + Sqlite(migrateReadOnlyViewersToViewers). + Postgres(migrateReadOnlyViewersToViewers). + Mysql(migrateReadOnlyViewersToViewers)) } diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index ef4a7c42e86..6a6df2b61fb 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -106,6 +106,7 @@ var ( ExternalUserMngLinkUrl string ExternalUserMngLinkName string ExternalUserMngInfo string + ViewersCanEdit bool // Http auth AdminUser string @@ -540,13 +541,14 @@ func NewConfigContext(args *CommandLineArgs) error { AllowUserSignUp = users.Key("allow_sign_up").MustBool(true) AllowUserOrgCreate = users.Key("allow_org_create").MustBool(true) AutoAssignOrg = users.Key("auto_assign_org").MustBool(true) - AutoAssignOrgRole = users.Key("auto_assign_org_role").In("Editor", []string{"Editor", "Admin", "Read Only Editor", "Viewer"}) + AutoAssignOrgRole = users.Key("auto_assign_org_role").In("Editor", []string{"Editor", "Admin", "Viewer"}) VerifyEmailEnabled = users.Key("verify_email_enabled").MustBool(false) LoginHint = users.Key("login_hint").String() DefaultTheme = users.Key("default_theme").String() ExternalUserMngLinkUrl = users.Key("external_manage_link_url").String() ExternalUserMngLinkName = users.Key("external_manage_link_name").String() ExternalUserMngInfo = users.Key("external_manage_info").String() + ViewersCanEdit = users.Key("viewers_can_edit").MustBool(false) // auth auth := Cfg.Section("auth") diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 39028645b38..62535469497 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -29,7 +29,7 @@
    Username Email{{orgUser.login}} {{orgUser.email}} - diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 384601affb7..d17c8bae69a 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -59,7 +59,7 @@
    Role - +
    @@ -78,7 +78,7 @@ {{org.name}} Current
    		- diff --git a/public/app/features/org/partials/add_user.html b/public/app/features/org/partials/add_user.html index 53fe7884df9..e6647d38dfc 100644 --- a/public/app/features/org/partials/add_user.html +++ b/public/app/features/org/partials/add_user.html @@ -25,7 +25,7 @@
    Role -
    diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index e1be0b5648e..e24a9245782 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -29,7 +29,7 @@
    Role -
    diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 20bc407d939..25c926a6fde 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -54,7 +54,7 @@
    		{{user.email}} {{user.lastSeenAtAge}} - From 20d94f9703a9c74d5a6d2551b4ddb725d977c5a2 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Sat, 17 Jun 2017 12:30:40 +0900 Subject: [PATCH 525/584] support alertmanager --- .../alerting/notifiers/alertmanager.go | 95 +++++++++++++++++++ .../alerting/notifiers/alertmanager_test.go | 50 ++++++++++ 2 files changed, 145 insertions(+) create mode 100644 pkg/services/alerting/notifiers/alertmanager.go create mode 100644 pkg/services/alerting/notifiers/alertmanager_test.go diff --git a/pkg/services/alerting/notifiers/alertmanager.go b/pkg/services/alerting/notifiers/alertmanager.go new file mode 100644 index 00000000000..29b2474d8c9 --- /dev/null +++ b/pkg/services/alerting/notifiers/alertmanager.go @@ -0,0 +1,95 @@ +package notifiers + +import ( + "time" + + "github.com/grafana/grafana/pkg/bus" + "github.com/grafana/grafana/pkg/components/simplejson" + "github.com/grafana/grafana/pkg/log" + m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/services/alerting" +) + +func init() { + alerting.RegisterNotifier(&alerting.NotifierPlugin{ + Type: "alertmanager", + Name: "alertmanager", + Description: "Sends alert to Alertmanager", + Factory: NewAlertmanagerNotifier, + OptionsTemplate: ` +

    Alertmanager settings

    +
    + Url + +
    + `, + }) +} + +func NewAlertmanagerNotifier(model *m.AlertNotification) (alerting.Notifier, error) { + url := model.Settings.Get("url").MustString() + if url == "" { + return nil, alerting.ValidationError{Reason: "Could not find url property in settings"} + } + + return &AlertmanagerNotifier{ + NotifierBase: NewNotifierBase(model.Id, model.IsDefault, model.Name, model.Type, model.Settings), + Url: url, + log: log.New("alerting.notifier.alertmanager"), + }, nil +} + +type AlertmanagerNotifier struct { + NotifierBase + Url string + log log.Logger +} + +func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) error { + this.log.Info("Sending alertmanager") + + alerts := make([]interface{}, 0) + for _, match := range evalContext.EvalMatches { + alertJSON := simplejson.New() + alertJSON.Set("startsAt", evalContext.StartTime.UTC().Format(time.RFC3339)) + if evalContext.Rule.State == m.AlertStateAlerting { + alertJSON.Set("endsAt", "0001-01-01T00:00:00Z") + } else { + alertJSON.Set("endsAt", evalContext.EndTime.UTC().Format(time.RFC3339)) + } + + ruleUrl, err := evalContext.GetRuleUrl() + if err == nil { + alertJSON.Set("generatorURL", ruleUrl) + } + + if evalContext.Rule.Message != "" { + alertJSON.SetPath([]string{"annotations", "description"}, evalContext.Rule.Message) + } + + tags := make(map[string]string) + for k, v := range match.Tags { + tags[k] = v + } + tags["alertname"] = evalContext.Rule.Name + alertJSON.Set("labels", tags) + + alerts = append(alerts, alertJSON) + } + + bodyJSON := simplejson.NewFromAny(alerts) + body, _ := bodyJSON.MarshalJSON() + + cmd := &m.SendWebhookSync{ + Url: this.Url + "/api/v1/alerts", + HttpMethod: "POST", + Body: string(body), + } + + if err := bus.DispatchCtx(evalContext.Ctx, cmd); err != nil { + this.log.Error("Failed to send alertmanager", "error", err, "alertmanager", this.Name) + return err + } + + return nil +} diff --git a/pkg/services/alerting/notifiers/alertmanager_test.go b/pkg/services/alerting/notifiers/alertmanager_test.go new file mode 100644 index 00000000000..78c9511c783 --- /dev/null +++ b/pkg/services/alerting/notifiers/alertmanager_test.go @@ -0,0 +1,50 @@ +package notifiers + +import ( + "testing" + + "github.com/grafana/grafana/pkg/components/simplejson" + m "github.com/grafana/grafana/pkg/models" + . "github.com/smartystreets/goconvey/convey" +) + +func TestAlertmanagerNotifier(t *testing.T) { + Convey("Alertmanager notifier tests", t, func() { + + Convey("Parsing alert notification from settings", func() { + Convey("empty settings should return error", func() { + json := `{ }` + + settingsJSON, _ := simplejson.NewJson([]byte(json)) + model := &m.AlertNotification{ + Name: "alertmanager", + Type: "alertmanager", + Settings: settingsJSON, + } + + _, err := NewAlertmanagerNotifier(model) + So(err, ShouldNotBeNil) + }) + + Convey("from settings", func() { + json := ` + { + "url": "http://127.0.0.1:9093/" + }` + + settingsJSON, _ := simplejson.NewJson([]byte(json)) + model := &m.AlertNotification{ + Name: "alertmanager", + Type: "alertmanager", + Settings: settingsJSON, + } + + not, err := NewAlertmanagerNotifier(model) + alertmanagerNotifier := not.(*AlertmanagerNotifier) + + So(err, ShouldBeNil) + So(alertmanagerNotifier.Url, ShouldEqual, "http://127.0.0.1:9093/") + }) + }) + }) +} From 3a7939c930052a678e2aaec4e20b4c5e26b7dc74 Mon Sep 17 00:00:00 2001 From: Thibault Chataigner Date: Thu, 16 Nov 2017 10:26:53 +0100 Subject: [PATCH 526/584] Alertmanager notifier: make it match the new notifier interface Signed-off-by: Thibault Chataigner --- pkg/services/alerting/notifiers/alertmanager.go | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/pkg/services/alerting/notifiers/alertmanager.go b/pkg/services/alerting/notifiers/alertmanager.go index 29b2474d8c9..163cb11b45e 100644 --- a/pkg/services/alerting/notifiers/alertmanager.go +++ b/pkg/services/alerting/notifiers/alertmanager.go @@ -45,6 +45,13 @@ type AlertmanagerNotifier struct { log log.Logger } +func (this *AlertmanagerNotifier) ShouldNotify(evalContext *alerting.EvalContext) bool { + if evalContext.Rule.State == m.AlertStateAlerting { + return true + } + return false +} + func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) error { this.log.Info("Sending alertmanager") @@ -52,11 +59,8 @@ func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) erro for _, match := range evalContext.EvalMatches { alertJSON := simplejson.New() alertJSON.Set("startsAt", evalContext.StartTime.UTC().Format(time.RFC3339)) - if evalContext.Rule.State == m.AlertStateAlerting { - alertJSON.Set("endsAt", "0001-01-01T00:00:00Z") - } else { - alertJSON.Set("endsAt", evalContext.EndTime.UTC().Format(time.RFC3339)) - } + // Rule state should always be alerting if notifying. + alertJSON.Set("endsAt", "0001-01-01T00:00:00Z") ruleUrl, err := evalContext.GetRuleUrl() if err == nil { From a8264fe316a43156096c98bcebdea2b8715aeb76 Mon Sep 17 00:00:00 2001 From: Thibault Chataigner Date: Wed, 13 Dec 2017 13:37:49 +0100 Subject: [PATCH 527/584] Alertmanager notifier: add "metric" labels if no tags Signed-off-by: Thibault Chataigner --- pkg/services/alerting/notifiers/alertmanager.go | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/pkg/services/alerting/notifiers/alertmanager.go b/pkg/services/alerting/notifiers/alertmanager.go index 163cb11b45e..ccf3cef5d16 100644 --- a/pkg/services/alerting/notifiers/alertmanager.go +++ b/pkg/services/alerting/notifiers/alertmanager.go @@ -72,8 +72,12 @@ func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) erro } tags := make(map[string]string) - for k, v := range match.Tags { - tags[k] = v + if len(match.Tags) == 0 { + tags["metric"] = match.Metric + } else { + for k, v := range match.Tags { + tags[k] = v + } } tags["alertname"] = evalContext.Rule.Name alertJSON.Set("labels", tags) From 1240db31d3b2de98f1ccade6b36ce662d5d26f40 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 19:12:05 +0100 Subject: [PATCH 528/584] alerting: reduce log level for notifiers --- pkg/services/alerting/notifier.go | 2 +- pkg/services/alerting/notifiers/base.go | 2 +- pkg/services/alerting/notifiers/dingding_test.go | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/pkg/services/alerting/notifier.go b/pkg/services/alerting/notifier.go index 32bece31820..c4c4dc45f50 100644 --- a/pkg/services/alerting/notifier.go +++ b/pkg/services/alerting/notifier.go @@ -65,7 +65,7 @@ func (n *notificationService) sendNotifications(context *EvalContext, notifiers for _, notifier := range notifiers { not := notifier //avoid updating scope variable in go routine - n.log.Info("Sending notification", "type", not.GetType(), "id", not.GetNotifierId(), "isDefault", not.GetIsDefault()) + n.log.Debug("Sending notification", "type", not.GetType(), "id", not.GetNotifierId(), "isDefault", not.GetIsDefault()) metrics.M_Alerting_Notification_Sent.WithLabelValues(not.GetType()).Inc() g.Go(func() error { return not.Notify(context) }) } diff --git a/pkg/services/alerting/notifiers/base.go b/pkg/services/alerting/notifiers/base.go index 2308a5943d6..601f8fc24b1 100644 --- a/pkg/services/alerting/notifiers/base.go +++ b/pkg/services/alerting/notifiers/base.go @@ -15,7 +15,7 @@ type NotifierBase struct { } func NewNotifierBase(id int64, isDefault bool, name, notifierType string, model *simplejson.Json) NotifierBase { - uploadImage := model.Get("uploadImage").MustBool(true) + uploadImage := model.Get("uploadImage").MustBool(false) return NotifierBase{ Id: id, diff --git a/pkg/services/alerting/notifiers/dingding_test.go b/pkg/services/alerting/notifiers/dingding_test.go index b21815f95af..f89bf6382ce 100644 --- a/pkg/services/alerting/notifiers/dingding_test.go +++ b/pkg/services/alerting/notifiers/dingding_test.go @@ -25,10 +25,8 @@ func TestDingDingNotifier(t *testing.T) { }) Convey("settings should trigger incident", func() { - json := ` - { - "url": "https://www.google.com" - }` + json := `{ "url": "https://www.google.com" }` + settingsJSON, _ := simplejson.NewJson([]byte(json)) model := &m.AlertNotification{ Name: "dingding_testing", From 3691faf136ff5d22b8f3cf127d8654d9548617c9 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 19:13:23 +0100 Subject: [PATCH 529/584] alertmanager: code style --- pkg/services/alerting/notifiers/alertmanager.go | 17 ++++++----------- .../alerting/notifiers/alertmanager_test.go | 5 +---- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/pkg/services/alerting/notifiers/alertmanager.go b/pkg/services/alerting/notifiers/alertmanager.go index ccf3cef5d16..23cbfdbcce8 100644 --- a/pkg/services/alerting/notifiers/alertmanager.go +++ b/pkg/services/alerting/notifiers/alertmanager.go @@ -12,9 +12,9 @@ import ( func init() { alerting.RegisterNotifier(&alerting.NotifierPlugin{ - Type: "alertmanager", - Name: "alertmanager", - Description: "Sends alert to Alertmanager", + Type: "prometheus-alertmanager", + Name: "Prometheus Alertmanager", + Description: "Sends alert to Prometheus Alertmanager", Factory: NewAlertmanagerNotifier, OptionsTemplate: `

    Alertmanager settings

    @@ -35,7 +35,7 @@ func NewAlertmanagerNotifier(model *m.AlertNotification) (alerting.Notifier, err return &AlertmanagerNotifier{ NotifierBase: NewNotifierBase(model.Id, model.IsDefault, model.Name, model.Type, model.Settings), Url: url, - log: log.New("alerting.notifier.alertmanager"), + log: log.New("alerting.notifier.prometheus-alertmanager"), }, nil } @@ -46,14 +46,10 @@ type AlertmanagerNotifier struct { } func (this *AlertmanagerNotifier) ShouldNotify(evalContext *alerting.EvalContext) bool { - if evalContext.Rule.State == m.AlertStateAlerting { - return true - } - return false + return evalContext.Rule.State == m.AlertStateAlerting } func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) error { - this.log.Info("Sending alertmanager") alerts := make([]interface{}, 0) for _, match := range evalContext.EvalMatches { @@ -62,8 +58,7 @@ func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) erro // Rule state should always be alerting if notifying. alertJSON.Set("endsAt", "0001-01-01T00:00:00Z") - ruleUrl, err := evalContext.GetRuleUrl() - if err == nil { + if ruleUrl, err := evalContext.GetRuleUrl(); err == nil { alertJSON.Set("generatorURL", ruleUrl) } diff --git a/pkg/services/alerting/notifiers/alertmanager_test.go b/pkg/services/alerting/notifiers/alertmanager_test.go index 78c9511c783..3549b536e48 100644 --- a/pkg/services/alerting/notifiers/alertmanager_test.go +++ b/pkg/services/alerting/notifiers/alertmanager_test.go @@ -27,10 +27,7 @@ func TestAlertmanagerNotifier(t *testing.T) { }) Convey("from settings", func() { - json := ` - { - "url": "http://127.0.0.1:9093/" - }` + json := `{ "url": "http://127.0.0.1:9093/" }` settingsJSON, _ := simplejson.NewJson([]byte(json)) model := &m.AlertNotification{ From ade734168cfe273cfe976e36dfe06217fe71cdbe Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 19:15:17 +0100 Subject: [PATCH 530/584] alertmanager: endAt should only be used if we have the correct value --- pkg/services/alerting/notifiers/alertmanager.go | 2 -- 1 file changed, 2 deletions(-) diff --git a/pkg/services/alerting/notifiers/alertmanager.go b/pkg/services/alerting/notifiers/alertmanager.go index 23cbfdbcce8..08f8e8be29c 100644 --- a/pkg/services/alerting/notifiers/alertmanager.go +++ b/pkg/services/alerting/notifiers/alertmanager.go @@ -55,8 +55,6 @@ func (this *AlertmanagerNotifier) Notify(evalContext *alerting.EvalContext) erro for _, match := range evalContext.EvalMatches { alertJSON := simplejson.New() alertJSON.Set("startsAt", evalContext.StartTime.UTC().Format(time.RFC3339)) - // Rule state should always be alerting if notifying. - alertJSON.Set("endsAt", "0001-01-01T00:00:00Z") if ruleUrl, err := evalContext.GetRuleUrl(); err == nil { alertJSON.Set("generatorURL", ruleUrl) From 75ecc019d3c0aa83d82c085d60e6c78bc6caff15 Mon Sep 17 00:00:00 2001 From: bergquist Date: Wed, 13 Dec 2017 19:32:06 +0100 Subject: [PATCH 531/584] changelog: adds note about closing #7481 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f491e14e38..68b5ba04bbb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ From `/etc/grafana/datasources` to `/etc/grafana/provisioning/datasources` when * **Graphite**: Query editor updated to support new query by tag features [#9230](https://github.com/grafana/grafana/issues/9230) * **Dashboard history**: New config file option versions_to_keep sets how many versions per dashboard to store, [#9671](https://github.com/grafana/grafana/issues/9671) * **Dashboard as cfg**: Load dashboards from file into Grafana on startup/change [#9654](https://github.com/grafana/grafana/issues/9654) [#5269](https://github.com/grafana/grafana/issues/5269) - +* **Prometheus**: Grafana can now send alerts to Prometheus Alertmanager while firing [#7481](https://github.com/grafana/grafana/issues/7481), thx [@Thib17](https://github.com/Thib17) and [@mtanda](https://github.com/mtanda) ## Minor * **Alert panel**: Adds placeholder text when no alerts are within the time range [#9624](https://github.com/grafana/grafana/issues/9624), thx [@straend](https://github.com/straend) * **Mysql**: MySQL enable MaxOpenCon and MaxIdleCon regards how constring is configured. [#9784](https://github.com/grafana/grafana/issues/9784), thx [@dfredell](https://github.com/dfredell) From e2bbb85daa82e00e675223f0681ec2af49b56333 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 13 Dec 2017 17:48:44 -0500 Subject: [PATCH 532/584] new icons created and added to nav --- pkg/api/index.go | 32 ++--- .../app/features/plugins/plugin_edit_ctrl.ts | 2 +- .../icons_dark_theme/icon_add_annotation.svg | 31 +++++ .../icon_add_annotation_alt.svg | 31 +++++ .../icon_add_data_sources.svg | 31 +++++ public/img/icons_dark_theme/icon_add_link.svg | 36 +++++ public/img/icons_dark_theme/icon_add_team.svg | 35 +++++ public/img/icons_dark_theme/icon_add_user.svg | 30 +++++ .../icons_dark_theme/icon_add_variable.svg | 54 ++++++++ .../img/icons_dark_theme/icon_alert_rules.svg | 14 ++ .../img/icons_dark_theme/icon_annotation.svg | 18 +++ .../icons_dark_theme/icon_annotation_alt.svg | 24 ++++ public/img/icons_dark_theme/icon_apikeys.svg | 14 ++ public/img/icons_dark_theme/icon_cog.svg | 15 +++ .../icons_dark_theme/icon_dashboard_list.svg | 26 ++++ public/img/icons_dark_theme/icon_home.svg | 11 ++ public/img/icons_dark_theme/icon_link.svg | 22 +++ public/img/icons_dark_theme/icon_playlist.svg | 17 +++ public/img/icons_dark_theme/icon_plugins.svg | 11 ++ .../img/icons_dark_theme/icon_preferences.svg | 17 +++ public/img/icons_dark_theme/icon_question.svg | 17 +++ public/img/icons_dark_theme/icon_shield.svg | 37 +++++ public/img/icons_dark_theme/icon_sitemap.svg | 13 ++ .../img/icons_dark_theme/icon_snapshots.svg | 24 ++++ public/img/icons_dark_theme/icon_team.svg | 25 ++-- public/img/icons_dark_theme/icon_user.svg | 10 +- public/img/icons_dark_theme/icon_variable.svg | 34 +++++ .../icons_light_theme/icon_add_annotation.svg | 31 +++++ .../icon_add_annotation_alt.svg | 32 +++++ .../icon_add_data_sources.svg | 32 +++++ .../img/icons_light_theme/icon_add_link.svg | 34 +++++ .../img/icons_light_theme/icon_add_team.svg | 36 +++++ .../img/icons_light_theme/icon_add_user.svg | 28 ++++ .../icons_light_theme/icon_add_variable.svg | 52 +++++++ .../icons_light_theme/icon_alert_rules.svg | 14 ++ .../img/icons_light_theme/icon_annotation.svg | 15 +++ .../icons_light_theme/icon_annotation_alt.svg | 24 ++++ public/img/icons_light_theme/icon_apikeys.svg | 14 ++ public/img/icons_light_theme/icon_cog.svg | 15 +++ .../icons_light_theme/icon_dashboard_list.svg | 26 ++++ public/img/icons_light_theme/icon_home.svg | 11 ++ public/img/icons_light_theme/icon_link.svg | 20 +++ .../img/icons_light_theme/icon_playlist.svg | 17 +++ public/img/icons_light_theme/icon_plugins.svg | 11 ++ .../icons_light_theme/icon_preferences.svg | 17 +++ .../img/icons_light_theme/icon_question.svg | 16 +++ public/img/icons_light_theme/icon_shield.svg | 36 +++++ public/img/icons_light_theme/icon_sitemap.svg | 13 ++ .../img/icons_light_theme/icon_snapshots.svg | 22 +++ public/img/icons_light_theme/icon_team.svg | 25 ++-- public/img/icons_light_theme/icon_user.svg | 10 +- .../img/icons_light_theme/icon_variable.svg | 33 +++++ public/sass/base/_icons.scss | 127 +++++++++++++++--- 53 files changed, 1270 insertions(+), 72 deletions(-) create mode 100644 public/img/icons_dark_theme/icon_add_annotation.svg create mode 100644 public/img/icons_dark_theme/icon_add_annotation_alt.svg create mode 100644 public/img/icons_dark_theme/icon_add_data_sources.svg create mode 100644 public/img/icons_dark_theme/icon_add_link.svg create mode 100644 public/img/icons_dark_theme/icon_add_team.svg create mode 100644 public/img/icons_dark_theme/icon_add_user.svg create mode 100644 public/img/icons_dark_theme/icon_add_variable.svg create mode 100644 public/img/icons_dark_theme/icon_alert_rules.svg create mode 100644 public/img/icons_dark_theme/icon_annotation.svg create mode 100644 public/img/icons_dark_theme/icon_annotation_alt.svg create mode 100644 public/img/icons_dark_theme/icon_apikeys.svg create mode 100644 public/img/icons_dark_theme/icon_cog.svg create mode 100644 public/img/icons_dark_theme/icon_dashboard_list.svg create mode 100644 public/img/icons_dark_theme/icon_home.svg create mode 100644 public/img/icons_dark_theme/icon_link.svg create mode 100644 public/img/icons_dark_theme/icon_playlist.svg create mode 100644 public/img/icons_dark_theme/icon_plugins.svg create mode 100644 public/img/icons_dark_theme/icon_preferences.svg create mode 100644 public/img/icons_dark_theme/icon_question.svg create mode 100644 public/img/icons_dark_theme/icon_shield.svg create mode 100644 public/img/icons_dark_theme/icon_sitemap.svg create mode 100644 public/img/icons_dark_theme/icon_snapshots.svg create mode 100644 public/img/icons_dark_theme/icon_variable.svg create mode 100644 public/img/icons_light_theme/icon_add_annotation.svg create mode 100644 public/img/icons_light_theme/icon_add_annotation_alt.svg create mode 100644 public/img/icons_light_theme/icon_add_data_sources.svg create mode 100644 public/img/icons_light_theme/icon_add_link.svg create mode 100644 public/img/icons_light_theme/icon_add_team.svg create mode 100644 public/img/icons_light_theme/icon_add_user.svg create mode 100644 public/img/icons_light_theme/icon_add_variable.svg create mode 100644 public/img/icons_light_theme/icon_alert_rules.svg create mode 100644 public/img/icons_light_theme/icon_annotation.svg create mode 100644 public/img/icons_light_theme/icon_annotation_alt.svg create mode 100644 public/img/icons_light_theme/icon_apikeys.svg create mode 100644 public/img/icons_light_theme/icon_cog.svg create mode 100644 public/img/icons_light_theme/icon_dashboard_list.svg create mode 100644 public/img/icons_light_theme/icon_home.svg create mode 100644 public/img/icons_light_theme/icon_link.svg create mode 100644 public/img/icons_light_theme/icon_playlist.svg create mode 100644 public/img/icons_light_theme/icon_plugins.svg create mode 100644 public/img/icons_light_theme/icon_preferences.svg create mode 100644 public/img/icons_light_theme/icon_question.svg create mode 100644 public/img/icons_light_theme/icon_shield.svg create mode 100644 public/img/icons_light_theme/icon_sitemap.svg create mode 100644 public/img/icons_light_theme/icon_snapshots.svg create mode 100644 public/img/icons_light_theme/icon_variable.svg diff --git a/pkg/api/index.go b/pkg/api/index.go index 84a18e694e0..812f07c2aef 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -102,11 +102,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } dashboardChildNavs := []*dtos.NavLink{ - {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true}, + {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "gicon gicon-home", HideFromTabs: true}, {Divider: true, HideFromTabs: true}, - {Text: "Manage", Id: "manage-dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"}, - {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, - {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, + {Text: "Manage", Id: "manage-dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "gicon gicon-manage"}, + {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "gicon gicon-playlists"}, + {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "gicon gicon-snapshots"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ @@ -127,7 +127,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Url: setting.AppSubUrl + "/profile", HideFromMenu: true, Children: []*dtos.NavLink{ - {Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"}, + {Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "gicon gicon-preferences"}, {Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true}, }, } @@ -144,7 +144,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) { alertChildNavs := []*dtos.NavLink{ - {Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, + {Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "gicon gicon-alert-rules"}, {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"}, } @@ -196,7 +196,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if len(appLink.Children) > 0 && c.OrgRole == m.ROLE_ADMIN { appLink.Children = append(appLink.Children, &dtos.NavLink{Divider: true}) - appLink.Children = append(appLink.Children, &dtos.NavLink{Text: "Plugin Config", Icon: "fa fa-fw fa-cog", Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit"}) + appLink.Children = append(appLink.Children, &dtos.NavLink{Text: "Plugin Config", Icon: "gicon gicon-cog", Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit"}) } if len(appLink.Children) > 0 { @@ -210,7 +210,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Id: "cfg", Text: "Configuration", SubTitle: "Organization: " + c.OrgName, - Icon: "fa fa-fw fa-cog", + Icon: "gicon gicon-cog", Url: setting.AppSubUrl + "/datasources", Children: []*dtos.NavLink{ { @@ -224,7 +224,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Text: "Users", Id: "users", Description: "Manage org members", - Icon: "icon-gf icon-gf-fw icon-gf-users", + Icon: "gicon gicon-user", Url: setting.AppSubUrl + "/org/users", }, { @@ -238,14 +238,14 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Text: "Plugins", Id: "plugins", Description: "View and configure plugins", - Icon: "icon-gf icon-gf-fw icon-gf-apps", + Icon: "gicon gicon-plugins", Url: setting.AppSubUrl + "/plugins", }, { Text: "Preferences", Id: "org-settings", Description: "Organization preferences", - Icon: "fa fa-fw fa-sliders", + Icon: "gicon gicon-preferences", Url: setting.AppSubUrl + "/org", }, @@ -253,7 +253,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Text: "API Keys", Id: "apikeys", Description: "Create & manage API keys", - Icon: "fa fa-fw fa-key", + Icon: "gicon gicon-apikeys", Url: setting.AppSubUrl + "/org/apikeys", }, }, @@ -268,12 +268,12 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { HideFromTabs: true, SubTitle: "Manage all users & orgs", Id: "admin", - Icon: "fa fa-fw fa-shield", + Icon: "gicon gicon-shield", Url: setting.AppSubUrl + "/admin/users", Children: []*dtos.NavLink{ - {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users", Icon: "icon-gf icon-gf-fw icon-gf-users"}, + {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users", Icon: "gicon gicon-user"}, {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs", Icon: "gicon gicon-org"}, - {Text: "Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings", Icon: "fa fa-fw fa-sliders"}, + {Text: "Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings", Icon: "gicon gicon-preferences"}, {Text: "Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats", Icon: "fa fa-fw fa-bar-chart"}, {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide", Icon: "fa fa-fw fa-eyedropper"}, }, @@ -287,7 +287,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Text: "Help", Id: "help", Url: "#", - Icon: "fa fa-fw fa-question", + Icon: "gicon gicon-question", HideFromMenu: true, Children: []*dtos.NavLink{ {Text: "Keyboard shortcuts", Url: "/shortcuts", Icon: "fa fa-fw fa-keyboard-o", Target: "_self"}, diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 0169dc7772e..a2441dd5e8d 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -60,7 +60,7 @@ export class PluginEditCtrl { if (model.type === 'app') { this.navModel.main.children.push({ - icon: 'fa fa-fw fa-th-large', + icon: 'gicon gicon-cog', id: 'config', text: 'Config', url: `plugins/${this.model.id}/edit?tab=config` diff --git a/public/img/icons_dark_theme/icon_add_annotation.svg b/public/img/icons_dark_theme/icon_add_annotation.svg new file mode 100644 index 00000000000..330dfad85ad --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_annotation.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_annotation_alt.svg b/public/img/icons_dark_theme/icon_add_annotation_alt.svg new file mode 100644 index 00000000000..f24a46ee75c --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_annotation_alt.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_data_sources.svg b/public/img/icons_dark_theme/icon_add_data_sources.svg new file mode 100644 index 00000000000..6ea76c00735 --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_data_sources.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_link.svg b/public/img/icons_dark_theme/icon_add_link.svg new file mode 100644 index 00000000000..fe8e95f1eda --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_link.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_team.svg b/public/img/icons_dark_theme/icon_add_team.svg new file mode 100644 index 00000000000..35fd526e053 --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_team.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_user.svg b/public/img/icons_dark_theme/icon_add_user.svg new file mode 100644 index 00000000000..6a09f96ef1e --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_user.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_add_variable.svg b/public/img/icons_dark_theme/icon_add_variable.svg new file mode 100644 index 00000000000..9b10092e78f --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_variable.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alert_rules.svg b/public/img/icons_dark_theme/icon_alert_rules.svg new file mode 100644 index 00000000000..71915eb6d1c --- /dev/null +++ b/public/img/icons_dark_theme/icon_alert_rules.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_annotation.svg b/public/img/icons_dark_theme/icon_annotation.svg new file mode 100644 index 00000000000..514b52fba40 --- /dev/null +++ b/public/img/icons_dark_theme/icon_annotation.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_annotation_alt.svg b/public/img/icons_dark_theme/icon_annotation_alt.svg new file mode 100644 index 00000000000..e798f91805c --- /dev/null +++ b/public/img/icons_dark_theme/icon_annotation_alt.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_apikeys.svg b/public/img/icons_dark_theme/icon_apikeys.svg new file mode 100644 index 00000000000..8cc30794456 --- /dev/null +++ b/public/img/icons_dark_theme/icon_apikeys.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/public/img/icons_dark_theme/icon_cog.svg b/public/img/icons_dark_theme/icon_cog.svg new file mode 100644 index 00000000000..126b529e0df --- /dev/null +++ b/public/img/icons_dark_theme/icon_cog.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_dashboard_list.svg b/public/img/icons_dark_theme/icon_dashboard_list.svg new file mode 100644 index 00000000000..1979400de7b --- /dev/null +++ b/public/img/icons_dark_theme/icon_dashboard_list.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_home.svg b/public/img/icons_dark_theme/icon_home.svg new file mode 100644 index 00000000000..a4f2608d576 --- /dev/null +++ b/public/img/icons_dark_theme/icon_home.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/img/icons_dark_theme/icon_link.svg b/public/img/icons_dark_theme/icon_link.svg new file mode 100644 index 00000000000..ac4bba7fe46 --- /dev/null +++ b/public/img/icons_dark_theme/icon_link.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_playlist.svg b/public/img/icons_dark_theme/icon_playlist.svg new file mode 100644 index 00000000000..bf8fc2f80a3 --- /dev/null +++ b/public/img/icons_dark_theme/icon_playlist.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_plugins.svg b/public/img/icons_dark_theme/icon_plugins.svg new file mode 100644 index 00000000000..f00eefea975 --- /dev/null +++ b/public/img/icons_dark_theme/icon_plugins.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/img/icons_dark_theme/icon_preferences.svg b/public/img/icons_dark_theme/icon_preferences.svg new file mode 100644 index 00000000000..ed985c39f68 --- /dev/null +++ b/public/img/icons_dark_theme/icon_preferences.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_question.svg b/public/img/icons_dark_theme/icon_question.svg new file mode 100644 index 00000000000..aa33cf29467 --- /dev/null +++ b/public/img/icons_dark_theme/icon_question.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_shield.svg b/public/img/icons_dark_theme/icon_shield.svg new file mode 100644 index 00000000000..7709351a56e --- /dev/null +++ b/public/img/icons_dark_theme/icon_shield.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_sitemap.svg b/public/img/icons_dark_theme/icon_sitemap.svg new file mode 100644 index 00000000000..499273a399e --- /dev/null +++ b/public/img/icons_dark_theme/icon_sitemap.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/public/img/icons_dark_theme/icon_snapshots.svg b/public/img/icons_dark_theme/icon_snapshots.svg new file mode 100644 index 00000000000..5f3543623c7 --- /dev/null +++ b/public/img/icons_dark_theme/icon_snapshots.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_team.svg b/public/img/icons_dark_theme/icon_team.svg index 15dade3d289..1248f5d5e39 100644 --- a/public/img/icons_dark_theme/icon_team.svg +++ b/public/img/icons_dark_theme/icon_team.svg @@ -6,20 +6,15 @@ .st0{fill:#E3E3E3;} - - - + + diff --git a/public/img/icons_dark_theme/icon_user.svg b/public/img/icons_dark_theme/icon_user.svg index e488d9ffcf4..9479e9452ce 100644 --- a/public/img/icons_dark_theme/icon_user.svg +++ b/public/img/icons_dark_theme/icon_user.svg @@ -6,10 +6,10 @@ .st0{fill:#E3E3E3;} - + diff --git a/public/img/icons_dark_theme/icon_variable.svg b/public/img/icons_dark_theme/icon_variable.svg new file mode 100644 index 00000000000..4fffa63329a --- /dev/null +++ b/public/img/icons_dark_theme/icon_variable.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_annotation.svg b/public/img/icons_light_theme/icon_add_annotation.svg new file mode 100644 index 00000000000..cb306bdd18b --- /dev/null +++ b/public/img/icons_light_theme/icon_add_annotation.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_annotation_alt.svg b/public/img/icons_light_theme/icon_add_annotation_alt.svg new file mode 100644 index 00000000000..2565f188d57 --- /dev/null +++ b/public/img/icons_light_theme/icon_add_annotation_alt.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_data_sources.svg b/public/img/icons_light_theme/icon_add_data_sources.svg new file mode 100644 index 00000000000..554af86bfc8 --- /dev/null +++ b/public/img/icons_light_theme/icon_add_data_sources.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_link.svg b/public/img/icons_light_theme/icon_add_link.svg new file mode 100644 index 00000000000..df31a3e99a3 --- /dev/null +++ b/public/img/icons_light_theme/icon_add_link.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_team.svg b/public/img/icons_light_theme/icon_add_team.svg new file mode 100644 index 00000000000..dd1580f3a3d --- /dev/null +++ b/public/img/icons_light_theme/icon_add_team.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_user.svg b/public/img/icons_light_theme/icon_add_user.svg new file mode 100644 index 00000000000..ef0d1d785f0 --- /dev/null +++ b/public/img/icons_light_theme/icon_add_user.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_add_variable.svg b/public/img/icons_light_theme/icon_add_variable.svg new file mode 100644 index 00000000000..da50f124e2b --- /dev/null +++ b/public/img/icons_light_theme/icon_add_variable.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alert_rules.svg b/public/img/icons_light_theme/icon_alert_rules.svg new file mode 100644 index 00000000000..0c429a93e48 --- /dev/null +++ b/public/img/icons_light_theme/icon_alert_rules.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_annotation.svg b/public/img/icons_light_theme/icon_annotation.svg new file mode 100644 index 00000000000..ce8aa4e3372 --- /dev/null +++ b/public/img/icons_light_theme/icon_annotation.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_annotation_alt.svg b/public/img/icons_light_theme/icon_annotation_alt.svg new file mode 100644 index 00000000000..5379a6185c4 --- /dev/null +++ b/public/img/icons_light_theme/icon_annotation_alt.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_apikeys.svg b/public/img/icons_light_theme/icon_apikeys.svg new file mode 100644 index 00000000000..c54aabe4e30 --- /dev/null +++ b/public/img/icons_light_theme/icon_apikeys.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/public/img/icons_light_theme/icon_cog.svg b/public/img/icons_light_theme/icon_cog.svg new file mode 100644 index 00000000000..c8ccfaa38f3 --- /dev/null +++ b/public/img/icons_light_theme/icon_cog.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/public/img/icons_light_theme/icon_dashboard_list.svg b/public/img/icons_light_theme/icon_dashboard_list.svg new file mode 100644 index 00000000000..c6d8ddd6c5e --- /dev/null +++ b/public/img/icons_light_theme/icon_dashboard_list.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_home.svg b/public/img/icons_light_theme/icon_home.svg new file mode 100644 index 00000000000..a7f0fde536a --- /dev/null +++ b/public/img/icons_light_theme/icon_home.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/img/icons_light_theme/icon_link.svg b/public/img/icons_light_theme/icon_link.svg new file mode 100644 index 00000000000..7201eb6aa3a --- /dev/null +++ b/public/img/icons_light_theme/icon_link.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_playlist.svg b/public/img/icons_light_theme/icon_playlist.svg new file mode 100644 index 00000000000..772ad4f7a6f --- /dev/null +++ b/public/img/icons_light_theme/icon_playlist.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_plugins.svg b/public/img/icons_light_theme/icon_plugins.svg new file mode 100644 index 00000000000..7f5dd78e1da --- /dev/null +++ b/public/img/icons_light_theme/icon_plugins.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/img/icons_light_theme/icon_preferences.svg b/public/img/icons_light_theme/icon_preferences.svg new file mode 100644 index 00000000000..ea2f7d70def --- /dev/null +++ b/public/img/icons_light_theme/icon_preferences.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_question.svg b/public/img/icons_light_theme/icon_question.svg new file mode 100644 index 00000000000..90e284508ff --- /dev/null +++ b/public/img/icons_light_theme/icon_question.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_shield.svg b/public/img/icons_light_theme/icon_shield.svg new file mode 100644 index 00000000000..675cad7c2ad --- /dev/null +++ b/public/img/icons_light_theme/icon_shield.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_sitemap.svg b/public/img/icons_light_theme/icon_sitemap.svg new file mode 100644 index 00000000000..c19c62cb4b0 --- /dev/null +++ b/public/img/icons_light_theme/icon_sitemap.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/public/img/icons_light_theme/icon_snapshots.svg b/public/img/icons_light_theme/icon_snapshots.svg new file mode 100644 index 00000000000..7c29338a52f --- /dev/null +++ b/public/img/icons_light_theme/icon_snapshots.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_team.svg b/public/img/icons_light_theme/icon_team.svg index 2ec7caf796e..21efa62218e 100644 --- a/public/img/icons_light_theme/icon_team.svg +++ b/public/img/icons_light_theme/icon_team.svg @@ -6,20 +6,15 @@ .st0{fill:#555555;} - - - + + diff --git a/public/img/icons_light_theme/icon_user.svg b/public/img/icons_light_theme/icon_user.svg index 2a68115129d..205a345755a 100644 --- a/public/img/icons_light_theme/icon_user.svg +++ b/public/img/icons_light_theme/icon_user.svg @@ -6,10 +6,10 @@ .st0{fill:#555555;} - + diff --git a/public/img/icons_light_theme/icon_variable.svg b/public/img/icons_light_theme/icon_variable.svg new file mode 100644 index 00000000000..8624f74bc63 --- /dev/null +++ b/public/img/icons_light_theme/icon_variable.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 7ef691bca16..e4007d4d7cc 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -11,6 +11,38 @@ vertical-align: middle; } +.gicon-add-annotation { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg'); +} + +.gicon-add-annotation-alt { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg'); +} + +.gicon-add-datasources { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg'); +} + +.gicon-add-user { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg'); +} + +.gicon-add-team { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_team.svg'); +} + +.gicon-add-panel { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); +} + +.gicon-add-link { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_link.svg'); +} + +.gicon-add-variable { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_variable.svg'); +} + .gicon-alert { background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg'); } @@ -19,8 +51,32 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg'); } -.gicon-datasources { - background-image: url('../img/icons_#{$theme-name}_theme/icon_data_sources.svg'); +.gicon-alert-rules { + background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_rules.svg'); +} + +.gicon-alert-notification-channel { + background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); +} + +.gicon-annotation { + background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg'); +} + +.gicon-annotation-alt { + background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg'); +} + +.gicon-apikeys { + background-image: url('../img/icons_#{$theme-name}_theme/icon_apikeys.svg'); +} + +.gicon-branding { + background-image: url('../img/grafana_icon.svg'); +} + +.gicon-cog { + background-image: url('../img/icons_#{$theme-name}_theme/icon_cog.svg'); } .gicon-dashboard { @@ -31,41 +87,82 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg'); } -.gicon-dashboard-new { - background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg'); +.gicon-dashboard-list { + background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_list.svg'); } -.gicon-folder-new { - background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg'); +.gicon-dashboard-new { + background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg'); } .gicon-dashboard-import { background-image: url('../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg'); } -.gicon-add-panel { - background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); +.gicon-datasources { + background-image: url('../img/icons_#{$theme-name}_theme/icon_data_sources.svg'); } -.gicon-alert-notification-channel { - background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); +.gicon-folder-new { + background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg'); } -.gicon-team { - background-image: url('../img/icons_#{$theme-name}_theme/icon_team.svg'); +.gicon-home { + background-image: url('../img/icons_#{$theme-name}_theme/icon_home.svg'); +} + +.gicon-link { + background-image: url('../img/icons_#{$theme-name}_theme/icon_link.svg'); +} + +.gicon-manage { + background-image: url('../img/icons_#{$theme-name}_theme/icon_sitemap.svg'); } .gicon-org { background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg'); } +.gicon-playlists { + background-image: url('../img/icons_#{$theme-name}_theme/icon_playlist.svg'); +} + +.gicon-plugins { + background-image: url('../img/icons_#{$theme-name}_theme/icon_plugins.svg'); +} + +.gicon-preferences { + background-image: url('../img/icons_#{$theme-name}_theme/icon_preferences.svg'); +} + +.gicon-question { + background-image: url('../img/icons_#{$theme-name}_theme/icon_question.svg'); +} + +.gicon-shield { + background-image: url('../img/icons_#{$theme-name}_theme/icon_shield.svg'); +} + +.gicon-snapshots { + background-image: url('../img/icons_#{$theme-name}_theme/icon_snapshots.svg'); +} + +.gicon-team { + background-image: url('../img/icons_#{$theme-name}_theme/icon_team.svg'); +} + +.gicon-user { + background-image: url('../img/icons_#{$theme-name}_theme/icon_user.svg'); +} + +.gicon-variable { + background-image: url('../img/icons_#{$theme-name}_theme/icon_variable.svg'); +} + .gicon-zoom-out { background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); } -.gicon-branding { - background-image: url('../img/grafana_icon.svg'); -} .sidemenu { .gicon-dashboard { From 2a32d01bd57cb6e94bf01f70720f37b3c8603292 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 13 Dec 2017 17:51:01 -0500 Subject: [PATCH 533/584] replace icon on dashboard list (fa-th-large - looked squished) with a smaller version of dashbord icon. This may not be the best way to do the css, so it's a separate commit --- public/app/core/components/search/search_results.html | 2 +- public/sass/base/_icons.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 8cf5505186b..a776dabe0dc 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -30,7 +30,7 @@ - +
    {{::item.title}}
    diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index e4007d4d7cc..c460d557e02 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -11,6 +11,11 @@ vertical-align: middle; } +.mini { + width: 0.8em; + height: 0.8em; +} + .gicon-add-annotation { background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg'); } From 1cbd88fc14729cc4c4a1205133a5c2f2ecb955b4 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 13 Dec 2017 18:17:56 -0500 Subject: [PATCH 534/584] dashboard settings icons --- .../features/dashboard/settings/settings.ts | 10 ++++----- public/img/icons_dark_theme/icon_json.svg | 20 +++++++++++++++++ public/img/icons_light_theme/icon_json.svg | 22 +++++++++++++++++++ public/sass/base/_icons.scss | 4 ++++ 4 files changed, 51 insertions(+), 5 deletions(-) create mode 100644 public/img/icons_dark_theme/icon_json.svg create mode 100644 public/img/icons_light_theme/icon_json.svg diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 87ac91d568b..c2cfb31b806 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -36,10 +36,10 @@ export class SettingsCtrl { buildSectionList() { this.sections = []; if (this.dashboard.meta.canEdit) { - this.sections.push({ title: 'General', id: 'settings', icon: 'fa fa-fw fa-sliders' }); - this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'fa fa-fw fa-comment-o' }); - this.sections.push({ title: 'Variables', id: 'templating', icon: 'fa fa-fw fa-dollar' }); - this.sections.push({ title: 'Links', id: 'links', icon: 'fa fa-fw fa-external-link' }); + this.sections.push({ title: 'General', id: 'settings', icon: 'gicon gicon-preferences' }); + this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'gicon gicon-annotationp' }); + this.sections.push({ title: 'Variables', id: 'templating', icon: 'gicon gicon-variable' }); + this.sections.push({ title: 'Links', id: 'links', icon: 'gicon gicon-link' }); if (this.dashboard.id) { this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' }); @@ -51,7 +51,7 @@ export class SettingsCtrl { this.viewId = 'make_editable'; } - this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'fa fa-fw fa-code' }); + this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'gicon gicon-json' }); const params = this.$location.search(); const url = this.$location.path(); diff --git a/public/img/icons_dark_theme/icon_json.svg b/public/img/icons_dark_theme/icon_json.svg new file mode 100644 index 00000000000..13b22046a80 --- /dev/null +++ b/public/img/icons_dark_theme/icon_json.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_json.svg b/public/img/icons_light_theme/icon_json.svg new file mode 100644 index 00000000000..8a467bb86e0 --- /dev/null +++ b/public/img/icons_light_theme/icon_json.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index c460d557e02..7b5f4d0e1ca 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -116,6 +116,10 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_home.svg'); } +.gicon-json { + background-image: url('../img/icons_#{$theme-name}_theme/icon_json.svg'); +} + .gicon-link { background-image: url('../img/icons_#{$theme-name}_theme/icon_link.svg'); } From d23131bbd27d12f1a276040246c70a5544250bf0 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 13 Dec 2017 18:18:15 -0500 Subject: [PATCH 535/584] udpate dark json icon --- public/img/icons_light_theme/icon_json.svg | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/public/img/icons_light_theme/icon_json.svg b/public/img/icons_light_theme/icon_json.svg index 8a467bb86e0..0b88bae45ce 100644 --- a/public/img/icons_light_theme/icon_json.svg +++ b/public/img/icons_light_theme/icon_json.svg @@ -6,17 +6,15 @@ .st0{fill:#555555;} - - - - - - - - - + + + + + + + From 2c4de364f8b40e2da80f338a00a604aff5b4481f Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 13 Dec 2017 18:18:51 -0500 Subject: [PATCH 536/584] annotation icon fix --- public/app/features/dashboard/settings/settings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index c2cfb31b806..02f7cab6e47 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -37,7 +37,7 @@ export class SettingsCtrl { this.sections = []; if (this.dashboard.meta.canEdit) { this.sections.push({ title: 'General', id: 'settings', icon: 'gicon gicon-preferences' }); - this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'gicon gicon-annotationp' }); + this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'gicon gicon-annotation' }); this.sections.push({ title: 'Variables', id: 'templating', icon: 'gicon gicon-variable' }); this.sections.push({ title: 'Links', id: 'links', icon: 'gicon gicon-link' }); From 5dbbf1826c10a7e4fb74f3257fb82fdd6057f94e Mon Sep 17 00:00:00 2001 From: Simon Aquino Date: Thu, 14 Dec 2017 01:52:07 +0100 Subject: [PATCH 537/584] Avoid ID validation before provisioning dashboards Attempting to provision grafana using a previously exported JSON dashboard with the ID field already set, might result in an error. In fact, Grafana might believe that a dashboard with that given ID already exists in the database, throwing an error if it doesn't. (see pkg/services/sqlstore/dashboard.go#L32) The dashboard provisioner should set the dashboard id to zero in order to avoid this behaviour inducing the dashboard to be written to the DB without ID validation. --- pkg/services/provisioning/dashboards/file_reader.go | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pkg/services/provisioning/dashboards/file_reader.go b/pkg/services/provisioning/dashboards/file_reader.go index 42f232bca82..22fe11b45c1 100644 --- a/pkg/services/provisioning/dashboards/file_reader.go +++ b/pkg/services/provisioning/dashboards/file_reader.go @@ -121,6 +121,9 @@ func (fr *fileReader) walkFolder() error { return nil } + // id = 0 indicates ID validation should be avoided before writing to the db. + dash.Dashboard.Id = 0 + cmd := &models.GetDashboardQuery{Slug: dash.Dashboard.Slug} err = bus.Dispatch(cmd) From c5c403b6ef4947366d83ffe6dd0b4f7e9a2f81f7 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Thu, 14 Dec 2017 08:59:58 +0100 Subject: [PATCH 538/584] orgswitcher: update test --- public/app/core/specs/org_switcher.jest.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/specs/org_switcher.jest.ts b/public/app/core/specs/org_switcher.jest.ts index eaa9031b15b..9597d78f586 100644 --- a/public/app/core/specs/org_switcher.jest.ts +++ b/public/app/core/specs/org_switcher.jest.ts @@ -21,7 +21,7 @@ describe('OrgSwitcher', () => { const orgSwitcherCtrl = new OrgSwitchCtrl(backendSrvStub); - orgSwitcherCtrl.getWindowLocationHref = () => 'http://localhost:3000?orgId=1'; + orgSwitcherCtrl.getWindowLocationHref = () => 'http://localhost:3000?orgId=1&from=now-3h&to=now'; orgSwitcherCtrl.setWindowLocationHref = (href) => expectedHref = href; return orgSwitcherCtrl.setUsingOrg({orgId: 2}); @@ -32,7 +32,7 @@ describe('OrgSwitcher', () => { }); it('should switch orgId in url', () => { - expect(expectedHref).toBe('http://localhost:3000?orgId=2'); + expect(expectedHref).toBe('http://localhost:3000?orgId=2&from=now-3h&to=now'); }); }); }); From f1b1dbc6dd9a6515eace7ff00e44c4ee2455a981 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Thu, 14 Dec 2017 09:34:00 +0100 Subject: [PATCH 539/584] dashboard: fix test after merge conflict --- pkg/api/dashboard_test.go | 33 --------------------------------- 1 file changed, 33 deletions(-) diff --git a/pkg/api/dashboard_test.go b/pkg/api/dashboard_test.go index 1ddb32b4adc..40a96816fde 100644 --- a/pkg/api/dashboard_test.go +++ b/pkg/api/dashboard_test.go @@ -103,39 +103,6 @@ func TestDashboardApiEndpoint(t *testing.T) { }) }) - Convey("When user is an Org Read Only Editor", func() { - role := m.ROLE_READ_ONLY_EDITOR - loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/dashboards/2", "/api/dashboards/:id", role, func(sc *scenarioContext) { - dash := GetDashboardShouldReturn200(sc) - - Convey("Should be able to view but not save the dashboard", func() { - So(dash.Meta.CanEdit, ShouldBeFalse) - So(dash.Meta.CanSave, ShouldBeFalse) - So(dash.Meta.CanAdmin, ShouldBeFalse) - }) - }) - - loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/dashboards/2", "/api/dashboards/:id", role, func(sc *scenarioContext) { - CallDeleteDashboard(sc) - So(sc.resp.Code, ShouldEqual, 403) - }) - - loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/dashboards/id/2/versions/1", "/api/dashboards/id/:dashboardId/versions/:id", role, func(sc *scenarioContext) { - CallGetDashboardVersion(sc) - So(sc.resp.Code, ShouldEqual, 403) - }) - - loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/dashboards/id/2/versions", "/api/dashboards/id/:dashboardId/versions", role, func(sc *scenarioContext) { - CallGetDashboardVersions(sc) - So(sc.resp.Code, ShouldEqual, 403) - }) - - postDashboardScenario("When calling POST on", "/api/dashboards", "/api/dashboards", role, cmd, func(sc *scenarioContext) { - CallPostDashboard(sc) - So(sc.resp.Code, ShouldEqual, 403) - }) - }) - Convey("When user is an Org Editor", func() { role := m.ROLE_EDITOR From 34cffc6b92e929ea0d126252273f8d3ad53f35f2 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Thu, 14 Dec 2017 09:35:14 +0100 Subject: [PATCH 540/584] dashfolder: fix after backendSrv change also removes unused create folder modal --- .../features/dashboard/create_folder_ctrl.ts | 2 +- .../dashboard/folder_modal/folder.html | 24 ----------- .../features/dashboard/folder_modal/folder.ts | 42 ------------------- 3 files changed, 1 insertion(+), 67 deletions(-) delete mode 100644 public/app/features/dashboard/folder_modal/folder.html delete mode 100644 public/app/features/dashboard/folder_modal/folder.ts diff --git a/public/app/features/dashboard/create_folder_ctrl.ts b/public/app/features/dashboard/create_folder_ctrl.ts index 69d03e21b5e..8eebfecf1b5 100644 --- a/public/app/features/dashboard/create_folder_ctrl.ts +++ b/public/app/features/dashboard/create_folder_ctrl.ts @@ -20,7 +20,7 @@ export class CreateFolderCtrl { return this.backendSrv.createDashboardFolder(title).then(result => { appEvents.emit('alert-success', ['Folder Created', 'OK']); - var folderUrl = `/dashboards/folder/${result.id}/db/${result.slug}`; + var folderUrl = `/dashboards/folder/${result.dashboard.id}/${result.meta.slug}`; this.$location.url(folderUrl); }); } diff --git a/public/app/features/dashboard/folder_modal/folder.html b/public/app/features/dashboard/folder_modal/folder.html deleted file mode 100644 index e037923e77a..00000000000 --- a/public/app/features/dashboard/folder_modal/folder.html +++ /dev/null @@ -1,24 +0,0 @@ -
    -
    -

    - - New Dashboard Folder -

    - - - - -
    - -
    -
    -
    - -
    -
    -
    - - Cancel -
    -
    -
    diff --git a/public/app/features/dashboard/folder_modal/folder.ts b/public/app/features/dashboard/folder_modal/folder.ts deleted file mode 100644 index c788d54351f..00000000000 --- a/public/app/features/dashboard/folder_modal/folder.ts +++ /dev/null @@ -1,42 +0,0 @@ -import coreModule from 'app/core/core_module'; -import appEvents from 'app/core/app_events'; - -export class FolderCtrl { - title: string; - dismiss: any; - - /** @ngInject */ - constructor(private backendSrv, private $location) { - } - - create() { - if (!this.title || this.title.trim().length === 0) { - return; - } - - const title = this.title.trim(); - - return this.backendSrv.createDashboardFolder(title).then(result => { - appEvents.emit('alert-success', ['Folder Created', 'OK']); - this.dismiss(); - - var folderUrl = '/dashboard/db/' + result.slug; - this.$location.url(folderUrl); - }); - } -} - -export function folderModal() { - return { - restrict: 'E', - templateUrl: 'public/app/features/dashboard/folder_modal/folder.html', - controller: FolderCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: { - dismiss: "&" - } - }; -} - -coreModule.directive('folderModal', folderModal); From fcca36a25693b3feb06fcb15a1ba89d687131d12 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Thu, 14 Dec 2017 09:46:55 +0100 Subject: [PATCH 541/584] fix: after removed file --- public/app/features/dashboard/all.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index 9e8d034eb21..bea8bd7a374 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -24,7 +24,6 @@ import './dashgrid/PanelLoader'; import './dashgrid/RowOptions'; import './acl/acl'; import './folder_picker/picker'; -import './folder_modal/folder'; import './move_to_folder_modal/move_to_folder'; import './settings/settings'; From 294a6a0046b63bd1bd4cbb1bc3944c2cc9adc256 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 11:20:34 +0100 Subject: [PATCH 542/584] add release date for 4.6.3 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 68b5ba04bbb..c9d70234fce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,7 +46,7 @@ From `/etc/grafana/datasources` to `/etc/grafana/provisioning/datasources` when * **Singlestat**: suppress error when result contains no datapoints [#9636](https://github.com/grafana/grafana/issues/9636), thx [@utkarshcmu](https://github.com/utkarshcmu) * **Postgres/MySQL**: Control quoting in SQL-queries when using template variables [#9030](https://github.com/grafana/grafana/issues/9030), thanks [@svenklemm](https://github.com/svenklemm) -# 4.6.3 (unreleased) +# 4.6.3 (2017-12-14) ## Fixes * **Gzip**: Fixes bug gravatar images when gzip was enabled [#5952](https://github.com/grafana/grafana/issues/5952) From 196a05d4875d55768a6ed92ef2388580b3b89984 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 11:25:16 +0100 Subject: [PATCH 543/584] dashfolders: bulk move/delete improvements Use slug and url instead of uri Check/uncheck a folder will check/uncheck all its children dashboards Allow to move dashboards when there are both folders and dashboards selected Hide the header of section when only managing one folder #10081 #10181 --- .../manage_dashboards/manage_dashboards.ts | 17 ++-- .../core/components/search/search_results.ts | 28 +++++- public/app/core/services/search_srv.ts | 10 +- .../app/core/specs/manage_dashboards.jest.ts | 91 +++++++++++++++---- public/app/core/specs/search_results.jest.ts | 4 +- .../move_to_folder_modal/move_to_folder.ts | 2 +- 6 files changed, 117 insertions(+), 35 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 5b74a0e50fc..66873067621 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -58,10 +58,13 @@ export class ManageDashboardsCtrl { dashboard.checked = false; } } + + if (this.folderId && this.sections.length > 0) { + this.sections[0].hideHeader = true; + } } selectionChanged() { - let selectedDashboards = 0; for (let section of this.sections) { @@ -69,7 +72,7 @@ export class ManageDashboardsCtrl { } const selectedFolders = _.filter(this.sections, { checked: true }).length; - this.canMove = selectedDashboards > 0 && selectedFolders === 0; + this.canMove = selectedDashboards > 0; this.canDelete = selectedDashboards > 0 || selectedFolders > 0; } @@ -77,11 +80,11 @@ export class ManageDashboardsCtrl { let selectedDashboards = []; for (const section of this.sections) { - if (section.checked) { - selectedDashboards.push(section.uri); + if (section.checked && section.id !== 0) { + selectedDashboards.push(section.slug); } else { const selected = _.filter(section.items, { checked: true }); - selectedDashboards.push(..._.map(selected, 'uri')); + selectedDashboards.push(..._.map(selected, 'slug')); } } @@ -109,7 +112,7 @@ export class ManageDashboardsCtrl { onConfirm: () => { const promises = []; for (let dash of selectedDashboards) { - promises.push(this.backendSrv.delete(`/api/dashboards/${dash}`)); + promises.push(this.backendSrv.delete(`/api/dashboards/db/${dash}`)); } this.$q.all(promises).then(() => { @@ -124,7 +127,7 @@ export class ManageDashboardsCtrl { for (const section of this.sections) { const selected = _.filter(section.items, { checked: true }); - selectedDashboards.push(..._.map(selected, 'uri')); + selectedDashboards.push(..._.map(selected, 'slug')); } return selectedDashboards; diff --git a/public/app/core/components/search/search_results.ts b/public/app/core/components/search/search_results.ts index 0c74600d1c3..3e7e8e6147b 100644 --- a/public/app/core/components/search/search_results.ts +++ b/public/app/core/components/search/search_results.ts @@ -1,4 +1,4 @@ -// import _ from 'lodash'; +import _ from 'lodash'; import coreModule from '../../core_module'; export class SearchResultsCtrl { @@ -6,10 +6,10 @@ export class SearchResultsCtrl { onSelectionChanged: any; onTagSelected: any; onFolderExpanding: any; + editable: boolean; /** @ngInject */ - constructor(private $location) { - } + constructor(private $location) {} toggleFolderExpand(section) { if (section.toggle) { @@ -17,12 +17,24 @@ export class SearchResultsCtrl { this.onFolderExpanding(); } - section.toggle(section); + section.toggle(section).then(f => { + if (this.editable && f.expanded) { + if (f.items) { + _.each(f.items, i => { + i.checked = f.checked; + }); + + if (this.onSelectionChanged) { + this.onSelectionChanged(); + } + } + } + }); } } navigateToFolder(section, evt) { - this.$location.path('/dashboards/folder/' + section.id + '/' + section.uri); + this.$location.path(section.url); if (evt) { evt.stopPropagation(); @@ -33,6 +45,12 @@ export class SearchResultsCtrl { toggleSelection(item, evt) { item.checked = !item.checked; + if (item.items) { + _.each(item.items, i => { + i.checked = item.checked; + }); + } + if (this.onSelectionChanged) { this.onSelectionChanged(); } diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index 69341757a45..a930868852f 100644 --- a/public/app/core/services/search_srv.ts +++ b/public/app/core/services/search_srv.ts @@ -51,18 +51,19 @@ export class SearchSrv { store.set('search.sections.recent', this.recentIsOpen); if (!section.expanded || section.items.length) { - return Promise.resolve(); + return Promise.resolve(section); } return this.queryForRecentDashboards().then(result => { section.items = result; + return Promise.resolve(section); }); } private toggleStarred(section) { this.starredIsOpen = section.expanded = !section.expanded; store.set('search.sections.starred', this.starredIsOpen); - return Promise.resolve(); + return Promise.resolve(section); } private getStarred(sections) { @@ -134,6 +135,7 @@ export class SearchSrv { items: [], toggle: this.toggleFolder.bind(this), url: `dashboards/folder/${hit.id}/${hit.slug}`, + slug: hit.slug, icon: 'fa fa-folder', score: _.keys(sections).length, }; @@ -152,6 +154,7 @@ export class SearchSrv { id: hit.folderId, title: hit.folderTitle, url: `dashboards/folder/${hit.folderId}/${hit.folderSlug}`, + slug: hit.slug, items: [], icon: 'fa fa-folder-open', toggle: this.toggleFolder.bind(this), @@ -181,7 +184,7 @@ export class SearchSrv { section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder'; if (section.items.length) { - return Promise.resolve(); + return Promise.resolve(section); } let query = { @@ -190,6 +193,7 @@ export class SearchSrv { return this.backendSrv.search(query).then(results => { section.items = _.map(results, this.transformToViewModel); + return Promise.resolve(section); }); } diff --git a/public/app/core/specs/manage_dashboards.jest.ts b/public/app/core/specs/manage_dashboards.jest.ts index 770679f09bf..c231af46eb0 100644 --- a/public/app/core/specs/manage_dashboards.jest.ts +++ b/public/app/core/specs/manage_dashboards.jest.ts @@ -58,6 +58,41 @@ describe('ManageDashboards', () => { expect(ctrl.sections[0].items[0].checked).toEqual(false); expect(ctrl.sections[1].checked).toEqual(false); expect(ctrl.sections[1].items[0].checked).toEqual(false); + expect(ctrl.sections[0].hideHeader).toBeFalsy(); + }); + }); + + describe('when browsing dashboards for a folder', () => { + beforeEach(() => { + const response = [ + { + id: 410, + title: "afolder", + type: "dash-folder", + items: [ + { + id: 399, + title: "Dashboard Test", + url: "dashboard/db/dashboard-test", + icon: 'fa fa-folder', + tags: [], + isStarred: false, + folderId: 410, + folderTitle: "afolder", + folderSlug: "afolder" + } + ], + tags: [], + isStarred: false + } + ]; + ctrl = createCtrlWithStubs(response); + ctrl.folderId = 410; + return ctrl.getDashboards(); + }); + + it('should set hide header to true on section', () => { + expect(ctrl.sections[0].hideHeader).toBeTruthy(); }); }); @@ -263,8 +298,8 @@ describe('ManageDashboards', () => { expect(ctrl.sections[1].items[0].checked).toBeTruthy(); }); - it('should disable Move To button', () => { - expect(ctrl.canMove).toBeFalsy(); + it('should enable Move To button', () => { + expect(ctrl.canMove).toBeTruthy(); }); it('should enable delete button', () => { @@ -294,8 +329,8 @@ describe('ManageDashboards', () => { ctrl.selectionChanged(); }); - it('should disable Move To button', () => { - expect(ctrl.canMove).toBeFalsy(); + it('should enable Move To button', () => { + expect(ctrl.canMove).toBeTruthy(); }); it('should enable delete button', () => { @@ -455,8 +490,8 @@ describe('ManageDashboards', () => { ctrl.selectionChanged(); }); - it('should disable Move To button', () => { - expect(ctrl.canMove).toBeFalsy(); + it('should enable Move To button', () => { + expect(ctrl.canMove).toBeTruthy(); }); it('should enable delete button', () => { @@ -466,6 +501,8 @@ describe('ManageDashboards', () => { }); describe('when deleting dashboards', () => { + let toBeDeleted = []; + beforeEach(() => { ctrl = createCtrlWithStubs([]); @@ -474,27 +511,47 @@ describe('ManageDashboards', () => { id: 1, title: 'folder', items: [ - { id: 2, checked: true, uri: 'dash' } + { id: 2, checked: true, slug: 'folder-dash' } ], checked: true, - uri: 'folder' + slug: 'folder' + }, + { + id: 3, + title: 'folder-2', + items: [ + { id: 3, checked: true, slug: 'folder-2-dash' } + ], + checked: false, + slug: 'folder-2' }, { id: 0, title: 'Root', items: [ - { id: 3, checked: true, uri: 'dash-2' } + { id: 3, checked: true, slug: 'root-dash' } ], - checked: false + checked: true } ]; + + toBeDeleted = ctrl.getDashboardsToDelete(); }); - it('should filter out children if parent is selected', () => { - const toBeDeleted = ctrl.getDashboardsToDelete(); - expect(toBeDeleted.length).toEqual(2); + it('should return 3 items', () => { + expect(toBeDeleted.length).toEqual(3); + }); + + it('should filter out children if parent is checked', () => { expect(toBeDeleted[0]).toEqual('folder'); - expect(toBeDeleted[1]).toEqual('dash-2'); + }); + + it('should not filter out children if parent not is checked', () => { + expect(toBeDeleted[1]).toEqual('folder-2-dash'); + }); + + it('should not filter out children if parent is checked and root', () => { + expect(toBeDeleted[2]).toEqual('root-dash'); }); }); @@ -507,16 +564,16 @@ describe('ManageDashboards', () => { id: 1, title: 'folder', items: [ - { id: 2, checked: true, uri: 'dash' } + { id: 2, checked: true, slug: 'dash' } ], checked: false, - uri: 'folder' + slug: 'folder' }, { id: 0, title: 'Root', items: [ - { id: 3, checked: true, uri: 'dash-2' } + { id: 3, checked: true, slug: 'dash-2' } ], checked: false } diff --git a/public/app/core/specs/search_results.jest.ts b/public/app/core/specs/search_results.jest.ts index b8eed3cef9b..7084f5e7d8f 100644 --- a/public/app/core/specs/search_results.jest.ts +++ b/public/app/core/specs/search_results.jest.ts @@ -64,7 +64,7 @@ describe('SearchResultsCtrl', () => { let folder = { expanded: false, - toggle: () => {} + toggle: () => Promise.resolve(folder) }; ctrl.toggleFolderExpand(folder); @@ -84,7 +84,7 @@ describe('SearchResultsCtrl', () => { let folder = { expanded: true, - toggle: () => {} + toggle: () => Promise.resolve(folder) }; ctrl.toggleFolderExpand(folder); diff --git a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts index 0a41029fe68..9300b754a9a 100644 --- a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts +++ b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts @@ -32,7 +32,7 @@ export class MoveToFolderCtrl { private moveDashboard(dash) { let deferred = this.$q.defer(); - this.backendSrv.get('/api/dashboards/' + dash) + this.backendSrv.get('/api/dashboards/db/' + dash) .then(fullDash => { const model = new DashboardModel(fullDash.dashboard, fullDash.meta); From 43ac2b1dba02173afa3f9b5bc10a862f3ae76b15 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 11:30:10 +0100 Subject: [PATCH 544/584] update version for packagecloud --- packaging/publish/publish_both.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packaging/publish/publish_both.sh b/packaging/publish/publish_both.sh index 6c4f5a5c29a..9736cbddd6c 100755 --- a/packaging/publish/publish_both.sh +++ b/packaging/publish/publish_both.sh @@ -1,5 +1,5 @@ #! /usr/bin/env bash -version=4.6.2 +version=4.6.3 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_${version}_amd64.deb From e136b7c2865c002cd86b8e3b76d24041de6b74ff Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 11:30:57 +0100 Subject: [PATCH 545/584] dashfolders: /dashboards should render index page with a 200 OK --- pkg/api/api.go | 1 + 1 file changed, 1 insertion(+) diff --git a/pkg/api/api.go b/pkg/api/api.go index 4b570ce5b89..3f6d8d4d954 100644 --- a/pkg/api/api.go +++ b/pkg/api/api.go @@ -64,6 +64,7 @@ func (hs *HttpServer) registerRoutes() { r.Get("/dashboard-solo/snapshot/*", Index) r.Get("/dashboard-solo/*", reqSignedIn, Index) r.Get("/import/dashboard", reqSignedIn, Index) + r.Get("/dashboards/", reqSignedIn, Index) r.Get("/dashboards/*", reqSignedIn, Index) r.Get("/playlists/", reqSignedIn, Index) From 592cb386e287d47d5409a6e7cf00cf697549d833 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 17 Oct 2017 20:20:37 +0200 Subject: [PATCH 546/584] dshttpsettings: add field for cookies that should be kept The ds proxy strips out cookies. Cookie names specified in this field will not be stripped out. This is the frontend change only. --- .../features/plugins/partials/ds_http_settings.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 39fc7296b32..f27a9d00da2 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -36,6 +36,18 @@ + +
    +
    + Cookies + + + + Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. + +
    +
    +

    HTTP Auth

    From f1aa7dcd52f44e89b28b6ab6932f65a38558b52a Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 17 Oct 2017 20:48:01 +0200 Subject: [PATCH 547/584] proxyds: failing test for keepCookies If the cookies are specified in the keepCookies property then they should not be deleted from proxied requests for data sources --- pkg/api/pluginproxy/ds_proxy_test.go | 54 ++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/pkg/api/pluginproxy/ds_proxy_test.go b/pkg/api/pluginproxy/ds_proxy_test.go index 0a900ad3a6d..1b7b1c76ea6 100644 --- a/pkg/api/pluginproxy/ds_proxy_test.go +++ b/pkg/api/pluginproxy/ds_proxy_test.go @@ -149,6 +149,60 @@ func TestDSRouteRule(t *testing.T) { }) }) + Convey("When proxying a data source with no keepCookies specified", func() { + plugin := &plugins.DataSourcePlugin{} + + json := simplejson.New() + json.Set("keepCookies", []string{}) + + ds := &m.DataSource{ + Type: m.DS_GRAPHITE, + Url: "http://graphite:8086", + JsonData: json, + } + + ctx := &middleware.Context{} + proxy := NewDataSourceProxy(ds, plugin, ctx, "") + + requestUrl, _ := url.Parse("http://grafana.com/sub") + req := http.Request{URL: requestUrl, Header: make(http.Header)} + cookies := "grafana_user=admin; grafana_remember=99; grafana_sess=11; JSESSION_ID=test" + req.Header.Set("Cookie", cookies) + + proxy.getDirector()(&req) + + Convey("Should clear all cookies", func() { + So(req.Header.Get("Cookie"), ShouldEqual, "") + }) + }) + + Convey("When proxying a data source with keep cookies specified", func() { + plugin := &plugins.DataSourcePlugin{} + + json := simplejson.New() + json.Set("keepCookies", []string{"JSESSION_ID"}) + + ds := &m.DataSource{ + Type: m.DS_GRAPHITE, + Url: "http://graphite:8086", + JsonData: json, + } + + ctx := &middleware.Context{} + proxy := NewDataSourceProxy(ds, plugin, ctx, "") + + requestUrl, _ := url.Parse("http://grafana.com/sub") + req := http.Request{URL: requestUrl, Header: make(http.Header)} + cookies := "grafana_user=admin; grafana_remember=99; grafana_sess=11; JSESSION_ID=test" + req.Header.Set("Cookie", cookies) + + proxy.getDirector()(&req) + + Convey("Should keep named cookies", func() { + So(req.Header.Get("Cookie"), ShouldEqual, "JSESSION=test") + }) + }) + Convey("When interpolating string", func() { data := templateData{ SecureJsonData: map[string]string{ From bcc85862fec53fddb517ea1a4788f06331a6ce86 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 18 Oct 2017 10:00:14 +0200 Subject: [PATCH 548/584] dshttpsettings: Move whitelisted cookies to end of config page --- .../plugins/partials/ds_http_settings.html | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index f27a9d00da2..582ec7d9618 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -36,18 +36,6 @@ - -
    -
    - Cookies - - - - Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. - -
    -
    -

    HTTP Auth

    @@ -135,3 +123,17 @@ +

    Advanced HTTP Settings

    +
    +
    +
    + Whitelisted Cookies + + + + Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. + +
    +
    +
    + From cf7a49977f601d684d6df3ce9415f57901e210a9 Mon Sep 17 00:00:00 2001 From: Robin Gustafsson Date: Wed, 18 Oct 2017 00:47:15 +0200 Subject: [PATCH 549/584] proxyds: delete cookies except those listed in keepCookies --- pkg/api/pluginproxy/ds_proxy.go | 19 +++++++++++++++++-- pkg/api/pluginproxy/ds_proxy_test.go | 8 +++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/pkg/api/pluginproxy/ds_proxy.go b/pkg/api/pluginproxy/ds_proxy.go index faac8c03c62..5f4ec632c4d 100644 --- a/pkg/api/pluginproxy/ds_proxy.go +++ b/pkg/api/pluginproxy/ds_proxy.go @@ -135,9 +135,24 @@ func (proxy *DataSourceProxy) getDirector() func(req *http.Request) { req.Header.Add("Authorization", dsAuth) } - // clear cookie headers + // clear cookie header, except for whitelisted cookies + var keptCookies []*http.Cookie + if proxy.ds.JsonData != nil { + if keepCookies := proxy.ds.JsonData.Get("keepCookies"); keepCookies != nil { + keepCookieNames := keepCookies.MustStringArray() + for _, c := range req.Cookies() { + for _, v := range keepCookieNames { + if c.Name == v { + keptCookies = append(keptCookies, c) + } + } + } + } + } req.Header.Del("Cookie") - req.Header.Del("Set-Cookie") + for _, c := range keptCookies { + req.AddCookie(c) + } // clear X-Forwarded Host/Port/Proto headers req.Header.Del("X-Forwarded-Host") diff --git a/pkg/api/pluginproxy/ds_proxy_test.go b/pkg/api/pluginproxy/ds_proxy_test.go index 1b7b1c76ea6..a7a869b2a9f 100644 --- a/pkg/api/pluginproxy/ds_proxy_test.go +++ b/pkg/api/pluginproxy/ds_proxy_test.go @@ -152,8 +152,7 @@ func TestDSRouteRule(t *testing.T) { Convey("When proxying a data source with no keepCookies specified", func() { plugin := &plugins.DataSourcePlugin{} - json := simplejson.New() - json.Set("keepCookies", []string{}) + json, _ := simplejson.NewJson([]byte(`{"keepCookies": []}`)) ds := &m.DataSource{ Type: m.DS_GRAPHITE, @@ -179,8 +178,7 @@ func TestDSRouteRule(t *testing.T) { Convey("When proxying a data source with keep cookies specified", func() { plugin := &plugins.DataSourcePlugin{} - json := simplejson.New() - json.Set("keepCookies", []string{"JSESSION_ID"}) + json, _ := simplejson.NewJson([]byte(`{"keepCookies": ["JSESSION_ID"]}`)) ds := &m.DataSource{ Type: m.DS_GRAPHITE, @@ -199,7 +197,7 @@ func TestDSRouteRule(t *testing.T) { proxy.getDirector()(&req) Convey("Should keep named cookies", func() { - So(req.Header.Get("Cookie"), ShouldEqual, "JSESSION=test") + So(req.Header.Get("Cookie"), ShouldEqual, "JSESSION_ID=test") }) }) From ff89531849dc9feae4443c0520005c3f4b35f831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 12:10:32 +0100 Subject: [PATCH 550/584] fix: ignore row clones in schema migration --- .../features/dashboard/dashboard_migration.ts | 4 ++++ .../dashboard/specs/dashboard_migration.jest.ts | 16 ++++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/public/app/features/dashboard/dashboard_migration.ts b/public/app/features/dashboard/dashboard_migration.ts index 95a70cbfcab..73f077c8400 100644 --- a/public/app/features/dashboard/dashboard_migration.ts +++ b/public/app/features/dashboard/dashboard_migration.ts @@ -387,6 +387,10 @@ export class DashboardMigrator { const showRows = _.some(old.rows, (row) => row.collapse || row.showTitle || row.repeat); for (let row of old.rows) { + if (row.repeatIteration) { + continue; + } + let height: any = row.height || DEFAULT_ROW_HEIGHT; const rowGridHeight = getGridHeight(height); diff --git a/public/app/features/dashboard/specs/dashboard_migration.jest.ts b/public/app/features/dashboard/specs/dashboard_migration.jest.ts index dfdcb7601a4..4254a633459 100644 --- a/public/app/features/dashboard/specs/dashboard_migration.jest.ts +++ b/public/app/features/dashboard/specs/dashboard_migration.jest.ts @@ -337,12 +337,24 @@ describe('DashboardModel', function() { expect(dashboard.panels[2].repeat).toBeUndefined(); expect(dashboard.panels[3].repeat).toBeUndefined(); }); + + it('should ignore repeated row', function() { + model.rows = [ + createRow({showTitle: true, title: "Row1", height: 8, repeat: "server"}, [[6]]), + createRow({showTitle: true, title: "Row2", height: 8, repeatIteration: 12313, repeatRowId: 1}, [[6]]), + ]; + + let dashboard = new DashboardModel(model); + expect(dashboard.panels[0].repeat).toBe("server"); + expect(dashboard.panels.length).toBe(2); + }); + }); }); function createRow(options, panelDescriptions: any[]) { const PANEL_HEIGHT_STEP = GRID_CELL_HEIGHT + GRID_CELL_VMARGIN; - let {collapse, height, showTitle, title, repeat} = options; + let {collapse, height, showTitle, title, repeat, repeatIteration} = options; height = height * PANEL_HEIGHT_STEP; let panels = []; _.each(panelDescriptions, panelDesc => { @@ -352,7 +364,7 @@ function createRow(options, panelDescriptions: any[]) { } panels.push(panel); }); - let row = {collapse, height, showTitle, title, panels, repeat}; + let row = {collapse, height, showTitle, title, panels, repeat, repeatIteration}; return row; } From 776c39fd7937cc409be054c5ba986eb7452a3e49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 12:31:57 +0100 Subject: [PATCH 551/584] templating: made templateSrv globally accessable as ES6 module, DashboardRow can not interpolate row title --- .../features/dashboard/dashgrid/DashboardRow.tsx | 15 ++++++++++----- public/app/features/templating/all.ts | 7 ++++--- public/app/features/templating/template_srv.ts | 2 ++ 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx index 00999e4005e..3d4ec474886 100644 --- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx @@ -2,6 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { PanelModel } from '../panel_model'; import { PanelContainer } from './PanelContainer'; +import templateSrv from 'app/features/templating/template_srv'; import appEvents from 'app/core/app_events'; export interface DashboardRowProps { @@ -10,6 +11,9 @@ export interface DashboardRowProps { } export class DashboardRow extends React.Component { + dashboard: any; + panelContainer: any; + constructor(props) { super(props); @@ -17,15 +21,15 @@ export class DashboardRow extends React.Component { collapsed: this.props.panel.collapsed, }; + this.panelContainer = this.props.getPanelContainer(); + this.dashboard = this.panelContainer.getDashboard(); + this.toggle = this.toggle.bind(this); this.openSettings = this.openSettings.bind(this); } toggle() { - const panelContainer = this.props.getPanelContainer(); - const dashboard = panelContainer.getDashboard(); - - dashboard.toggleRow(this.props.panel); + this.dashboard.toggleRow(this.props.panel); this.setState(prevState => { return { collapsed: !prevState.collapsed }; @@ -72,13 +76,14 @@ export class DashboardRow extends React.Component { 'fa-chevron-right': this.state.collapsed, }); + let title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars); const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0; return (
    - {this.props.panel.title} + {title} ({hiddenPanels} hidden panels)
    diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index 84ad8082c0b..c970b73fe59 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -1,7 +1,7 @@ import './editor_ctrl'; import coreModule from 'app/core/core_module'; -import { TemplateSrv } from './template_srv'; +import templateSrv from './template_srv'; import { VariableSrv } from './variable_srv'; import { IntervalVariable } from './interval_variable'; import { QueryVariable } from './query_variable'; @@ -10,10 +10,11 @@ import { CustomVariable } from './custom_variable'; import { ConstantVariable } from './constant_variable'; import { AdhocVariable } from './adhoc_variable'; -coreModule.service('templateSrv', TemplateSrv); +coreModule.factory('templateSrv', function() { + return templateSrv; +}); export { - TemplateSrv, VariableSrv, IntervalVariable, QueryVariable, diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts index f499a24f848..85e2b672083 100644 --- a/public/app/features/templating/template_srv.ts +++ b/public/app/features/templating/template_srv.ts @@ -240,3 +240,5 @@ export class TemplateSrv { return value.join(','); } } + +export default new TemplateSrv(); From b012131050b7cb9ace01148d0fb8f26639503afd Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Thu, 14 Dec 2017 12:46:00 +0100 Subject: [PATCH 552/584] Magnifying glass on search fields #10188 (#10206) * ux: Add magnifying glass icon to search input and remove the text label (#10188) * ux: Add new look on search field to manage dashboards, users, teams, data sources, plugins. Change to use our own icon class instead of .fa (#10188) * ux: Add new search look on org/users (#10188) --- .../manage_dashboards/manage_dashboards.html | 6 ++--- public/app/features/admin/partials/users.html | 10 ++++----- .../app/features/org/partials/orgUsers.html | 6 ++--- public/app/features/org/partials/teams.html | 11 ++++------ .../features/plugins/partials/ds_list.html | 10 ++++----- .../plugins/partials/plugin_list.html | 6 ++--- public/sass/components/_gf-form.scss | 22 +++++++++++++++++++ 7 files changed, 44 insertions(+), 27 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index a4def0dc55e..1345a62e97d 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -1,8 +1,8 @@
    -
    - +
    + +
    diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index e98299eac64..15a38f73c13 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -2,11 +2,11 @@
    -
    - - -
    -
    + +
    Add new user diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 42d27706f96..4531f99e4e4 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -2,10 +2,10 @@
    -
    - +
    + +
    diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html index 67d24b1f94b..a7cef1a2128 100644 --- a/public/app/features/org/partials/teams.html +++ b/public/app/features/org/partials/teams.html @@ -2,13 +2,10 @@
    - -
    - - -
    - +
    diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 401eb4eac6c..936ecbc6e64 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -3,13 +3,11 @@
    -
    - - -
    - +
    -     Add data source diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index e4550171220..ec4d7fd2bae 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -2,10 +2,10 @@
    -
    - +
    + +
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 0571df226cb..7e134cddfa5 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,6 +1,7 @@ $gf-form-margin: 3px; $input-border: 1px solid $input-border-color; + .gf-form { margin-bottom: $gf-form-margin; display: flex; @@ -31,6 +32,27 @@ $input-border: 1px solid $input-border-color; } } +.gf-form--has-input-icon { + position: relative; + + .gf-form-input-icon { + position: absolute; + top: 50%; + margin-top: -9px; + font-size: $font-size-lg; + left: 10px; + color: $input-color-placeholder; + } + + > input { + padding-left: 30px; + + &:focus + .gf-form-input-icon { + color: $gray-4; + } + } +} + .gf-form-disabled { color: $text-color-weak; From 0085114d4ebfaf771994bb1838ff798c1c269cb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 13:08:32 +0100 Subject: [PATCH 553/584] ux: minor changes to search input --- public/app/features/org/partials/orgUsers.html | 2 +- public/app/features/org/partials/teams.html | 2 +- public/app/features/plugins/partials/ds_list.html | 2 +- public/sass/_variables.dark.scss | 4 ++-- public/sass/components/_gf-form.scss | 4 ++-- public/sass/mixins/_forms.scss | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 4531f99e4e4..697879c6ac2 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -3,7 +3,7 @@
    diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html index a7cef1a2128..44682ba18e9 100644 --- a/public/app/features/org/partials/teams.html +++ b/public/app/features/org/partials/teams.html @@ -3,7 +3,7 @@
    diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 936ecbc6e64..e53d5fa7ebb 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -4,7 +4,7 @@
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index d2895fc2d78..e1015a39c13 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -184,8 +184,8 @@ $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.10); -$input-border-focus: $input-border-color !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$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; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 7e134cddfa5..c8c53911af9 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -45,10 +45,10 @@ $input-border: 1px solid $input-border-color; } > input { - padding-left: 30px; + padding-left: 35px; &:focus + .gf-form-input-icon { - color: $gray-4; + color: $text-muted } } } diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss index 5138cdf0a99..12b3bffaf4f 100644 --- a/public/sass/mixins/_forms.scss +++ b/public/sass/mixins/_forms.scss @@ -41,7 +41,7 @@ &:focus { border-color: $input-border-focus; outline: none; - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; + $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px $input-box-shadow-focus; @include box-shadow($shadow); } } From f6f9e58d457a07250acc058bcf4c5fd46cc81614 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 11:40:25 +0100 Subject: [PATCH 554/584] docs: update latest version to 4.6.3 --- docs/sources/installation/debian.md | 19 +++---------------- docs/sources/installation/rpm.md | 12 +++++------- docs/sources/installation/windows.md | 2 +- 3 files changed, 9 insertions(+), 24 deletions(-) diff --git a/docs/sources/installation/debian.md b/docs/sources/installation/debian.md index d832ea7a8ed..b742e96c869 100644 --- a/docs/sources/installation/debian.md +++ b/docs/sources/installation/debian.md @@ -15,9 +15,7 @@ weight = 1 Description | Download ------------ | ------------- -Stable for Debian-based Linux | [grafana_4.6.2_amd64.deb](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.6.2_amd64.deb) - - +Stable for Debian-based Linux | [grafana_4.6.3_amd64.deb](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.6.3_amd64.deb) Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing installation. @@ -26,21 +24,10 @@ installation. ```bash -wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.6.2_amd64.deb +wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.6.3_amd64.deb sudo apt-get install -y adduser libfontconfig -sudo dpkg -i grafana_4.6.2_amd64.deb +sudo dpkg -i grafana_4.6.3_amd64.deb ``` - - - ## APT Repository Add the following line to your `/etc/apt/sources.list` file. diff --git a/docs/sources/installation/rpm.md b/docs/sources/installation/rpm.md index fa2bd71ed07..d3e796a78c8 100644 --- a/docs/sources/installation/rpm.md +++ b/docs/sources/installation/rpm.md @@ -15,9 +15,7 @@ weight = 2 Description | Download ------------ | ------------- -Stable for CentOS / Fedora / OpenSuse / Redhat Linux | [4.6.2 (x86-64 rpm)](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.2-1.x86_64.rpm) - - +Stable for CentOS / Fedora / OpenSuse / Redhat Linux | [4.6.3 (x86-64 rpm)](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.3-1.x86_64.rpm) Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing installation. @@ -27,7 +25,7 @@ installation. You can install Grafana using Yum directly. ```bash -$ sudo yum install https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.2-1.x86_64.rpm +$ sudo yum install https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.3-1.x86_64.rpm ``` Or install manually using `rpm`. @@ -35,15 +33,15 @@ Or install manually using `rpm`. #### On CentOS / Fedora / Redhat: ```bash -$ wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.2-1.x86_64.rpm +$ wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.3-1.x86_64.rpm $ sudo yum install initscripts fontconfig -$ sudo rpm -Uvh grafana-4.6.2-1.x86_64.rpm +$ sudo rpm -Uvh grafana-4.6.3-1.x86_64.rpm ``` #### On OpenSuse: ```bash -$ sudo rpm -i --nodeps grafana-4.6.2-1.x86_64.rpm +$ sudo rpm -i --nodeps grafana-4.6.3-1.x86_64.rpm ``` ## Install via YUM Repository diff --git a/docs/sources/installation/windows.md b/docs/sources/installation/windows.md index 9cfd689fb43..7c6a97085df 100644 --- a/docs/sources/installation/windows.md +++ b/docs/sources/installation/windows.md @@ -13,7 +13,7 @@ weight = 3 Description | Download ------------ | ------------- -Latest stable package for Windows | [grafana.4.6.2.windows-x64.zip](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.2.windows-x64.zip) +Latest stable package for Windows | [grafana.4.6.3.windows-x64.zip](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.3.windows-x64.zip) Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing installation. From 88e9012cef30ac12c50aa1fe3ee5fe700387c4b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 13:58:11 +0100 Subject: [PATCH 555/584] Update CHANGELOG.md --- CHANGELOG.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9d70234fce..cac369c9ddf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,18 @@ # 5.0.0 (unreleased) -### WIP (in develop branch currently as its unstable or unfinished) -- Dashboard folders -- User groups -- Dashboard permissions (on folder & dashboard level), permissions can be assigned to groups or individual users -- UX changes to nav & side menu -- New dashboard grid layout system +### New Features +**Dashboards** Dashboard folders, [#1611](https://github.com/grafana/grafana/issues/1611) +**Teams** User groups (teams) implemented. Can be used in folder & dashboard permission list. +**Dashboard grid**: Panels are now layed out in a two dimensional grid (with x, y, w, h). [#9093](https://github.com/grafana/grafana/issues/9093). +**Templating**: Vertical repeat direction for panel repeats. +**UX**: Major update to page header and navigation +**Dashboard settings**: Combine dashboard settings views into one with side menu, [#9750](https://github.com/grafana/grafana/issues/9750) + +## New Dashboard Grid + +The new grid engine is major upgrade for how you can position and move panels. It enables new layouts and a much easier dashboard building experience. The change is backwards compatible. Grafana will automatically upgrade your dashboards to the new schema and position panels to match your existing layout. There might be minor differences in panel height. + +Dashboard panels and rows are positioned using a gridPos object `{x: 0, y: 0, w: 24, h: 5}`. Units are in grid dimensions (24 columns, 1 height unit 30px). Rows and Panels objects exist (together) in a flat array directly on the dashboard root object. Rows are not needed for layouts anymore and are mainly there for backward compatibility. Some panel plugins that do not respect their panel height might require an update. # 4.7.0 (unreleased) From 66ca8a66214aec874a6cc14efd96862d537a4817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 13:58:33 +0100 Subject: [PATCH 556/584] Update CHANGELOG.md --- CHANGELOG.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cac369c9ddf..aa3fd33814a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,12 @@ # 5.0.0 (unreleased) ### New Features -**Dashboards** Dashboard folders, [#1611](https://github.com/grafana/grafana/issues/1611) -**Teams** User groups (teams) implemented. Can be used in folder & dashboard permission list. -**Dashboard grid**: Panels are now layed out in a two dimensional grid (with x, y, w, h). [#9093](https://github.com/grafana/grafana/issues/9093). -**Templating**: Vertical repeat direction for panel repeats. -**UX**: Major update to page header and navigation -**Dashboard settings**: Combine dashboard settings views into one with side menu, [#9750](https://github.com/grafana/grafana/issues/9750) +- **Dashboards** Dashboard folders, [#1611](https://github.com/grafana/grafana/issues/1611) +- **Teams** User groups (teams) implemented. Can be used in folder & dashboard permission list. +- **Dashboard grid**: Panels are now layed out in a two dimensional grid (with x, y, w, h). [#9093](https://github.com/grafana/grafana/issues/9093). +- **Templating**: Vertical repeat direction for panel repeats. +- **UX**: Major update to page header and navigation +- **Dashboard settings**: Combine dashboard settings views into one with side menu, [#9750](https://github.com/grafana/grafana/issues/9750) ## New Dashboard Grid From 4e38526404229350ad86f3fa4841923000acb8db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 14:27:47 +0100 Subject: [PATCH 557/584] playlist: fixed playlist buttons in dashboard header, fixes #10213 --- public/app/core/components/grafana_app.ts | 2 +- public/app/core/services/backend_srv.ts | 1 + .../features/dashboard/dashgrid/RowOptions.ts | 1 + .../app/features/dashboard/dashnav/dashnav.html | 16 +++++----------- public/sass/components/_row.scss | 8 ++++++++ public/sass/components/_view_states.scss | 8 -------- 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index eff55405d6f..5db9b71f9e9 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -203,7 +203,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop }, 100); } - if (target.parents('.dash-playlist-actions').length === 0) { + if (target.parents('.navbar-buttons--playlist').length === 0) { playlistSrv.stop(); } diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index 97165f1284d..5ce0a3c89de 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -248,4 +248,5 @@ export class BackendSrv { } } + coreModule.service('backendSrv', BackendSrv); diff --git a/public/app/features/dashboard/dashgrid/RowOptions.ts b/public/app/features/dashboard/dashgrid/RowOptions.ts index c75ec02adf0..ef24130d2ab 100644 --- a/public/app/features/dashboard/dashgrid/RowOptions.ts +++ b/public/app/features/dashboard/dashgrid/RowOptions.ts @@ -6,6 +6,7 @@ export class RowOptionsCtrl { dismiss: any; onUpdated: any; onDelete: any; + showDelete: boolean; /** @ngInject */ constructor() { diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 03453611036..e2a932fd9ab 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -8,17 +8,11 @@
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    +
    + + + +
    diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 85e5fa8f8f8..924e567b169 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -17,6 +17,13 @@ opacity: 1; } } + + &:hover { + .dashboard-row__actions { + visibility: visible; + opacity: 1; + } + } } .dashboard-row__title { @@ -37,6 +44,7 @@ visibility: hidden; opacity: 0; flex-grow: 1; + transition: 200ms opacity ease-in 200ms; a { color: $text-color-weak; diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 0b5c5a27ee3..64568a06bcb 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -38,11 +38,3 @@ } } -.playlist-active { - .dash-playlist-actions { - .fa { - opacity: 1; - color: $text-color-faint !important; - } - } -} From 33f2e313933685afe0207f8877c07f864f1510a7 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 14 Dec 2017 14:30:13 +0100 Subject: [PATCH 558/584] replaced old table with filter-table, removed edit button, made whole rows to links --- .../app/features/admin/partials/edit_org.html | 2 +- public/app/features/admin/partials/orgs.html | 57 +++++++-------- public/app/features/admin/partials/users.html | 69 ++++++++++--------- .../alerting/partials/notifications_list.html | 63 ++++++++--------- .../app/features/org/partials/select_org.html | 2 +- public/app/features/org/partials/teams.html | 15 ++-- .../features/playlist/partials/playlist.html | 6 +- public/sass/components/_filter-table.scss | 17 +++++ 8 files changed, 128 insertions(+), 103 deletions(-) diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 123e65ac919..975d663e9b0 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -16,7 +16,7 @@

    Organization Users

    - +
    diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index a3b0f04d39d..d28cf4dc967 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -1,37 +1,40 @@
    -
    +
    New Org -
    +
    -
    Username Email
    - - - - - - - - - - - - - - -
    IdName
    {{org.id}}{{org.name}} - - - Edit - -    - - - -
    + + + + + + + + + + + + + + + +
    IdName
    + + {{org.id}} + + + + {{org.name}} + + + + + +
    diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index e98299eac64..66ab649e2cc 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -1,12 +1,13 @@
    -
    -
    - - -
    -
    +
    +
    + + +
    +
    Add new user @@ -14,39 +15,48 @@
    - +
    - + Seen + Time since user was seen using Grafana + + - - - - - - + + + + +
    Login Email - Seen - Time since user was seen using Grafana -
    - - {{user.login}}{{user.email}} - {{user.lastSeenAtAge}} - - - - - - Edit + + + -    + + + {{user.login}} + + + + {{user.email}} + + + + {{user.lastSeenAtAge}} + + + + + + @@ -60,10 +70,7 @@
    1. - +
    diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index a2f6f723696..1afd50dd12e 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,7 +1,7 @@
    -
    +
    @@ -11,34 +11,35 @@
    - - - - - - - - - - - -
    NameType
    - - {{notification.name}} - - - {{notification.type}} - - - default - - - - edit - - - - -
    - + + + + + + + + + + + + + +
    + Name + Type
    + + {{notification.name}} + + + + {{notification.type}} + + + + default + + + + +
    diff --git a/public/app/features/org/partials/select_org.html b/public/app/features/org/partials/select_org.html index 43fc555bf42..c8e143c80c1 100644 --- a/public/app/features/org/partials/select_org.html +++ b/public/app/features/org/partials/select_org.html @@ -25,7 +25,7 @@
    - +
    diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html index 67d24b1f94b..daa76301de6 100644 --- a/public/app/features/org/partials/teams.html +++ b/public/app/features/org/partials/teams.html @@ -18,26 +18,23 @@
    - +
    - + - - +
    Name Members
    + {{team.name}} #Count + #Count + - - - Edit - -    diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index c07fce48d02..0c35563a282 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -34,7 +34,7 @@
    - +
    @@ -51,7 +51,7 @@
    - +
    @@ -72,7 +72,7 @@
    Selected
    - +
    - +
      {{playlistItem.title}} diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss index 074286fad80..3c636a6a27d 100644 --- a/public/sass/components/_filter-table.scss +++ b/public/sass/components/_filter-table.scss @@ -42,6 +42,23 @@ } } + .link-td { + padding: 0; + line-height: 30px; + height: 30px; + white-space: nowrap; + + &.filter-table__switch-cell { + padding: 0; + border-right: 3px solid $page-bg; + } + + a { + display: block; + padding: $table-cell-padding; + } + } + .ellipsis { display: block; width: 100%; From 4a433ee63033b756b12931206f10dd6f698c6e53 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 14:44:58 +0100 Subject: [PATCH 559/584] docs: include all notifiers type --- docs/sources/alerting/notifications.md | 33 +++++++++++++------------- docs/sources/http_api/alerting.md | 2 ++ 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/docs/sources/alerting/notifications.md b/docs/sources/alerting/notifications.md index 102134f34dd..0a233ac3577 100644 --- a/docs/sources/alerting/notifications.md +++ b/docs/sources/alerting/notifications.md @@ -126,25 +126,26 @@ There are couple of configurations options which need to be set in Grafana UI un Once these two properties are set, you can send the alerts to Kafka for further processing or throttling them. -### Other Supported Notification Channels +### All supported notifier -Grafana also supports the following Notification Channels: +Name | Type |Support images +-----|------------ | ------ +Slack | `slack` | yes +Pagerduty | `pagerduty` | yes +Email | `email` | yes +Webhook | `webhook` | link +Kafka | `kafka` | no +Hipchat | `hipchat` | yes +VictorOps | `victorops` | yes +Sensu | `sensu` | yes +OpsGenie | `opsgenie` | yes +Threema | `threema` | yes +Pushover | `pushover` | no +Telegram | `telegram` | no +Line | `line` | no +Prometheus Alertmanager | `prometheus-alertmanager` | no -- HipChat -- VictorOps - -- Sensu - -- OpsGenie - -- Threema - -- Pushover - -- Telegram - -- LINE # Enable images in notifications {#external-image-store} diff --git a/docs/sources/http_api/alerting.md b/docs/sources/http_api/alerting.md index e66218bb066..221552414e9 100644 --- a/docs/sources/http_api/alerting.md +++ b/docs/sources/http_api/alerting.md @@ -196,6 +196,8 @@ Content-Type: application/json ## Create alert notification +You can find the full list of [supported notifers](/alerting/notifications/#all-supported-notifier) at the alert notifiers page. + `POST /api/alert-notifications` **Example Request**: From 4f56d4ac07075366f0343af7b030559ed18406cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Dec 2017 14:58:45 +0100 Subject: [PATCH 560/584] snapshots: fixed snapshot issues, fixes #10214 --- .../features/dashboard/partials/shareModal.html | 3 ++- .../app/features/dashboard/shareSnapshotCtrl.js | 15 +++++++++++---- public/sass/components/_modals.scss | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/public/app/features/dashboard/partials/shareModal.html b/public/app/features/dashboard/partials/shareModal.html index 26a49f2ab4e..6d7c132f378 100644 --- a/public/app/features/dashboard/partials/shareModal.html +++ b/public/app/features/dashboard/partials/shareModal.html @@ -2,7 +2,8 @@

    - {{modalTitle}} + + {{modalTitle}}

      diff --git a/public/app/features/dashboard/shareSnapshotCtrl.js b/public/app/features/dashboard/shareSnapshotCtrl.js index a30caf7f1c9..617e54db59c 100644 --- a/public/app/features/dashboard/shareSnapshotCtrl.js +++ b/public/app/features/dashboard/shareSnapshotCtrl.js @@ -103,14 +103,17 @@ function (angular, _) { $scope.scrubDashboard = function(dash) { // change title dash.title = $scope.snapshot.name; + // make relative times absolute dash.time = timeSrv.timeRange(); + // remove panel queries & links - dash.forEachPanel(function(panel) { + _.each(dash.panels, function(panel) { panel.targets = []; panel.links = []; panel.datasource = null; }); + // remove annotation queries dash.annotations.list = _.chain(dash.annotations.list) .filter(function(annotation) { @@ -124,6 +127,7 @@ function (angular, _) { snapshotData: annotation.snapshotData }; }).value(); + // remove template queries _.each(dash.templating.list, function(variable) { variable.query = ""; @@ -133,9 +137,12 @@ function (angular, _) { // snapshot single panel if ($scope.modeSharePanel) { - var singlePanel = dash.getPanelById($scope.panel.id); - singlePanel.span = 12; - dash.rows = [{ height: '500px', span: 12, panels: [singlePanel] }]; + var singlePanel = $scope.panel.getSaveModel(); + singlePanel.gridPos.w = 24; + singlePanel.gridPos.x = 0; + singlePanel.gridPos.y = 0; + singlePanel.gridPos.h = 20; + dash.panels = [singlePanel]; } // cleanup snapshotData diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index c05ce92bae5..4046134a801 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -57,7 +57,7 @@ .modal-header-close { float: right; - padding: 0.75rem $spacer; + padding: 9px $spacer; } // Body (where all modal content resides) From 854d22fa8efa05e509b321306fd973424c15bc87 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 15:07:31 +0100 Subject: [PATCH 561/584] dashfolders: bulk move/delete improvements bulk delete dashboards synchronously moved bulk delete and move dashboards to backend_srv better error handling/messages when moving and deleting folders/dashboards fixes #10181 --- .../manage_dashboards/manage_dashboards.ts | 77 +++++++++++++--- public/app/core/services/backend_srv.ts | 91 +++++++++++++++++++ .../app/core/specs/manage_dashboards.jest.ts | 20 ++-- .../dashboard/folder_settings_ctrl.ts | 4 +- .../move_to_folder_modal/move_to_folder.ts | 70 ++------------ .../features/dashboard/settings/settings.ts | 2 +- 6 files changed, 178 insertions(+), 86 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 66873067621..772edf82f2a 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -18,7 +18,7 @@ export class ManageDashboardsCtrl { folderId?: number; /** @ngInject */ - constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { + constructor(private backendSrv, navModelSrv, private searchSrv: SearchSrv) { this.query = { query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true }; if (this.folderId) { @@ -76,15 +76,18 @@ export class ManageDashboardsCtrl { this.canDelete = selectedDashboards > 0 || selectedFolders > 0; } - getDashboardsToDelete() { - let selectedDashboards = []; + getFoldersAndDashboardsToDelete() { + let selectedDashboards = { + folders: [], + dashboards: [] + }; for (const section of this.sections) { if (section.checked && section.id !== 0) { - selectedDashboards.push(section.slug); + selectedDashboards.folders.push(section.slug); } else { const selected = _.filter(section.items, { checked: true }); - selectedDashboards.push(..._.map(selected, 'slug')); + selectedDashboards.dashboards.push(..._.map(selected, 'slug')); } } @@ -102,23 +105,71 @@ export class ManageDashboardsCtrl { } delete() { - const selectedDashboards = this.getDashboardsToDelete(); + const data = this.getFoldersAndDashboardsToDelete(); + const folderCount = data.folders.length; + const dashCount = data.dashboards.length; + let text = 'Do you want to delete the '; + let text2; + + if (folderCount > 0 && dashCount > 0) { + text += `selected folder${folderCount === 1 ? '' : 's'} and dashboard${dashCount === 1 ? '' : 's'}?`; + text2 = `All dashboards of the selected folder${folderCount === 1 ? '' : 's'} will also be deleted`; + } else if (folderCount > 0) { + text += `selected folder${folderCount === 1 ? '' : 's'} and all its dashboards?`; + } else { + text += `selected dashboard${dashCount === 1 ? '' : 's'}?`; + } appEvents.emit('confirm-modal', { title: 'Delete', - text: `Do you want to delete the ${selectedDashboards.length} selected dashboards?`, + text: text, + text2: text2, icon: 'fa-trash', yesText: 'Delete', onConfirm: () => { - const promises = []; - for (let dash of selectedDashboards) { - promises.push(this.backendSrv.delete(`/api/dashboards/db/${dash}`)); + const foldersAndDashboards = data.folders.concat(data.dashboards); + this.deleteFoldersAndDashboards(foldersAndDashboards); + } + }); + } + + private deleteFoldersAndDashboards(slugs) { + this.backendSrv.deleteDashboards(slugs).then(result => { + const folders = _.filter(result, dash => dash.meta.isFolder); + const folderCount = folders.length; + const dashboards = _.filter(result, dash => !dash.meta.isFolder); + const dashCount = dashboards.length; + + if (result.length > 0) { + let header; + let msg; + + if (folderCount > 0 && dashCount > 0) { + header = `Folder${folderCount === 1 ? '' : 's'} And Dashboard${dashCount === 1 ? '' : 's'} Deleted`; + msg = `${folderCount} folder${folderCount === 1 ? '' : 's'} `; + msg += `and ${dashCount} dashboard${dashCount === 1 ? '' : 's'} has been deleted`; + } else if (folderCount > 0) { + header = `Folder${folderCount === 1 ? '' : 's'} Deleted`; + + if (folderCount === 1) { + msg = `${folders[0].dashboard.title} has been deleted`; + } else { + msg = `${folderCount} folder${folderCount === 1 ? '' : 's'} has been deleted`; + } + } else if (dashCount > 0) { + header = `Dashboard${dashCount === 1 ? '' : 's'} Deleted`; + + if (dashCount === 1) { + msg = `${dashboards[0].dashboard.title} has been deleted`; + } else { + msg = `${dashCount} dashboard${dashCount === 1 ? '' : 's'} has been deleted`; + } } - this.$q.all(promises).then(() => { - this.getDashboards(); - }); + appEvents.emit('alert-success', [header, msg]); } + + this.getDashboards(); }); } diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index 5ce0a3c89de..097e4de3106 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -3,6 +3,7 @@ import _ from 'lodash'; import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; +import { DashboardModel } from 'app/features/dashboard/dashboard_model'; export class BackendSrv { private inFlightRequests = {}; @@ -246,6 +247,96 @@ export class BackendSrv { return this.getDashboard('db', res.slug); }); } + + deleteDashboard(slug) { + let deferred = this.$q.defer(); + + this.getDashboard('db', slug) + .then(fullDash => { + this.delete(`/api/dashboards/db/${slug}`) + .then(() => { + deferred.resolve(fullDash); + }).catch(err => { + deferred.reject(err); + }); + }); + + return deferred.promise; + } + + deleteDashboards(dashboardSlugs) { + const tasks = []; + + for (let slug of dashboardSlugs) { + tasks.push(this.createTask(this.deleteDashboard.bind(this), true, slug)); + } + + return this.executeInOrder(tasks, []); + } + + moveDashboards(dashboardSlugs, toFolder) { + const tasks = []; + + for (let slug of dashboardSlugs) { + tasks.push(this.createTask(this.moveDashboard.bind(this), true, slug, toFolder)); + } + + return this.executeInOrder(tasks, []) + .then(result => { + return { + totalCount: result.length, + successCount: _.filter(result, { succeeded: true }).length, + alreadyInFolderCount: _.filter(result, { alreadyInFolder: true }).length + }; + }); + } + + private moveDashboard(slug, toFolder) { + let deferred = this.$q.defer(); + + this.getDashboard('db', slug).then(fullDash => { + const model = new DashboardModel(fullDash.dashboard, fullDash.meta); + + if ((!model.folderId && toFolder.id === 0) || + model.folderId === toFolder.id) { + deferred.resolve({alreadyInFolder: true}); + return; + } + + model.folderId = toFolder.id; + model.meta.folderId = toFolder.id; + model.meta.folderTitle = toFolder.title; + const clone = model.getSaveModelClone(); + + this.saveDashboard(clone, {}) + .then(() => { + deferred.resolve({succeeded: true}); + }).catch(err => { + deferred.resolve({succeeded: false}); + }); + }); + + return deferred.promise; + } + + private createTask(fn, ignoreRejections, ...args: any[]) { + return (result) => { + return fn.apply(null, args) + .then(res => { + return Array.prototype.concat(result, [res]); + }).catch(err => { + if (ignoreRejections) { + return result; + } + + throw err; + }); + }; + } + + private executeInOrder(tasks, initialValue) { + return tasks.reduce(this.$q.when, initialValue); + } } diff --git a/public/app/core/specs/manage_dashboards.jest.ts b/public/app/core/specs/manage_dashboards.jest.ts index c231af46eb0..00e1d0b11bd 100644 --- a/public/app/core/specs/manage_dashboards.jest.ts +++ b/public/app/core/specs/manage_dashboards.jest.ts @@ -501,7 +501,7 @@ describe('ManageDashboards', () => { }); describe('when deleting dashboards', () => { - let toBeDeleted = []; + let toBeDeleted: any; beforeEach(() => { ctrl = createCtrlWithStubs([]); @@ -535,23 +535,27 @@ describe('ManageDashboards', () => { } ]; - toBeDeleted = ctrl.getDashboardsToDelete(); + toBeDeleted = ctrl.getFoldersAndDashboardsToDelete(); }); - it('should return 3 items', () => { - expect(toBeDeleted.length).toEqual(3); + it('should return 1 folder', () => { + expect(toBeDeleted.folders.length).toEqual(1); + }); + + it('should return 2 dashboards', () => { + expect(toBeDeleted.dashboards.length).toEqual(2); }); it('should filter out children if parent is checked', () => { - expect(toBeDeleted[0]).toEqual('folder'); + expect(toBeDeleted.folders[0]).toEqual('folder'); }); it('should not filter out children if parent not is checked', () => { - expect(toBeDeleted[1]).toEqual('folder-2-dash'); + expect(toBeDeleted.dashboards[0]).toEqual('folder-2-dash'); }); it('should not filter out children if parent is checked and root', () => { - expect(toBeDeleted[2]).toEqual('root-dash'); + expect(toBeDeleted.dashboards[1]).toEqual('root-dash'); }); }); @@ -599,5 +603,5 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) { } }; - return new ManageDashboardsCtrl({}, { getNav: () => { } }, q, searchSrvStub); + return new ManageDashboardsCtrl({}, { getNav: () => { } }, searchSrvStub); } diff --git a/public/app/features/dashboard/folder_settings_ctrl.ts b/public/app/features/dashboard/folder_settings_ctrl.ts index a187606567e..2c0d4383ff5 100644 --- a/public/app/features/dashboard/folder_settings_ctrl.ts +++ b/public/app/features/dashboard/folder_settings_ctrl.ts @@ -50,8 +50,8 @@ export class FolderSettingsCtrl { icon: 'fa-trash', yesText: 'Delete', onConfirm: () => { - return this.backendSrv.delete(`/api/dashboards/${this.meta.type}/${this.meta.slug}`).then(() => { - appEvents.emit('alert-success', ['Folder deleted']); + return this.backendSrv.deleteDashboard(this.meta.slug).then(() => { + appEvents.emit('alert-success', ['Folder Deleted', `${this.dashboard.title} has been deleted`]); this.$location.url('/dashboards'); }); } diff --git a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts index 9300b754a9a..68cce11bb50 100644 --- a/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts +++ b/public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts @@ -1,7 +1,5 @@ -import _ from 'lodash'; import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; -import { DashboardModel } from '../dashboard_model'; export class MoveToFolderCtrl { dashboards: any; @@ -10,75 +8,23 @@ export class MoveToFolderCtrl { afterSave: any; /** @ngInject */ - constructor(private backendSrv, private $q) { } + constructor(private backendSrv) { } onFolderChange(folder) { this.folder = folder; } - private doNext(fn, ...args: any[]) { - return function (result) { - return fn.apply(null, args) - .then(res => { - return Array.prototype.concat(result, [res]); - }); - }; - } - - private doInOrder(tasks, init) { - return tasks.reduce(this.$q.when, init); - } - - private moveDashboard(dash) { - let deferred = this.$q.defer(); - - this.backendSrv.get('/api/dashboards/db/' + dash) - .then(fullDash => { - const model = new DashboardModel(fullDash.dashboard, fullDash.meta); - - if ((!model.folderId && this.folder.id === 0) || - model.folderId === this.folder.id) { - deferred.resolve({alreadyInFolder: true}); - return; - } - - model.folderId = this.folder.id; - model.meta.folderId = this.folder.id; - model.meta.folderTitle = this.folder.title; - const clone = model.getSaveModelClone(); - - this.backendSrv.saveDashboard(clone) - .then(() => { - deferred.resolve({succeeded: true}); - }) - .catch(err => { - deferred.resolve({succeeded: false}); - }); - }); - - return deferred.promise; - } - save() { - const tasks = []; - - for (let dash of this.dashboards) { - tasks.push(this.doNext(this.moveDashboard.bind(this), dash)); - } - - return this.doInOrder(tasks, []) + return this.backendSrv.moveDashboards(this.dashboards, this.folder) .then(result => { - const totalCount = result.length; - const successCount = _.filter(result, { succeeded: true }).length; - const alreadyInFolderCount = _.filter(result, { alreadyInFolder: true }).length; - - if (successCount > 0) { - const msg = successCount + ' dashboard' + (successCount === 1 ? '' : 's') + ' moved to ' + this.folder.title; - appEvents.emit('alert-success', [ 'Dashboard' + (successCount === 1 ? '' : 's') + ' Moved', msg]); + if (result.successCount > 0) { + const header = `Dashboard${result.successCount === 1 ? '' : 's'} Moved`; + const msg = `${result.successCount} dashboard${result.successCount === 1 ? '' : 's'} moved to ${this.folder.title}`; + appEvents.emit('alert-success', [header, msg]); } - if (totalCount === alreadyInFolderCount) { - appEvents.emit('alert-error', ['Error', 'Dashboards already belongs to folder ' + this.folder.title]); + if (result.totalCount === result.alreadyInFolderCount) { + appEvents.emit('alert-error', ['Error', `Dashboards already belongs to folder ${this.folder.title}`]); } this.dismiss(); diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 87ac91d568b..93bb470d1df 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -128,7 +128,7 @@ export class SettingsCtrl { } deleteDashboardConfirmed() { - this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { + this.backendSrv.deleteDashboard(this.dashboard.meta.slug).then(() => { appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); this.$location.url('/'); }); From 0f62b3e04d64d9bad68527c07a3d737c3a16d156 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 14 Dec 2017 15:15:54 +0100 Subject: [PATCH 562/584] resolve merge conflict --- public/app/features/admin/partials/users.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 66ab649e2cc..1f03825e30c 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -2,11 +2,11 @@
      -
      - - + -
      + +
      From 764992df2af744429f2ee3f649182430480b9914 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 14 Dec 2017 09:31:59 -0500 Subject: [PATCH 563/584] add links for large cta --- .../features/annotations/partials/editor.html | 4 +-- public/app/features/dashlinks/editor.html | 2 +- .../features/templating/partials/editor.html | 2 +- public/img/icons_dark_theme/icon_json.svg | 28 ++++++++++++++----- public/img/icons_light_theme/icon_json.svg | 26 +++++++++++++---- 5 files changed, 45 insertions(+), 17 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 62175e5278f..289f368ad0e 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -27,7 +27,7 @@ {{annotation.name}}
    		-   +   {{annotation.name}} (Built-in) @@ -49,7 +49,7 @@
    There are no custom annotation queries added yet
    - + Add Annotation Query
    diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 14d43b5bd4f..f6c6552e6bb 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -11,7 +11,7 @@ There are no dashboard links added yet
    - + Add Dashboard Link
    diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index c199c421a96..2fb80a6ac50 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -12,7 +12,7 @@
    There are no variables added yet
    - + Add variable
    diff --git a/public/img/icons_dark_theme/icon_json.svg b/public/img/icons_dark_theme/icon_json.svg index 13b22046a80..30b0d9d0972 100644 --- a/public/img/icons_dark_theme/icon_json.svg +++ b/public/img/icons_dark_theme/icon_json.svg @@ -3,18 +3,32 @@ - + - + + + + + + - + diff --git a/public/img/icons_light_theme/icon_json.svg b/public/img/icons_light_theme/icon_json.svg index 0b88bae45ce..42ea7083403 100644 --- a/public/img/icons_light_theme/icon_json.svg +++ b/public/img/icons_light_theme/icon_json.svg @@ -6,15 +6,29 @@ .st0{fill:#555555;} - + - + + + + + + - + From 780d3e2c8fdbdec14fe0dbf8da1900c1930e83e0 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 14 Dec 2017 15:50:47 +0100 Subject: [PATCH 564/584] fix for merge conflict --- public/app/features/admin/partials/users.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 1f03825e30c..e0862375501 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -3,8 +3,7 @@
    From b1bb01234361f4f5f2e2a04f4ed3d1a8c1707c1e Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 15:58:24 +0100 Subject: [PATCH 565/584] dashfolders: fix folder selection dropdown in dashboard settings Use folder id from meta instead of dashboard object --- public/app/features/dashboard/settings/settings.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 14f1e5bfe33..03d8b8592a9 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -45,7 +45,7 @@
    From 11fd401fade58f97525260ba71b04e25813501ab Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 15:59:49 +0100 Subject: [PATCH 566/584] changelog: adds note about closing #9170 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa3fd33814a..bf596d06cd0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ From `/etc/grafana/datasources` to `/etc/grafana/provisioning/datasources` when * **Dashboard history**: New config file option versions_to_keep sets how many versions per dashboard to store, [#9671](https://github.com/grafana/grafana/issues/9671) * **Dashboard as cfg**: Load dashboards from file into Grafana on startup/change [#9654](https://github.com/grafana/grafana/issues/9654) [#5269](https://github.com/grafana/grafana/issues/5269) * **Prometheus**: Grafana can now send alerts to Prometheus Alertmanager while firing [#7481](https://github.com/grafana/grafana/issues/7481), thx [@Thib17](https://github.com/Thib17) and [@mtanda](https://github.com/mtanda) +* **Table**: Support multiple table formated queries in table panel [#9170](https://github.com/grafana/grafana/issues/9170), thx [@davkal](https://github.com/davkal) ## Minor * **Alert panel**: Adds placeholder text when no alerts are within the time range [#9624](https://github.com/grafana/grafana/issues/9624), thx [@straend](https://github.com/straend) * **Mysql**: MySQL enable MaxOpenCon and MaxIdleCon regards how constring is configured. [#9784](https://github.com/grafana/grafana/issues/9784), thx [@dfredell](https://github.com/dfredell) From 62e6fed5ce1be7cabddb177fc9c51140194aa0b7 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 16:51:23 +0100 Subject: [PATCH 567/584] dashfolders: fix moving plugin dashboard to folder If moving a dashboard and the server responds with a plugin-dashboard error we add the overwrite flag and moving the dashboard again. Fixes #10183 --- public/app/core/services/backend_srv.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index 097e4de3106..f9cc0ae124f 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -297,8 +297,8 @@ export class BackendSrv { this.getDashboard('db', slug).then(fullDash => { const model = new DashboardModel(fullDash.dashboard, fullDash.meta); - if ((!model.folderId && toFolder.id === 0) || - model.folderId === toFolder.id) { + if ((!fullDash.meta.folderId && toFolder.id === 0) || + fullDash.meta.folderId === toFolder.id) { deferred.resolve({alreadyInFolder: true}); return; } @@ -312,7 +312,18 @@ export class BackendSrv { .then(() => { deferred.resolve({succeeded: true}); }).catch(err => { - deferred.resolve({succeeded: false}); + if (err.data && err.data.status === "plugin-dashboard") { + err.isHandled = true; + + this.saveDashboard(clone, {overwrite: true}) + .then(() => { + deferred.resolve({succeeded: true}); + }).catch(err => { + deferred.resolve({succeeded: false}); + }); + } else { + deferred.resolve({succeeded: false}); + } }); }); From bd7837e8d777988e65de3328357b80937ae50cf7 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 14 Dec 2017 20:20:36 +0100 Subject: [PATCH 568/584] dashfolders: styling of selected filters #10081 --- .../manage_dashboards/manage_dashboards.html | 174 ++++++++++-------- .../manage_dashboards/manage_dashboards.ts | 6 + public/sass/components/_dashboard_list.scss | 4 + public/sass/components/_gf-form.scss | 4 + public/sass/layout/_page.scss | 4 + 5 files changed, 114 insertions(+), 78 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index 1345a62e97d..ec76a445968 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -1,86 +1,104 @@ -
    - -
    - - - Dashboard - - - - Folder - -
    - -
    - Filters: - - - - {{tagName}} - - -
    - -
    -
    - +
    +
    + +
    + + + Dashboard + + + + Folder +
    -
    -
    -
    - -
    - -
    - - +
    +
    +
    + +
    + + +  {{tagName}} + + +
    +
    +
    + +
    +
    +
    -
    - + +
    + + No dashboards matching your query were found. + +
    + +
    +
    + +
    + +
    + + +
    +
    +
    +
    + +
    diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 772edf82f2a..92f01d99716 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -231,8 +231,14 @@ export class ManageDashboardsCtrl { } } + removeStarred() { + this.query.starred = false; + return this.getDashboards(); + } + onStarredFilterChange() { this.query.starred = this.selectedStarredFilter.text === 'Yes'; + this.selectedStarredFilter = this.starredFilterOptions[0]; return this.getDashboards(); } diff --git a/public/sass/components/_dashboard_list.scss b/public/sass/components/_dashboard_list.scss index ad02d4c7e1c..26eda2dc6c1 100644 --- a/public/sass/components/_dashboard_list.scss +++ b/public/sass/components/_dashboard_list.scss @@ -4,6 +4,10 @@ } } +.search-results { + margin-top: 2rem; +} + .search-results-filter-row { height: 35px; display: flex; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index c8c53911af9..41f6a2960d8 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -221,6 +221,10 @@ $input-border: 1px solid $input-border-color; padding-bottom: 4px; font-size: $font-size-sm; } + + &--plaintext { + white-space: unset; + } } .gf-form-hint { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 9491f18537d..3fef15facc5 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -55,6 +55,10 @@ } } +.page-action-bar--narrow { + margin-bottom: 0; +} + .page-action-bar__spacer { width: $spacer * 2; flex-grow: 1; From a84e03ddc4915e3adfc1cd606ccb2d3e7ba7aec4 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Fri, 15 Dec 2017 09:14:10 +0100 Subject: [PATCH 569/584] dashfolders: styling of selected filters #10081 --- .../components/manage_dashboards/manage_dashboards.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index ec76a445968..f8c96a78b2e 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -15,7 +15,7 @@
    -
    +
    From 25d8f21b64fa4211895c6f3d0163430196f50e5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 09:19:29 +0100 Subject: [PATCH 570/584] ux: used new add data sources icon --- public/app/features/plugins/partials/ds_list.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index e53d5fa7ebb..0f1490e8211 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -49,7 +49,7 @@
    - +
    + + +
    @@ -15,7 +18,6 @@
    -
    1. diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index ec4d7fd2bae..04b5bf9c791 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -2,43 +2,44 @@
      - - -
      -       - Find more plugins on Grafana.com - +
      + + +
      +
      + + Find more plugins on Grafana.com +
      -
      - +
      -
        -
      1. - -
        -
        - - {{plugin.type}} -
        -
        - Update available! -
        -
        -
        -
        - -
        -
        -
        {{plugin.name}}
        -
        By {{plugin.info.author.name}}
        -
        -
        -         -
        2. -
      -
      +
        +
      1. + +
        +
        + + {{plugin.type}} +
        +
        + Update available! +
        +
        +
        +
        + +
        +
        +
        {{plugin.name}}
        +
        By {{plugin.info.author.name}}
        +
        +
        +         +
        2. +
      +
      diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss index 9257db6c7dd..251cb5f10f1 100644 --- a/public/sass/components/_cards.scss +++ b/public/sass/components/_cards.scss @@ -1,10 +1,8 @@ .layout-selector { @include clearfix(); + margin-left: $spacer; text-align: right; - margin: 0 $spacer*1.5 $spacer; - position: relative; - top: -0.5rem; button { background: $input-label-bg; From 313d20292e6769358755a139c424373f07cba45a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 10:28:45 +0100 Subject: [PATCH 573/584] ux: fixed navbar issue when sidemenu closes --- public/sass/components/_navbar.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 1f8e2419197..7577761d47f 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,14 +1,16 @@ .navbar { position: relative; - margin-left: 40px; + padding-left: 40px; z-index: $zindex-navbar-fixed; height: $navbarHeight; padding-right: $spacer; display: flex; flex-grow: 1; border-bottom: 1px solid transparent; - transition: all 350ms ease-in-out; + transition-duration: 350ms; + transition-timing-function: ease-in-out; + transition-property: box-shadow, border-bottom; } @mixin navbar-alt-look() { @@ -150,7 +152,7 @@ @include media-breakpoint-up(sm) { .navbar { - margin-left: 50px; + padding-left: 50px; } .sidemenu-open { From c78f1834bd03894336a10b0c6b7580033ef051d1 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 15 Dec 2017 11:01:18 +0100 Subject: [PATCH 574/584] changed background color for infobox and new blues in light theme, light theme now uses blue-dark in panel query (#10211) --- public/sass/_variables.dark.scss | 5 ++++- public/sass/_variables.light.scss | 10 ++++++---- public/sass/base/_type.scss | 2 +- public/sass/components/_infobox.scss | 4 ++++ public/sass/components/_query_editor.scss | 6 +++--- 5 files changed, 18 insertions(+), 9 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index e1015a39c13..60f25152db6 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -44,6 +44,8 @@ $brand-success: $green; $brand-warning: $brand-primary; $brand-danger: $red; +$query-blue: $blue; + // Status colors // ------------------------- $online: #10a345; @@ -316,7 +318,8 @@ $graph-tooltip-bg: $dark-1; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-background: linear-gradient(100deg, #1a4552, #00374a); +$info-box-background: linear-gradient(100deg, $blue-dark, darken($blue-dark, 5%)); +$info-box-color: $gray-4; // footer $footer-link-color: $gray-2; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 0570b6a6e85..f48b38867c7 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -31,8 +31,8 @@ $white: #fff; // Accent colors // ------------------------- -$blue: #1ca4d6; -$blue-dark: #3CAAD6; +$blue: #61c2f2; +$blue-dark: #0083b3; $green: #3aa655; $red: #d44939; $yellow: #FF851B; @@ -46,6 +46,8 @@ $brand-success: $green; $brand-warning: $orange; $brand-danger: $red; +$query-blue: $blue-dark; + // Status colors // ------------------------- $online: #01A64F; @@ -329,8 +331,8 @@ $graph-tooltip-bg: $gray-5; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -// $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff); -$info-box-background: linear-gradient(135deg, $blue, $blue-dark); +$info-box-background: linear-gradient(100deg, $blue-dark, darken($blue-dark, 5%)); +$info-box-color: $gray-7; // footer $footer-link-color: $gray-3; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 1d2fed48830..13cc278fce2 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -279,7 +279,7 @@ address { } a.external-link { - color: $blue; + color: $external-link-color; text-decoration: underline; } diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index 2a9c03cbdfa..bf70f8548e5 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -7,6 +7,10 @@ margin-bottom: $spacer; margin-right: $gf-form-margin; flex-grow: 1; + color: $info-box-color; + h5 { + color: $info-box-color; + } h5 { margin-bottom: $spacer; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 66c029071b2..aa9a1da679b 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -1,11 +1,11 @@ .query-keyword { font-weight: $font-weight-semi-bold; - color: $blue; + color: $query-blue; } .gf-form-disabled { .query-keyword { - color: darken($blue, 20%); + color: darken($query-blue, 20%); } } @@ -63,7 +63,7 @@ } .gf-form-query-letter-cell-letter { font-weight: bold; - color: $blue; + color: $query-blue; } .gf-form-query-letter-cell-ds { color: $text-color-weak; From 256f7176a294aed10ba7525c32c7fa91a0a02a7e Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 14 Dec 2017 17:22:45 +0100 Subject: [PATCH 575/584] teams: add team count when searching for team closes #10207 --- pkg/api/team_test.go | 2 +- pkg/models/team.go | 15 +++++-- pkg/services/sqlstore/team.go | 46 ++++++++++++++------- public/app/features/org/partials/teams.html | 2 +- 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/pkg/api/team_test.go b/pkg/api/team_test.go index 535d24ff553..0bf06d723c8 100644 --- a/pkg/api/team_test.go +++ b/pkg/api/team_test.go @@ -13,7 +13,7 @@ import ( func TestTeamApiEndpoint(t *testing.T) { Convey("Given two teams", t, func() { mockResult := models.SearchTeamQueryResult{ - Teams: []*models.Team{ + Teams: []*models.SearchTeamDto{ {Name: "team1"}, {Name: "team2"}, }, diff --git a/pkg/models/team.go b/pkg/models/team.go index a8f53e81a1e..b9759f059cf 100644 --- a/pkg/models/team.go +++ b/pkg/models/team.go @@ -60,9 +60,16 @@ type SearchTeamsQuery struct { Result SearchTeamQueryResult } +type SearchTeamDto struct { + Id int64 `json:"id"` + OrgId int64 `json:"orgId"` + Name string `json:"name"` + MemberCount int64 `json:"memberCount"` +} + type SearchTeamQueryResult struct { - TotalCount int64 `json:"totalCount"` - Teams []*Team `json:"teams"` - Page int `json:"page"` - PerPage int `json:"perPage"` + TotalCount int64 `json:"totalCount"` + Teams []*SearchTeamDto `json:"teams"` + Page int `json:"page"` + PerPage int `json:"perPage"` } diff --git a/pkg/services/sqlstore/team.go b/pkg/services/sqlstore/team.go index 2bc04bad0c6..3e9a6e6ec56 100644 --- a/pkg/services/sqlstore/team.go +++ b/pkg/services/sqlstore/team.go @@ -1,6 +1,7 @@ package sqlstore import ( + "bytes" "fmt" "time" @@ -114,37 +115,54 @@ func isTeamNameTaken(name string, existingId int64, sess *DBSession) (bool, erro func SearchTeams(query *m.SearchTeamsQuery) error { query.Result = m.SearchTeamQueryResult{ - Teams: make([]*m.Team, 0), + Teams: make([]*m.SearchTeamDto, 0), } queryWithWildcards := "%" + query.Query + "%" - sess := x.Table("team") - sess.Where("org_id=?", query.OrgId) + var sql bytes.Buffer + params := make([]interface{}, 0) + + sql.WriteString(`select + team.id as id, + team.name as name, + (select count(*) from team_member where team_member.team_id = team.id) as member_count + from team as team + where team.org_id = ?`) + + params = append(params, query.OrgId) if query.Query != "" { - sess.Where("name LIKE ?", queryWithWildcards) + sql.WriteString(` and team.name ` + dialect.LikeStr() + ` ?`) + params = append(params, queryWithWildcards) } - if query.Name != "" { - sess.Where("name=?", query.Name) - } - sess.Asc("name") - offset := query.Limit * (query.Page - 1) - sess.Limit(query.Limit, offset) - sess.Cols("id", "name") - if err := sess.Find(&query.Result.Teams); err != nil { + if query.Name != "" { + sql.WriteString(` and team.name = ?`) + params = append(params, query.Name) + } + + sql.WriteString(` order by team.name asc`) + + if query.Limit != 0 { + sql.WriteString(` limit ? offset ?`) + offset := query.Limit * (query.Page - 1) + params = append(params, query.Limit, offset) + } + + if err := x.Sql(sql.String(), params...).Find(&query.Result.Teams); err != nil { return err } team := m.Team{} - countSess := x.Table("team") if query.Query != "" { - countSess.Where("name LIKE ?", queryWithWildcards) + countSess.Where(`name `+dialect.LikeStr()+` ?`, queryWithWildcards) } + if query.Name != "" { countSess.Where("name=?", query.Name) } + count, err := countSess.Count(&team) query.Result.TotalCount = count diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html index 44682ba18e9..6db586712bd 100644 --- a/public/app/features/org/partials/teams.html +++ b/public/app/features/org/partials/teams.html @@ -28,7 +28,7 @@
    		{{team.name}} #Count{{team.memberCount}} From ff0c2b496fc5bc578b14cea31247b3344ee9464c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 11:18:22 +0100 Subject: [PATCH 576/584] ux:s sidemenu icon rules --- public/sass/base/_icons.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 7b5f4d0e1ca..11259c421ae 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -180,4 +180,10 @@ .gicon-alert { background-image: url('../img/icons_dark_theme/icon_alert.svg'); } -} \ No newline at end of file + .gicon-cog { + background-image: url('../img/icons_dark_theme/icon_cog.svg'); + } + .gicon-question { + background-image: url('../img/icons_dark_theme/icon_question.svg'); + } +} From 2b814738c139d972552452db1b21712a8430b038 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Fri, 15 Dec 2017 10:54:54 +0100 Subject: [PATCH 577/584] dashfolder: change to migration text First index for the dashboard_acl table had the word unique in the migration description even though the index is not unique --- pkg/services/sqlstore/migrations/dashboard_acl.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/services/sqlstore/migrations/dashboard_acl.go b/pkg/services/sqlstore/migrations/dashboard_acl.go index c968f5f072a..cc3b813c12f 100644 --- a/pkg/services/sqlstore/migrations/dashboard_acl.go +++ b/pkg/services/sqlstore/migrations/dashboard_acl.go @@ -26,7 +26,7 @@ func addDashboardAclMigrations(mg *Migrator) { mg.AddMigration("create dashboard acl table", NewAddTableMigration(dashboardAclV1)) //------- indexes ------------------ - mg.AddMigration("add unique index dashboard_acl_dashboard_id", NewAddIndexMigration(dashboardAclV1, dashboardAclV1.Indices[0])) + mg.AddMigration("add index dashboard_acl_dashboard_id", NewAddIndexMigration(dashboardAclV1, dashboardAclV1.Indices[0])) mg.AddMigration("add unique index dashboard_acl_dashboard_id_user_id", NewAddIndexMigration(dashboardAclV1, dashboardAclV1.Indices[1])) mg.AddMigration("add unique index dashboard_acl_dashboard_id_team_id", NewAddIndexMigration(dashboardAclV1, dashboardAclV1.Indices[2])) From 7bec1955995cd89c8421e47c4ef3c1249f51d179 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 12:09:11 +0100 Subject: [PATCH 578/584] build: update master version to 5.0.0-pre1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5516ad97fd7..6bcd140cc1b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Grafana Labs" }, "name": "grafana", - "version": "4.7.0-pre1", + "version": "5.0.0-pre1", "repository": { "type": "git", "url": "http://github.com/grafana/grafana.git" From fdf4bad1b765380f5c7f12dbf39f84a1ad07c6b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 13:03:07 +0100 Subject: [PATCH 579/584] fix: sidemenu profile main text is now username instead of name --- pkg/api/index.go | 4 ++-- public/app/core/routes/routes.ts | 2 +- public/sass/components/_footer.scss | 8 ++++++++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 812f07c2aef..c7a434cd2b7 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -120,8 +120,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.IsSignedIn { profileNode := &dtos.NavLink{ - Text: c.SignedInUser.Name, - SubTitle: c.SignedInUser.Login, + Text: c.SignedInUser.Login, + SubTitle: c.SignedInUser.Name, Id: "profile", Img: data.User.GravatarUrl, Url: setting.AppSubUrl + "/profile", diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 1f5b8cacf0e..cd1ae8682b4 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -199,7 +199,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/login', { templateUrl: 'public/app/partials/login.html', controller : 'LoginCtrl', - pageClass: 'sidemenu-hidden', + pageClass: 'login-page sidemenu-hidden', }) .when('/invite/:code', { templateUrl: 'public/app/partials/signup_invited.html', diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 6413ed3650f..e974ad749a6 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -6,6 +6,7 @@ color: $footer-link-color; padding: 5rem 0 1rem 0; font-size: $font-size-sm; + position: relative; width: 98%; /* was causing horiz scrollbars - need to examine */ a { @@ -36,3 +37,10 @@ } } } + +.login-page { + .footer { + position: absolute; + bottom: $spacer; + } +} From 2797e8e2d075eccf6d4b45466e6a495d65f084ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 13:06:11 +0100 Subject: [PATCH 580/584] profile: use name or fallback for profile page --- pkg/api/index.go | 4 ++-- pkg/models/user.go | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index c7a434cd2b7..6629c2f5ca5 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -120,8 +120,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.IsSignedIn { profileNode := &dtos.NavLink{ - Text: c.SignedInUser.Login, - SubTitle: c.SignedInUser.Name, + Text: c.SignedInUser.NameOrFallback(), + SubTitle: c.SignedInUser.Login, Id: "profile", Img: data.User.GravatarUrl, Url: setting.AppSubUrl + "/profile", diff --git a/pkg/models/user.go b/pkg/models/user.go index c6804a62514..a8819711d67 100644 --- a/pkg/models/user.go +++ b/pkg/models/user.go @@ -170,6 +170,16 @@ func (u *SignedInUser) ShouldUpdateLastSeenAt() bool { return u.UserId > 0 && time.Since(u.LastSeenAt) > time.Minute*5 } +func (u *SignedInUser) NameOrFallback() string { + if u.Name != "" { + return u.Name + } else if u.Login != "" { + return u.Login + } else { + return u.Email + } +} + type UpdateUserLastSeenAtCommand struct { UserId int64 } From 63d4499a2b98596c5cf026c6d806512d4bebf201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 13:14:00 +0100 Subject: [PATCH 581/584] ux: minor fixes --- public/app/core/components/search/search.html | 44 +++++++++---------- public/sass/layout/_page.scss | 2 +- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 03d2a66108c..ad1de5ced2c 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -31,28 +31,28 @@
    -
    -
    - - Filter by: - - Clear - -
    - -
    - - -
    - -
    - - - -
    -
    + + + + + + + + + + + + + + + + + + + + + +
    diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 3fef15facc5..f06cb97cba0 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -30,7 +30,7 @@ height: 100%; &--dashboard { - height: calc(100% - 54px); + height: calc(100% - 56px); } } From ed48d27d85c9a1fa3fa783e0ae7ba584a1663d80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 13:34:50 +0100 Subject: [PATCH 582/584] fix: fixed minor ux and firefox issues, fixes #10228 --- public/app/features/plugins/plugin_edit_ctrl.ts | 2 +- public/sass/base/_icons.scss | 2 +- public/sass/components/_gf-form.scss | 1 + public/sass/components/_page_header.scss | 2 -- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index a2441dd5e8d..0bfda384a08 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -40,7 +40,7 @@ export class PluginEditCtrl { this.navModel = { main: { img: model.info.logos.large, - subTitle: model.info.description, + subTitle: model.info.author.name, url: '', text: '', breadcrumbs: [ diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 11259c421ae..1e68c018c2c 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -6,7 +6,7 @@ text-align: center; background-repeat: no-repeat; background-position: center; - background-size: 100% 100%; + background-size: contain; display: inline-block; vertical-align: middle; } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 41f6a2960d8..8c04bcd3c2a 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -240,6 +240,7 @@ $input-border: 1px solid $input-border-color; .gf-form-select-wrapper { margin-right: $gf-form-margin; position: relative; + background-color: $input-bg; select.gf-form-input { text-indent: .01px; diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index dc570e8f13c..774b7d760a2 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -33,10 +33,8 @@ } .page-header__img { - border-radius: 50%; position: relative; top: 10px; - width: 50px; height: 50px; } From a8a5f8181bf209d761dd246653c9e154ab1b8fad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Dec 2017 14:19:49 +0100 Subject: [PATCH 583/584] fix: viewers can edit now works correctly --- pkg/api/dashboard_test.go | 31 +++++++++++++++++++ pkg/middleware/middleware.go | 2 +- pkg/models/user.go | 1 + pkg/services/guardian/guardian.go | 11 +++++-- .../features/dashboard/settings/settings.ts | 6 ++-- 5 files changed, 45 insertions(+), 6 deletions(-) diff --git a/pkg/api/dashboard_test.go b/pkg/api/dashboard_test.go index 40a96816fde..e6228878625 100644 --- a/pkg/api/dashboard_test.go +++ b/pkg/api/dashboard_test.go @@ -15,6 +15,7 @@ import ( m "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/alerting" "github.com/grafana/grafana/pkg/services/dashboards" + "github.com/grafana/grafana/pkg/setting" . "github.com/smartystreets/goconvey/convey" ) @@ -165,6 +166,7 @@ func TestDashboardApiEndpoint(t *testing.T) { fakeDash.Id = 1 fakeDash.FolderId = 1 fakeDash.HasAcl = true + setting.ViewersCanEdit = false aclMockResp := []*m.DashboardAclInfoDTO{ { @@ -307,6 +309,35 @@ func TestDashboardApiEndpoint(t *testing.T) { }) }) + Convey("When user is an Org Viewer and viewers can edit", func() { + role := m.ROLE_VIEWER + setting.ViewersCanEdit = true + + mockResult := []*m.DashboardAclInfoDTO{ + {Id: 1, OrgId: 1, DashboardId: 2, UserId: 1, Permission: m.PERMISSION_VIEW}, + } + + bus.AddHandler("test", func(query *m.GetDashboardAclInfoListQuery) error { + query.Result = mockResult + return nil + }) + + loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/dashboards/2", "/api/dashboards/:id", role, func(sc *scenarioContext) { + dash := GetDashboardShouldReturn200(sc) + + Convey("Should be able to get dashboard with edit rights but can save should be false", func() { + So(dash.Meta.CanEdit, ShouldBeTrue) + So(dash.Meta.CanSave, ShouldBeFalse) + So(dash.Meta.CanAdmin, ShouldBeFalse) + }) + }) + + loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/dashboards/2", "/api/dashboards/:id", role, func(sc *scenarioContext) { + CallDeleteDashboard(sc) + So(sc.resp.Code, ShouldEqual, 403) + }) + }) + Convey("When user is an Org Viewer but has an admin permission", func() { role := m.ROLE_VIEWER diff --git a/pkg/middleware/middleware.go b/pkg/middleware/middleware.go index 946ebae6b87..259d800f0a9 100644 --- a/pkg/middleware/middleware.go +++ b/pkg/middleware/middleware.go @@ -87,7 +87,7 @@ func initContextWithAnonymousUser(ctx *Context) bool { ctx.IsSignedIn = false ctx.AllowAnonymous = true - ctx.SignedInUser = &m.SignedInUser{} + ctx.SignedInUser = &m.SignedInUser{IsAnonymous: true} ctx.OrgRole = m.RoleType(setting.AnonymousOrgRole) ctx.OrgId = orgQuery.Result.Id ctx.OrgName = orgQuery.Result.Name diff --git a/pkg/models/user.go b/pkg/models/user.go index a8819711d67..d5b912e0a9c 100644 --- a/pkg/models/user.go +++ b/pkg/models/user.go @@ -162,6 +162,7 @@ type SignedInUser struct { ApiKeyId int64 OrgCount int IsGrafanaAdmin bool + IsAnonymous bool HelpFlags1 HelpFlags1 LastSeenAt time.Time } diff --git a/pkg/services/guardian/guardian.go b/pkg/services/guardian/guardian.go index a0c88d767f8..1b664c11385 100644 --- a/pkg/services/guardian/guardian.go +++ b/pkg/services/guardian/guardian.go @@ -4,6 +4,7 @@ import ( "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/log" m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/setting" ) type DashboardGuardian struct { @@ -29,6 +30,10 @@ func (g *DashboardGuardian) CanSave() (bool, error) { } func (g *DashboardGuardian) CanEdit() (bool, error) { + if setting.ViewersCanEdit { + return g.HasPermission(m.PERMISSION_VIEW) + } + return g.HasPermission(m.PERMISSION_EDIT) } @@ -55,8 +60,10 @@ func (g *DashboardGuardian) HasPermission(permission m.PermissionType) (bool, er for _, p := range acl { // user match - if p.UserId == g.user.UserId && p.Permission >= permission { - return true, nil + if !g.user.IsAnonymous { + if p.UserId == g.user.UserId && p.Permission >= permission { + return true, nil + } } // role match diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 9acd98c934b..f8b85c81667 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -40,10 +40,10 @@ export class SettingsCtrl { this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'gicon gicon-annotation' }); this.sections.push({ title: 'Variables', id: 'templating', icon: 'gicon gicon-variable' }); this.sections.push({ title: 'Links', id: 'links', icon: 'gicon gicon-link' }); + } - if (this.dashboard.id) { - this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' }); - } + if (this.dashboard.id && this.dashboard.meta.canSave) { + this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' }); } if (contextSrv.isEditor && !this.dashboard.editable) { From ea4ef47982d9fd18d56e564293351cc6e717cde4 Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 15 Dec 2017 14:21:29 +0100 Subject: [PATCH 584/584] prometheus: change default resolution to 1/1 this should make the value of the step value more consistant for most users ref #9705 --- public/app/plugins/datasource/prometheus/query_ctrl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/prometheus/query_ctrl.ts b/public/app/plugins/datasource/prometheus/query_ctrl.ts index 34787373cdd..43c23cbefbd 100644 --- a/public/app/plugins/datasource/prometheus/query_ctrl.ts +++ b/public/app/plugins/datasource/prometheus/query_ctrl.ts @@ -23,7 +23,7 @@ class PrometheusQueryCtrl extends QueryCtrl { var target = this.target; target.expr = target.expr || ''; - target.intervalFactor = target.intervalFactor || 2; + target.intervalFactor = target.intervalFactor || 1; target.format = target.format || this.getDefaultFormat(); this.metric = '';