From 1cce5fdfe11176e3969586ef0af819dad25fa453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 16 Apr 2016 12:03:29 -0400 Subject: [PATCH] feat(templating): polished variable template edit forms, added new template variable type: datasource --- public/app/core/components/info_popover.ts | 7 +- public/app/features/templating/editorCtrl.js | 20 +++ .../features/templating/partials/editor.html | 147 +++++++++++------- .../features/templating/templateValuesSrv.js | 35 +++++ public/sass/base/_code.scss | 6 +- public/test/core/utils/emitter_specs.ts | 2 +- public/test/specs/templateValuesSrv-specs.js | 23 ++- 7 files changed, 171 insertions(+), 69 deletions(-) diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index 8bc28b8a57d..d370aab9d6d 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -11,12 +11,6 @@ export function infoPopover() { template: '', transclude: true, link: function(scope, elem, attrs, ctrl, transclude) { - // var inputElem = elem.prev(); - // if (inputElem.length === 0) { - // console.log('Failed to find input element for popover'); - // return; - // } - var offset = attrs.offset || '0 -10px'; var position = attrs.position || 'right middle'; var classes = 'drop-help drop-hide-out-of-bounds'; @@ -44,6 +38,7 @@ export function infoPopover() { position: position, classes: classes, openOn: openOn, + hoverOpenDelay: 400, tetherOptions: { offset: offset } diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index 291915ee99f..9ec4f57eb20 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -20,6 +20,13 @@ function (angular, _) { multi: false, }; + $scope.variableTypes = [ + {value: "query", text: "Query"}, + {value: "interval", text: "Interval"}, + {value: "datasource", text: "Datasource"}, + {value: "custom", text: "Custom"}, + ]; + $scope.refreshOptions = [ {value: 0, text: "Never"}, {value: 1, text: "On Dashboard Load"}, @@ -35,10 +42,16 @@ function (angular, _) { $scope.init = function() { $scope.mode = 'list'; + $scope.datasourceTypes = {}; $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) { + $scope.datasourceTypes[ds.meta.id] = {text: ds.meta.name, value: ds.meta.id}; return !ds.meta.builtIn; }); + $scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) { + return value; + }); + $scope.variables = templateSrv.variables; $scope.reset(); @@ -132,9 +145,16 @@ function (angular, _) { if ($scope.current.type === 'interval') { $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; } + if ($scope.current.type === 'query') { $scope.current.query = ''; } + + if ($scope.current.type === 'datasource') { + $scope.current.query = $scope.datasourceTypes[0].value; + $scope.current.regex = ''; + $scope.current.refresh = 1; + } }; $scope.removeVariable = function(variable) { diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index c7dfe61f2b4..3e8ecb4f3c5 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -75,39 +75,49 @@
- Name - -
-
- Type -
- -
+ Name +
- Data source -
- + + Type + +
+
Query
+
Variable values are fetched from a metric names query to a data source
+
Interval
+
Timespan variable type
+
Datasource
+
Dynamically switch data sources using this type of variable
+
Custom
+
Define variable values manually
+
+ Templating docs + + +
+
-
+
- Label - + Label +
-
- Hide -
- +
+ Hide +
+
-
Value Options
+
Interval Options
+
Values @@ -135,6 +145,7 @@
+
Custom Options
Values seperated by comma @@ -142,43 +153,69 @@
-
- Query - - - - - - - - - - - - - - - - - - -
-
- - Regex - Optional, if you want to extract part of a series name or metric node segment - - -
-
- Refresh - - When to update the values of this variable, will slow down dashboard load / time change -
-
+
Query Options
-
-
Selection Options
+
+
+ Data source +
+ +
+
+
+ + Refresh + + When to update the values of this variable. + + +
+ +
+
+
+
+ Query + +
+
+ + Regex + + Optional, if you want to extract part of a series name or metric node segment. + + + +
+
+ +
+
Datasource Options
+ +
+ +
+ +
+
+ +
+ + +
+
+ +
+
Selection Options
{ expect(sub2Called).to.be(true); }); - it.only('should handle errors', () => { + it('should handle errors', () => { var events = new Emitter(); var sub1Called = 0; var sub2Called = 0; diff --git a/public/test/specs/templateValuesSrv-specs.js b/public/test/specs/templateValuesSrv-specs.js index d81ce4fd059..af7da0b19cb 100644 --- a/public/test/specs/templateValuesSrv-specs.js +++ b/public/test/specs/templateValuesSrv-specs.js @@ -92,6 +92,7 @@ define([ var ds = {}; ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); + ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); ctx.service.updateOptions(scenario.variable); ctx.$rootScope.$digest(); @@ -137,7 +138,6 @@ define([ }); }); - 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 }; @@ -237,7 +237,7 @@ define([ }); }); - describeUpdateVariable('regex pattern without slashes', function(scenario) { + describeUpdateVariable('regex pattern without slashes', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; scenario.variable.regex = 'backend_01'; @@ -284,6 +284,23 @@ define([ }); }); - }); + describeUpdateVariable('datasource variable with regex filter', function(scenario) { + scenario.setup(function() { + scenario.variable = {type: 'datasource', query: 'graphite', name: 'test', current: {}, regex: '/pee$/' }; + scenario.metricSources = [ + {name: 'backend1', meta: {id: 'influx'}}, + {name: 'backend2_pee', meta: {id: 'graphite'}}, + {name: 'backend3', meta: {id: 'graphite'}}, + {name: 'backend4_pee', meta: {id: 'graphite'}}, + ]; + }); + it('should set only contain graphite ds and filtered using regex', function() { + expect(scenario.variable.options.length).to.be(2); + expect(scenario.variable.options[0].value).to.be('backend2_pee'); + expect(scenario.variable.options[1].value).to.be('backend4_pee'); + }); + }); + + }); });