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 @@