Skip to content

N
nexpie-grafana-theme
Commit 293d0c30 by Torkel Ödegaard
Options

Merge branch 'panel_repeat'

parents 0a8cf267 e17f56b4
Showing with 1067 additions and 321 deletions
public/app/controllers/search.js
......@@ -140,25 +140,6 @@ function (angular, _, config) {
});
module.directive('xngFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
});
scope.$watch(attrs.xngFocus,function (newValue) {
if (!newValue) {
return;
}
setTimeout(function() {
element.focus();
var pos = element.val().length * 2;
element[0].setSelectionRange(pos, pos);
}, 200);
},true);
};
});
module.directive('tagColorFromName', function() {
function djb2(str) {
......
public/app/directives/all.js
......@@ -16,4 +16,5 @@ define([
'./grafanaVersionCheck',
'./dropdown.typeahead',
'./topnav',
'./giveFocus',
], function () {});
public/app/directives/giveFocus.js 0 → 100644
define([
'angular'
],
function (angular) {
'use strict';
angular.module('grafana.directives').directive('giveFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
});
scope.$watch(attrs.giveFocus,function (newValue) {
if (!newValue) {
return;
}
setTimeout(function() {
element.focus();
var pos = element.val().length * 2;
element[0].setSelectionRange(pos, pos);
}, 200);
},true);
};
});
});
public/app/directives/templateParamSelector.js
......@@ -4,84 +4,156 @@ define([
'lodash',
'jquery',
],
function (angular, app, _, $) {
function (angular, app, _) {
'use strict';
angular
.module('grafana.directives')
.directive('templateParamSelector', function($compile) {
var inputTemplate = '<input type="text" data-provide="typeahead" ' +
' class="tight-form-clear-input input-medium"' +
' spellcheck="false" style="display:none"></input>';
.directive('variableValueSelect', function($compile, $window, $timeout) {
return {
scope: {
variable: "=",
onUpdated: "&"
},
templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
link: function(scope, elem) {
var bodyEl = angular.element($window.document.body);
var variable = scope.variable;
var buttonTemplate = '<a class="tight-form-item tabindex="1">{{variable.current.text}} <i class="fa fa-caret-down"></i></a>';
scope.show = function() {
if (scope.selectorOpen) {
return;
}
return {
link: function($scope, elem) {
var $input = $(inputTemplate);
var $button = $(buttonTemplate);
var variable = $scope.variable;
$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.selectorOpen = true;
scope.giveFocus = 1;
scope.oldCurrentText = variable.current.text;
scope.highlightIndex = -1;
var currentValues = variable.current.value;
if (_.isString(currentValues)) {
currentValues = [currentValues];
}
scope.options = _.map(variable.options, function(option) {
if (_.indexOf(currentValues, option.value) >= 0) {
option.selected = true;
}
$scope.setVariableValue($scope.variable, selected);
return option;
});
scope.search = {query: '', options: scope.options};
$timeout(function() {
bodyEl.on('click', scope.bodyOnClick);
}, 0, false);
};
scope.queryChanged = function() {
scope.highlightIndex = -1;
scope.search.options = _.filter(scope.options, function(option) {
return option.text.toLowerCase().indexOf(scope.search.query.toLowerCase()) !== -1;
});
}
$input.attr('data-provide', 'typeahead');
$input.typeahead({
minLength: 0,
items: 1000,
updater: function(value) {
$input.val(value);
$input.trigger('blur');
return value;
};
scope.keyDown = function (evt) {
if (evt.keyCode === 27) {
scope.hide();
}
});
if (evt.keyCode === 40) {
scope.moveHighlight(1);
}
if (evt.keyCode === 38) {
scope.moveHighlight(-1);
}
if (evt.keyCode === 13) {
scope.optionSelected(scope.search.options[scope.highlightIndex], {});
}
};
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(options);
scope.moveHighlight = function(direction) {
scope.highlightIndex = (scope.highlightIndex + direction) % scope.search.options.length;
};
$button.click(function() {
$input.css('width', ($button.width() + 16) + 'px');
scope.optionSelected = function(option, event) {
option.selected = !option.selected;
var hideAfter = true;
var setAllExceptCurrentTo = function(newValue) {
_.each(scope.options, function(other) {
if (option !== other) { other.selected = newValue; }
});
};
if (option.text === 'All') {
setAllExceptCurrentTo(false);
}
else if (!variable.multi) {
setAllExceptCurrentTo(false);
} else {
if (event.ctrlKey || event.metaKey || event.shiftKey) {
hideAfter = false;
}
else {
setAllExceptCurrentTo(false);
}
}
var selected = _.filter(scope.options, {selected: true});
$button.hide();
$input.show();
$input.focus();
if (selected.length === 0) {
option.selected = true;
selected = [option];
}
var typeahead = $input.data('typeahead');
if (typeahead) {
$input.val('');
typeahead.lookup();
if (selected.length > 1 && selected.length !== scope.options.length) {
if (selected[0].text === 'All') {
selected[0].selected = false;
selected = selected.slice(1, selected.length);
}
}
});
variable.current = {
text: _.pluck(selected, 'text').join(', '),
value: _.pluck(selected, 'value'),
};
$input.blur(function() {
if ($input.val() !== '') { updateVariableValue($input.val()); }
$input.hide();
$button.show();
$button.focus();
});
// only single value
if (variable.current.value.length === 1) {
variable.current.value = selected[0].value;
}
$scope.$on('$destroy', function() {
$button.unbind();
typeahead.destroy();
});
scope.updateLinkText();
scope.onUpdated();
if (hideAfter) {
scope.hide();
}
};
scope.hide = function() {
scope.selectorOpen = false;
bodyEl.off('click', scope.bodyOnClick);
};
$compile(elem.contents())($scope);
}
scope.bodyOnClick = function(e) {
var dropdown = elem.find('.variable-value-dropdown');
if (dropdown.has(e.target).length === 0) {
scope.$apply(scope.hide);
}
};
scope.updateLinkText = function() {
scope.labelText = variable.label || '$' + variable.name;
scope.linkText = variable.current.text;
};
scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label', 'variable.current.text'], function() {
scope.updateLinkText();
});
},
};
});
});
public/app/features/dashboard/all.js
......@@ -16,5 +16,6 @@ define([
'./unsavedChangesSrv',
'./directives/dashSearchView',
'./graphiteImportCtrl',
'./dynamicDashboardSrv',
'./importCtrl',
], function () {});
public/app/features/dashboard/dashboardCtrl.js
......@@ -15,7 +15,9 @@ function (angular, $, config) {
dashboardKeybindings,
timeSrv,
templateValuesSrv,
dynamicDashboardSrv,
dashboardSrv,
unsavedChangesSrv,
dashboardViewStateSrv,
contextSrv,
$timeout) {
......@@ -46,6 +48,9 @@ function (angular, $, config) {
// template values service needs to initialize completely before
// the rest of the dashboard can load
templateValuesSrv.init(dashboard).finally(function() {
dynamicDashboardSrv.init(dashboard);
unsavedChangesSrv.init(dashboard, $scope);
$scope.dashboard = dashboard;
$scope.dashboardMeta = dashboard.meta;
$scope.dashboardViewState = dashboardViewStateSrv.create($scope);
......
public/app/features/dashboard/dashboardSrv.js
......@@ -10,7 +10,7 @@ function (angular, $, kbn, _, moment) {
var module = angular.module('grafana.services');
module.factory('dashboardSrv', function(contextSrv) {
module.factory('dashboardSrv', function() {
function DashboardModel (data, meta) {
if (!data) {
......@@ -59,10 +59,6 @@ function (angular, $, kbn, _, moment) {
meta.canStar = meta.canStar === false ? false : true;
meta.canDelete = meta.canDelete === false ? false : true;
if (contextSrv.hasRole('Viewer')) {
meta.canSave = false;
}
if (!this.editable) {
meta.canEdit = false;
meta.canDelete = false;
......@@ -180,6 +176,7 @@ function (angular, $, kbn, _, moment) {
var currentRow = this.rows[rowIndex];
currentRow.panels.push(newPanel);
return newPanel;
};
p.formatDate = function(date, format) {
......
public/app/features/dashboard/dynamicDashboardSrv.js 0 → 100644
define([
'angular',
'lodash',
],
function (angular, _) {
'use strict';
var module = angular.module('grafana.services');
module.service('dynamicDashboardSrv', function() {
var self = this;
this.init = function(dashboard) {
this.iteration = new Date().getTime();
this.process(dashboard);
};
this.update = function(dashboard) {
this.iteration = this.iteration + 1;
this.process(dashboard);
};
this.process = function(dashboard) {
if (dashboard.templating.list.length === 0) { return; }
this.dashboard = dashboard;
var i, j, row, panel;
for (i = 0; i < this.dashboard.rows.length; i++) {
row = this.dashboard.rows[i];
// repeat panels first
for (j = 0; j < row.panels.length; j++) {
panel = row.panels[j];
if (panel.repeat) {
this.repeatPanel(panel, row);
}
// clean up old left overs
else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
row.panels = _.without(row.panels, panel);
j = j - 1;
}
}
// handle row repeats
if (row.repeat) {
this.repeatRow(row);
}
// clean up old left overs
else if (row.repeatRowId && row.repeatIteration !== this.iteration) {
this.dashboard.rows.splice(i, 1);
i = i - 1;
}
}
};
// returns a new row clone or reuses a clone from previous iteration
this.getRowClone = function(sourceRow, index) {
if (index === 0) {
return sourceRow;
}
var i, panel, row, copy;
var sourceRowId = _.indexOf(this.dashboard.rows, sourceRow) + 1;
// look for row to reuse
for (i = 0; i < this.dashboard.rows.length; i++) {
row = this.dashboard.rows[i];
if (row.repeatRowId === sourceRowId && row.repeatIteration !== this.iteration) {
copy = row;
break;
}
}
if (!copy) {
copy = angular.copy(sourceRow);
this.dashboard.rows.push(copy);
// set new panel ids
for (i = 0; i < copy.panels.length; i++) {
panel = copy.panels[i];
panel.id = this.dashboard.getNextPanelId();
}
}
copy.repeat = null;
copy.repeatRowId = sourceRowId;
copy.repeatIteration = this.iteration;
return copy;
};
// returns a new panel clone or reuses a clone from previous iteration
this.repeatRow = function(row) {
var variables = this.dashboard.templating.list;
var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')});
if (!variable) {
return;
}
var selected, copy, i, panel;
if (variable.current.text === 'All') {
selected = variable.options.slice(1, variable.options.length);
} else {
selected = _.filter(variable.options, {selected: true});
}
_.each(selected, function(option, index) {
copy = self.getRowClone(row, index);
for (i = 0; i < copy.panels.length; i++) {
panel = copy.panels[i];
panel.scopedVars = panel.scopedVars || {};
panel.scopedVars[variable.name] = option;
}
});
};
this.getPanelClone = function(sourcePanel, row, index) {
// if first clone return source
if (index === 0) {
return sourcePanel;
}
var i, tmpId, panel, clone;
// first try finding an existing clone to use
for (i = 0; i < row.panels.length; i++) {
panel = row.panels[i];
if (panel.repeatIteration !== this.iteration && panel.repeatPanelId === sourcePanel.id) {
clone = panel;
break;
}
}
if (!clone) {
clone = { id: this.dashboard.getNextPanelId() };
row.panels.push(clone);
}
// save id
tmpId = clone.id;
// copy properties from source
angular.extend(clone, sourcePanel);
// restore id
clone.id = tmpId;
clone.repeatIteration = this.iteration;
clone.repeatPanelId = sourcePanel.id;
clone.repeat = null;
return clone;
};
this.repeatPanel = function(panel, row) {
var variables = this.dashboard.templating.list;
var variable = _.findWhere(variables, {name: panel.repeat});
if (!variable) { return; }
var selected;
if (variable.current.text === 'All') {
selected = variable.options.slice(1, variable.options.length);
} else {
selected = _.filter(variable.options, {selected: true});
}
_.each(selected, function(option, index) {
var copy = self.getPanelClone(panel, row, index);
copy.scopedVars = {};
copy.scopedVars[variable.name] = option;
});
};
});
});
public/app/features/dashboard/partials/dashboardTopNav.html
......@@ -27,7 +27,7 @@
<li ng-show="dashboardMeta.canShare">
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
</li>
<li ng-show="dashboardMeta.canSave">
<li ng-show="dashboardMeta.canSave && contextSrv.isEditor">
<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li class="dropdown">
......
public/app/features/dashboard/partials/variableValueSelect.html 0 → 100644
<span class="template-variable" ng-show="!variable.hideLabel" style="padding-right: 5px">
{{labelText}}:
</span>
<div style="position: relative; display: inline-block">
<a ng-click="show()" class="variable-value-link">
{{linkText}}
<i class="fa fa-caret-down"></i>
</a>
<div ng-if="selectorOpen" class="variable-value-dropdown">
<div class="variable-search-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Search values..." ng-keydown="keyDown($event)" give-focus="giveFocus" tabindex="1" ng-model="search.query" spellcheck='false' ng-change="queryChanged()" />
</span>
</div>
<div class="variable-options-container" ng-if="!query.tagcloud">
<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
<span >{{option.text}}</label>
<span class="fa fa-fw variable-option-icon"></span>
</a>
</div>
</div>
</div>
public/app/features/dashboard/submenuCtrl.js
......@@ -7,7 +7,7 @@ function (angular, _) {
var module = angular.module('grafana.controllers');
module.controller('SubmenuCtrl', function($scope, $q, $rootScope, templateValuesSrv) {
module.controller('SubmenuCtrl', function($scope, $q, $rootScope, templateValuesSrv, dynamicDashboardSrv) {
var _d = {
enable: true
};
......@@ -26,8 +26,11 @@ function (angular, _) {
$rootScope.$broadcast('refresh');
};
$scope.setVariableValue = function(param, option) {
templateValuesSrv.setVariableValue(param, option);
$scope.variableUpdated = function(variable) {
templateValuesSrv.variableUpdated(variable).then(function() {
dynamicDashboardSrv.update($scope.dashboard);
$rootScope.$broadcast('refresh');
});
};
$scope.init();
......
public/app/features/dashboard/unsavedChangesSrv.js
define([
'angular',
'lodash',
'config',
],
function(angular, _, config) {
function(angular, _) {
'use strict';
if (!config.unsaved_changes_warning) {
return;
}
var module = angular.module('grafana.services');
module.service('unsavedChangesSrv', function($rootScope, $modal, $q, $location, $timeout) {
module.service('unsavedChangesSrv', function($modal, $q, $location, $timeout, contextSrv, $window) {
var self = this;
var modalScope = $rootScope.$new();
function Tracker(dashboard, scope) {
var self = this;
$rootScope.$on("dashboard-loaded", function(event, newDashboard) {
// wait for different services to patch the dashboard (missing properties)
$timeout(function() {
self.original = newDashboard.getSaveModelClone();
self.current = newDashboard;
}, 1200);
});
$rootScope.$on("dashboard-saved", function(event, savedDashboard) {
self.original = savedDashboard.getSaveModelClone();
self.current = savedDashboard;
self.orignalPath = $location.path();
});
$rootScope.$on("$routeChangeSuccess", function() {
self.original = null;
self.originalPath = $location.path();
});
this.ignoreChanges = function() {
if (!self.current || !self.current.meta) { return true; }
var meta = self.current.meta;
return !meta.canSave || meta.fromScript || meta.fromFile;
};
this.original = dashboard.getSaveModelClone();
this.current = dashboard;
this.originalPath = $location.path();
this.scope = scope;
window.onbeforeunload = function() {
if (self.ignoreChanges()) { return; }
if (self.has_unsaved_changes()) {
return "There are unsaved changes to this dashboard";
}
};
// register events
scope.onAppEvent('dashboard-saved', function() {
self.original = self.current.getSaveModelClone();
self.originalPath = $location.path();
});
$window.onbeforeunload = function() {
if (self.ignoreChanges()) { return; }
if (self.hasChanges()) {
return "There are unsaved changes to this dashboard";
}
};
this.init = function() {
$rootScope.$on("$locationChangeStart", function(event, next) {
scope.$on("$locationChangeStart", function(event, next) {
// check if we should look for changes
if (self.originalPath === $location.path()) { return true; }
if (self.ignoreChanges()) { return true; }
if (self.has_unsaved_changes()) {
if (self.hasChanges()) {
event.preventDefault();
self.next = next;
$timeout(self.open_modal);
$timeout(function() {
self.open_modal();
});
}
});
};
}
this.open_modal = function() {
var confirmModal = $modal({
template: './app/partials/unsaved-changes.html',
modalClass: 'confirm-modal',
persist: true,
show: false,
scope: modalScope,
keyboard: false
});
var p = Tracker.prototype;
$q.when(confirmModal).then(function(modalEl) {
modalEl.modal('show');
});
// for some dashboards and users
// changes should be ignored
p.ignoreChanges = function() {
if (!this.original) { return false; }
if (!contextSrv.isEditor) { return true; }
if (!this.current || !this.current.meta) { return true; }
var meta = this.current.meta;
return !meta.canSave || meta.fromScript || meta.fromFile;
};
this.has_unsaved_changes = function() {
if (!self.original) {
return false;
}
// remove stuff that should not count in diff
p.cleanDashboardFromIgnoredChanges = function(dash) {
// ignore time and refresh
dash.time = 0;
dash.refresh = 0;
dash.schemaVersion = 0;
// filter row and panels properties that should be ignored
dash.rows = _.filter(dash.rows, function(row) {
if (row.repeatRowId) {
return false;
}
var current = self.current.getSaveModelClone();
var original = self.original;
row.panels = _.filter(row.panels, function(panel) {
if (panel.repeatPanelId) {
return false;
}
// remove scopedVars
panel.scopedVars = null;
// ignore panel legend sort
if (panel.legend) {
delete panel.legend.sort;
delete panel.legend.sortDesc;
}
// ignore timespan changes
current.time = original.time = {};
current.refresh = original.refresh;
// ignore version
current.version = original.version;
return true;
});
// ignore collapse state
row.collapse = false;
return true;
});
// ignore template variable values
_.each(current.templating.list, function(value, index) {
_.each(dash.templating.list, function(value) {
value.current = null;
value.options = null;
if (original.templating.list.length > index) {
original.templating.list[index].current = null;
original.templating.list[index].options = null;
}
});
// ignore some panel and row stuff
current.forEachPanel(function(panel, panelIndex, row, rowIndex) {
var originalRow = original.rows[rowIndex];
var originalPanel = original.getPanelById(panel.id);
// ignore row collapse state
if (originalRow) {
row.collapse = originalRow.collapse;
}
if (originalPanel) {
// ignore graph legend sort
if (originalPanel.legend && panel.legend) {
delete originalPanel.legend.sortDesc;
delete originalPanel.legend.sort;
delete panel.legend.sort;
delete panel.legend.sortDesc;
}
}
});
};
p.hasChanges = function() {
var current = this.current.getSaveModelClone();
var original = this.original;
this.cleanDashboardFromIgnoredChanges(current);
this.cleanDashboardFromIgnoredChanges(original);
var currentTimepicker = _.findWhere(current.nav, { type: 'timepicker' });
var originalTimepicker = _.findWhere(original.nav, { type: 'timepicker' });
......@@ -141,28 +126,43 @@ function(angular, _, config) {
return false;
};
this.goto_next = function() {
var baseLen = $location.absUrl().length - $location.url().length;
var nextUrl = self.next.substring(baseLen);
$location.url(nextUrl);
};
p.open_modal = function() {
var tracker = this;
modalScope.ignore = function() {
self.original = null;
self.goto_next();
};
var modalScope = this.scope.$new();
modalScope.ignore = function() {
tracker.original = null;
tracker.goto_next();
};
modalScope.save = function() {
var unregister = $rootScope.$on('dashboard-saved', function() {
self.goto_next();
modalScope.save = function() {
tracker.scope.$emit('save-dashboard');
};
var confirmModal = $modal({
template: './app/partials/unsaved-changes.html',
modalClass: 'confirm-modal',
persist: false,
show: false,
scope: modalScope,
keyboard: false
});
$timeout(unregister, 2000);
$q.when(confirmModal).then(function(modalEl) {
modalEl.modal('show');
});
};
$rootScope.$emit('save-dashboard');
p.goto_next = function() {
var baseLen = $location.absUrl().length - $location.url().length;
var nextUrl = this.next.substring(baseLen);
$location.url(nextUrl);
};
}).run(function(unsavedChangesSrv) {
unsavedChangesSrv.init();
this.Tracker = Tracker;
this.init = function(dashboard, scope) {
// wait for different services to patch the dashboard (missing properties)
$timeout(function() { new Tracker(dashboard, scope); }, 1200);
};
});
});
public/app/features/panel/panelHelper.js
......@@ -68,6 +68,7 @@ function (angular, _, kbn, $) {
targets: scope.panel.targets,
format: scope.panel.renderer === 'png' ? 'png' : 'json',
maxDataPoints: scope.resolution,
scopedVars: scope.panel.scopedVars,
cacheTimeout: scope.panel.cacheTimeout
};
......
public/app/features/panel/panelMenu.js
......@@ -11,7 +11,7 @@ function (angular, $, _) {
.directive('panelMenu', function($compile, linkSrv) {
var linkTemplate =
'<span class="panel-title drag-handle pointer">' +
'<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars}}</span>' +
'<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars:this}}</span>' +
'<span class="panel-links-icon"></span>' +
'<span class="panel-time-info" ng-show="panelMeta.timeInfo"><i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}</span>' +
'</span>';
......
public/app/features/panel/panelSrv.js
......@@ -11,6 +11,7 @@ function (angular, _, config) {
module.service('panelSrv', function($rootScope, $timeout, datasourceSrv, $q) {
this.init = function($scope) {
if (!$scope.panel.span) { $scope.panel.span = 12; }
$scope.inspector = {};
......
public/app/features/templating/editorCtrl.js
......@@ -17,6 +17,8 @@ function (angular, _) {
options: [],
includeAll: false,
allFormat: 'glob',
multi: false,
multiFormat: 'glob',
};
$scope.init = function() {
......@@ -75,7 +77,7 @@ function (angular, _) {
if ($scope.current.datasource === void 0) {
$scope.current.datasource = null;
$scope.current.type = 'query';
$scope.current.allFormat = 'Glob';
$scope.current.allFormat = 'glob';
}
};
......
public/app/features/templating/templateSrv.js
......@@ -29,11 +29,23 @@ function (angular, _) {
_.each(this.variables, function(variable) {
if (!variable.current || !variable.current.value) { return; }
this._values[variable.name] = variable.current.value;
this._values[variable.name] = this.renderVariableValue(variable);
this._texts[variable.name] = variable.current.text;
}, this);
};
this.renderVariableValue = function(variable) {
var value = variable.current.value;
if (_.isString(value)) {
return value;
} else {
if (variable.multiFormat === 'regex values') {
return '(' + value.join('|') + ')';
}
return '{' + value.join(',') + '}';
}
};
this.setGrafanaVariable = function (name, value) {
this._grafanaVariables[name] = value;
};
......
public/app/features/templating/templateValuesSrv.js
......@@ -73,17 +73,15 @@ function (angular, _, kbn) {
templateSrv.setGrafanaVariable('$__auto_interval', interval);
};
this.setVariableValue = function(variable, option, recursive) {
this.setVariableValue = function(variable, option) {
variable.current = option;
templateSrv.updateTemplateData();
return this.updateOptionsInChildVariables(variable);
};
return this.updateOptionsInChildVariables(variable)
.then(function() {
if (!recursive) {
$rootScope.$broadcast('refresh');
}
});
this.variableUpdated = function(variable) {
templateSrv.updateTemplateData();
return this.updateOptionsInChildVariables(variable);
};
this.updateOptionsInChildVariables = function(updatedVariable) {
......@@ -130,11 +128,11 @@ function (angular, _, kbn) {
if (variable.current) {
var currentOption = _.findWhere(variable.options, { text: variable.current.text });
if (currentOption) {
return self.setVariableValue(variable, currentOption, true);
return self.setVariableValue(variable, currentOption);
}
}
return self.setVariableValue(variable, variable.options[0], true);
return self.setVariableValue(variable, variable.options[0]);
});
});
};
......
public/app/filters/all.js
......@@ -56,8 +56,8 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen
});
module.filter('interpolateTemplateVars', function(templateSrv) {
function interpolateTemplateVars(text) {
return templateSrv.replaceWithText(text);
function interpolateTemplateVars(text, scope) {
return templateSrv.replaceWithText(text, scope.panel.scopedVars);
}
interpolateTemplateVars.$stateful = true;
......
public/app/panels/graph/axisEditor.html
......@@ -190,7 +190,7 @@
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<li class="tight-form-item" style="width: 105px">
<strong>Legend values</strong>
</li>
<li class="tight-form-item">
......
public/app/panels/graph/graph.js
......@@ -112,7 +112,7 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
}
if (elem.width() === 0) {
return;
return true;
}
}
......@@ -277,7 +277,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
if (legendSideLastValue !== null && panel.legend.rightSide !== legendSideLastValue) {
return true;
}
return false;
}
function addTimeAxis(options) {
......
public/app/partials/dashboard.html
......@@ -79,7 +79,7 @@
</div>
<!-- Panels, draggable needs to be disabled in fullscreen because Firefox bug -->
<div ng-repeat="(name, panel) in row.panels" class="panel"
<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel"
ui-draggable="{{!dashboardViewState.fullscreen}}" drag="panel.id"
ui-on-Drop="onDrop($data, row, panel)"
drag-handle-class="drag-handle" panel-width>
......
public/app/partials/panelgeneral.html
<div class="editor-row">
<div class="section">
<h5>General options</h5>
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="editor-option">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="editor-option">
<label class="small">Height</label><input type="text" class="input-small" ng-model='panel.height'></select>
</div>
<editor-opt-bool text="Transparent" model="panel.transparent"></editor-opt-bool>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='panel.title'></input>
</li>
<li class="tight-form-item">
Span
</li>
<li>
<select class="input-mini tight-form-input" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='panel.height'></input>
</li>
<li class="tight-form-item">
<label class="checkbox-label" for="panel.transparent">Transparent</label>
<input class="cr1" id="panel.transparent" type="checkbox" ng-model="panel.transparent" ng-checked="panel.transparent">
<label for="panel.transparent" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section">
<h5>Templating options</h5>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Panel
</li>
<li>
<select class="input-small tight-form-input last" ng-model="panel.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<panel-link-editor panel="panel"></panel-link-editor>
......
public/app/partials/roweditor.html
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-th-list"></i>
......@@ -16,15 +17,48 @@
<div class="gf-box-body">
<div class="editor-row" ng-if="editor.index == 0">
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-xlarge" ng-model='row.title'></input>
<div class="editor-row">
<div class="section">
<h5>Row details</h5>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='row.title'></input>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='row.height'></input>
</li>
<li class="tight-form-item">
<label class="checkbox-label" for="row.showTitle">Show Title</label>
<input class="cr1" id="row.showTitle" type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle">
<label for="row.showTitle" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="editor-option">
<label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
<div class="section">
<h5>Templating options</h5>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Row
</li>
<li>
<select class="input-small tight-form-input last" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
</div>
</div>
public/app/partials/search.html
......@@ -2,7 +2,7 @@
<div class="search-field-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Find dashboards by name" xng-focus="giveSearchFocus" tabindex="1"
<input type="text" placeholder="Find dashboards by name" give-focus="giveSearchFocus" tabindex="1"
ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
</span>
<div class="search-switches">
......
public/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form borderless">
<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">
${{variable.name}}:
</span>
<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown">
<variable-value-select variable="variable" on-updated="variableUpdated(variable)"></variable-value-select>
</li>
<!-- <li class="dropdown" ng&#45;repeat&#45;end> -->
<!-- <a class="tight&#45;form&#45;item" tabindex="1" data&#45;toggle="dropdown">{{variable.current.text}} <i class="fa fa&#45;caret&#45;down"></i></a> -->
<!-- <div class="dropdown&#45;menu variable&#45;values&#45;dropdown"> -->
<!-- <input type="text" class="fluid&#45;width"> -->
<!-- <div class="variable&#45;values&#45;list"> -->
<!-- <div class="variable&#45;values&#45;list&#45;item" ng&#45;repeat="option in variable.options"> -->
<!-- <editor&#45;checkbox text="{{option.text}}" model="asd" change="buildUrl()"></editor&#45;checkbox> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </li> -->
<!-- -->
<!--
<li ng-repeat-end template-param-selector>
</li>
-->
<li class="tight-form-item" style="width: 15px">
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
......
public/app/plugins/datasource/graphite/datasource.js
......@@ -36,7 +36,7 @@ function (angular, _, $, config, kbn, moment) {
maxDataPoints: options.maxDataPoints,
};
var params = this.buildGraphiteParams(graphOptions);
var params = this.buildGraphiteParams(graphOptions, options.scopedVars);
if (options.format === 'png') {
return $q.when(this.url + '/render' + '?' + params.join('&'));
......@@ -231,7 +231,7 @@ function (angular, _, $, config, kbn, moment) {
'#Y', '#Z'
];
GraphiteDatasource.prototype.buildGraphiteParams = function(options) {
GraphiteDatasource.prototype.buildGraphiteParams = function(options, scopedVars) {
var graphite_options = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
var clean_options = [], targets = {};
var target, targetValue, i;
......@@ -252,7 +252,7 @@ function (angular, _, $, config, kbn, moment) {
continue;
}
targetValue = templateSrv.replace(target.target);
targetValue = templateSrv.replace(target.target, scopedVars);
targetValue = targetValue.replace(intervalFormatFixRegex, fixIntervalFormat);
targets[this._seriesRefLetters[i]] = targetValue;
}
......
public/css/less/forms.less
......@@ -11,6 +11,11 @@ input[type="checkbox"].cr1 {
display: none;
}
.editor-option label.cr1 {
display: inline-block;
margin: 5px 0 1px 0;
}
label.cr1 {
display: inline-block;
height: 19px;
......
public/css/less/submenu.less
......@@ -19,3 +19,60 @@
}
}
.variable-value-link {
font-size: 16px;
margin-right: 20px;
}
.variable-value-dropdown {
position: absolute;
top: 27px;
min-width: 150px;
max-height: 400px;
background: @grafanaPanelBackground;
box-shadow: 0px 0px 55px 0px black;
border: 1px solid @grafanaTargetFuncBackground;
z-index: 1000;
font-size: @baseFontSize;
padding: 0;
border-radius: 3px 3px 0 0;
}
.variable-options-container {
max-height: 350px;
overflow: auto;
display: block;
line-height: 26px;
}
.variable-option {
display: block;
padding: 0 8px;
&:hover, &.highlighted {
background-color: @blueDark;
}
.fa {
line-height: 26px;
float: right;
padding-left: 4px;
}
&.selected {
.variable-option-icon:before {
content: "\f00c";
}
}
}
.variable-search-wrapper {
input {
width: 100%;
padding: 7px 8px;
height: 100%;
box-sizing: border-box;
margin-bottom: 6px;
}
}
public/css/less/variables.dark.less
......@@ -63,7 +63,7 @@
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
......
public/test/specs/dashboardSrv-specs.js
define([
'helpers',
'features/dashboard/dashboardSrv'
], function(helpers) {
], function() {
'use strict';
describe('dashboardSrv', function() {
var _dashboardSrv;
var contextSrv = new helpers.ContextSrvStub();
beforeEach(module('grafana.services'));
beforeEach(module(function($provide) {
$provide.value('contextSrv', contextSrv);
}));
beforeEach(inject(function(dashboardSrv) {
_dashboardSrv = dashboardSrv;
......@@ -29,7 +24,7 @@ define([
});
it('should have meta', function() {
expect(model.meta.canSave).to.be(false);
expect(model.meta.canSave).to.be(true);
expect(model.meta.canShare).to.be(true);
});
......
public/test/specs/dynamicDashboardSrv-specs.js 0 → 100644
define([
'features/dashboard/dynamicDashboardSrv',
'features/dashboard/dashboardSrv'
], function() {
'use strict';
function dynamicDashScenario(desc, func) {
describe(desc, function() {
var ctx = {};
ctx.setup = function (setupFunc) {
beforeEach(module('grafana.services'));
beforeEach(inject(function(dynamicDashboardSrv, dashboardSrv) {
ctx.dynamicDashboardSrv = dynamicDashboardSrv;
ctx.dashboardSrv = dashboardSrv;
var model = {
rows: [],
templating: { list: [] }
};
setupFunc(model);
ctx.dash = ctx.dashboardSrv.create(model);
ctx.dynamicDashboardSrv.init(ctx.dash);
ctx.rows = ctx.dash.rows;
}));
};
func(ctx);
});
}
dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
ctx.setup(function(dash) {
dash.rows.push({
panels: [{id: 2, repeat: 'apps'}]
});
dash.templating.list.push({
name: 'apps',
current: {
text: 'se1, se2',
value: ['se1', 'se2']
},
options: [
{text: 'se1', value: 'se1', selected: true},
{text: 'se2', value: 'se2', selected: true},
]
});
});
it('should repeat panel one time', function() {
expect(ctx.rows[0].panels.length).to.be(2);
});
it('should mark panel repeated', function() {
expect(ctx.rows[0].panels[0].repeat).to.be('apps');
expect(ctx.rows[0].panels[1].repeatPanelId).to.be(2);
});
it('should set scopedVars on panels', function() {
expect(ctx.rows[0].panels[0].scopedVars.apps.value).to.be('se1');
expect(ctx.rows[0].panels[1].scopedVars.apps.value).to.be('se2');
});
describe('After a second iteration', function() {
var repeatedPanelAfterIteration1;
beforeEach(function() {
repeatedPanelAfterIteration1 = ctx.rows[0].panels[1];
ctx.rows[0].panels[0].fill = 10;
ctx.dynamicDashboardSrv.update(ctx.dash);
});
it('should have reused same panel instances', function() {
expect(ctx.rows[0].panels[1]).to.be(repeatedPanelAfterIteration1);
});
it('reused panel should copy properties from source', function() {
expect(ctx.rows[0].panels[1].fill).to.be(10);
});
it('should have same panel count', function() {
expect(ctx.rows[0].panels.length).to.be(2);
});
});
describe('After a second iteration and selected values reduced', function() {
beforeEach(function() {
ctx.dash.templating.list[0].options[1].selected = false;
ctx.dynamicDashboardSrv.update(ctx.dash);
});
it('should clean up repeated panel', function() {
expect(ctx.rows[0].panels.length).to.be(1);
});
});
});
dynamicDashScenario('given dashboard with row repeat', function(ctx) {
ctx.setup(function(dash) {
dash.rows.push({
repeat: 'servers',
panels: [{id: 2}]
});
dash.templating.list.push({
name: 'servers',
current: {
text: 'se1, se2',
value: ['se1', 'se2']
},
options: [
{text: 'se1', value: 'se1', selected: true},
{text: 'se2', value: 'se2', selected: true},
]
});
});
it('should repeat row one time', function() {
expect(ctx.rows.length).to.be(2);
});
it('should keep panel ids on first row', function() {
expect(ctx.rows[0].panels[0].id).to.be(2);
});
it('should mark second row as repeated', function() {
expect(ctx.rows[0].repeat).to.be('servers');
});
it('should clear repeat field on repeated row', function() {
expect(ctx.rows[1].repeat).to.be(null);
});
it('should generate a repeartRowId based on repeat row index', function() {
expect(ctx.rows[1].repeatRowId).to.be(1);
});
it('should set scopedVars on row panels', function() {
expect(ctx.rows[0].panels[0].scopedVars.servers.value).to.be('se1');
expect(ctx.rows[1].panels[0].scopedVars.servers.value).to.be('se2');
});
describe('After a second iteration', function() {
var repeatedRowAfterFirstIteration;
beforeEach(function() {
repeatedRowAfterFirstIteration = ctx.rows[1];
ctx.rows[0].height = 500;
ctx.dynamicDashboardSrv.update(ctx.dash);
});
it('should still only have 2 rows', function() {
expect(ctx.rows.length).to.be(2);
});
it.skip('should have updated props from source', function() {
expect(ctx.rows[1].height).to.be(500);
});
it('should reuse row instance', function() {
expect(ctx.rows[1]).to.be(repeatedRowAfterFirstIteration);
});
});
describe('After a second iteration and selected values reduced', function() {
beforeEach(function() {
ctx.dash.templating.list[0].options[1].selected = false;
ctx.dynamicDashboardSrv.update(ctx.dash);
});
it('should remove repeated second row', function() {
expect(ctx.rows.length).to.be(1);
});
});
});
});
public/test/specs/templateSrv-specs.js
......@@ -45,6 +45,34 @@ define([
});
});
describe('render variable to string values', function() {
it('single value should return value', function() {
var result = _templateSrv.renderVariableValue({current: {value: 'test'}});
expect(result).to.be('test');
});
it('multi value and glob format should render glob string', function() {
var result = _templateSrv.renderVariableValue({
multiFormat: 'glob',
current: {
value: ['test','test2'],
}
});
expect(result).to.be('{test,test2}');
});
it('multi value and regex format should render regex string', function() {
var result = _templateSrv.renderVariableValue({
multiFormat: 'regex values',
current: {
value: ['test','test2'],
}
});
expect(result).to.be('(test|test2)');
});
});
describe('can check if variable exists', function() {
beforeEach(function() {
_templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);
......
public/test/specs/unsavedChangesSrv-specs.js 0 → 100644
define([
'features/dashboard/unsavedChangesSrv',
'features/dashboard/dashboardSrv'
], function() {
'use strict';
describe("unsavedChangesSrv", function() {
var _unsavedChangesSrv;
var _dashboardSrv;
var _location;
var _contextSrvStub = { isEditor: true };
var _rootScope;
var tracker;
var dash;
var scope;
beforeEach(module('grafana.services'));
beforeEach(module(function($provide) {
$provide.value('contextSrv', _contextSrvStub);
$provide.value('$window', {});
}));
beforeEach(inject(function(unsavedChangesSrv, $location, $rootScope, dashboardSrv) {
_unsavedChangesSrv = unsavedChangesSrv;
_dashboardSrv = dashboardSrv;
_location = $location;
_rootScope = $rootScope;
}));
beforeEach(function() {
dash = _dashboardSrv.create({
rows: [
{
panels: [{ test: "asd", legend: { } }]
}
]
});
scope = _rootScope.$new();
scope.appEvent = sinon.spy();
scope.onAppEvent = sinon.spy();
tracker = new _unsavedChangesSrv.Tracker(dash, scope);
});
it('No changes should not have changes', function() {
expect(tracker.hasChanges()).to.be(false);
});
it('Simple change should be registered', function() {
dash.property = "google";
expect(tracker.hasChanges()).to.be(true);
});
it('Should ignore a lot of changes', function() {
dash.time = {from: '1h'};
dash.refresh = true;
dash.schemaVersion = 10;
expect(tracker.hasChanges()).to.be(false);
});
it('Should ignore row collapse change', function() {
dash.rows[0].collapse = true;
expect(tracker.hasChanges()).to.be(false);
});
it('Should ignore panel legend changes', function() {
dash.rows[0].panels[0].legend.sortDesc = true;
dash.rows[0].panels[0].legend.sort = "avg";
expect(tracker.hasChanges()).to.be(false);
});
it('Should ignore panel repeats', function() {
dash.rows[0].panels.push({repeatPanelId: 10});
expect(tracker.hasChanges()).to.be(false);
});
it('Should ignore row repeats', function() {
dash.rows.push({repeatRowId: 10});
expect(tracker.hasChanges()).to.be(false);
});
});
});
public/test/test-main.js
......@@ -140,6 +140,8 @@ require([
'specs/dashboardSrv-specs',
'specs/dashboardViewStateSrv-specs',
'specs/soloPanelCtrl-specs',
'specs/dynamicDashboardSrv-specs',
'specs/unsavedChangesSrv-specs',
];
var pluginSpecs = (config.plugins.specs || []).map(function (spec) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment