From 2b1dcaf5e38a1e912236b2ec78822021991169aa Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Aug 2014 11:25:30 +0200 Subject: [PATCH 001/146] 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 b812b1c57992e239827bb16de28c3a024492b429 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 16 Aug 2014 19:02:50 +0200 Subject: [PATCH 002/146] Fixed link to playlist docs in readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dbbb566cf90..fd4fef2f364 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Graphite, InfluxDB & OpenTSDB. - Import dashboard from Graphite - Templating - [Scripted dashboards](http://grafana.org/docs/features/scripted_dashboards) -- [Dashboard playlists](http://grafana.org/docs/docs/features/playlist) +- [Dashboard playlists](http://grafana.org/docs/features/playlist) - [Time range controls](http://grafana.org/docs/features/time_range) ### InfluxDB From dc5973a0f361e769c251858f3bbd9e8b1df189a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 17 Aug 2014 11:53:58 +0200 Subject: [PATCH 003/146] small css fix for alignment of legend values when shown in table style --- src/css/less/graph.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/less/graph.less b/src/css/less/graph.less index 07d7b7bb10d..79e87ab8f47 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -25,6 +25,7 @@ .graph-legend-value { float: left; white-space: nowrap; + text-align: left; &.current:before { content: "Current: " } From 27c536b1a1714743c6309e0494afca2178bbbb8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 09:03:25 +0200 Subject: [PATCH 004/146] Small fix to 'none' axis formats and zero value when axis tickDecimals is high, Closes #707 --- src/app/components/kbn.js | 2 +- src/test/specs/kbn-format-specs.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 7f280cc99d6..3941715d9d9 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -536,7 +536,7 @@ function($, _, moment) { var formatted = String(Math.round(value * factor) / factor); // if exponent return directly - if (formatted.indexOf('e') !== -1) { + if (formatted.indexOf('e') !== -1 || value === 0) { return formatted; } diff --git a/src/test/specs/kbn-format-specs.js b/src/test/specs/kbn-format-specs.js index 7e80d1a91eb..0faa4728f2d 100644 --- a/src/test/specs/kbn-format-specs.js +++ b/src/test/specs/kbn-format-specs.js @@ -27,6 +27,10 @@ define([ var str = kbn.getFormatFunction('')(2.75e-10, { tickDecimals: 12 }); expect(str).to.be('2.75e-10'); }); + it('should format 0 correctly', function() { + var str = kbn.getFormatFunction('')(0.0, { tickDecimals: 12 }); + expect(str).to.be('0'); + }); }); describe('none format tests', function() { From ffd73e8bfbc62b8fe1400d2e7e2695912c5c110e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 09:35:13 +0200 Subject: [PATCH 005/146] Fix for graphite queries with glob syntax ([1-9] and ?) that made the graphite parser / query editor bail and fallback to text edit mode. --- CHANGELOG.md | 3 ++- src/app/directives/ngModelOnBlur.js | 5 +++-- src/app/services/graphite/lexer.js | 3 +++ src/test/specs/lexer-specs.js | 15 +++++++++++---- src/test/specs/parser-specs.js | 4 ++-- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8215e325a1f..77e6019a60c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,8 @@ - [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. **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 #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. **Tech** - Upgraded from angularjs 1.1.5 to 1.3 beta 17; diff --git a/src/app/directives/ngModelOnBlur.js b/src/app/directives/ngModelOnBlur.js index 2a107e71808..0e9d94a282e 100644 --- a/src/app/directives/ngModelOnBlur.js +++ b/src/app/directives/ngModelOnBlur.js @@ -7,13 +7,14 @@ function (angular) { .directive('ngModelOnblur', function() { return { restrict: 'A', + priority: 1, require: 'ngModel', link: function(scope, elm, attr, ngModelCtrl) { if (attr.type === 'radio' || attr.type === 'checkbox') { return; } - elm.unbind('input').unbind('keydown').unbind('change'); + elm.off('input keydown change'); elm.bind('blur', function() { scope.$apply(function() { ngModelCtrl.$setViewValue(elm.val()); @@ -22,4 +23,4 @@ function (angular) { } }; }); -}); \ No newline at end of file +}); diff --git a/src/app/services/graphite/lexer.js b/src/app/services/graphite/lexer.js index 718d5206ee9..05249b9bff9 100644 --- a/src/app/services/graphite/lexer.js +++ b/src/app/services/graphite/lexer.js @@ -124,6 +124,9 @@ define([ i === 45 || // - i === 42 || // * i === 58 || // : + i === 91 || // templateStart [ + i === 93 || // templateEnd ] + i === 63 || // ? i === 37 || // % i >= 97 && i <= 122; // a-z } diff --git a/src/test/specs/lexer-specs.js b/src/test/specs/lexer-specs.js index 92dbb2c6931..04531423802 100644 --- a/src/test/specs/lexer-specs.js +++ b/src/test/specs/lexer-specs.js @@ -71,10 +71,17 @@ define([ it('should tokenize metric with template parameter', function() { var lexer = new Lexer("metric.[[server]].test"); var tokens = lexer.tokenize(); - expect(tokens[2].type).to.be('templateStart'); - expect(tokens[3].type).to.be('identifier'); - expect(tokens[3].value).to.be('server'); - expect(tokens[4].type).to.be('templateEnd'); + expect(tokens[2].type).to.be('identifier'); + expect(tokens[2].value).to.be('[[server]]'); + expect(tokens[4].type).to.be('identifier'); + }); + + it('should tokenize metric with question mark', function() { + var lexer = new Lexer("metric.server_??.test"); + var tokens = lexer.tokenize(); + expect(tokens[2].type).to.be('identifier'); + expect(tokens[2].value).to.be('server_??'); + expect(tokens[4].type).to.be('identifier'); }); it('should handle error with unterminated string', function() { diff --git a/src/test/specs/parser-specs.js b/src/test/specs/parser-specs.js index feb5367711d..802474a5814 100644 --- a/src/test/specs/parser-specs.js +++ b/src/test/specs/parser-specs.js @@ -106,8 +106,8 @@ define([ expect(rootNode.message).to.be(undefined); expect(rootNode.params[0].type).to.be('metric'); - expect(rootNode.params[0].segments[1].type).to.be('template'); - expect(rootNode.params[0].segments[1].value).to.be('server'); + expect(rootNode.params[0].segments[1].type).to.be('segment'); + expect(rootNode.params[0].segments[1].value).to.be('[[server]]'); }); it('invalid metric expression', function() { From 1a3dac0c17bf597836681381b3055bfbfc8530e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 13:17:18 +0200 Subject: [PATCH 006/146] Fix for timepicker dates and tooltip when UTC timzone is selected, custom date modal is still local time, Closes #277 --- CHANGELOG.md | 1 + src/app/components/kbn.js | 6 +++++- src/app/directives/grafanaGraph.js | 5 +---- src/app/panels/timepicker/module.js | 17 +++++++++++------ src/app/services/dashboard/dashboardSrv.js | 11 ++++++++++- 5 files changed, 28 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77e6019a60c..e7ffc6bebf5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,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 #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 **Tech** - Upgraded from angularjs 1.1.5 to 1.3 beta 17; diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 3941715d9d9..71fe1b4b75a 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -1,4 +1,8 @@ -define(['jquery','lodash','moment'], +define([ + 'jquery', + 'lodash', + 'moment' +], function($, _, moment) { 'use strict'; diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index a950032a7a9..a91967b967b 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -354,10 +354,7 @@ function (angular, $, kbn, moment, _) { } value = kbn.getFormatFunction(format, 2)(value); - - timestamp = dashboard.timezone === 'browser' ? - moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') : - moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss'); + timestamp = dashboard.formatDate(item.datapoint[0]); $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); } else { diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index 3f29f1652dc..e080096ae60 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -80,9 +80,14 @@ function (angular, app, _, moment, kbn) { $scope.temptime = cloneTime($scope.time); $scope.tempnow = $scope.panel.now; + $scope.temptime.from.date.setHours(0,0,0,0); + $scope.temptime.to.date.setHours(0,0,0,0); + // Date picker needs the date to be at the start of the day - $scope.temptime.from.date.setHours(1,0,0,0); - $scope.temptime.to.date.setHours(1,0,0,0); + if(new Date().getTimezoneOffset() < 0) { + $scope.temptime.from.date = moment($scope.temptime.from.date).add('days',1).toDate(); + $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate(); + } $q.when(customTimeModal).then(function(modalEl) { modalEl.modal('show'); @@ -175,8 +180,8 @@ function (angular, app, _, moment, kbn) { var model = { from: getTimeObj(from), to: getTimeObj(to), }; if (model.from.date) { - model.tooltip = moment(model.from.date).format('YYYY-MM-DD HH:mm:ss') + '
to
'; - model.tooltip += moment(model.to.date).format('YYYY-MM-DD HH:mm:ss'); + model.tooltip = $scope.dashboard.formatDate(model.from.date) + '
to
'; + model.tooltip += $scope.dashboard.formatDate(model.to.date); } else { model.tooltip = 'Click to set time filter'; @@ -188,8 +193,8 @@ function (angular, app, _, moment, kbn) { moment(model.to.date).fromNow(); } else { - model.rangeString = moment(model.from.date).format('MMM D, YYYY hh:mm:ss') + ' to ' + - moment(model.to.date).format('MMM D, YYYY hh:mm:ss'); + model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY hh:mm:ss') + ' to ' + + $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY hh:mm:ss'); } } diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 43c93379dd9..ff1e149c3b7 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -3,9 +3,10 @@ define([ 'jquery', 'kbn', 'lodash', + 'moment', '../timer', ], -function (angular, $, kbn, _) { +function (angular, $, kbn, _, moment) { 'use strict'; var module = angular.module('grafana.services'); @@ -108,6 +109,14 @@ function (angular, $, kbn, _) { this.rows.push(newRow); }; + p.formatDate = function(date, format) { + format = format || 'YYYY-MM-DD HH:mm:ss'; + + return this.timezone === 'browser' ? + moment(date).format(format) : + moment.utc(date).format(format); + }; + p.emit_refresh = function() { $rootScope.$broadcast('refresh'); }; From a64604de6bdc6a39bdb478096642b2a57c63f5cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 16:38:04 +0200 Subject: [PATCH 007/146] UI improvements to search result list (larger click are for dashboard title link, plus UI look polish), Closes #709 --- CHANGELOG.md | 1 + src/app/controllers/dashboardNavCtrl.js | 4 +- src/app/controllers/graphiteTarget.js | 2 +- src/app/controllers/search.js | 7 +- src/app/partials/search.html | 80 +++++++++---------- .../dashboard/dashboardKeyBindings.js | 2 +- src/css/less/grafana.less | 51 +++++++++--- src/css/less/variables.dark.less | 10 ++- src/css/less/variables.light.less | 11 ++- 9 files changed, 109 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7ffc6bebf5..793a0740e4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - [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 **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/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index 7fe6e03f78b..a58a2647945 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -87,7 +87,9 @@ function (angular, _, moment, config, store) { }); }; - $scope.deleteDashboard = function(id) { + $scope.deleteDashboard = function(id, $event) { + $event.stopPropagation(); + if (!confirm('Are you sure you want to delete dashboard?')) { return; } diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 6b74455f59c..935ee1aeef0 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -289,7 +289,7 @@ function (angular, _, config, gfunc, Parser) { this.expandable = options.expandable; if (options.type === 'template') { - this.html = $sce.trustAsHtml("" + options.value + ""); + this.html = $sce.trustAsHtml(options.value); } else { this.html = $sce.trustAsHtml(this.value); diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index fd4e97e836d..de0ec44045a 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -50,7 +50,12 @@ function (angular, _, config, $) { } }; - $scope.shareDashboard = function(title, id) { + $scope.goToDashboard = function(id) { + $location.path("/dashboard/db/" + id); + }; + + $scope.shareDashboard = function(title, id, $event) { + $event.stopPropagation(); var baseUrl = window.location.href.replace(window.location.hash,''); $scope.share = { diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 651928488e2..e1c9f158e0b 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -47,50 +47,46 @@
No dashboards or metrics matching your query found
- - - - - -
- - {{tag.term}}  ({{tag.count}}) - - -
+
+
+ + + {{tag.term}}  ({{tag.count}}) + +
+
- - - - - - - +
+
+ + + + + + +
+ + share     + + + delete + +
+ +
+ + {{tag}} + +
+ +
+
- - - - - - - -
metric - {{row.id}} - -
- Add to dashboard -
-
- - - - {{tag}} - -
diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index f4e2b6f0df7..da285e48809 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(evt) { scope.emitAppEvent('open-search', evt); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0be54a23adc..0fc9c72bf2f 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -35,9 +35,8 @@ // Search .grafana-search-panel { - padding: 6px 10px; - .search-field-wrapper { + padding: 6px 10px; input { width: 100%; } @@ -50,25 +49,55 @@ padding-right: 25px; } } +} - .selected td, tr.selected:nth-child(odd)>td { - background: @blue; - color: white; - text-shadow: -1px -1px 1px rgba(0,0,0,0.3); - a { - color: white; +.search-results-container { + .search-result-item a { + } + + .search-result-item:hover, .search-result-item.selected { + .search-result-link, .icon { + color: @grafanaListHighlight; + } + .search-result-link .label { + background-color: @blue; } } - .selected-tag .label-tag { - background-color: @blue; + + .search-result-link { + color: @grafanaListMainLinkColor; + .icon { + padding-right: 10px; + color: @grafanaListHighlightContrast; + } + } + + .search-result-item:nth-child(odd) { + background-color: @grafanaListAccent; + } + + .search-result-item { + padding: 6px 10px; + white-space: nowrap; + border-top: 1px solid @grafanaListBorderTop; + border-bottom: 1px solid @grafanaListBorderBottom; + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 10px; } } .search-tagview-switch { position: absolute; top: 15px; - right: 263px; + right: 266px; color: darken(@linkColor, 30%); &.active { color: @linkColor; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 3f4551ee4c5..3397ceed020 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -57,7 +57,7 @@ // Links // ------------------------- -@linkColor: darken(@white,5%); +@linkColor: darken(@white,11%); @linkColorHover: @white; @@ -93,6 +93,14 @@ @borderRadiusLarge: 4px; @borderRadiusSmall: 2px; +// Lists +@grafanaListBackground: transparent; +@grafanaListAccent: #232323; +@grafanaListBorderTop: #3E3E3E; +@grafanaListBorderBottom: #1c1919; +@grafanaListHighlight: @blue; +@grafanaListHighlightContrast: #4F4F4F; +@grafanaListMainLinkColor: @linkColor; // Tables // ------------------------- diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index a54218ebd4a..562114a9e54 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -20,7 +20,7 @@ // Accent colors // ------------------------- -@blue: #01A6E6; +@blue: #007FFF; @blueDark: #75CAEB; @green: #28B62C; @red: #FF4136; @@ -97,6 +97,15 @@ @borderRadiusLarge: 4px; @borderRadiusSmall: 2px; +// Lists +@grafanaListBackground: transparent; +@grafanaListAccent: #f9f9f9; +@grafanaListBorderTop: #eee; +@grafanaListBorderBottom: #efefef; +@grafanaListHighlight: @blue; +@grafanaListHighlightContrast: #ddd; +@grafanaListMainLinkColor: @textColor; + // Tables // ------------------------- 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 008/146] 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 937ac84538492571367c71a0513439133b8792a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 21:47:56 +0200 Subject: [PATCH 009/146] Began work on per series style overrides, #425 --- src/app/directives/addGraphiteFunc.js | 2 +- src/app/directives/grafanaGraph.js | 4 ++- src/app/panels/graph/module.js | 48 +++++++++++++++++++++++++++ src/app/panels/graph/styleEditor.html | 39 ++++++++++++++++++++-- src/app/services/panelSrv.js | 2 +- 5 files changed, 90 insertions(+), 5 deletions(-) diff --git a/src/app/directives/addGraphiteFunc.js b/src/app/directives/addGraphiteFunc.js index ca5943da508..6898b838845 100644 --- a/src/app/directives/addGraphiteFunc.js +++ b/src/app/directives/addGraphiteFunc.js @@ -97,4 +97,4 @@ function (angular, app, _, $, gfunc) { }; }); } -}); \ No newline at end of file +}); diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index a91967b967b..f0ffd14dd67 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -156,9 +156,11 @@ function (angular, $, kbn, moment, _) { for (var i = 0; i < data.length; i++) { var _d = data[i].getFlotPairs(panel.nullPointMode, panel.y_formats); data[i].data = _d; + data[0].lines = { show: false }; + data[0].bars = { show: true }; } - if (panel.bars && data.length && data[0].info.timeStep) { + if (data.length && data[0].info.timeStep) { options.series.bars.barWidth = data[0].info.timeStep / 1.5; } diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 647e52c257e..d8a31f59312 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -180,6 +180,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) { aliasColors: {}, aliasYAxis: {}, + + seriesOverrides: [], }; _.defaults($scope.panel,_d); @@ -357,7 +359,53 @@ function (angular, app, $, _, kbn, moment, timeSeries) { $scope.render(); }; + $scope.addSeriesOverride = function() { + $scope.panel.seriesOverrides.push({}); + }; + panelSrv.init($scope); }); + angular + .module('grafana.directives') + .directive('seriesOverrideOption', function($compile) { + var template = + '
' + + '' + + '' + + '
'; + + return { + scope: true, + link: function($scope, elem, attrs) { + var $template = $(template); + elem.append($template); + var $link = $(elem).find('a'); + + $scope.options = $scope.$eval(attrs.options); + $scope.options.unshift(null); + + $scope.options = _.map($scope.options, function(option, index) { + return { + text: option === null ? '' : String(option), + value: option, + click: 'setValue(' + index + ')' + }; + }); + + $scope.setValue = function(index) { + var value = $scope.options[index].value; + if (value === null) { + $link.html(''); + } + else { + $link.html(value); + } + }; + + $compile(elem.contents())($scope); + } + }; + }); + }); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index ec18121cba7..c1b68e25beb 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -1,5 +1,3 @@ - -
Chart Options
@@ -64,3 +62,40 @@
+ +
+
+
Series specific overrides
+ + + + + + + + + + + + + + + + + + + + +
Series alias/regexBarsLinesPointsFillWidthRadiusStaircaseStackY-axisZ-indexColor
+ + + + + + + +
+ + +
+
diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 3c362818f2d..cae4f14ff98 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -104,7 +104,7 @@ function (angular, _) { // Post init phase $scope.fullscreen = false; - $scope.editor = { index: 1 }; + $scope.editor = { index: 3 }; if ($scope.panelMeta.fullEditorTabs) { $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs, 'title'); } From 299053f2d574542eb888bd01126dade40c50e262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Aug 2014 11:12:48 +0200 Subject: [PATCH 010/146] Fix for utc in timepicker, Closes #713 --- src/app/panels/timepicker/module.js | 4 +- src/vendor/moment.js | 1330 +++++++++++++++++---------- 2 files changed, 871 insertions(+), 463 deletions(-) diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index e080096ae60..f00ad5f7a87 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -193,8 +193,8 @@ function (angular, app, _, moment, kbn) { moment(model.to.date).fromNow(); } else { - model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY hh:mm:ss') + ' to ' + - $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY hh:mm:ss'); + model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY HH:mm:ss') + ' to ' + + $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY HH:mm:ss'); } } diff --git a/src/vendor/moment.js b/src/vendor/moment.js index 4efd7d50b94..03a2460105d 100644 --- a/src/vendor/moment.js +++ b/src/vendor/moment.js @@ -1,18 +1,19 @@ //! moment.js -//! version : 2.5.1 +//! version : 2.8.1 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors //! license : MIT //! momentjs.com (function (undefined) { - /************************************ Constants ************************************/ var moment, - VERSION = "2.5.1", - global = this, + VERSION = '2.8.1', + // the global-scope this is NOT the global object in Node.js + globalScope = typeof global !== 'undefined' ? global : this, + oldGlobalMoment, round = Math.round, i, @@ -24,24 +25,14 @@ SECOND = 5, MILLISECOND = 6, - // internal storage for language config files - languages = {}, + // internal storage for locale config files + locales = {}, - // moment internal properties - momentProperties = { - _isAMomentObject: null, - _i : null, - _f : null, - _l : null, - _strict : null, - _isUTC : null, - _offset : null, // optional. Combine with _isUTC - _pf : null, - _lang : null // optional - }, + // extra moment internal properties (plugins register props here) + momentProperties = [], // check for nodeJS - hasModule = (typeof module !== 'undefined' && module.exports && typeof require !== 'undefined'), + hasModule = (typeof module !== 'undefined' && module.exports), // ASP.NET json date format regex aspNetJsonRegex = /^\/?Date\((\-?\d+)/i, @@ -52,7 +43,7 @@ isoDurationRegex = /^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/, // format tokens - formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|X|zz?|ZZ?|.)/g, + formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Q|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|X|zz?|ZZ?|.)/g, localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g, // parsing token regexes @@ -65,6 +56,7 @@ parseTokenTimezone = /Z|[\+\-]\d\d:?\d\d/gi, // +00:00 -00:00 +0000 -0000 or Z parseTokenT = /T/i, // T (ISO separator) parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123 + parseTokenOrdinal = /\d{1,2}/, //strict parsing regexes parseTokenOneDigit = /\d/, // 0 - 9 @@ -90,7 +82,7 @@ // iso time formats and regexes isoTimes = [ - ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d{1,3}/], + ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d+/], ['HH:mm:ss', /(T| )\d\d:\d\d:\d\d/], ['HH:mm', /(T| )\d\d:\d\d/], ['HH', /(T| )\d\d/] @@ -121,6 +113,7 @@ w : 'week', W : 'isoWeek', M : 'month', + Q : 'quarter', y : 'year', DDD : 'dayOfYear', e : 'weekday', @@ -140,6 +133,15 @@ // format function strings formatFunctions = {}, + // default relative time thresholds + relativeTimeThresholds = { + s: 45, // seconds to minute + m: 45, // minutes to hour + h: 22, // hours to day + d: 26, // days to month + M: 11 // months to year + }, + // tokens to ordinalize and pad ordinalizeTokens = 'DDD w W M D d'.split(' '), paddedTokens = 'M D H h m s w W'.split(' '), @@ -149,10 +151,10 @@ return this.month() + 1; }, MMM : function (format) { - return this.lang().monthsShort(this, format); + return this.localeData().monthsShort(this, format); }, MMMM : function (format) { - return this.lang().months(this, format); + return this.localeData().months(this, format); }, D : function () { return this.date(); @@ -164,13 +166,13 @@ return this.day(); }, dd : function (format) { - return this.lang().weekdaysMin(this, format); + return this.localeData().weekdaysMin(this, format); }, ddd : function (format) { - return this.lang().weekdaysShort(this, format); + return this.localeData().weekdaysShort(this, format); }, dddd : function (format) { - return this.lang().weekdays(this, format); + return this.localeData().weekdays(this, format); }, w : function () { return this.week(); @@ -216,10 +218,10 @@ return this.isoWeekday(); }, a : function () { - return this.lang().meridiem(this.hours(), this.minutes(), true); + return this.localeData().meridiem(this.hours(), this.minutes(), true); }, A : function () { - return this.lang().meridiem(this.hours(), this.minutes(), false); + return this.localeData().meridiem(this.hours(), this.minutes(), false); }, H : function () { return this.hours(); @@ -247,19 +249,19 @@ }, Z : function () { var a = -this.zone(), - b = "+"; + b = '+'; if (a < 0) { a = -a; - b = "-"; + b = '-'; } - return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2); + return b + leftZeroFill(toInt(a / 60), 2) + ':' + leftZeroFill(toInt(a) % 60, 2); }, ZZ : function () { var a = -this.zone(), - b = "+"; + b = '+'; if (a < 0) { a = -a; - b = "-"; + b = '-'; } return b + leftZeroFill(toInt(a / 60), 2) + leftZeroFill(toInt(a) % 60, 2); }, @@ -277,8 +279,20 @@ } }, + deprecations = {}, + lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin']; + // Pick the first defined of two or three arguments. dfl comes from + // default. + function dfl(a, b, c) { + switch (arguments.length) { + case 2: return a != null ? a : b; + case 3: return a != null ? a : b != null ? b : c; + default: throw new Error('Implement me'); + } + } + function defaultParsingFlags() { // We need to deep clone this object, and es5 standard is not very // helpful. @@ -296,6 +310,31 @@ }; } + function printMsg(msg) { + if (moment.suppressDeprecationWarnings === false && + typeof console !== 'undefined' && console.warn) { + console.warn("Deprecation warning: " + msg); + } + } + + function deprecate(msg, fn) { + var firstTime = true; + return extend(function () { + if (firstTime) { + printMsg(msg); + firstTime = false; + } + return fn.apply(this, arguments); + }, fn); + } + + function deprecateSimple(name, msg) { + if (!deprecations[name]) { + printMsg(msg); + deprecations[name] = true; + } + } + function padToken(func, count) { return function (a) { return leftZeroFill(func.call(this, a), count); @@ -303,7 +342,7 @@ } function ordinalizeToken(func, period) { return function (a) { - return this.lang().ordinal(func.call(this, a), period); + return this.localeData().ordinal(func.call(this, a), period); }; } @@ -322,20 +361,23 @@ Constructors ************************************/ - function Language() { - + function Locale() { } // Moment prototype object - function Moment(config) { - checkOverflow(config); - extend(this, config); + function Moment(config, skipOverflow) { + if (skipOverflow !== false) { + checkOverflow(config); + } + copyConfig(this, config); + this._d = new Date(+config._d); } // Duration Constructor function Duration(duration) { var normalizedInput = normalizeObjectUnits(duration), years = normalizedInput.year || 0, + quarters = normalizedInput.quarter || 0, months = normalizedInput.month || 0, weeks = normalizedInput.week || 0, days = normalizedInput.day || 0, @@ -357,10 +399,13 @@ // which months you are are talking about, so we have to store // it separately. this._months = +months + + quarters * 3 + years * 12; this._data = {}; + this._locale = moment.localeData(); + this._bubble(); } @@ -376,26 +421,62 @@ } } - if (b.hasOwnProperty("toString")) { + if (b.hasOwnProperty('toString')) { a.toString = b.toString; } - if (b.hasOwnProperty("valueOf")) { + if (b.hasOwnProperty('valueOf')) { a.valueOf = b.valueOf; } return a; } - function cloneMoment(m) { - var result = {}, i; - for (i in m) { - if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) { - result[i] = m[i]; + function copyConfig(to, from) { + var i, prop, val; + + if (typeof from._isAMomentObject !== 'undefined') { + to._isAMomentObject = from._isAMomentObject; + } + if (typeof from._i !== 'undefined') { + to._i = from._i; + } + if (typeof from._f !== 'undefined') { + to._f = from._f; + } + if (typeof from._l !== 'undefined') { + to._l = from._l; + } + if (typeof from._strict !== 'undefined') { + to._strict = from._strict; + } + if (typeof from._tzm !== 'undefined') { + to._tzm = from._tzm; + } + if (typeof from._isUTC !== 'undefined') { + to._isUTC = from._isUTC; + } + if (typeof from._offset !== 'undefined') { + to._offset = from._offset; + } + if (typeof from._pf !== 'undefined') { + to._pf = from._pf; + } + if (typeof from._locale !== 'undefined') { + to._locale = from._locale; + } + + if (momentProperties.length > 0) { + for (i in momentProperties) { + prop = momentProperties[i]; + val = from[prop]; + if (typeof val !== 'undefined') { + to[prop] = val; + } } } - return result; + return to; } function absRound(number) { @@ -418,35 +499,68 @@ return (sign ? (forceSign ? '+' : '') : '-') + output; } - // helper function for _.addTime and _.subtractTime - function addOrSubtractDurationFromMoment(mom, duration, isAdding, ignoreUpdateOffset) { + function positiveMomentsDifference(base, other) { + var res = {milliseconds: 0, months: 0}; + + res.months = other.month() - base.month() + + (other.year() - base.year()) * 12; + if (base.clone().add(res.months, 'M').isAfter(other)) { + --res.months; + } + + res.milliseconds = +other - +(base.clone().add(res.months, 'M')); + + return res; + } + + function momentsDifference(base, other) { + var res; + other = makeAs(other, base); + if (base.isBefore(other)) { + res = positiveMomentsDifference(base, other); + } else { + res = positiveMomentsDifference(other, base); + res.milliseconds = -res.milliseconds; + res.months = -res.months; + } + + return res; + } + + // TODO: remove 'name' arg after deprecation is removed + function createAdder(direction, name) { + return function (val, period) { + var dur, tmp; + //invert the arguments, but complain about it + if (period !== null && !isNaN(+period)) { + deprecateSimple(name, "moment()." + name + "(period, number) is deprecated. Please use moment()." + name + "(number, period)."); + tmp = val; val = period; period = tmp; + } + + val = typeof val === 'string' ? +val : val; + dur = moment.duration(val, period); + addOrSubtractDurationFromMoment(this, dur, direction); + return this; + }; + } + + function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) { var milliseconds = duration._milliseconds, days = duration._days, - months = duration._months, - minutes, - hours; + months = duration._months; + updateOffset = updateOffset == null ? true : updateOffset; if (milliseconds) { mom._d.setTime(+mom._d + milliseconds * isAdding); } - // store the minutes and hours so we can restore them - if (days || months) { - minutes = mom.minute(); - hours = mom.hour(); - } if (days) { - mom.date(mom.date() + days * isAdding); + rawSetter(mom, 'Date', rawGetter(mom, 'Date') + days * isAdding); } if (months) { - mom.month(mom.month() + months * isAdding); + rawMonthSetter(mom, rawGetter(mom, 'Month') + months * isAdding); } - if (milliseconds && !ignoreUpdateOffset) { - moment.updateOffset(mom); - } - // restore the minutes and hours after possibly changing dst - if (days || months) { - mom.minute(minutes); - mom.hour(hours); + if (updateOffset) { + moment.updateOffset(mom, days || months); } } @@ -456,8 +570,8 @@ } function isDate(input) { - return Object.prototype.toString.call(input) === '[object Date]' || - input instanceof Date; + return Object.prototype.toString.call(input) === '[object Date]' || + input instanceof Date; } // compare two arrays, return the number of differences @@ -517,7 +631,7 @@ moment[field] = function (format, index) { var i, getter, - method = moment.fn._lang[field], + method = moment._locale[field], results = []; if (typeof format === 'number') { @@ -527,7 +641,7 @@ getter = function (i) { var m = moment().utc().set(setter, i); - return method.call(moment.fn._lang, m, format || ''); + return method.call(moment._locale, m, format || ''); }; if (index != null) { @@ -561,6 +675,10 @@ return new Date(Date.UTC(year, month + 1, 0)).getUTCDate(); } + function weeksInYear(year, dow, doy) { + return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week; + } + function daysInYear(year) { return isLeapYear(year) ? 366 : 365; } @@ -608,10 +726,50 @@ return m._isValid; } - function normalizeLanguage(key) { + function normalizeLocale(key) { return key ? key.toLowerCase().replace('_', '-') : key; } + // pick the locale from the array + // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each + // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root + function chooseLocale(names) { + var i = 0, j, next, locale, split; + + while (i < names.length) { + split = normalizeLocale(names[i]).split('-'); + j = split.length; + next = normalizeLocale(names[i + 1]); + next = next ? next.split('-') : null; + while (j > 0) { + locale = loadLocale(split.slice(0, j).join('-')); + if (locale) { + return locale; + } + if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) { + //the next array item is better than a shallower substring of this one + break; + } + j--; + } + i++; + } + return null; + } + + function loadLocale(name) { + var oldLocale = null; + if (!locales[name] && hasModule) { + try { + oldLocale = moment.locale(); + require('./locale/' + name); + // because defineLocale currently also sets the global locale, we want to undo that for lazy loaded locales + moment.locale(oldLocale); + } catch (e) { } + } + return locales[name]; + } + // Return a moment from input, that is local/utc/zone equivalent to model. function makeAs(input, model) { return model._isUTC ? moment(input).zone(model._offset || 0) : @@ -619,11 +777,11 @@ } /************************************ - Languages + Locale ************************************/ - extend(Language.prototype, { + extend(Locale.prototype, { set : function (config) { var prop, i; @@ -637,12 +795,12 @@ } }, - _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), + _months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), months : function (m) { return this._months[m.month()]; }, - _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), + _monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), monthsShort : function (m) { return this._monthsShort[m.month()]; }, @@ -668,17 +826,17 @@ } }, - _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), + _weekdays : 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'), weekdays : function (m) { return this._weekdays[m.day()]; }, - _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), + _weekdaysShort : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'), weekdaysShort : function (m) { return this._weekdaysShort[m.day()]; }, - _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), + _weekdaysMin : 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'), weekdaysMin : function (m) { return this._weekdaysMin[m.day()]; }, @@ -705,11 +863,11 @@ }, _longDateFormat : { - LT : "h:mm A", - L : "MM/DD/YYYY", - LL : "MMMM D YYYY", - LLL : "MMMM D YYYY LT", - LLLL : "dddd, MMMM D YYYY LT" + LT : 'h:mm A', + L : 'MM/DD/YYYY', + LL : 'MMMM D, YYYY', + LLL : 'MMMM D, YYYY LT', + LLLL : 'dddd, MMMM D, YYYY LT' }, longDateFormat : function (key) { var output = this._longDateFormat[key]; @@ -751,35 +909,37 @@ }, _relativeTime : { - future : "in %s", - past : "%s ago", - s : "a few seconds", - m : "a minute", - mm : "%d minutes", - h : "an hour", - hh : "%d hours", - d : "a day", - dd : "%d days", - M : "a month", - MM : "%d months", - y : "a year", - yy : "%d years" + future : 'in %s', + past : '%s ago', + s : 'a few seconds', + m : 'a minute', + mm : '%d minutes', + h : 'an hour', + hh : '%d hours', + d : 'a day', + dd : '%d days', + M : 'a month', + MM : '%d months', + y : 'a year', + yy : '%d years' }, + relativeTime : function (number, withoutSuffix, string, isFuture) { var output = this._relativeTime[string]; return (typeof output === 'function') ? output(number, withoutSuffix, string, isFuture) : output.replace(/%d/i, number); }, + pastFuture : function (diff, output) { var format = this._relativeTime[diff > 0 ? 'future' : 'past']; return typeof format === 'function' ? format(output) : format.replace(/%s/i, output); }, ordinal : function (number) { - return this._ordinal.replace("%d", number); + return this._ordinal.replace('%d', number); }, - _ordinal : "%d", + _ordinal : '%d', preparse : function (string) { return string; @@ -804,78 +964,6 @@ } }); - // Loads a language definition into the `languages` cache. The function - // takes a key and optionally values. If not in the browser and no values - // are provided, it will load the language file module. As a convenience, - // this function also returns the language values. - function loadLang(key, values) { - values.abbr = key; - if (!languages[key]) { - languages[key] = new Language(); - } - languages[key].set(values); - return languages[key]; - } - - // Remove a language from the `languages` cache. Mostly useful in tests. - function unloadLang(key) { - delete languages[key]; - } - - // Determines which language definition to use and returns it. - // - // With no parameters, it will return the global language. If you - // pass in a language key, such as 'en', it will return the - // definition for 'en', so long as 'en' has already been loaded using - // moment.lang. - function getLangDefinition(key) { - var i = 0, j, lang, next, split, - get = function (k) { - if (!languages[k] && hasModule) { - try { - require('./lang/' + k); - } catch (e) { } - } - return languages[k]; - }; - - if (!key) { - return moment.fn._lang; - } - - if (!isArray(key)) { - //short-circuit everything else - lang = get(key); - if (lang) { - return lang; - } - key = [key]; - } - - //pick the language from the array - //try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each - //substring from most specific to least, but move to the next array item if it's a more specific variant than the current root - while (i < key.length) { - split = normalizeLanguage(key[i]).split('-'); - j = split.length; - next = normalizeLanguage(key[i + 1]); - next = next ? next.split('-') : null; - while (j > 0) { - lang = get(split.slice(0, j).join('-')); - if (lang) { - return lang; - } - if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) { - //the next array item is better than a shallower substring of this one - break; - } - j--; - } - i++; - } - return moment.fn._lang; - } - /************************************ Formatting ************************************/ @@ -883,9 +971,9 @@ function removeFormattingTokens(input) { if (input.match(/\[[\s\S]/)) { - return input.replace(/^\[|\]$/g, ""); + return input.replace(/^\[|\]$/g, ''); } - return input.replace(/\\/g, ""); + return input.replace(/\\/g, ''); } function makeFormatFunction(format) { @@ -900,7 +988,7 @@ } return function (mom) { - var output = ""; + var output = ''; for (i = 0; i < length; i++) { output += array[i] instanceof Function ? array[i].call(mom, format) : array[i]; } @@ -910,12 +998,11 @@ // format date using native date object function formatMoment(m, format) { - if (!m.isValid()) { - return m.lang().invalidDate(); + return m.localeData().invalidDate(); } - format = expandFormat(format, m.lang()); + format = expandFormat(format, m.localeData()); if (!formatFunctions[format]) { formatFunctions[format] = makeFormatFunction(format); @@ -924,11 +1011,11 @@ return formatFunctions[format](m); } - function expandFormat(format, lang) { + function expandFormat(format, locale) { var i = 5; function replaceLongDateFormatTokens(input) { - return lang.longDateFormat(input) || input; + return locale.longDateFormat(input) || input; } localFormattingTokens.lastIndex = 0; @@ -951,6 +1038,8 @@ function getParseRegexForToken(token, config) { var a, strict = config._strict; switch (token) { + case 'Q': + return parseTokenOneDigit; case 'DDDD': return parseTokenThreeDigits; case 'YYYY': @@ -967,13 +1056,19 @@ case 'ggggg': return strict ? parseTokenSixDigits : parseTokenOneToSixDigits; case 'S': - if (strict) { return parseTokenOneDigit; } + if (strict) { + return parseTokenOneDigit; + } /* falls through */ case 'SS': - if (strict) { return parseTokenTwoDigits; } + if (strict) { + return parseTokenTwoDigits; + } /* falls through */ case 'SSS': - if (strict) { return parseTokenThreeDigits; } + if (strict) { + return parseTokenThreeDigits; + } /* falls through */ case 'DDD': return parseTokenOneToThreeDigits; @@ -985,7 +1080,7 @@ return parseTokenWord; case 'a': case 'A': - return getLangDefinition(config._l)._meridiemParse; + return config._locale._meridiemParse; case 'X': return parseTokenTimestampMs; case 'Z': @@ -1019,14 +1114,16 @@ case 'e': case 'E': return parseTokenOneOrTwoDigits; + case 'Do': + return parseTokenOrdinal; default : - a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i")); + a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), 'i')); return a; } } function timezoneMinutesFromString(string) { - string = string || ""; + string = string || ''; var possibleTzMatches = (string.match(parseTokenTimezone) || []), tzChunk = possibleTzMatches[possibleTzMatches.length - 1] || [], parts = (tzChunk + '').match(parseTimezoneChunker) || ['-', 0, 0], @@ -1040,6 +1137,12 @@ var a, datePartArray = config._a; switch (token) { + // QUARTER + case 'Q': + if (input != null) { + datePartArray[MONTH] = (toInt(input) - 1) * 3; + } + break; // MONTH case 'M' : // fall through to MM case 'MM' : @@ -1049,7 +1152,7 @@ break; case 'MMM' : // fall through to MMMM case 'MMMM' : - a = getLangDefinition(config._l).monthsParse(input); + a = config._locale.monthsParse(input); // if we didn't find a month name, mark the date as invalid. if (a != null) { datePartArray[MONTH] = a; @@ -1064,6 +1167,11 @@ datePartArray[DATE] = toInt(input); } break; + case 'Do' : + if (input != null) { + datePartArray[DATE] = toInt(parseInt(input, 10)); + } + break; // DAY OF YEAR case 'DDD' : // fall through to DDDD case 'DDDD' : @@ -1074,7 +1182,7 @@ break; // YEAR case 'YY' : - datePartArray[YEAR] = toInt(input) + (toInt(input) > 68 ? 1900 : 2000); + datePartArray[YEAR] = moment.parseTwoDigitYear(input); break; case 'YYYY' : case 'YYYYY' : @@ -1084,7 +1192,7 @@ // AM / PM case 'a' : // fall through to A case 'A' : - config._isPm = getLangDefinition(config._l).isPM(input); + config._isPm = config._locale.isPM(input); break; // 24 HOUR case 'H' : // fall through to hh @@ -1120,39 +1228,93 @@ config._useUTC = true; config._tzm = timezoneMinutesFromString(input); break; + // WEEKDAY - human + case 'dd': + case 'ddd': + case 'dddd': + a = config._locale.weekdaysParse(input); + // if we didn't get a weekday name, mark the date as invalid + if (a != null) { + config._w = config._w || {}; + config._w['d'] = a; + } else { + config._pf.invalidWeekday = input; + } + break; + // WEEK, WEEK DAY - numeric case 'w': case 'ww': case 'W': case 'WW': case 'd': - case 'dd': - case 'ddd': - case 'dddd': case 'e': case 'E': token = token.substr(0, 1); /* falls through */ - case 'gg': case 'gggg': - case 'GG': case 'GGGG': case 'GGGGG': token = token.substr(0, 2); if (input) { config._w = config._w || {}; - config._w[token] = input; + config._w[token] = toInt(input); } break; + case 'gg': + case 'GG': + config._w = config._w || {}; + config._w[token] = moment.parseTwoDigitYear(input); } } + function dayOfYearFromWeekInfo(config) { + var w, weekYear, week, weekday, dow, doy, temp; + + w = config._w; + if (w.GG != null || w.W != null || w.E != null) { + dow = 1; + doy = 4; + + // TODO: We need to take the current isoWeekYear, but that depends on + // how we interpret now (local, utc, fixed offset). So create + // a now version of current config (take local/utc/offset flags, and + // create now). + weekYear = dfl(w.GG, config._a[YEAR], weekOfYear(moment(), 1, 4).year); + week = dfl(w.W, 1); + weekday = dfl(w.E, 1); + } else { + dow = config._locale._week.dow; + doy = config._locale._week.doy; + + weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year); + week = dfl(w.w, 1); + + if (w.d != null) { + // weekday -- low day numbers are considered next week + weekday = w.d; + if (weekday < dow) { + ++week; + } + } else if (w.e != null) { + // local weekday -- counting starts from begining of week + weekday = w.e + dow; + } else { + // default to begining of week + weekday = dow; + } + } + temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow); + + config._a[YEAR] = temp.year; + config._dayOfYear = temp.dayOfYear; + } + // convert an array to a date. // the array should mirror the parameters below // note: all values past the year are optional and will default to the lowest possible value. // [year, month, day , hour, minute, second, millisecond] function dateFromConfig(config) { - var i, date, input = [], currentDate, - yearToUse, fixYear, w, temp, lang, weekday, week; + var i, date, input = [], currentDate, yearToUse; if (config._d) { return; @@ -1162,39 +1324,12 @@ //compute day of the year from weeks and weekdays if (config._w && config._a[DATE] == null && config._a[MONTH] == null) { - fixYear = function (val) { - var int_val = parseInt(val, 10); - return val ? - (val.length < 3 ? (int_val > 68 ? 1900 + int_val : 2000 + int_val) : int_val) : - (config._a[YEAR] == null ? moment().weekYear() : config._a[YEAR]); - }; - - w = config._w; - if (w.GG != null || w.W != null || w.E != null) { - temp = dayOfYearFromWeeks(fixYear(w.GG), w.W || 1, w.E, 4, 1); - } - else { - lang = getLangDefinition(config._l); - weekday = w.d != null ? parseWeekday(w.d, lang) : - (w.e != null ? parseInt(w.e, 10) + lang._week.dow : 0); - - week = parseInt(w.w, 10) || 1; - - //if we're parsing 'd', then the low day numbers may be next week - if (w.d != null && weekday < lang._week.dow) { - week++; - } - - temp = dayOfYearFromWeeks(fixYear(w.gg), week, weekday, lang._week.doy, lang._week.dow); - } - - config._a[YEAR] = temp.year; - config._dayOfYear = temp.dayOfYear; + dayOfYearFromWeekInfo(config); } //if the day of the year is set, figure out what it is if (config._dayOfYear) { - yearToUse = config._a[YEAR] == null ? currentDate[YEAR] : config._a[YEAR]; + yearToUse = dfl(config._a[YEAR], currentDate[YEAR]); if (config._dayOfYear > daysInYear(yearToUse)) { config._pf._overflowDayOfYear = true; @@ -1219,11 +1354,12 @@ config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i]; } - // add the offsets to the time to be parsed so that we can have a clean array for checking isValid - input[HOUR] += toInt((config._tzm || 0) / 60); - input[MINUTE] += toInt((config._tzm || 0) % 60); - config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input); + // Apply timezone offset from input. The actual zone can be changed + // with parseZone. + if (config._tzm != null) { + config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm); + } } function dateFromObject(config) { @@ -1262,18 +1398,21 @@ // date from string and format string function makeDateFromStringAndFormat(config) { + if (config._f === moment.ISO_8601) { + parseISO(config); + return; + } config._a = []; config._pf.empty = true; // This array is used to make a Date, either with `new Date` or `Date.UTC` - var lang = getLangDefinition(config._l), - string = '' + config._i, + var string = '' + config._i, i, parsedInput, tokens, token, skipped, stringLength = string.length, totalParsedInputLength = 0; - tokens = expandFormat(config._f, lang).match(formattingTokens) || []; + tokens = expandFormat(config._f, config._locale).match(formattingTokens) || []; for (i = 0; i < tokens.length; i++) { token = tokens[i]; @@ -1348,7 +1487,7 @@ for (i = 0; i < config._f.length; i++) { currentScore = 0; - tempConfig = extend({}, config); + tempConfig = copyConfig({}, config); tempConfig._pf = defaultParsingFlags(); tempConfig._f = config._f[i]; makeDateFromStringAndFormat(tempConfig); @@ -1375,7 +1514,7 @@ } // date from iso format - function makeDateFromString(config) { + function parseISO(config) { var i, l, string = config._i, match = isoRegex.exec(string); @@ -1385,7 +1524,7 @@ for (i = 0, l = isoDates.length; i < l; i++) { if (isoDates[i][1].exec(string)) { // match[5] should be "T" or undefined - config._f = isoDates[i][0] + (match[6] || " "); + config._f = isoDates[i][0] + (match[6] || ' '); break; } } @@ -1396,34 +1535,43 @@ } } if (string.match(parseTokenTimezone)) { - config._f += "Z"; + config._f += 'Z'; } makeDateFromStringAndFormat(config); + } else { + config._isValid = false; } - else { - config._d = new Date(string); + } + + // date from iso format or fallback + function makeDateFromString(config) { + parseISO(config); + if (config._isValid === false) { + delete config._isValid; + moment.createFromInputFallback(config); } } function makeDateFromInput(config) { - var input = config._i, - matched = aspNetJsonRegex.exec(input); - + var input = config._i, matched; if (input === undefined) { config._d = new Date(); - } else if (matched) { + } else if (isDate(input)) { + config._d = new Date(+input); + } else if ((matched = aspNetJsonRegex.exec(input)) !== null) { config._d = new Date(+matched[1]); } else if (typeof input === 'string') { makeDateFromString(config); } else if (isArray(input)) { config._a = input.slice(0); dateFromConfig(config); - } else if (isDate(input)) { - config._d = new Date(+input); } else if (typeof(input) === 'object') { dateFromObject(config); - } else { + } else if (typeof(input) === 'number') { + // from milliseconds config._d = new Date(input); + } else { + moment.createFromInputFallback(config); } } @@ -1447,13 +1595,13 @@ return date; } - function parseWeekday(input, language) { + function parseWeekday(input, locale) { if (typeof input === 'string') { if (!isNaN(input)) { input = parseInt(input, 10); } else { - input = language.weekdaysParse(input); + input = locale.weekdaysParse(input); if (typeof input !== 'number') { return null; } @@ -1468,29 +1616,33 @@ // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize - function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) { - return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture); + function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) { + return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture); } - function relativeTime(milliseconds, withoutSuffix, lang) { - var seconds = round(Math.abs(milliseconds) / 1000), - minutes = round(seconds / 60), - hours = round(minutes / 60), - days = round(hours / 24), - years = round(days / 365), - args = seconds < 45 && ['s', seconds] || + function relativeTime(posNegDuration, withoutSuffix, locale) { + var duration = moment.duration(posNegDuration).abs(), + seconds = round(duration.as('s')), + minutes = round(duration.as('m')), + hours = round(duration.as('h')), + days = round(duration.as('d')), + months = round(duration.as('M')), + years = round(duration.as('y')), + + args = seconds < relativeTimeThresholds.s && ['s', seconds] || minutes === 1 && ['m'] || - minutes < 45 && ['mm', minutes] || + minutes < relativeTimeThresholds.m && ['mm', minutes] || hours === 1 && ['h'] || - hours < 22 && ['hh', hours] || + hours < relativeTimeThresholds.h && ['hh', hours] || days === 1 && ['d'] || - days <= 25 && ['dd', days] || - days <= 45 && ['M'] || - days < 345 && ['MM', round(days / 30)] || + days < relativeTimeThresholds.d && ['dd', days] || + months === 1 && ['M'] || + months < relativeTimeThresholds.M && ['MM', months] || years === 1 && ['y'] || ['yy', years]; + args[2] = withoutSuffix; - args[3] = milliseconds > 0; - args[4] = lang; + args[3] = +posNegDuration > 0; + args[4] = locale; return substituteTimeAgo.apply({}, args); } @@ -1521,7 +1673,7 @@ daysToDayOfWeek += 7; } - adjustedMoment = moment(mom).add('d', daysToDayOfWeek); + adjustedMoment = moment(mom).add(daysToDayOfWeek, 'd'); return { week: Math.ceil(adjustedMoment.dayOfYear() / 7), year: adjustedMoment.year() @@ -1532,6 +1684,7 @@ function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) { var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear; + d = d === 0 ? 7 : d; weekday = weekday != null ? weekday : firstDayOfWeek; daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0); dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1; @@ -1550,18 +1703,18 @@ var input = config._i, format = config._f; - if (input === null) { + config._locale = config._locale || moment.localeData(config._l); + + if (input === null || (format === undefined && input === '')) { return moment.invalid({nullInput: true}); } if (typeof input === 'string') { - config._i = input = getLangDefinition().preparse(input); + config._i = input = config._locale.preparse(input); } if (moment.isMoment(input)) { - config = cloneMoment(input); - - config._d = new Date(+input._d); + return new Moment(input, true); } else if (format) { if (isArray(format)) { makeDateFromStringAndArray(config); @@ -1575,12 +1728,12 @@ return new Moment(config); } - moment = function (input, format, lang, strict) { + moment = function (input, format, locale, strict) { var c; - if (typeof(lang) === "boolean") { - strict = lang; - lang = undefined; + if (typeof(locale) === "boolean") { + strict = locale; + locale = undefined; } // object construction must be done this way. // https://github.com/moment/moment/issues/1423 @@ -1588,7 +1741,7 @@ c._isAMomentObject = true; c._i = input; c._f = format; - c._l = lang; + c._l = locale; c._strict = strict; c._isUTC = false; c._pf = defaultParsingFlags(); @@ -1596,13 +1749,59 @@ return makeMoment(c); }; + moment.suppressDeprecationWarnings = false; + + moment.createFromInputFallback = deprecate( + 'moment construction falls back to js Date. This is ' + + 'discouraged and will be removed in upcoming major ' + + 'release. Please refer to ' + + 'https://github.com/moment/moment/issues/1407 for more info.', + function (config) { + config._d = new Date(config._i); + } + ); + + // Pick a moment m from moments so that m[fn](other) is true for all + // other. This relies on the function fn to be transitive. + // + // moments should either be an array of moment objects or an array, whose + // first element is an array of moment objects. + function pickBy(fn, moments) { + var res, i; + if (moments.length === 1 && isArray(moments[0])) { + moments = moments[0]; + } + if (!moments.length) { + return moment(); + } + res = moments[0]; + for (i = 1; i < moments.length; ++i) { + if (moments[i][fn](res)) { + res = moments[i]; + } + } + return res; + } + + moment.min = function () { + var args = [].slice.call(arguments, 0); + + return pickBy('isBefore', args); + }; + + moment.max = function () { + var args = [].slice.call(arguments, 0); + + return pickBy('isAfter', args); + }; + // creating with utc - moment.utc = function (input, format, lang, strict) { + moment.utc = function (input, format, locale, strict) { var c; - if (typeof(lang) === "boolean") { - strict = lang; - lang = undefined; + if (typeof(locale) === "boolean") { + strict = locale; + locale = undefined; } // object construction must be done this way. // https://github.com/moment/moment/issues/1423 @@ -1610,7 +1809,7 @@ c._isAMomentObject = true; c._useUTC = true; c._isUTC = true; - c._l = lang; + c._l = locale; c._i = input; c._f = format; c._strict = strict; @@ -1631,7 +1830,8 @@ match = null, sign, ret, - parseIso; + parseIso, + diffRes; if (moment.isDuration(input)) { duration = { @@ -1647,7 +1847,7 @@ duration.milliseconds = input; } } else if (!!(match = aspNetTimeSpanJsonRegex.exec(input))) { - sign = (match[1] === "-") ? -1 : 1; + sign = (match[1] === '-') ? -1 : 1; duration = { y: 0, d: toInt(match[DATE]) * sign, @@ -1657,7 +1857,7 @@ ms: toInt(match[MILLISECOND]) * sign }; } else if (!!(match = isoDurationRegex.exec(input))) { - sign = (match[1] === "-") ? -1 : 1; + sign = (match[1] === '-') ? -1 : 1; parseIso = function (inp) { // We'd normally use ~~inp for this, but unfortunately it also // converts floats to ints. @@ -1675,12 +1875,19 @@ s: parseIso(match[7]), w: parseIso(match[8]) }; + } else if (typeof duration === 'object' && + ('from' in duration || 'to' in duration)) { + diffRes = momentsDifference(moment(duration.from), moment(duration.to)); + + duration = {}; + duration.ms = diffRes.milliseconds; + duration.M = diffRes.months; } ret = new Duration(duration); - if (moment.isDuration(input) && input.hasOwnProperty('_lang')) { - ret._lang = input._lang; + if (moment.isDuration(input) && input.hasOwnProperty('_locale')) { + ret._locale = input._locale; } return ret; @@ -1692,36 +1899,105 @@ // default format moment.defaultFormat = isoFormat; + // constant that refers to the ISO standard + moment.ISO_8601 = function () {}; + + // Plugins that add properties should also add the key here (null value), + // so we can properly clone ourselves. + moment.momentProperties = momentProperties; + // This function will be called whenever a moment is mutated. // It is intended to keep the offset in sync with the timezone. moment.updateOffset = function () {}; - // This function will load languages and then set the global language. If - // no arguments are passed in, it will simply return the current global - // language key. - moment.lang = function (key, values) { - var r; - if (!key) { - return moment.fn._lang._abbr; + // This function allows you to set a threshold for relative time strings + moment.relativeTimeThreshold = function (threshold, limit) { + if (relativeTimeThresholds[threshold] === undefined) { + return false; } - if (values) { - loadLang(normalizeLanguage(key), values); - } else if (values === null) { - unloadLang(key); - key = 'en'; - } else if (!languages[key]) { - getLangDefinition(key); + if (limit === undefined) { + return relativeTimeThresholds[threshold]; } - r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key); - return r._abbr; + relativeTimeThresholds[threshold] = limit; + return true; }; - // returns language data - moment.langData = function (key) { - if (key && key._lang && key._lang._abbr) { - key = key._lang._abbr; + moment.lang = deprecate( + "moment.lang is deprecated. Use moment.locale instead.", + function (key, value) { + return moment.locale(key, value); } - return getLangDefinition(key); + ); + + // This function will load locale and then set the global locale. If + // no arguments are passed in, it will simply return the current global + // locale key. + moment.locale = function (key, values) { + var data; + if (key) { + if (typeof(values) !== "undefined") { + data = moment.defineLocale(key, values); + } + else { + data = moment.localeData(key); + } + + if (data) { + moment.duration._locale = moment._locale = data; + } + } + + return moment._locale._abbr; + }; + + moment.defineLocale = function (name, values) { + if (values !== null) { + values.abbr = name; + if (!locales[name]) { + locales[name] = new Locale(); + } + locales[name].set(values); + + // backwards compat for now: also set the locale + moment.locale(name); + + return locales[name]; + } else { + // useful for testing + delete locales[name]; + return null; + } + }; + + moment.langData = deprecate( + "moment.langData is deprecated. Use moment.localeData instead.", + function (key) { + return moment.localeData(key); + } + ); + + // returns locale data + moment.localeData = function (key) { + var locale; + + if (key && key._locale && key._locale._abbr) { + key = key._locale._abbr; + } + + if (!key) { + return moment._locale; + } + + if (!isArray(key)) { + //short-circuit everything else + locale = loadLocale(key); + if (locale) { + return locale; + } + key = [key]; + } + + return chooseLocale(key); }; // compare moment object @@ -1755,8 +2031,12 @@ return m; }; - moment.parseZone = function (input) { - return moment(input).parseZone(); + moment.parseZone = function () { + return moment.apply(null, arguments).parseZone(); + }; + + moment.parseTwoDigitYear = function (input) { + return toInt(input) + (toInt(input) > 68 ? 1900 : 2000); }; /************************************ @@ -1779,7 +2059,7 @@ }, toString : function () { - return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ"); + return this.clone().locale('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ"); }, toDate : function () { @@ -1813,7 +2093,6 @@ }, isDSTShifted : function () { - if (this._a) { return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0; } @@ -1829,44 +2108,30 @@ return this._pf.overflow; }, - utc : function () { - return this.zone(0); + utc : function (keepLocalTime) { + return this.zone(0, keepLocalTime); }, - local : function () { - this.zone(0); - this._isUTC = false; + local : function (keepLocalTime) { + if (this._isUTC) { + this.zone(0, keepLocalTime); + this._isUTC = false; + + if (keepLocalTime) { + this.add(this._d.getTimezoneOffset(), 'm'); + } + } return this; }, format : function (inputString) { var output = formatMoment(this, inputString || moment.defaultFormat); - return this.lang().postformat(output); + return this.localeData().postformat(output); }, - add : function (input, val) { - var dur; - // switch args to support add('s', 1) and add(1, 's') - if (typeof input === 'string') { - dur = moment.duration(+val, input); - } else { - dur = moment.duration(input, val); - } - addOrSubtractDurationFromMoment(this, dur, 1); - return this; - }, + add : createAdder(1, 'add'), - subtract : function (input, val) { - var dur; - // switch args to support subtract('s', 1) and subtract(1, 's') - if (typeof input === 'string') { - dur = moment.duration(+val, input); - } else { - dur = moment.duration(input, val); - } - addOrSubtractDurationFromMoment(this, dur, -1); - return this; - }, + subtract : createAdder(-1, 'subtract'), diff : function (input, units, asFloat) { var that = makeAs(input, this), @@ -1903,17 +2168,18 @@ }, from : function (time, withoutSuffix) { - return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix); + return moment.duration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix); }, fromNow : function (withoutSuffix) { return this.from(moment(), withoutSuffix); }, - calendar : function () { + calendar : function (time) { // We want to compare the start of today, vs this. // Getting start-of-today depends on whether we're zone'd or not. - var sod = makeAs(moment(), this).startOf('day'), + var now = time || moment(), + sod = makeAs(now, this).startOf('day'), diff = this.diff(sod, 'days', true), format = diff < -6 ? 'sameElse' : diff < -1 ? 'lastWeek' : @@ -1921,7 +2187,7 @@ diff < 1 ? 'sameDay' : diff < 2 ? 'nextDay' : diff < 7 ? 'nextWeek' : 'sameElse'; - return this.format(this.lang().calendar(format, this)); + return this.format(this.localeData().calendar(format, this)); }, isLeapYear : function () { @@ -1936,38 +2202,16 @@ day : function (input) { var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay(); if (input != null) { - input = parseWeekday(input, this.lang()); - return this.add({ d : input - day }); + input = parseWeekday(input, this.localeData()); + return this.add(input - day, 'd'); } else { return day; } }, - month : function (input) { - var utc = this._isUTC ? 'UTC' : '', - dayOfMonth; + month : makeAccessor('Month', true), - if (input != null) { - if (typeof input === 'string') { - input = this.lang().monthsParse(input); - if (typeof input !== 'number') { - return this; - } - } - - dayOfMonth = this.date(); - this.date(1); - this._d['set' + utc + 'Month'](input); - this.date(Math.min(dayOfMonth, this.daysInMonth())); - - moment.updateOffset(this); - return this; - } else { - return this._d['get' + utc + 'Month'](); - } - }, - - startOf: function (units) { + startOf : function (units) { units = normalizeUnits(units); // the following switch intentionally omits break keywords // to utilize falling through the cases. @@ -1975,6 +2219,7 @@ case 'year': this.month(0); /* falls through */ + case 'quarter': case 'month': this.date(1); /* falls through */ @@ -2001,12 +2246,17 @@ this.isoWeekday(1); } + // quarters are also special + if (units === 'quarter') { + this.month(Math.floor(this.month() / 3) * 3); + } + return this; }, endOf: function (units) { units = normalizeUnits(units); - return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1); + return this.startOf(units).add(1, (units === 'isoWeek' ? 'week' : units)).subtract(1, 'ms'); }, isAfter: function (input, units) { @@ -2024,29 +2274,59 @@ return +this.clone().startOf(units) === +makeAs(input, this).startOf(units); }, - min: function (other) { - other = moment.apply(null, arguments); - return other < this ? this : other; - }, + min: deprecate( + 'moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548', + function (other) { + other = moment.apply(null, arguments); + return other < this ? this : other; + } + ), - max: function (other) { - other = moment.apply(null, arguments); - return other > this ? this : other; - }, + max: deprecate( + 'moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548', + function (other) { + other = moment.apply(null, arguments); + return other > this ? this : other; + } + ), - zone : function (input) { - var offset = this._offset || 0; + // keepLocalTime = true means only change the timezone, without + // affecting the local hour. So 5:31:26 +0300 --[zone(2, true)]--> + // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist int zone + // +0200, so we adjust the time as needed, to be valid. + // + // Keeping the time actually adds/subtracts (one hour) + // from the actual represented time. That is why we call updateOffset + // a second time. In case it wants us to change the offset again + // _changeInProgress == true case, then we have to adjust, because + // there is no such time in the given timezone. + zone : function (input, keepLocalTime) { + var offset = this._offset || 0, + localAdjust; if (input != null) { - if (typeof input === "string") { + if (typeof input === 'string') { input = timezoneMinutesFromString(input); } if (Math.abs(input) < 16) { input = input * 60; } + if (!this._isUTC && keepLocalTime) { + localAdjust = this._d.getTimezoneOffset(); + } this._offset = input; this._isUTC = true; + if (localAdjust != null) { + this.subtract(localAdjust, 'm'); + } if (offset !== input) { - addOrSubtractDurationFromMoment(this, moment.duration(offset - input, 'm'), 1, true); + if (!keepLocalTime || this._changeInProgress) { + addOrSubtractDurationFromMoment(this, + moment.duration(offset - input, 'm'), 1, false); + } else if (!this._changeInProgress) { + this._changeInProgress = true; + moment.updateOffset(this, true); + this._changeInProgress = null; + } } } else { return this._isUTC ? offset : this._d.getTimezoneOffset(); @@ -2055,11 +2335,11 @@ }, zoneAbbr : function () { - return this._isUTC ? "UTC" : ""; + return this._isUTC ? 'UTC' : ''; }, zoneName : function () { - return this._isUTC ? "Coordinated Universal Time" : ""; + return this._isUTC ? 'Coordinated Universal Time' : ''; }, parseZone : function () { @@ -2088,36 +2368,36 @@ dayOfYear : function (input) { var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1; - return input == null ? dayOfYear : this.add("d", (input - dayOfYear)); + return input == null ? dayOfYear : this.add((input - dayOfYear), 'd'); }, - quarter : function () { - return Math.ceil((this.month() + 1.0) / 3.0); + quarter : function (input) { + return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3); }, weekYear : function (input) { - var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year; - return input == null ? year : this.add("y", (input - year)); + var year = weekOfYear(this, this.localeData()._week.dow, this.localeData()._week.doy).year; + return input == null ? year : this.add((input - year), 'y'); }, isoWeekYear : function (input) { var year = weekOfYear(this, 1, 4).year; - return input == null ? year : this.add("y", (input - year)); + return input == null ? year : this.add((input - year), 'y'); }, week : function (input) { - var week = this.lang().week(this); - return input == null ? week : this.add("d", (input - week) * 7); + var week = this.localeData().week(this); + return input == null ? week : this.add((input - week) * 7, 'd'); }, isoWeek : function (input) { var week = weekOfYear(this, 1, 4).week; - return input == null ? week : this.add("d", (input - week) * 7); + return input == null ? week : this.add((input - week) * 7, 'd'); }, weekday : function (input) { - var weekday = (this.day() + 7 - this.lang()._week.dow) % 7; - return input == null ? weekday : this.add("d", input - weekday); + var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7; + return input == null ? weekday : this.add(input - weekday, 'd'); }, isoWeekday : function (input) { @@ -2127,6 +2407,15 @@ return input == null ? this.day() || 7 : this.day(this.day() % 7 ? input : input - 7); }, + isoWeeksInYear : function () { + return weeksInYear(this.year(), 1, 4); + }, + + weeksInYear : function () { + var weekInfo = this.localeData()._week; + return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy); + }, + get : function (units) { units = normalizeUnits(units); return this[units](); @@ -2140,46 +2429,97 @@ return this; }, - // If passed a language key, it will set the language for this - // instance. Otherwise, it will return the language configuration + // If passed a locale key, it will set the locale for this + // instance. Otherwise, it will return the locale configuration // variables for this instance. - lang : function (key) { + locale : function (key) { if (key === undefined) { - return this._lang; + return this._locale._abbr; } else { - this._lang = getLangDefinition(key); + this._locale = moment.localeData(key); return this; } + }, + + lang : deprecate( + "moment().lang() is deprecated. Use moment().localeData() instead.", + function (key) { + if (key === undefined) { + return this.localeData(); + } else { + this._locale = moment.localeData(key); + return this; + } + } + ), + + localeData : function () { + return this._locale; } }); - // helper for adding shortcuts - function makeGetterAndSetter(name, key) { - moment.fn[name] = moment.fn[name + 's'] = function (input) { - var utc = this._isUTC ? 'UTC' : ''; - if (input != null) { - this._d['set' + utc + key](input); - moment.updateOffset(this); + function rawMonthSetter(mom, value) { + var dayOfMonth; + + // TODO: Move this out of here! + if (typeof value === 'string') { + value = mom.localeData().monthsParse(value); + // TODO: Another silent failure? + if (typeof value !== 'number') { + return mom; + } + } + + dayOfMonth = Math.min(mom.date(), + daysInMonth(mom.year(), value)); + mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth); + return mom; + } + + function rawGetter(mom, unit) { + return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit](); + } + + function rawSetter(mom, unit, value) { + if (unit === 'Month') { + return rawMonthSetter(mom, value); + } else { + return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value); + } + } + + function makeAccessor(unit, keepTime) { + return function (value) { + if (value != null) { + rawSetter(this, unit, value); + moment.updateOffset(this, keepTime); return this; } else { - return this._d['get' + utc + key](); + return rawGetter(this, unit); } }; } - // loop through and add shortcuts (Month, Date, Hours, Minutes, Seconds, Milliseconds) - for (i = 0; i < proxyGettersAndSetters.length; i ++) { - makeGetterAndSetter(proxyGettersAndSetters[i].toLowerCase().replace(/s$/, ''), proxyGettersAndSetters[i]); - } - - // add shortcut for year (uses different syntax than the getter/setter 'year' == 'FullYear') - makeGetterAndSetter('year', 'FullYear'); + moment.fn.millisecond = moment.fn.milliseconds = makeAccessor('Milliseconds', false); + moment.fn.second = moment.fn.seconds = makeAccessor('Seconds', false); + moment.fn.minute = moment.fn.minutes = makeAccessor('Minutes', false); + // Setting the hour should keep the time, because the user explicitly + // specified which hour he wants. So trying to maintain the same hour (in + // a new timezone) makes sense. Adding/subtracting hours does not follow + // this rule. + moment.fn.hour = moment.fn.hours = makeAccessor('Hours', true); + // moment.fn.month is defined separately + moment.fn.date = makeAccessor('Date', true); + moment.fn.dates = deprecate('dates accessor is deprecated. Use date instead.', makeAccessor('Date', true)); + moment.fn.year = makeAccessor('FullYear', true); + moment.fn.years = deprecate('years accessor is deprecated. Use year instead.', makeAccessor('FullYear', true)); // add plural methods moment.fn.days = moment.fn.day; moment.fn.months = moment.fn.month; moment.fn.weeks = moment.fn.week; moment.fn.isoWeeks = moment.fn.isoWeek; + moment.fn.quarters = moment.fn.quarter; // add aliased format methods moment.fn.toJSON = moment.fn.toISOString; @@ -2189,6 +2529,17 @@ ************************************/ + function daysToYears (days) { + // 400 years have 146097 days (taking into account leap year rules) + return days * 400 / 146097; + } + + function yearsToDays (years) { + // years * 365 + absRound(years / 4) - + // absRound(years / 100) + absRound(years / 400); + return years * 146097 / 400; + } + extend(moment.duration.fn = Duration.prototype, { _bubble : function () { @@ -2196,7 +2547,7 @@ days = this._days, months = this._months, data = this._data, - seconds, minutes, hours, years; + seconds, minutes, hours, years = 0; // The following code bubbles up values, see the tests for // examples of what that means. @@ -2212,15 +2563,40 @@ data.hours = hours % 24; days += absRound(hours / 24); - data.days = days % 30; + // Accurately convert days to years, assume start from year 0. + years = absRound(daysToYears(days)); + days -= absRound(yearsToDays(years)); + + // 30 days to a month + // TODO (iskren): Use anchor date (like 1st Jan) to compute this. months += absRound(days / 30); - data.months = months % 12; + days %= 30; - years = absRound(months / 12); + // 12 months -> 1 year + years += absRound(months / 12); + months %= 12; + + data.days = days; + data.months = months; data.years = years; }, + abs : function () { + this._milliseconds = Math.abs(this._milliseconds); + this._days = Math.abs(this._days); + this._months = Math.abs(this._months); + + this._data.milliseconds = Math.abs(this._data.milliseconds); + this._data.seconds = Math.abs(this._data.seconds); + this._data.minutes = Math.abs(this._data.minutes); + this._data.hours = Math.abs(this._data.hours); + this._data.months = Math.abs(this._data.months); + this._data.years = Math.abs(this._data.years); + + return this; + }, + weeks : function () { return absRound(this.days() / 7); }, @@ -2233,14 +2609,13 @@ }, humanize : function (withSuffix) { - var difference = +this, - output = relativeTime(difference, !withSuffix, this.lang()); + var output = relativeTime(this, !withSuffix, this.localeData()); if (withSuffix) { - output = this.lang().pastFuture(difference, output); + output = this.localeData().pastFuture(+this, output); } - return this.lang().postformat(output); + return this.localeData().postformat(output); }, add : function (input, val) { @@ -2274,13 +2649,39 @@ }, as : function (units) { + var days, months; units = normalizeUnits(units); - return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's'](); + + days = this._days + this._milliseconds / 864e5; + if (units === 'month' || units === 'year') { + months = this._months + daysToYears(days) * 12; + return units === 'month' ? months : months / 12; + } else { + days += yearsToDays(this._months / 12); + switch (units) { + case 'week': return days / 7; + case 'day': return days; + case 'hour': return days * 24; + case 'minute': return days * 24 * 60; + case 'second': return days * 24 * 60 * 60; + case 'millisecond': return days * 24 * 60 * 60 * 1000; + default: throw new Error('Unknown unit ' + units); + } + } }, lang : moment.fn.lang, + locale : moment.fn.locale, - toIsoString : function () { + toIsoString : deprecate( + "toIsoString() is deprecated. Please use toISOString() instead " + + "(notice the capitals)", + function () { + return this.toISOString(); + } + ), + + toISOString : function () { // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js var years = Math.abs(this.years()), months = Math.abs(this.months()), @@ -2304,6 +2705,10 @@ (hours ? hours + 'H' : '') + (minutes ? minutes + 'M' : '') + (seconds ? seconds + 'S' : ''); + }, + + localeData : function () { + return this._locale; } }); @@ -2313,32 +2718,44 @@ }; } - function makeDurationAsGetter(name, factor) { - moment.duration.fn['as' + name] = function () { - return +this / factor; - }; - } - for (i in unitMillisecondFactors) { if (unitMillisecondFactors.hasOwnProperty(i)) { - makeDurationAsGetter(i, unitMillisecondFactors[i]); makeDurationGetter(i.toLowerCase()); } } - makeDurationAsGetter('Weeks', 6048e5); + moment.duration.fn.asMilliseconds = function () { + return this.as('ms'); + }; + moment.duration.fn.asSeconds = function () { + return this.as('s'); + }; + moment.duration.fn.asMinutes = function () { + return this.as('m'); + }; + moment.duration.fn.asHours = function () { + return this.as('h'); + }; + moment.duration.fn.asDays = function () { + return this.as('d'); + }; + moment.duration.fn.asWeeks = function () { + return this.as('weeks'); + }; moment.duration.fn.asMonths = function () { - return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12; + return this.as('M'); + }; + moment.duration.fn.asYears = function () { + return this.as('y'); }; - /************************************ - Default Lang + Default Locale ************************************/ - // Set default language, other languages will inherit from English. - moment.lang('en', { + // Set default locale, other locale will inherit from English. + moment.locale('en', { ordinal : function (number) { var b = number % 10, output = (toInt(number % 100 / 10) === 1) ? 'th' : @@ -2349,52 +2766,43 @@ } }); - /* EMBED_LANGUAGES */ + /* EMBED_LOCALES */ /************************************ Exposing Moment ************************************/ - function makeGlobal(deprecate) { - var warned = false, local_moment = moment; + function makeGlobal(shouldDeprecate) { /*global ender:false */ if (typeof ender !== 'undefined') { return; } - // here, `this` means `window` in the browser, or `global` on the server - // add `moment` as a global object via a string identifier, - // for Closure Compiler "advanced" mode - if (deprecate) { - global.moment = function () { - if (!warned && console && console.warn) { - warned = true; - console.warn( - "Accessing Moment through the global scope is " + - "deprecated, and will be removed in an upcoming " + - "release."); - } - return local_moment.apply(null, arguments); - }; - extend(global.moment, local_moment); + oldGlobalMoment = globalScope.moment; + if (shouldDeprecate) { + globalScope.moment = deprecate( + 'Accessing Moment through the global scope is ' + + 'deprecated, and will be removed in an upcoming ' + + 'release.', + moment); } else { - global['moment'] = moment; + globalScope.moment = moment; } } // CommonJS module is defined if (hasModule) { module.exports = moment; - makeGlobal(true); - } else if (typeof define === "function" && define.amd) { - define("moment", function (require, exports, module) { - if (module.config && module.config() && module.config().noGlobal !== true) { - // If user provided noGlobal, he is aware of global - makeGlobal(module.config().noGlobal === undefined); + } else if (typeof define === 'function' && define.amd) { + define('moment', function (require, exports, module) { + if (module.config && module.config() && module.config().noGlobal === true) { + // release the global variable + globalScope.moment = oldGlobalMoment; } return moment; }); + makeGlobal(true); } else { makeGlobal(); } -}).call(this); \ No newline at end of file +}).call(this); From c6489d9b0112b5a1268b9b8da645f157fae1a85d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Aug 2014 10:46:08 +0200 Subject: [PATCH 011/146] Lots of progress on per series overrides --- package.json | 2 +- src/app/directives/grafanaGraph.js | 2 +- src/app/panels/graph/module.html | 2 +- src/app/panels/graph/module.js | 63 ++----------------- src/app/panels/graph/seriesOverridesCtrl.js | 66 ++++++++++++++++++++ src/app/panels/graph/styleEditor.html | 67 +++++++++++--------- src/css/less/graph.less | 14 +++++ src/test/specs/grafanaGraph-specs.js | 68 +++++++++++++++++++++ src/test/specs/helpers.js | 2 +- src/test/specs/seriesOverridesCtrl-specs.js | 40 ++++++++++++ src/test/test-main.js | 2 + 11 files changed, 237 insertions(+), 91 deletions(-) create mode 100644 src/app/panels/graph/seriesOverridesCtrl.js create mode 100644 src/test/specs/grafanaGraph-specs.js create mode 100644 src/test/specs/seriesOverridesCtrl-specs.js diff --git a/package.json b/package.json index 31c552fe6c2..eecf826776e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "grunt-string-replace": "~0.2.4", "grunt-usemin": "^2.1.1", "jshint-stylish": "~0.1.5", - "karma": "~0.12.16", + "karma": "~0.12.21", "karma-chrome-launcher": "~0.1.4", "karma-coffee-preprocessor": "~0.1.2", "karma-coverage": "^0.2.5", diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index f0ffd14dd67..c2be3d90d13 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -156,7 +156,7 @@ function (angular, $, kbn, moment, _) { for (var i = 0; i < data.length; i++) { var _d = data[i].getFlotPairs(panel.nullPointMode, panel.y_formats); data[i].data = _d; - data[0].lines = { show: false }; + data[0].lines = { show: false, dashes: true }; data[0].bars = { show: true }; } diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index 102cad84a40..0d418e5e8cd 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -27,7 +27,7 @@ -
+
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index d8a31f59312..557503023a1 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -1,16 +1,3 @@ -/** @scratch /panels/5 - * include::panels/histogram.asciidoc[] - */ - -/** @scratch /panels/histogram/0 - * == Histogram - * Status: *Stable* - * - * The histogram panel allow for the display of time charts. It includes several modes and tranformations - * to display event counts, mean, min, max and total of numeric fields, and derivatives of counter - * fields. - * - */ define([ 'angular', 'app', @@ -19,6 +6,7 @@ define([ 'kbn', 'moment', './timeSeries', + './seriesOverridesCtrl', 'services/panelSrv', 'services/annotationsSrv', 'services/datasourceSrv', @@ -30,10 +18,9 @@ define([ 'jquery.flot.stackpercent' ], function (angular, app, $, _, kbn, moment, timeSeries) { - 'use strict'; - var module = angular.module('grafana.panels.graph', []); + var module = angular.module('grafana.panels.graph'); app.useModule(module); module.controller('GraphCtrl', function($scope, $rootScope, $timeout, panelSrv, annotationsSrv) { @@ -363,49 +350,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) { $scope.panel.seriesOverrides.push({}); }; + $scope.removeSeriesOverride = function(override) { + $scope.panel.seriesOverrides = _.without($scope.panel.seriesOverrides, override); + }; + panelSrv.init($scope); }); - angular - .module('grafana.directives') - .directive('seriesOverrideOption', function($compile) { - var template = - '
' + - '' + - '' + - '
'; - - return { - scope: true, - link: function($scope, elem, attrs) { - var $template = $(template); - elem.append($template); - var $link = $(elem).find('a'); - - $scope.options = $scope.$eval(attrs.options); - $scope.options.unshift(null); - - $scope.options = _.map($scope.options, function(option, index) { - return { - text: option === null ? '' : String(option), - value: option, - click: 'setValue(' + index + ')' - }; - }); - - $scope.setValue = function(index) { - var value = $scope.options[index].value; - if (value === null) { - $link.html(''); - } - else { - $link.html(value); - } - }; - - $compile(elem.contents())($scope); - } - }; - }); - }); diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js new file mode 100644 index 00000000000..2123510400b --- /dev/null +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -0,0 +1,66 @@ +define([ + 'angular', + 'app', + 'lodash', +], function(angular, app, _) { + 'use strict'; + + var module = angular.module('grafana.panels.graph', []); + app.useModule(module); + + module.controller('SeriesOverridesCtrl', function($scope) { + $scope.overrideMenu = []; + $scope.currentOverrides = []; + $scope.override = $scope.override || {}; + + $scope.addOverrideOption = function(name, propertyName, values) { + var option = {}; + option.text = name; + option.propertyName = propertyName; + option.index = $scope.overrideMenu.length; + option.values = values; + + option.submenu = _.map(values, function(value, index) { + return { + text: String(value), + click: 'setOverride(' + option.index + ',' + index + ')' + }; + }); + + $scope.overrideMenu.push(option); + }; + + $scope.setOverride = function(optionIndex, valueIndex) { + var option = $scope.overrideMenu[optionIndex]; + var value = option.values[valueIndex]; + $scope.override[option.propertyName] = value; + $scope.updateCurrentOverrides(); + }; + + $scope.removeOverride = function(option) { + delete $scope.override[option.propertyName]; + $scope.updateCurrentOverrides(); + }; + + $scope.updateCurrentOverrides = function() { + $scope.currentOverrides = []; + _.each($scope.overrideMenu, function(option) { + if (!_.isUndefined($scope.override[option.propertyName])) { + $scope.currentOverrides.push({ + name: option.text, + propertyName: option.propertyName, + value: String($scope.override[option.propertyName]) + }); + } + }); + }; + + $scope.addOverrideOption('Bars', 'bars', [true, false]); + $scope.addOverrideOption('Lines', 'lines', [true, false]); + $scope.addOverrideOption('Points', 'points', [true, false]); + $scope.addOverrideOption('Line fill', 'fill', [1,2,3,4,5,6,7,8]); + $scope.updateCurrentOverrides(); + + }); + +}); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index c1b68e25beb..c436ba10ceb 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -66,36 +66,43 @@
Series specific overrides
- - - - - - - - - - - - - - - - - - - - -
Series alias/regexBarsLinesPointsFillWidthRadiusStaircaseStackY-axisZ-indexColor
- - - - - - - -
- +
+
+
+ + + +
    +
  • + alias or regex +
    • +
  • + +
    • +
  • + + + + {{option.name}}: {{option.value}} +
    • +
  • + + + +
    • +
+
+
+
+
+ +
diff --git a/src/css/less/graph.less b/src/css/less/graph.less index 79e87ab8f47..8f049a44ae5 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -154,3 +154,17 @@ .annotation-tags { color: @purple; } + +.graph-series-override { + input { + float: left; + margin-right: 10px; + } + .graph-series-override-option { + float: left; + padding: 2px 6px; + } + .graph-series-override-selector { + float: left; + } +} diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js new file mode 100644 index 00000000000..f8b5878ce66 --- /dev/null +++ b/src/test/specs/grafanaGraph-specs.js @@ -0,0 +1,68 @@ +define([ + './helpers', + 'angular', + 'jquery', + 'directives/grafanaGraph' +], function(helpers, angular, $) { + 'use strict'; + + describe('grafanaGraph', function() { + + beforeEach(module('grafana.directives')); + + function graphScenario(desc, func) { + describe(desc, function() { + var ctx = {}; + ctx.setup = function (setupFunc) { + beforeEach(inject(function($rootScope, $compile) { + var scope = $rootScope.$new(); + var element = angular.element("
"); + + scope.height = '200px'; + scope.panel = { + legend: {}, + grid: {}, + y_formats: [] + }; + scope.dashboard = { timezone: 'browser' }; + scope.range = { + from: new Date('2014-08-09 10:00:00'), + to: new Date('2014-09-09 13:00:00') + }; + + setupFunc(scope); + + $compile(element)(scope); + scope.$digest(); + $.plot = ctx.plotSpy = sinon.spy(); + + scope.$emit('render', []); + ctx.plotData = ctx.plotSpy.getCall(0).args[1]; + ctx.plotOptions = ctx.plotSpy.getCall(0).args[2]; + })); + }; + + func(ctx); + }); + } + + graphScenario('simple lines options', function(ctx) { + ctx.setup(function(scope) { + scope.panel.lines = true; + scope.panel.fill = 5; + scope.panel.linewidth = 3; + scope.panel.steppedLine = true; + }); + + it('should configure plot with correct options', function() { + expect(ctx.plotOptions.series.lines.show).to.be(true); + expect(ctx.plotOptions.series.lines.fill).to.be(0.5); + expect(ctx.plotOptions.series.lines.lineWidth).to.be(3); + expect(ctx.plotOptions.series.lines.steps).to.be(true); + }); + + }); + + }); +}); + diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index cd31779cc99..de2be527f9f 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -69,7 +69,7 @@ define([ } return { from : kbn.parseDate(this.time.from), - to : kbn.parseDate(this.time.to) + to : kbn.parseDate(this.time.to) }; }; diff --git a/src/test/specs/seriesOverridesCtrl-specs.js b/src/test/specs/seriesOverridesCtrl-specs.js new file mode 100644 index 00000000000..04f0dcdca99 --- /dev/null +++ b/src/test/specs/seriesOverridesCtrl-specs.js @@ -0,0 +1,40 @@ +define([ + './helpers', + 'panels/graph/seriesOverridesCtrl' +], function(helpers) { + 'use strict'; + + describe('SeriesOverridesCtrl', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(module('grafana.services')); + beforeEach(module('grafana.panels.graph')); + + beforeEach(ctx.providePhase()); + beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl')); + + describe('Controller should init overrideMenu', function() { + it('click should include option and value index', function() { + expect(ctx.scope.overrideMenu[1].submenu[1].click).to.be('setOverride(1,1)'); + }); + }); + + describe('When setting an override', function() { + beforeEach(function() { + ctx.scope.setOverride(1, 0); + }); + + it('should set override property', function() { + expect(ctx.scope.override.lines).to.be(true); + }); + + it('should update view model', function() { + expect(ctx.scope.currentOverrides[0].name).to.be('Lines'); + expect(ctx.scope.currentOverrides[0].value).to.be('true'); + }); + }); + + }); + +}); + diff --git a/src/test/test-main.js b/src/test/test-main.js index 9c7cfe73341..8d2014b0664 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -122,6 +122,8 @@ require([ 'specs/graphiteTargetCtrl-specs', 'specs/influxdb-datasource-specs', 'specs/graph-ctrl-specs', + 'specs/grafanaGraph-specs', + 'specs/seriesOverridesCtrl-specs', 'specs/filterSrv-specs', 'specs/kbn-format-specs', 'specs/dashboardSrv-specs', From 048763053c534bc9d2bf58c4e3be40bd2c624862 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Aug 2014 16:22:18 +0200 Subject: [PATCH 012/146] Began work on applying per series options to flot options --- .../graph => components}/timeSeries.js | 13 ++++--- src/app/directives/grafanaGraph.js | 20 ++++++++--- src/app/panels/graph/module.js | 6 ++-- src/app/panels/graph/seriesOverridesCtrl.js | 1 + src/app/panels/graph/styleEditor.html | 2 +- src/test/specs/grafanaGraph-specs.js | 36 ++++++++++++++++--- src/test/specs/seriesOverridesCtrl-specs.js | 3 ++ 7 files changed, 62 insertions(+), 19 deletions(-) rename src/app/{panels/graph => components}/timeSeries.js (92%) diff --git a/src/app/panels/graph/timeSeries.js b/src/app/components/timeSeries.js similarity index 92% rename from src/app/panels/graph/timeSeries.js rename to src/app/components/timeSeries.js index f1794cd6a30..8858b01a139 100644 --- a/src/app/panels/graph/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -5,15 +5,13 @@ define([ function (_, kbn) { 'use strict'; - var ts = {}; - - ts.ZeroFilled = function (opts) { + function TimeSeries(opts) { this.datapoints = opts.datapoints; this.info = opts.info; this.label = opts.info.alias; - }; + } - ts.ZeroFilled.prototype.getFlotPairs = function (fillStyle, yFormats) { + TimeSeries.prototype.getFlotPairs = function (fillStyle, yFormats) { var result = []; this.color = this.info.color; @@ -74,5 +72,6 @@ function (_, kbn) { return result; }; - return ts; -}); \ No newline at end of file + return TimeSeries; + +}); diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index c2be3d90d13..21d47bcdf63 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -154,10 +154,9 @@ function (angular, $, kbn, moment, _) { }; for (var i = 0; i < data.length; i++) { - var _d = data[i].getFlotPairs(panel.nullPointMode, panel.y_formats); - data[i].data = _d; - data[0].lines = { show: false, dashes: true }; - data[0].bars = { show: true }; + var series = data[i]; + series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats); + applySeriesOverrideOptions(series); } if (data.length && data[0].info.timeStep) { @@ -184,6 +183,19 @@ function (angular, $, kbn, moment, _) { } } + function applySeriesOverrideOptions(series) { + for (var i = 0; i < scope.panel.seriesOverrides.length; i++) { + var override = scope.panel.seriesOverrides[i]; + if (override.alias === series.info.alias) { + if (!_.isUndefined(override.fill)) { + series.lines = { + fill: override.fill === 0 ? 0.001 : override.fill/10 + }; + } + } + } + } + function shouldDelayDraw(panel) { if (panel.legend.rightSide) { return true; diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 557503023a1..9d2253b0147 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -5,7 +5,7 @@ define([ 'lodash', 'kbn', 'moment', - './timeSeries', + 'components/timeSeries', './seriesOverridesCtrl', 'services/panelSrv', 'services/annotationsSrv', @@ -17,7 +17,7 @@ define([ 'jquery.flot.stack', 'jquery.flot.stackpercent' ], -function (angular, app, $, _, kbn, moment, timeSeries) { +function (angular, app, $, _, kbn, moment, TimeSeries) { 'use strict'; var module = angular.module('grafana.panels.graph'); @@ -258,7 +258,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { $scope.legend.push(seriesInfo); - var series = new timeSeries.ZeroFilled({ + var series = new TimeSeries({ datapoints: datapoints, info: seriesInfo, }); diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index 2123510400b..ed2e27fdf7c 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -35,6 +35,7 @@ define([ var value = option.values[valueIndex]; $scope.override[option.propertyName] = value; $scope.updateCurrentOverrides(); + $scope.render(); }; $scope.removeOverride = function(option) { diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index c436ba10ceb..9b0d2b4fbba 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -84,7 +84,7 @@ alias or regex
  • - +
  • diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index f8b5878ce66..63f5055f238 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -2,8 +2,9 @@ define([ './helpers', 'angular', 'jquery', + 'components/timeSeries', 'directives/grafanaGraph' -], function(helpers, angular, $) { +], function(helpers, angular, $, TimeSeries) { 'use strict'; describe('grafanaGraph', function() { @@ -22,21 +23,31 @@ define([ scope.panel = { legend: {}, grid: {}, - y_formats: [] + y_formats: [], + seriesOverrides: [] }; scope.dashboard = { timezone: 'browser' }; scope.range = { from: new Date('2014-08-09 10:00:00'), to: new Date('2014-09-09 13:00:00') }; + ctx.data = []; + ctx.data.push(new TimeSeries({ + datapoints: [[1,1],[2,2]], + info: { alias: 'series1', enable: true } + })); + ctx.data.push(new TimeSeries({ + datapoints: [[1,1],[2,2]], + info: { alias: 'series2', enable: true } + })); - setupFunc(scope); + setupFunc(scope, ctx.data); $compile(element)(scope); scope.$digest(); $.plot = ctx.plotSpy = sinon.spy(); - scope.$emit('render', []); + scope.$emit('render', ctx.data); ctx.plotData = ctx.plotSpy.getCall(0).args[1]; ctx.plotOptions = ctx.plotSpy.getCall(0).args[2]; })); @@ -63,6 +74,23 @@ define([ }); + graphScenario('series option fill override', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.fill = 5; + scope.panel.seriesOverrides = [ + { alias: 'test', fill: 0 } + ]; + + data[1].info.alias = 'test'; + }); + + it('should match second series and set line fill', function() { + expect(ctx.plotOptions.series.lines.fill).to.be(0.5); + expect(ctx.plotData[1].lines.fill).to.be(0.001); + }); + + }); }); }); diff --git a/src/test/specs/seriesOverridesCtrl-specs.js b/src/test/specs/seriesOverridesCtrl-specs.js index 04f0dcdca99..e029c8a30cd 100644 --- a/src/test/specs/seriesOverridesCtrl-specs.js +++ b/src/test/specs/seriesOverridesCtrl-specs.js @@ -12,6 +12,9 @@ define([ beforeEach(ctx.providePhase()); beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl')); + beforeEach(function() { + ctx.scope.render = function() {}; + }); describe('Controller should init overrideMenu', function() { it('click should include option and value index', function() { From cdcbb872d58fba33d5ccad07c9867c3898e841b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Aug 2014 16:57:33 +0200 Subject: [PATCH 013/146] options per series is starting to work nicely --- src/app/directives/grafanaGraph.js | 20 +++++++++++------ src/app/panels/graph/module.js | 1 + src/app/panels/graph/seriesOverridesCtrl.js | 4 +++- src/app/panels/graph/styleEditor.html | 5 ++++- src/test/specs/grafanaGraph-specs.js | 24 ++++++++++++++++++--- 5 files changed, 43 insertions(+), 11 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 21d47bcdf63..e4f527bb2f3 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -184,18 +184,26 @@ function (angular, $, kbn, moment, _) { } function applySeriesOverrideOptions(series) { + series.lines = {}; + series.points = {}; + series.bars = {}; + for (var i = 0; i < scope.panel.seriesOverrides.length; i++) { var override = scope.panel.seriesOverrides[i]; - if (override.alias === series.info.alias) { - if (!_.isUndefined(override.fill)) { - series.lines = { - fill: override.fill === 0 ? 0.001 : override.fill/10 - }; - } + if (override.alias !== series.info.alias) { + continue; } + if (override.lines !== void 0) { series.lines.show = override.lines; } + if (override.points !== void 0) { series.points.show = override.points; } + if (override.bars !== void 0) { series.bars.show = override.bars; } + if (override.fill !== void 0) { series.lines.fill = translateFillOption(override.fill); } } } + function translateFillOption(fill) { + return fill === 0 ? 0.001 : fill/10; + } + function shouldDelayDraw(panel) { if (panel.legend.rightSide) { return true; diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 9d2253b0147..b0de8f190c7 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -352,6 +352,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { $scope.removeSeriesOverride = function(override) { $scope.panel.seriesOverrides = _.without($scope.panel.seriesOverrides, override); + $scope.render(); }; panelSrv.init($scope); diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index ed2e27fdf7c..9f42f3ef75d 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -41,6 +41,7 @@ define([ $scope.removeOverride = function(option) { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); + $scope.render(); }; $scope.updateCurrentOverrides = function() { @@ -59,7 +60,8 @@ define([ $scope.addOverrideOption('Bars', 'bars', [true, false]); $scope.addOverrideOption('Lines', 'lines', [true, false]); $scope.addOverrideOption('Points', 'points', [true, false]); - $scope.addOverrideOption('Line fill', 'fill', [1,2,3,4,5,6,7,8]); + $scope.addOverrideOption('Line fill', 'fill', [0,1,2,3,4,5,6,7,8,9,10]); + $scope.addOverrideOption('Line width', 'linewidth', [0,1,2,3,4,5,6,7,8,9,10]); $scope.updateCurrentOverrides(); }); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index 9b0d2b4fbba..ca7ec99180d 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -84,7 +84,10 @@ alias or regex
  • - +
  • diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 63f5055f238..b070c03ec44 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -74,23 +74,41 @@ define([ }); - graphScenario('series option fill override', function(ctx) { + graphScenario('series option overrides, fill & points', function(ctx) { ctx.setup(function(scope, data) { scope.panel.lines = true; scope.panel.fill = 5; scope.panel.seriesOverrides = [ - { alias: 'test', fill: 0 } + { alias: 'test', fill: 0, points: true } ]; data[1].info.alias = 'test'; }); - it('should match second series and set line fill', function() { + it('should match second series and fill zero, and enable points', function() { expect(ctx.plotOptions.series.lines.fill).to.be(0.5); expect(ctx.plotData[1].lines.fill).to.be(0.001); + expect(ctx.plotData[1].points.show).to.be(true); + }); + }); + + graphScenario('series option overrides, bars, true & lines false', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.seriesOverrides = [ + { alias: 'test', bars: true, lines: false } + ]; + + data[1].info.alias = 'test'; }); + it('should match second series and disable lines, and enable bars', function() { + expect(ctx.plotOptions.series.lines.show).to.be(true); + expect(ctx.plotData[1].lines.show).to.be(false); + expect(ctx.plotData[1].bars.show).to.be(true); + }); }); + }); }); From 062fe72030ebf466cec4d06cbb1d131505f50666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Aug 2014 17:24:37 +0200 Subject: [PATCH 014/146] More options can now be set on pre series basis, this is awesome! --- src/app/directives/grafanaGraph.js | 5 +++ src/app/panels/graph/seriesOverridesCtrl.js | 5 ++- src/test/specs/grafanaGraph-specs.js | 36 +++++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index e4f527bb2f3..f624c90494d 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -187,6 +187,7 @@ function (angular, $, kbn, moment, _) { series.lines = {}; series.points = {}; series.bars = {}; + delete series.stack; for (var i = 0; i < scope.panel.seriesOverrides.length; i++) { var override = scope.panel.seriesOverrides[i]; @@ -197,6 +198,10 @@ function (angular, $, kbn, moment, _) { if (override.points !== void 0) { series.points.show = override.points; } if (override.bars !== void 0) { series.bars.show = override.bars; } if (override.fill !== void 0) { series.lines.fill = translateFillOption(override.fill); } + if (override.stack !== void 0) { series.stack = override.stack; } + if (override.linewidth !== void 0) { series.lines.lineWidth = override.linewidth; } + if (override.pointradius !== void 0) { series.points.radius = override.pointradius; } + if (override.steppedLine !== void 0) { series.lines.steps = override.steppedLine; } } } diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index 9f42f3ef75d..d2f083b2699 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -59,9 +59,12 @@ define([ $scope.addOverrideOption('Bars', 'bars', [true, false]); $scope.addOverrideOption('Lines', 'lines', [true, false]); - $scope.addOverrideOption('Points', 'points', [true, false]); $scope.addOverrideOption('Line fill', 'fill', [0,1,2,3,4,5,6,7,8,9,10]); $scope.addOverrideOption('Line width', 'linewidth', [0,1,2,3,4,5,6,7,8,9,10]); + $scope.addOverrideOption('Staircase line', 'steppedLine', [true, false]); + $scope.addOverrideOption('Points', 'points', [true, false]); + $scope.addOverrideOption('Points Radius', 'pointradius', [1,2,3,4,5]); + $scope.addOverrideOption('Stack', 'stack', [true, false]); $scope.updateCurrentOverrides(); }); diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index b070c03ec44..162ad278ce3 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -109,6 +109,42 @@ define([ }); }); + graphScenario('series option overrides, linewidth, stack', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.stack = true; + scope.panel.linewidth = 2; + scope.panel.seriesOverrides = [ + { alias: 'test', linewidth: 5, stack: false } + ]; + + data[1].info.alias = 'test'; + }); + + it('should match second series and disable stack, and set lineWidth', function() { + expect(ctx.plotOptions.series.stack).to.be(true); + expect(ctx.plotData[1].stack).to.be(false); + expect(ctx.plotData[1].lines.lineWidth).to.be(5); + }); + }); + + graphScenario('series option overrides, pointradius, steppedLine', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.seriesOverrides = [ + { alias: 'test', pointradius: 5, steppedLine: true } + ]; + + data[1].info.alias = 'test'; + }); + + it('should match second series and set pointradius, and set steppedLine', function() { + expect(ctx.plotData[1].points.radius).to.be(5); + expect(ctx.plotData[1].lines.steps).to.be(true); + }); + }); + + + }); }); From 939e957fda02d6794307fabd6811c13fb74b2d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 08:35:17 +0200 Subject: [PATCH 015/146] Made regex match work for per series overrides, #425, #700 --- src/app/directives/grafanaGraph.js | 12 +++++++++++- src/app/panels/graph/seriesOverridesCtrl.js | 14 +++++++------- src/app/panels/graph/styleEditor.html | 2 +- src/test/specs/grafanaGraph-specs.js | 14 ++++++++++++++ src/test/specs/seriesOverridesCtrl-specs.js | 8 ++++++++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index f624c90494d..1affce16e5c 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -183,6 +183,16 @@ function (angular, $, kbn, moment, _) { } } + function matchSeriesOverride(aliasOrRegex, seriesAlias) { + if (aliasOrRegex[0] === '/') { + var match = aliasOrRegex.match(new RegExp('^/(.*?)/(g?i?m?y?)$')); + var regex = new RegExp(match[1], match[2]); + return seriesAlias.match(regex) != null; + } + + return aliasOrRegex === seriesAlias; + } + function applySeriesOverrideOptions(series) { series.lines = {}; series.points = {}; @@ -191,7 +201,7 @@ function (angular, $, kbn, moment, _) { for (var i = 0; i < scope.panel.seriesOverrides.length; i++) { var override = scope.panel.seriesOverrides[i]; - if (override.alias !== series.info.alias) { + if (!matchSeriesOverride(override.alias, series.info.alias)) { continue; } if (override.lines !== void 0) { series.lines.show = override.lines; } diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index d2f083b2699..0d7f3b4838d 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -47,13 +47,13 @@ define([ $scope.updateCurrentOverrides = function() { $scope.currentOverrides = []; _.each($scope.overrideMenu, function(option) { - if (!_.isUndefined($scope.override[option.propertyName])) { - $scope.currentOverrides.push({ - name: option.text, - propertyName: option.propertyName, - value: String($scope.override[option.propertyName]) - }); - } + var value = $scope.override[option.propertyName]; + if (_.isUndefined(value)) { return; } + $scope.currentOverrides.push({ + name: option.text, + propertyName: option.propertyName, + value: String(value) + }); }); }; diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index ca7ec99180d..5a50f4995d0 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -65,7 +65,7 @@
    -
    Series specific overrides
    +
    Series specific overrides Regex match example: /server[0-3]/i
    diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 162ad278ce3..6d83467daa7 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -143,7 +143,21 @@ define([ }); }); + graphScenario('override match on regex', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.seriesOverrides = [ + { alias: '/.*01/', lines: false } + ]; + data[1].info.alias = 'test_01'; + }); + + it('should match second series and set pointradius, and set steppedLine', function() { + expect(ctx.plotData[0].lines.show).to.be(undefined); + expect(ctx.plotData[1].lines.show).to.be(false); + }); + }); }); }); diff --git a/src/test/specs/seriesOverridesCtrl-specs.js b/src/test/specs/seriesOverridesCtrl-specs.js index e029c8a30cd..e211b6dab35 100644 --- a/src/test/specs/seriesOverridesCtrl-specs.js +++ b/src/test/specs/seriesOverridesCtrl-specs.js @@ -37,6 +37,14 @@ define([ }); }); + describe('When removing overide', function() { + it('click should include option and value index', function() { + ctx.scope.setOverride(1,0); + ctx.scope.removeOverride({ propertyName: 'lines' }); + expect(ctx.scope.currentOverrides.length).to.be(0); + }); + }); + }); }); From b2f9f81eaf0dd812c3a4decd6bcb0b7cae995c68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 09:31:22 +0200 Subject: [PATCH 016/146] Moved yaxis override from aliasYAxis map to the new seriesOverride array --- src/app/directives/grafanaGraph.js | 4 + src/app/panels/graph/module.js | 12 +- src/app/panels/graph/seriesOverridesCtrl.js | 1 + src/app/services/dashboard/dashboardSrv.js | 125 +++++++++++--------- src/test/specs/dashboardSrv-specs.js | 8 +- src/test/specs/grafanaGraph-specs.js | 17 ++- 6 files changed, 105 insertions(+), 62 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 1affce16e5c..6004b6e366c 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -212,6 +212,10 @@ function (angular, $, kbn, moment, _) { if (override.linewidth !== void 0) { series.lines.lineWidth = override.linewidth; } if (override.pointradius !== void 0) { series.points.radius = override.pointradius; } if (override.steppedLine !== void 0) { series.lines.steps = override.steppedLine; } + if (override.yaxis !== void 0) { + series.yaxis = override.yaxis; + series.info.yaxis = override.yaxis; + } } } diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index b0de8f190c7..6897cc090b0 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -166,7 +166,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { targets: [{}], aliasColors: {}, - aliasYAxis: {}, seriesOverrides: [], }; @@ -247,13 +246,10 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { var datapoints = seriesData.datapoints; var alias = seriesData.target; var color = $scope.panel.aliasColors[alias] || $rootScope.colors[index]; - var yaxis = $scope.panel.aliasYAxis[alias] || 1; var seriesInfo = { alias: alias, color: color, - enable: true, - yaxis: yaxis }; $scope.legend.push(seriesInfo); @@ -336,8 +332,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { }; $scope.toggleYAxis = function(info) { - info.yaxis = info.yaxis === 2 ? 1 : 2; - $scope.panel.aliasYAxis[info.alias] = info.yaxis; + var override = _.findWhere($scope.panel.seriesOverrides, { alias: info.alias }); + if (!override) { + override = { alias: info.alias }; + $scope.panel.seriesOverrides.push(override); + } + override.yaxis = info.yaxis === 2 ? 1 : 2; $scope.render(); }; diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index 0d7f3b4838d..4616e6ac1f8 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -65,6 +65,7 @@ define([ $scope.addOverrideOption('Points', 'points', [true, false]); $scope.addOverrideOption('Points Radius', 'pointradius', [1,2,3,4,5]); $scope.addOverrideOption('Stack', 'stack', [true, false]); + $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]); $scope.updateCurrentOverrides(); }); diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index ff1e149c3b7..f2d67bf1839 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -144,80 +144,97 @@ function (angular, $, kbn, _, moment) { }; p.updateSchema = function(old) { - var i, j, row, panel; var oldVersion = this.version; - this.version = 3; + var panelUpgrades = []; + this.version = 4; - if (oldVersion === 3) { + if (oldVersion === 4) { return; } - // Version 3 schema changes - // ensure panel ids - var maxId = this.getNextPanelId(); - for (i = 0; i < this.rows.length; i++) { - row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - panel = row.panels[j]; - if (!panel.id) { - panel.id = maxId; - maxId += 1; + // version 2 schema changes + if (oldVersion < 2) { + + if (old.services) { + if (old.services.filter) { + this.time = old.services.filter.time; + this.templating.list = old.services.filter.list; } + delete this.services; } - } - if (oldVersion === 2) { - return; - } - - // Version 2 schema changes - if (old.services) { - if (old.services.filter) { - this.time = old.services.filter.time; - this.templating.list = old.services.filter.list; - } - delete this.services; - } - - for (i = 0; i < this.rows.length; i++) { - row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - panel = row.panels[j]; + panelUpgrades.push(function(panel) { + // rename panel type if (panel.type === 'graphite') { panel.type = 'graph'; } - if (panel.type === 'graph') { - if (_.isBoolean(panel.legend)) { - panel.legend = { show: panel.legend }; + if (panel.type !== 'graph') { + return; + } + + if (_.isBoolean(panel.legend)) { panel.legend = { show: panel.legend }; } + + if (panel.grid) { + if (panel.grid.min) { + panel.grid.leftMin = panel.grid.min; + delete panel.grid.min; } - if (panel.grid) { - if (panel.grid.min) { - panel.grid.leftMin = panel.grid.min; - delete panel.grid.min; - } - - if (panel.grid.max) { - panel.grid.leftMax = panel.grid.max; - delete panel.grid.max; - } + if (panel.grid.max) { + panel.grid.leftMax = panel.grid.max; + delete panel.grid.max; } + } - if (panel.y_format) { - panel.y_formats[0] = panel.y_format; - delete panel.y_format; - } + if (panel.y_format) { + panel.y_formats[0] = panel.y_format; + delete panel.y_format; + } - if (panel.y2_format) { - panel.y_formats[1] = panel.y2_format; - delete panel.y2_format; - } + if (panel.y2_format) { + panel.y_formats[1] = panel.y2_format; + delete panel.y2_format; + } + }); + } + + // schema version 3 changes + if (oldVersion < 3) { + // ensure panel ids + var maxId = this.getNextPanelId(); + panelUpgrades.push(function(panel) { + if (!panel.id) { + panel.id = maxId; + maxId += 1; + } + }); + } + + // schema version 4 changes + if (oldVersion < 4) { + // move aliasYAxis changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'graph') { return; } + _.each(panel.aliasYAxis, function(value, key) { + panel.seriesOverrides = [{ alias: key, yaxis: value }]; + }); + delete panel.aliasYAxis; + }); + } + + if (panelUpgrades.length === 0) { + return; + } + + for (var 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++) { + panelUpgrades[k](row.panels[j]); } } } - - this.version = 3; }; return { diff --git a/src/test/specs/dashboardSrv-specs.js b/src/test/specs/dashboardSrv-specs.js index 5e4e96401de..a2c7c1772f6 100644 --- a/src/test/specs/dashboardSrv-specs.js +++ b/src/test/specs/dashboardSrv-specs.js @@ -97,6 +97,7 @@ define([ { type: 'graphite', legend: true, + aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 } } ] @@ -134,8 +135,13 @@ define([ expect(graph.grid.leftMax).to.be(10); }); + it('move aliasYAxis to series override', function() { + expect(graph.seriesOverrides[0].alias).to.be("test"); + expect(graph.seriesOverrides[0].yaxis).to.be(2); + }); + it('dashboard schema version should be set to latest', function() { - expect(model.version).to.be(3); + expect(model.version).to.be(4); }); }); diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 6d83467daa7..f5ad344c1c5 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -153,12 +153,27 @@ define([ data[1].info.alias = 'test_01'; }); - it('should match second series and set pointradius, and set steppedLine', function() { + it('should match second series', function() { expect(ctx.plotData[0].lines.show).to.be(undefined); expect(ctx.plotData[1].lines.show).to.be(false); }); }); + graphScenario('override series y-axis', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.seriesOverrides = [ + { alias: 'test', yaxis: 2 } + ]; + + data[1].info.alias = 'test'; + }); + + it('should match second series and set yaxis', function() { + expect(ctx.plotData[1].yaxis).to.be(2); + }); + }); + }); }); From 3ec053bea70f99d2f125de1063a8f391cb35fd57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 10:27:30 +0200 Subject: [PATCH 017/146] Moved series override code to TimeSeries --- src/app/components/timeSeries.js | 40 ++++++++++ src/app/directives/grafanaGraph.js | 40 +--------- src/app/panels/graph/legend.html | 4 +- src/test/specs/grafanaGraph-specs.js | 82 -------------------- src/test/specs/timeSeries-specs.js | 111 +++++++++++++++++++++++++++ src/test/test-main.js | 1 + 6 files changed, 156 insertions(+), 122 deletions(-) create mode 100644 src/test/specs/timeSeries-specs.js diff --git a/src/app/components/timeSeries.js b/src/app/components/timeSeries.js index 8858b01a139..e49b45e17e4 100644 --- a/src/app/components/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -11,6 +11,46 @@ function (_, kbn) { this.label = opts.info.alias; } + function matchSeriesOverride(aliasOrRegex, seriesAlias) { + if (aliasOrRegex[0] === '/') { + var match = aliasOrRegex.match(new RegExp('^/(.*?)/(g?i?m?y?)$')); + var regex = new RegExp(match[1], match[2]); + return seriesAlias.match(regex) != null; + } + + return aliasOrRegex === seriesAlias; + } + + function translateFillOption(fill) { + return fill === 0 ? 0.001 : fill/10; + } + + TimeSeries.prototype.applySeriesOverrides = function(overrides) { + this.lines = {}; + this.points = {}; + this.bars = {}; + this.info.yaxis = 1; + delete this.stack; + + for (var i = 0; i < overrides.length; i++) { + var override = overrides[i]; + if (!matchSeriesOverride(override.alias, this.info.alias)) { + continue; + } + if (override.lines !== void 0) { this.lines.show = override.lines; } + if (override.points !== void 0) { this.points.show = override.points; } + if (override.bars !== void 0) { this.bars.show = override.bars; } + if (override.fill !== void 0) { this.lines.fill = translateFillOption(override.fill); } + if (override.stack !== void 0) { this.stack = override.stack; } + if (override.linewidth !== void 0) { this.lines.lineWidth = override.linewidth; } + if (override.pointradius !== void 0) { this.points.radius = override.pointradius; } + if (override.steppedLine !== void 0) { this.lines.steps = override.steppedLine; } + if (override.yaxis !== void 0) { + this.info.yaxis = override.yaxis; + } + } + }; + TimeSeries.prototype.getFlotPairs = function (fillStyle, yFormats) { var result = []; diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 6004b6e366c..3525e3a98f4 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -118,7 +118,7 @@ function (angular, $, kbn, moment, _) { lines: { show: panel.lines, zero: false, - fill: panel.fill === 0 ? 0.001 : panel.fill/10, + fill: translateFillOption(panel.fill), lineWidth: panel.linewidth, steps: panel.steppedLine }, @@ -155,8 +155,8 @@ function (angular, $, kbn, moment, _) { for (var i = 0; i < data.length; i++) { var series = data[i]; + series.applySeriesOverrides(panel.seriesOverrides); series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats); - applySeriesOverrideOptions(series); } if (data.length && data[0].info.timeStep) { @@ -183,42 +183,6 @@ function (angular, $, kbn, moment, _) { } } - function matchSeriesOverride(aliasOrRegex, seriesAlias) { - if (aliasOrRegex[0] === '/') { - var match = aliasOrRegex.match(new RegExp('^/(.*?)/(g?i?m?y?)$')); - var regex = new RegExp(match[1], match[2]); - return seriesAlias.match(regex) != null; - } - - return aliasOrRegex === seriesAlias; - } - - function applySeriesOverrideOptions(series) { - series.lines = {}; - series.points = {}; - series.bars = {}; - delete series.stack; - - for (var i = 0; i < scope.panel.seriesOverrides.length; i++) { - var override = scope.panel.seriesOverrides[i]; - if (!matchSeriesOverride(override.alias, series.info.alias)) { - continue; - } - if (override.lines !== void 0) { series.lines.show = override.lines; } - if (override.points !== void 0) { series.points.show = override.points; } - if (override.bars !== void 0) { series.bars.show = override.bars; } - if (override.fill !== void 0) { series.lines.fill = translateFillOption(override.fill); } - if (override.stack !== void 0) { series.stack = override.stack; } - if (override.linewidth !== void 0) { series.lines.lineWidth = override.linewidth; } - if (override.pointradius !== void 0) { series.points.radius = override.pointradius; } - if (override.steppedLine !== void 0) { series.lines.steps = override.steppedLine; } - if (override.yaxis !== void 0) { - series.yaxis = override.yaxis; - series.info.yaxis = override.yaxis; - } - } - } - function translateFillOption(fill) { return fill === 0 ? 0.001 : fill/10; } diff --git a/src/app/panels/graph/legend.html b/src/app/panels/graph/legend.html index 5524a8047fe..0e5edc459ce 100755 --- a/src/app/panels/graph/legend.html +++ b/src/app/panels/graph/legend.html @@ -34,12 +34,12 @@
    - -
  • - - - + {{option.name}}: {{option.value}}
  • @@ -105,6 +101,7 @@
    • + diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 449d8db4c39..5f3ad0dd413 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -92,8 +92,8 @@ define([ }); graphScenario('should order series order according to zindex', function(ctx) { - ctx.setup(function(scope, data) { - data[0].zindex = 2; + ctx.setup(function(scope) { + scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; }); it('should move zindex 2 last', function() { diff --git a/src/test/specs/timeSeries-specs.js b/src/test/specs/timeSeries-specs.js index f5fa980c491..cf28c1aa450 100644 --- a/src/test/specs/timeSeries-specs.js +++ b/src/test/specs/timeSeries-specs.js @@ -101,8 +101,8 @@ define([ it('should set yaxis', function() { expect(series.info.yaxis).to.be(2); - }); + it('should set zindex', function() { expect(series.zindex).to.be(2); }); From a9cfb160c91d8b1bfcc57d768e88d39d218a0170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 11:48:00 +0200 Subject: [PATCH 020/146] Added typeahead to series overrides, #425 --- src/app/components/timeSeries.js | 2 ++ src/app/panels/graph/seriesOverridesCtrl.js | 6 ++++++ src/app/panels/graph/styleEditor.html | 8 +++++--- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/components/timeSeries.js b/src/app/components/timeSeries.js index c64b5931e7f..85c27f1da88 100644 --- a/src/app/components/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -12,6 +12,8 @@ function (_, kbn) { } function matchSeriesOverride(aliasOrRegex, seriesAlias) { + 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]); diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index cc6b240d474..4f54c6d0e6f 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -44,6 +44,12 @@ define([ $scope.render(); }; + $scope.getSeriesNames = function() { + return _.map($scope.legend, function(info) { + return info.alias; + }); + }; + $scope.updateCurrentOverrides = function() { $scope.currentOverrides = []; _.each($scope.overrideMenu, function(option) { diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index ec4f59b50b4..de7318d4500 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -72,8 +72,8 @@
      -
    • +
    • +
    @@ -84,7 +84,9 @@
  • From c0d7ddf1fbe70a877670ef5f1cfe3382cac6e0c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 12:11:14 +0200 Subject: [PATCH 021/146] Updated changelog with new display styles per series option feature, Closes #425, Closes #700 --- CHANGELOG.md | 1 + src/app/components/kbn.js | 28 ++++++++++++++-------------- src/test/specs/helpers.js | 2 +- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 793a0740e4e..0c6d39929f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - [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 +- [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) **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/kbn.js b/src/app/components/kbn.js index 71fe1b4b75a..46a1b8dfa79 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -231,36 +231,36 @@ function($, _, moment) { if (type === 0) { roundUp ? dateTime.endOf('year') : dateTime.startOf('year'); } else if (type === 1) { - dateTime.add('years',num); + dateTime.add(num, 'years'); } else if (type === 2) { - dateTime.subtract('years',num); + dateTime.subtract(num, 'years'); } break; case 'M': if (type === 0) { roundUp ? dateTime.endOf('month') : dateTime.startOf('month'); } else if (type === 1) { - dateTime.add('months',num); + dateTime.add(num, 'months'); } else if (type === 2) { - dateTime.subtract('months',num); + dateTime.subtract(num, 'months'); } break; case 'w': if (type === 0) { roundUp ? dateTime.endOf('week') : dateTime.startOf('week'); } else if (type === 1) { - dateTime.add('weeks',num); + dateTime.add(num, 'weeks'); } else if (type === 2) { - dateTime.subtract('weeks',num); + dateTime.subtract(num, 'weeks'); } break; case 'd': if (type === 0) { roundUp ? dateTime.endOf('day') : dateTime.startOf('day'); } else if (type === 1) { - dateTime.add('days',num); + dateTime.add(num, 'days'); } else if (type === 2) { - dateTime.subtract('days',num); + dateTime.subtract(num, 'days'); } break; case 'h': @@ -268,27 +268,27 @@ function($, _, moment) { if (type === 0) { roundUp ? dateTime.endOf('hour') : dateTime.startOf('hour'); } else if (type === 1) { - dateTime.add('hours',num); + dateTime.add(num, 'hours'); } else if (type === 2) { - dateTime.subtract('hours',num); + dateTime.subtract(num,'hours'); } break; case 'm': if (type === 0) { roundUp ? dateTime.endOf('minute') : dateTime.startOf('minute'); } else if (type === 1) { - dateTime.add('minutes',num); + dateTime.add(num, 'minutes'); } else if (type === 2) { - dateTime.subtract('minutes',num); + dateTime.subtract(num, 'minutes'); } break; case 's': if (type === 0) { roundUp ? dateTime.endOf('second') : dateTime.startOf('second'); } else if (type === 1) { - dateTime.add('seconds',num); + dateTime.add(num, 'seconds'); } else if (type === 2) { - dateTime.subtract('seconds',num); + dateTime.subtract(num, 'seconds'); } break; default: diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index de2be527f9f..4f2eb7ea680 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -64,7 +64,7 @@ define([ function FilterSrvStub() { this.time = { from:'now-1h', to: 'now'}; this.timeRange = function(parse) { - if (!parse) { + if (parse === false) { return this.time; } return { From c000f438ae7e9d21a8948651b3e11e2c7aa85bc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 15:03:10 +0200 Subject: [PATCH 022/146] added unit tests for grid thresholds --- src/test/specs/grafanaGraph-specs.js | 40 ++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 5f3ad0dd413..c7a27740f4d 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -73,6 +73,46 @@ define([ }); }); + graphScenario('grid thresholds 100, 200', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + threshold1: 100, + threshold1Color: "#111", + threshold2: 200, + threshold2Color: "#222", + }; + }); + + it('should add grid markings', function() { + var markings = ctx.plotOptions.grid.markings; + expect(markings[0].yaxis.from).to.be(100); + expect(markings[0].yaxis.to).to.be(200); + expect(markings[0].color).to.be('#111'); + expect(markings[1].yaxis.from).to.be(200); + expect(markings[1].yaxis.to).to.be(Infinity); + }); + }); + + graphScenario('inverted grid thresholds 200, 100', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + threshold1: 200, + threshold1Color: "#111", + threshold2: 100, + threshold2Color: "#222", + }; + }); + + it('should add grid markings', function() { + var markings = ctx.plotOptions.grid.markings; + expect(markings[0].yaxis.from).to.be(200); + expect(markings[0].yaxis.to).to.be(100); + expect(markings[0].color).to.be('#111'); + expect(markings[1].yaxis.from).to.be(100); + expect(markings[1].yaxis.to).to.be(-Infinity); + }); + }); + graphScenario('series option overrides, fill & points', function(ctx) { ctx.setup(function(scope, data) { scope.panel.lines = true; From 019d077f5a68e2ad78d3b824eaf64ffea5cb2fd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 19:56:32 +0200 Subject: [PATCH 023/146] Added missing max-height to search results container --- src/css/less/grafana.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0fc9c72bf2f..709d7fdb028 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -52,6 +52,9 @@ } .search-results-container { + max-height: 570px; + overflow: auto; + display: block; .search-result-item a { } From 17ffb167e2d0469d6baecbf0b78bd11c826cf06d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Aug 2014 22:34:51 +0200 Subject: [PATCH 024/146] Small fixes for firefox --- src/app/components/settings.js | 2 +- src/app/controllers/dashboardCtrl.js | 9 ++++++++- src/app/directives/grafanaGraph.js | 5 ----- src/app/partials/search.html | 10 +++++----- src/app/services/graphite/graphiteDatasource.js | 4 ++-- src/css/less/grafana.less | 2 +- 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/app/components/settings.js b/src/app/components/settings.js index 3edafc5a407..b43237224b4 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -19,7 +19,7 @@ function (_, crypto) { default_route : '/dashboard/file/default.json', playlist_timespan : "1m", unsaved_changes_warning : true, - search : { max_results: 20 }, + search : { max_results: 16 }, admin : {} }; diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 5620b7305a2..7132ca8a571 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -13,7 +13,7 @@ function (angular, $, config, _) { module.controller('DashboardCtrl', function( $scope, $rootScope, dashboardKeybindings, filterSrv, dashboardSrv, dashboardViewStateSrv, - panelMoveSrv, timer) { + panelMoveSrv, timer, $timeout) { $scope.editor = { index: 0 }; $scope.panelNames = config.panels; @@ -21,6 +21,13 @@ function (angular, $, config, _) { $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.setupDashboard = function(event, dashboardData) { diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 38ef36bc912..222bde78b26 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -46,11 +46,6 @@ function (angular, $, kbn, moment, _) { render_panel(); }); - // Re-render if the window is resized - angular.element(window).bind('resize', function() { - render_panel(); - }); - function setElementHeight() { try { var height = scope.height || scope.panel.height || scope.row.height; diff --git a/src/app/partials/search.html b/src/app/partials/search.html index e1c9f158e0b..7e7ee2909db 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -64,11 +64,6 @@ bindonce ng-repeat="row in results.dashboards" ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)"> - - - - -
    share     @@ -84,6 +79,11 @@
    + + + + +
    • diff --git a/src/app/services/graphite/graphiteDatasource.js b/src/app/services/graphite/graphiteDatasource.js index e048484d28c..761b29b3a9f 100644 --- a/src/app/services/graphite/graphiteDatasource.js +++ b/src/app/services/graphite/graphiteDatasource.js @@ -150,7 +150,7 @@ function (angular, _, $, config, kbn, moment) { if (rounding === 'round-up') { if (date.get('s')) { - date.add('m', 1); + date.add(1, 'm'); } } else if (rounding === 'round-down') { @@ -159,7 +159,7 @@ function (angular, _, $, config, kbn, moment) { // to guarantee that we get all the data that // exists for the specified range if (date.get('s')) { - date.subtract('m', 1); + date.subtract(1, 'm'); } } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 709d7fdb028..fdc6051bc67 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -52,7 +52,7 @@ } .search-results-container { - max-height: 570px; + max-height: 600px; overflow: auto; display: block; .search-result-item a { From c6812f569fdbe08b6a5552e6180fba37fa748ecc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Aug 2014 08:42:09 +0200 Subject: [PATCH 025/146] Small js warning fix for firefox --- src/app/partials/dashboard_topnav.html | 2 +- src/vendor/bootstrap/bootstrap.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index b49e528ffff..271b71cf5a4 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -22,7 +22,7 @@
  • - + diff --git a/src/vendor/bootstrap/bootstrap.js b/src/vendor/bootstrap/bootstrap.js index 4bb9bc60b70..ba7dbadeb12 100644 --- a/src/vendor/bootstrap/bootstrap.js +++ b/src/vendor/bootstrap/bootstrap.js @@ -753,7 +753,8 @@ if (!selector) { selector = $this.attr('href') - selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + // grafana backport fix from bootstrap 3 + selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 } $parent = selector && $(selector) From bd7c045b1c235b1eba8bd8fe08c12d0cf06c0b69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Aug 2014 09:01:04 +0200 Subject: [PATCH 026/146] Small fix for dashboard settings dialog controls tab was empty --- src/app/partials/dasheditor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index d4d76c7897f..5179893ea75 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -68,7 +68,7 @@ -
    +
    Feature toggles
    From 0795af8d428d69e5c2cd9deb9180d19a4ff65960 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Aug 2014 09:28:51 +0200 Subject: [PATCH 027/146] Fix for search result list and double link to dashboard that caused navigation start recursion when unsaved changed dialog was displayed --- src/app/partials/search.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 7e7ee2909db..ffe3ac54e95 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -79,7 +79,7 @@
    - + From 1bc8526640703955afe0dc125b53c9b85d4f698e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Aug 2014 09:29:56 +0200 Subject: [PATCH 028/146] Reverted change, default edit tab should be metrics tab --- src/app/services/panelSrv.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index cae4f14ff98..3c362818f2d 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -104,7 +104,7 @@ function (angular, _) { // Post init phase $scope.fullscreen = false; - $scope.editor = { index: 3 }; + $scope.editor = { index: 1 }; if ($scope.panelMeta.fullEditorTabs) { $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs, 'title'); } From 7c3046e0111bb11874d4daca53af55b33960a29c Mon Sep 17 00:00:00 2001 From: Torkel Odegaard Date: Thu, 21 Aug 2014 10:36:18 +0200 Subject: [PATCH 029/146] Fix for reloadOnSearch missing on all dashboard routes, caused dashboard to be reloaded when entering/exiting edit mode (settings were lost), related to recent fullscreen/edit state present in url, #672, #425 --- src/app/routes/dashboard-from-db.js | 2 ++ src/app/routes/dashboard-from-file.js | 1 + 2 files changed, 3 insertions(+) diff --git a/src/app/routes/dashboard-from-db.js b/src/app/routes/dashboard-from-db.js index dfbcf3af3b1..d2c274fc57a 100644 --- a/src/app/routes/dashboard-from-db.js +++ b/src/app/routes/dashboard-from-db.js @@ -16,10 +16,12 @@ function (angular) { .when('/dashboard/elasticsearch/:id', { templateUrl: 'app/partials/dashboard.html', controller : 'DashFromDBProvider', + reloadOnSearch: false, }) .when('/dashboard/temp/:id', { templateUrl: 'app/partials/dashboard.html', controller : 'DashFromDBProvider', + reloadOnSearch: false, }); }); diff --git a/src/app/routes/dashboard-from-file.js b/src/app/routes/dashboard-from-file.js index 61d5817d294..dc54eaddaf6 100644 --- a/src/app/routes/dashboard-from-file.js +++ b/src/app/routes/dashboard-from-file.js @@ -14,6 +14,7 @@ function (angular, $, config, _) { .when('/dashboard/file/:jsonFile', { templateUrl: 'app/partials/dashboard.html', controller : 'DashFromFileProvider', + reloadOnSearch: false, }); }); From 39cdf857882b1bac10999f31d4f051f5e8327093 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Aug 2014 21:59:23 +0200 Subject: [PATCH 030/146] small refactoring for search result and dashboard id/title handling --- src/app/partials/search.html | 4 ++-- src/app/services/dashboard/dashboardSrv.js | 3 ++- src/app/services/elasticsearch/es-datasource.js | 1 + src/app/services/influxdb/influxdbDatasource.js | 1 + 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/partials/search.html b/src/app/partials/search.html index ffe3ac54e95..d149b5a9970 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -45,7 +45,7 @@
    -
    No dashboards or metrics matching your query found
    +
    No dashboards matching your query were found.
    - +
    diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index f2d67bf1839..6a363837bc3 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -19,7 +19,9 @@ function (angular, $, kbn, _, moment) { data = {}; } + this.id = data.id || null; this.title = data.title || 'No Title'; + this.originalTitle = this.title; this.tags = data.tags || []; this.style = data.style || "dark"; this.timezone = data.timezone || 'browser'; @@ -31,7 +33,6 @@ function (angular, $, kbn, _, moment) { this.templating = data.templating || { list: [] }; this.refresh = data.refresh; this.version = data.version || 0; - this.$state = data.$state; if (this.nav.length === 0) { this.nav.push({ type: 'timepicker' }); diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 10fa1f00245..8b499c75af1 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -216,6 +216,7 @@ function (angular, _, $, config, kbn, moment) { for (var i = 0; i < results.hits.hits.length; i++) { hits.dashboards.push({ id: results.hits.hits[i]._id, + title: results.hits.hits[i]._id, tags: results.hits.hits[i]._source.tags }); } diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 91ffdd12429..4dafd9d7388 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -358,6 +358,7 @@ function (angular, _, kbn, InfluxSeries) { for (var i = 0; i < results.length; i++) { var hit = { id: results[i].points[0][dashCol], + title: results[i].points[0][dashCol], tags: results[i].points[0][tagsCol].split(",") }; hit.tags = hit.tags[0] ? hit.tags : []; 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 031/146] 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 032/146] 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 033/146] 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 034/146] 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 035/146] 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 036/146] 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 037/146] 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 038/146] 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 039/146] 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 040/146] 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 041/146] 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 042/146] 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 043/146] 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 044/146] 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 045/146] 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 046/146] 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 047/146] 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 048/146] 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 049/146] 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 050/146] 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 051/146] 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 052/146] 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 053/146] 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 054/146] 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 055/146] 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 056/146] 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 057/146] 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 058/146] 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 059/146] 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 060/146] 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 061/146] 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 062/146] 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 063/146] 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 064/146] 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 065/146] 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 066/146] 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 067/146] 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 068/146] 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 069/146] 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 070/146] 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 071/146] 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 072/146] 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 073/146] 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 074/146] 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 075/146] 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 076/146] 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 077/146] 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 094/146] 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 101/146] 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 102/146] 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 103/146] 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 104/146] 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 105/146] 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 106/146] 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 107/146] 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 108/146] 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 109/146] 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 110/146] 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 111/146] 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 112/146] 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 113/146] 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 114/146] 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 115/146] 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 116/146] 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 117/146] 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 118/146] 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 119/146] 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 @@