IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-10 08:03:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(templating): updated templating UI and tab behavior, now edit tab is not visible when not actually editing an existing var, fixes #2679

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-09-08 15:54:08 +02:00
parent 7c25edc7b2
commit 26d8a041ef
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/features/templating/editorCtrl.js
View File

@ -22,7 +22,8 @@ function (angular, _) {
};
$scope.init = function() {
$scope.editor = { index: 0 };
$scope.mode = 'list';
$scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
return !ds.meta.builtIn;
});
@ -30,8 +31,8 @@ function (angular, _) {
$scope.variables = templateSrv.variables;
$scope.reset();
$scope.$watch('editor.index', function(index) {
if ($scope.currentIsNew === false && index === 1) {
$scope.$watch('mode', function(val) {
if (val === 'new') {
$scope.reset();
}
});
@ -75,7 +76,7 @@ function (angular, _) {
$scope.edit = function(variable) {
$scope.current = variable;
$scope.currentIsNew = false;
$scope.editor.index = 2;
$scope.mode = 'edit';
if ($scope.current.datasource === void 0) {
$scope.current.datasource = null;
@ -88,7 +89,7 @@ function (angular, _) {
if ($scope.isValid()) {
$scope.runQuery().then(function() {
$scope.reset();
$scope.editor.index = 0;
$scope.mode = 'list';
});
}
};

31
public/app/features/templating/partials/editor.html
View File

@ -5,10 +5,27 @@
Templating
</div>
<div class="tabs">
<ul class="nav nav-tabs">
<li ng-class="{active: mode === 'list'}">
<a ng-click="mode = 'list';">
Variables
</a>
</li>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div>
<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
<a>
{{current.name}}
</a>
</li>
<li ng-class="{active: mode === 'new'}">
<a ng-click="mode = 'new';">
<i class="fa fa-plus"></i>
New
</a>
</li>
</ul>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
@ -19,7 +36,7 @@
<div class="gf-box-body">
<div ng-if="editor.index == 0">
<div ng-if="mode === 'list'">
<div class="editor-row row">
<div class="span8">
@ -55,7 +72,7 @@
</div>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div ng-if="mode === 'edit' || mode === 'new'">
<div class="editor-row">
<div class="tight-form-section">
<h5>Variable</h5>
@ -278,8 +295,8 @@
</div>
<div class="editor-row" style="margin-top: 20px">
<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div>
</div>