diff --git a/pkg/api/index.go b/pkg/api/index.go index 72277fe301b..3b7c195b91b 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -59,9 +59,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, }) - // data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"}) - // data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"}) - if c.OrgRole == m.ROLE_ADMIN { data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ Text: "Data Sources", diff --git a/public/app/core/components/colorpicker/colorpicker.ts b/public/app/core/components/colorpicker/colorpicker.ts new file mode 100644 index 00000000000..9c879b867ff --- /dev/null +++ b/public/app/core/components/colorpicker/colorpicker.ts @@ -0,0 +1,81 @@ +/// + +import config from 'app/core/config'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; + +var template = ` +
+ + + + +
+ + + +
+ +

+   +

+ +
+`; + +export class ColorPickerCtrl { + colors: any; + autoClose: boolean; + series: any; + showAxisControls: boolean; + + /** @ngInject */ + constructor(private $scope, private $rootScope) { + this.colors = $rootScope.colors; + this.autoClose = $scope.autoClose; + this.series = $scope.series; + } + + toggleAxis(yaxis) { + this.$scope.toggleAxis(); + + if (!this.$scope.autoClose) { + this.$scope.dismiss(); + } + } + + colorSelected(color) { + this.$scope.colorSelected(color); + if (!this.$scope.autoClose) { + this.$scope.dismiss(); + } + } + + close() { + this.$scope.dismiss(); + } +} + +export function colorPicker() { + return { + restrict: 'E', + controller: ColorPickerCtrl, + bindToController: true, + controllerAs: 'ctrl', + template: template, + }; +} + +coreModule.directive('gfColorPicker', colorPicker); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index e9b5e3c71a3..c7c917378c7 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -25,6 +25,7 @@ import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {searchDirective} from './components/search/search'; import {popoverDirective} from './components/popover/popover'; +import {colorPicker} from './components/colorpicker/colorpicker'; import {navbarDirective} from './components/navbar/navbar'; import {arrayJoin} from './directives/array_join'; import 'app/core/controllers/all'; @@ -40,5 +41,6 @@ export { sideMenuDirective, navbarDirective, searchDirective, + colorPicker, popoverDirective }; diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index 5a55f63fbc0..4711dc1b23c 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -7,40 +7,48 @@ import coreModule from 'app/core/core_module'; import Drop from 'tether-drop'; /** @ngInject **/ -function popoverSrv($templateCache, $timeout, $q, $http, $compile) { - - this.getTemplate = function(url) { - return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); - }; +function popoverSrv($compile, $rootScope) { this.show = function(options) { + var popoverScope = _.extend($rootScope.$new(true), options.model); + var drop; - options.scope.dismiss = function() { - var popover = options.element.data('popover'); - if (popover) { - popover.destroy(); - } - options.scope.$destroy(); + function destroyDrop() { + setTimeout(function() { + if (drop.tether) { + drop.destroy(); + } + }); + } + + popoverScope.dismiss = function() { + popoverScope.$destroy(); + destroyDrop(); }; - this.getTemplate(options.templateUrl).then(function(result) { - $timeout(function() { - var template = _.isString(result) ? result : result.data; + var contentElement = document.createElement('div'); + contentElement.innerHTML = options.template; - var drop = new Drop({ - target: options.element[0], - content: template, - position: 'bottom top', - classes: 'drop-help', - openOn: 'click', - tetherOptions: { - } - }); + $compile(contentElement)(popoverScope); - drop.open(); - //$compile(popover.$tip)(popover.scope); - }, 1); + drop = new Drop({ + target: options.element, + content: contentElement, + position: options.position, + classes: 'drop-popover', + openOn: options.openOn || 'hover', + hoverCloseDelay: 200, + tetherOptions: { + constraints: [{to: 'window', pin: true, attachment: "both"}] + } }); + + drop.on('close', () => { + popoverScope.dismiss({fromDropClose: true}); + destroyDrop(); + }); + + drop.open(); }; } diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 7dff11ac1c2..c74ac22827f 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -15,11 +15,10 @@
Name - The name is used when you select the data source in panels. The Default data source is preselected in new - new panels. + panels. diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index fb2c590034d..8ff5d5dd83e 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -10,7 +10,7 @@ function (angular, _, $) { var module = angular.module('grafana.directives'); - module.directive('graphLegend', function(popoverSrv) { + module.directive('graphLegend', function(popoverSrv, $timeout) { return { link: function(scope, elem) { @@ -41,13 +41,24 @@ function (angular, _, $) { var el = $(e.currentTarget).find('.fa-minus'); var index = getSeriesIndexForElement(el); - var seriesInfo = seriesList[index]; - var popoverScope = scope.$new(); - popoverScope.series = seriesInfo; - popoverSrv.show({ - element: el, - templateUrl: 'public/app/plugins/panel/graph/legend.popover.html', - scope: popoverScope + var series = seriesList[index]; + + $timeout(function() { + popoverSrv.show({ + element: el[0], + position: 'bottom center', + template: '', + model: { + autoClose: true, + series: series, + toggleAxis: function() { + ctrl.toggleAxis(series); + }, + colorSelected: function(color) { + ctrl.changeSeriesColor(series, color); + } + }, + }); }); } diff --git a/public/app/plugins/panel/graph/legend.popover.html b/public/app/plugins/panel/graph/legend.popover.html index f9cf16a3e87..716522767c5 100644 --- a/public/app/plugins/panel/graph/legend.popover.html +++ b/public/app/plugins/panel/graph/legend.popover.html @@ -1,6 +1,4 @@
- × -
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index b1d48d98649..1c022d460bb 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -261,13 +261,13 @@ class GraphCtrl extends MetricsPanelCtrl { } } - toggleYAxis(info) { - var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias }); + toggleAxis(info) { + var override = _.findWhere(this.panel.seriesOverrides, {alias: info.alias}); if (!override) { override = { alias: info.alias }; this.panel.seriesOverrides.push(override); } - override.yaxis = info.yaxis === 2 ? 1 : 2; + info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2; this.render(); }; diff --git a/public/app/plugins/panel/graph/seriesOverridesCtrl.js b/public/app/plugins/panel/graph/seriesOverridesCtrl.js index ee3d6c00564..014c1f6abe7 100644 --- a/public/app/plugins/panel/graph/seriesOverridesCtrl.js +++ b/public/app/plugins/panel/graph/seriesOverridesCtrl.js @@ -53,22 +53,21 @@ define([ }; $scope.openColorSelector = function() { - var popoverScope = $scope.$new(); - popoverScope.colorSelected = $scope.colorSelected; - popoverScope.colors = $scope.ctrl.colors; - popoverSrv.show({ - element: $element.find(".dropdown"), - placement: 'top', - templateUrl: 'public/app/partials/colorpicker.html', - scope: popoverScope + element: $element.find(".dropdown")[0], + position: 'top center', + openOn: 'click', + template: '', + model: { + colorSelected: $scope.colorSelected, + } }); }; $scope.removeOverride = function(option) { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); - $scope.ctrl.render(); + $scope.ctrl.refresh(); }; $scope.getSeriesNames = function() { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index eb2733206de..e85bf6014ca 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -247,6 +247,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: rgba(0,0,0,.25); // popover +$popover-bg: $dark-4; +$popover-color: $text-color; + $popover-help-bg: $btn-secondary-bg; $popover-help-color: $text-color; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 9b04bd7445a..8e9c16fd79a 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -274,6 +274,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: rgba(0,0,0,.25); // popover +$popover-bg: $dark-4; +$popover-color: $text-color; + $popover-help-bg: $blue-dark; $popover-help-color: $gray-6; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index e6e507a72dc..44e8f8ebcfb 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -25,6 +25,16 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); box-sizing: border-box; } +.drop-popopver-close { + position: absolute; + top: -5px; + right: 0; + font-size: $font-size-lg; +} + @include drop-theme("help", $popover-help-bg, $popover-help-color); +@include drop-theme("popover", $popover-bg, $popover-color); + @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 2a85d9195ab..b51ac317043 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -22,7 +22,7 @@ } .graph-legend { - margin: 0 20px; + margin: 0 $spacer; text-align: center; .popover-content { @@ -181,7 +181,6 @@ .graph-legend-popover { width: 200px; - min-height: 100px; label { display: inline-block; } diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index 143574ad147..8f7a26594b8 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -10,7 +10,7 @@ font-family: inherit; background: $theme-bg; color: $theme-color; - padding: 1em; + padding: $spacer; font-size: $font-size-sm; max-width: 20rem;