From 2b1dcaf5e38a1e912236b2ec78822021991169aa Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Aug 2014 11:25:30 +0200 Subject: [PATCH 001/127] added global page title prefix setting --- src/app/components/settings.js | 1 + src/app/controllers/dash.js | 2 +- src/config.sample.js | 11 +++++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/app/components/settings.js b/src/app/components/settings.js index 165bbc6c476..9601d80de79 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -14,6 +14,7 @@ function (_, crypto) { */ var defaults = { datasources : {}, + title : 'Grafana - ', panels : ['graph', 'text'], plugins : {}, default_route : '/dashboard/file/default.json', diff --git a/src/app/controllers/dash.js b/src/app/controllers/dash.js index e40db93fd7e..55f19905192 100644 --- a/src/app/controllers/dash.js +++ b/src/app/controllers/dash.js @@ -40,7 +40,7 @@ function (angular, $, config, _) { $scope.panelMoveOver = panelMove.onOver; $scope.panelMoveOut = panelMove.onOut; - window.document.title = 'Grafana - ' + $scope.dashboard.title; + window.document.title = (config.title ? config.title : '') + $scope.dashboard.title; // start auto refresh if($scope.dashboard.refresh) { diff --git a/src/config.sample.js b/src/config.sample.js index 9bce1540fa4..4bc6864e442 100644 --- a/src/config.sample.js +++ b/src/config.sample.js @@ -73,6 +73,17 @@ function (Settings) { * ======================================================== */ + /* title: + * The global page title prefix that is prepended before the specific dashboard titles. + * Defaults to 'Grafana - '. + * + * title: undefined, // default prefix, page title = 'Grafana - ' + * title: null, // no prefix, page title = + * title: '', // no prefix, page title = + * title: 'Custom | ', // custom prefix, page title = 'Custom | ' + */ + title: undefined, + // specify the limit for dashboard search results search: { max_results: 20 From 5c0d1355a5911c28141be54eb9fe83b9792e2383 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 19:33:38 +0200 Subject: [PATCH 002/127] Second take on dashboard tags search result colors --- src/app/controllers/search.js | 26 ++++++++++++++++++++++++++ src/app/partials/search.html | 4 ++-- src/css/less/grafana.less | 3 +++ src/css/less/overrides.less | 3 +++ 4 files changed, 34 insertions(+), 2 deletions(-) diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index de0ec44045a..6e9de7ba585 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -9,6 +9,32 @@ function (angular, _, config, $) { var module = angular.module('grafana.controllers'); + function djb2(str) { + var hash = 5381; + for (var i = 0; i < str.length; i++) { + hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ + } + return hash; + } + + module.directive('tagColorFromName', function() { + return function (scope, element) { + var name = _.isString(scope.tag) ? scope.tag : scope.tag.term; + var hash = djb2(name.toLowerCase()); + var colors = [ + "#E24D42","#1F78C1","#BA43A9","#705DA0", + "#508642","#447EBC","#C15C17","#890F02", + "#0A437C","#6D1F62","#584477","#629E51", + "#BF1B00","#EA6460","#D683CE","#806EB7", + "#3F6833","#2F575E","#99440A","#E0752D", + "#58140C","#052B51","#511749","#3F2B5B", + ]; + var color = colors[Math.abs(hash % colors.length)]; + console.log("namei " + name + " color: " + color, hash % 4); + element.css("background-color", color); + }; + }); + module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) { $scope.init = function() { diff --git a/src/app/partials/search.html b/src/app/partials/search.html index e1c9f158e0b..297edadedfc 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -54,7 +54,7 @@ ng-click="filterByTag(tag.term, $event)"> - {{tag.term}}  ({{tag.count}}) + {{tag.term}}  ({{tag.count}}) @@ -79,7 +79,7 @@
- + {{tag}}
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0fc9c72bf2f..9ddc8568258 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -86,6 +86,9 @@ .search-result-tags { float: right; + .label { + margin-left: 6px; + } } .search-result-actions { diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 7615f35d6f8..dd806cb46ca 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -589,6 +589,9 @@ div.flot-text { .label-tag { background-color: @purple; color: darken(@white, 5%); + text-shadow: none; + font-size: 13px; + padding: 3px 6px; } .label-tag:hover { From 36882ea2a42e705e3d250e2d455fea19f7bc49b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 22 Aug 2014 09:04:28 +0200 Subject: [PATCH 003/127] More work on dashboard tag colors --- src/app/controllers/search.js | 54 ++++++++++++++++--------------- src/app/partials/search.html | 6 ++-- src/css/less/grafana.less | 19 +++++------ src/css/less/overrides.less | 10 ++++-- src/css/less/variables.light.less | 6 ++-- 5 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 6e9de7ba585..a32aa64acf0 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -9,32 +9,6 @@ function (angular, _, config, $) { var module = angular.module('grafana.controllers'); - function djb2(str) { - var hash = 5381; - for (var i = 0; i < str.length; i++) { - hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ - } - return hash; - } - - module.directive('tagColorFromName', function() { - return function (scope, element) { - var name = _.isString(scope.tag) ? scope.tag : scope.tag.term; - var hash = djb2(name.toLowerCase()); - var colors = [ - "#E24D42","#1F78C1","#BA43A9","#705DA0", - "#508642","#447EBC","#C15C17","#890F02", - "#0A437C","#6D1F62","#584477","#629E51", - "#BF1B00","#EA6460","#D683CE","#806EB7", - "#3F6833","#2F575E","#99440A","#E0752D", - "#58140C","#052B51","#511749","#3F2B5B", - ]; - var color = colors[Math.abs(hash % colors.length)]; - console.log("namei " + name + " color: " + color, hash % 4); - element.css("background-color", color); - }; - }); - module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) { $scope.init = function() { @@ -177,4 +151,32 @@ function (angular, _, config, $) { }; }); + module.directive('tagColorFromName', function() { + + function djb2(str) { + var hash = 5381; + for (var i = 0; i < str.length; i++) { + hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ + } + return hash; + } + + return function (scope, element) { + var name = _.isString(scope.tag) ? scope.tag : scope.tag.term; + var hash = djb2(name.toLowerCase()); + var colors = [ + "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803", + "#508642","#447EBC","#C15C17","#890F02","#757575", + "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F", + "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000", + "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4", + "#58140C","#052B51","#511749","#3F2B5B", + ]; + var color = colors[Math.abs(hash % colors.length)]; + console.log("namei " + name + " color: " + color, hash % 4); + element.css("background-color", color); + }; + + }); + }); diff --git a/src/app/partials/search.html b/src/app/partials/search.html index ce987759999..b9974207d3b 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -52,9 +52,9 @@ class="search-result-item pointer" ng-class="{'selected': $index === selectedIndex }" ng-click="filterByTag(tag.term, $event)"> - + - {{tag.term}}  ({{tag.count}}) + {{tag.term}}  ({{tag.count}}) @@ -64,7 +64,7 @@ bindonce ng-repeat="row in results.dashboards" ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)"> -
+
share     diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index e13d9f16a5b..ca006b2b015 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -55,19 +55,18 @@ max-height: 600px; overflow: auto; display: block; - .search-result-item a { - } + line-height: 28px; .search-result-item:hover, .search-result-item.selected { - .search-result-link, .icon { + .search-result-link, .search-result-link > .icon { color: @grafanaListHighlight; } - .search-result-link .label { - background-color: @blue; + .search-result-tag { + opacity: 0.70; + color: white; } } - .search-result-link { color: @grafanaListMainLinkColor; .icon { @@ -81,7 +80,7 @@ } .search-result-item { - padding: 6px 10px; + padding: 0px 10px; white-space: nowrap; border-top: 1px solid @grafanaListBorderTop; border-bottom: 1px solid @grafanaListBorderBottom; @@ -89,14 +88,16 @@ .search-result-tags { float: right; - .label { + .label-tag { margin-left: 6px; + font-size: 11px; + padding: 2px 6px; } } .search-result-actions { float: right; - padding-left: 10px; + padding-left: 20px; } } diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index dd806cb46ca..35db9356279 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -589,14 +589,20 @@ div.flot-text { .label-tag { background-color: @purple; color: darken(@white, 5%); + border-radius: 2px; text-shadow: none; font-size: 13px; - padding: 3px 6px; + padding: 4px 6px; + .icon-tag { + position: relative; + top: 1px; + padding-right: 4px; + } } .label-tag:hover { + opacity: 0.85; background-color: darken(@purple, 10%); - color: @white; } .annotation-editor-table { diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 562114a9e54..1e0b38413fb 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -61,8 +61,8 @@ // Links // ------------------------- -@linkColor: @blue; -@linkColorHover: darken(@linkColor, 10%); +@linkColor: @textColor; +@linkColorHover: @blue; // Typography @@ -219,7 +219,7 @@ @navbarText: #666; @navbarLinkColor: #666; -@navbarLinkColorHover: #333; +@navbarLinkColorHover: @blue; @navbarLinkColorActive: #555; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); From 3579a18da834a5b998508e465771e41cc2ab258b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 22 Aug 2014 09:34:05 +0200 Subject: [PATCH 004/127] Css fix for panel-error position --- src/css/less/overrides.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 7615f35d6f8..eddf9c6e4f9 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -74,6 +74,7 @@ code, pre { padding: 0px 0px 0px 0px; background: @grafanaPanelBackground; margin: 5px; + position: relative; } .panel-content { @@ -112,9 +113,8 @@ code, pre { .panel-error { color: @white; - //padding: 5px 10px 0px 10px; position: absolute; - left: 5px; + left: 0; padding: 0px 17px 6px 5px; top: 0; i { @@ -585,7 +585,6 @@ div.flot-text { // Labels & Badges - .label-tag { background-color: @purple; color: darken(@white, 5%); @@ -603,7 +602,6 @@ div.flot-text { } // Top menu - .save-dashboard-dropdown { padding: 10px; li>a { From 8a80623d0c3b114308a5cd1c15f7ef5a86d883b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 22 Aug 2014 09:40:11 +0200 Subject: [PATCH 005/127] Merged dashboard tag colors feature branch, updated changelog #634 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c6d39929f8..e53e93f0ae3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode. - [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger - [Issue #425](https://github.com/grafana/grafana/issues/425). Graph: New section in 'Display Styles' tab to override any display setting on per series bases (mix and match lines, bars, points, fill, stack, line width etc) +- [Issue #634](https://github.com/grafana/grafana/issues/634). Dashboard: Dashboard tags now in different colors (from fixed palette) determined by tag name. **Fixes** - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) From 47a20e6a2f3379ddf5e4c0e93316eadcd400a89c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Aug 2014 10:43:37 +0200 Subject: [PATCH 006/127] Dashboard: fix for adding rows from dashboard settings modal, Closes #699 --- CHANGELOG.md | 3 ++- src/app/controllers/dashboardCtrl.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e53e93f0ae3..61b7aea105e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ **Fixes** - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) - [Issue #697](https://github.com/grafana/grafana/issues/697). Graphite: Fix for Glob syntax in graphite queries ([1-9] and ?) that made the query editor / parser bail and fallback to a text box. -- [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. Closes #277 +- [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. +- [Issue #699](https://github.com/grafana/grafana/issues/699). Dashboard: Fix for bug when adding rows from dashboard settings dialog. **Tech** - Upgraded from angularjs 1.1.5 to 1.3 beta 17; diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 7132ca8a571..052ad540a8c 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -28,6 +28,7 @@ function (angular, $, config, _) { }); }); + $scope.reset_row(); }; $scope.setupDashboard = function(event, dashboardData) { From ffbdea78ee0cc287549458c046f1858b65f221bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Aug 2014 20:23:33 +0200 Subject: [PATCH 007/127] Fix for plot dimension error when resizing window --- src/app/controllers/dashboardCtrl.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 052ad540a8c..34af5718072 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -17,18 +17,20 @@ function (angular, $, config, _) { $scope.editor = { index: 0 }; $scope.panelNames = config.panels; + var resizeEventTimeout; $scope.init = function() { $scope.availablePanels = config.panels; $scope.onAppEvent('setup-dashboard', $scope.setupDashboard); - - angular.element(window).bind('resize', function() { - $timeout(function() { - $scope.$broadcast('render'); - }); - }); - $scope.reset_row(); + $scope.registerWindowResizeEvent(); + }; + + $scope.registerWindowResizeEvent = function() { + angular.element(window).bind('resize', function() { + $timeout.cancel(resizeEventTimeout); + resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200); + }); }; $scope.setupDashboard = function(event, dashboardData) { From 6f80862517c0db225b720a4d1299885bc49150a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 24 Aug 2014 14:45:00 +0200 Subject: [PATCH 008/127] Dashboard: new config.js option to change/remove window title prefix from 'Grafana -' to anything, PR #685 --- CHANGELOG.md | 1 + src/app/components/settings.js | 2 +- src/app/controllers/dashboardCtrl.js | 2 +- src/config.sample.js | 16 ++++------------ 4 files changed, 7 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61b7aea105e..c1b37967ff0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger - [Issue #425](https://github.com/grafana/grafana/issues/425). Graph: New section in 'Display Styles' tab to override any display setting on per series bases (mix and match lines, bars, points, fill, stack, line width etc) - [Issue #634](https://github.com/grafana/grafana/issues/634). Dashboard: Dashboard tags now in different colors (from fixed palette) determined by tag name. +- [Issue #685](https://github.com/grafana/grafana/issues/685). Dashboard: New config.js option to change/remove window title prefix. **Fixes** - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) diff --git a/src/app/components/settings.js b/src/app/components/settings.js index fff5d9dd4a4..6afba222b4b 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -14,7 +14,7 @@ function (_, crypto) { */ var defaults = { datasources : {}, - title : 'Grafana - ', + window_title_prefix : 'Grafana - ', panels : ['graph', 'text'], plugins : {}, default_route : '/dashboard/file/default.json', diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 33a190273d7..694fe59a319 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -56,7 +56,7 @@ function (angular, $, config, _) { $scope.panelMoveOver = panelMove.onOver; $scope.panelMoveOut = panelMove.onOut; - window.document.title = (config.title ? config.title : '') + $scope.dashboard.title; + window.document.title = config.window_title_prefix + $scope.dashboard.title; // start auto refresh if($scope.dashboard.refresh) { diff --git a/src/config.sample.js b/src/config.sample.js index aa7341085d7..6046a753d5a 100644 --- a/src/config.sample.js +++ b/src/config.sample.js @@ -73,23 +73,12 @@ function (Settings) { * ======================================================== */ - /* title: - * The global page title prefix that is prepended before the specific dashboard titles. - * Defaults to 'Grafana - '. - * - * title: undefined, // default prefix, page title = 'Grafana - ' - * title: null, // no prefix, page title = - * title: '', // no prefix, page title = - * title: 'Custom | ', // custom prefix, page title = 'Custom | ' - */ - title: undefined, - // specify the limit for dashboard search results search: { max_results: 20 }, - // default start dashboard + // default home dashboard default_route: '/dashboard/file/default.json', // set to false to disable unsaved changes warning @@ -105,6 +94,9 @@ function (Settings) { password: '' }, + // Change window title prefix from 'Grafana - ' + window_title_prefix: 'Grafana - ', + // Add your own custom pannels plugins: { // list of plugin panels From 4f8b2ad245a3f9185ef8c94a5a0758e7be237321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 12:55:42 +0200 Subject: [PATCH 009/127] began work on filtering overhaul --- src/app/panels/filtering/editor.html | 0 src/app/panels/filtering/module.html | 62 +++++++++++----------- src/app/services/annotationsSrv.js | 6 +-- src/app/services/dashboard/dashboardSrv.js | 31 ++++++----- src/test/specs/dashboardSrv-specs.js | 21 +++++++- 5 files changed, 70 insertions(+), 50 deletions(-) create mode 100644 src/app/panels/filtering/editor.html diff --git a/src/app/panels/filtering/editor.html b/src/app/panels/filtering/editor.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/app/panels/filtering/module.html b/src/app/panels/filtering/module.html index 96b5751ce7d..40f4379a98d 100755 --- a/src/app/panels/filtering/module.html +++ b/src/app/panels/filtering/module.html @@ -1,14 +1,6 @@
-
-
-
- - -
- -
  • {{filter.name}} : @@ -22,29 +14,35 @@
-
+
+ +
+ +
-
-
    -
  • - name:
    - -
    • -
  • - filter.query:
    - -
    • -
  • - - -
    • -
-
- - -
-
-
- -
+
+ + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/services/annotationsSrv.js b/src/app/services/annotationsSrv.js index a219caa5d66..a59eae4cf07 100644 --- a/src/app/services/annotationsSrv.js +++ b/src/app/services/annotationsSrv.js @@ -9,7 +9,6 @@ define([ module.service('annotationsSrv', function(datasourceSrv, $q, alertSrv, $rootScope) { var promiseCached; - var annotationPanel; var list = []; var timezone; @@ -23,8 +22,7 @@ define([ }; this.getAnnotations = function(filterSrv, rangeUnparsed, dashboard) { - annotationPanel = _.findWhere(dashboard.pulldowns, { type: 'annotations' }); - if (!annotationPanel.enable) { + if (!dashboard.annotations.enable) { return $q.when(null); } @@ -33,7 +31,7 @@ define([ } timezone = dashboard.timezone; - var annotations = _.where(annotationPanel.annotations, { enable: true }); + var annotations = _.where(dashboard.annotations.list, { enable: true }); var promises = _.map(annotations, function(annotation) { var datasource = datasourceSrv.get(annotation.datasource); diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 6a363837bc3..6139a41f83e 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -27,10 +27,10 @@ function (angular, $, kbn, _, moment) { this.timezone = data.timezone || 'browser'; this.editable = data.editble || true; this.rows = data.rows || []; - this.pulldowns = data.pulldowns || []; this.nav = data.nav || []; this.time = data.time || { from: 'now-6h', to: 'now' }; - this.templating = data.templating || { list: [] }; + this.templating = data.templating || { list: [], enable: false }; + this.annotations = data.annotations || { list: [], enable: false}; this.refresh = data.refresh; this.version = data.version || 0; @@ -38,14 +38,6 @@ function (angular, $, kbn, _, moment) { this.nav.push({ type: 'timepicker' }); } - if (!_.findWhere(this.pulldowns, {type: 'filtering'})) { - this.pulldowns.push({ type: 'filtering', enable: false }); - } - - if (!_.findWhere(this.pulldowns, {type: 'annotations'})) { - this.pulldowns.push({ type: 'annotations', enable: false }); - } - this.updateSchema(data); } @@ -147,9 +139,9 @@ function (angular, $, kbn, _, moment) { p.updateSchema = function(old) { var oldVersion = this.version; var panelUpgrades = []; - this.version = 4; + this.version = 5; - if (oldVersion === 4) { + if (oldVersion === 5) { return; } @@ -224,6 +216,21 @@ function (angular, $, kbn, _, moment) { }); } + if (oldVersion < 5) { + // move pulldowns to new schema + var filtering = _.findWhere(old.pulldowns, { type: 'filtering' }); + var annotations = _.findWhere(old.pulldowns, { type: 'annotations' }); + if (filtering) { + this.templating.enable = filtering.enable; + } + if (annotations) { + this.annotations = { + list: annotations.annotations, + enable: annotations.enable + }; + } + } + if (panelUpgrades.length === 0) { return; } diff --git a/src/test/specs/dashboardSrv-specs.js b/src/test/specs/dashboardSrv-specs.js index a2c7c1772f6..c141b746cd3 100644 --- a/src/test/specs/dashboardSrv-specs.js +++ b/src/test/specs/dashboardSrv-specs.js @@ -18,7 +18,6 @@ define([ it('should have default properties', function() { expect(model.rows.length).to.be(0); expect(model.nav.length).to.be(1); - expect(model.pulldowns.length).to.be(2); }); }); @@ -91,6 +90,17 @@ define([ beforeEach(inject(function(dashboardSrv) { model = dashboardSrv.create({ services: { filter: { time: { from: 'now-1d', to: 'now'}, list: [1] }}, + pulldowns: [ + { + type: 'filtering', + enable: true + }, + { + type: 'annotations', + enable: true, + annotations: [{name: 'old'}] + } + ], rows: [ { panels: [ @@ -140,8 +150,15 @@ define([ expect(graph.seriesOverrides[0].yaxis).to.be(2); }); + it('should move pulldowns to new schema', function() { + expect(model.templating.enable).to.be(true); + expect(model.annotations.enable).to.be(true); + expect(model.annotations.list[0].name).to.be('old'); + }); + + it('dashboard schema version should be set to latest', function() { - expect(model.version).to.be(4); + expect(model.version).to.be(5); }); }); From 6969a4121c7f1370764897eba4979df7fe5394bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 13:31:31 +0200 Subject: [PATCH 010/127] removing pulldowns and simplifying submenu controls code --- src/app/controllers/dashboardCtrl.js | 3 +++ src/app/controllers/submenuCtrl.js | 2 +- src/app/partials/dashboard.html | 11 +------- src/app/partials/submenu.html | 38 ++++++++++++++++++++++++++++ 4 files changed, 43 insertions(+), 11 deletions(-) create mode 100644 src/app/partials/submenu.html diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 694fe59a319..4b6bdb76382 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -48,6 +48,9 @@ function (angular, $, config, _) { $scope.filter = filterSrv; $scope.filter.init($scope.dashboard); + $scope.submenuEnabled = $scope.dashboard.templating.enable || + $scope.dashboard.annotations.enable; + var panelMove = panelMoveSrv.create($scope.dashboard); $scope.panelMoveDrop = panelMove.onDrop; diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index b75fab56043..beefcf15ff0 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -24,4 +24,4 @@ function (angular, app, _) { }); -}); \ No newline at end of file +}); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 368583cb5c5..95c22b574d8 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -3,16 +3,7 @@
-
-
-
- {{pulldown.type}}: -
-
- -
-
-
+
diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html new file mode 100644 index 00000000000..e1fba4a8bdf --- /dev/null +++ b/src/app/partials/submenu.html @@ -0,0 +1,38 @@ +
+
+
+
+ +
    +
  • + +
    • +
+ + + +
+
+
+
+
From c634ee81fc8dd10ad7790c2f1026eb2a2e2553bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 15:36:44 +0200 Subject: [PATCH 011/127] Refactoring the pulldown (filtering/annotations), changing the ui slightly --- src/app/controllers/all.js | 2 +- src/app/controllers/annotationsEditorCtrl.js | 64 +++++++++++++++++++ src/app/controllers/dashboardCtrl.js | 3 +- src/app/controllers/submenuCtrl.js | 59 ++++++++++++++++- .../annotations_editor.html} | 8 +-- src/app/partials/submenu.html | 45 ++++++++----- src/css/less/grafana.less | 9 ++- 7 files changed, 164 insertions(+), 26 deletions(-) create mode 100644 src/app/controllers/annotationsEditorCtrl.js rename src/app/{panels/annotations/editor.html => partials/annotations_editor.html} (84%) diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index 3565f9fa844..8d7035bbb65 100644 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -13,5 +13,5 @@ define([ './playlistCtrl', './inspectCtrl', './opentsdbTargetCtrl', - './console-ctrl', + './annotationsEditorCtrl', ], function () {}); diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js new file mode 100644 index 00000000000..65561643896 --- /dev/null +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -0,0 +1,64 @@ +define([ + 'angular', + 'app', + 'lodash' +], +function (angular, app, _) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + + module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) { + var annotationDefaults = { + name: '', + datasource: null, + showLine: true, + iconColor: '#C0C6BE', + lineColor: 'rgba(255, 96, 96, 0.592157)', + iconSize: 13, + enable: true + }; + + $scope.init = function() { + $scope.currentAnnotation = angular.copy(annotationDefaults); + $scope.currentIsNew = true; + $scope.datasources = datasourceSrv.getAnnotationSources(); + $scope.annotations = $scope.dashboard.annotations.list; + + if ($scope.datasources.length > 0) { + $scope.currentDatasource = $scope.datasources[0]; + } + }; + + $scope.setDatasource = function() { + $scope.currentAnnotation.datasource = $scope.currentDatasource.name; + }; + + $scope.edit = function(annotation) { + $scope.currentAnnotation = annotation; + $scope.currentIsNew = false; + $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource }); + + if (!$scope.currentDatasource) { + $scope.currentDatasource = $scope.datasources[0]; + } + }; + + $scope.update = function() { + $scope.currentAnnotation = angular.copy(annotationDefaults); + $scope.currentIsNew = true; + }; + + $scope.add = function() { + $scope.currentAnnotation.datasource = $scope.currentDatasource.name; + $scope.annotations.push($scope.currentAnnotation); + $scope.currentAnnotation = angular.copy(annotationDefaults); + }; + + $scope.removeAnnotation = function(annotation) { + var index = _.indexOf($scope.annotations, annotation); + $scope.annotations.splice(index, 1); + }; + + }); +}); diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 4b6bdb76382..d881f114765 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -48,8 +48,7 @@ function (angular, $, config, _) { $scope.filter = filterSrv; $scope.filter.init($scope.dashboard); - $scope.submenuEnabled = $scope.dashboard.templating.enable || - $scope.dashboard.annotations.enable; + $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; var panelMove = panelMoveSrv.create($scope.dashboard); diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index beefcf15ff0..5befa5d3a8c 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -8,7 +8,7 @@ function (angular, app, _) { var module = angular.module('grafana.controllers'); - module.controller('SubmenuCtrl', function($scope) { + module.controller('SubmenuCtrl', function($scope, $q, datasourceSrv) { var _d = { enable: true }; @@ -20,6 +20,63 @@ function (angular, app, _) { $scope.row = $scope.pulldown; }; + $scope.filterOptionSelected = function(templateParameter, option, recursive) { + templateParameter.current = option; + + $scope.filter.updateTemplateData(); + + return $scope.applyFilterToOtherFilters(templateParameter) + .then(function() { + // only refresh in the outermost call + if (!recursive) { + $scope.dashboard.emit_refresh(); + } + }); + }; + + $scope.applyFilterToOtherFilters = function(updatedTemplatedParam) { + var promises = _.map($scope.filter.templateParameters, function(templateParam) { + if (templateParam === updatedTemplatedParam) { + return; + } + if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) { + return $scope.applyFilter(templateParam); + } + }); + + return $q.all(promises); + }; + + $scope.applyFilter = function(templateParam) { + return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query) + .then(function (results) { + templateParam.editing = undefined; + templateParam.options = _.map(results, function(node) { + return { text: node.text, value: node.text }; + }); + + if (templateParam.includeAll) { + var allExpr = '{'; + _.each(templateParam.options, function(option) { + allExpr += option.text + ','; + }); + allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; + templateParam.options.unshift({text: 'All', value: allExpr}); + } + + // if parameter has current value + // if it exists in options array keep value + if (templateParam.current) { + var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value }); + if (currentExists) { + return $scope.filterOptionSelected(templateParam, templateParam.current, true); + } + } + + return $scope.filterOptionSelected(templateParam, templateParam.options[0], true); + }); + }; + $scope.init(); }); diff --git a/src/app/panels/annotations/editor.html b/src/app/partials/annotations_editor.html similarity index 84% rename from src/app/panels/annotations/editor.html rename to src/app/partials/annotations_editor.html index e1184193009..38508216f5f 100644 --- a/src/app/panels/annotations/editor.html +++ b/src/app/partials/annotations_editor.html @@ -10,16 +10,16 @@ - + {{annotation.name}} - - - + + +
diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index e1fba4a8bdf..ab432753bc0 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -5,29 +5,40 @@ diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index ca006b2b015..7773d4b31b9 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -284,6 +284,14 @@ &a:hover { background: @grafanaTargetFuncBackground; } + + &.template-param-name { + border-right: none; + padding-right: 3px; + } + &.annotation-segment { + padding: 8px 15px; + } } .grafana-target-function { @@ -405,7 +413,6 @@ select.grafana-target-segment-input { } } - .scrollable { max-height: 300px; overflow: auto; From 8b3c89e2676a743247d2a77c8a3db8bf27c45778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 15:55:42 +0200 Subject: [PATCH 012/127] Starting work on new templating editor --- src/app/partials/submenu.html | 6 +++--- src/app/partials/templating_editor.html | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/app/partials/templating_editor.html diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index ab432753bc0..a9b2230237e 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -10,8 +10,8 @@ @@ -35,7 +35,7 @@ -
  • +
  • {{annotation.name}}
    • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html new file mode 100644 index 00000000000..0282ea26ade --- /dev/null +++ b/src/app/partials/templating_editor.html @@ -0,0 +1,15 @@ +
    +
    +
    Templating
    + +
    +
    + +
    + +
    + + + +
    +
    From 061d1262d4a405ad2ed392fc6f0b7b942f290d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 16:14:47 +0200 Subject: [PATCH 013/127] Small html markup/css simplification --- src/app/partials/dashboard.html | 196 ++++++++++++++++---------------- src/css/less/grafana.less | 2 +- src/css/less/overrides.less | 2 +- 3 files changed, 98 insertions(+), 102 deletions(-) diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 95c22b574d8..b2857205fa7 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -7,112 +7,108 @@
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - -
    - -
    -
    -
    - - - -
    -
    - - - - -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + + + + + +
    + +
    +
    +
    + + + +
    +
    + + + + +
    +
    +
    - -
    - -
    +
    +
    +
    -
    -
    + +
    + +
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    -
    -
    - - ADD A ROW - -
    -
    -
    -
    +
    +
    + + ADD A ROW + +
    +
    diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 7773d4b31b9..77381a4ebf5 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -179,7 +179,7 @@ } } -.dashboard-fullscreen .container-fluid.main { +.dashboard-fullscreen .main-view-container { height: 0px; width: 0px; position: fixed; diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index eeff1ef0087..14c1fabf9b8 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -14,7 +14,7 @@ padding-right: 0px; } -.container.grafana-container { +.main-view-container { padding: 5px 10px; width: 100%; box-sizing: border-box; From b506e7c26711082e8ca540070735355e7d4a3ac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 16:44:33 +0200 Subject: [PATCH 014/127] fixed submenu in fullscreen mode --- src/app/directives/bodyClass.js | 10 +-- src/app/panels/filtering/module.js | 57 --------------- src/css/less/submenu.less | 110 +---------------------------- 3 files changed, 3 insertions(+), 174 deletions(-) diff --git a/src/app/directives/bodyClass.js b/src/app/directives/bodyClass.js index 6d3c6d32e15..86ff598d69e 100644 --- a/src/app/directives/bodyClass.js +++ b/src/app/directives/bodyClass.js @@ -12,20 +12,14 @@ function (angular, app, _) { return { link: function($scope, elem) { - var lastPulldownVal; var lastHideControlsVal; - $scope.$watchCollection('dashboard.pulldowns', function() { + $scope.$watch('submenuEnabled', function() { if (!$scope.dashboard) { return; } - var panel = _.find($scope.dashboard.pulldowns, function(pulldown) { return pulldown.enable; }); - var panelEnabled = panel ? panel.enable : false; - if (lastPulldownVal !== panelEnabled) { - elem.toggleClass('submenu-controls-visible', panelEnabled); - lastPulldownVal = panelEnabled; - } + elem.toggleClass('submenu-controls-visible', $scope.submenuEnabled); }); $scope.$watch('dashboard.hideControls', function() { diff --git a/src/app/panels/filtering/module.js b/src/app/panels/filtering/module.js index a8f64cad6ed..eb89cebafa0 100644 --- a/src/app/panels/filtering/module.js +++ b/src/app/panels/filtering/module.js @@ -34,63 +34,6 @@ function (angular, app, _) { $scope.filter.removeTemplateParameter(templateParameter); }; - $scope.filterOptionSelected = function(templateParameter, option, recursive) { - templateParameter.current = option; - - $scope.filter.updateTemplateData(); - - return $scope.applyFilterToOtherFilters(templateParameter) - .then(function() { - // only refresh in the outermost call - if (!recursive) { - $scope.dashboard.emit_refresh(); - } - }); - }; - - $scope.applyFilterToOtherFilters = function(updatedTemplatedParam) { - var promises = _.map($scope.filter.templateParameters, function(templateParam) { - if (templateParam === updatedTemplatedParam) { - return; - } - if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) { - return $scope.applyFilter(templateParam); - } - }); - - return $q.all(promises); - }; - - $scope.applyFilter = function(templateParam) { - return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query) - .then(function (results) { - templateParam.editing = undefined; - templateParam.options = _.map(results, function(node) { - return { text: node.text, value: node.text }; - }); - - if (templateParam.includeAll) { - var allExpr = '{'; - _.each(templateParam.options, function(option) { - allExpr += option.text + ','; - }); - allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; - templateParam.options.unshift({text: 'All', value: allExpr}); - } - - // if parameter has current value - // if it exists in options array keep value - if (templateParam.current) { - var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value }); - if (currentExists) { - return $scope.filterOptionSelected(templateParam, templateParam.current, true); - } - } - - return $scope.filterOptionSelected(templateParam, templateParam.options[0], true); - }); - }; - $scope.add = function() { $scope.filter.addTemplateParameter({ type : 'filter', diff --git a/src/css/less/submenu.less b/src/css/less/submenu.less index 514ccf6e29b..247ffda5175 100644 --- a/src/css/less/submenu.less +++ b/src/css/less/submenu.less @@ -1,118 +1,10 @@ -.submenu-controls { - background: @submenuBackground; - font-size: inherit; - label { - margin: 0; - padding-right: 4px; - display: inline; - } - input[type=checkbox] { - margin: 0; - } -} - .submenu-controls-visible:not(.hide-controls) { .panel-fullscreen { - top: 82px; + top: 90px; } } -.submenu-panel { - padding: 0 4px 0 8px; - border-right: 1px solid @submenuBorder; - float: left; -} - -.submenu-panel:first-child { - padding-left: 17px; -} - -.submenu-panel-title { - float: left; - text-transform: uppercase; - padding: 4px 10px 3px 0; -} - -.submenu-panel-wrapper { - float: left; -} - -.submenu-toggle { - padding: 4px 0 3px 8px; - float: left; - .annotation-color-icon { - position: relative; - top: 2px; - } -} - -.submenu-toggle:first-child { - padding-left: 0; -} - -.submenu-control-edit { - padding: 4px 4px 3px 8px; - float: right; - border-left: 1px solid @submenuBorder; - margin-left: 8px; -} - .annotation-disabled, .annotation-disabled a { color: darken(@textColor, 25%); } - -// Filter submenu -.filtering-container { - float: left; -} - -.filtering-container label { - float: left; -} - -.filtering-container input[type=checkbox] { - margin: 0; -} - -.filter-panel-filter { - display:inline-block; - vertical-align: top; - padding: 4px 10px 3px 10px; - border-right: 1px solid @submenuBorder; -} - -.filter-panel-filter:first-child { - padding-left: 0; -} - -.filter-panel-filter ul { - margin-bottom: 0px; -} - -.filter-deselected { - opacity: 0.5; -} - -.filtering-container .filter-action { - float:right; - padding-right: 2px; - margin-bottom: 0px !important; - margin-left: 0px; - margin-top: 4px; -} - -.add-filter-action { - padding: 3px 5px 0px 5px; - position: relative; - top: 4px; -} - -.filter-mandate { - text-decoration: underline; - cursor: pointer; -} - -.filter-apply { - float:right; -} \ No newline at end of file From 00e5bb61fc9f597ebc688c8a23d37842c3a2fb45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 17:27:19 +0200 Subject: [PATCH 015/127] Trying out an alternative to modals --- src/app/controllers/annotationsEditorCtrl.js | 14 ++++++++++++++ src/app/controllers/search.js | 1 - src/app/directives/configModal.js | 6 ++++++ src/app/partials/dashboard.html | 19 ++++++++++++------- 4 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 65561643896..ce832eee1d4 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -61,4 +61,18 @@ function (angular, app, _) { }; }); + + module.controller('EditViewCtrl', function($scope) { + //$scope.editPanelSrc = 'app/partials/test.html'; + + $scope.onAppEvent('show-edit-panel', function(evt, payload) { + $scope.editPanelSrc = payload.src; + }); + + $scope.dismiss = function() { + $scope.editPanelSrc = null; + }; + + }); + }); diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index a32aa64acf0..3d11bc68750 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -173,7 +173,6 @@ function (angular, _, config, $) { "#58140C","#052B51","#511749","#3F2B5B", ]; var color = colors[Math.abs(hash % colors.length)]; - console.log("namei " + name + " color: " + color, hash % 4); element.css("background-color", color); }; diff --git a/src/app/directives/configModal.js b/src/app/directives/configModal.js index b7e579e7026..6ca19cef435 100644 --- a/src/app/directives/configModal.js +++ b/src/app/directives/configModal.js @@ -16,6 +16,12 @@ function (angular, _, $) { var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id; elem.bind('click',function() { + $timeout(function() { + scope.exitFullscreen(); + scope.emitAppEvent('show-edit-panel', {src: partial}); + }); + return; + if ($(id).length) { elem.attr('data-target', id).attr('data-toggle', 'modal'); scope.$apply(function() { scope.$broadcast('modal-opened'); }); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index b2857205fa7..73b23ed12a4 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -8,8 +8,12 @@
    +
    +
    +
    +
    +
    -
    @@ -100,14 +104,15 @@
    -
    -
    -
    - - ADD A ROW - +
    +
    + + ADD A ROW + +
    +
    From 6342571afebcbb1dc198519a906a825e82db3a39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Aug 2014 22:39:40 +0200 Subject: [PATCH 016/127] Trying get rid of modals, new better design for dashboard settings and modals --- src/app/controllers/annotationsEditorCtrl.js | 6 +- src/app/directives/bodyClass.js | 2 +- src/app/directives/configModal.js | 2 +- src/app/panels/filtering/editor.html | 0 src/app/panels/filtering/module.html | 48 ----- src/app/panels/filtering/module.js | 47 ----- src/app/partials/dashboard.html | 2 +- src/app/partials/dasheditor.html | 209 ++++++++++--------- src/app/partials/import.html | 4 +- src/app/partials/templating_editor.html | 58 ++++- src/css/less/bootswatch.dark.less | 5 +- src/css/less/grafana.less | 48 +++++ src/css/less/variables.dark.less | 10 +- 13 files changed, 222 insertions(+), 219 deletions(-) delete mode 100644 src/app/panels/filtering/editor.html delete mode 100755 src/app/panels/filtering/module.html delete mode 100644 src/app/panels/filtering/module.js diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index ce832eee1d4..13cf4d29087 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -63,9 +63,13 @@ function (angular, app, _) { }); module.controller('EditViewCtrl', function($scope) { - //$scope.editPanelSrc = 'app/partials/test.html'; + $scope.editPanelSrc = 'app/partials/dasheditor.html'; $scope.onAppEvent('show-edit-panel', function(evt, payload) { + if (payload.src === $scope.editPanelSrc) { + $scope.dismiss(); + return; + } $scope.editPanelSrc = payload.src; }); diff --git a/src/app/directives/bodyClass.js b/src/app/directives/bodyClass.js index 86ff598d69e..0b1cac65614 100644 --- a/src/app/directives/bodyClass.js +++ b/src/app/directives/bodyClass.js @@ -3,7 +3,7 @@ define([ 'app', 'lodash' ], -function (angular, app, _) { +function (angular) { 'use strict'; angular diff --git a/src/app/directives/configModal.js b/src/app/directives/configModal.js index 6ca19cef435..9e65f6cb07c 100644 --- a/src/app/directives/configModal.js +++ b/src/app/directives/configModal.js @@ -20,7 +20,7 @@ function (angular, _, $) { scope.exitFullscreen(); scope.emitAppEvent('show-edit-panel', {src: partial}); }); - return; + //return; if ($(id).length) { elem.attr('data-target', id).attr('data-toggle', 'modal'); diff --git a/src/app/panels/filtering/editor.html b/src/app/panels/filtering/editor.html deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/app/panels/filtering/module.html b/src/app/panels/filtering/module.html deleted file mode 100755 index 40f4379a98d..00000000000 --- a/src/app/panels/filtering/module.html +++ /dev/null @@ -1,48 +0,0 @@ -
    - -
    - -
    - -
    - -
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/src/app/panels/filtering/module.js b/src/app/panels/filtering/module.js deleted file mode 100644 index eb89cebafa0..00000000000 --- a/src/app/panels/filtering/module.js +++ /dev/null @@ -1,47 +0,0 @@ -/* - - ## filtering - -*/ -define([ - 'angular', - 'app', - 'lodash' -], -function (angular, app, _) { - 'use strict'; - - var module = angular.module('grafana.panels.filtering', []); - app.useModule(module); - - module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout, $q) { - - $scope.panelMeta = { - status : "Stable", - description : "graphite target filters" - }; - - // Set and populate defaults - var _d = { - }; - _.defaults($scope.panel,_d); - - $scope.init = function() { - // empty. Don't know if I need the function then. - }; - - $scope.remove = function(templateParameter) { - $scope.filter.removeTemplateParameter(templateParameter); - }; - - $scope.add = function() { - $scope.filter.addTemplateParameter({ - type : 'filter', - name : 'filter name', - editing : true, - query : 'metric.path.query.*', - }); - }; - - }); -}); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 73b23ed12a4..b528c1e1016 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -9,7 +9,7 @@
    -
    +
    diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 5179893ea75..3169859da01 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -1,108 +1,119 @@ -
    -
    Dashboard settings
    +
    +
    + + Dashboard settings +
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    -
    - - - - Press enter to a add tag -
    -
    -
    -
    - -
    -
    -
    -

    Rows

    - - - - - - - - - - - - - -
    Title
    {{row.title}}
    -
    -
    -

    Add Row

    - - - - -
    -
    -
    - -
    -
    -
    -
    Feature toggles
    -
    - -
    -
    - -
    -
    +
    +
    +
    +
    -
    - -
    - -
    - - -
    -
    -
    -
    - - Grafana version: {{grafanaVersion}} - +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    + + + + Press enter to a add tag +
    +
    +
    +
    + +
    +
    +
    +

    Rows

    + + + + + + + + + + + + + +
    Title
    {{row.title}}
    +
    +
    +

    Add Row

    + + + + +
    + +
    +
    +
    + +
    +
    +
    +
    Feature toggles
    +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    + + Grafana version: {{grafanaVersion}} + | enable console disable console -
    -
    -
    +
    +
    +
    - - +
    diff --git a/src/app/partials/import.html b/src/app/partials/import.html index eeb481e9bdf..f81468465d4 100644 --- a/src/app/partials/import.html +++ b/src/app/partials/import.html @@ -1,4 +1,4 @@ -
    +
    Import dashboards from graphite web
    @@ -12,7 +12,7 @@
    - +
    diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 0282ea26ade..878c017fd84 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -1,15 +1,51 @@ -
    -
    -
    Templating
    +
    +
    + + Dashboard settings +
    -
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    + + + + Press enter to a add tag +
    +
    +
    -
    - -
    - - - -
    +
    + +
    +
    diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index eb37314ae7d..5a484bb1753 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -221,8 +221,9 @@ div.subnav { li > a:hover, li.active > a, li.active > a:hover { - border-color: transparent; - background-color: @blue; + border-color: transparent; + background-color: transparent; + border-bottom: 1px solid @blueDark; color: @white; } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 77381a4ebf5..5aba7086ae6 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -203,15 +203,23 @@ margin: 0; background: @fullEditTabsBackground; border-top: 1px solid @fullEditTabsBorder; + border-bottom: 1px solid @fullEditTabsBorder } .tab-content { display: none; } } + .tab-content { overflow: visible; padding: 15px; + background-color: @grafanaPanelBackground; + border-top: 1px solid @fullEditBorder; + } + + .nav-tabs > li { + margin-bottom: 0; } .nav-tabs > li > a { @@ -546,3 +554,43 @@ select.grafana-target-segment-input { max-width: 400px; } +.dashboard-edit-view { + padding: 20px; + background-color: @grafanaPanelBackground; +} + +.dashboard-editor-body { + padding: 20px 10px; + min-height: 100px; + overflow: hidden; +} +.dashboard-editor-footer { + overflow: hidden; +} + +.dashboard-editor-header { + overflow: hidden; + border-bottom: 1px solid @fullEditBorder; + .tabs { + float: left; + } + + .nav { + margin: 0; + } +} + +.dashboard-editor-title { + padding-right: 20px; + float: left; + color: @linkColor; + font-size: 20px; + font-weight: normal; + line-height: 34px; + margin: 0; + .icon { + padding: 0 8px 0 5px; + color: @textColor; + } +} + diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 3397ceed020..429fecb27b2 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -35,9 +35,9 @@ // Tabs @fullEditTabsBackground: @grayDark; -@fullEditBorder: @black; +@fullEditBorder: #555; @fullEditBackground: transparent; -@fullEditTabsBorder: #555; +@fullEditTabsBorder: @black; // Graphite Target Editor @grafanaTargetBorder: @black; @@ -134,12 +134,10 @@ @btnInverseBackgroundHighlight: darken(@black, 5%); - - // Forms // ------------------------- -@inputBackground: lighten(@grayDark,10%); -@inputBorder: lighten(@grayDark,20%); +@inputBackground: lighten(@grayDark,0%); +@inputBorder: lighten(@grayDark,5%); @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: #555; @formActionsBackground: transparent; From f2de18508a897ab900ab87133b88a2d5321b17c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 07:27:43 +0200 Subject: [PATCH 017/127] More work on removing modals --- src/app/controllers/annotationsEditorCtrl.js | 2 +- src/app/controllers/dashboardNavCtrl.js | 1 - src/app/directives/all.js | 1 + src/app/directives/configModal.js | 6 -- src/app/directives/dashEditLink.js | 60 ++++++++++++++++++++ src/app/partials/dashboard.html | 8 +-- src/app/partials/dashboard_topnav.html | 2 +- 7 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 src/app/directives/dashEditLink.js diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 13cf4d29087..99acea2c18c 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -63,7 +63,7 @@ function (angular, app, _) { }); module.controller('EditViewCtrl', function($scope) { - $scope.editPanelSrc = 'app/partials/dasheditor.html'; + $scope.editPanelSrc = null; $scope.onAppEvent('show-edit-panel', function(evt, payload) { if (payload.src === $scope.editPanelSrc) { diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index a58a2647945..ce5b9934efd 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -23,7 +23,6 @@ function (angular, _, moment, config, store) { $scope.onAppEvent('zoom-out', function() { $scope.zoom(2); }); - }; $scope.set_default = function() { diff --git a/src/app/directives/all.js b/src/app/directives/all.js index 5236a1a619d..8e3996f03be 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -4,6 +4,7 @@ define([ './grafanaPanel', './grafanaSimplePanel', './ngBlur', + './dashEditLink', './ngModelOnBlur', './tip', './confirmClick', diff --git a/src/app/directives/configModal.js b/src/app/directives/configModal.js index 9e65f6cb07c..b7e579e7026 100644 --- a/src/app/directives/configModal.js +++ b/src/app/directives/configModal.js @@ -16,12 +16,6 @@ function (angular, _, $) { var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id; elem.bind('click',function() { - $timeout(function() { - scope.exitFullscreen(); - scope.emitAppEvent('show-edit-panel', {src: partial}); - }); - //return; - if ($(id).length) { elem.attr('data-target', id).attr('data-toggle', 'modal'); scope.$apply(function() { scope.$broadcast('modal-opened'); }); diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js new file mode 100644 index 00000000000..c2e781ba3ae --- /dev/null +++ b/src/app/directives/dashEditLink.js @@ -0,0 +1,60 @@ +define([ + 'angular', + 'jquery' +], +function (angular, $) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('dashEditorLink', function($timeout) { + return { + restrict: 'A', + link: function(scope, elem, attrs) { + var partial = attrs.dashEditorLink; + + elem.bind('click',function() { + $timeout(function() { + scope.exitFullscreen(); + scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope }); + }); + }); + } + }; + }); + + angular + .module('grafana.directives') + .directive('dashEditorView', function($compile) { + return { + restrict: 'A', + link: function(scope, elem) { + var editorScope; + var lastEditor; + + + scope.onAppEvent('show-dash-editor', function(evt, payload) { + if (lastEditor === payload.src) { + editorScope.dismiss(); + return; + } + + lastEditor = payload.src; + editorScope = payload.scope.$new(); + editorScope.dismiss = function() { + editorScope.$destroy(); + elem.empty(); + lastEditor = null; + }; + + var src = "'" + payload.src + "'"; + var view = $('
    '); + elem.append(view); + $compile(elem.contents())(editorScope); + }); + + } + }; + }); + +}); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index b528c1e1016..e11d5cd85a8 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -8,9 +8,7 @@
    -
    -
    -
    +
    @@ -19,7 +17,7 @@
    - + @@ -70,7 +68,7 @@
  • - Row editor + Row editor
  • Delete row diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index 271b71cf5a4..99e23448219 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -62,7 +62,7 @@
    • -
    • +
  • From 9fc6c4888fc5644ea16998938d7af015adc08a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 09:32:30 +0200 Subject: [PATCH 018/127] converting more modals to edit panels --- src/app/controllers/annotationsEditorCtrl.js | 37 +++--- src/app/directives/bootstrap-tagsinput.js | 4 +- src/app/directives/dashEditLink.js | 5 +- src/app/partials/annotations_editor.html | 125 ++++++++++--------- src/app/partials/dasheditor.html | 33 ++--- src/app/partials/paneleditor.html | 45 ++++--- src/app/partials/roweditor.html | 24 ++-- src/app/partials/submenu.html | 4 +- src/css/less/bootswatch.dark.less | 6 +- src/css/less/grafana.less | 6 +- 10 files changed, 153 insertions(+), 136 deletions(-) diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 99acea2c18c..6baf6279b02 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -1,14 +1,15 @@ define([ 'angular', 'app', - 'lodash' + 'lodash', + 'jquery' ], -function (angular, app, _) { +function (angular, app, _, $) { 'use strict'; var module = angular.module('grafana.controllers'); - module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) { + module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $timeout) { var annotationDefaults = { name: '', datasource: null, @@ -22,12 +23,20 @@ function (angular, app, _) { $scope.init = function() { $scope.currentAnnotation = angular.copy(annotationDefaults); $scope.currentIsNew = true; + $scope.editor = { index: 0 }; $scope.datasources = datasourceSrv.getAnnotationSources(); $scope.annotations = $scope.dashboard.annotations.list; if ($scope.datasources.length > 0) { $scope.currentDatasource = $scope.datasources[0]; } + + $scope.$watch('editor.index', function(newVal) { + console.log("value", newVal); + if (newVal !== 2) { + $scope.reset(); + } + }); }; $scope.setDatasource = function() { @@ -42,9 +51,12 @@ function (angular, app, _) { if (!$scope.currentDatasource) { $scope.currentDatasource = $scope.datasources[0]; } + + $scope.editor.index = 2; + $(".tooltip.in").remove(); }; - $scope.update = function() { + $scope.reset = function() { $scope.currentAnnotation = angular.copy(annotationDefaults); $scope.currentIsNew = true; }; @@ -62,21 +74,4 @@ function (angular, app, _) { }); - module.controller('EditViewCtrl', function($scope) { - $scope.editPanelSrc = null; - - $scope.onAppEvent('show-edit-panel', function(evt, payload) { - if (payload.src === $scope.editPanelSrc) { - $scope.dismiss(); - return; - } - $scope.editPanelSrc = payload.src; - }); - - $scope.dismiss = function() { - $scope.editPanelSrc = null; - }; - - }); - }); diff --git a/src/app/directives/bootstrap-tagsinput.js b/src/app/directives/bootstrap-tagsinput.js index 613cc872d78..a8b7eb6a7ad 100644 --- a/src/app/directives/bootstrap-tagsinput.js +++ b/src/app/directives/bootstrap-tagsinput.js @@ -102,7 +102,7 @@ function (angular, $) { var li = '' + '' + (item.text || '') + ''; if (item.submenu && item.submenu.length) { @@ -131,4 +131,4 @@ function (angular, $) { } }; }); -}); \ No newline at end of file +}); diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index c2e781ba3ae..6baf3f05de7 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -32,13 +32,16 @@ function (angular, $) { var editorScope; var lastEditor; - scope.onAppEvent('show-dash-editor', function(evt, payload) { if (lastEditor === payload.src) { editorScope.dismiss(); return; } + if (lastEditor) { + editorScope.dismiss(); + } + lastEditor = payload.src; editorScope = payload.scope.$new(); editorScope.dismiss = function() { diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index 38508216f5f..e921354bc72 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -1,67 +1,72 @@
    -
    -
    Annotations
    -
    - - - - - - - - - - - - - -
    Name
    - - - {{annotation.name}} - -
    -
    +
    +
    + + Annotations +
    -
    -

    Add Annotation

    -

    Edit Annotation

    +
    +
    +
    +
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    +
    -
    -
    +
    -
    - -
    - - - -
    +
    + + + + + + + +
    + + + {{annotation.name}} + +
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    + +
    diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 3169859da01..3fd45081e8a 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -49,30 +49,31 @@
    -

    Rows

    +
    Rows
    - - - - - - - +
    Title
    {{row.title}}{{row.title}}
    -

    Add Row

    - - - - -
    - +
    +
    +
    Add Row
    +
    + + +
    +
    + + +
    +
    + +
    @@ -115,5 +116,5 @@
    • - +
    diff --git a/src/app/partials/paneleditor.html b/src/app/partials/paneleditor.html index 62692c5f88e..ebc8a40ac63 100644 --- a/src/app/partials/paneleditor.html +++ b/src/app/partials/paneleditor.html @@ -1,23 +1,30 @@ -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    + + +
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    - - -
    \ No newline at end of file +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    + +
    diff --git a/src/app/partials/roweditor.html b/src/app/partials/roweditor.html index ab66b08356a..673230948cc 100644 --- a/src/app/partials/roweditor.html +++ b/src/app/partials/roweditor.html @@ -1,12 +1,19 @@ -
    -
    Row settings
    +
    +
    + + Row settings +
    -
    +
    -
    -
    +
    +
    -
    +
    + +
    + +
    @@ -44,8 +51,7 @@
    -
    - - + +
    diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index a9b2230237e..2929b9abc12 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -10,8 +10,8 @@
    diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index 5a484bb1753..4b6ca9edfdb 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -223,7 +223,7 @@ div.subnav { li.active > a:hover { border-color: transparent; background-color: transparent; - border-bottom: 1px solid @blueDark; + border-bottom: 2px solid @blue; color: @white; } @@ -545,7 +545,7 @@ a:hover { .modal { .border-radius(1px); border-top: solid 1px lighten(@grayDark, 5%); - background-color: @grayDark; + background-color: @grafanaPanelBackground; } .modal-header { @@ -553,7 +553,7 @@ a:hover { } .modal-footer { - background-color: @grayDark; + background-color: @grafanaPanelBackground; border-top: 1px solid @grayDark; .border-radius(0 0 0px 0px); .box-shadow(none); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 5aba7086ae6..f4696d14095 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -564,29 +564,29 @@ select.grafana-target-segment-input { min-height: 100px; overflow: hidden; } + .dashboard-editor-footer { overflow: hidden; } .dashboard-editor-header { overflow: hidden; - border-bottom: 1px solid @fullEditBorder; .tabs { float: left; } - .nav { margin: 0; } } .dashboard-editor-title { + border-bottom: 1px solid @grayDark; padding-right: 20px; float: left; color: @linkColor; font-size: 20px; font-weight: normal; - line-height: 34px; + line-height: 38px; margin: 0; .icon { padding: 0 8px 0 5px; From 1a97f79d548e1854db55260bd2dbedfeae0c532a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 09:46:15 +0200 Subject: [PATCH 019/127] changed playlist modal to edit pane --- src/app/controllers/annotationsEditorCtrl.js | 2 +- src/app/partials/playlist.html | 114 ++++++++++--------- src/app/partials/search.html | 2 +- src/css/less/bootswatch.dark.less | 2 +- src/css/less/grafana.less | 4 +- 5 files changed, 65 insertions(+), 59 deletions(-) diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 6baf6279b02..7d9260d1902 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -9,7 +9,7 @@ function (angular, app, _, $) { var module = angular.module('grafana.controllers'); - module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $timeout) { + module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) { var annotationDefaults = { name: '', datasource: null, diff --git a/src/app/partials/playlist.html b/src/app/partials/playlist.html index 576938d8543..8057099d4ce 100644 --- a/src/app/partials/playlist.html +++ b/src/app/partials/playlist.html @@ -1,55 +1,61 @@
    -
    -

    Start dashboard playlist

    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - -
    DashboardIncludeRemove as favorite
    - {{dashboard.title}} - - - - -
    - No dashboards marked as favorites -
    -
    -
    -
    - - Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage). - To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite -

    -     -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    \ No newline at end of file +
    +
    + + Start dashboard playlist +
    +
    + +
    + +
    +
    +
    + + + + + + + + + + + + + + +
    DashboardIncludeRemove as favorite
    + {{dashboard.title}} + + + + +
    + No dashboards marked as favorites +
    +
    +
    +
    + + Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage). + To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite +

    +     +
    +
    +
    + + +
    +
    +
    +
    + +
    + + +
    +
    diff --git a/src/app/partials/search.html b/src/app/partials/search.html index b9974207d3b..4db902343f0 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -20,7 +20,7 @@
  • - diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index 4b6ca9edfdb..8f37b001cbb 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -363,7 +363,7 @@ div.subnav { background-image: none; .box-shadow(none); border: none; - .border-radius(0); + .border-radius(2px); text-shadow: none; &.disabled { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index f4696d14095..83b2aa4eaa7 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -41,7 +41,7 @@ width: 100%; } button { - margin: 0 2px 0 0; + margin: 0 4px 0 0; } > span { display: block; @@ -104,7 +104,7 @@ .search-tagview-switch { position: absolute; top: 15px; - right: 266px; + right: 272px; color: darken(@linkColor, 30%); &.active { color: @linkColor; From d0d0e8349fe6f23ae8a24bf2402eb35bc24ae801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 10:16:21 +0200 Subject: [PATCH 020/127] moved custom timepicker from modal to edit pane --- src/app/controllers/submenuCtrl.js | 7 +- src/app/panels/annotations/editor.js | 63 ----------- src/app/panels/annotations/module.html | 12 --- src/app/panels/annotations/module.js | 39 ------- src/app/panels/timepicker/custom.html | 140 +++++++++++++------------ src/app/panels/timepicker/module.js | 20 +--- src/app/partials/submenu.html | 2 +- 7 files changed, 84 insertions(+), 199 deletions(-) delete mode 100644 src/app/panels/annotations/editor.js delete mode 100644 src/app/panels/annotations/module.html delete mode 100644 src/app/panels/annotations/module.js diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index 5befa5d3a8c..13e10cbe852 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -8,7 +8,7 @@ function (angular, app, _) { var module = angular.module('grafana.controllers'); - module.controller('SubmenuCtrl', function($scope, $q, datasourceSrv) { + module.controller('SubmenuCtrl', function($scope, $q, $rootScope, datasourceSrv) { var _d = { enable: true }; @@ -77,6 +77,11 @@ function (angular, app, _) { }); }; + $scope.disableAnnotation = function (annotation) { + annotation.enable = !annotation.enable; + $rootScope.$broadcast('refresh'); + }; + $scope.init(); }); diff --git a/src/app/panels/annotations/editor.js b/src/app/panels/annotations/editor.js deleted file mode 100644 index 535857418fa..00000000000 --- a/src/app/panels/annotations/editor.js +++ /dev/null @@ -1,63 +0,0 @@ -/* - -*/ -define([ - 'angular', - 'app', - 'lodash' -], -function (angular, app, _) { - 'use strict'; - - var module = angular.module('grafana.panels.annotations', []); - app.useModule(module); - - module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) { - - var annotationDefaults = { - name: '', - datasource: null, - showLine: true, - iconColor: '#C0C6BE', - lineColor: 'rgba(255, 96, 96, 0.592157)', - iconSize: 13, - enable: true - }; - - $scope.init = function() { - $scope.currentAnnotation = angular.copy(annotationDefaults); - $scope.currentIsNew = true; - $scope.datasources = datasourceSrv.getAnnotationSources(); - - if ($scope.datasources.length > 0) { - $scope.currentDatasource = $scope.datasources[0]; - } - }; - - $scope.setDatasource = function() { - $scope.currentAnnotation.datasource = $scope.currentDatasource.name; - }; - - $scope.edit = function(annotation) { - $scope.currentAnnotation = annotation; - $scope.currentIsNew = false; - $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource }); - - if (!$scope.currentDatasource) { - $scope.currentDatasource = $scope.datasources[0]; - } - }; - - $scope.update = function() { - $scope.currentAnnotation = angular.copy(annotationDefaults); - $scope.currentIsNew = true; - }; - - $scope.add = function() { - $scope.currentAnnotation.datasource = $scope.currentDatasource.name; - $scope.panel.annotations.push($scope.currentAnnotation); - $scope.currentAnnotation = angular.copy(annotationDefaults); - }; - - }); -}); diff --git a/src/app/panels/annotations/module.html b/src/app/panels/annotations/module.html deleted file mode 100644 index 0441ed1f883..00000000000 --- a/src/app/panels/annotations/module.html +++ /dev/null @@ -1,12 +0,0 @@ -
    - -
    - - {{annotation.name}} -
    - -
    - -
    - -
    \ No newline at end of file diff --git a/src/app/panels/annotations/module.js b/src/app/panels/annotations/module.js deleted file mode 100644 index fe55e27303c..00000000000 --- a/src/app/panels/annotations/module.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - - ## annotations - -*/ -define([ - 'angular', - 'app', - 'lodash', - './editor' -], -function (angular, app, _) { - 'use strict'; - - var module = angular.module('grafana.panels.annotations', []); - app.useModule(module); - - module.controller('AnnotationsCtrl', function($scope, datasourceSrv, $rootScope) { - - $scope.panelMeta = { - status : "Stable", - description : "Annotations" - }; - - // Set and populate defaults - var _d = { - annotations: [] - }; - - _.defaults($scope.panel, _d); - - $scope.hide = function (annotation) { - annotation.enable = !annotation.enable; - $rootScope.$broadcast('refresh'); - }; - - }); - -}); diff --git a/src/app/panels/timepicker/custom.html b/src/app/panels/timepicker/custom.html index 0784cf987e0..5497d0b6549 100644 --- a/src/app/panels/timepicker/custom.html +++ b/src/app/panels/timepicker/custom.html @@ -1,78 +1,84 @@ -
    - + .timepicker-input input::-webkit-outer-spin-button, + .timepicker-input input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } -
    -
    + input.timepicker-date { + width: 90px; + } + input.timepicker-hms { + width: 20px; + } + input.timepicker-ms { + width: 25px; + } + div.timepicker-now { + float: right; + } + -
    - -
    - @ - : - : - . - -
    -
    +
    + -
    +
    + +
    + @ + : + : + . + +
    +
    - +
    -
    -
    - @ - : - : - . - -
    -   Right Now -
    -
    + - -
    -
    -
    +
    +
    + @ + : + : + . + +
    +   Right Now +
    +
    -
    -
    - Invalid date or range - - +
    +
    +
    +
    - -
    +
    +
    + Invalid date or range + + +
    +
    diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index f00ad5f7a87..ae6d382e34d 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -65,20 +65,10 @@ function (angular, app, _, moment, kbn) { }; $scope.customTime = function() { - if (!customTimeModal) { - customTimeModal = $modal({ - template: './app/panels/timepicker/custom.html', - persist: true, - show: false, - scope: $scope, - keyboard: false - }); - } - // Assume the form is valid since we're setting it to something valid $scope.input.$setValidity("dummy", true); $scope.temptime = cloneTime($scope.time); - $scope.tempnow = $scope.panel.now; + $scope.temptime.now = $scope.panel.now; $scope.temptime.from.date.setHours(0,0,0,0); $scope.temptime.to.date.setHours(0,0,0,0); @@ -89,9 +79,7 @@ function (angular, app, _, moment, kbn) { $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate(); } - $q.when(customTimeModal).then(function(modalEl) { - modalEl.modal('show'); - }); + $scope.emitAppEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope }); }; // Constantly validate the input of the fields. This function does not change any date variables @@ -118,7 +106,7 @@ function (angular, app, _, moment, kbn) { return false; } - return {from:_from,to:_to}; + return { from: _from, to:_to, now: time.now}; }; $scope.setNow = function() { @@ -135,7 +123,7 @@ function (angular, app, _, moment, kbn) { // Create filter object var _filter = _.clone(time); - if($scope.tempnow) { + if(time.now) { _filter.to = "now"; } diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 2929b9abc12..6ed1552db15 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -37,7 +37,7 @@
  • - {{annotation.name}} + {{annotation.name}}
    • From 08d2492839f6cc1ef4d51366011ff2958ddfcdd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 10:49:09 +0200 Subject: [PATCH 021/127] tweaks to edit & tabs look, removed add row from dasheditor --- src/app/panels/graph/module.html | 27 ++++++++++++++++++--------- src/app/partials/dasheditor.html | 20 ++------------------ src/css/less/grafana.less | 7 ------- 3 files changed, 20 insertions(+), 34 deletions(-) diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index 0d418e5e8cd..b7751d98e50 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -21,14 +21,23 @@
    -
    -
    -
    -
    -
    +
    +
    +
    + + Chart settings +
    -
    -
    -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 3fd45081e8a..b9b95715b21 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -59,22 +59,6 @@
    -
    -
    -
    -
    Add Row
    -
    - - -
    -
    - - -
    -
    - -
    -
    @@ -107,8 +91,8 @@
    -
    - +
    + Grafana version: {{grafanaVersion}} | enable console disable console diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 83b2aa4eaa7..4d44dc1d33e 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -522,12 +522,6 @@ select.grafana-target-segment-input { padding: 10px; } -.grafana-version-footer { - padding-top: 15px; - text-align: left; -} - - .metrics-editor-help:hover { .hide { display: block; @@ -562,7 +556,6 @@ select.grafana-target-segment-input { .dashboard-editor-body { padding: 20px 10px; min-height: 100px; - overflow: hidden; } .dashboard-editor-footer { From 3775991ac8585f22d501bc2d63288de476a13828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 11:12:26 +0200 Subject: [PATCH 022/127] Modals to edit pane work almost done, need to work on light theme --- src/app/controllers/annotationsEditorCtrl.js | 1 - src/app/panels/timepicker/module.js | 4 +-- src/app/partials/templating_editor.html | 36 +++----------------- src/css/less/bootswatch.dark.less | 4 +-- src/css/less/submenu.less | 2 +- 5 files changed, 8 insertions(+), 39 deletions(-) diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 7d9260d1902..60f40eee7cd 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -32,7 +32,6 @@ function (angular, app, _, $) { } $scope.$watch('editor.index', function(newVal) { - console.log("value", newVal); if (newVal !== 2) { $scope.reset(); } diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index ae6d382e34d..354623c5028 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -25,7 +25,7 @@ function (angular, app, _, moment, kbn) { var module = angular.module('grafana.panels.timepicker', []); app.useModule(module); - module.controller('timepicker', function($scope, $modal, $q) { + module.controller('timepicker', function($scope) { $scope.panelMeta = { status : "Stable", description : "A panel for controlling the time range filters. If you have time based data, "+ @@ -39,8 +39,6 @@ function (angular, app, _, moment, kbn) { refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'], }; - var customTimeModal = null; - _.defaults($scope.panel,_d); // ng-pattern regexs diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 878c017fd84..e323b9918fb 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -1,11 +1,11 @@
    - - Dashboard settings + + Templating
    -
    +
    @@ -14,38 +14,10 @@
    -
    -
    -
    - -
    -
    - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    -
    - - - - Press enter to a add tag -
    -
    -
    - +
    diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index 8f37b001cbb..f75df4dc03d 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -549,12 +549,12 @@ a:hover { } .modal-header { - border-bottom: 1px solid @grayDark; + border-bottom: 1px solid @grafanaPanelBackground; } .modal-footer { background-color: @grafanaPanelBackground; - border-top: 1px solid @grayDark; + border-top: 1px solid @grafanaPanelBackground; .border-radius(0 0 0px 0px); .box-shadow(none); } diff --git a/src/css/less/submenu.less b/src/css/less/submenu.less index 247ffda5175..8e5c23f7a29 100644 --- a/src/css/less/submenu.less +++ b/src/css/less/submenu.less @@ -1,6 +1,6 @@ .submenu-controls-visible:not(.hide-controls) { .panel-fullscreen { - top: 90px; + top: 91px; } } From 43eba6cc31d2da31daa65bc4a452196e0fbd9050 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 11:17:56 +0200 Subject: [PATCH 023/127] Dashboard: fix for hideControls setting not used/initlaized on dashboard load, Closes #723 --- CHANGELOG.md | 3 ++- src/app/services/dashboard/dashboardSrv.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61b7aea105e..abf8721f786 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - [Issue #697](https://github.com/grafana/grafana/issues/697). Graphite: Fix for Glob syntax in graphite queries ([1-9] and ?) that made the query editor / parser bail and fallback to a text box. - [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. - [Issue #699](https://github.com/grafana/grafana/issues/699). Dashboard: Fix for bug when adding rows from dashboard settings dialog. +- [Issue #723](https://github.com/grafana/grafana/issues/723). Dashboard: Fix for hide controls setting not used/initialized on dashboard load **Tech** - Upgraded from angularjs 1.1.5 to 1.3 beta 17; @@ -24,7 +25,7 @@ # 1.7.1 (unreleased) **Fixes** -- [Issue #691](https://github.com/grafana/grafana/issues/691). Dashboard: tooltip fixes, sometimes they would not show, and sometimes they would get stuck. +- [Issue #691](https://github.com/grafana/grafana/issues/691). Dashboard: Tooltip fixes, sometimes they would not show, and sometimes they would get stuck. - [Issue #695](https://github.com/grafana/grafana/issues/695). Dashboard: Tooltip on goto home menu icon would get stuck after clicking on it # 1.7.0 (2014-08-11) diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 6a363837bc3..af6459d4a80 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -25,7 +25,8 @@ function (angular, $, kbn, _, moment) { this.tags = data.tags || []; this.style = data.style || "dark"; this.timezone = data.timezone || 'browser'; - this.editable = data.editble || true; + this.editable = data.editable || true; + this.hideControls = data.hideControls || false; this.rows = data.rows || []; this.pulldowns = data.pulldowns || []; this.nav = data.nav || []; From 647feb7b3308c02f696c02124ccab769fa4d646b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 14:17:46 +0200 Subject: [PATCH 024/127] Progress on new filter/templating editor --- package.json | 2 +- src/app/controllers/all.js | 1 + src/app/controllers/annotationsEditorCtrl.js | 6 +- src/app/controllers/templateEditorCtrl.js | 50 +++++++++++ src/app/panels/graph/styleEditor.html | 14 ++- src/app/partials/playlist.html | 4 +- src/app/partials/templating_editor.html | 91 +++++++++++++++++--- src/app/services/datasourceSrv.js | 7 +- src/css/less/grafana.less | 9 ++ 9 files changed, 154 insertions(+), 30 deletions(-) create mode 100644 src/app/controllers/templateEditorCtrl.js diff --git a/package.json b/package.json index eecf826776e..8de8f05cf8a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Coding Instinct AB" }, "name": "grafana", - "version": "1.7.0", + "version": "1.8.0", "repository": { "type": "git", "url": "http://github.com/torkelo/grafana.git" diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index 8d7035bbb65..cf63f0940e0 100644 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -14,4 +14,5 @@ define([ './inspectCtrl', './opentsdbTargetCtrl', './annotationsEditorCtrl', + './templateEditorCtrl', ], function () {}); diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 60f40eee7cd..371bbad5838 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -1,10 +1,9 @@ define([ 'angular', - 'app', 'lodash', 'jquery' ], -function (angular, app, _, $) { +function (angular, _, $) { 'use strict'; var module = angular.module('grafana.controllers'); @@ -63,7 +62,8 @@ function (angular, app, _, $) { $scope.add = function() { $scope.currentAnnotation.datasource = $scope.currentDatasource.name; $scope.annotations.push($scope.currentAnnotation); - $scope.currentAnnotation = angular.copy(annotationDefaults); + $scope.reset(); + $scope.editor.index = 0; }; $scope.removeAnnotation = function(annotation) { diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js new file mode 100644 index 00000000000..8b9db552625 --- /dev/null +++ b/src/app/controllers/templateEditorCtrl.js @@ -0,0 +1,50 @@ +define([ + 'angular', + 'lodash', +], +function (angular, _) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + + module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) { + + var replacementDefaults = { + type: 'metric query', + datasource: null, + refresh_on_load: false, + name: '', + options: [], + }; + + $scope.init = function() { + $scope.editor = { index: 0 }; + $scope.datasources = datasourceSrv.getMetricSources(); + $scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); + $scope.templateParameters = $scope.filter.templateParameters; + $scope.reset(); + }; + + $scope.add = function() { + $scope.current.datasource = $scope.currentDatasource.name; + $scope.templateParameters.push($scope.current); + $scope.reset(); + }; + + $scope.reset = function() { + $scope.currentIsNew = true; + $scope.current = angular.copy(replacementDefaults); + $scope.editor.index = 0; + }; + + $scope.removeTemplateParam = function(templateParam) { + var index = _.indexOf($scope.templateParameters, templateParam); + $scope.templateParameters.splice(index, 1); + }; + + $scope.setDatasource = function() { + }; + + }); + +}); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index de7318d4500..a699ae4e1a4 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -67,8 +67,7 @@
    Series specific overrides Regex match example: /server[0-3]/i
    -
    -
    +
      @@ -83,11 +82,11 @@
    • + ng-model="override.alias" + bs-typeahead="getSeriesNames" + ng-blur="render()" + data-min-length=0 data-items=100 + class="input-medium grafana-target-segment-input" >
    • @@ -103,7 +102,6 @@
    -
    diff --git a/src/app/partials/playlist.html b/src/app/partials/playlist.html index 8057099d4ce..3b3ba7600c4 100644 --- a/src/app/partials/playlist.html +++ b/src/app/partials/playlist.html @@ -38,8 +38,8 @@
    - Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage). - To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite + dashboards available in the playlist are only the once marked as favorites (stored in local browser storage). + to mark a dashboard as favorite, use save icon in the menu and in the dropdown select mark as favorite

    diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index e323b9918fb..40864ab5df8 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -1,23 +1,86 @@ -
    -
    - - Templating -
    - -
    -
    +
    +
    + + Templating
    + +
    +
    +
    +
    +
    -
    - -
    +
    + +
    +
    +
    + No replacements defined +
    + + + + + + + +
    {{templateParam.name}}{{templateParam.query}} + + Edit + + + + Remove + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + + +
    + +
    + +
    + +
    -
    - -
    + + + + + + + + + + diff --git a/src/app/services/datasourceSrv.js b/src/app/services/datasourceSrv.js index 9c25b249d1b..a0a123d4509 100644 --- a/src/app/services/datasourceSrv.js +++ b/src/app/services/datasourceSrv.js @@ -20,10 +20,12 @@ function (angular, _, config) { this.init = function() { _.each(config.datasources, function(value, key) { - datasources[key] = this.datasourceFactory(value); + var ds = this.datasourceFactory(value); if (value.default) { - this.default = datasources[key]; + this.default = ds; + ds.default = true; } + datasources[key] = ds; }, this); if (!this.default) { @@ -37,6 +39,7 @@ function (angular, _, config) { metricSources.push({ name: value.name, value: value.default ? null : key, + default: value.default, }); } if (value.supportAnnotations) { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 4d44dc1d33e..396db243b76 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -572,6 +572,15 @@ select.grafana-target-segment-input { } } +// .panel-fullscreen { +// .dashboard-editor-header { +// margin-left: -20px; +// margin-right: -20px; +// background: @grayDark; +// padding-left: 20px; +// } +// } + .dashboard-editor-title { border-bottom: 1px solid @grayDark; padding-right: 20px; From d4d3ae753042125e6383448b484ee098985c57c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 14:42:32 +0200 Subject: [PATCH 025/127] Dashboard: Fix for zoom out causing right hand to range to be set in the future. Closes #724 --- CHANGELOG.md | 1 + src/app/controllers/dashboardNavCtrl.js | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 333f89241f3..337a0745e90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. - [Issue #699](https://github.com/grafana/grafana/issues/699). Dashboard: Fix for bug when adding rows from dashboard settings dialog. - [Issue #723](https://github.com/grafana/grafana/issues/723). Dashboard: Fix for hide controls setting not used/initialized on dashboard load +- [Issue #724](https://github.com/grafana/grafana/issues/724). Dashboard: Fix for zoom out causing right hand "to" range to be set in the future. **Tech** - Upgraded from angularjs 1.1.5 to 1.3 beta 17; diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index a58a2647945..b39cab8da38 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -111,23 +111,23 @@ function (angular, _, moment, config, store) { // function $scope.zoom // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan $scope.zoom = function(factor) { - var _range = $scope.filter.timeRange(); - var _timespan = (_range.to.valueOf() - _range.from.valueOf()); - var _center = _range.to.valueOf() - _timespan/2; + var range = $scope.filter.timeRange(); - var _to = (_center + (_timespan*factor)/2); - var _from = (_center - (_timespan*factor)/2); + var timespan = (range.to.valueOf() - range.from.valueOf()); + var center = range.to.valueOf() - timespan/2; - // If we're not already looking into the future, don't. - if(_to > Date.now() && _range.to < Date.now()) { - var _offset = _to - Date.now(); - _from = _from - _offset; - _to = Date.now(); + var to = (center + (timespan*factor)/2); + var from = (center - (timespan*factor)/2); + + if(to > Date.now() && range.to <= Date.now()) { + var offset = to - Date.now(); + from = from - offset; + to = Date.now(); } $scope.filter.setTime({ - from:moment.utc(_from).toDate(), - to:moment.utc(_to).toDate(), + from:moment.utc(from).toDate(), + to:moment.utc(to).toDate(), }); }; From fdffb03ebabc13ea6f85d7efa48407bd7825c470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 15:02:25 +0200 Subject: [PATCH 026/127] Css polish and tweaks --- src/app/partials/graphite/editor.html | 8 ++-- src/css/less/bootswatch.dark.less | 3 +- src/css/less/console.less | 2 - src/css/less/grafana.less | 58 +++------------------------ src/css/less/variables.dark.less | 3 -- src/css/less/variables.light.less | 3 -- 6 files changed, 12 insertions(+), 65 deletions(-) diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index a3805c7fd9a..b25478dba37 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -11,19 +11,19 @@
    • - +
    • - +
    • - + diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index f75df4dc03d..bed409c87d6 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -212,7 +212,8 @@ div.subnav { .nav-tabs { - border-bottom: 1px solid @grayDark; + border-bottom: 1px solid @fullEditBorder; + & > li > a { .border-radius(0); diff --git a/src/css/less/console.less b/src/css/less/console.less index 166314d19df..de413b301a6 100644 --- a/src/css/less/console.less +++ b/src/css/less/console.less @@ -8,8 +8,6 @@ } .grafana-console-header { - background: @fullEditTabsBackground; - border-top: @fullEditTabsBorder; padding: 2px 5px; } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 396db243b76..569aa9f7169 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -190,46 +190,6 @@ position:relative; } -.panel-full-edit-tabs { - margin-top: 30px; - min-height: 250px; - margin-left: -10px; - margin-right: -10px; - background-color: @fullEditBackground; - border-top: 1px solid @fullEditBorder; - - .tabs { - .nav-tabs { - margin: 0; - background: @fullEditTabsBackground; - border-top: 1px solid @fullEditTabsBorder; - border-bottom: 1px solid @fullEditTabsBorder - } - - .tab-content { - display: none; - } - } - - .tab-content { - overflow: visible; - padding: 15px; - background-color: @grafanaPanelBackground; - border-top: 1px solid @fullEditBorder; - } - - .nav-tabs > li { - margin-bottom: 0; - } - - .nav-tabs > li > a { - line-height: 15px; - padding-top: 6px; - padding-bottom: 6px; - font-size: 0.8rem; - } -} - .grafana-target:last-child { border-bottom: 1px solid @grafanaTargetBorder; } @@ -344,10 +304,13 @@ input[type=text].grafana-function-param-input { white-space: nowrap; } - a { - padding: 8px 7px; + .icon { position: relative; top: 8px; + } + + a { + padding: 8px 7px; color: @grafanaTargetColor; font-size: 16px; @@ -572,17 +535,8 @@ select.grafana-target-segment-input { } } -// .panel-fullscreen { -// .dashboard-editor-header { -// margin-left: -20px; -// margin-right: -20px; -// background: @grayDark; -// padding-left: 20px; -// } -// } - .dashboard-editor-title { - border-bottom: 1px solid @grayDark; + border-bottom: 1px solid @fullEditBorder; padding-right: 20px; float: left; color: @linkColor; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 429fecb27b2..46368362908 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -34,10 +34,7 @@ @submenuBorder: #202020; // Tabs -@fullEditTabsBackground: @grayDark; @fullEditBorder: #555; -@fullEditBackground: transparent; -@fullEditTabsBorder: @black; // Graphite Target Editor @grafanaTargetBorder: @black; diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 1e0b38413fb..54f217e125b 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -38,10 +38,7 @@ @submenuBorder: @white; // Tabs -@fullEditTabsBackground: @white; @fullEditBorder: @white; -@fullEditBackground: @navbarBackground; -@fullEditTabsBorder: @white; // Graphite Target Editor @grafanaTargetBorder: @submenuBackground; From 6502cff8fe506a528de820153227e51493d90d48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 16:42:15 +0200 Subject: [PATCH 027/127] Moved search results from fixed dropdown to edit pane --- src/app/controllers/dashboardNavCtrl.js | 4 + src/app/controllers/search.js | 23 +++--- src/app/directives/dashEditLink.js | 14 +++- src/app/partials/dashboard.html | 2 +- src/app/partials/dashboard_topnav.html | 5 +- src/app/partials/roweditor.html | 2 +- src/app/partials/search.html | 81 ++++++++++--------- .../dashboard/dashboardKeyBindings.js | 6 +- .../dashboard/dashboardViewStateSrv.js | 4 +- src/css/less/bootswatch.dark.less | 1 - src/css/less/grafana.less | 16 ++-- src/css/less/variables.dark.less | 6 +- 12 files changed, 91 insertions(+), 73 deletions(-) diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index ce5b9934efd..fadb9392a2a 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -68,6 +68,10 @@ function (angular, _, moment, config, store) { return false; }; + $scope.openSearch = function() { + $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); + }; + $scope.saveDashboard = function() { if (!this.isAdmin()) { return false; } diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 3d11bc68750..55f44b017ad 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -9,7 +9,7 @@ function (angular, _, config, $) { var module = angular.module('grafana.controllers'); - module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) { + module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv, $timeout) { $scope.init = function() { $scope.giveSearchFocus = 0; @@ -17,7 +17,13 @@ function (angular, _, config, $) { $scope.results = {dashboards: [], tags: [], metrics: []}; $scope.query = { query: 'title:' }; $scope.db = datasourceSrv.getGrafanaDB(); - $scope.onAppEvent('open-search', $scope.openSearch); + + $timeout(function() { + $scope.giveSearchFocus = $scope.giveSearchFocus + 1; + $scope.query.query = 'title:'; + $scope.search(); + }, 100); + }; $scope.keyDown = function (evt) { @@ -94,22 +100,11 @@ function (angular, _, config, $) { $scope.search = function() { $scope.showImport = false; - $scope.selectedIndex = -1; + $scope.selectedIndex = 0; $scope.searchDashboards($scope.query.query); }; - $scope.openSearch = function (evt) { - if (evt) { - $element.next().find('.dropdown-toggle').dropdown('toggle'); - } - - $scope.searchOpened = true; - $scope.giveSearchFocus = $scope.giveSearchFocus + 1; - $scope.query.query = 'title:'; - $scope.search(); - }; - $scope.addMetricToCurrentDashboard = function (metricId) { $scope.dashboard.rows.push({ title: '', diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index 6baf3f05de7..4b49f0e2456 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -15,7 +15,6 @@ function (angular, $) { elem.bind('click',function() { $timeout(function() { - scope.exitFullscreen(); scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope }); }); }); @@ -32,22 +31,31 @@ function (angular, $) { var editorScope; var lastEditor; + scope.onAppEvent('hide-dash-editor', function() { + if (editorScope) { + editorScope.dismiss(); + } + }); + scope.onAppEvent('show-dash-editor', function(evt, payload) { if (lastEditor === payload.src) { editorScope.dismiss(); return; } - if (lastEditor) { + if (editorScope) { editorScope.dismiss(); } + scope.exitFullscreen(); + lastEditor = payload.src; - editorScope = payload.scope.$new(); + editorScope = payload.scope ? payload.scope.$new() : scope.$new(); editorScope.dismiss = function() { editorScope.$destroy(); elem.empty(); lastEditor = null; + editorScope = null; }; var src = "'" + payload.src + "'"; diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index e11d5cd85a8..a68b4d334c5 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
      +
      diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index 99e23448219..bfeb3339b99 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -57,7 +57,10 @@
    -
  • +
  • + + +
    • diff --git a/src/app/partials/roweditor.html b/src/app/partials/roweditor.html index 673230948cc..af8c5405999 100644 --- a/src/app/partials/roweditor.html +++ b/src/app/partials/roweditor.html @@ -53,5 +53,5 @@
    - +
    diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 4db902343f0..c1a030f713d 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -11,53 +11,54 @@ width: 90%; } +
    +
    +
    + + Search +
    - - - +
    +
    + + + + + + tags + +
    +
    - +
    diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index da285e48809..27bbe8ee027 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/src/app/services/dashboard/dashboardKeyBindings.js @@ -21,8 +21,8 @@ function(angular, $) { }); keyboardManager.unbind('esc'); - keyboardManager.bind('ctrl+f', function(evt) { - scope.emitAppEvent('open-search', evt); + keyboardManager.bind('ctrl+f', function() { + scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); }, { inputDisabled: true }); keyboardManager.bind('ctrl+h', function() { @@ -53,6 +53,8 @@ function(angular, $) { modalData.$scope.dismiss(); } + scope.emitAppEvent('hide-dash-editor'); + scope.exitFullscreen(); }, { inputDisabled: true }); }; diff --git a/src/app/services/dashboard/dashboardViewStateSrv.js b/src/app/services/dashboard/dashboardViewStateSrv.js index b39e159ae4c..1c3b1d471dd 100644 --- a/src/app/services/dashboard/dashboardViewStateSrv.js +++ b/src/app/services/dashboard/dashboardViewStateSrv.js @@ -16,7 +16,9 @@ function (angular, _, $) { var self = this; $scope.exitFullscreen = function() { - self.update({ fullscreen: false }); + if (self.fullscreen) { + self.update({ fullscreen: false }); + } }; $scope.onAppEvent('dashboard-saved', function() { diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index bed409c87d6..d1bfbcf1154 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -214,7 +214,6 @@ div.subnav { border-bottom: 1px solid @fullEditBorder; - & > li > a { .border-radius(0); } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 569aa9f7169..7249344f46b 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -32,8 +32,11 @@ } } -// Search +body { + overflow-y: hidden; +} +// Search .grafana-search-panel { .search-field-wrapper { padding: 6px 10px; @@ -52,7 +55,7 @@ } .search-results-container { - max-height: 600px; + height: 500px; overflow: auto; display: block; line-height: 28px; @@ -76,14 +79,15 @@ } .search-result-item:nth-child(odd) { - background-color: @grafanaListAccent; + background-color: lighten(@grayDarker, 2%); } .search-result-item { padding: 0px 10px; white-space: nowrap; - border-top: 1px solid @grafanaListBorderTop; border-bottom: 1px solid @grafanaListBorderBottom; + border-top: 1px solid @grafanaListBorderTop; + border-left: 1px solid @grafanaListBorderBottom; } .search-result-tags { @@ -103,8 +107,8 @@ .search-tagview-switch { position: absolute; - top: 15px; - right: 272px; + top: 6px; + right: 24px; color: darken(@linkColor, 30%); &.active { color: @linkColor; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 46368362908..7214adba17f 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -92,9 +92,9 @@ // Lists @grafanaListBackground: transparent; -@grafanaListAccent: #232323; -@grafanaListBorderTop: #3E3E3E; -@grafanaListBorderBottom: #1c1919; +@grafanaListAccent: @grayDark; +@grafanaListBorderTop: @grayDark; +@grafanaListBorderBottom: @black; @grafanaListHighlight: @blue; @grafanaListHighlightContrast: #4F4F4F; @grafanaListMainLinkColor: @linkColor; From 7d6e04ac776c5a6a61dce6725e4c1426381ef661 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 09:01:50 +0200 Subject: [PATCH 028/127] Small fixes to dasheditor and firefox fixes for search --- src/app/controllers/search.js | 11 ++++++++--- src/app/directives/dashEditLink.js | 14 ++++++++++++++ src/app/directives/grafanaVersionCheck.js | 4 ++-- src/app/partials/dasheditor.html | 14 +++++++------- src/css/less/grafana.less | 13 +++++++++---- 5 files changed, 40 insertions(+), 16 deletions(-) diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 55f44b017ad..19976cda873 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -28,7 +28,7 @@ function (angular, _, config, $) { $scope.keyDown = function (evt) { if (evt.keyCode === 27) { - $element.find('.dropdown-toggle').dropdown('toggle'); + $scope.emitAppEvent('hide-dash-editor'); } if (evt.keyCode === 40) { $scope.selectedIndex++; @@ -134,13 +134,18 @@ function (angular, _, config, $) { module.directive('xngFocus', function() { return function(scope, element, attrs) { - $(element).click(function(e) { + element.click(function(e) { e.stopPropagation(); }); scope.$watch(attrs.xngFocus,function (newValue) { + if (!newValue) { + return; + } setTimeout(function() { - newValue && element.focus(); + element.focus(); + var pos = element.val().length * 2; + element[0].setSelectionRange(pos, pos); }, 200); },true); }; diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index 4b49f0e2456..d772cdaf0b2 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -31,6 +31,16 @@ function (angular, $) { var editorScope; var lastEditor; + function hideScrollbars(value) { + if (value) { + document.documentElement.style.overflow = 'hidden'; // firefox, chrome + document.body.scroll = "no"; // ie only + } else { + document.documentElement.style.overflow = 'auto'; + document.body.scroll = "yes"; + } + } + scope.onAppEvent('hide-dash-editor', function() { if (editorScope) { editorScope.dismiss(); @@ -56,8 +66,12 @@ function (angular, $) { elem.empty(); lastEditor = null; editorScope = null; + hideScrollbars(false); }; + // hide page scrollbars while edit pane is visible + hideScrollbars(true); + var src = "'" + payload.src + "'"; var view = $('
    '); elem.append(view); diff --git a/src/app/directives/grafanaVersionCheck.js b/src/app/directives/grafanaVersionCheck.js index 185a5f6668b..cce6d2ea816 100644 --- a/src/app/directives/grafanaVersionCheck.js +++ b/src/app/directives/grafanaVersionCheck.js @@ -11,7 +11,7 @@ function (angular) { restrict: 'A', link: function(scope, elem) { if (grafanaVersion[0] === '@') { - return; + // return; } $http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' }) @@ -30,4 +30,4 @@ function (angular) { } }; }); -}); \ No newline at end of file +}); diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index b9b95715b21..8bee04121b4 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -5,7 +5,7 @@
    -
    +
    @@ -42,6 +42,7 @@ Press enter to a add tag
    +
    @@ -91,13 +92,12 @@
    -
    - - Grafana version: {{grafanaVersion}} +
    + + Grafana version: {{grafanaVersion}}    + + - | enable console disable console -
    -
    diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 7249344f46b..fcb8380e565 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -32,10 +32,6 @@ } } -body { - overflow-y: hidden; -} - // Search .grafana-search-panel { .search-field-wrapper { @@ -518,6 +514,7 @@ select.grafana-target-segment-input { .dashboard-edit-view { padding: 20px; background-color: @grafanaPanelBackground; + position: relative; } .dashboard-editor-body { @@ -554,3 +551,11 @@ select.grafana-target-segment-input { } } +.grafana-version-info { + position: absolute; + bottom: 2px; + left: 3px; + font-size: 80%; + color: darken(@gray, 25%); + a { color: darken(@gray, 25%); } +} From e0a58dd1fec419d60251c96da2623d2955f24832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 10:41:27 +0200 Subject: [PATCH 029/127] More work on template editor --- src/app/controllers/annotationsEditorCtrl.js | 1 - src/app/controllers/templateEditorCtrl.js | 19 ++++- src/app/directives/grafanaVersionCheck.js | 2 +- src/app/partials/annotations_editor.html | 1 - src/app/partials/search.html | 3 +- src/app/partials/submenu.html | 6 +- src/app/partials/templating_editor.html | 32 +++++--- src/css/less/grafana.less | 81 +------------------ src/css/less/search.less | 83 ++++++++++++++++++++ src/css/less/tables_lists.less | 29 +++++++ 10 files changed, 155 insertions(+), 102 deletions(-) create mode 100644 src/css/less/search.less create mode 100644 src/css/less/tables_lists.less diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 371bbad5838..5234e429206 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -60,7 +60,6 @@ function (angular, _, $) { }; $scope.add = function() { - $scope.currentAnnotation.datasource = $scope.currentDatasource.name; $scope.annotations.push($scope.currentAnnotation); $scope.reset(); $scope.editor.index = 0; diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 8b9db552625..b81d553eb09 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -23,6 +23,10 @@ function (angular, _) { $scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); $scope.templateParameters = $scope.filter.templateParameters; $scope.reset(); + + $scope.$watch('editor.index', function(newVal) { + if (newVal !== 2) { $scope.reset(); } + }); }; $scope.add = function() { @@ -31,6 +35,18 @@ function (angular, _) { $scope.reset(); }; + $scope.edit = function(param) { + $scope.current = param; + $scope.currentIsNew = false; + $scope.currentDatasource = _.findWhere($scope.datasources, { name: param.datasource }); + + if (!$scope.currentDatasource) { + $scope.currentDatasource = $scope.datasources[0]; + } + + $scope.editor.index = 2; + }; + $scope.reset = function() { $scope.currentIsNew = true; $scope.current = angular.copy(replacementDefaults); @@ -42,9 +58,6 @@ function (angular, _) { $scope.templateParameters.splice(index, 1); }; - $scope.setDatasource = function() { - }; - }); }); diff --git a/src/app/directives/grafanaVersionCheck.js b/src/app/directives/grafanaVersionCheck.js index cce6d2ea816..487265e26af 100644 --- a/src/app/directives/grafanaVersionCheck.js +++ b/src/app/directives/grafanaVersionCheck.js @@ -11,7 +11,7 @@ function (angular) { restrict: 'A', link: function(scope, elem) { if (grafanaVersion[0] === '@') { - // return; + return; } $http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' }) diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index e921354bc72..f6aca707f46 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -14,7 +14,6 @@
    -
    diff --git a/src/app/partials/search.html b/src/app/partials/search.html index c1a030f713d..ad47e68a336 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -49,8 +49,7 @@
    No dashboards matching your query were found.
    -
    diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 6ed1552db15..4d9d6b10125 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -36,8 +36,10 @@
  • - - {{annotation.name}} + + + {{annotation.name}} +
    • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 40864ab5df8..ef91bcf285d 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -15,23 +15,28 @@
    -
    -
    +
    +
    No replacements defined
    -
    +
    - - + + - @@ -41,7 +46,7 @@ -
    +
    @@ -53,7 +58,7 @@
    - +
    @@ -64,13 +69,14 @@
    -
    - + + +
    diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index fcb8380e565..e9184ac41c2 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -2,6 +2,8 @@ @import "graph.less"; @import "console.less"; @import "bootstrap-tagsinput.less"; +@import "tables_lists.less"; +@import "search.less"; .hide-controls { padding: 0; @@ -32,85 +34,6 @@ } } -// Search -.grafana-search-panel { - .search-field-wrapper { - padding: 6px 10px; - input { - width: 100%; - } - button { - margin: 0 4px 0 0; - } - > span { - display: block; - overflow: hidden; - padding-right: 25px; - } - } -} - -.search-results-container { - height: 500px; - overflow: auto; - display: block; - line-height: 28px; - - .search-result-item:hover, .search-result-item.selected { - .search-result-link, .search-result-link > .icon { - color: @grafanaListHighlight; - } - .search-result-tag { - opacity: 0.70; - color: white; - } - } - - .search-result-link { - color: @grafanaListMainLinkColor; - .icon { - padding-right: 10px; - color: @grafanaListHighlightContrast; - } - } - - .search-result-item:nth-child(odd) { - background-color: lighten(@grayDarker, 2%); - } - - .search-result-item { - padding: 0px 10px; - white-space: nowrap; - border-bottom: 1px solid @grafanaListBorderBottom; - border-top: 1px solid @grafanaListBorderTop; - border-left: 1px solid @grafanaListBorderBottom; - } - - .search-result-tags { - float: right; - .label-tag { - margin-left: 6px; - font-size: 11px; - padding: 2px 6px; - } - } - - .search-result-actions { - float: right; - padding-left: 20px; - } -} - -.search-tagview-switch { - position: absolute; - top: 6px; - right: 24px; - color: darken(@linkColor, 30%); - &.active { - color: @linkColor; - } -} - .row-button { width: 24px; } diff --git a/src/css/less/search.less b/src/css/less/search.less new file mode 100644 index 00000000000..7302d7ea7a7 --- /dev/null +++ b/src/css/less/search.less @@ -0,0 +1,83 @@ +// Search +.grafana-search-panel { + .search-field-wrapper { + padding: 6px 10px; + input { + width: 100%; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + padding-right: 25px; + } + } +} + +.search-results-container { + height: 500px; + overflow: auto; + display: block; + line-height: 28px; + + .search-result-item:hover, .search-result-item.selected { + .search-result-link, .search-result-link > .icon { + color: @grafanaListHighlight; + } + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .search-result-link { + color: @grafanaListMainLinkColor; + .icon { + padding-right: 10px; + color: @grafanaListHighlightContrast; + } + } + + .search-result-item:nth-child(odd) { + background-color: lighten(@grayDarker, 2%); + } + + .search-result-item { + padding: 0px 10px; + white-space: nowrap; + border-bottom: 1px solid @grafanaListBorderBottom; + border-top: 1px solid @grafanaListBorderTop; + border-left: 1px solid @grafanaListBorderBottom; + } + + .search-result-tags { + float: right; + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} + +.search-tagview-switch { + position: absolute; + top: 6px; + right: 24px; + color: darken(@linkColor, 30%); + &.active { + color: @linkColor; + } +} + + diff --git a/src/css/less/tables_lists.less b/src/css/less/tables_lists.less new file mode 100644 index 00000000000..29896b02e47 --- /dev/null +++ b/src/css/less/tables_lists.less @@ -0,0 +1,29 @@ +.grafana-options-table { + width: 100%; + + tr:nth-child(odd) td { + background-color: lighten(@grayDarker, 2%); + } + + td { + padding: 5px 10px; + white-space: nowrap; + border-bottom: 1px solid @grafanaListBorderBottom; + border-top: 1px solid @grafanaListBorderTop; + } + + td:first-child { + border-left: 1px solid @grafanaListBorderBottom; + } + + td:last-child { + border-right: 1px solid @grafanaListBorderBottom; + } + + .max-width { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; + } +} From bb3b31829f74a2c0a5ad5c35ffac4878702ded63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 15:54:30 +0200 Subject: [PATCH 030/127] Progress on template editor & new templating features --- src/app/controllers/dashboardCtrl.js | 14 ++- src/app/controllers/submenuCtrl.js | 1 - src/app/controllers/templateEditorCtrl.js | 26 ++++- src/app/partials/influxdb/editor.html | 6 +- src/app/partials/inspector.html | 119 ++++++++++++---------- src/app/partials/opentsdb/editor.html | 4 +- src/app/partials/templating_editor.html | 36 +++++-- src/app/services/all.js | 1 + src/app/services/datasourceSrv.js | 2 +- src/app/services/filterSrv.js | 5 - src/app/services/templateSrv.js | 21 ++++ src/css/less/overrides.less | 2 +- src/css/less/tables_lists.less | 7 +- src/css/less/variables.dark.less | 12 +-- 14 files changed, 166 insertions(+), 90 deletions(-) create mode 100644 src/app/services/templateSrv.js diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index d881f114765..b37672a1ffc 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -11,9 +11,16 @@ function (angular, $, config, _) { var module = angular.module('grafana.controllers'); module.controller('DashboardCtrl', function( - $scope, $rootScope, dashboardKeybindings, - filterSrv, dashboardSrv, dashboardViewStateSrv, - panelMoveSrv, timer, $timeout) { + $scope, + $rootScope, + dashboardKeybindings, + filterSrv, + templateSrv, + dashboardSrv, + dashboardViewStateSrv, + panelMoveSrv, + timer, + $timeout) { $scope.editor = { index: 0 }; $scope.panelNames = config.panels; @@ -47,6 +54,7 @@ function (angular, $, config, _) { $scope.filter = filterSrv; $scope.filter.init($scope.dashboard); + templateSrv.init($scope.dashboard); $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index 13e10cbe852..edaab142eb3 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -50,7 +50,6 @@ function (angular, app, _) { $scope.applyFilter = function(templateParam) { return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query) .then(function (results) { - templateParam.editing = undefined; templateParam.options = _.map(results, function(node) { return { text: node.text, value: node.text }; }); diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index b81d553eb09..85c7d81f669 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -10,7 +10,7 @@ function (angular, _) { module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) { var replacementDefaults = { - type: 'metric query', + type: 'query', datasource: null, refresh_on_load: false, name: '', @@ -24,8 +24,17 @@ function (angular, _) { $scope.templateParameters = $scope.filter.templateParameters; $scope.reset(); - $scope.$watch('editor.index', function(newVal) { - if (newVal !== 2) { $scope.reset(); } + _.each($scope.templateParameters, function(param) { + if (param.datasource === void 0) { + param.datasource = null; + param.type = 'query'; + } + }); + + $scope.$watch('editor.index', function(index) { + if ($scope.currentIsNew === false && index === 1) { + $scope.reset(); + } }); }; @@ -33,6 +42,11 @@ function (angular, _) { $scope.current.datasource = $scope.currentDatasource.name; $scope.templateParameters.push($scope.current); $scope.reset(); + $scope.editor.index = 0; + }; + + $scope.runQuery = function() { + $scope.filter.refreshTemplateParameter($scope.current); }; $scope.edit = function(param) { @@ -47,10 +61,14 @@ function (angular, _) { $scope.editor.index = 2; }; + $scope.update = function() { + $scope.reset(); + $scope.editor.index = 0; + }; + $scope.reset = function() { $scope.currentIsNew = true; $scope.current = angular.copy(replacementDefaults); - $scope.editor.index = 0; }; $scope.removeTemplateParam = function(templateParam) { diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 8bc3baf8ff7..ecbb9af28a0 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -14,7 +14,7 @@ - + @@ -171,7 +171,9 @@ + +
    diff --git a/src/app/partials/inspector.html b/src/app/partials/inspector.html index 7f2ec526f70..79ca806d9f0 100644 --- a/src/app/partials/inspector.html +++ b/src/app/partials/inspector.html @@ -1,69 +1,80 @@
    -
    Inspector
    +
    +
    + + Inspector +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    Request details
    -
    {{templateParam.name}}{{templateParam.query}} - + {{templateParam.name}} + + {{templateParam.query}} + + + Edit - - Remove + + +
    - - - - - - - - - - - - -
    Url{{inspector.error.config.url}}
    Method{{inspector.error.config.method}}
    - {{key}} - - {{value}} -
    +
    -
    Request parameters
    - - - - - -
    - {{param.key}} - - {{param.value}} -
    -
    +
    -
    -
    +
    +
    Request details
    + + + + + + + + + + + + + +
    Url{{inspector.error.config.url}}
    Method{{inspector.error.config.method}}
    + {{key}} + + {{value}} +
    -
    -
    -
    +
    Request parameters
    + + + + + +
    + {{param.key}} + + {{param.value}} +
    +
    -
    +
    +
    -
    +
    +
    +
    - - 
    -      {{message}}
-
    +
    - - 
    -      {{stack_trace}}
-
    +
    -
    + + 
    +			{{message}}
+
    + + + 
    +			{{stack_trace}}
+
    + +
    + +
    +
    - +
    diff --git a/src/app/partials/opentsdb/editor.html b/src/app/partials/opentsdb/editor.html index bce27f230f2..32d34dab7a8 100644 --- a/src/app/partials/opentsdb/editor.html +++ b/src/app/partials/opentsdb/editor.html @@ -12,7 +12,7 @@ - + diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index ef91bcf285d..57a1f6ad7a5 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -22,8 +22,8 @@
    - + + + + + + +
    - {{templateParam.name}} + + [[{{templateParam.name}}]] {{templateParam.query}} @@ -54,7 +54,7 @@
    - +
    @@ -63,9 +63,29 @@
    -
    - - +
    + + + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    + +
      +
    • + {{option.text}} +
      • +
    @@ -74,8 +94,8 @@
    - - + +
    diff --git a/src/app/services/all.js b/src/app/services/all.js index 62deab62e5e..6eb8fb534c0 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -2,6 +2,7 @@ define([ './alertSrv', './datasourceSrv', './filterSrv', + './templateSrv', './panelSrv', './timer', './panelMove', diff --git a/src/app/services/datasourceSrv.js b/src/app/services/datasourceSrv.js index a0a123d4509..5d26ebdc28c 100644 --- a/src/app/services/datasourceSrv.js +++ b/src/app/services/datasourceSrv.js @@ -12,7 +12,7 @@ function (angular, _, config) { var module = angular.module('grafana.services'); - module.service('datasourceSrv', function($q, filterSrv, $http, $injector) { + module.service('datasourceSrv', function($q, $http, $injector) { var datasources = {}; var metricSources = []; var annotationSources = []; diff --git a/src/app/services/filterSrv.js b/src/app/services/filterSrv.js index 6b7787c7940..4dede583803 100644 --- a/src/app/services/filterSrv.js +++ b/src/app/services/filterSrv.js @@ -78,11 +78,6 @@ define([ } }, - removeTemplateParameter: function(templateParameter) { - this.templateParameters = _.without(this.templateParameters, templateParameter); - this.dashboard.templating.list = this.templateParameters; - }, - init: function(dashboard) { this.dashboard = dashboard; this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js new file mode 100644 index 00000000000..7165f4442ba --- /dev/null +++ b/src/app/services/templateSrv.js @@ -0,0 +1,21 @@ +define([ + 'angular', + 'lodash', + 'kbn', + 'store' +], +function (angular) { + 'use strict'; + + var module = angular.module('grafana.services'); + + module.service('templateSrv', function() { + + this.init = function(dashboard) { + this.dashboard = dashboard; + + }; + + }); + +}); diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 14c1fabf9b8..59e30d264c7 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -467,7 +467,6 @@ div.flot-text { /************************* * Right Positions *************************/ - .popover { &.rightTop .arrow { top: 10%; @@ -639,3 +638,4 @@ code, pre { background-color: @grafanaPanelBackground; color: @textColor; } + diff --git a/src/css/less/tables_lists.less b/src/css/less/tables_lists.less index 29896b02e47..4f95c1a1082 100644 --- a/src/css/less/tables_lists.less +++ b/src/css/less/tables_lists.less @@ -9,7 +9,12 @@ padding: 5px 10px; white-space: nowrap; border-bottom: 1px solid @grafanaListBorderBottom; - border-top: 1px solid @grafanaListBorderTop; + } + + tr:first-child { + td { + border-top: 1px solid @grafanaListBorderBottom; + } } td:first-child { diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 7214adba17f..048ffd1a689 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -6,7 +6,7 @@ // ------------------------- @black: #000; @gray: #bbb; -@grayDark: #303030; +@grayDark: #242424; @grayDarker: #1f1f1f; @grayLight: #ADAFAE; @@ -29,10 +29,6 @@ // ------------------------- @grafanaPanelBackground: @grayDarker; -// Submenu -@submenuBackground: #292929; -@submenuBorder: #202020; - // Tabs @fullEditBorder: #555; @@ -43,8 +39,8 @@ @grafanaTargetColorHide: darken(#c8c8c8, 25%); @grafanaTargetSegmentBorder: #050505; -@grafanaTargetFuncBackground: #444; -@grafanaTargetFuncHightlight: #555; +@grafanaTargetFuncBackground: #333; +@grafanaTargetFuncHightlight: #444; // Scaffolding // ------------------------- @@ -133,7 +129,7 @@ // Forms // ------------------------- -@inputBackground: lighten(@grayDark,0%); +@inputBackground: lighten(@grayDark,5%); @inputBorder: lighten(@grayDark,5%); @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: #555; From 1929490deb4895d8cc3bf338d1850819a6d12b93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 16:29:48 +0200 Subject: [PATCH 031/127] Renamed filterSrv to timeSrv and made it a service again --- src/app/controllers/dashboardCtrl.js | 5 +-- src/app/controllers/dashboardNavCtrl.js | 6 +-- src/app/controllers/graphiteTarget.js | 4 +- src/app/directives/grafanaGraph.js | 4 +- src/app/panels/graph/module.js | 10 ++--- src/app/panels/text/module.js | 1 - src/app/panels/timepicker/module.html | 3 +- src/app/panels/timepicker/module.js | 16 ++++---- src/app/services/all.js | 2 +- src/app/services/annotationsSrv.js | 4 +- .../services/graphite/graphiteDatasource.js | 22 +++++----- .../services/influxdb/influxdbDatasource.js | 8 ++-- src/app/services/{filterSrv.js => timeSrv.js} | 41 +++++++++---------- src/test/specs/grafanaGraph-specs.js | 3 ++ src/test/specs/graphiteTargetCtrl-specs.js | 2 +- src/test/specs/helpers.js | 8 ++-- src/test/specs/influxdb-datasource-specs.js | 4 +- .../{filterSrv-specs.js => timeSrv-specs.js} | 36 ++++++++-------- src/test/test-main.js | 2 +- 19 files changed, 89 insertions(+), 92 deletions(-) rename src/app/services/{filterSrv.js => timeSrv.js} (83%) rename src/test/specs/{filterSrv-specs.js => timeSrv-specs.js} (64%) diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index b37672a1ffc..3f113ab3a8c 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -14,7 +14,7 @@ function (angular, $, config, _) { $scope, $rootScope, dashboardKeybindings, - filterSrv, + timeSrv, templateSrv, dashboardSrv, dashboardViewStateSrv, @@ -52,8 +52,7 @@ function (angular, $, config, _) { $scope.grafana.style = $scope.dashboard.style; - $scope.filter = filterSrv; - $scope.filter.init($scope.dashboard); + timeSrv.init($scope.dashboard); templateSrv.init($scope.dashboard); $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index fadb9392a2a..a0d32a97343 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -11,7 +11,7 @@ function (angular, _, moment, config, store) { var module = angular.module('grafana.controllers'); - module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, datasourceSrv) { + module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, datasourceSrv, timeSrv) { $scope.init = function() { $scope.db = datasourceSrv.getGrafanaDB(); @@ -114,7 +114,7 @@ function (angular, _, moment, config, store) { // function $scope.zoom // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan $scope.zoom = function(factor) { - var _range = $scope.filter.timeRange(); + var _range = timeSrv.timeRange(); var _timespan = (_range.to.valueOf() - _range.from.valueOf()); var _center = _range.to.valueOf() - _timespan/2; @@ -128,7 +128,7 @@ function (angular, _, moment, config, store) { _to = Date.now(); } - $scope.filter.setTime({ + timeSrv.setTime({ from:moment.utc(_from).toDate(), to:moment.utc(_to).toDate(), }); diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 935ee1aeef0..2e16c9f423e 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -110,7 +110,7 @@ function (angular, _, config, gfunc, Parser) { } var path = getSegmentPathUpTo(fromIndex + 1); - return $scope.datasource.metricFindQuery($scope.filter, path) + return $scope.datasource.metricFindQuery(path) .then(function(segments) { if (segments.length === 0) { $scope.segments = $scope.segments.splice(0, fromIndex); @@ -147,7 +147,7 @@ function (angular, _, config, gfunc, Parser) { var query = index === 0 ? '*' : getSegmentPathUpTo(index) + '.*'; - return $scope.datasource.metricFindQuery($scope.filter, query) + return $scope.datasource.metricFindQuery(query) .then(function(segments) { $scope.altSegments = _.map(segments, function(segment) { return new MetricSegment({ value: segment.text, expandable: segment.expandable }); diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 222bde78b26..8d9e6be45bc 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -10,7 +10,7 @@ function (angular, $, kbn, moment, _) { var module = angular.module('grafana.directives'); - module.directive('grafanaGraph', function($rootScope) { + module.directive('grafanaGraph', function($rootScope, timeSrv) { return { restrict: 'A', template: '
    ', @@ -416,7 +416,7 @@ function (angular, $, kbn, moment, _) { elem.bind("plotselected", function (event, ranges) { scope.$apply(function() { - scope.filter.setTime({ + timeSrv.setTime({ from : moment.utc(ranges.xaxis.from).toDate(), to : moment.utc(ranges.xaxis.to).toDate(), }); diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 6897cc090b0..b66da0ebed6 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -23,7 +23,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { var module = angular.module('grafana.panels.graph'); app.useModule(module); - module.controller('GraphCtrl', function($scope, $rootScope, $timeout, panelSrv, annotationsSrv) { + module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) { $scope.panelMeta = { modals : [], @@ -179,8 +179,8 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { $scope.hiddenSeries = {}; $scope.updateTimeRange = function () { - $scope.range = $scope.filter.timeRange(); - $scope.rangeUnparsed = $scope.filter.timeRange(false); + $scope.range = timeSrv.timeRange(); + $scope.rangeUnparsed = timeSrv.timeRange(false); $scope.resolution = Math.ceil($(window).width() * ($scope.panel.span / 12)); $scope.interval = '10m'; @@ -203,9 +203,9 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { cacheTimeout: $scope.panel.cacheTimeout }; - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.filter, $scope.rangeUnparsed, $scope.dashboard); + $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed, $scope.dashboard); - return $scope.datasource.query($scope.filter, metricsQuery) + return $scope.datasource.query(metricsQuery) .then($scope.dataHandler) .then(null, function(err) { $scope.panelMeta.loading = false; diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index c745cf4f30a..c3aabba2804 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -3,7 +3,6 @@ define([ 'app', 'lodash', 'require', - 'services/filterSrv' ], function (angular, app, _, require) { 'use strict'; diff --git a/src/app/panels/timepicker/module.html b/src/app/panels/timepicker/module.html index 6a498da2959..0eacee58d4b 100644 --- a/src/app/panels/timepicker/module.html +++ b/src/app/panels/timepicker/module.html @@ -16,8 +16,7 @@
  • - - Time filter + refreshed every {{dashboard.refresh}} diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index 354623c5028..7dcd222e4cd 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -25,11 +25,11 @@ function (angular, app, _, moment, kbn) { var module = angular.module('grafana.panels.timepicker', []); app.useModule(module); - module.controller('timepicker', function($scope) { + module.controller('timepicker', function($scope, timeSrv) { + $scope.panelMeta = { status : "Stable", - description : "A panel for controlling the time range filters. If you have time based data, "+ - " or if you're using time stamped indices, you need one of these" + description : "" }; // Set and populate defaults @@ -55,9 +55,9 @@ function (angular, app, _, moment, kbn) { }); $scope.init = function() { - var time = this.filter.timeRange(true); + var time = timeSrv.timeRange(true); if(time) { - $scope.panel.now = this.filter.timeRange(false).to === "now" ? true : false; + $scope.panel.now = timeSrv.timeRange(false).to === "now" ? true : false; $scope.time = getScopeTimeObj(time.from,time.to); } }; @@ -126,7 +126,7 @@ function (angular, app, _, moment, kbn) { } // Set the filter - $scope.panel.filter_id = $scope.filter.setTime(_filter); + $scope.panel.filter_id = timeSrv.setTime(_filter); // Update our representation $scope.time = getScopeTimeObj(time.from,time.to); @@ -140,7 +140,7 @@ function (angular, app, _, moment, kbn) { to: "now" }; - this.filter.setTime(_filter); + timeSrv.setTime(_filter); $scope.time = getScopeTimeObj(kbn.parseDate(_filter.from),new Date()); }; @@ -173,7 +173,7 @@ function (angular, app, _, moment, kbn) { model.tooltip = 'Click to set time filter'; } - if ($scope.filter.time) { + if (timeSrv.time) { if ($scope.panel.now) { model.rangeString = moment(model.from.date).fromNow() + ' to ' + moment(model.to.date).fromNow(); diff --git a/src/app/services/all.js b/src/app/services/all.js index 6eb8fb534c0..1f515f4df49 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -1,7 +1,7 @@ define([ './alertSrv', './datasourceSrv', - './filterSrv', + './timeSrv', './templateSrv', './panelSrv', './timer', diff --git a/src/app/services/annotationsSrv.js b/src/app/services/annotationsSrv.js index a59eae4cf07..c1733189462 100644 --- a/src/app/services/annotationsSrv.js +++ b/src/app/services/annotationsSrv.js @@ -21,7 +21,7 @@ define([ list = []; }; - this.getAnnotations = function(filterSrv, rangeUnparsed, dashboard) { + this.getAnnotations = function(rangeUnparsed, dashboard) { if (!dashboard.annotations.enable) { return $q.when(null); } @@ -36,7 +36,7 @@ define([ var promises = _.map(annotations, function(annotation) { var datasource = datasourceSrv.get(annotation.datasource); - return datasource.annotationQuery(annotation, filterSrv, rangeUnparsed) + return datasource.annotationQuery(annotation, rangeUnparsed) .then(this.receiveAnnotationResults) .then(null, errorHandler); }, this); diff --git a/src/app/services/graphite/graphiteDatasource.js b/src/app/services/graphite/graphiteDatasource.js index 761b29b3a9f..061813bfe3f 100644 --- a/src/app/services/graphite/graphiteDatasource.js +++ b/src/app/services/graphite/graphiteDatasource.js @@ -11,7 +11,7 @@ function (angular, _, $, config, kbn, moment) { var module = angular.module('grafana.services'); - module.factory('GraphiteDatasource', function($q, $http) { + module.factory('GraphiteDatasource', function($q, $http, timeSrv) { function GraphiteDatasource(datasource) { this.type = 'graphite'; @@ -26,7 +26,7 @@ function (angular, _, $, config, kbn, moment) { this.cacheTimeout = datasource.cacheTimeout; } - GraphiteDatasource.prototype.query = function(filterSrv, options) { + GraphiteDatasource.prototype.query = function(options) { try { var graphOptions = { from: this.translateTime(options.range.from, 'round-down'), @@ -37,7 +37,7 @@ function (angular, _, $, config, kbn, moment) { maxDataPoints: options.maxDataPoints, }; - var params = this.buildGraphiteParams(filterSrv, graphOptions); + var params = this.buildGraphiteParams(graphOptions); if (options.format === 'png') { return $q.when(this.url + '/render' + '?' + params.join('&')); @@ -60,10 +60,10 @@ function (angular, _, $, config, kbn, moment) { } }; - GraphiteDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) { + GraphiteDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { // Graphite metric as annotation if (annotation.target) { - var target = filterSrv.applyTemplateToTarget(annotation.target); + var target = timeSrv.applyTemplateToTarget(annotation.target); var graphiteQuery = { range: rangeUnparsed, targets: [{ target: target }], @@ -71,7 +71,7 @@ function (angular, _, $, config, kbn, moment) { maxDataPoints: 100 }; - return this.query(filterSrv, graphiteQuery) + return this.query(timeSrv, graphiteQuery) .then(function(result) { var list = []; @@ -95,7 +95,7 @@ function (angular, _, $, config, kbn, moment) { } // Graphite event as annotation else { - var tags = filterSrv.applyTemplateToTarget(annotation.tags); + var tags = timeSrv.applyTemplateToTarget(annotation.tags); return this.events({ range: rangeUnparsed, tags: tags }) .then(function(results) { var list = []; @@ -166,10 +166,10 @@ function (angular, _, $, config, kbn, moment) { return date.unix(); }; - GraphiteDatasource.prototype.metricFindQuery = function(filterSrv, query) { + GraphiteDatasource.prototype.metricFindQuery = function(query) { var interpolated; try { - interpolated = encodeURIComponent(filterSrv.applyTemplateToTarget(query)); + interpolated = encodeURIComponent(timeSrv.applyTemplateToTarget(query)); } catch(err) { return $q.reject(err); @@ -210,7 +210,7 @@ function (angular, _, $, config, kbn, moment) { return $http(options); }; - GraphiteDatasource.prototype.buildGraphiteParams = function(filterSrv, options) { + GraphiteDatasource.prototype.buildGraphiteParams = function(options) { var clean_options = []; var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout']; @@ -226,7 +226,7 @@ function (angular, _, $, config, kbn, moment) { if (key === "targets") { _.each(value, function (value) { if (value.target && !value.hide) { - var targetValue = filterSrv.applyTemplateToTarget(value.target); + var targetValue = timeSrv.applyTemplateToTarget(value.target); clean_options.push("target=" + encodeURIComponent(targetValue)); } }, this); diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 4dafd9d7388..8dcff41bc62 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -9,7 +9,7 @@ function (angular, _, kbn, InfluxSeries) { var module = angular.module('grafana.services'); - module.factory('InfluxDatasource', function($q, $http) { + module.factory('InfluxDatasource', function($q, $http, timeSrv) { function InfluxDatasource(datasource) { this.type = 'influxDB'; @@ -31,7 +31,7 @@ function (angular, _, kbn, InfluxSeries) { this.annotationEditorSrc = 'app/partials/influxdb/annotation_editor.html'; } - InfluxDatasource.prototype.query = function(filterSrv, options) { + InfluxDatasource.prototype.query = function(options) { var promises = _.map(options.targets, function(target) { var query; var alias = ''; @@ -73,7 +73,7 @@ function (angular, _, kbn, InfluxSeries) { } query = queryElements.join(" "); - query = filterSrv.applyTemplateToTarget(query); + query = timeSrv.applyTemplateToTarget(query); } else { @@ -100,7 +100,7 @@ function (angular, _, kbn, InfluxSeries) { } query = _.template(template, templateData, this.templateSettings); - query = filterSrv.applyTemplateToTarget(query); + query = timeSrv.applyTemplateToTarget(query); if (target.groupby_field_add) { groupByField = target.groupby_field; diff --git a/src/app/services/filterSrv.js b/src/app/services/timeSrv.js similarity index 83% rename from src/app/services/filterSrv.js rename to src/app/services/timeSrv.js index 4dede583803..34c98ecefb8 100644 --- a/src/app/services/filterSrv.js +++ b/src/app/services/timeSrv.js @@ -8,10 +8,17 @@ define([ var module = angular.module('grafana.services'); - module.factory('filterSrv', function($rootScope, $timeout, $routeParams) { - var result = { + module.service('timeSrv', function($rootScope, $timeout, $routeParams) { - updateTemplateData: function(initial) { + this.init = function(dashboard) { + this.dashboard = dashboard; + this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; + this.time = dashboard.time; + this.templateParameters = dashboard.templating.list; + this.updateTemplateData(true); + }; + + this.updateTemplateData = function(initial) { var _templateData = {}; _.each(this.templateParameters, function(templateParameter) { if (initial) { @@ -26,22 +33,22 @@ define([ _templateData[templateParameter.name] = templateParameter.current.value; }); this._templateData = _templateData; - }, + }; - addTemplateParameter: function(templateParameter) { + this.addTemplateParameter = function(templateParameter) { this.templateParameters.push(templateParameter); this.updateTemplateData(); - }, + }; - applyTemplateToTarget: function(target) { + this.applyTemplateToTarget = function(target) { if (!target || target.indexOf('[[') === -1) { return target; } return _.template(target, this._templateData, this.templateSettings); - }, + }; - setTime: function(time) { + this.setTime = function(time) { _.extend(this.time, time); // disable refresh if we have an absolute time @@ -55,9 +62,9 @@ define([ } $timeout(this.dashboard.emit_refresh, 0); - }, + }; - timeRange: function(parse) { + this.timeRange = function(parse) { var _t = this.time; if(_.isUndefined(_t) || _.isUndefined(_t.from)) { return false; @@ -76,18 +83,8 @@ define([ to : kbn.parseDate(_to) }; } - }, + }; - init: function(dashboard) { - this.dashboard = dashboard; - this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; - this.time = dashboard.time; - this.templateParameters = dashboard.templating.list; - this.updateTemplateData(true); - } - }; - - return result; }); }); diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index c7a27740f4d..1b86ee9073d 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -15,6 +15,9 @@ define([ describe(desc, function() { var ctx = {}; ctx.setup = function (setupFunc) { + beforeEach(module(function($provide) { + $provide.value("timeSrv", new helpers.TimeSrvStub()); + })); beforeEach(inject(function($rootScope, $compile) { var scope = $rootScope.$new(); var element = angular.element("
    "); diff --git a/src/test/specs/graphiteTargetCtrl-specs.js b/src/test/specs/graphiteTargetCtrl-specs.js index dfe51960fc5..0681bf6c4de 100644 --- a/src/test/specs/graphiteTargetCtrl-specs.js +++ b/src/test/specs/graphiteTargetCtrl-specs.js @@ -28,7 +28,7 @@ define([ }); it('should validate metric key exists', function() { - expect(ctx.scope.datasource.metricFindQuery.getCall(0).args[1]).to.be('test.prod.*'); + expect(ctx.scope.datasource.metricFindQuery.getCall(0).args[0]).to.be('test.prod.*'); }); it('should delete last segment if no metrics are found', function() { diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 4f2eb7ea680..5012f75dbe6 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -8,6 +8,7 @@ define([ this.datasource = {}; this.annotationsSrv = {}; + this.timeSrv = new TimeSrvStub(); this.datasourceSrv = { getMetricSources: function() {}, get: function() { return self.datasource; } @@ -17,6 +18,7 @@ define([ return module(function($provide) { $provide.value('datasourceSrv', self.datasourceSrv); $provide.value('annotationsSrv', self.annotationsSrv); + $provide.value('timeSrv', self.timeSrv); }); }; @@ -25,7 +27,6 @@ define([ self.scope = $rootScope.$new(); self.scope.panel = {}; self.scope.row = { panels:[] }; - self.scope.filter = new FilterSrvStub(); self.scope.dashboard = {}; self.scope.dashboardViewState = new DashboardViewStateStub(); @@ -50,7 +51,6 @@ define([ self.service = InfluxDatasource; self.$q = $q; self.$rootScope = $rootScope; - self.filterSrv = new FilterSrvStub(); self.$httpBackend = $httpBackend; }]); }; @@ -61,7 +61,7 @@ define([ }; } - function FilterSrvStub() { + function TimeSrvStub() { this.time = { from:'now-1h', to: 'now'}; this.timeRange = function(parse) { if (parse === false) { @@ -81,7 +81,7 @@ define([ return { ControllerTestContext: ControllerTestContext, - FilterSrvStub: FilterSrvStub, + TimeSrvStub: TimeSrvStub, ServiceTestContext: ServiceTestContext }; diff --git a/src/test/specs/influxdb-datasource-specs.js b/src/test/specs/influxdb-datasource-specs.js index a164c2aec62..b66d9eb3304 100644 --- a/src/test/specs/influxdb-datasource-specs.js +++ b/src/test/specs/influxdb-datasource-specs.js @@ -29,7 +29,7 @@ define([ var ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); ctx.$httpBackend.expect('GET', urlExpected).respond(response); - ds.query(ctx.filterSrv, query).then(function(data) { results = data; }); + ds.query(query).then(function(data) { results = data; }); ctx.$httpBackend.flush(); }); @@ -59,7 +59,7 @@ define([ var ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); ctx.$httpBackend.expect('GET', urlExpected).respond(response); - ds.query(ctx.filterSrv, query).then(function(data) { results = data; }); + ds.query(query).then(function(data) { results = data; }); ctx.$httpBackend.flush(); }); diff --git a/src/test/specs/filterSrv-specs.js b/src/test/specs/timeSrv-specs.js similarity index 64% rename from src/test/specs/filterSrv-specs.js rename to src/test/specs/timeSrv-specs.js index 69a497a66cb..cc2c4b0f158 100644 --- a/src/test/specs/filterSrv-specs.js +++ b/src/test/specs/timeSrv-specs.js @@ -1,12 +1,12 @@ define([ 'mocks/dashboard-mock', 'lodash', - 'services/filterSrv' + 'services/timeSrv' ], function(dashboardMock, _) { 'use strict'; - describe('filterSrv', function() { - var _filterSrv; + describe('timeSrv', function() { + var _timeSrv; var _dashboard; beforeEach(module('grafana.services')); @@ -14,52 +14,52 @@ define([ _dashboard = dashboardMock.create(); })); - beforeEach(inject(function(filterSrv) { - _filterSrv = filterSrv; + beforeEach(inject(function(timeSrv) { + _timeSrv = timeSrv; })); beforeEach(function() { - _filterSrv.init(_dashboard); + _timeSrv.init(_dashboard); }); describe('init', function() { beforeEach(function() { - _filterSrv.addTemplateParameter({ name: 'test', current: { value: 'oogle' } }); + _timeSrv.addTemplateParameter({ name: 'test', current: { value: 'oogle' } }); }); it('should initialize template data', function() { - var target = _filterSrv.applyTemplateToTarget('this.[[test]].filters'); + var target = _timeSrv.applyTemplateToTarget('this.[[test]].filters'); expect(target).to.be('this.oogle.filters'); }); }); describe('updateTemplateData', function() { beforeEach(function() { - _filterSrv.addTemplateParameter({ + _timeSrv.addTemplateParameter({ name: 'test', value: 'muuu', current: { value: 'muuuu' } }); - _filterSrv.updateTemplateData(); + _timeSrv.updateTemplateData(); }); it('should set current value and update template data', function() { - var target = _filterSrv.applyTemplateToTarget('this.[[test]].filters'); + var target = _timeSrv.applyTemplateToTarget('this.[[test]].filters'); expect(target).to.be('this.muuuu.filters'); }); }); describe('timeRange', function() { it('should return unparsed when parse is false', function() { - _filterSrv.setTime({from: 'now', to: 'now-1h' }); - var time = _filterSrv.timeRange(false); + _timeSrv.setTime({from: 'now', to: 'now-1h' }); + var time = _timeSrv.timeRange(false); expect(time.from).to.be('now'); expect(time.to).to.be('now-1h'); }); it('should return parsed when parse is true', function() { - _filterSrv.setTime({from: 'now', to: 'now-1h' }); - var time = _filterSrv.timeRange(true); + _timeSrv.setTime({from: 'now', to: 'now-1h' }); + var time = _timeSrv.timeRange(true); expect(_.isDate(time.from)).to.be(true); expect(_.isDate(time.to)).to.be(true); }); @@ -69,15 +69,15 @@ define([ it('should return disable refresh for absolute times', function() { _dashboard.refresh = true; - _filterSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); + _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); }); it('should restore refresh after relative time range is set', function() { _dashboard.refresh = true; - _filterSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); + _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); - _filterSrv.setTime({from: '2011-01-01', to: 'now' }); + _timeSrv.setTime({from: '2011-01-01', to: 'now' }); expect(_dashboard.refresh).to.be(true); }); }); diff --git a/src/test/test-main.js b/src/test/test-main.js index 4e231c8c1aa..ed5a9cb3b63 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -125,7 +125,7 @@ require([ 'specs/graph-ctrl-specs', 'specs/grafanaGraph-specs', 'specs/seriesOverridesCtrl-specs', - 'specs/filterSrv-specs', + 'specs/timeSrv-specs', 'specs/kbn-format-specs', 'specs/dashboardSrv-specs', 'specs/dashboardViewStateSrv-specs', From 9ee4fcb36cb646a0f973d3a1046a739c8efa1941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 17:58:49 +0200 Subject: [PATCH 032/127] continued large refactoring of filterSrv, timeSrv and templating --- src/app/controllers/dashboardCtrl.js | 7 - src/app/controllers/submenuCtrl.js | 63 +-------- src/app/panels/text/module.js | 4 +- src/app/panels/timepicker/module.html | 6 +- src/app/panels/timepicker/module.js | 4 +- src/app/partials/submenu.html | 2 +- src/app/services/all.js | 1 + src/app/services/dashboard/dashboardSrv.js | 24 +--- .../services/graphite/graphiteDatasource.js | 12 +- .../services/influxdb/influxdbDatasource.js | 10 +- src/app/services/panelSrv.js | 7 - src/app/services/templateSrv.js | 36 ++++- src/app/services/templateValuesSrv.js | 72 ++++++++++ src/app/services/timeSrv.js | 128 +++++++++--------- src/test/mocks/dashboard-mock.js | 7 +- src/test/specs/helpers.js | 2 +- src/test/specs/templateSrv-specs.js | 55 ++++++++ src/test/specs/timeSrv-specs.js | 38 +----- src/test/test-main.js | 1 + 19 files changed, 261 insertions(+), 218 deletions(-) create mode 100644 src/app/services/templateValuesSrv.js create mode 100644 src/test/specs/templateSrv-specs.js diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 3f113ab3a8c..03cdddfbf7b 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -41,8 +41,6 @@ function (angular, $, config, _) { }; $scope.setupDashboard = function(event, dashboardData) { - timer.cancel_all(); - $rootScope.performance.dashboardLoadStart = new Date().getTime(); $rootScope.performance.panelsInitialized = 0; $rootScope.performance.panelsRendered= 0; @@ -67,11 +65,6 @@ function (angular, $, config, _) { window.document.title = config.window_title_prefix + $scope.dashboard.title; - // start auto refresh - if($scope.dashboard.refresh) { - $scope.dashboard.set_interval($scope.dashboard.refresh); - } - dashboardKeybindings.shortcuts($scope); $scope.emitAppEvent("dashboard-loaded", $scope.dashboard); diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index edaab142eb3..dcc147d49d9 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -8,7 +8,7 @@ function (angular, app, _) { var module = angular.module('grafana.controllers'); - module.controller('SubmenuCtrl', function($scope, $q, $rootScope, datasourceSrv) { + module.controller('SubmenuCtrl', function($scope, $q, $rootScope, templateValuesSrv) { var _d = { enable: true }; @@ -18,62 +18,7 @@ function (angular, app, _) { $scope.init = function() { $scope.panel = $scope.pulldown; $scope.row = $scope.pulldown; - }; - - $scope.filterOptionSelected = function(templateParameter, option, recursive) { - templateParameter.current = option; - - $scope.filter.updateTemplateData(); - - return $scope.applyFilterToOtherFilters(templateParameter) - .then(function() { - // only refresh in the outermost call - if (!recursive) { - $scope.dashboard.emit_refresh(); - } - }); - }; - - $scope.applyFilterToOtherFilters = function(updatedTemplatedParam) { - var promises = _.map($scope.filter.templateParameters, function(templateParam) { - if (templateParam === updatedTemplatedParam) { - return; - } - if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) { - return $scope.applyFilter(templateParam); - } - }); - - return $q.all(promises); - }; - - $scope.applyFilter = function(templateParam) { - return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query) - .then(function (results) { - templateParam.options = _.map(results, function(node) { - return { text: node.text, value: node.text }; - }); - - if (templateParam.includeAll) { - var allExpr = '{'; - _.each(templateParam.options, function(option) { - allExpr += option.text + ','; - }); - allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; - templateParam.options.unshift({text: 'All', value: allExpr}); - } - - // if parameter has current value - // if it exists in options array keep value - if (templateParam.current) { - var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value }); - if (currentExists) { - return $scope.filterOptionSelected(templateParam, templateParam.current, true); - } - } - - return $scope.filterOptionSelected(templateParam, templateParam.options[0], true); - }); + $scope.templateParameters = $scope.dashboard.templating.list; }; $scope.disableAnnotation = function (annotation) { @@ -81,6 +26,10 @@ function (angular, app, _) { $rootScope.$broadcast('refresh'); }; + $scope.filterOptionSelected = function(param, option) { + templateValuesSrv.filterOptionSelected(param, option); + }; + $scope.init(); }); diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index c3aabba2804..e652b40a56b 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -12,7 +12,7 @@ function (angular, app, _, require) { var converter; - module.controller('text', function($scope, filterSrv, $sce, panelSrv) { + module.controller('text', function($scope, templateSrv, $sce, panelSrv) { $scope.panelMeta = { description : "A static text panel that can use plain text, markdown, or (sanitized) HTML" @@ -75,7 +75,7 @@ function (angular, app, _, require) { $scope.updateContent = function(html) { try { - $scope.content = $sce.trustAsHtml(filterSrv.applyTemplateToTarget(html)); + $scope.content = $sce.trustAsHtml(templateSrv.replace(html)); } catch(e) { console.log('Text panel error: ', e); $scope.content = $sce.trustAsHtml(html); diff --git a/src/app/panels/timepicker/module.html b/src/app/panels/timepicker/module.html index 0eacee58d4b..8357f66a7a3 100644 --- a/src/app/panels/timepicker/module.html +++ b/src/app/panels/timepicker/module.html @@ -32,10 +32,10 @@ Auto-Refresh
    • @@ -44,7 +44,7 @@
  • - +
    • diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index 7dcd222e4cd..656af0898a0 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -25,7 +25,7 @@ function (angular, app, _, moment, kbn) { var module = angular.module('grafana.panels.timepicker', []); app.useModule(module); - module.controller('timepicker', function($scope, timeSrv) { + module.controller('timepicker', function($scope, $rootScope, timeSrv) { $scope.panelMeta = { status : "Stable", @@ -50,6 +50,8 @@ function (angular, app, _, moment, kbn) { millisecond: /^[0-9]*$/ }; + $scope.timeSrv = timeSrv; + $scope.$on('refresh', function() { $scope.init(); }); diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 4d9d6b10125..2d5c3e1831d 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -18,7 +18,7 @@
      -
    • +
    • {{param.name}}:
      • diff --git a/src/app/services/all.js b/src/app/services/all.js index 1f515f4df49..81fe4603277 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -3,6 +3,7 @@ define([ './datasourceSrv', './timeSrv', './templateSrv', + './templateValuesSrv', './panelSrv', './timer', './panelMove', diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 9677409f5fa..e88092a4c16 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -11,7 +11,7 @@ function (angular, $, kbn, _, moment) { var module = angular.module('grafana.services'); - module.factory('dashboardSrv', function(timer, $rootScope, $timeout) { + module.factory('dashboardSrv', function($rootScope) { function DashboardModel (data) { @@ -115,28 +115,6 @@ function (angular, $, kbn, _, moment) { $rootScope.$broadcast('refresh'); }; - p.start_scheduled_refresh = function (after_ms) { - this.cancel_scheduled_refresh(); - this.refresh_timer = timer.register($timeout(function () { - this.start_scheduled_refresh(after_ms); - this.emit_refresh(); - }.bind(this), after_ms)); - }; - - p.cancel_scheduled_refresh = function () { - timer.cancel(this.refresh_timer); - }; - - p.set_interval = function (interval) { - this.refresh = interval; - if (interval) { - var _i = kbn.interval_to_ms(interval); - this.start_scheduled_refresh(_i); - } else { - this.cancel_scheduled_refresh(); - } - }; - p.updateSchema = function(old) { var oldVersion = this.version; var panelUpgrades = []; diff --git a/src/app/services/graphite/graphiteDatasource.js b/src/app/services/graphite/graphiteDatasource.js index 061813bfe3f..f7c217d30d0 100644 --- a/src/app/services/graphite/graphiteDatasource.js +++ b/src/app/services/graphite/graphiteDatasource.js @@ -11,7 +11,7 @@ function (angular, _, $, config, kbn, moment) { var module = angular.module('grafana.services'); - module.factory('GraphiteDatasource', function($q, $http, timeSrv) { + module.factory('GraphiteDatasource', function($q, $http, templateSrv) { function GraphiteDatasource(datasource) { this.type = 'graphite'; @@ -63,7 +63,7 @@ function (angular, _, $, config, kbn, moment) { GraphiteDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { // Graphite metric as annotation if (annotation.target) { - var target = timeSrv.applyTemplateToTarget(annotation.target); + var target = templateSrv.replace(annotation.target); var graphiteQuery = { range: rangeUnparsed, targets: [{ target: target }], @@ -71,7 +71,7 @@ function (angular, _, $, config, kbn, moment) { maxDataPoints: 100 }; - return this.query(timeSrv, graphiteQuery) + return this.query(graphiteQuery) .then(function(result) { var list = []; @@ -95,7 +95,7 @@ function (angular, _, $, config, kbn, moment) { } // Graphite event as annotation else { - var tags = timeSrv.applyTemplateToTarget(annotation.tags); + var tags = templateSrv.replace(annotation.tags); return this.events({ range: rangeUnparsed, tags: tags }) .then(function(results) { var list = []; @@ -169,7 +169,7 @@ function (angular, _, $, config, kbn, moment) { GraphiteDatasource.prototype.metricFindQuery = function(query) { var interpolated; try { - interpolated = encodeURIComponent(timeSrv.applyTemplateToTarget(query)); + interpolated = encodeURIComponent(templateSrv.replace(query)); } catch(err) { return $q.reject(err); @@ -226,7 +226,7 @@ function (angular, _, $, config, kbn, moment) { if (key === "targets") { _.each(value, function (value) { if (value.target && !value.hide) { - var targetValue = timeSrv.applyTemplateToTarget(value.target); + var targetValue = templateSrv.replace(value.target); clean_options.push("target=" + encodeURIComponent(targetValue)); } }, this); diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 8dcff41bc62..ae2a223602e 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -9,7 +9,7 @@ function (angular, _, kbn, InfluxSeries) { var module = angular.module('grafana.services'); - module.factory('InfluxDatasource', function($q, $http, timeSrv) { + module.factory('InfluxDatasource', function($q, $http, templateSrv) { function InfluxDatasource(datasource) { this.type = 'influxDB'; @@ -73,7 +73,7 @@ function (angular, _, kbn, InfluxSeries) { } query = queryElements.join(" "); - query = timeSrv.applyTemplateToTarget(query); + query = templateSrv.replace(query); } else { @@ -100,7 +100,7 @@ function (angular, _, kbn, InfluxSeries) { } query = _.template(template, templateData, this.templateSettings); - query = timeSrv.applyTemplateToTarget(query); + query = templateSrv.replace(query); if (target.groupby_field_add) { groupByField = target.groupby_field; @@ -110,7 +110,7 @@ function (angular, _, kbn, InfluxSeries) { } if (target.alias) { - alias = filterSrv.applyTemplateToTarget(target.alias); + alias = templateSrv.replace(target.alias); } var handleResponse = _.partial(handleInfluxQueryResponse, alias, groupByField); @@ -164,7 +164,7 @@ function (angular, _, kbn, InfluxSeries) { InfluxDatasource.prototype.metricFindQuery = function (filterSrv, query) { var interpolated; try { - interpolated = filterSrv.applyTemplateToTarget(query); + interpolated = templateSrv.replace(query); } catch (err) { return $q.reject(err); diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 3c362818f2d..fd0c732f43b 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -129,13 +129,6 @@ function (angular, _) { $scope.get_data(); } } - - if ($rootScope.profilingEnabled) { - $rootScope.performance.panelsInitialized++; - if ($rootScope.performance.panelsInitialized === $scope.dashboard.rows.length) { - $rootScope.performance.allPanelsInitialized = new Date().getTime(); - } - } }; }); diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 7165f4442ba..5958cfeae6a 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -4,16 +4,48 @@ define([ 'kbn', 'store' ], -function (angular) { +function (angular, _) { 'use strict'; var module = angular.module('grafana.services'); - module.service('templateSrv', function() { + module.service('templateSrv', function($q, $routeParams) { this.init = function(dashboard) { this.dashboard = dashboard; + this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; + this.templateParameters = dashboard.templating.list; + this.updateTemplateData(true); + }; + this.updateTemplateData = function(initial) { + var _templateData = {}; + _.each(this.templateParameters, function(templateParameter) { + if (initial) { + var urlValue = $routeParams[ templateParameter.name ]; + if (urlValue) { + templateParameter.current = { text: urlValue, value: urlValue }; + } + } + if (!templateParameter.current || !templateParameter.current.value) { + return; + } + _templateData[templateParameter.name] = templateParameter.current.value; + }); + this._templateData = _templateData; + }; + + this.addTemplateParameter = function(templateParameter) { + this.templateParameters.push(templateParameter); + this.updateTemplateData(); + }; + + this.replace = function(target) { + if (!target || target.indexOf('[[') === -1) { + return target; + } + + return _.template(target, this._templateData, this.templateSettings); }; }); diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js new file mode 100644 index 00000000000..0b6c4f20edf --- /dev/null +++ b/src/app/services/templateValuesSrv.js @@ -0,0 +1,72 @@ +define([ + 'angular', + 'lodash', + 'kbn', + 'store' +], +function (angular, _) { + 'use strict'; + + var module = angular.module('grafana.services'); + + module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $routeParams, templateSrv) { + var self = this; + + this.filterOptionSelected = function(templateParameter, option, recursive) { + templateParameter.current = option; + + templateSrv.updateTemplateData(); + + return this.applyFilterToOtherFilters(templateParameter) + .then(function() { + if (!recursive) { + $rootScope.$broadcast('refresh'); + } + }); + }; + + this.applyFilterToOtherFilters = function(updatedTemplatedParam) { + var promises = _.map(self.templateParameters, function(templateParam) { + if (templateParam === updatedTemplatedParam) { + return; + } + if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) { + return self.applyFilter(templateParam); + } + }); + + return $q.all(promises); + }; + + this.applyFilter = function(templateParam) { + return datasourceSrv.default.metricFindQuery(templateParam.query) + .then(function (results) { + templateParam.options = _.map(results, function(node) { + return { text: node.text, value: node.text }; + }); + + if (templateParam.includeAll) { + var allExpr = '{'; + _.each(templateParam.options, function(option) { + allExpr += option.text + ','; + }); + allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; + templateParam.options.unshift({text: 'All', value: allExpr}); + } + + // if parameter has current value + // if it exists in options array keep value + if (templateParam.current) { + var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value }); + if (currentExists) { + return self.filterOptionSelected(templateParam, templateParam.current, true); + } + } + + return self.filterOptionSelected(templateParam, templateParam.options[0], true); + }); + }; + + }); + +}); diff --git a/src/app/services/timeSrv.js b/src/app/services/timeSrv.js index 34c98ecefb8..d560956f90f 100644 --- a/src/app/services/timeSrv.js +++ b/src/app/services/timeSrv.js @@ -8,82 +8,82 @@ define([ var module = angular.module('grafana.services'); - module.service('timeSrv', function($rootScope, $timeout, $routeParams) { + module.service('timeSrv', function($rootScope, $timeout, timer) { + var self = this; this.init = function(dashboard) { - this.dashboard = dashboard; - this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; - this.time = dashboard.time; - this.templateParameters = dashboard.templating.list; - this.updateTemplateData(true); + timer.cancel_all(); + + this.dashboard = dashboard; + this.time = dashboard.time; + + if(this.dashboard.refresh) { + this.set_interval(this.dashboard.refresh); + } }; - this.updateTemplateData = function(initial) { - var _templateData = {}; - _.each(this.templateParameters, function(templateParameter) { - if (initial) { - var urlValue = $routeParams[ templateParameter.name ]; - if (urlValue) { - templateParameter.current = { text: urlValue, value: urlValue }; - } - } - if (!templateParameter.current || !templateParameter.current.value) { - return; - } - _templateData[templateParameter.name] = templateParameter.current.value; - }); - this._templateData = _templateData; - }; + this.set_interval = function (interval) { + this.dashboard.refresh = interval; + if (interval) { + var _i = kbn.interval_to_ms(interval); + this.start_scheduled_refresh(_i); + } else { + this.cancel_scheduled_refresh(); + } + }; - this.addTemplateParameter = function(templateParameter) { - this.templateParameters.push(templateParameter); - this.updateTemplateData(); - }; + this.refreshDashboard = function() { + $rootScope.$broadcast('refresh'); + }; - this.applyTemplateToTarget = function(target) { - if (!target || target.indexOf('[[') === -1) { - return target; - } + this.start_scheduled_refresh = function (after_ms) { + self.cancel_scheduled_refresh(); + self.refresh_timer = timer.register($timeout(function () { + self.start_scheduled_refresh(after_ms); + self.refreshDashboard(); + }, after_ms)); + }; - return _.template(target, this._templateData, this.templateSettings); - }; + this.cancel_scheduled_refresh = function () { + timer.cancel(this.refresh_timer); + }; - this.setTime = function(time) { - _.extend(this.time, time); + this.setTime = function(time) { + _.extend(this.time, time); - // disable refresh if we have an absolute time - if (time.to !== 'now') { - this.old_refresh = this.dashboard.refresh; - this.dashboard.set_interval(false); - } - else if (this.old_refresh && this.old_refresh !== this.dashboard.refresh) { - this.dashboard.set_interval(this.old_refresh); - this.old_refresh = null; - } + // disable refresh if we have an absolute time + if (time.to !== 'now') { + this.old_refresh = this.dashboard.refresh; + this.set_interval(false); + } + else if (this.old_refresh && this.old_refresh !== this.dashboard.refresh) { + this.set_interval(this.old_refresh); + this.old_refresh = null; + } - $timeout(this.dashboard.emit_refresh, 0); - }; + $timeout(this.refreshDashboard, 0); + }; - this.timeRange = function(parse) { - var _t = this.time; - if(_.isUndefined(_t) || _.isUndefined(_t.from)) { - return false; - } - if(parse === false) { - return { - from: _t.from, - to: _t.to - }; - } else { - var _from = _t.from; - var _to = _t.to || new Date(); + this.timeRange = function(parse) { + var _t = this.time; + if(_.isUndefined(_t) || _.isUndefined(_t.from)) { + return false; + } + if(parse === false) { + return { + from: _t.from, + to: _t.to + }; + } else { + var _from = _t.from; + var _to = _t.to || new Date(); - return { - from : kbn.parseDate(_from), - to : kbn.parseDate(_to) - }; - } - }; + return { + from: kbn.parseDate(_from), + to: kbn.parseDate(_to) + }; + } + }; }); diff --git a/src/test/mocks/dashboard-mock.js b/src/test/mocks/dashboard-mock.js index 7ec0e5e9997..6367093bd36 100644 --- a/src/test/mocks/dashboard-mock.js +++ b/src/test/mocks/dashboard-mock.js @@ -5,9 +5,6 @@ define([], return { create: function() { return { - emit_refresh: function() {}, - set_interval: function(value) { this.refresh = value; }, - title: "", tags: [], style: "dark", @@ -18,11 +15,11 @@ define([], rows: [], pulldowns: [ { type: 'templating' }, { type: 'annotations' } ], nav: [ { type: 'timepicker' } ], - time: {}, + time: {from: '1h', to: 'now'}, templating: { list: [] }, - refresh: true + refresh: '10s', }; } }; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 5012f75dbe6..bdc358d009d 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -73,7 +73,7 @@ define([ }; }; - this.applyTemplateToTarget = function(target) { + this.replace = function(target) { return target; }; } diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js new file mode 100644 index 00000000000..e57ce40fa3e --- /dev/null +++ b/src/test/specs/templateSrv-specs.js @@ -0,0 +1,55 @@ +define([ + 'mocks/dashboard-mock', + 'lodash', + 'services/templateSrv' +], function(dashboardMock) { + 'use strict'; + + describe('templateSrv', function() { + var _templateSrv; + var _dashboard; + + beforeEach(module('grafana.services')); + beforeEach(module(function() { + _dashboard = dashboardMock.create(); + })); + + beforeEach(inject(function(templateSrv) { + _templateSrv = templateSrv; + })); + + beforeEach(function() { + _templateSrv.init(_dashboard); + }); + + describe('init', function() { + beforeEach(function() { + _templateSrv.addTemplateParameter({ name: 'test', current: { value: 'oogle' } }); + }); + + it('should initialize template data', function() { + var target = _templateSrv.replace('this.[[test]].filters'); + expect(target).to.be('this.oogle.filters'); + }); + }); + + describe('updateTemplateData', function() { + beforeEach(function() { + _templateSrv.addTemplateParameter({ + name: 'test', + value: 'muuu', + current: { value: 'muuuu' } + }); + + _templateSrv.updateTemplateData(); + }); + + it('should set current value and update template data', function() { + var target = _templateSrv.replace('this.[[test]].filters'); + expect(target).to.be('this.muuuu.filters'); + }); + }); + + }); + +}); diff --git a/src/test/specs/timeSrv-specs.js b/src/test/specs/timeSrv-specs.js index cc2c4b0f158..615656afcdf 100644 --- a/src/test/specs/timeSrv-specs.js +++ b/src/test/specs/timeSrv-specs.js @@ -10,45 +10,15 @@ define([ var _dashboard; beforeEach(module('grafana.services')); - beforeEach(module(function() { - _dashboard = dashboardMock.create(); - })); - beforeEach(inject(function(timeSrv) { _timeSrv = timeSrv; + _dashboard = dashboardMock.create(); })); beforeEach(function() { _timeSrv.init(_dashboard); }); - describe('init', function() { - beforeEach(function() { - _timeSrv.addTemplateParameter({ name: 'test', current: { value: 'oogle' } }); - }); - - it('should initialize template data', function() { - var target = _timeSrv.applyTemplateToTarget('this.[[test]].filters'); - expect(target).to.be('this.oogle.filters'); - }); - }); - - describe('updateTemplateData', function() { - beforeEach(function() { - _timeSrv.addTemplateParameter({ - name: 'test', - value: 'muuu', - current: { value: 'muuuu' } - }); - - _timeSrv.updateTemplateData(); - }); - it('should set current value and update template data', function() { - var target = _timeSrv.applyTemplateToTarget('this.[[test]].filters'); - expect(target).to.be('this.muuuu.filters'); - }); - }); - describe('timeRange', function() { it('should return unparsed when parse is false', function() { _timeSrv.setTime({from: 'now', to: 'now-1h' }); @@ -67,18 +37,18 @@ define([ describe('setTime', function() { it('should return disable refresh for absolute times', function() { - _dashboard.refresh = true; + _dashboard.refresh = false; _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); }); it('should restore refresh after relative time range is set', function() { - _dashboard.refresh = true; + _dashboard.refresh = '10s'; _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); _timeSrv.setTime({from: '2011-01-01', to: 'now' }); - expect(_dashboard.refresh).to.be(true); + expect(_dashboard.refresh).to.be('10s'); }); }); diff --git a/src/test/test-main.js b/src/test/test-main.js index ed5a9cb3b63..dc477e9e2dc 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -126,6 +126,7 @@ require([ 'specs/grafanaGraph-specs', 'specs/seriesOverridesCtrl-specs', 'specs/timeSrv-specs', + 'specs/templateSrv-specs', 'specs/kbn-format-specs', 'specs/dashboardSrv-specs', 'specs/dashboardViewStateSrv-specs', From b761aad903752190def2875c96f3560569ccda29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Aug 2014 21:47:41 +0200 Subject: [PATCH 033/127] More work on filter/templating overhaul --- src/app/controllers/dashboardCtrl.js | 4 +- src/app/controllers/playlistCtrl.js | 1 - src/app/controllers/templateEditorCtrl.js | 13 ++- src/app/dashboards/scripted_templated.js | 96 +++++++++++++++++++++++ src/app/partials/templating_editor.html | 67 ++++++++++------ src/app/services/panelSrv.js | 1 - src/app/services/templateSrv.js | 10 +-- src/app/services/templateValuesSrv.js | 18 ++++- src/css/less/overrides.less | 2 + src/test/specs/templateSrv-specs.js | 10 +-- 10 files changed, 176 insertions(+), 46 deletions(-) create mode 100644 src/app/dashboards/scripted_templated.js diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 03cdddfbf7b..99b7a45a84f 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -15,7 +15,7 @@ function (angular, $, config, _) { $rootScope, dashboardKeybindings, timeSrv, - templateSrv, + templateValuesSrv, dashboardSrv, dashboardViewStateSrv, panelMoveSrv, @@ -51,7 +51,7 @@ function (angular, $, config, _) { $scope.grafana.style = $scope.dashboard.style; timeSrv.init($scope.dashboard); - templateSrv.init($scope.dashboard); + templateValuesSrv.init($scope.dashboard); $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; diff --git a/src/app/controllers/playlistCtrl.js b/src/app/controllers/playlistCtrl.js index ef605b48b7d..9e6a60013e2 100644 --- a/src/app/controllers/playlistCtrl.js +++ b/src/app/controllers/playlistCtrl.js @@ -13,7 +13,6 @@ function (angular, _, config) { $scope.init = function() { $scope.timespan = config.playlist_timespan; $scope.loadFavorites(); - $scope.$on('modal-opened', $scope.loadFavorites); }; $scope.loadFavorites = function() { diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 85c7d81f669..ae5a85be687 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -7,7 +7,7 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) { + module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, templateSrv, templateValuesSrv) { var replacementDefaults = { type: 'query', @@ -21,7 +21,7 @@ function (angular, _) { $scope.editor = { index: 0 }; $scope.datasources = datasourceSrv.getMetricSources(); $scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); - $scope.templateParameters = $scope.filter.templateParameters; + $scope.templateParameters = templateSrv.templateParameters; $scope.reset(); _.each($scope.templateParameters, function(param) { @@ -46,7 +46,7 @@ function (angular, _) { }; $scope.runQuery = function() { - $scope.filter.refreshTemplateParameter($scope.current); + templateValuesSrv.updateValuesFor($scope.current); }; $scope.edit = function(param) { @@ -71,6 +71,13 @@ function (angular, _) { $scope.current = angular.copy(replacementDefaults); }; + $scope.typeChanged = function () { + if ($scope.current.type === 'time period') { + $scope.current.options = ['auto', '1m', '10m', '30m', '1h', '6h', '12h', '1d', '7d', '14d', '30d']; + $scope.current.auto_count = 10; + } + }; + $scope.removeTemplateParam = function(templateParam) { var index = _.indexOf($scope.templateParameters, templateParam); $scope.templateParameters.splice(index, 1); diff --git a/src/app/dashboards/scripted_templated.js b/src/app/dashboards/scripted_templated.js new file mode 100644 index 00000000000..0ca4ea1fde8 --- /dev/null +++ b/src/app/dashboards/scripted_templated.js @@ -0,0 +1,96 @@ +/* global _ */ + +/* + * Complex scripted dashboard + * This script generates a dashboard object that Grafana can load. It also takes a number of user + * supplied URL parameters (int ARGS variable) + * + * Return a dashboard object, or a function + * + * For async scripts, return a function, this function must take a single callback function as argument, + * call this callback function with the dashboard object (look at scripted_async.js for an example) + */ + +'use strict'; + +// accessable variables in this scope +var window, document, ARGS, $, jQuery, moment, kbn; + +// Setup some variables +var dashboard, timspan; + +// All url parameters are available via the ARGS object +var ARGS; + +// Set a default timespan if one isn't specified +timspan = '1d'; + +// Intialize a skeleton with nothing but a rows array and service object +dashboard = { + rows : [], +}; + +// Set a title +dashboard.title = 'Scripted dash'; +dashboard.time = { + from: "now-" + (ARGS.from || timspan), + to: "now" +}; +dashboard.templating = { + enable: true, + list: [ + { + name: 'test', + query: 'apps.backend.*', + refresh: true, + options: [], + current: null, + }, + { + name: 'test2', + query: '*', + refresh: true, + options: [], + current: null, + } + ] +}; + +var rows = 1; +var seriesName = 'argName'; + +if(!_.isUndefined(ARGS.rows)) { + rows = parseInt(ARGS.rows, 10); +} + +if(!_.isUndefined(ARGS.name)) { + seriesName = ARGS.name; +} + +for (var i = 0; i < rows; i++) { + + dashboard.rows.push({ + title: 'Chart', + height: '300px', + panels: [ + { + title: 'Events', + type: 'graph', + span: 12, + fill: 1, + linewidth: 2, + targets: [ + { + 'target': "randomWalk('" + seriesName + "')" + }, + { + 'target': "randomWalk('[[test2]]')" + } + ], + } + ] + }); +} + + +return dashboard; diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 57a1f6ad7a5..0b8a229f122 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -54,38 +54,61 @@
      - +
      -
      +
      -
      - -
      -
      - - - +
      + +
      -
      -
      - - - +
      +
      + +
      +
      + + +
      +

      +
      + + This special type of template replacement is useful as the auto word will be calculated depending on the time range divided by + the number of periods you wish. +

      -
      -
      - -
        -
      • - {{option.text}} -
        • -
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + +
      +
      + +
      +
      + +
        +
      • + {{option.text}} +
        • +
      +
      diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index fd0c732f43b..43ce20bb28a 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -111,7 +111,6 @@ function (angular, _) { $scope.datasources = datasourceSrv.getMetricSources(); $scope.setDatasource($scope.panel.datasource); - $scope.dashboardViewState.registerPanel($scope); if ($scope.get_data) { diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 5958cfeae6a..3cf9714c542 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -11,10 +11,9 @@ function (angular, _) { module.service('templateSrv', function($q, $routeParams) { - this.init = function(dashboard) { - this.dashboard = dashboard; + this.init = function(templateParameters) { this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; - this.templateParameters = dashboard.templating.list; + this.templateParameters = templateParameters; this.updateTemplateData(true); }; @@ -35,11 +34,6 @@ function (angular, _) { this._templateData = _templateData; }; - this.addTemplateParameter = function(templateParameter) { - this.templateParameters.push(templateParameter); - this.updateTemplateData(); - }; - this.replace = function(target) { if (!target || target.indexOf('[[') === -1) { return target; diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 0b6c4f20edf..639acf285d7 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -12,6 +12,19 @@ function (angular, _) { module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $routeParams, templateSrv) { var self = this; + this.init = function(dashboard) { + this.templateParameters = dashboard.templating.list; + + templateSrv.init(this.templateParameters); + + for (var i = 0; i < this.templateParameters.length; i++) { + var param = this.templateParameters[i]; + if (param.refresh) { + this.updateValuesFor(param); + } + } + }; + this.filterOptionSelected = function(templateParameter, option, recursive) { templateParameter.current = option; @@ -38,8 +51,9 @@ function (angular, _) { return $q.all(promises); }; - this.applyFilter = function(templateParam) { - return datasourceSrv.default.metricFindQuery(templateParam.query) + this.updateValuesFor = function(templateParam) { + var datasource = datasourceSrv.get(templateParam.datasource); + return datasource.metricFindQuery(templateParam.query) .then(function (results) { templateParam.options = _.map(results, function(node) { return { text: node.text, value: node.text }; diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 59e30d264c7..5a767e3c3ef 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -142,11 +142,13 @@ div.editor-row div.section { vertical-align: top; display: inline-block; } + div.editor-option { vertical-align: top; display: inline-block; margin-right: 10px; } + div.editor-option label { display: block; } diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index e57ce40fa3e..ee02ed41e4e 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -18,13 +18,9 @@ define([ _templateSrv = templateSrv; })); - beforeEach(function() { - _templateSrv.init(_dashboard); - }); - describe('init', function() { beforeEach(function() { - _templateSrv.addTemplateParameter({ name: 'test', current: { value: 'oogle' } }); + _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); }); it('should initialize template data', function() { @@ -35,11 +31,11 @@ define([ describe('updateTemplateData', function() { beforeEach(function() { - _templateSrv.addTemplateParameter({ + _templateSrv.init([{ name: 'test', value: 'muuu', current: { value: 'muuuu' } - }); + }]); _templateSrv.updateTemplateData(); }); From f9cd4a4470a5f2f571e9fe23bff086303b512ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Aug 2014 12:44:01 +0200 Subject: [PATCH 034/127] More work on templating, added an embry of a dashboard json edit view --- src/app/controllers/dashboardNavCtrl.js | 8 +- src/app/controllers/jsonEditorCtrl.js | 14 ++++ src/app/controllers/submenuCtrl.js | 6 +- src/app/controllers/templateEditorCtrl.js | 29 +++---- src/app/directives/all.js | 1 + src/app/directives/templateParamSelector.js | 85 +++++++++++++++++++++ src/app/partials/dashboard_topnav.html | 3 + src/app/partials/edit_json.html | 18 +++++ src/app/partials/submenu.html | 23 +++--- src/app/partials/templating_editor.html | 20 ++--- src/app/services/templateSrv.js | 14 ++-- src/app/services/templateValuesSrv.js | 56 ++++++++------ src/test/specs/templateValuesSrv-specs.js | 45 +++++++++++ src/test/test-main.js | 1 + 14 files changed, 250 insertions(+), 73 deletions(-) create mode 100644 src/app/controllers/jsonEditorCtrl.js create mode 100644 src/app/directives/templateParamSelector.js create mode 100644 src/app/partials/edit_json.html create mode 100644 src/test/specs/templateValuesSrv-specs.js diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index a0d32a97343..2d1840331c2 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -111,8 +111,6 @@ function (angular, _, moment, config, store) { window.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime()); }; - // function $scope.zoom - // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan $scope.zoom = function(factor) { var _range = timeSrv.timeRange(); var _timespan = (_range.to.valueOf() - _range.from.valueOf()); @@ -138,6 +136,12 @@ function (angular, _, moment, config, store) { $scope.grafana.style = $scope.dashboard.style; }; + $scope.editJson = function() { + var editScope = $rootScope.$new(); + editScope.json = angular.toJson($scope.dashboard, true); + $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope }); + }; + $scope.openSaveDropdown = function() { $scope.isFavorite = playlistSrv.isCurrentFavorite($scope.dashboard); $scope.saveDropdownOpened = true; diff --git a/src/app/controllers/jsonEditorCtrl.js b/src/app/controllers/jsonEditorCtrl.js new file mode 100644 index 00000000000..926e46e1694 --- /dev/null +++ b/src/app/controllers/jsonEditorCtrl.js @@ -0,0 +1,14 @@ +define([ + 'angular', + 'lodash' +], +function (angular) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + + module.controller('JsonEditorCtrl', function() { + + }); + +}); diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index dcc147d49d9..a1067ee70ac 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -18,7 +18,7 @@ function (angular, app, _) { $scope.init = function() { $scope.panel = $scope.pulldown; $scope.row = $scope.pulldown; - $scope.templateParameters = $scope.dashboard.templating.list; + $scope.variables = $scope.dashboard.templating.list; }; $scope.disableAnnotation = function (annotation) { @@ -26,8 +26,8 @@ function (angular, app, _) { $rootScope.$broadcast('refresh'); }; - $scope.filterOptionSelected = function(param, option) { - templateValuesSrv.filterOptionSelected(param, option); + $scope.setVariableValue = function(param, option) { + templateValuesSrv.setVariableValue(param, option); }; $scope.init(); diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index ae5a85be687..4fc3a996d17 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -21,13 +21,13 @@ function (angular, _) { $scope.editor = { index: 0 }; $scope.datasources = datasourceSrv.getMetricSources(); $scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); - $scope.templateParameters = templateSrv.templateParameters; + $scope.variables = templateSrv.variables; $scope.reset(); - _.each($scope.templateParameters, function(param) { - if (param.datasource === void 0) { - param.datasource = null; - param.type = 'query'; + _.each($scope.variables, function(variable) { + if (variable.datasource === void 0) { + variable.datasource = null; + variable.type = 'query'; } }); @@ -40,19 +40,19 @@ function (angular, _) { $scope.add = function() { $scope.current.datasource = $scope.currentDatasource.name; - $scope.templateParameters.push($scope.current); + $scope.variables.push($scope.current); $scope.reset(); $scope.editor.index = 0; }; $scope.runQuery = function() { - templateValuesSrv.updateValuesFor($scope.current); + templateValuesSrv.updateOptions($scope.current); }; - $scope.edit = function(param) { - $scope.current = param; + $scope.edit = function(variable) { + $scope.current = variable; $scope.currentIsNew = false; - $scope.currentDatasource = _.findWhere($scope.datasources, { name: param.datasource }); + $scope.currentDatasource = _.findWhere($scope.datasources, { name: variable.datasource }); if (!$scope.currentDatasource) { $scope.currentDatasource = $scope.datasources[0]; @@ -62,6 +62,7 @@ function (angular, _) { }; $scope.update = function() { + templateValuesSrv.updateOptions($scope.current); $scope.reset(); $scope.editor.index = 0; }; @@ -73,14 +74,14 @@ function (angular, _) { $scope.typeChanged = function () { if ($scope.current.type === 'time period') { - $scope.current.options = ['auto', '1m', '10m', '30m', '1h', '6h', '12h', '1d', '7d', '14d', '30d']; + $scope.current.query = 'auto,1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; $scope.current.auto_count = 10; } }; - $scope.removeTemplateParam = function(templateParam) { - var index = _.indexOf($scope.templateParameters, templateParam); - $scope.templateParameters.splice(index, 1); + $scope.removeVariable = function(variable) { + var index = _.indexOf($scope.variables, variable); + $scope.variables.splice(index, 1); }; }); diff --git a/src/app/directives/all.js b/src/app/directives/all.js index 8e3996f03be..f6051da8caa 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -15,6 +15,7 @@ define([ './bodyClass', './addGraphiteFunc', './graphiteFuncEditor', + './templateParamSelector', './grafanaVersionCheck', './influxdbFuncEditor' ], function () {}); diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js new file mode 100644 index 00000000000..52ebd00badc --- /dev/null +++ b/src/app/directives/templateParamSelector.js @@ -0,0 +1,85 @@ +define([ + 'angular', + 'app', + 'lodash', + 'jquery', +], +function (angular, app, _, $) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('templateParamSelector', function($compile) { + var inputTemplate = ''; + + var buttonTemplate = '{{variable.current.text}}'; + + return { + link: function($scope, elem) { + var $input = $(inputTemplate); + var $button = $(buttonTemplate); + var variable = $scope.variable; + var options = _.map(variable.options, function(option) { + return option.text; + }); + + $input.appendTo(elem); + $button.appendTo(elem); + + function updateVariableValue(value) { + $scope.$apply(function() { + var selected = _.findWhere(variable.options, { text: value }); + if (!selected) { + selected = { text: value, value: value }; + } + $scope.setVariableValue($scope.variable, selected); + }); + } + + $input.attr('data-provide', 'typeahead'); + $input.typeahead({ + source: options, + minLength: 0, + items: 10, + updater: function(value) { + updateVariableValue(value); + $input.trigger('blur'); + return ''; + } + }); + + var typeahead = $input.data('typeahead'); + typeahead.lookup = function () { + this.query = this.$element.val() || ''; + return this.process(this.source); + }; + + $button.click(function() { + $input.css('width', ($button.width() + 16) + 'px'); + + $button.hide(); + $input.show(); + $input.focus(); + + var typeahead = $input.data('typeahead'); + if (typeahead) { + $input.val(''); + typeahead.lookup(); + } + + }); + + $input.blur(function() { + if ($input.val() !== '') { updateVariableValue($input.val()); } + $input.hide(); + $button.show(); + $button.focus(); + }); + + $compile(elem.contents())($scope); + } + }; + }); +}); diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index bfeb3339b99..70b3f9cd159 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -46,6 +46,9 @@
    • Remove as favorite
      • +
    • + Edit Json +
    • Export dashboard
      • diff --git a/src/app/partials/edit_json.html b/src/app/partials/edit_json.html new file mode 100644 index 00000000000..98c546971df --- /dev/null +++ b/src/app/partials/edit_json.html @@ -0,0 +1,18 @@ +
      + +
      +
      + + Edit / View JSON +
      +
      + +
      + +
      + +
      + +
      + +
      diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 2d5c3e1831d..b4ab6e6f226 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -18,21 +18,18 @@
      -
    • - {{param.name}}: +
    • + VARIABLES +
      • +
    • + {{variable.name}}:
      • -
    • -
      - - {{param.current.text}} - - -
      +
    • +
      • + +
    • + ANNOTATIONS
    • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 0b8a229f122..42dfe527399 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -17,25 +17,25 @@
      -
      +
      No replacements defined
      - + @@ -49,7 +49,7 @@
      - +
      @@ -69,7 +69,7 @@
      - +
      @@ -86,7 +86,7 @@
      - +
      @@ -102,7 +102,7 @@
      - +
      • {{option.text}} diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 3cf9714c542..6f1ab07ff41 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -11,25 +11,25 @@ function (angular, _) { module.service('templateSrv', function($q, $routeParams) { - this.init = function(templateParameters) { + this.init = function(variables) { this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; - this.templateParameters = templateParameters; + this.variables = variables; this.updateTemplateData(true); }; this.updateTemplateData = function(initial) { var _templateData = {}; - _.each(this.templateParameters, function(templateParameter) { + _.each(this.variables, function(variable) { if (initial) { - var urlValue = $routeParams[ templateParameter.name ]; + var urlValue = $routeParams[ variable.name ]; if (urlValue) { - templateParameter.current = { text: urlValue, value: urlValue }; + variable.current = { text: urlValue, value: urlValue }; } } - if (!templateParameter.current || !templateParameter.current.value) { + if (!variable.current || !variable.current.value) { return; } - _templateData[templateParameter.name] = templateParameter.current.value; + _templateData[variable.name] = variable.current.value; }); this._templateData = _templateData; }; diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 639acf285d7..a076fef1028 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -13,24 +13,24 @@ function (angular, _) { var self = this; this.init = function(dashboard) { - this.templateParameters = dashboard.templating.list; + this.variables = dashboard.templating.list; - templateSrv.init(this.templateParameters); + templateSrv.init(this.variables); - for (var i = 0; i < this.templateParameters.length; i++) { - var param = this.templateParameters[i]; + for (var i = 0; i < this.variables.length; i++) { + var param = this.variables[i]; if (param.refresh) { - this.updateValuesFor(param); + this.updateOptions(param); } } }; - this.filterOptionSelected = function(templateParameter, option, recursive) { - templateParameter.current = option; + this.setVariableValue = function(variable, option, recursive) { + variable.current = option; templateSrv.updateTemplateData(); - return this.applyFilterToOtherFilters(templateParameter) + return this.applyFilterToOtherFilters(variable) .then(function() { if (!recursive) { $rootScope.$broadcast('refresh'); @@ -38,46 +38,54 @@ function (angular, _) { }); }; - this.applyFilterToOtherFilters = function(updatedTemplatedParam) { - var promises = _.map(self.templateParameters, function(templateParam) { - if (templateParam === updatedTemplatedParam) { + this.applyFilterToOtherFilters = function(updatedVariable) { + var promises = _.map(self.variables, function(otherVariable) { + if (otherVariable === updatedVariable) { return; } - if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) { - return self.applyFilter(templateParam); + if (otherVariable.query.indexOf('[[' + updatedVariable.name + ']]') !== -1) { + return self.updateOptions(otherVariable); } }); return $q.all(promises); }; - this.updateValuesFor = function(templateParam) { - var datasource = datasourceSrv.get(templateParam.datasource); - return datasource.metricFindQuery(templateParam.query) + this.updateOptions = function(variable) { + if (variable.type === 'time period') { + variable.options = _.map(variable.query.split(','), function(text) { + return { text: text, value: text }; + }); + self.setVariableValue(variable, variable.options[0]); + return; + } + + var datasource = datasourceSrv.get(variable.datasource); + return datasource.metricFindQuery(variable.query) .then(function (results) { - templateParam.options = _.map(results, function(node) { + variable.options = _.map(results, function(node) { return { text: node.text, value: node.text }; }); - if (templateParam.includeAll) { + if (variable.includeAll) { var allExpr = '{'; - _.each(templateParam.options, function(option) { + _.each(variable.options, function(option) { allExpr += option.text + ','; }); allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; - templateParam.options.unshift({text: 'All', value: allExpr}); + variable.options.unshift({text: 'All', value: allExpr}); } // if parameter has current value // if it exists in options array keep value - if (templateParam.current) { - var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value }); + if (variable.current) { + var currentExists = _.findWhere(variable.options, { value: variable.current.value }); if (currentExists) { - return self.filterOptionSelected(templateParam, templateParam.current, true); + return self.setVariableValue(variable, variable.current, true); } } - return self.filterOptionSelected(templateParam, templateParam.options[0], true); + return self.setVariableValue(variable, variable.options[0], true); }); }; diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js new file mode 100644 index 00000000000..0486dfed73b --- /dev/null +++ b/src/test/specs/templateValuesSrv-specs.js @@ -0,0 +1,45 @@ +define([ + 'mocks/dashboard-mock', + 'lodash', + 'services/templateValuesSrv' +], function(dashboardMock) { + 'use strict'; + + describe('templateValuesSrv', function() { + var _templateValuesSrv; + var _dashboard; + + beforeEach(module('grafana.services')); + beforeEach(module(function($provide) { + $provide.value('datasourceSrv', {}); + $provide.value('templateSrv', { + updateTemplateData: function() {} + }); + _dashboard = dashboardMock.create(); + })); + + beforeEach(inject(function(templateValuesSrv) { + _templateValuesSrv = templateValuesSrv; + })); + + describe('update time period variable options', function() { + var variable = { + type: 'time period', + query: 'auto,1s,2h,5h,1d', + name: 'test' + }; + + beforeEach(function() { + _templateValuesSrv.updateOptions(variable); + }); + + it('should update options array', function() { + expect(variable.options.length).to.be(5); + expect(variable.options[1].text).to.be('1s'); + expect(variable.options[1].value).to.be('1s'); + }); + }); + + }); + +}); diff --git a/src/test/test-main.js b/src/test/test-main.js index dc477e9e2dc..d75fe2ebd99 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -127,6 +127,7 @@ require([ 'specs/seriesOverridesCtrl-specs', 'specs/timeSrv-specs', 'specs/templateSrv-specs', + 'specs/templateValuesSrv-specs', 'specs/kbn-format-specs', 'specs/dashboardSrv-specs', 'specs/dashboardViewStateSrv-specs', From 685a2fec6ce29d323f10a9ed5cddfc854639f05f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Aug 2014 16:03:13 +0200 Subject: [PATCH 035/127] trying to get new templating / filtering to work --- src/app/controllers/graphiteTarget.js | 6 +++--- src/app/controllers/templateEditorCtrl.js | 6 ++++-- src/app/directives/templateParamSelector.js | 7 ++----- src/app/partials/templating_editor.html | 12 +----------- src/app/services/elasticsearch/es-datasource.js | 6 +++--- src/app/services/templateSrv.js | 7 +++++-- src/css/less/variables.dark.less | 2 +- src/test/specs/helpers.js | 8 ++++++++ src/test/specs/templateSrv-specs.js | 9 ++------- 9 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 2e16c9f423e..aebc297b278 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -10,7 +10,7 @@ function (angular, _, config, gfunc, Parser) { var module = angular.module('grafana.controllers'); - module.controller('GraphiteTargetCtrl', function($scope, $sce) { + module.controller('GraphiteTargetCtrl', function($scope, $sce, templateSrv) { $scope.init = function() { $scope.target.target = $scope.target.target || ''; @@ -153,10 +153,10 @@ function (angular, _, config, gfunc, Parser) { return new MetricSegment({ value: segment.text, expandable: segment.expandable }); }); - _.each($scope.filter.templateParameters, function(templateParameter) { + _.each(templateSrv.variables, function(variable) { $scope.altSegments.unshift(new MetricSegment({ type: 'template', - value: '[[' + templateParameter.name + ']]', + value: '[[' + variable.name + ']]', expandable: true, })); }); diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 4fc3a996d17..731bd433968 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -74,8 +74,10 @@ function (angular, _) { $scope.typeChanged = function () { if ($scope.current.type === 'time period') { - $scope.current.query = 'auto,1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; - $scope.current.auto_count = 10; + $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; + } + else { + $scope.current.query = ''; } }; diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index 52ebd00badc..106f5f9ee0b 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -21,9 +21,6 @@ function (angular, app, _, $) { var $input = $(inputTemplate); var $button = $(buttonTemplate); var variable = $scope.variable; - var options = _.map(variable.options, function(option) { - return option.text; - }); $input.appendTo(elem); $button.appendTo(elem); @@ -40,7 +37,6 @@ function (angular, app, _, $) { $input.attr('data-provide', 'typeahead'); $input.typeahead({ - source: options, minLength: 0, items: 10, updater: function(value) { @@ -52,8 +48,9 @@ function (angular, app, _, $) { var typeahead = $input.data('typeahead'); typeahead.lookup = function () { + var options = _.map(variable.options, function(option) { return option.text; }); this.query = this.$element.val() || ''; - return this.process(this.source); + return this.process(options); }; $button.click(function() { diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 42dfe527399..15fff2b0492 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -5,7 +5,7 @@
      -
      +
      @@ -71,16 +71,6 @@
      -
      - - -
      -

      -
      - - This special type of template replacement is useful as the auto word will be calculated depending on the time range divided by - the number of periods you wish. -

      diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 8b499c75af1..34db3b50d8a 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -11,7 +11,7 @@ function (angular, _, $, config, kbn, moment) { var module = angular.module('grafana.services'); - module.factory('ElasticDatasource', function($q, $http) { + module.factory('ElasticDatasource', function($q, $http, templateSrv) { function ElasticDatasource(datasource) { this.type = 'elastic'; @@ -60,7 +60,7 @@ function (angular, _, $, config, kbn, moment) { }); }; - ElasticDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) { + ElasticDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var range = {}; var timeField = annotation.timeField || '@timestamp'; var queryString = annotation.query || '*'; @@ -73,7 +73,7 @@ function (angular, _, $, config, kbn, moment) { to: rangeUnparsed.to, }; - var queryInterpolated = filterSrv.applyTemplateToTarget(queryString); + var queryInterpolated = templateSrv.replace(queryString); var filter = { "bool": { "must": [{ "range": range }] } }; var query = { "bool": { "should": [{ "query_string": { "query": queryInterpolated } }] } }; var data = { "query" : { "filtered": { "query" : query, "filter": filter } }, "size": 100 }; diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 6f1ab07ff41..187ecabf54a 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -2,14 +2,15 @@ define([ 'angular', 'lodash', 'kbn', - 'store' + 'config' ], -function (angular, _) { +function (angular, _, kbn, config) { 'use strict'; var module = angular.module('grafana.services'); module.service('templateSrv', function($q, $routeParams) { + var self = this; this.init = function(variables) { this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; @@ -29,7 +30,9 @@ function (angular, _) { if (!variable.current || !variable.current.value) { return; } + _templateData[variable.name] = variable.current.value; + }); this._templateData = _templateData; }; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 048ffd1a689..34863951190 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -6,7 +6,7 @@ // ------------------------- @black: #000; @gray: #bbb; -@grayDark: #242424; +@grayDark: #262626; @grayDarker: #1f1f1f; @grayLight: #ADAFAE; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index bdc358d009d..9b08c02e2f6 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -9,6 +9,7 @@ define([ this.datasource = {}; this.annotationsSrv = {}; this.timeSrv = new TimeSrvStub(); + this.templateSrv = new TemplateSrvStub(); this.datasourceSrv = { getMetricSources: function() {}, get: function() { return self.datasource; } @@ -19,6 +20,7 @@ define([ $provide.value('datasourceSrv', self.datasourceSrv); $provide.value('annotationsSrv', self.annotationsSrv); $provide.value('timeSrv', self.timeSrv); + $provide.value('templateSrv', self.templateSrv); }); }; @@ -78,6 +80,12 @@ define([ }; } + function TemplateSrvStub() { + this.variables = []; + this.replace = function() {}; + } + + return { ControllerTestContext: ControllerTestContext, diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index ee02ed41e4e..c97f2e2caf4 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -29,14 +29,9 @@ define([ }); }); - describe('updateTemplateData', function() { + describe('updateTemplateData with simple value', function() { beforeEach(function() { - _templateSrv.init([{ - name: 'test', - value: 'muuu', - current: { value: 'muuuu' } - }]); - + _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); _templateSrv.updateTemplateData(); }); From 12e2bf2f859b72f84c7387268cd34133c53fc818 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Aug 2014 16:44:16 +0200 Subject: [PATCH 036/127] Trying to restore broken features and some polishing --- src/app/controllers/dashboardCtrl.js | 26 +++++++++--------- src/app/partials/annotations_editor.html | 34 +++++++++++++++--------- src/app/partials/dasheditor.html | 25 +++++++++++------ src/app/partials/submenu.html | 5 ++-- src/app/partials/templating_editor.html | 2 ++ src/app/services/panelMove.js | 10 +++++-- src/app/services/templateSrv.js | 5 +--- 7 files changed, 65 insertions(+), 42 deletions(-) diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 99b7a45a84f..346c25ec1a4 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -48,28 +48,22 @@ function (angular, $, config, _) { $scope.dashboard = dashboardSrv.create(dashboardData); $scope.dashboardViewState = dashboardViewStateSrv.create($scope); - $scope.grafana.style = $scope.dashboard.style; - + // init services timeSrv.init($scope.dashboard); templateValuesSrv.init($scope.dashboard); + panelMoveSrv.init($scope.dashboard, $scope); - $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; - - var panelMove = panelMoveSrv.create($scope.dashboard); - - $scope.panelMoveDrop = panelMove.onDrop; - $scope.panelMoveStart = panelMove.onStart; - $scope.panelMoveStop = panelMove.onStop; - $scope.panelMoveOver = panelMove.onOver; - $scope.panelMoveOut = panelMove.onOut; - - window.document.title = config.window_title_prefix + $scope.dashboard.title; - + $scope.checkFeatureToggles(); dashboardKeybindings.shortcuts($scope); $scope.emitAppEvent("dashboard-loaded", $scope.dashboard); }; + $scope.setWindowTitleAndTheme = function() { + window.document.title = config.window_title_prefix + $scope.dashboard.title; + $scope.grafana.style = $scope.dashboard.style; + }; + $scope.isPanel = function(obj) { if(!_.isNull(obj) && !_.isUndefined(obj) && !_.isUndefined(obj.type)) { return true; @@ -113,6 +107,10 @@ function (angular, $, config, _) { } }; + $scope.checkFeatureToggles = function() { + $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; + }; + $scope.setEditorTabs = function(panelMeta) { $scope.editorTabs = ['General','Panel']; if(!_.isUndefined(panelMeta.editorTabs)) { diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index f6aca707f46..f23a425e9c6 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -14,20 +14,30 @@
      -
      -
      - [[{{templateParam.name}}]] + [[{{variable.name}}]] - {{templateParam.query}} + {{variable.query}} - + Edit - +
      - - + + + + + +
      - +
      +
      + + + - - - - -
      {{annotation.name}} - -
      +
      		+ + + Edit + + + + + +
      +
      diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 8bee04121b4..30c43704f8b 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -49,14 +49,19 @@
      -
      -
      Rows
      - +
      +
      + - - +
      + {{row.title}} + {{row.title}} + + + +
      @@ -66,9 +71,13 @@
      -
      Feature toggles
      -
      - +
      + + +
      +
      + +
      diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index b4ab6e6f226..b1fb5f85267 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -17,7 +17,7 @@
    -
      +
      • VARIABLES
        • @@ -27,7 +27,9 @@
        • +
      +
      • ANNOTATIONS
        • @@ -38,7 +40,6 @@ {{annotation.name}} -
      diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 15fff2b0492..345ba8a5003 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -34,6 +34,8 @@ Edit
    		diff --git a/src/app/services/panelMove.js b/src/app/services/panelMove.js index 5dcd5c028c2..aa32400e907 100644 --- a/src/app/services/panelMove.js +++ b/src/app/services/panelMove.js @@ -69,8 +69,14 @@ function (angular, _) { }; return { - create: function(dashboard) { - return new PanelMoveSrv(dashboard); + init: function(dashboard, scope) { + var panelMove = new PanelMoveSrv(dashboard); + + scope.panelMoveDrop = panelMove.onDrop; + scope.panelMoveStart = panelMove.onStart; + scope.panelMoveStop = panelMove.onStop; + scope.panelMoveOver = panelMove.onOver; + scope.panelMoveOut = panelMove.onOut; } }; diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 187ecabf54a..1cf1e832606 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -1,16 +1,13 @@ define([ 'angular', 'lodash', - 'kbn', - 'config' ], -function (angular, _, kbn, config) { +function (angular, _) { 'use strict'; var module = angular.module('grafana.services'); module.service('templateSrv', function($q, $routeParams) { - var self = this; this.init = function(variables) { this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; From 20607c00b1a4af5fe1801ec924eb76ec119a2b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 08:44:38 +0200 Subject: [PATCH 037/127] Fixed playlist pane not showing after modal removal change --- src/app/directives/dashEditLink.js | 3 ++- src/app/partials/search.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index d772cdaf0b2..70aaf897538 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -15,7 +15,8 @@ function (angular, $) { elem.bind('click',function() { $timeout(function() { - scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope }); + var editorScope = attrs.editorScope === 'isolated' ? null : scope; + scope.emitAppEvent('show-dash-editor', { src: partial, scope: editorScope }); }); }); } diff --git a/src/app/partials/search.html b/src/app/partials/search.html index ad47e68a336..c6785b9ceb8 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -20,7 +20,7 @@
    - From f9b0ce0f75e7a972c6bb9b041f0a808bda1af757 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 09:59:18 +0200 Subject: [PATCH 038/127] Fixes to annotations editor --- src/app/controllers/annotationsEditorCtrl.js | 27 ++++++++-------- src/app/partials/annotations_editor.html | 9 +++--- src/app/partials/roweditor.html | 33 +++++++++++--------- 3 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js index 5234e429206..9b6da497dce 100644 --- a/src/app/controllers/annotationsEditorCtrl.js +++ b/src/app/controllers/annotationsEditorCtrl.js @@ -20,15 +20,10 @@ function (angular, _, $) { }; $scope.init = function() { - $scope.currentAnnotation = angular.copy(annotationDefaults); - $scope.currentIsNew = true; $scope.editor = { index: 0 }; $scope.datasources = datasourceSrv.getAnnotationSources(); $scope.annotations = $scope.dashboard.annotations.list; - - if ($scope.datasources.length > 0) { - $scope.currentDatasource = $scope.datasources[0]; - } + $scope.reset(); $scope.$watch('editor.index', function(newVal) { if (newVal !== 2) { @@ -37,18 +32,17 @@ function (angular, _, $) { }); }; - $scope.setDatasource = function() { - $scope.currentAnnotation.datasource = $scope.currentDatasource.name; + $scope.datasourceChanged = function() { + $scope.currentDatasource = _.findWhere($scope.datasources, { name: $scope.currentAnnotation.datasource }); + if (!$scope.currentDatasource) { + $scope.currentDatasource = $scope.datasources[0]; + } }; $scope.edit = function(annotation) { $scope.currentAnnotation = annotation; $scope.currentIsNew = false; - $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource }); - - if (!$scope.currentDatasource) { - $scope.currentDatasource = $scope.datasources[0]; - } + $scope.datasourceChanged(); $scope.editor.index = 2; $(".tooltip.in").remove(); @@ -57,6 +51,13 @@ function (angular, _, $) { $scope.reset = function() { $scope.currentAnnotation = angular.copy(annotationDefaults); $scope.currentIsNew = true; + $scope.datasourceChanged(); + $scope.currentAnnotation.datasource = $scope.currentDatasource.name; + }; + + $scope.update = function() { + $scope.reset(); + $scope.editor.index = 0; }; $scope.add = function() { diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index f23a425e9c6..cb9db2244d6 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -19,7 +19,7 @@ @@ -48,7 +48,7 @@
    - +
    @@ -71,11 +71,12 @@
    -
    + +
    diff --git a/src/app/partials/roweditor.html b/src/app/partials/roweditor.html index af8c5405999..032163ea64b 100644 --- a/src/app/partials/roweditor.html +++ b/src/app/partials/roweditor.html @@ -29,29 +29,32 @@
    -

    Panels

    -
    - +   {{annotation.name}} @@ -31,7 +31,7 @@ - +
    +
    - - - + + + - + - - - - - -
    Title TypeSpan ({{dashboard.rowSpan(row)}}/12)DeleteMoveSpan
    {{panel.title}}{{panel.title}} {{panel.type}}
    -
    -
    +     		+ + + +
    +
    +
    - +
    From 61a618e4739900a6a70daa1651b9097d1783a214 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 10:17:00 +0200 Subject: [PATCH 039/127] fixes to templating --- src/app/controllers/dashboardNavCtrl.js | 6 +++--- src/app/controllers/templateEditorCtrl.js | 11 +---------- src/app/partials/templating_editor.html | 2 +- 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index 94b683e54fa..6f08ffb255e 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -127,9 +127,9 @@ function (angular, _, moment, config, store) { to = Date.now(); } - $scope.filter.setTime({ - from:moment.utc(from).toDate(), - to:moment.utc(to).toDate(), + timeSrv.setTime({ + from: moment.utc(from).toDate(), + to: moment.utc(to).toDate(), }); }; diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 731bd433968..16d388b97fd 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -20,7 +20,6 @@ function (angular, _) { $scope.init = function() { $scope.editor = { index: 0 }; $scope.datasources = datasourceSrv.getMetricSources(); - $scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); $scope.variables = templateSrv.variables; $scope.reset(); @@ -39,10 +38,8 @@ function (angular, _) { }; $scope.add = function() { - $scope.current.datasource = $scope.currentDatasource.name; $scope.variables.push($scope.current); - $scope.reset(); - $scope.editor.index = 0; + $scope.update(); }; $scope.runQuery = function() { @@ -52,12 +49,6 @@ function (angular, _) { $scope.edit = function(variable) { $scope.current = variable; $scope.currentIsNew = false; - $scope.currentDatasource = _.findWhere($scope.datasources, { name: variable.datasource }); - - if (!$scope.currentDatasource) { - $scope.currentDatasource = $scope.datasources[0]; - } - $scope.editor.index = 2; }; diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 345ba8a5003..f930e153dd8 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -18,7 +18,7 @@
    - No replacements defined + No template variables defined
    From 3185db96096285c39b454655d4540e4efbb1ff0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 12:34:04 +0200 Subject: [PATCH 040/127] new template system is starting to work 100%, not all features are in, like regex selection, influxdb support, and other stuff --- src/app/controllers/templateEditorCtrl.js | 15 +-- src/app/partials/templating_editor.html | 112 ++++++++++++--------- src/app/services/dashboard/dashboardSrv.js | 21 ++-- src/app/services/templateValuesSrv.js | 27 +++-- src/css/less/tables_lists.less | 31 +++++- src/test/specs/dashboardSrv-specs.js | 3 +- 6 files changed, 137 insertions(+), 72 deletions(-) diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 16d388b97fd..649fefc7cfa 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -15,6 +15,8 @@ function (angular, _) { refresh_on_load: false, name: '', options: [], + includeAll: false, + allFormat: 'Glob', }; $scope.init = function() { @@ -23,13 +25,6 @@ function (angular, _) { $scope.variables = templateSrv.variables; $scope.reset(); - _.each($scope.variables, function(variable) { - if (variable.datasource === void 0) { - variable.datasource = null; - variable.type = 'query'; - } - }); - $scope.$watch('editor.index', function(index) { if ($scope.currentIsNew === false && index === 1) { $scope.reset(); @@ -50,6 +45,12 @@ function (angular, _) { $scope.current = variable; $scope.currentIsNew = false; $scope.editor.index = 2; + + if ($scope.current.datasource === void 0) { + $scope.current.datasource = null; + $scope.current.type = 'query'; + $scope.current.allFormat = 'Glob'; + } }; $scope.update = function() { diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index f930e153dd8..61aa68fbeda 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -49,57 +49,77 @@
    -
    +
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    -
    -
    - - -
    -
    +
    +
    + + +
    +
    -
    -
    -
    - - - +
    +
    +
    + + + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    - -
    -
    - - - -
    -
    - -
    -
    - -
      -
    • - {{option.text}} -
      • -
    +
    +
    +
    + +
      +
    • + {{option.text}} +
      • +
    +
    diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index e88092a4c16..c618e5074da 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -116,11 +116,12 @@ function (angular, $, kbn, _, moment) { }; p.updateSchema = function(old) { + var i, j, k; var oldVersion = this.version; var panelUpgrades = []; - this.version = 5; + this.version = 6; - if (oldVersion === 5) { + if (oldVersion === 6) { return; } @@ -195,7 +196,7 @@ function (angular, $, kbn, _, moment) { }); } - if (oldVersion < 5) { + if (oldVersion < 6) { // move pulldowns to new schema var filtering = _.findWhere(old.pulldowns, { type: 'filtering' }); var annotations = _.findWhere(old.pulldowns, { type: 'annotations' }); @@ -208,16 +209,24 @@ function (angular, $, kbn, _, moment) { enable: annotations.enable }; } + + // update template variables + for (i = 0 ; i < this.templating.list.length; i++) { + var variable = this.templating.list[i]; + if (variable.datasource === void 0) { variable.datasource = null; } + if (variable.type === void 0) { variable.type = 'query'; } + if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; } + } } if (panelUpgrades.length === 0) { return; } - for (var i = 0; i < this.rows.length; i++) { + for (i = 0; i < this.rows.length; i++) { var row = this.rows[i]; - for (var j = 0; j < row.panels.length; j++) { - for (var k = 0; k < panelUpgrades.length; k++) { + for (j = 0; j < row.panels.length; j++) { + for (k = 0; k < panelUpgrades.length; k++) { panelUpgrades[k](row.panels[j]); } } diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index a076fef1028..fd766d07700 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -68,12 +68,7 @@ function (angular, _) { }); if (variable.includeAll) { - var allExpr = '{'; - _.each(variable.options, function(option) { - allExpr += option.text + ','; - }); - allExpr = allExpr.substring(0, allExpr.length - 1) + '}'; - variable.options.unshift({text: 'All', value: allExpr}); + self.addAllOption(variable); } // if parameter has current value @@ -89,6 +84,26 @@ function (angular, _) { }); }; + this.addAllOption = function(variable) { + var allValue = ''; + switch(variable.allFormat) { + case 'wildcard': + allValue = '*'; + break; + case 'regex wildcard': + allValue = '.*'; + break; + default: + allValue = '{'; + _.each(variable.options, function(option) { + allValue += option.text + ','; + }); + allValue = allValue.substring(0, allValue.length - 1) + '}'; + } + + variable.options.unshift({text: 'All', value: allValue}); + }; + }); }); diff --git a/src/css/less/tables_lists.less b/src/css/less/tables_lists.less index 4f95c1a1082..57cc6dce56c 100644 --- a/src/css/less/tables_lists.less +++ b/src/css/less/tables_lists.less @@ -24,11 +24,32 @@ td:last-child { border-right: 1px solid @grafanaListBorderBottom; } +} - .max-width { - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - white-space: nowrap; +.max-width { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; +} + +.grafana-options-list { + list-style: none; + margin: 0; + max-width: 450px; + + li:nth-child(odd) { + background-color: lighten(@grayDarker, 2%); + } + + li { + float: left; + margin: 2px; + padding: 5px 10px; + border: 1px solid @grafanaListBorderBottom; + border: 1px solid @grafanaListBorderBottom; + } + li:first-child { + border: 1px solid @grafanaListBorderBottom; } } diff --git a/src/test/specs/dashboardSrv-specs.js b/src/test/specs/dashboardSrv-specs.js index c141b746cd3..f916279db98 100644 --- a/src/test/specs/dashboardSrv-specs.js +++ b/src/test/specs/dashboardSrv-specs.js @@ -156,9 +156,8 @@ define([ expect(model.annotations.list[0].name).to.be('old'); }); - it('dashboard schema version should be set to latest', function() { - expect(model.version).to.be(5); + expect(model.version).to.be(6); }); }); From b26dfd82462d39e24284e734b9e3770828a76e43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 12:45:58 +0200 Subject: [PATCH 041/127] Updated changelog with progress on filtering/template overhaul, and UI change --- CHANGELOG.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 337a0745e90..9a6969d4262 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,15 @@ # 1.8.0 (unreleased) -**New features and improvements** +**UI polish / changes** +- [Issue #725](https://github.com/grafana/grafana/issues/725). UI: All modal editors are removed and replaced by an edit pane under menu. The look of editors is also updated and polished. Search dropdown is also shown as pane under menu and has seen some UI polish. +**Filtering feature overhaul** +- Filtering renamed to Templating, and filter items to variables +- Filter editing has gotten its own edit pane with much improved UI and options +- [Issue #296](https://github.com/grafana/grafana/issues/296). Templating: Can now retrieve variable values from a non-default data source +- [Issue #219](https://github.com/grafana/grafana/issues/219). Templating: Template variable value selection is now a typeahead autocomplete dropdown + +**New features and improvements** - [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible - [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode. - [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger From 39c068bd532377258ea313c830d13c9137b8ba0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Aug 2014 12:54:42 +0200 Subject: [PATCH 042/127] Graph: Fix for tooltip current value decimal precision when 'none' axis format was selected, Closes #733 --- CHANGELOG.md | 1 + src/app/directives/grafanaGraph.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a6969d4262..b7b5ce75b45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ **Fixes** - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) +- [Issue #733](https://github.com/grafana/grafana/issues/733). Graph: Fix for tooltip current value decimal precision when 'none' axis format was selected - [Issue #697](https://github.com/grafana/grafana/issues/697). Graphite: Fix for Glob syntax in graphite queries ([1-9] and ?) that made the query editor / parser bail and fallback to a text box. - [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. - [Issue #699](https://github.com/grafana/grafana/issues/699). Dashboard: Fix for bug when adding rows from dashboard settings dialog. diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 8d9e6be45bc..9bb302bf671 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -355,7 +355,7 @@ function (angular, $, kbn, moment, _) { value = item.datapoint[1]; } - value = kbn.getFormatFunction(format, 2)(value); + value = kbn.getFormatFunction(format, 2)(value, item.series.yaxis); timestamp = dashboard.formatDate(item.datapoint[0]); $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); From 2dc4434a492eaa403f18a8dda146a109e39f4684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 1 Sep 2014 11:13:18 +0200 Subject: [PATCH 043/127] Progress on influxdb and templated queries/variables, #613 --- src/app/components/kbn.js | 9 ++ src/app/components/timeSeries.js | 3 +- src/app/controllers/templateEditorCtrl.js | 17 ++- src/app/partials/templating_editor.html | 2 +- src/app/services/dashboard/dashboardSrv.js | 1 + .../services/influxdb/influxdbDatasource.js | 2 +- src/app/services/templateValuesSrv.js | 37 ++++- src/test/specs/templateValuesSrv-specs.js | 137 +++++++++++++++++- 8 files changed, 182 insertions(+), 26 deletions(-) diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 46a1b8dfa79..b18ad567b54 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -652,5 +652,14 @@ function($, _, moment) { } }; + kbn.stringToJsRegex = function(str) { + if (str[0] !== '/') { + return new RegExp(str); + } + + var match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$')); + return new RegExp(match[1], match[2]); + }; + return kbn; }); diff --git a/src/app/components/timeSeries.js b/src/app/components/timeSeries.js index 85c27f1da88..4c58c211cc3 100644 --- a/src/app/components/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -15,8 +15,7 @@ function (_, kbn) { if (!aliasOrRegex) { return false; } if (aliasOrRegex[0] === '/') { - var match = aliasOrRegex.match(new RegExp('^/(.*?)/(g?i?m?y?)$')); - var regex = new RegExp(match[1], match[2]); + var regex = kbn.stringToJsRegex(aliasOrRegex); return seriesAlias.match(regex) != null; } diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 649fefc7cfa..d133413ca22 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -7,7 +7,7 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, templateSrv, templateValuesSrv) { + module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, templateSrv, templateValuesSrv, alertSrv) { var replacementDefaults = { type: 'query', @@ -38,7 +38,10 @@ function (angular, _) { }; $scope.runQuery = function() { - templateValuesSrv.updateOptions($scope.current); + return templateValuesSrv.updateOptions($scope.current).then(function() { + }, function(err) { + alertSrv.set('Templating', 'Failed to run query for variable values: ' + err.message, 'error'); + }); }; $scope.edit = function(variable) { @@ -54,9 +57,10 @@ function (angular, _) { }; $scope.update = function() { - templateValuesSrv.updateOptions($scope.current); - $scope.reset(); - $scope.editor.index = 0; + $scope.runQuery().then(function() { + $scope.reset(); + $scope.editor.index = 0; + }); }; $scope.reset = function() { @@ -68,9 +72,6 @@ function (angular, _) { if ($scope.current.type === 'time period') { $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; } - else { - $scope.current.query = ''; - } }; $scope.removeVariable = function(variable) { diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 61aa68fbeda..fcef0ca8fba 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -113,7 +113,7 @@
    - +
    • {{option.text}} diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index c618e5074da..0c7e433e138 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -214,6 +214,7 @@ function (angular, $, kbn, _, moment) { for (i = 0 ; i < this.templating.list.length; i++) { var variable = this.templating.list[i]; if (variable.datasource === void 0) { variable.datasource = null; } + if (variable.type === 'filter') { variable.type = 'query'; } if (variable.type === void 0) { variable.type = 'query'; } if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; } } diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index ae2a223602e..d2ca7ae6be5 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -161,7 +161,7 @@ function (angular, _, kbn, InfluxSeries) { }); }; - InfluxDatasource.prototype.metricFindQuery = function (filterSrv, query) { + InfluxDatasource.prototype.metricFindQuery = function (query) { var interpolated; try { interpolated = templateSrv.replace(query); diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index fd766d07700..687d1897069 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -2,9 +2,8 @@ define([ 'angular', 'lodash', 'kbn', - 'store' ], -function (angular, _) { +function (angular, _, kbn) { 'use strict'; var module = angular.module('grafana.services'); @@ -30,7 +29,7 @@ function (angular, _) { templateSrv.updateTemplateData(); - return this.applyFilterToOtherFilters(variable) + return this.updateOptionsInChildVariables(variable) .then(function() { if (!recursive) { $rootScope.$broadcast('refresh'); @@ -38,7 +37,7 @@ function (angular, _) { }); }; - this.applyFilterToOtherFilters = function(updatedVariable) { + this.updateOptionsInChildVariables = function(updatedVariable) { var promises = _.map(self.variables, function(otherVariable) { if (otherVariable === updatedVariable) { return; @@ -63,9 +62,8 @@ function (angular, _) { var datasource = datasourceSrv.get(variable.datasource); return datasource.metricFindQuery(variable.query) .then(function (results) { - variable.options = _.map(results, function(node) { - return { text: node.text, value: node.text }; - }); + + variable.options = self.metricNamesToVariableValues(variable, results); if (variable.includeAll) { self.addAllOption(variable); @@ -84,6 +82,31 @@ function (angular, _) { }); }; + this.metricNamesToVariableValues = function(variable, metricNames) { + var regex, options, i, matches; + options = []; + + if (variable.regex) { + regex = kbn.stringToJsRegex(variable.regex); + } + + for (i = 0; i < metricNames.length; i++) { + var value = metricNames[i].text; + + if (regex) { + matches = regex.exec(value); + if (!matches) { continue; } + if (matches.length > 1) { + value = matches[1]; + } + } + + options.push({text: value, value: value}); + } + + return options; + }; + this.addAllOption = function(variable) { var allValue = ''; switch(variable.allFormat) { diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index 0486dfed73b..37824cbd953 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -8,26 +8,27 @@ define([ describe('templateValuesSrv', function() { var _templateValuesSrv; var _dashboard; + var _datasourceSrv = {}; + var _q; + var _rootScope; beforeEach(module('grafana.services')); beforeEach(module(function($provide) { - $provide.value('datasourceSrv', {}); + $provide.value('datasourceSrv', _datasourceSrv); $provide.value('templateSrv', { updateTemplateData: function() {} }); _dashboard = dashboardMock.create(); })); - beforeEach(inject(function(templateValuesSrv) { + beforeEach(inject(function(templateValuesSrv, $rootScope, $q) { _templateValuesSrv = templateValuesSrv; + _rootScope = $rootScope; + _q = $q; })); describe('update time period variable options', function() { - var variable = { - type: 'time period', - query: 'auto,1s,2h,5h,1d', - name: 'test' - }; + var variable = { type: 'time period', query: 'auto,1s,2h,5h,1d', name: 'test' }; beforeEach(function() { _templateValuesSrv.updateOptions(variable); @@ -40,6 +41,128 @@ define([ }); }); + function describeUpdateVariable(desc, fn) { + describe(desc, function() { + var ctx = {}; + ctx.setup = function(setupFn) { + ctx.setupFn = setupFn; + }; + + beforeEach(function() { + ctx.setupFn(); + var ds = {}; + ds.metricFindQuery = sinon.stub().returns(_q.when(ctx.queryResult)); + _datasourceSrv.get = sinon.stub().returns(ds); + + _templateValuesSrv.updateOptions(ctx.variable); + _rootScope.$digest(); + }); + + fn(ctx); + }); + } + + describeUpdateVariable('time period variable ', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'time period', query: 'auto,1s,2h,5h,1d', name: 'test' }; + }); + + it('should update options array', function() { + expect(ctx.variable.options.length).to.be(5); + expect(ctx.variable.options[1].text).to.be('1s'); + expect(ctx.variable.options[1].value).to.be('1s'); + }); + }); + + describeUpdateVariable('basic query variable', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should update options array', function() { + expect(ctx.variable.options.length).to.be(2); + expect(ctx.variable.options[0].text).to.be('backend1'); + expect(ctx.variable.options[0].value).to.be('backend1'); + expect(ctx.variable.options[1].value).to.be('backend2'); + }); + + it('should select first option as value', function() { + expect(ctx.variable.current.value).to.be('backend1'); + }); + }); + + describeUpdateVariable('and existing value still exists in options', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.current = { value: 'backend2'}; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should keep variable value', function() { + expect(ctx.variable.current.value).to.be('backend2'); + }); + }); + + describeUpdateVariable('and regex pattern exists', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.regex = '/apps.*(backend_[0-9]+)/'; + ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should extract and use match group', function() { + expect(ctx.variable.options[0].value).to.be('backend_01'); + }); + }); + + describeUpdateVariable('and regex pattern exists and no match', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.regex = '/apps.*(backendasd[0-9]+)/'; + ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should not add non matching items', function() { + expect(ctx.variable.options.length).to.be(0); + }); + }); + + describeUpdateVariable('regex pattern without slashes', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.regex = 'backend_01'; + ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should return matches options', function() { + expect(ctx.variable.options.length).to.be(1); + }); + }); + + describeUpdateVariable('and existing value still exists in options', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.current = { value: 'backend2'}; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should keep variable value', function() { + expect(ctx.variable.current.value).to.be('backend2'); + }); + }); + + describeUpdateVariable('with include All glob syntax', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'Glob' }; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All Glob option', function() { + expect(ctx.variable.options[0].value).to.be('{backend1,backend2,backend3}'); + }); + }); + }); }); From 5ae0239c261e6b5df22ac6c4c469e06279425f38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 1 Sep 2014 13:40:34 +0200 Subject: [PATCH 044/127] small UI changes to InfluxDB query editor, made each query two lines to give more space to series name --- src/app/partials/influxdb/editor.html | 199 ++++++++++-------- src/app/partials/templating_editor.html | 2 +- .../services/influxdb/influxdbDatasource.js | 11 +- src/test/specs/templateValuesSrv-specs.js | 15 +- 4 files changed, 129 insertions(+), 98 deletions(-) diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index ecbb9af28a0..5ed42499ccf 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -45,7 +45,7 @@
        • -
      • - as -
        • +
      + + + +
      +
    + +
    + +
      +
    • + alias +
    +
    diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index fcef0ca8fba..659f0ee1bde 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -101,7 +101,7 @@
    - +
    diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index d2ca7ae6be5..64f0b7e706a 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -124,7 +124,7 @@ function (angular, _, kbn, InfluxSeries) { }; - InfluxDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) { + InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var timeFilter = getTimeFilter({ range: rangeUnparsed }); var query = _.template(annotation.query, { timeFilter: timeFilter }, this.templateSettings); @@ -132,9 +132,14 @@ function (angular, _, kbn, InfluxSeries) { return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations(); }); }; - InfluxDatasource.prototype.listColumns = function(seriesName) { - return this._seriesQuery('select * from /' + seriesName + '/ limit 1').then(function(data) { + InfluxDatasource.prototype.listColumns = function(seriesName) { + var interpolated = templateSrv.replace(seriesName); + if (interpolated[0] !== '/') { + interpolated = '/' + interpolated + '/'; + } + + return this._seriesQuery('select * from ' + interpolated + ' limit 1').then(function(data) { if (!data) { return []; } diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index 37824cbd953..ec5e0376439 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -154,7 +154,7 @@ define([ describeUpdateVariable('with include All glob syntax', function(ctx) { ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'Glob' }; + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; }); @@ -163,6 +163,19 @@ define([ }); }); + describeUpdateVariable('with include all regex wildcard', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All wildcard option', function() { + expect(ctx.variable.options[0].value).to.be('*'); + }); + }); + + + }); }); From 141ea7ba9124e3681b376d11929c8e8ba1183d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 1 Sep 2014 16:55:54 +0200 Subject: [PATCH 045/127] More work InfluxDB templated queries and required changes to editor and datasource --- src/app/controllers/templateEditorCtrl.js | 2 +- src/app/panels/graph/styleEditor.html | 2 +- src/app/partials/influxdb/editor.html | 65 +++++-------------- src/app/services/dashboard/dashboardSrv.js | 2 +- .../services/influxdb/influxdbDatasource.js | 44 +++++++------ src/css/less/grafana.less | 1 + src/test/specs/influxdb-datasource-specs.js | 7 +- 7 files changed, 48 insertions(+), 75 deletions(-) diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index d133413ca22..e4e93b568b3 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -16,7 +16,7 @@ function (angular, _) { name: '', options: [], includeAll: false, - allFormat: 'Glob', + allFormat: 'glob', }; $scope.init = function() { diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index a699ae4e1a4..d26fe1610b8 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -93,7 +93,7 @@ {{option.name}}: {{option.value}}
  • - +
    • diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 5ed42499ccf..995ba362121 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -108,73 +108,42 @@
  • - +
    • +
  • - +
    • +
  • - - - +
    • +
  • group by time
  • - +
  • - +
  • - +
    • diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 0c7e433e138..91587feda38 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -216,7 +216,7 @@ function (angular, $, kbn, _, moment) { if (variable.datasource === void 0) { variable.datasource = null; } if (variable.type === 'filter') { variable.type = 'query'; } if (variable.type === void 0) { variable.type = 'query'; } - if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; } + if (variable.allFormat === void 0) { variable.allFormat = 'glob'; } } } diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 64f0b7e706a..0db4f3626ba 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -76,30 +76,32 @@ function (angular, _, kbn, InfluxSeries) { query = templateSrv.replace(query); } else { + query = 'select '; + var seriesName = target.series; - var template = "select [[group]][[group_comma]] [[func]]([[column]]) from [[series]] " + - "where [[timeFilter]] [[condition_add]] [[condition_key]] [[condition_op]] [[condition_value]] " + - "group by time([[interval]])[[group_comma]] [[group]] order asc"; - - var templateData = { - series: target.series, - column: target.column, - func: target.function, - timeFilter: timeFilter, - interval: target.interval || options.interval, - condition_add: target.condition_filter ? 'and' : '', - condition_key: target.condition_filter ? target.condition_key : '', - condition_op: target.condition_filter ? target.condition_op : '', - condition_value: target.condition_filter ? target.condition_value : '', - group_comma: target.groupby_field_add && target.groupby_field ? ',' : '', - group: target.groupby_field_add ? target.groupby_field : '', - }; - - if(!templateData.series.match('^/.*/')) { - templateData.series = '"' + templateData.series + '"'; + if(!seriesName.match('^/.*/')) { + seriesName = '"' + seriesName+ '"'; } - query = _.template(template, templateData, this.templateSettings); + if (target.groupby_field_add) { + query += target.groupby_field + ', '; + } + + query += target.function + '(' + target.column + ')'; + query += ' from ' + seriesName + ' where ' + timeFilter; + + if (target.condition_filter) { + query += ' and ' + target.condition_expression; + } + + query += ' group by time(' + (target.interval || options.interval) + ')'; + + if (target.groupby_field_add) { + query += ',' + target.groupby_field; + } + + query += " order asc"; + query = templateSrv.replace(query); if (target.groupby_field_add) { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index e9184ac41c2..a0c2407a075 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -255,6 +255,7 @@ input[type=text].grafana-target-text-input { float: left; color: @grafanaTargetColor; border-radius: 0; + border-right: 1px solid @grafanaTargetSegmentBorder; } input[type=text].grafana-target-segment-input { diff --git a/src/test/specs/influxdb-datasource-specs.js b/src/test/specs/influxdb-datasource-specs.js index b66d9eb3304..68ae33fbc18 100644 --- a/src/test/specs/influxdb-datasource-specs.js +++ b/src/test/specs/influxdb-datasource-specs.js @@ -12,11 +12,12 @@ define([ describe('When querying influxdb with one target using query editor target spec', function() { var results; - var urlExpected = "/series?p=mupp&q=select++mean(value)+from+%22test%22"+ - "+where++time+%3E+now()+-+1h+++++group+by+time()++order+asc&time_precision=s"; + var urlExpected = "/series?p=mupp&q=select+mean(value)+from+%22test%22"+ + "+where+time+%3E+now()+-+1h+group+by+time(1s)+order+asc&time_precision=s"; var query = { range: { from: 'now-1h', to: 'now' }, - targets: [{ series: 'test', column: 'value', function: 'mean' }] + targets: [{ series: 'test', column: 'value', function: 'mean' }], + interval: '1s' }; var response = [{ From 2da04e72f50c5f47da67fc9700fd5e785f6872c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 Sep 2014 07:05:24 +0200 Subject: [PATCH 046/127] More progress on influxdb query editor, templating, refactoring, unit tests, #740, #507, #586 --- src/app/controllers/influxTargetCtrl.js | 15 ++- src/app/directives/templateParamSelector.js | 2 +- .../partials/influxdb/annotation_editor.html | 4 +- src/app/partials/influxdb/editor.html | 24 ++--- src/app/partials/templating_editor.html | 2 +- .../services/influxdb/influxQueryBuilder.js | 81 ++++++++++++++++ .../services/influxdb/influxdbDatasource.js | 95 +++---------------- src/app/services/templateSrv.js | 4 + src/app/services/templateValuesSrv.js | 8 +- src/test/specs/helpers.js | 27 ++++-- src/test/specs/influxQueryBuilder-specs.js | 54 +++++++++++ src/test/specs/influxdb-datasource-specs.js | 1 + src/test/specs/templateValuesSrv-specs.js | 36 ++++++- src/test/test-main.js | 5 +- 14 files changed, 246 insertions(+), 112 deletions(-) create mode 100644 src/app/services/influxdb/influxQueryBuilder.js create mode 100644 src/test/specs/influxQueryBuilder-specs.js diff --git a/src/app/controllers/influxTargetCtrl.js b/src/app/controllers/influxTargetCtrl.js index bb34df8f608..6b27be78a0c 100644 --- a/src/app/controllers/influxTargetCtrl.js +++ b/src/app/controllers/influxTargetCtrl.js @@ -11,8 +11,17 @@ function (angular) { module.controller('InfluxTargetCtrl', function($scope, $timeout) { $scope.init = function() { - $scope.target.function = $scope.target.function || 'mean'; - $scope.target.column = $scope.target.column || 'value'; + var target = $scope.target; + + target.function = target.function || 'mean'; + target.column = target.column || 'value'; + + if (target.condition_value) { + target.condition_expression = target.condition_key + ' ' + target.condition_op + ' ' + target.condition_value; + delete target.condition_key; + delete target.condition_op; + delete target.condition_value; + } $scope.rawQuery = false; @@ -24,7 +33,7 @@ function (angular) { ]; $scope.operators = ['=', '=~', '>', '<', '!~', '<>']; - $scope.oldSeries = $scope.target.series; + $scope.oldSeries = target.series; $scope.$on('typeahead-updated', function() { $timeout($scope.get_data); }); diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index 106f5f9ee0b..f05d6959198 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -11,7 +11,7 @@ function (angular, app, _, $) { .module('grafana.directives') .directive('templateParamSelector', function($compile) { var inputTemplate = ''; var buttonTemplate = '{{variable.current.text}}'; diff --git a/src/app/partials/influxdb/annotation_editor.html b/src/app/partials/influxdb/annotation_editor.html index 9bc2bdbca21..2bcfb549411 100644 --- a/src/app/partials/influxdb/annotation_editor.html +++ b/src/app/partials/influxdb/annotation_editor.html @@ -1,8 +1,8 @@
    -
    InfluxDB Query Example: select text from events where [[timeFilter]]
    +
    InfluxDB Query Example: select text from events where [[$timeFilter]]
    - +
    diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 995ba362121..da0a525303a 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -72,6 +72,16 @@ data-min-length=0 data-items=100 ng-blur="seriesBlur()"> + +
  • + alias +
    • + +
  • + +
    • +
    @@ -102,16 +112,6 @@ - -
  • - alias -
    • - -
  • - -
    • -
  • @@ -129,7 +129,7 @@
  • - @@ -142,7 +142,7 @@
  • -
    • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 659f0ee1bde..22ab029061e 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -101,7 +101,7 @@
    - +
    diff --git a/src/app/services/influxdb/influxQueryBuilder.js b/src/app/services/influxdb/influxQueryBuilder.js new file mode 100644 index 00000000000..eaa19fceb9d --- /dev/null +++ b/src/app/services/influxdb/influxQueryBuilder.js @@ -0,0 +1,81 @@ +define([ +], +function () { + 'use strict'; + + function InfluxQueryBuilder(target) { + this.target = target; + } + + var p = InfluxQueryBuilder.prototype; + + p.build = function() { + return this.target.rawQuery ? this._modifyRawQuery() : this._buildQuery(); + }; + + p._buildQuery = function() { + var target = this.target; + var query = 'select '; + var seriesName = target.series; + + if(!seriesName.match('^/.*/')) { + seriesName = '"' + seriesName+ '"'; + } + + if (target.groupby_field_add) { + query += target.groupby_field + ', '; + } + + query += target.function + '(' + target.column + ')'; + query += ' from ' + seriesName + ' where [[$timeFilter]]'; + + if (target.condition_filter) { + query += ' and ' + target.condition_expression; + } + + query += ' group by time([[$interval]])'; + + if (target.groupby_field_add) { + query += ', ' + target.groupby_field; + this.groupByField = target.groupby_field; + } + + query += " order asc"; + + return query; + }; + + p._modifyRawQuery = function () { + var query = this.target.query.replace(";", ""); + + var queryElements = query.split(" "); + var lowerCaseQueryElements = query.toLowerCase().split(" "); + var whereIndex = lowerCaseQueryElements.indexOf("where"); + var groupByIndex = lowerCaseQueryElements.indexOf("group"); + var orderIndex = lowerCaseQueryElements.indexOf("order"); + + if (lowerCaseQueryElements[1].indexOf(',') !== -1) { + this.groupByField = lowerCaseQueryElements[1].replace(',', ''); + } + + if (whereIndex !== -1) { + queryElements.splice(whereIndex + 1, 0, '[[$timeFilter]]', "and"); + } + else { + if (groupByIndex !== -1) { + queryElements.splice(groupByIndex, 0, "where", '[[$timeFilter]]'); + } + else if (orderIndex !== -1) { + queryElements.splice(orderIndex, 0, "where", '[[$timeFilter]]'); + } + else { + queryElements.push("where"); + queryElements.push('[[$timeFilter]]'); + } + } + + return queryElements.join(" "); + }; + + return InfluxQueryBuilder; +}); diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 0db4f3626ba..d2a375521a5 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -2,9 +2,10 @@ define([ 'angular', 'lodash', 'kbn', - './influxSeries' + './influxSeries', + './influxQueryBuilder' ], -function (angular, _, kbn, InfluxSeries) { +function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { 'use strict'; var module = angular.module('grafana.services'); @@ -32,90 +33,25 @@ function (angular, _, kbn, InfluxSeries) { } InfluxDatasource.prototype.query = function(options) { - var promises = _.map(options.targets, function(target) { - var query; - var alias = ''; + var timeFilter = getTimeFilter(options); + var promises = _.map(options.targets, function(target) { if (target.hide || !((target.series && target.column) || target.query)) { return []; } - var timeFilter = getTimeFilter(options); - var groupByField; + // build query + var queryBuilder = new InfluxQueryBuilder(target); + var query = queryBuilder.build(); - if (target.rawQuery) { - query = target.query; - query = query.replace(";", ""); - var queryElements = query.split(" "); - var lowerCaseQueryElements = query.toLowerCase().split(" "); - var whereIndex = lowerCaseQueryElements.indexOf("where"); - var groupByIndex = lowerCaseQueryElements.indexOf("group"); - var orderIndex = lowerCaseQueryElements.indexOf("order"); + // replace templated variables + templateSrv.setGrafanaVariable('$timeFilter', timeFilter); + templateSrv.setGrafanaVariable('$interval', (target.interval || options.interval)); + query = templateSrv.replace(query); - if (lowerCaseQueryElements[1].indexOf(',') !== -1) { - groupByField = lowerCaseQueryElements[1].replace(',', ''); - } + var alias = target.alias ? templateSrv.replace(target.alias) : ''; - if (whereIndex !== -1) { - queryElements.splice(whereIndex + 1, 0, timeFilter, "and"); - } - else { - if (groupByIndex !== -1) { - queryElements.splice(groupByIndex, 0, "where", timeFilter); - } - else if (orderIndex !== -1) { - queryElements.splice(orderIndex, 0, "where", timeFilter); - } - else { - queryElements.push("where"); - queryElements.push(timeFilter); - } - } - - query = queryElements.join(" "); - query = templateSrv.replace(query); - } - else { - query = 'select '; - var seriesName = target.series; - - if(!seriesName.match('^/.*/')) { - seriesName = '"' + seriesName+ '"'; - } - - if (target.groupby_field_add) { - query += target.groupby_field + ', '; - } - - query += target.function + '(' + target.column + ')'; - query += ' from ' + seriesName + ' where ' + timeFilter; - - if (target.condition_filter) { - query += ' and ' + target.condition_expression; - } - - query += ' group by time(' + (target.interval || options.interval) + ')'; - - if (target.groupby_field_add) { - query += ',' + target.groupby_field; - } - - query += " order asc"; - - query = templateSrv.replace(query); - - if (target.groupby_field_add) { - groupByField = target.groupby_field; - } - - target.query = query; - } - - if (target.alias) { - alias = templateSrv.replace(target.alias); - } - - var handleResponse = _.partial(handleInfluxQueryResponse, alias, groupByField); + var handleResponse = _.partial(handleInfluxQueryResponse, alias, queryBuilder.groupByField); return this._seriesQuery(query).then(handleResponse); }, this); @@ -123,12 +59,11 @@ function (angular, _, kbn, InfluxSeries) { return $q.all(promises).then(function(results) { return { data: _.flatten(results) }; }); - }; InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var timeFilter = getTimeFilter({ range: rangeUnparsed }); - var query = _.template(annotation.query, { timeFilter: timeFilter }, this.templateSettings); + var query = _.template(annotation.query, { timeFilter: timeFilter, "$timeFilter": timeFilter }, this.templateSettings); return this._seriesQuery(query).then(function(results) { return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations(); diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 1cf1e832606..720b732ebc8 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -34,6 +34,10 @@ function (angular, _) { this._templateData = _templateData; }; + this.setGrafanaVariable = function(name, value) { + this._templateData[name] = value; + }; + this.replace = function(target) { if (!target || target.indexOf('[[') === -1) { return target; diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 687d1897069..4293f567195 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -84,7 +84,7 @@ function (angular, _, kbn) { this.metricNamesToVariableValues = function(variable, metricNames) { var regex, options, i, matches; - options = []; + options = {}; // use object hash to remove duplicates if (variable.regex) { regex = kbn.stringToJsRegex(variable.regex); @@ -101,10 +101,12 @@ function (angular, _, kbn) { } } - options.push({text: value, value: value}); + options[value] = value; } - return options; + return _.map(_.keys(options), function(key) { + return { text: key, value: key }; + }); }; this.addAllOption = function(variable) { diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 9b08c02e2f6..7293678b6a2 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -1,6 +1,7 @@ define([ - 'kbn' -], function(kbn) { + 'kbn', + 'lodash' +], function(kbn, _) { 'use strict'; function ControllerTestContext() { @@ -47,10 +48,17 @@ define([ function ServiceTestContext() { var self = this; + self.templateSrv = new TemplateSrvStub(); + + this.providePhase = function() { + return module(function($provide) { + $provide.value('templateSrv', self.templateSrv); + }); + }; this.createService = function(name) { - return inject([name, '$q', '$rootScope', '$httpBackend', function(InfluxDatasource, $q, $rootScope, $httpBackend) { - self.service = InfluxDatasource; + return inject([name, '$q', '$rootScope', '$httpBackend', function(service, $q, $rootScope, $httpBackend) { + self.service = service; self.$q = $q; self.$rootScope = $rootScope; self.$httpBackend = $httpBackend; @@ -82,11 +90,16 @@ define([ function TemplateSrvStub() { this.variables = []; - this.replace = function() {}; + this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; + this.data = {}; + this.replace = function(text) { + return _.template(text, this.data, this.templateSettings); + }; + this.setGrafanaVariable = function(name, value) { + this.data[name] = value; + }; } - - return { ControllerTestContext: ControllerTestContext, TimeSrvStub: TimeSrvStub, diff --git a/src/test/specs/influxQueryBuilder-specs.js b/src/test/specs/influxQueryBuilder-specs.js new file mode 100644 index 00000000000..789eb342a98 --- /dev/null +++ b/src/test/specs/influxQueryBuilder-specs.js @@ -0,0 +1,54 @@ +define([ + 'services/influxdb/influxQueryBuilder' +], function(InfluxQueryBuilder) { + 'use strict'; + + describe('InfluxQueryBuilder', function() { + + describe('series with conditon and group by', function() { + var builder = new InfluxQueryBuilder({ + series: 'google.test', + column: 'value', + function: 'mean', + condition_filter: true, + condition_expression: "code=1", + groupby_field_add: true, + groupby_field: 'code' + }); + + var query = builder.build(); + + it('should generate correct query', function() { + expect(query).to.be('select code, mean(value) from "google.test" where [[$timeFilter]] and code=1 ' + + 'group by time([[$interval]]), code order asc'); + }); + + it('should expose groupByFiled', function() { + expect(builder.groupByField).to.be('code'); + }); + + }); + + describe('old style raw query', function() { + var builder = new InfluxQueryBuilder({ + query: 'select host, mean(value) from asd.asd where time > now() - 1h group by time(1s), code order asc', + rawQuery: true + }); + + var query = builder.build(); + + it('should generate correct query', function() { + expect(query).to.be('select host, mean(value) from asd.asd where [[$timeFilter]] and time > now() - 1h ' + + ' group by time(1s), code order asc'); + }); + + it('should expose groupByFiled', function() { + expect(builder.groupByField).to.be('host'); + }); + + }); + + + }); + +}); diff --git a/src/test/specs/influxdb-datasource-specs.js b/src/test/specs/influxdb-datasource-specs.js index 68ae33fbc18..9b531065115 100644 --- a/src/test/specs/influxdb-datasource-specs.js +++ b/src/test/specs/influxdb-datasource-specs.js @@ -8,6 +8,7 @@ define([ var ctx = new helpers.ServiceTestContext(); beforeEach(module('grafana.services')); + beforeEach(ctx.providePhase()); beforeEach(ctx.createService('InfluxDatasource')); describe('When querying influxdb with one target using query editor target spec', function() { diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index ec5e0376439..d0825a2239c 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -140,6 +140,18 @@ define([ }); }); + describeUpdateVariable('regex pattern remove duplicates', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; + ctx.variable.regex = 'backend_01'; + ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_01.counters.req'}]; + }); + + it('should return matches options', function() { + expect(ctx.variable.options.length).to.be(1); + }); + }); + describeUpdateVariable('and existing value still exists in options', function(ctx) { ctx.setup(function() { ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; @@ -163,7 +175,29 @@ define([ }); }); - describeUpdateVariable('with include all regex wildcard', function(ctx) { + describeUpdateVariable('with include all wildcard', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All wildcard option', function() { + expect(ctx.variable.options[0].value).to.be('*'); + }); + }); + + describeUpdateVariable('with include all wildcard', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'regex wildcard' }; + ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All wildcard option', function() { + expect(ctx.variable.options[0].value).to.be('.*'); + }); + }); + + describeUpdateVariable('with include all regex values', function(ctx) { ctx.setup(function() { ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; diff --git a/src/test/test-main.js b/src/test/test-main.js index d75fe2ebd99..04f25f91005 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -121,6 +121,8 @@ require([ 'specs/timeSeries-specs', 'specs/row-ctrl-specs', 'specs/graphiteTargetCtrl-specs', + 'specs/influxSeries-specs', + 'specs/influxQueryBuilder-specs', 'specs/influxdb-datasource-specs', 'specs/graph-ctrl-specs', 'specs/grafanaGraph-specs', @@ -130,8 +132,7 @@ require([ 'specs/templateValuesSrv-specs', 'specs/kbn-format-specs', 'specs/dashboardSrv-specs', - 'specs/dashboardViewStateSrv-specs', - 'specs/influxSeries-specs' + 'specs/dashboardViewStateSrv-specs' ], function () { window.__karma__.start(); }); From 4ee455fad2d17ef6e51f13589ac908c8aa688ab4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 Sep 2014 07:21:41 +0200 Subject: [PATCH 047/127] Fixed failing influxdb query builder unit test --- src/test/specs/influxQueryBuilder-specs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/specs/influxQueryBuilder-specs.js b/src/test/specs/influxQueryBuilder-specs.js index 789eb342a98..f5218187bdc 100644 --- a/src/test/specs/influxQueryBuilder-specs.js +++ b/src/test/specs/influxQueryBuilder-specs.js @@ -39,7 +39,7 @@ define([ it('should generate correct query', function() { expect(query).to.be('select host, mean(value) from asd.asd where [[$timeFilter]] and time > now() - 1h ' + - ' group by time(1s), code order asc'); + 'group by time(1s), code order asc'); }); it('should expose groupByFiled', function() { From cb479d737b8b5054e9b5f2cc9d2cdf01c6c1e3ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 Sep 2014 07:58:29 +0200 Subject: [PATCH 048/127] Graphite: Fix for nonNegativeDerivative function, now possible to not include optional first parameter maxValue, Closes #702 --- CHANGELOG.md | 1 + src/app/directives/graphiteFuncEditor.js | 4 ++-- src/app/services/dashboard/dashboardViewStateSrv.js | 4 ---- src/app/services/graphite/gfunc.js | 4 ++-- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7b5ce75b45..adf4db4a525 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) - [Issue #733](https://github.com/grafana/grafana/issues/733). Graph: Fix for tooltip current value decimal precision when 'none' axis format was selected - [Issue #697](https://github.com/grafana/grafana/issues/697). Graphite: Fix for Glob syntax in graphite queries ([1-9] and ?) that made the query editor / parser bail and fallback to a text box. +- [Issue #702](https://github.com/grafana/grafana/issues/702). Graphite: Fix for nonNegativeDerivative function, now possible to not include optional first parameter maxValue - [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. - [Issue #699](https://github.com/grafana/grafana/issues/699). Dashboard: Fix for bug when adding rows from dashboard settings dialog. - [Issue #723](https://github.com/grafana/grafana/issues/723). Dashboard: Fix for hide controls setting not used/initialized on dashboard load diff --git a/src/app/directives/graphiteFuncEditor.js b/src/app/directives/graphiteFuncEditor.js index 8aa0551b18a..57f1294a2df 100644 --- a/src/app/directives/graphiteFuncEditor.js +++ b/src/app/directives/graphiteFuncEditor.js @@ -147,7 +147,7 @@ function (angular, _, $) { $funcLink.appendTo(elem); _.each(funcDef.params, function(param, index) { - if (param.optional && !func.params[index]) { + if (param.optional && func.params.length !== index + 1) { return; } @@ -239,4 +239,4 @@ function (angular, _, $) { }); -}); \ No newline at end of file +}); diff --git a/src/app/services/dashboard/dashboardViewStateSrv.js b/src/app/services/dashboard/dashboardViewStateSrv.js index 1c3b1d471dd..64d217f3dec 100644 --- a/src/app/services/dashboard/dashboardViewStateSrv.js +++ b/src/app/services/dashboard/dashboardViewStateSrv.js @@ -21,10 +21,6 @@ function (angular, _, $) { } }; - $scope.onAppEvent('dashboard-saved', function() { - self.update({ fullscreen: false }); - }); - $scope.onAppEvent('$routeUpdate', function() { var urlState = self.getQueryStringState(); if (self.needsSync(urlState)) { diff --git a/src/app/services/graphite/gfunc.js b/src/app/services/graphite/gfunc.js index 9339999f475..ce0910326d8 100644 --- a/src/app/services/graphite/gfunc.js +++ b/src/app/services/graphite/gfunc.js @@ -280,8 +280,8 @@ function (_) { addFuncDef({ name: 'nonNegativeDerivative', category: categories.Transform, - params: [{ name: "max value or 0", type: "int", }], - defaultParams: [0] + params: [{ name: "max value or 0", type: "int", optional: true }], + defaultParams: [''] }); addFuncDef({ From 666d640216309e303c8df824dc713da80347514e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 Sep 2014 12:55:45 +0200 Subject: [PATCH 049/127] Graphite: Metric node/segment selection is now a textbox with autocomplete dropdown, allow for custom glob expression for single node segment without enter text editor mode, Closes #281 --- CHANGELOG.md | 1 + src/app/controllers/dashboardNavCtrl.js | 6 +- src/app/controllers/graphiteTarget.js | 7 +- src/app/directives/all.js | 1 + src/app/directives/graphiteSegment.js | 137 ++++++++++++++++++++++++ src/app/partials/graphite/editor.html | 18 +--- src/app/partials/influxdb/editor.html | 1 - src/app/services/graphite/gfunc.js | 28 +++-- src/css/less/grafana.less | 1 - src/css/less/graph.less | 4 +- src/test/specs/gfunc-specs.js | 6 ++ 11 files changed, 176 insertions(+), 34 deletions(-) create mode 100644 src/app/directives/graphiteSegment.js diff --git a/CHANGELOG.md b/CHANGELOG.md index adf4db4a525..9102807b6e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - [Issue #219](https://github.com/grafana/grafana/issues/219). Templating: Template variable value selection is now a typeahead autocomplete dropdown **New features and improvements** +- [Issue #281](https://github.com/grafana/grafana/issues/281). Graphite: Metric node/segment selection is now a textbox with autocomplete dropdown, allow for custom glob expression for single node segment without entering text editor mode. - [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible - [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode. - [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index 6f08ffb255e..204b874db70 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -81,8 +81,10 @@ function (angular, _, moment, config, store) { .then(function(result) { alertSrv.set('Dashboard Saved', 'Dashboard has been saved as "' + result.title + '"','success', 5000); - $location.search({}); - $location.path(result.url); + if (result.url !== $location.path()) { + $location.search({}); + $location.path(result.url); + } $rootScope.$emit('dashboard-saved', $scope.dashboard); diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index aebc297b278..493f01eb562 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -168,17 +168,14 @@ function (angular, _, config, gfunc, Parser) { }); }; - $scope.setSegment = function (altIndex, segmentIndex) { + $scope.segmentValueChanged = function (segment, segmentIndex) { delete $scope.parserError; - $scope.segments[segmentIndex].value = $scope.altSegments[altIndex].value; - $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html; - if ($scope.functions.length > 0 && $scope.functions[0].def.fake) { $scope.functions = []; } - if ($scope.altSegments[altIndex].expandable) { + if (segment.expandable) { return checkOtherSegments(segmentIndex + 1) .then(function () { setSegmentFocus(segmentIndex + 1); diff --git a/src/app/directives/all.js b/src/app/directives/all.js index f6051da8caa..35d718fc942 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -16,6 +16,7 @@ define([ './addGraphiteFunc', './graphiteFuncEditor', './templateParamSelector', + './graphiteSegment', './grafanaVersionCheck', './influxdbFuncEditor' ], function () {}); diff --git a/src/app/directives/graphiteSegment.js b/src/app/directives/graphiteSegment.js new file mode 100644 index 00000000000..0f1e4397d25 --- /dev/null +++ b/src/app/directives/graphiteSegment.js @@ -0,0 +1,137 @@ +define([ + 'angular', + 'app', + 'lodash', + 'jquery', +], +function (angular, app, _, $) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('graphiteSegment', function($compile, $sce) { + var inputTemplate = ''; + + var buttonTemplate = ''; + + return { + link: function($scope, elem) { + var $input = $(inputTemplate); + var $button = $(buttonTemplate); + var segment = $scope.segment; + var options = null; + var cancelBlur = null; + + $input.appendTo(elem); + $button.appendTo(elem); + + $scope.updateVariableValue = function(value) { + if (value === '' || segment.value === value) { + return; + } + + $scope.$apply(function() { + var selected = _.findWhere($scope.altSegments, { value: value }); + if (selected) { + segment.value = selected.value; + segment.html = selected.html; + segment.expandable = selected.expandable; + } + else { + segment.value = value; + segment.html = $sce.trustAsHtml(value); + segment.expandable = true; + } + $scope.segmentValueChanged(segment, $scope.$index); + }); + }; + + $scope.switchToLink = function(now) { + if (now === true || cancelBlur) { + clearTimeout(cancelBlur); + cancelBlur = null; + $input.hide(); + $button.show(); + $scope.updateVariableValue($input.val()); + } + else { + // need to have long delay because the blur + // happens long before the click event on the typeahead options + cancelBlur = setTimeout($scope.switchToLink, 350); + } + }; + + $scope.source = function(query, callback) { + console.log("source!", callback); + if (options) { + return options; + } + + $scope.$apply(function() { + $scope.getAltSegments($scope.$index).then(function() { + options = _.map($scope.altSegments, function(alt) { return alt.value; }); + + // add custom values + if (segment.value !== 'select metric' && _.indexOf(options, segment.value) === -1) { + options.unshift(segment.value); + } + + callback(options); + }); + }); + }; + + $scope.updater = function(value) { + if (value === segment.value) { + clearTimeout(cancelBlur); + $input.focus(); + return value; + } + + $input.val(value); + $scope.switchToLink(true); + + return value; + }; + + $input.attr('data-provide', 'typeahead'); + $input.typeahead({ source: $scope.source, minLength: 0, items: 100, updater: $scope.updater }); + + var typeahead = $input.data('typeahead'); + typeahead.lookup = function () { + this.query = this.$element.val() || ''; + var items = this.source(this.query, $.proxy(this.process, this)); + return items ? this.process(items) : items; + }; + + $button.keydown(function(evt) { + // trigger typeahead on down arrow or enter key + if (evt.keyCode === 40 || evt.keyCode === 13) { + $button.click(); + } + }); + + $button.click(function() { + options = null; + $input.css('width', ($button.width() + 16) + 'px'); + + $button.hide(); + $input.show(); + $input.focus(); + + var typeahead = $input.data('typeahead'); + if (typeahead) { + $input.val(''); + typeahead.lookup(); + } + }); + + $input.blur($scope.switchToLink); + + $compile(elem.contents())($scope); + } + }; + }); +}); diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index b25478dba37..2a314615963 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -1,4 +1,3 @@ -
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + group by time +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    + +
    +
    +
    +
    +
    -
    -
    - - alias patterns: - -
      -
    • $s = series name
      • -
    • $g = group by
      • -
    • $[0-9] part of series name for series names seperated by dots.
      • -
        -
    -
    +
    + +
    + Alias patterns: +
      +
    • $s = series name
      • +
    • $g = group by
      • +
    • $[0-9] part of series name for series names seperated by dots.
      • +
    +
    + +
    + Stacking and fill: +
      +
    • When stacking is enabled it important that points align
      • +
    • If there are missing points for one series it can cause gaps or missing bars
      • +
    • You must use fill(0), and select a group by time low limit
      • +
    • Use the group by time option below your queries and specify for example >10s if your metrics are written every 10 seconds
      • +
    • This will insert zeros for series that are missing measurements and will make stacking work properly
      • +
    +
    + +
    + Group by time: +
      +
    • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
      • +
    • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
      • +
    • If you use fill(0) or fill(null) set a low limit for the auto group by time interval
      • +
    • The low limit can only be set in the group by time option below your queries
      • +
    • You set a low limit by adding a greater sign before the interval
      • +
    • Example: >60s if you write metrics to InfluxDB every 60 seconds
      • +
    +
    + + +
    + diff --git a/src/app/services/influxdb/influxQueryBuilder.js b/src/app/services/influxdb/influxQueryBuilder.js index af5022ff897..a72f18fdd4a 100644 --- a/src/app/services/influxdb/influxQueryBuilder.js +++ b/src/app/services/influxdb/influxQueryBuilder.js @@ -22,24 +22,28 @@ function () { seriesName = '"' + seriesName+ '"'; } - if (target.groupby_field_add) { + if (target.groupby_field) { query += target.groupby_field + ', '; } query += target.function + '(' + target.column + ')'; query += ' from ' + seriesName + ' where [[$timeFilter]]'; - if (target.condition_filter) { - query += ' and ' + target.condition_expression; + if (target.condition) { + query += ' and ' + target.condition; } query += ' group by time([[$interval]])'; - if (target.groupby_field_add) { + if (target.groupby_field) { query += ', ' + target.groupby_field; this.groupByField = target.groupby_field; } + if (target.fill) { + query += ' fill(' + target.fill + ')'; + } + query += " order asc"; target.query = query; diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index d2a375521a5..ce54f9b172a 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -61,6 +61,10 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { }); }; + InfluxDatasource.prototype._getGroupByTimeInterval = function(target, options) { + return target.interval || options.interval; + }; + InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var timeFilter = getTimeFilter({ range: rangeUnparsed }); var query = _.template(annotation.query, { timeFilter: timeFilter, "$timeFilter": timeFilter }, this.templateSettings); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index a410da93d85..5f0ba02e9af 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -135,7 +135,6 @@ list-style: none; margin: 0; margin-right: 90px; - margin-left: 30px; >li { float: left; } @@ -143,9 +142,6 @@ .grafana-metric-options { margin-top: 35px; - .grafana-segment-list { - margin-left: 0; - } } // fix for fixed positioned panel & scrolling @@ -183,6 +179,15 @@ &.annotation-segment { padding: 8px 15px; } + +} + +.grafana-target-segment-icon { + i { + width: 15px; + text-align: center; + display: inline-block; + } } .grafana-target-function { @@ -208,15 +213,6 @@ input[type=text].grafana-function-param-input { padding: 0; } -.grafana-target-controls-left { - list-style: none; - float: left; - margin: 0px; - li { - display: inline-block; - } -} - .grafana-target-controls { float: right; list-style: none; diff --git a/src/test/specs/graph-ctrl-specs.js b/src/test/specs/graph-ctrl-specs.js index c01353feb62..e1ddcbc571e 100644 --- a/src/test/specs/graph-ctrl-specs.js +++ b/src/test/specs/graph-ctrl-specs.js @@ -36,8 +36,8 @@ define([ var data = ctx.scope.render.getCall(0).args[0]; expect(data.length).to.be(2); }); - }); + }); }); diff --git a/src/test/specs/influxQueryBuilder-specs.js b/src/test/specs/influxQueryBuilder-specs.js index f5218187bdc..3003db956a0 100644 --- a/src/test/specs/influxQueryBuilder-specs.js +++ b/src/test/specs/influxQueryBuilder-specs.js @@ -10,9 +10,7 @@ define([ series: 'google.test', column: 'value', function: 'mean', - condition_filter: true, - condition_expression: "code=1", - groupby_field_add: true, + condition: "code=1", groupby_field: 'code' }); @@ -29,6 +27,23 @@ define([ }); + describe('series with fill and minimum group by time', function() { + var builder = new InfluxQueryBuilder({ + series: 'google.test', + column: 'value', + function: 'mean', + fill: '0', + }); + + var query = builder.build(); + + it('should generate correct query', function() { + expect(query).to.be('select mean(value) from "google.test" where [[$timeFilter]] ' + + 'group by time([[$interval]]) fill(0) order asc'); + }); + + }); + describe('old style raw query', function() { var builder = new InfluxQueryBuilder({ query: 'select host, mean(value) from asd.asd where time > now() - 1h group by time(1s), code order asc', diff --git a/src/test/specs/influxdb-datasource-specs.js b/src/test/specs/influxdb-datasource-specs.js index 9b531065115..7bbbe72a22d 100644 --- a/src/test/specs/influxdb-datasource-specs.js +++ b/src/test/specs/influxdb-datasource-specs.js @@ -10,6 +10,9 @@ define([ beforeEach(module('grafana.services')); beforeEach(ctx.providePhase()); beforeEach(ctx.createService('InfluxDatasource')); + beforeEach(function() { + ctx.ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); + }); describe('When querying influxdb with one target using query editor target spec', function() { var results; @@ -28,10 +31,8 @@ define([ }]; beforeEach(function() { - var ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); - ctx.$httpBackend.expect('GET', urlExpected).respond(response); - ds.query(query).then(function(data) { results = data; }); + ctx.ds.query(query).then(function(data) { results = data; }); ctx.$httpBackend.flush(); }); @@ -58,10 +59,8 @@ define([ var response = []; beforeEach(function() { - var ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); - ctx.$httpBackend.expect('GET', urlExpected).respond(response); - ds.query(query).then(function(data) { results = data; }); + ctx.ds.query(query).then(function(data) { results = data; }); ctx.$httpBackend.flush(); }); @@ -71,6 +70,18 @@ define([ }); + describe('When calculating group by time interval', function() { + it('if blank should use auto interval', function() { + var result = ctx.ds._getGroupByTimeInterval({}, { interval:'0.1s' }); + expect(result).to.be('0.1s'); + }); + + it('if target interval specified should use that interval', function() { + var result = ctx.ds._getGroupByTimeInterval({interval: '10s'}, { interval:'0.1s' }); + expect(result).to.be('10s'); + }); + + }); }); }); diff --git a/src/test/specs/kbn-format-specs.js b/src/test/specs/kbn-format-specs.js index 0faa4728f2d..a44475556b0 100644 --- a/src/test/specs/kbn-format-specs.js +++ b/src/test/specs/kbn-format-specs.js @@ -41,7 +41,6 @@ define([ }); describe('nanosecond formatting', function () { - it('should translate 25 to 25 ns', function () { var str = kbn.nanosFormat(25, 2); expect(str).to.be("25 ns"); @@ -68,4 +67,38 @@ define([ }); }); + + describe('calculateInterval', function() { + it('1h 100 resultion', function() { + var range = { from: kbn.parseDate('now-1h'), to: kbn.parseDate('now') }; + var str = kbn.calculateInterval(range, 100, null); + expect(str).to.be('30s'); + }); + + it('10m 1600 resolution', function() { + var range = { from: kbn.parseDate('now-10m'), to: kbn.parseDate('now') }; + var str = kbn.calculateInterval(range, 1600, null); + expect(str).to.be('0.1s'); + }); + + it('fixed user interval', function() { + var range = { from: kbn.parseDate('now-10m'), to: kbn.parseDate('now') }; + var str = kbn.calculateInterval(range, 1600, '10s'); + expect(str).to.be('10s'); + }); + + it('short time range and user low limit', function() { + var range = { from: kbn.parseDate('now-10m'), to: kbn.parseDate('now') }; + var str = kbn.calculateInterval(range, 1600, '>10s'); + expect(str).to.be('10s'); + }); + + it('large time range and user low limit', function() { + var range = { from: kbn.parseDate('now-14d'), to: kbn.parseDate('now') }; + var str = kbn.calculateInterval(range, 1000, '>10s'); + expect(str).to.be('30m'); + }); + + }); + }); From dd4eaa0758e31cd21f165a2c09270d0fd5f33801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 Sep 2014 14:17:05 +0200 Subject: [PATCH 066/127] fixes to target segment markup --- src/app/partials/graphite/editor.html | 2 +- src/app/partials/influxdb/editor.html | 14 +++++++++++++- src/app/partials/opentsdb/editor.html | 2 +- src/app/partials/submenu.html | 2 +- src/app/services/influxdb/influxdbDatasource.js | 4 ---- src/test/specs/influxdb-datasource-specs.js | 12 ------------ 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index 9b93297ef75..82241ec1923 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -46,7 +46,7 @@ -
    diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 4293f567195..a4e79c1ca34 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -120,10 +120,8 @@ function (angular, _, kbn) { break; default: allValue = '{'; - _.each(variable.options, function(option) { - allValue += option.text + ','; - }); - allValue = allValue.substring(0, allValue.length - 1) + '}'; + allValue += _.pluck(variable.options, 'text').join(','); + allValue += '}'; } variable.options.unshift({text: 'All', value: allValue}); diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less index ac45149221d..5675d605cbd 100644 --- a/src/css/less/bootswatch.light.less +++ b/src/css/less/bootswatch.light.less @@ -159,8 +159,9 @@ div.subnav { li.active > a, li.active > a:hover { border-color: transparent; - background-color: @blue; - color: @white; + background-color: transparent; + border-bottom: 2px solid @blue; + color: @blue } li.disabled > a { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 5f0ba02e9af..d6c4d38f618 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -334,23 +334,22 @@ select.grafana-target-segment-input { ::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } ::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } ::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } - -::-webkit-scrollbar-track-piece { background-color: grayDark; } +::-webkit-scrollbar-track-piece { background-color: transparent; } ::-webkit-scrollbar-thumb:vertical { height: 50px; - background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3a3a3a), color-stop(100%, #222222)); - border: 1px solid #0d0d0d; - border-top: 1px solid #666666; - border-left: 1px solid #666666; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; } ::-webkit-scrollbar-thumb:horizontal { width: 50px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(100%, #222222)); - border: 1px solid #1f1f1f; - border-top: 1px solid #666666; - border-left: 1px solid #666666; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; } diff --git a/src/css/less/search.less b/src/css/less/search.less index 7302d7ea7a7..11a03fd0f4c 100644 --- a/src/css/less/search.less +++ b/src/css/less/search.less @@ -44,7 +44,7 @@ } .search-result-item:nth-child(odd) { - background-color: lighten(@grayDarker, 2%); + background-color: @grafanaListAccent; } .search-result-item { diff --git a/src/css/less/tables_lists.less b/src/css/less/tables_lists.less index 57cc6dce56c..faa9069ffb8 100644 --- a/src/css/less/tables_lists.less +++ b/src/css/less/tables_lists.less @@ -2,7 +2,7 @@ width: 100%; tr:nth-child(odd) td { - background-color: lighten(@grayDarker, 2%); + background-color: @grafanaListAccent; } td { @@ -39,7 +39,7 @@ max-width: 450px; li:nth-child(odd) { - background-color: lighten(@grayDarker, 2%); + background-color: @grafanaListAccent; } li { diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 34863951190..605a1672c47 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -88,13 +88,18 @@ // Lists @grafanaListBackground: transparent; -@grafanaListAccent: @grayDark; +@grafanaListAccent: lighten(@grayDarker, 2%); @grafanaListBorderTop: @grayDark; @grafanaListBorderBottom: @black; @grafanaListHighlight: @blue; @grafanaListHighlightContrast: #4F4F4F; @grafanaListMainLinkColor: @linkColor; +// Scrollbars +@scrollbarBackground: #3a3a3a; +@scrollbarBackground2: #3a3a3a; +@scrollbarBorder: black; + // Tables // ------------------------- @tableBackground: transparent; // overall background-color diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 54f217e125b..b7cdc5a6271 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -38,7 +38,7 @@ @submenuBorder: @white; // Tabs -@fullEditBorder: @white; +@fullEditBorder: @grayLighter; // Graphite Target Editor @grafanaTargetBorder: @submenuBackground; @@ -96,7 +96,7 @@ // Lists @grafanaListBackground: transparent; -@grafanaListAccent: #f9f9f9; +@grafanaListAccent: @grayLighter; @grafanaListBorderTop: #eee; @grafanaListBorderBottom: #efefef; @grafanaListHighlight: @blue; @@ -111,6 +111,11 @@ @tableBackgroundHover: #E8F8FD; // for hover @tableBorder: #ddd; // table and cell border +// Scrollbars +@scrollbarBackground: @grayLighter; +@scrollbarBackground2: @grayLighter; +@scrollbarBorder: @grayLight; + // Buttons // ------------------------- @btnBackground: @grayLighter; @@ -186,7 +191,7 @@ // Input placeholder text color // ------------------------- -@placeholderText: @gray; +@placeholderText: @grayLight; // Hr border color diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index d0825a2239c..3e3f34a8249 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -208,7 +208,16 @@ define([ }); }); + describeUpdateVariable('with include all glob no values', function(ctx) { + ctx.setup(function() { + ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; + ctx.queryResult = []; + }); + it('should add empty glob', function() { + expect(ctx.variable.options[0].value).to.be('{}'); + }); + }); }); From 0319051891efd5ef4e7d16c944d18034b381335a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 08:26:50 +0200 Subject: [PATCH 073/127] Extend template variable syntax to include , Closes #760 --- CHANGELOG.md | 1 + src/app/controllers/graphiteTarget.js | 10 ++------- src/app/directives/graphiteFuncEditor.js | 10 +++++---- src/app/partials/panelgeneral.html | 1 - src/app/services/templateSrv.js | 18 +++++++++++++++ src/css/less/grafana.less | 5 +++++ src/css/less/variables.dark.less | 1 + src/css/less/variables.light.less | 1 + src/test/specs/helpers.js | 2 ++ src/test/specs/templateSrv-specs.js | 28 ++++++++++++++++++++++++ 10 files changed, 64 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60445de8b35..07c1e5bbf5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Filter editing has gotten its own edit pane with much improved UI and options - [Issue #296](https://github.com/grafana/grafana/issues/296). Templating: Can now retrieve variable values from a non-default data source - [Issue #219](https://github.com/grafana/grafana/issues/219). Templating: Template variable value selection is now a typeahead autocomplete dropdown +- [Issue #760](https://github.com/grafana/grafana/issues/760). Templating: Extend template variable syntax to include $variable syntax replacement **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 23f7cd5b598..5cd1353988c 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -165,7 +165,7 @@ function (angular, _, config, gfunc, Parser) { _.each(templateSrv.variables, function(variable) { $scope.altSegments.unshift(new MetricSegment({ type: 'template', - value: '$' + variable.name + ']]', + value: '$' + variable.name, expandable: true, })); }); @@ -297,13 +297,7 @@ function (angular, _, config, gfunc, Parser) { this.value = options.value; this.type = options.type; this.expandable = options.expandable; - - if (options.type === 'template') { - this.html = $sce.trustAsHtml(options.value); - } - else { - this.html = $sce.trustAsHtml(this.value); - } + this.html = $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value)); } }); diff --git a/src/app/directives/graphiteFuncEditor.js b/src/app/directives/graphiteFuncEditor.js index db92240bb40..dff8003f54f 100644 --- a/src/app/directives/graphiteFuncEditor.js +++ b/src/app/directives/graphiteFuncEditor.js @@ -8,7 +8,7 @@ function (angular, _, $) { angular .module('grafana.directives') - .directive('graphiteFuncEditor', function($compile) { + .directive('graphiteFuncEditor', function($compile, templateSrv) { var funcSpanTemplate = '{{func.def.name}}('; var paramTemplate = ', ').appendTo(elem); } - var $paramLink = $('' + func.params[index] + ''); + var paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]); + var $paramLink = $('' + paramValue + ''); var $input = $(paramTemplate); paramCountAtLink++; diff --git a/src/app/partials/panelgeneral.html b/src/app/partials/panelgeneral.html index 40b46ca0618..c038c807519 100644 --- a/src/app/partials/panelgeneral.html +++ b/src/app/partials/panelgeneral.html @@ -10,6 +10,5 @@
    -
    diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 9e9dafe2c95..cf76dd5bfaa 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -40,9 +40,27 @@ function (angular, _) { this._templateData[name] = value; }; + this.variableExists = function(expression) { + this.regex.lastIndex = 0; + var match = this.regex.exec(expression); + return match && (self._templateData[match[1] || match[2]] !== void 0); + }; + + this.highlightVariablesAsHtml = function(str) { + if (!str) { return str; } + + this.regex.lastIndex = 0; + return str.replace(this.regex, function(match, g1, g2) { + if (self._templateData[g1 || g2]) { + return '' + match + ''; + } + }); + }; + this.replace = function(target) { if (!target) { return; } + this.regex.lastIndex = 0; return target.replace(this.regex, function(match, g1, g2) { return self._templateData[g1 || g2] || match; }); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index d6c4d38f618..01b2004fe11 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -479,3 +479,8 @@ select.grafana-target-segment-input { color: darken(@gray, 25%); a { color: darken(@gray, 25%); } } + +.template-variable { + color: @variable; +} + diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 605a1672c47..608dfb609b0 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -24,6 +24,7 @@ @orange: #FF8800; @pink: #FF4444; @purple: #9933CC; +@variable: #32D1DF; // grafana Variables // ------------------------- diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index b7cdc5a6271..c3453fdd92b 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -28,6 +28,7 @@ @orange: #FF7518; @pink: #E671B8; @purple: #9954BB; +@variable: #32D1DF; // grafana Variables // ------------------------- diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 7293678b6a2..e973058da96 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -95,6 +95,8 @@ define([ this.replace = function(text) { return _.template(text, this.data, this.templateSettings); }; + this.variableExists = function() { return false; }; + this.highlightVariablesAsHtml = function(str) { return str; }; this.setGrafanaVariable = function(name, value) { this.data[name] = value; }; diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index c97f2e2caf4..ecd046ac8fe 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -29,6 +29,34 @@ define([ }); }); + describe('can check if variable exists', function() { + beforeEach(function() { + _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); + }); + + it('should return true if exists', function() { + var result = _templateSrv.variableExists('$test'); + expect(result).to.be(true); + }); + }); + + describe('can hightlight variables in string', function() { + beforeEach(function() { + _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); + }); + + it('should insert html', function() { + var result = _templateSrv.highlightVariablesAsHtml('$test'); + expect(result).to.be('$test'); + }); + + it('should insert html anywhere in string', function() { + var result = _templateSrv.highlightVariablesAsHtml('this $test ok'); + expect(result).to.be('this $test ok'); + }); + + }); + describe('updateTemplateData with simple value', function() { beforeEach(function() { _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); From afc8380f23a60eb8f30a3988adbec7056a94eb2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 09:11:50 +0200 Subject: [PATCH 074/127] Work on getting template variables to work well with functions that take integers, #262 --- src/app/controllers/graphiteTarget.js | 25 +++++++++++-------------- src/app/services/graphite/gfunc.js | 3 --- src/app/services/templateSrv.js | 2 +- src/app/services/templateValuesSrv.js | 2 +- src/test/specs/gfunc-specs.js | 10 +++++----- 5 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 5cd1353988c..dd9e13b5701 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -54,6 +54,13 @@ function (angular, _, config, gfunc, Parser) { checkOtherSegments($scope.segments.length - 1); } + function addFunctionParameter(func, value, index, shiftBack) { + if (shiftBack) { + index = Math.max(index - 1, 0); + } + func.params[index] = value; + } + function parseTargeRecursive(astNode, func, index) { if (astNode === null) { return null; @@ -72,29 +79,19 @@ function (angular, _, config, gfunc, Parser) { break; case 'series-ref': - if ($scope.segments.length === 0) { - func.params[index] = astNode.value; - } - else { - func.params[index - 1] = astNode.value; - } + addFunctionParameter(func, astNode.value, index, $scope.segments.length > 0); break; case 'string': case 'number': if ((index-1) >= func.def.params.length) { throw { message: 'invalid number of parameters to method ' + func.def.name }; } - - if (index === 0) { - func.params[index] = astNode.value; - } - else { - func.params[index - 1] = astNode.value; - } + addFunctionParameter(func, astNode.value, index, true); break; case 'metric': if ($scope.segments.length > 0) { - throw { message: 'Multiple metric params not supported, use text editor.' }; + addFunctionParameter(func, astNode.segments[0].value, index, true); + break; } $scope.segments = _.map(astNode.segments, function(segment) { diff --git a/src/app/services/graphite/gfunc.js b/src/app/services/graphite/gfunc.js index 1fc1402cf0c..4968384a24f 100644 --- a/src/app/services/graphite/gfunc.js +++ b/src/app/services/graphite/gfunc.js @@ -555,9 +555,6 @@ function (_) { if (strValue === '' && this.def.params[index].optional) { this.params.splice(index, 1); } - else if (this.def.params[index].type === 'int') { - this.params[index] = parseFloat(strValue, 10); - } else { this.params[index] = strValue; } diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index cf76dd5bfaa..907065e2fa6 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -47,7 +47,7 @@ function (angular, _) { }; this.highlightVariablesAsHtml = function(str) { - if (!str) { return str; } + if (!str || !_.isString(str)) { return str; } this.regex.lastIndex = 0; return str.replace(this.regex, function(match, g1, g2) { diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index a4e79c1ca34..2f6b1cd4e94 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -56,7 +56,7 @@ function (angular, _, kbn) { return { text: text, value: text }; }); self.setVariableValue(variable, variable.options[0]); - return; + return $q.when([]); } var datasource = datasourceSrv.get(variable.datasource); diff --git a/src/test/specs/gfunc-specs.js b/src/test/specs/gfunc-specs.js index 21f32e56113..e0714d8376f 100644 --- a/src/test/specs/gfunc-specs.js +++ b/src/test/specs/gfunc-specs.js @@ -85,7 +85,7 @@ define([ it('should parse numbers as float', function() { var func = gfunc.createFuncInstance('scale'); func.updateParam('0.001', 0); - expect(func.params[0]).to.be(0.001); + expect(func.params[0]).to.be('0.001'); }); }); @@ -93,14 +93,14 @@ define([ it('should update value and text', function() { var func = gfunc.createFuncInstance('aliasByNode'); func.updateParam('1', 0); - expect(func.params[0]).to.be(1); + expect(func.params[0]).to.be('1'); }); it('should slit text and put value in second param', function() { var func = gfunc.createFuncInstance('aliasByNode'); func.updateParam('4,-5', 0); - expect(func.params[0]).to.be(4); - expect(func.params[1]).to.be(-5); + expect(func.params[0]).to.be('4'); + expect(func.params[1]).to.be('-5'); expect(func.text).to.be('aliasByNode(4, -5)'); }); @@ -108,7 +108,7 @@ define([ var func = gfunc.createFuncInstance('aliasByNode'); func.updateParam('4,-5', 0); func.updateParam('', 1); - expect(func.params[0]).to.be(4); + expect(func.params[0]).to.be('4'); expect(func.params[1]).to.be(undefined); expect(func.text).to.be('aliasByNode(4)'); }); From 4e5dcafa1b2101bb439a770719bace8ad0410f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 12:07:48 +0200 Subject: [PATCH 075/127] working on auto interval template variable support --- src/app/controllers/templateEditorCtrl.js | 2 +- src/app/partials/panelgeneral.html | 2 +- src/app/partials/templating_editor.html | 26 ++- src/app/services/templateSrv.js | 39 +++-- src/app/services/templateValuesSrv.js | 29 +++- src/app/services/timeSrv.js | 1 + src/test/specs/helpers.js | 19 ++- src/test/specs/templateValuesSrv-specs.js | 199 ++++++++++------------ src/test/specs/timeSrv-specs.js | 28 +-- 9 files changed, 192 insertions(+), 153 deletions(-) diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index e4e93b568b3..058a190658b 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -69,7 +69,7 @@ function (angular, _) { }; $scope.typeChanged = function () { - if ($scope.current.type === 'time period') { + if ($scope.current.type === 'interval') { $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; } }; diff --git a/src/app/partials/panelgeneral.html b/src/app/partials/panelgeneral.html index c038c807519..e0df648db0a 100644 --- a/src/app/partials/panelgeneral.html +++ b/src/app/partials/panelgeneral.html @@ -8,7 +8,7 @@
    - +
    diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 22ab029061e..afed151d616 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -58,7 +58,7 @@
    - +
    @@ -70,10 +70,22 @@
    -
    -
    - - +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    @@ -101,7 +113,7 @@
    - +
    @@ -119,7 +131,7 @@ {{option.text}} -
    +
    diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 907065e2fa6..26263780406 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -10,15 +10,18 @@ function (angular, _) { module.service('templateSrv', function($q, $routeParams) { var self = this; + this._regex = /\$(\w+)|\[\[([\s\S]+?)\]\]/g; + this._templateData = {}; + this._grafanaVariables = {}; + this.init = function(variables) { - this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; this.variables = variables; - this.regex = /\$(\w+)|\[\[([\s\S]+?)\]\]/g; this.updateTemplateData(true); }; this.updateTemplateData = function(initial) { - var _templateData = {}; + var data = {}; + _.each(this.variables, function(variable) { if (initial) { var urlValue = $routeParams[ variable.name ]; @@ -26,31 +29,32 @@ function (angular, _) { variable.current = { text: urlValue, value: urlValue }; } } + if (!variable.current || !variable.current.value) { return; } - _templateData[variable.name] = variable.current.value; - + data[variable.name] = variable.current.value; }); - this._templateData = _templateData; + + this._templateData = data; }; - this.setGrafanaVariable = function(name, value) { - this._templateData[name] = value; + this.setGrafanaVariable = function (name, value) { + this._grafanaVariables[name] = value; }; this.variableExists = function(expression) { - this.regex.lastIndex = 0; - var match = this.regex.exec(expression); + this._regex.lastIndex = 0; + var match = this._regex.exec(expression); return match && (self._templateData[match[1] || match[2]] !== void 0); }; this.highlightVariablesAsHtml = function(str) { if (!str || !_.isString(str)) { return str; } - this.regex.lastIndex = 0; - return str.replace(this.regex, function(match, g1, g2) { + this._regex.lastIndex = 0; + return str.replace(this._regex, function(match, g1, g2) { if (self._templateData[g1 || g2]) { return '' + match + ''; } @@ -60,9 +64,14 @@ function (angular, _) { this.replace = function(target) { if (!target) { return; } - this.regex.lastIndex = 0; - return target.replace(this.regex, function(match, g1, g2) { - return self._templateData[g1 || g2] || match; + var value; + this._regex.lastIndex = 0; + + return target.replace(this._regex, function(match, g1, g2) { + value = self._templateData[g1 || g2]; + if (!value) { return match; } + + return self._grafanaVariables[value] || value; }); }; diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 2f6b1cd4e94..e1dc2b89741 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -8,12 +8,18 @@ function (angular, _, kbn) { var module = angular.module('grafana.services'); - module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $routeParams, templateSrv) { + module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $routeParams, templateSrv, timeSrv) { var self = this; + $rootScope.onAppEvent('time-range-changed', function() { + var variable = _.findWhere(self.variables, { type: 'interval' }); + if (variable) { + self.updateAutoInterval(variable); + } + }); + this.init = function(dashboard) { this.variables = dashboard.templating.list; - templateSrv.init(this.variables); for (var i = 0; i < this.variables.length; i++) { @@ -21,9 +27,24 @@ function (angular, _, kbn) { if (param.refresh) { this.updateOptions(param); } + else if (param.type === 'interval') { + this.updateAutoInterval(param); + } } }; + this.updateAutoInterval = function(variable) { + if (!variable.auto) { return; } + + // add auto option if missing + if (variable.options[0].text !== 'auto') { + variable.options.unshift({ text: 'auto', value: '$__auto_interval' }); + } + + var interval = kbn.calculateInterval(timeSrv.timeRange(), variable.auto_count); + templateSrv.setGrafanaVariable('$__auto_interval', interval); + }; + this.setVariableValue = function(variable, option, recursive) { variable.current = option; @@ -51,10 +72,12 @@ function (angular, _, kbn) { }; this.updateOptions = function(variable) { - if (variable.type === 'time period') { + if (variable.type === 'interval') { variable.options = _.map(variable.query.split(','), function(text) { return { text: text, value: text }; }); + + self.updateAutoInterval(variable); self.setVariableValue(variable, variable.options[0]); return $q.when([]); } diff --git a/src/app/services/timeSrv.js b/src/app/services/timeSrv.js index d560956f90f..7d81d8fe375 100644 --- a/src/app/services/timeSrv.js +++ b/src/app/services/timeSrv.js @@ -61,6 +61,7 @@ define([ this.old_refresh = null; } + $rootScope.emitAppEvent('time-range-changed', this.time); $timeout(this.refreshDashboard, 0); }; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index e973058da96..35cde542de6 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -49,20 +49,28 @@ define([ function ServiceTestContext() { var self = this; self.templateSrv = new TemplateSrvStub(); + self.timeSrv = new TimeSrvStub(); + self.datasourceSrv = {}; - this.providePhase = function() { + this.providePhase = function(mocks) { return module(function($provide) { - $provide.value('templateSrv', self.templateSrv); + _.each(mocks, function(key) { + $provide.value(key, self[key]); + }); }); }; this.createService = function(name) { - return inject([name, '$q', '$rootScope', '$httpBackend', function(service, $q, $rootScope, $httpBackend) { - self.service = service; + return inject(function($q, $rootScope, $httpBackend, $injector) { self.$q = $q; self.$rootScope = $rootScope; self.$httpBackend = $httpBackend; - }]); + + self.$rootScope.onAppEvent = function() {}; + self.$rootScope.emitAppEvent = function() {}; + + self.service = $injector.get(name); + }); }; } @@ -95,6 +103,7 @@ define([ this.replace = function(text) { return _.template(text, this.data, this.templateSettings); }; + this.updateTemplateData = function() { }; this.variableExists = function() { return false; }; this.highlightVariablesAsHtml = function(str) { return str; }; this.setGrafanaVariable = function(name, value) { diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index 3e3f34a8249..4461d93faf2 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -1,37 +1,22 @@ define([ 'mocks/dashboard-mock', - 'lodash', + './helpers', 'services/templateValuesSrv' -], function(dashboardMock) { +], function(dashboardMock, helpers) { 'use strict'; describe('templateValuesSrv', function() { - var _templateValuesSrv; - var _dashboard; - var _datasourceSrv = {}; - var _q; - var _rootScope; + var ctx = new helpers.ServiceTestContext(); beforeEach(module('grafana.services')); - beforeEach(module(function($provide) { - $provide.value('datasourceSrv', _datasourceSrv); - $provide.value('templateSrv', { - updateTemplateData: function() {} - }); - _dashboard = dashboardMock.create(); - })); - - beforeEach(inject(function(templateValuesSrv, $rootScope, $q) { - _templateValuesSrv = templateValuesSrv; - _rootScope = $rootScope; - _q = $q; - })); + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv'])); + beforeEach(ctx.createService('templateValuesSrv')); describe('update time period variable options', function() { - var variable = { type: 'time period', query: 'auto,1s,2h,5h,1d', name: 'test' }; + var variable = { type: 'interval', query: 'auto,1s,2h,5h,1d', name: 'test' }; beforeEach(function() { - _templateValuesSrv.updateOptions(variable); + ctx.service.updateOptions(variable); }); it('should update options array', function() { @@ -43,179 +28,179 @@ define([ function describeUpdateVariable(desc, fn) { describe(desc, function() { - var ctx = {}; - ctx.setup = function(setupFn) { - ctx.setupFn = setupFn; + var scenario = {}; + scenario.setup = function(setupFn) { + scenario.setupFn = setupFn; }; beforeEach(function() { - ctx.setupFn(); + scenario.setupFn(); var ds = {}; - ds.metricFindQuery = sinon.stub().returns(_q.when(ctx.queryResult)); - _datasourceSrv.get = sinon.stub().returns(ds); + ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); + ctx.datasourceSrv.get = sinon.stub().returns(ds); - _templateValuesSrv.updateOptions(ctx.variable); - _rootScope.$digest(); + ctx.service.updateOptions(scenario.variable); + ctx.$rootScope.$digest(); }); - fn(ctx); + fn(scenario); }); } - describeUpdateVariable('time period variable ', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'time period', query: 'auto,1s,2h,5h,1d', name: 'test' }; + describeUpdateVariable('time period variable ', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'interval', query: 'auto,1s,2h,5h,1d', name: 'test' }; }); it('should update options array', function() { - expect(ctx.variable.options.length).to.be(5); - expect(ctx.variable.options[1].text).to.be('1s'); - expect(ctx.variable.options[1].value).to.be('1s'); + expect(scenario.variable.options.length).to.be(5); + expect(scenario.variable.options[1].text).to.be('1s'); + expect(scenario.variable.options[1].value).to.be('1s'); }); }); - describeUpdateVariable('basic query variable', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + describeUpdateVariable('basic query variable', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; }); it('should update options array', function() { - expect(ctx.variable.options.length).to.be(2); - expect(ctx.variable.options[0].text).to.be('backend1'); - expect(ctx.variable.options[0].value).to.be('backend1'); - expect(ctx.variable.options[1].value).to.be('backend2'); + expect(scenario.variable.options.length).to.be(2); + expect(scenario.variable.options[0].text).to.be('backend1'); + expect(scenario.variable.options[0].value).to.be('backend1'); + expect(scenario.variable.options[1].value).to.be('backend2'); }); it('should select first option as value', function() { - expect(ctx.variable.current.value).to.be('backend1'); + expect(scenario.variable.current.value).to.be('backend1'); }); }); - describeUpdateVariable('and existing value still exists in options', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.current = { value: 'backend2'}; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + describeUpdateVariable('and existing value still exists in options', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.current = { value: 'backend2'}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; }); it('should keep variable value', function() { - expect(ctx.variable.current.value).to.be('backend2'); + expect(scenario.variable.current.value).to.be('backend2'); }); }); - describeUpdateVariable('and regex pattern exists', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.regex = '/apps.*(backend_[0-9]+)/'; - ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + describeUpdateVariable('and regex pattern exists', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.regex = '/apps.*(backend_[0-9]+)/'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; }); it('should extract and use match group', function() { - expect(ctx.variable.options[0].value).to.be('backend_01'); + expect(scenario.variable.options[0].value).to.be('backend_01'); }); }); - describeUpdateVariable('and regex pattern exists and no match', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.regex = '/apps.*(backendasd[0-9]+)/'; - ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + describeUpdateVariable('and regex pattern exists and no match', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.regex = '/apps.*(backendasd[0-9]+)/'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; }); it('should not add non matching items', function() { - expect(ctx.variable.options.length).to.be(0); + expect(scenario.variable.options.length).to.be(0); }); }); - describeUpdateVariable('regex pattern without slashes', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.regex = 'backend_01'; - ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + describeUpdateVariable('regex pattern without slashes', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.regex = 'backend_01'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; }); it('should return matches options', function() { - expect(ctx.variable.options.length).to.be(1); + expect(scenario.variable.options.length).to.be(1); }); }); - describeUpdateVariable('regex pattern remove duplicates', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.regex = 'backend_01'; - ctx.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_01.counters.req'}]; + describeUpdateVariable('regex pattern remove duplicates', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.regex = 'backend_01'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_01.counters.req'}]; }); it('should return matches options', function() { - expect(ctx.variable.options.length).to.be(1); + expect(scenario.variable.options.length).to.be(1); }); }); - describeUpdateVariable('and existing value still exists in options', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test' }; - ctx.variable.current = { value: 'backend2'}; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + describeUpdateVariable('and existing value still exists in options', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.variable.current = { value: 'backend2'}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; }); it('should keep variable value', function() { - expect(ctx.variable.current.value).to.be('backend2'); + expect(scenario.variable.current.value).to.be('backend2'); }); }); - describeUpdateVariable('with include All glob syntax', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + describeUpdateVariable('with include All glob syntax', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; }); it('should add All Glob option', function() { - expect(ctx.variable.options[0].value).to.be('{backend1,backend2,backend3}'); + expect(scenario.variable.options[0].value).to.be('{backend1,backend2,backend3}'); }); }); - describeUpdateVariable('with include all wildcard', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + describeUpdateVariable('with include all wildcard', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; }); it('should add All wildcard option', function() { - expect(ctx.variable.options[0].value).to.be('*'); + expect(scenario.variable.options[0].value).to.be('*'); }); }); - describeUpdateVariable('with include all wildcard', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'regex wildcard' }; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + describeUpdateVariable('with include all wildcard', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'regex wildcard' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; }); it('should add All wildcard option', function() { - expect(ctx.variable.options[0].value).to.be('.*'); + expect(scenario.variable.options[0].value).to.be('.*'); }); }); - describeUpdateVariable('with include all regex values', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; - ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + describeUpdateVariable('with include all regex values', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; }); it('should add All wildcard option', function() { - expect(ctx.variable.options[0].value).to.be('*'); + expect(scenario.variable.options[0].value).to.be('*'); }); }); - describeUpdateVariable('with include all glob no values', function(ctx) { - ctx.setup(function() { - ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; - ctx.queryResult = []; + describeUpdateVariable('with include all glob no values', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; + scenario.queryResult = []; }); it('should add empty glob', function() { - expect(ctx.variable.options[0].value).to.be('{}'); + expect(scenario.variable.options[0].value).to.be('{}'); }); }); diff --git a/src/test/specs/timeSrv-specs.js b/src/test/specs/timeSrv-specs.js index 615656afcdf..a0bc053b1e1 100644 --- a/src/test/specs/timeSrv-specs.js +++ b/src/test/specs/timeSrv-specs.js @@ -1,35 +1,35 @@ define([ 'mocks/dashboard-mock', + './helpers', 'lodash', 'services/timeSrv' -], function(dashboardMock, _) { +], function(dashboardMock, helpers, _) { 'use strict'; describe('timeSrv', function() { - var _timeSrv; + var ctx = new helpers.ServiceTestContext(); var _dashboard; beforeEach(module('grafana.services')); - beforeEach(inject(function(timeSrv) { - _timeSrv = timeSrv; - _dashboard = dashboardMock.create(); - })); + beforeEach(ctx.providePhase()); + beforeEach(ctx.createService('timeSrv')); beforeEach(function() { - _timeSrv.init(_dashboard); + _dashboard = dashboardMock.create(); + ctx.service.init(_dashboard); }); describe('timeRange', function() { it('should return unparsed when parse is false', function() { - _timeSrv.setTime({from: 'now', to: 'now-1h' }); - var time = _timeSrv.timeRange(false); + ctx.service.setTime({from: 'now', to: 'now-1h' }); + var time = ctx.service.timeRange(false); expect(time.from).to.be('now'); expect(time.to).to.be('now-1h'); }); it('should return parsed when parse is true', function() { - _timeSrv.setTime({from: 'now', to: 'now-1h' }); - var time = _timeSrv.timeRange(true); + ctx.service.setTime({from: 'now', to: 'now-1h' }); + var time = ctx.service.timeRange(true); expect(_.isDate(time.from)).to.be(true); expect(_.isDate(time.to)).to.be(true); }); @@ -39,15 +39,15 @@ define([ it('should return disable refresh for absolute times', function() { _dashboard.refresh = false; - _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); + ctx.service.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); }); it('should restore refresh after relative time range is set', function() { _dashboard.refresh = '10s'; - _timeSrv.setTime({from: '2011-01-01', to: '2015-01-01' }); + ctx.service.setTime({from: '2011-01-01', to: '2015-01-01' }); expect(_dashboard.refresh).to.be(false); - _timeSrv.setTime({from: '2011-01-01', to: 'now' }); + ctx.service.setTime({from: '2011-01-01', to: 'now' }); expect(_dashboard.refresh).to.be('10s'); }); }); From 656b3e53a8b2fc3ad8f2109214b6894e5921e6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 13:31:34 +0200 Subject: [PATCH 076/127] Templating: Interval variable type for time intervals summarize/group by parameter, included auto option, and auto step counts option. Closes #243 --- src/app/partials/templating_editor.html | 4 +- .../services/graphite/graphiteDatasource.js | 10 +++++ src/test/specs/graphiteDatasource-specs.js | 14 +++++++ src/test/specs/templateValuesSrv-specs.js | 39 ++++++++++++++++--- 4 files changed, 59 insertions(+), 8 deletions(-) diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index afed151d616..8a3ea086eca 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -83,8 +83,8 @@
    - - + +
    diff --git a/src/app/services/graphite/graphiteDatasource.js b/src/app/services/graphite/graphiteDatasource.js index 62f0bdabedb..20ef5cbfa3a 100644 --- a/src/app/services/graphite/graphiteDatasource.js +++ b/src/app/services/graphite/graphiteDatasource.js @@ -222,14 +222,24 @@ function (angular, _, $, config, kbn, moment) { var clean_options = [], targets = {}; var target, targetValue, i; var regex = /(\#[A-Z])/g; + var intervalFormatFixRegex = /'(\d+)m'/gi; if (options.format !== 'png') { options['format'] = 'json'; } + function fixIntervalFormat(match) { + return match.replace('m', 'min').replace('M', 'mon'); + } + for (i = 0; i < options.targets.length; i++) { target = options.targets[i]; + if (!target.target) { + continue; + } + targetValue = templateSrv.replace(target.target); + targetValue = targetValue.replace(intervalFormatFixRegex, fixIntervalFormat); targets[this._seriesRefLetters[i]] = targetValue; } diff --git a/src/test/specs/graphiteDatasource-specs.js b/src/test/specs/graphiteDatasource-specs.js index 49ebba9bebf..99270867266 100644 --- a/src/test/specs/graphiteDatasource-specs.js +++ b/src/test/specs/graphiteDatasource-specs.js @@ -74,6 +74,20 @@ define([ expect(results[2]).to.be('target=asPercent(series1%2Cseries2)'); }); + it('should fix wrong minute interval parameters', function() { + var results = ctx.ds.buildGraphiteParams({ + targets: [{target: "summarize(prod.25m.count, '25m', 'sum')" }] + }); + expect(results[0]).to.be('target=' + encodeURIComponent("summarize(prod.25m.count, '25min', 'sum')")); + }); + + it('should fix wrong month interval parameters', function() { + var results = ctx.ds.buildGraphiteParams({ + targets: [{target: "summarize(prod.5M.count, '5M', 'sum')" }] + }); + expect(results[0]).to.be('target=' + encodeURIComponent("summarize(prod.5M.count, '5mon', 'sum')")); + }); + it('should ignore empty targets', function() { var results = ctx.ds.buildGraphiteParams({ targets: [{target: 'series1'}, {target: ''}] diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index 4461d93faf2..abf44442db5 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -1,8 +1,9 @@ define([ 'mocks/dashboard-mock', './helpers', + 'moment', 'services/templateValuesSrv' -], function(dashboardMock, helpers) { +], function(dashboardMock, helpers, moment) { 'use strict'; describe('templateValuesSrv', function() { @@ -12,7 +13,7 @@ define([ beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv'])); beforeEach(ctx.createService('templateValuesSrv')); - describe('update time period variable options', function() { + describe('update interval variable options', function() { var variable = { type: 'interval', query: 'auto,1s,2h,5h,1d', name: 'test' }; beforeEach(function() { @@ -47,15 +48,41 @@ define([ }); } - describeUpdateVariable('time period variable ', function(scenario) { + describeUpdateVariable('interval variable without auto', function(scenario) { scenario.setup(function() { - scenario.variable = { type: 'interval', query: 'auto,1s,2h,5h,1d', name: 'test' }; + scenario.variable = { type: 'interval', query: '1s,2h,5h,1d', name: 'test' }; + }); + + it('should update options array', function() { + expect(scenario.variable.options.length).to.be(4); + expect(scenario.variable.options[0].text).to.be('1s'); + expect(scenario.variable.options[0].value).to.be('1s'); + }); + }); + + describeUpdateVariable('interval variable with auto', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'interval', query: '1s,2h,5h,1d', name: 'test', auto: true, auto_count: 10 }; + + var range = { + from: moment(new Date()).subtract(7, 'days').toDate(), + to: new Date() + }; + + ctx.timeSrv.timeRange = sinon.stub().returns(range); + ctx.templateSrv.setGrafanaVariable = sinon.spy(); }); it('should update options array', function() { expect(scenario.variable.options.length).to.be(5); - expect(scenario.variable.options[1].text).to.be('1s'); - expect(scenario.variable.options[1].value).to.be('1s'); + expect(scenario.variable.options[0].text).to.be('auto'); + expect(scenario.variable.options[0].value).to.be('$__auto_interval'); + }); + + it('should set $__auto_interval', function() { + var call = ctx.templateSrv.setGrafanaVariable.getCall(0); + expect(call.args[0]).to.be('$__auto_interval'); + expect(call.args[1]).to.be('12h'); }); }); From cc96cfe0c768fb7cd6012041c2781603f4c66df1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 14:03:36 +0200 Subject: [PATCH 077/127] Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example, Closes #262 --- CHANGELOG.md | 2 ++ src/app/partials/templating_editor.html | 9 +++++++++ src/app/services/templateSrv.js | 1 + src/app/services/templateValuesSrv.js | 17 ++++++++++++----- src/test/specs/templateSrv-specs.js | 5 +++++ src/test/specs/templateValuesSrv-specs.js | 18 ++++++++++++++++++ 6 files changed, 47 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 07c1e5bbf5d..ca08e5a744d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ - [Issue #296](https://github.com/grafana/grafana/issues/296). Templating: Can now retrieve variable values from a non-default data source - [Issue #219](https://github.com/grafana/grafana/issues/219). Templating: Template variable value selection is now a typeahead autocomplete dropdown - [Issue #760](https://github.com/grafana/grafana/issues/760). Templating: Extend template variable syntax to include $variable syntax replacement +- [Issue #234](https://github.com/grafana/grafana/issues/234). Templating: Interval variable type for time intervals summarize/group by parameter, included "auto" option, and auto step counts option. +- [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 8a3ea086eca..b0431b8d1e3 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -89,6 +89,15 @@ +
    +
    +
    + + +
    +
    +
    +
    diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 26263780406..f8247d1c5cb 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -58,6 +58,7 @@ function (angular, _) { if (self._templateData[g1 || g2]) { return '' + match + ''; } + return match; }); }; diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index e1dc2b89741..52d3f51ccb3 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -71,13 +71,20 @@ function (angular, _, kbn) { return $q.all(promises); }; - this.updateOptions = function(variable) { - if (variable.type === 'interval') { - variable.options = _.map(variable.query.split(','), function(text) { - return { text: text, value: text }; - }); + this._updateNonQueryVariable = function(variable) { + // extract options in comma seperated string + variable.options = _.map(variable.query.split(/[\s,]+/), function(text) { + return { text: text, value: text }; + }); + if (variable.type === 'interval') { self.updateAutoInterval(variable); + } + }; + + this.updateOptions = function(variable) { + if (variable.type !== 'query') { + self._updateNonQueryVariable(variable); self.setVariableValue(variable, variable.options[0]); return $q.when([]); } diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index ecd046ac8fe..ac711dce66a 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -55,6 +55,11 @@ define([ expect(result).to.be('this $test ok'); }); + it('should ignore if variables does not exist', function() { + var result = _templateSrv.highlightVariablesAsHtml('this $google ok'); + expect(result).to.be('this $google ok'); + }); + }); describe('updateTemplateData with simple value', function() { diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index abf44442db5..f1faa8d595a 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -86,6 +86,24 @@ define([ }); }); + describeUpdateVariable('update custom variable', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'custom', query: 'hej, hop, asd', name: 'test'}; + }); + + it('should update options array', function() { + expect(scenario.variable.options.length).to.be(3); + expect(scenario.variable.options[0].text).to.be('hej'); + expect(scenario.variable.options[1].value).to.be('hop'); + }); + + it('should set $__auto_interval', function() { + var call = ctx.templateSrv.setGrafanaVariable.getCall(0); + expect(call.args[0]).to.be('$__auto_interval'); + expect(call.args[1]).to.be('12h'); + }); + }); + describeUpdateVariable('basic query variable', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; From 58a2ab4fbd1c42da0915834e63ba5b39095e51e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 15:17:19 +0200 Subject: [PATCH 078/127] Templating: Can now use template variables in panel titles, Closes #312 --- CHANGELOG.md | 3 +- src/app/directives/grafanaPanel.js | 2 +- src/app/filters/all.js | 59 ++---------------------------- 3 files changed, 6 insertions(+), 58 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca08e5a744d..5e2c96b56ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ **UI polish / changes** - [Issue #725](https://github.com/grafana/grafana/issues/725). UI: All modal editors are removed and replaced by an edit pane under menu. The look of editors is also updated and polished. Search dropdown is also shown as pane under menu and has seen some UI polish. -**Filtering feature overhaul** +**Filtering/Templating feature overhaul** - Filtering renamed to Templating, and filter items to variables - Filter editing has gotten its own edit pane with much improved UI and options - [Issue #296](https://github.com/grafana/grafana/issues/296). Templating: Can now retrieve variable values from a non-default data source @@ -11,6 +11,7 @@ - [Issue #760](https://github.com/grafana/grafana/issues/760). Templating: Extend template variable syntax to include $variable syntax replacement - [Issue #234](https://github.com/grafana/grafana/issues/234). Templating: Interval variable type for time intervals summarize/group by parameter, included "auto" option, and auto step counts option. - [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example +- [Issue #312](https://github.com/grafana/grafana/issues/312). Templating: Can now use template variables in panel titles **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index db296d4d45a..5f56fd67b35 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -40,7 +40,7 @@ function (angular, $) { 'onStop:\'panelMoveStop\''+ '}" ng-model="panel" ' + '>' + - '{{panel.title || "No title"}}' + + '{{panel.title | interpolateTemplateVars}}' + '' + ''+ diff --git a/src/app/filters/all.js b/src/app/filters/all.js index 926051d4a0d..b2729d120dd 100755 --- a/src/app/filters/all.js +++ b/src/app/filters/all.js @@ -9,18 +9,6 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen }; }); - /* - Filter an array of objects by elasticsearch version requirements - */ - module.filter('esVersion', function(esVersion) { - return function(items, require) { - var ret = _.filter(items,function(qt) { - return esVersion.is(qt[require]) ? true : false; - }); - return ret; - }; - }); - module.filter('slice', function() { return function(arr, start, end) { if(!_.isUndefined(arr)) { @@ -67,51 +55,10 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen }; }); - module.filter('urlLink', function() { - var //URLs starting with http://, https://, or ftp:// - r1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, - //URLs starting with "www." (without // before it, or it'd re-link the ones done above). - r2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim, - //Change email addresses to mailto:: links. - r3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; - - var urlLink = function(text) { - var t1,t2,t3; - if(!_.isString(text)) { - return text; - } else { - _.each(text.match(r1), function() { - t1 = text.replace(r1, "$1"); - }); - text = t1 || text; - _.each(text.match(r2), function() { - t2 = text.replace(r2, "$1$2"); - }); - text = t2 || text; - _.each(text.match(r3), function() { - t3 = text.replace(r3, "$1"); - }); - text = t3 || text; - return text; - } - }; + module.filter('interpolateTemplateVars', function(templateSrv) { return function(text) { - return _.isArray(text) - ? _.map(text, urlLink) - : urlLink(text); + return templateSrv.replace(text); }; }); - module.filter('gistid', function() { - var gist_pattern = /(\d{5,})|([a-z0-9]{10,})|(gist.github.com(\/*.*)\/[a-z0-9]{5,}\/*$)/; - return function(input) { - if(!(_.isUndefined(input))) { - var output = input.match(gist_pattern); - if(!_.isNull(output) && !_.isUndefined(output)) { - return output[0].replace(/.*\//, ''); - } - } - }; - }); - -}); \ No newline at end of file +}); From d74954913509bd5482f9785cdd21ba2a05974b4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 15:46:29 +0200 Subject: [PATCH 079/127] Templating: Full support for InfluxDB, filter by part of series names, extract series substrings, nested queries, multipe where clauses! Closes #613 --- CHANGELOG.md | 1 + src/app/partials/templating_editor.html | 4 ++-- src/app/services/templateValuesSrv.js | 5 ++++- src/test/specs/templateValuesSrv-specs.js | 11 +++++++++++ 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e2c96b56ea..1fb7ec258ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - [Issue #234](https://github.com/grafana/grafana/issues/234). Templating: Interval variable type for time intervals summarize/group by parameter, included "auto" option, and auto step counts option. - [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example - [Issue #312](https://github.com/grafana/grafana/issues/312). Templating: Can now use template variables in panel titles +- [Issue #613](https://github.com/grafana/grafana/issues/613). Templating: Full support for InfluxDB, filter by part of series names, extract series substrings, nested queries, multipe where clauses! **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index b0431b8d1e3..b030f4358f2 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -122,11 +122,11 @@
    - +
    - +
    diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 52d3f51ccb3..511d5bfb495 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -117,7 +117,7 @@ function (angular, _, kbn) { options = {}; // use object hash to remove duplicates if (variable.regex) { - regex = kbn.stringToJsRegex(variable.regex); + regex = kbn.stringToJsRegex(templateSrv.replace(variable.regex)); } for (i = 0; i < metricNames.length; i++) { @@ -148,6 +148,9 @@ function (angular, _, kbn) { case 'regex wildcard': allValue = '.*'; break; + case 'regex values': + allValue = '(' + _.pluck(variable.options, 'text').join('|') + ')'; + break; default: allValue = '{'; allValue += _.pluck(variable.options, 'text').join(','); diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index f1faa8d595a..eb1b0225618 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -249,6 +249,17 @@ define([ }); }); + describeUpdateVariable('with include all regex all values', function(scenario) { + scenario.setup(function() { + scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'regex values' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add empty glob', function() { + expect(scenario.variable.options[0].value).to.be('(backend1|backend2|backend3)'); + }); + }); + }); }); From fb08b718841b92a4d7ca3cca6332f5c147b855d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Sep 2014 17:44:38 +0200 Subject: [PATCH 080/127] Small fix to graphite target controller to still revert to text box for expressions with multiple series that do not use a series reference --- src/app/controllers/graphiteTarget.js | 3 ++ src/app/services/panelSrv.js | 5 +- src/css/less/grafana.less | 1 + src/css/less/overrides.less | 69 -------------------------- src/css/less/panel.less | 71 +++++++++++++++++++++++++++ 5 files changed, 77 insertions(+), 72 deletions(-) create mode 100644 src/css/less/panel.less diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index dd9e13b5701..cd13926cc80 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -90,6 +90,9 @@ function (angular, _, config, gfunc, Parser) { break; case 'metric': if ($scope.segments.length > 0) { + if ($scope.segments[0].length !== 1) { + throw { message: 'Multiple metric params not supported, use text editor.' }; + } addFunctionParameter(func, astNode.segments[0].value, index, true); break; } diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index ef78dbe11ed..7d664d94b6c 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -9,9 +9,8 @@ function (angular, _) { module.service('panelSrv', function($rootScope, $timeout, datasourceSrv) { this.init = function($scope) { - if (!$scope.panel.span) { - $scope.panel.span = 12; - } + if (!$scope.panel.span) { $scope.panel.span = 12; } + if (!$scope.panel.title) { $scope.panel.title = 'No title'; } var menu = [ { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 01b2004fe11..022319a1042 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -4,6 +4,7 @@ @import "bootstrap-tagsinput.less"; @import "tables_lists.less"; @import "search.less"; +@import "panel.less"; .hide-controls { padding: 0; diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 605bc9a4cf0..4415c85d3c0 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -65,75 +65,6 @@ code, pre { background-color: @grayLighter; } -.panel { - display: inline-block; - float: left; - vertical-align: top; -} - -.panel-container { - padding: 0px 0px 0px 0px; - background: @grafanaPanelBackground; - margin: 5px; - position: relative; -} - -.panel-content { - padding: 0px 10px 5px 10px; -} - -.panel-title { - border: 0px; - font-weight: bold; -} - -.panel-loading { - position:absolute; - top: 0px; - right: 4px; - z-index: 800; -} - -.panel div.panel-extra div.panel-extra-container { - margin-right: -10px; - margin-top: 3px; - text-align: center; - ul { - text-align: left; - } -} - -.panel div.panel-extra { - font-size: 0.9em; - margin-bottom: 0px; -} - -.panel div.panel-extra .extra { - float:right !important; -} - -.panel-error { - color: @white; - position: absolute; - left: 0; - padding: 0px 17px 6px 5px; - top: 0; - i { - position: relative; - top: -2px; - } -} -.panel-error-arrow { - width: 0; - height: 0; - position: absolute; - border-left: 31px solid transparent; - border-right: 30px solid transparent; - border-bottom: 27px solid @grafanaPanelBackground; - left: 0; - bottom: 0; -} - div.editor-row { vertical-align: top; } diff --git a/src/css/less/panel.less b/src/css/less/panel.less new file mode 100644 index 00000000000..19e5a077872 --- /dev/null +++ b/src/css/less/panel.less @@ -0,0 +1,71 @@ +.panel { + display: inline-block; + float: left; + vertical-align: top; +} + +.panel-container { + padding: 0px 0px 0px 0px; + background: @grafanaPanelBackground; + margin: 5px; + position: relative; +} + +.panel-content { + padding: 0px 10px 5px 10px; +} + +.panel-title { + border: 0px; + font-weight: bold; + position: relative; +} + +.panel-loading { + position:absolute; + top: 0px; + right: 4px; + z-index: 800; +} + +.panel div.panel-extra div.panel-extra-container { + margin-right: -10px; + margin-top: 3px; + text-align: center; + ul { + text-align: left; + } +} + +.panel div.panel-extra { + font-size: 0.9em; + margin-bottom: 0px; +} + +.panel div.panel-extra .extra { + float:right !important; +} + +.panel-error { + color: @white; + position: absolute; + left: 0; + padding: 0px 17px 6px 5px; + top: 0; + i { + position: relative; + top: -2px; + } +} + +.panel-error-arrow { + width: 0; + height: 0; + position: absolute; + border-left: 31px solid transparent; + border-right: 30px solid transparent; + border-bottom: 27px solid @grafanaPanelBackground; + left: 0; + bottom: 0; +} + From 6337c77532bf2ee9919ac1b30116b8cd498eb9ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Sep 2014 09:49:21 +0200 Subject: [PATCH 081/127] Rename of edit label on graph panel --- src/app/panels/graph/module.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index b7751d98e50..b4302bbd0f2 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -25,7 +25,7 @@
    - Chart settings + Graph
    From e729b3734d46bb1c4832a17ff08442df4acada32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Sep 2014 10:05:58 +0200 Subject: [PATCH 082/127] Fix for selecting template variable value from typeahead using enter key, Closes #765 --- src/app/directives/templateParamSelector.js | 4 ++-- src/app/partials/submenu.html | 4 +++- src/app/partials/templating_editor.html | 4 +++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index f05d6959198..545e2e89661 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -40,9 +40,9 @@ function (angular, app, _, $) { minLength: 0, items: 10, updater: function(value) { - updateVariableValue(value); + $input.val(value); $input.trigger('blur'); - return ''; + return value; } }); diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 029e11bfd15..42884a84058 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -21,7 +21,9 @@ VARIABLES
  • - {{variable.name}}: + + ${{variable.name}}: +
  • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index b030f4358f2..90d1fb50d26 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -23,7 +23,9 @@
    • - [[{{variable.name}}]] + + ${{variable.name}} + {{variable.query}} From 6c71754e515bd723e6ed27b8ac7a12b0da3d4192 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Sep 2014 10:12:28 +0200 Subject: [PATCH 083/127] Changed template variable typeahead/autocomplete list limit from 10 to 1000, Fixes #767, Fixes #768 --- src/app/directives/templateParamSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index 545e2e89661..194dfbdcb40 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -38,7 +38,7 @@ function (angular, app, _, $) { $input.attr('data-provide', 'typeahead'); $input.typeahead({ minLength: 0, - items: 10, + items: 1000, updater: function(value) { $input.val(value); $input.trigger('blur'); From 9e7c55728fdb8c46b1c710a19cd84e611839a0d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Sep 2014 18:05:54 +0200 Subject: [PATCH 084/127] small cleanup of unused code --- src/app/controllers/dashboardCtrl.js | 10 +--------- src/app/partials/paneladd.html | 6 ------ src/app/services/dashboard/dashboardKeyBindings.js | 2 +- 3 files changed, 2 insertions(+), 16 deletions(-) delete mode 100644 src/app/partials/paneladd.html diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 8ccbb170d8a..b9893b2dcda 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -44,7 +44,7 @@ function (angular, $, config, _) { $scope.setupDashboard = function(event, dashboardData) { $rootScope.performance.dashboardLoadStart = new Date().getTime(); $rootScope.performance.panelsInitialized = 0; - $rootScope.performance.panelsRendered= 0; + $rootScope.performance.panelsRendered = 0; $scope.dashboard = dashboardSrv.create(dashboardData); $scope.dashboardViewState = dashboardViewStateSrv.create($scope); @@ -93,14 +93,6 @@ function (angular, $, config, _) { }; }; - $scope.panel_path =function(type) { - if(type) { - return 'app/panels/'+type.replace(".","/"); - } else { - return false; - } - }; - $scope.edit_path = function(type) { var p = $scope.panel_path(type); if(p) { diff --git a/src/app/partials/paneladd.html b/src/app/partials/paneladd.html deleted file mode 100644 index f902bbce561..00000000000 --- a/src/app/partials/paneladd.html +++ /dev/null @@ -1,6 +0,0 @@ -
    -
    -
    -
    {{tab.title}}
    -
    -
    \ No newline at end of file diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index 27bbe8ee027..ba8dcaf0f23 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/src/app/services/dashboard/dashboardKeyBindings.js @@ -18,8 +18,8 @@ function(angular, $) { keyboardManager.unbind('ctrl+s'); keyboardManager.unbind('ctrl+r'); keyboardManager.unbind('ctrl+z'); + keyboardManager.unbind('esc'); }); - keyboardManager.unbind('esc'); keyboardManager.bind('ctrl+f', function() { scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); From bbc5dae1d2308edb487f82ed755cd1ada2cee895 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Sep 2014 11:55:26 +0200 Subject: [PATCH 085/127] Working on better handling of variables and url init and state --- src/test/specs/helpers.js | 2 ++ src/test/specs/templateValuesSrv-specs.js | 16 +++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 35cde542de6..81f0df7be7e 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -51,6 +51,7 @@ define([ self.templateSrv = new TemplateSrvStub(); self.timeSrv = new TimeSrvStub(); self.datasourceSrv = {}; + self.$routeParams = {}; this.providePhase = function(mocks) { return module(function($provide) { @@ -103,6 +104,7 @@ define([ this.replace = function(text) { return _.template(text, this.data, this.templateSettings); }; + this.init = function() {}; this.updateTemplateData = function() { }; this.variableExists = function() { return false; }; this.highlightVariablesAsHtml = function(str) { return str; }; diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index eb1b0225618..c0674a5cd75 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -10,7 +10,7 @@ define([ var ctx = new helpers.ServiceTestContext(); beforeEach(module('grafana.services')); - beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv'])); + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', "$routeParams"])); beforeEach(ctx.createService('templateValuesSrv')); describe('update interval variable options', function() { @@ -27,6 +27,20 @@ define([ }); }); + describe.only('should init values', function() { + var variables = [ + { name: 'test', current: { value: 'hej' }} + ]; + var dashboard = { templating: { list: variables } }; + + beforeEach(function() { + ctx.service.init(dashboard); + }); + + it('should update options array', function() { + }); + }); + function describeUpdateVariable(desc, fn) { describe(desc, function() { var scenario = {}; From e0c9ddbfba44b23277c2badf6ec637d706803fd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 8 Sep 2014 11:03:14 +0200 Subject: [PATCH 086/127] Worked on variable initilization and sync to from url, #772 --- CHANGELOG.md | 2 + src/app/controllers/dashboardCtrl.js | 2 +- src/app/directives/graphiteSegment.js | 2 +- .../dashboard/dashboardViewStateSrv.js | 55 +++++++++++-------- src/app/services/templateSrv.js | 15 ++--- src/app/services/templateValuesSrv.js | 24 +++++--- src/css/less/overrides.less | 5 ++ src/test/specs/dashboardViewStateSrv-specs.js | 2 + src/test/specs/templateSrv-specs.js | 18 ++++++ src/test/specs/templateValuesSrv-specs.js | 30 +--------- 10 files changed, 84 insertions(+), 71 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fb7ec258ea..16b11573fd7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ - [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example - [Issue #312](https://github.com/grafana/grafana/issues/312). Templating: Can now use template variables in panel titles - [Issue #613](https://github.com/grafana/grafana/issues/613). Templating: Full support for InfluxDB, filter by part of series names, extract series substrings, nested queries, multipe where clauses! +- Template variables can be initialized from url, with var-my_varname=value, breaking change, before it was just my_varname. +- Templating and url state sync has some issues that are not solved for this release, see [Issue #772](https://github.com/grafana/grafana/issues/772) for more details. **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index b9893b2dcda..f4d057e77e5 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -51,7 +51,7 @@ function (angular, $, config, _) { // init services timeSrv.init($scope.dashboard); - templateValuesSrv.init($scope.dashboard); + templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState); panelMoveSrv.init($scope.dashboard, $scope); $scope.checkFeatureToggles(); diff --git a/src/app/directives/graphiteSegment.js b/src/app/directives/graphiteSegment.js index 032ea99c39a..f0116bc8847 100644 --- a/src/app/directives/graphiteSegment.js +++ b/src/app/directives/graphiteSegment.js @@ -94,7 +94,7 @@ function (angular, app, _, $) { }; $input.attr('data-provide', 'typeahead'); - $input.typeahead({ source: $scope.source, minLength: 0, items: 100, updater: $scope.updater }); + $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater }); var typeahead = $input.data('typeahead'); typeahead.lookup = function () { diff --git a/src/app/services/dashboard/dashboardViewStateSrv.js b/src/app/services/dashboard/dashboardViewStateSrv.js index 64d217f3dec..2f85da5d27a 100644 --- a/src/app/services/dashboard/dashboardViewStateSrv.js +++ b/src/app/services/dashboard/dashboardViewStateSrv.js @@ -14,9 +14,12 @@ function (angular, _, $) { // like fullscreen panel & edit function DashboardViewState($scope) { var self = this; + self.state = {}; + self.panelScopes = []; + self.$scope = $scope; $scope.exitFullscreen = function() { - if (self.fullscreen) { + if (self.state.fullscreen) { self.update({ fullscreen: false }); } }; @@ -28,42 +31,48 @@ function (angular, _, $) { } }); - this.panelScopes = []; - this.$scope = $scope; - this.update(this.getQueryStringState(), true); } DashboardViewState.prototype.needsSync = function(urlState) { - if (urlState.fullscreen !== this.fullscreen) { return true; } - if (urlState.edit !== this.edit) { return true; } - if (urlState.panelId !== this.panelId) { return true; } - return false; + return _.isEqual(this.state, urlState) === false; }; DashboardViewState.prototype.getQueryStringState = function() { var queryParams = $location.search(); - return { + var urlState = { panelId: parseInt(queryParams.panelId) || null, fullscreen: queryParams.fullscreen ? true : false, - edit: queryParams.edit ? true : false + edit: queryParams.edit ? true : false, }; + + _.each(queryParams, function(value, key) { + if (key.indexOf('var-') !== 0) { return; } + urlState[key] = value; + }); + + return urlState; + }; + + DashboardViewState.prototype.serializeToUrl = function() { + var urlState = _.clone(this.state); + urlState.fullscreen = this.state.fullscreen ? true : null, + urlState.edit = this.state.edit ? true : null; + + return urlState; }; DashboardViewState.prototype.update = function(state, skipUrlSync) { - _.extend(this, state); + _.extend(this.state, state); + this.fullscreen = this.state.fullscreen; - if (!this.fullscreen) { - this.panelId = null; - this.edit = false; + if (!this.state.fullscreen) { + this.state.panelId = null; + this.state.edit = false; } if (!skipUrlSync) { - $location.search({ - fullscreen: this.fullscreen ? true : null, - panelId: this.panelId, - edit: this.edit ? true : null - }); + $location.search(this.serializeToUrl()); } this.syncState(); @@ -76,7 +85,7 @@ function (angular, _, $) { if (this.fullscreenPanel) { this.leaveFullscreen(false); } - var panelScope = this.getPanelScope(this.panelId); + var panelScope = this.getPanelScope(this.state.panelId); this.enterFullscreen(panelScope); return; } @@ -118,8 +127,8 @@ function (angular, _, $) { var fullscreenHeight = Math.floor(docHeight * 0.7); this.oldTimeRange = panelScope.range; - panelScope.height = this.edit ? editHeight : fullscreenHeight; - panelScope.editMode = this.edit; + panelScope.height = this.state.edit ? editHeight : fullscreenHeight; + panelScope.editMode = this.state.edit; this.fullscreenPanel = panelScope; $(window).scrollTop(0); @@ -135,7 +144,7 @@ function (angular, _, $) { var self = this; self.panelScopes.push(panelScope); - if (self.panelId === panelScope.panel.id) { + if (self.state.panelId === panelScope.panel.id) { self.enterFullscreen(panelScope); } diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index f8247d1c5cb..d63a9df34d4 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -7,7 +7,7 @@ function (angular, _) { var module = angular.module('grafana.services'); - module.service('templateSrv', function($q, $routeParams) { + module.service('templateSrv', function() { var self = this; this._regex = /\$(\w+)|\[\[([\s\S]+?)\]\]/g; @@ -19,17 +19,10 @@ function (angular, _) { this.updateTemplateData(true); }; - this.updateTemplateData = function(initial) { + this.updateTemplateData = function() { var data = {}; _.each(this.variables, function(variable) { - if (initial) { - var urlValue = $routeParams[ variable.name ]; - if (urlValue) { - variable.current = { text: urlValue, value: urlValue }; - } - } - if (!variable.current || !variable.current.value) { return; } @@ -50,6 +43,10 @@ function (angular, _) { return match && (self._templateData[match[1] || match[2]] !== void 0); }; + this.containsVariable = function(str, variableName) { + return str.indexOf('$' + variableName) !== -1 || str.indexOf('[[' + variableName + ']]') !== -1; + }; + this.highlightVariablesAsHtml = function(str) { if (!str || !_.isString(str)) { return str; } diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 511d5bfb495..cf2d766edc4 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -18,17 +18,24 @@ function (angular, _, kbn) { } }); - this.init = function(dashboard) { + this.init = function(dashboard, viewstate) { this.variables = dashboard.templating.list; + this.viewstate = viewstate; templateSrv.init(this.variables); for (var i = 0; i < this.variables.length; i++) { - var param = this.variables[i]; - if (param.refresh) { - this.updateOptions(param); + var variable = this.variables[i]; + var urlValue = viewstate.state['var-' + variable.name]; + if (urlValue !== void 0) { + var option = _.findWhere(variable.options, { text: urlValue }); + option = option || { text: urlValue, value: urlValue }; + this.setVariableValue(variable, option, true); } - else if (param.type === 'interval') { - this.updateAutoInterval(param); + else if (variable.refresh) { + this.updateOptions(variable); + } + else if (variable.type === 'interval') { + this.updateAutoInterval(variable); } } }; @@ -63,7 +70,7 @@ function (angular, _, kbn) { if (otherVariable === updatedVariable) { return; } - if (otherVariable.query.indexOf('[[' + updatedVariable.name + ']]') !== -1) { + if (templateSrv.containsVariable(otherVariable.query, updatedVariable.name)) { return self.updateOptions(otherVariable); } }); @@ -92,7 +99,6 @@ function (angular, _, kbn) { var datasource = datasourceSrv.get(variable.datasource); return datasource.metricFindQuery(variable.query) .then(function (results) { - variable.options = self.metricNamesToVariableValues(variable, results); if (variable.includeAll) { @@ -102,7 +108,7 @@ function (angular, _, kbn) { // if parameter has current value // if it exists in options array keep value if (variable.current) { - var currentExists = _.findWhere(variable.options, { value: variable.current.value }); + var currentExists = _.findWhere(variable.options, { text: variable.current.text }); if (currentExists) { return self.setVariableValue(variable, variable.current, true); } diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 4415c85d3c0..58e72ef43fa 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -516,6 +516,11 @@ div.flot-text { } } +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} // Labels & Badges .label-tag { diff --git a/src/test/specs/dashboardViewStateSrv-specs.js b/src/test/specs/dashboardViewStateSrv-specs.js index 92e444d55d0..82ccfe51363 100644 --- a/src/test/specs/dashboardViewStateSrv-specs.js +++ b/src/test/specs/dashboardViewStateSrv-specs.js @@ -20,6 +20,7 @@ define([ viewState.update(updateState); expect(location.search()).to.eql(updateState); expect(viewState.fullscreen).to.be(true); + expect(viewState.state.fullscreen).to.be(true); }); }); @@ -29,6 +30,7 @@ define([ viewState.update({fullscreen: false}); expect(location.search()).to.eql({}); expect(viewState.fullscreen).to.be(false); + expect(viewState.state.fullscreen).to.be(false); }); }); diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index ac711dce66a..938d8bfe0a1 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -62,6 +62,24 @@ define([ }); + describe('when checking if a string contains a variable', function() { + beforeEach(function() { + _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); + _templateSrv.updateTemplateData(); + }); + + it('should find it with $var syntax', function() { + var contains = _templateSrv.containsVariable('this.$test.filters', 'test'); + expect(contains).to.be(true); + }); + + it('should find it with [[var]] syntax', function() { + var contains = _templateSrv.containsVariable('this.[[test]].filters', 'test'); + expect(contains).to.be(true); + }); + + }); + describe('updateTemplateData with simple value', function() { beforeEach(function() { _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index c0674a5cd75..bc0de36e959 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -27,20 +27,6 @@ define([ }); }); - describe.only('should init values', function() { - var variables = [ - { name: 'test', current: { value: 'hej' }} - ]; - var dashboard = { templating: { list: variables } }; - - beforeEach(function() { - ctx.service.init(dashboard); - }); - - it('should update options array', function() { - }); - }); - function describeUpdateVariable(desc, fn) { describe(desc, function() { var scenario = {}; @@ -139,12 +125,12 @@ define([ describeUpdateVariable('and existing value still exists in options', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.current = { value: 'backend2'}; + scenario.variable.current = { text: 'backend2'}; scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; }); it('should keep variable value', function() { - expect(scenario.variable.current.value).to.be('backend2'); + expect(scenario.variable.current.text).to.be('backend2'); }); }); @@ -196,18 +182,6 @@ define([ }); }); - describeUpdateVariable('and existing value still exists in options', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.current = { value: 'backend2'}; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; - }); - - it('should keep variable value', function() { - expect(scenario.variable.current.value).to.be('backend2'); - }); - }); - describeUpdateVariable('with include All glob syntax', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; From a9d96ccc8cef20b07c84f1ed4a0160f5b2ba1aee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 8 Sep 2014 18:03:10 +0200 Subject: [PATCH 087/127] Fixed ids for panels in default.json welcome to grafana dashboard --- src/app/dashboards/default.json | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/dashboards/default.json b/src/app/dashboards/default.json index 015ede1d7dc..4fcdf570d53 100644 --- a/src/app/dashboards/default.json +++ b/src/app/dashboards/default.json @@ -11,7 +11,7 @@ "collapse": false, "panels": [ { - "error": false, + "id": 1, "span": 12, "editable": true, "type": "text", @@ -28,20 +28,17 @@ "collapse": false, "panels": [ { - "error": false, + "id": 2, "span": 6, - "editable": true, "type": "text", - "loadingEditor": false, "mode": "html", "content": "
    \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    ", "style": {}, "title": "Documentation Links" }, { - "error": false, + "id": 3, "span": 6, - "editable": true, "type": "text", "mode": "html", "content": "
    \n\n
    \n
    \n
      \n
    • Ctrl+S saves the current dashboard
      • \n
    • Ctrl+F Opens the dashboard finder
      • \n
    • Ctrl+H Hide/show row controls
      • \n
    • Click and drag graph title to move panel
      • \n
    • Hit Escape to exit graph when in fullscreen or edit mode
      • \n
    • Click the colored icon in the legend to change series color
      • \n
    • Ctrl or Shift + Click legend name to hide other series
      • \n
    \n
    \n
    \n", @@ -56,8 +53,8 @@ "collapse": false, "panels": [ { + "id": 4, "span": 12, - "editable": true, "type": "graph", "x-axis": true, "y-axis": true, From 4798aa4789d673363bb6a9af53bddca10827e8d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 9 Sep 2014 08:24:04 +0200 Subject: [PATCH 088/127] Fixes to requirejs build task to include all modules, Fixes #779 --- tasks/options/requirejs.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tasks/options/requirejs.js b/tasks/options/requirejs.js index b3bc4f97909..c1a718c3397 100644 --- a/tasks/options/requirejs.js +++ b/tasks/options/requirejs.js @@ -1,4 +1,6 @@ module.exports = function(config,grunt) { + 'use strict'; + var _c = { build: { options: { @@ -59,12 +61,15 @@ module.exports = function(config,grunt) { 'directives/all', 'jquery.flot.pie', 'angular-dragdrop', + 'controllers/all', + 'routes/all', + 'components/partials', ] } ]; var fs = require('fs'); - var panelPath = config.srcDir+'/app/panels' + var panelPath = config.srcDir+'/app/panels'; // create a module for each directory in src/app/panels/ fs.readdirSync(panelPath).forEach(function (panelName) { From 0f88b470e8e2f35e18d23384d2f37840458828d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 9 Sep 2014 08:50:01 +0200 Subject: [PATCH 089/127] Fix for elasticsearch annotations when timestamp is a field and not in source, Fixes #777 --- src/app/partials/annotations_editor.html | 3 +++ src/app/services/elasticsearch/es-datasource.js | 15 +++++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index cb9db2244d6..c72194b6f6a 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -16,6 +16,9 @@
    +
    + No annotations defined +
    diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 34db3b50d8a..721ba00881b 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -76,7 +76,11 @@ function (angular, _, $, config, kbn, moment) { var queryInterpolated = templateSrv.replace(queryString); var filter = { "bool": { "must": [{ "range": range }] } }; var query = { "bool": { "should": [{ "query_string": { "query": queryInterpolated } }] } }; - var data = { "query" : { "filtered": { "query" : query, "filter": filter } }, "size": 100 }; + var data = { + "fields": [timeField, "_source"], + "query" : { "filtered": { "query" : query, "filter": filter } }, + "size": 100 + }; return this._request('POST', '/_search', annotation.index, data).then(function(results) { var list = []; @@ -84,9 +88,16 @@ function (angular, _, $, config, kbn, moment) { for (var i = 0; i < hits.length; i++) { var source = hits[i]._source; + var fields = hits[i].fields; + var time = source[timeField]; + + if (_.isString(fields[timeField]) || _.isNumber(fields[timeField])) { + time = fields[timeField]; + } + var event = { annotation: annotation, - time: moment.utc(source[timeField]).valueOf(), + time: moment.utc(time).valueOf(), title: source[titleField], }; From 71a307270aea56158d64c2182ff738a85cb70067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 9 Sep 2014 09:16:00 +0200 Subject: [PATCH 090/127] Fixed text color in json text area for white theme, #735 --- src/app/partials/edit_json.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/partials/edit_json.html b/src/app/partials/edit_json.html index c4fa5fd950f..a43e1d56bcd 100644 --- a/src/app/partials/edit_json.html +++ b/src/app/partials/edit_json.html @@ -8,7 +8,7 @@
    - +
    From d6e844c67c4ac7887a88c7a4847f9595da612bfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 9 Sep 2014 10:29:59 +0200 Subject: [PATCH 091/127] Fixes for opentsdb, (broken during 1.8 development) --- src/app/partials/opentsdb/editor.html | 2 +- src/app/services/opentsdb/opentsdbDatasource.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/partials/opentsdb/editor.html b/src/app/partials/opentsdb/editor.html index efc54af8e05..b74b1d7a269 100644 --- a/src/app/partials/opentsdb/editor.html +++ b/src/app/partials/opentsdb/editor.html @@ -30,7 +30,7 @@ -
    -
    +
    + +
      +
    • + +
    • - cacheTimeout Graphite parameter to overwride memcache default timeout (unit is seconds) + cacheTimeout
    • + class="input-mini grafana-target-segment-input" + ng-model="panel.cacheTimeout" + bs-tooltip="'Graphite parameter to overwride memcache default timeout (unit is seconds)'" + data-placement="right" + spellcheck='false' + placeholder="60">
    -
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    Shorter legend names
    +
      +
    • alias() function to specify a custom series name
      • +
    • aliasByNode(2) to alias by a specific part of your metric path
      • +
    • aliasByNode(2, -1) you can add multiple segment paths, and use negative index
      • +
    • groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
      • +
    +
    + +
    +
    Series as parameter
    +
      +
    • Some graphite functions allow you to have many series arguments
      • +
    • Use #[A-Z] to use a graphite query as parameter to a function
      • +
    • + Examples: +
        +
      • asPercent(#A, #B)
        • +
      • prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
        • +
      • prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
        • +
      • divideSeries(#A, #B)
        • +
      +
      • +
    • If a query is added only to be used as a parameter, hide it from the graph with the eye icon
      • +
    +
    + +
    +
    Stacking
    +
      +
    • You find the stacking option under Display Styles tab
      • +
    • When stacking is enabled make sure null point mode is set to 'null as zero'
      • +
    +
    + +
    +
    Templating
    +
      +
    • You can use a template variable in place of metric names
      • +
    • You can use a template variable in place of function parameters
      • +
    • You enable the templating feature in Dashboard settings / Feature toggles
      • +
    +
    + +
    diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 70da2fbf282..4fd13645d3d 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -181,8 +181,8 @@
      -
    • - +
    • +
    • group by time @@ -227,8 +227,8 @@
      -
      - Alias patterns: +
      +
      Alias patterns
      • $s = series name
      • $g = group by
        • @@ -236,8 +236,8 @@
      -
      - Stacking and fill: +
      +
      Stacking and fill
      • When stacking is enabled it important that points align
      • If there are missing points for one series it can cause gaps or missing bars
        • @@ -247,8 +247,8 @@
      -
      - Group by time: +
      +
      Group by time
      • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
      • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
        • diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 022319a1042..7c17e6967db 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -485,3 +485,22 @@ select.grafana-target-segment-input { color: @variable; } +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: @blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} From b1abe72ab65190cf9611372bb000eb6655107846 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 11:34:32 +0200 Subject: [PATCH 108/127] small update to text panel editor --- src/app/panels/text/editor.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/panels/text/editor.html b/src/app/panels/text/editor.html index 6af4dc069c2..b3b8afbbec0 100644 --- a/src/app/panels/text/editor.html +++ b/src/app/panels/text/editor.html @@ -9,10 +9,9 @@
      - -
      \ No newline at end of file +
      From 4883b2a2960a56aac3e19f490e948aa7228ae531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 13:54:59 +0200 Subject: [PATCH 109/127] Fixed issue with using template variables in panel titles, and text panel, when selecting All option in variable --- package.json | 2 +- src/app/filters/all.js | 2 +- src/app/services/templateSrv.js | 41 ++++++++++++++++++++--------- src/test/specs/templateSrv-specs.js | 17 ++++++++++++ 4 files changed, 47 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 8de8f05cf8a..f84ca9cf8c6 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Coding Instinct AB" }, "name": "grafana", - "version": "1.8.0", + "version": "1.8.0-rc1", "repository": { "type": "git", "url": "http://github.com/torkelo/grafana.git" diff --git a/src/app/filters/all.js b/src/app/filters/all.js index b2729d120dd..eb9a736d0ce 100755 --- a/src/app/filters/all.js +++ b/src/app/filters/all.js @@ -57,7 +57,7 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen module.filter('interpolateTemplateVars', function(templateSrv) { return function(text) { - return templateSrv.replace(text); + return templateSrv.replaceWithText(text); }; }); diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index d63a9df34d4..c201147becf 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -11,26 +11,25 @@ function (angular, _) { var self = this; this._regex = /\$(\w+)|\[\[([\s\S]+?)\]\]/g; - this._templateData = {}; + this._values = {}; + this._texts = {}; this._grafanaVariables = {}; this.init = function(variables) { this.variables = variables; - this.updateTemplateData(true); + this.updateTemplateData(); }; this.updateTemplateData = function() { - var data = {}; + this._values = {}; + this._texts = {}; _.each(this.variables, function(variable) { - if (!variable.current || !variable.current.value) { - return; - } + if (!variable.current || !variable.current.value) { return; } - data[variable.name] = variable.current.value; - }); - - this._templateData = data; + this._values[variable.name] = variable.current.value; + this._texts[variable.name] = variable.current.text; + }, this); }; this.setGrafanaVariable = function (name, value) { @@ -40,7 +39,7 @@ function (angular, _) { this.variableExists = function(expression) { this._regex.lastIndex = 0; var match = this._regex.exec(expression); - return match && (self._templateData[match[1] || match[2]] !== void 0); + return match && (self._values[match[1] || match[2]] !== void 0); }; this.containsVariable = function(str, variableName) { @@ -52,7 +51,7 @@ function (angular, _) { this._regex.lastIndex = 0; return str.replace(this._regex, function(match, g1, g2) { - if (self._templateData[g1 || g2]) { + if (self._values[g1 || g2]) { return '' + match + ''; } return match; @@ -66,13 +65,29 @@ function (angular, _) { this._regex.lastIndex = 0; return target.replace(this._regex, function(match, g1, g2) { - value = self._templateData[g1 || g2]; + value = self._values[g1 || g2]; if (!value) { return match; } return self._grafanaVariables[value] || value; }); }; + this.replaceWithText = function(target) { + if (!target) { return; } + + var value; + var text; + this._regex.lastIndex = 0; + + return target.replace(this._regex, function(match, g1, g2) { + value = self._values[g1 || g2]; + text = self._texts[g1 || g2]; + if (!value) { return match; } + + return self._grafanaVariables[value] || text; + }); + }; + }); }); diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index 938d8bfe0a1..f740ef6d544 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -92,6 +92,23 @@ define([ }); }); + describe('replaceWithText', function() { + beforeEach(function() { + _templateSrv.init([ + { name: 'server', current: { value: '{asd,asd2}', text: 'All' } }, + { name: 'period', current: { value: '$__auto_interval', text: 'auto' } } + ]); + _templateSrv.setGrafanaVariable('$__auto_interval', '13m'); + _templateSrv.updateTemplateData(); + }); + + it('should replace with text except for grafanaVariables', function() { + var target = _templateSrv.replaceWithText('Server: $server, period: $period'); + expect(target).to.be('Server: All, period: 13m'); + }); + }); + + }); }); From a65c61442ede3d656c3ef648538e89730670a6c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 14:01:37 +0200 Subject: [PATCH 110/127] minifix for spacing of question sign tooltips when html is minified --- src/app/directives/tip.js | 4 ++-- src/app/panels/graph/styleEditor.html | 2 +- src/css/less/grafana.less | 4 ++++ src/css/less/variables.dark.less | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index 975a4c02228..974ed98a637 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -11,10 +11,10 @@ function (angular, kbn) { return { restrict: 'E', link: function(scope, elem, attrs) { - var _t = ''; elem.replaceWith($compile(angular.element(_t))(scope)); } }; }); -}); \ No newline at end of file +}); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index b8c80473ebd..cd83f23f197 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -27,7 +27,7 @@
      - +
      diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 7c17e6967db..3e52b7fc94c 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -504,3 +504,7 @@ select.grafana-target-segment-input { margin-top: 5px; } } + +.grafana-tip { + padding-left: 5px; +} diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 608dfb609b0..f3817ef454d 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -35,7 +35,7 @@ // Graphite Target Editor @grafanaTargetBorder: @black; -@grafanaTargetBackground: @grayDark; +@grafana-info-box grafanaTargetBackground: @grayDark; @grafanaTargetColor: #c8c8c8; @grafanaTargetColorHide: darken(#c8c8c8, 25%); @grafanaTargetSegmentBorder: #050505; From 762dab618afb31f071488be6d1155cfa87443d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 14:07:27 +0200 Subject: [PATCH 111/127] Small change to datasourceSrv, if datasource is not found, return default datasource --- src/app/services/datasourceSrv.js | 2 +- src/css/less/variables.dark.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/services/datasourceSrv.js b/src/app/services/datasourceSrv.js index 5d26ebdc28c..effb3d1a7dc 100644 --- a/src/app/services/datasourceSrv.js +++ b/src/app/services/datasourceSrv.js @@ -80,7 +80,7 @@ function (angular, _, config) { if (!name) { return this.default; } if (datasources[name]) { return datasources[name]; } - throw "Unable to find datasource: " + name; + return this.default; }; this.getAnnotationSources = function() { diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index f3817ef454d..608dfb609b0 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -35,7 +35,7 @@ // Graphite Target Editor @grafanaTargetBorder: @black; -@grafana-info-box grafanaTargetBackground: @grayDark; +@grafanaTargetBackground: @grayDark; @grafanaTargetColor: #c8c8c8; @grafanaTargetColorHide: darken(#c8c8c8, 25%); @grafanaTargetSegmentBorder: #050505; From 6ca73f6df0d99e7bea0cdd84875ab990b7593c45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 14:25:20 +0200 Subject: [PATCH 112/127] Do not render graph when width is zero, avoids plot errors --- src/app/directives/grafanaGraph.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 9bb302bf671..15f1556aa62 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -15,7 +15,7 @@ function (angular, $, kbn, moment, _) { restrict: 'A', template: '
      ', link: function(scope, elem) { - var data, plot, annotations; + var data, annotations; var hiddenData = {}; var dashboard = scope.dashboard; var legendSideLastValue = null; @@ -82,6 +82,10 @@ function (angular, $, kbn, moment, _) { render_panel_as_graphite_png(data); return true; } + + if (elem.width() === 0) { + return; + } } // Function for rendering panel @@ -165,18 +169,22 @@ function (angular, $, kbn, moment, _) { var sortedSeries = _.sortBy(data, function(series) { return series.zindex; }); - // if legend is to the right delay plot draw a few milliseconds - // so the legend width calculation can be done + function callPlot() { + try { + $.plot(elem, sortedSeries, options); + } catch (e) { + console.log('flotcharts error', e); + } + + addAxisLabels(); + } + if (shouldDelayDraw(panel)) { + setTimeout(callPlot, 50); legendSideLastValue = panel.legend.rightSide; - setTimeout(function() { - plot = $.plot(elem, sortedSeries, options); - addAxisLabels(); - }, 50); } else { - plot = $.plot(elem, sortedSeries, options); - addAxisLabels(); + callPlot(); } } From 5a3db0505fb3a95ab925045b8d0e0813722ef683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 16:00:59 +0200 Subject: [PATCH 113/127] Small fix to elasticsearch save error handling --- src/app/services/elasticsearch/es-datasource.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 4d1f6272720..80e3c5d0100 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -170,8 +170,8 @@ function (angular, _, config, kbn, moment) { .then(function(results) { self._removeUnslugifiedDashboard(results, title); return { title: title, url: '/dashboard/db/' + id }; - }, function(err) { - throw 'Failed to save to elasticsearch ' + err.data; + }, function() { + throw 'Failed to save to elasticsearch'; }); } }; From 2c6ea276c1c0bfc684e7ed29d80d79e65e21716f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 17:19:39 +0200 Subject: [PATCH 114/127] Fixed small bug in graphite target controller when having variable for single parameter function --- src/app/controllers/graphiteTarget.js | 2 +- src/test/specs/graphiteTargetCtrl-specs.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index cd13926cc80..cd8462ac62d 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -90,7 +90,7 @@ function (angular, _, config, gfunc, Parser) { break; case 'metric': if ($scope.segments.length > 0) { - if ($scope.segments[0].length !== 1) { + if (astNode.segments.length !== 1) { throw { message: 'Multiple metric params not supported, use text editor.' }; } addFunctionParameter(func, astNode.segments[0].value, index, true); diff --git a/src/test/specs/graphiteTargetCtrl-specs.js b/src/test/specs/graphiteTargetCtrl-specs.js index 57f3870cb5d..27be0d92b26 100644 --- a/src/test/specs/graphiteTargetCtrl-specs.js +++ b/src/test/specs/graphiteTargetCtrl-specs.js @@ -99,6 +99,25 @@ define([ }); + describe('when initializing a target with single param func using variable', function() { + beforeEach(function() { + ctx.scope.target.target = 'movingAverage(prod.count, $var)'; + ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.scope.init(); + ctx.scope.$digest(); + ctx.scope.$parent = { get_data: sinon.spy() }; + }); + + it('should add 2 segments', function() { + expect(ctx.scope.segments.length).to.be(2); + }); + + it('should add function param', function() { + expect(ctx.scope.functions[0].params.length).to.be(1); + }); + + }); + describe('when initalizing target without metric expression and function with series-ref', function() { beforeEach(function() { ctx.scope.target.target = 'asPercent(metric.node.count, #A)'; From 48eb2083f25566995575dd7773ca80fd08a4c140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Sep 2014 17:25:59 +0200 Subject: [PATCH 115/127] Fix for graphite query letter assignment --- src/app/controllers/graphiteTarget.js | 2 +- src/app/partials/graphite/editor.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index cd8462ac62d..27299474bc0 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -15,7 +15,7 @@ function (angular, _, config, gfunc, Parser) { $scope.init = function() { $scope.target.target = $scope.target.target || ''; - $scope.targetLetter = targetLetters[$scope.$index]; + $scope.targetLetters = targetLetters; parseTarget(); }; diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index 46e7d081884..4d670255bc0 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -41,7 +41,7 @@