IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring the pulldown (filtering/annotations), changing the ui slightly

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-08-25 15:36:44 +02:00
parent 6969a4121c
commit c634ee81fc
7 changed files with 164 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/controllers/all.js
View File

@ -13,5 +13,5 @@ define([
'./playlistCtrl',
'./inspectCtrl',
'./opentsdbTargetCtrl',
'./console-ctrl',
'./annotationsEditorCtrl',
], function () {});

64
src/app/controllers/annotationsEditorCtrl.js Normal file
View File

@ -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);
};
});
});

3
src/app/controllers/dashboardCtrl.js
View File

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

59
src/app/controllers/submenuCtrl.js
View File

@ -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();
});

8
src/app/panels/annotations/editor.html → src/app/partials/annotations_editor.html
View File

@ -10,16 +10,16 @@
<th width="1%"></th>
<th width="1%"></th>
</thead>
<tr ng-repeat="annotation in panel.annotations">
<tr ng-repeat="annotation in annotations">
<td>
<a ng-click="edit(annotation)" bs-tooltip="'Click to edit'">
<i class="icon-cog"></i>
{{annotation.name}}
</a>
</td>
<td><i ng-click="_.move(panel.annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(panel.annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="panel.annotations = _.without(panel.annotations, annotation)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
</tr>
</table>
</div>

45
src/app/partials/submenu.html
View File

@ -5,29 +5,40 @@
<ul class="grafana-target-controls-left">
<li class="grafana-target-segment">
<i class="icon-remove pointer"></i>
<div class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="icon-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" config-modal="app/partials/templating_editor.html">Edit replacements</a></li>
<li><a class="pointer" config-modal="app/partials/annotations_editor.html">Edit annotations</a></li>
</ul>
</div>
</li>
</ul>
<ul class="grafana-segment-list">
<li ng-repeat="filter in filter.templateParameters" class="grafana-target-segment">
<div class="dropdown">
{{filter.name}} =
<a class="dropdown-toggle" data-toggle="dropdown">
{{filter.current.text}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="option in filter.options">
<a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
</li>
</ul>
</div>
</li>
<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment" ng-class="{'annotation-disabled': !annotation.enable }">
<i class="annotation-color-icon icon-minus"></i>
<a ng-click="hide(annotation)" class="small">{{annotation.name}}</a>
<li ng-repeat-start="param in filter.templateParameters" class="grafana-target-segment template-param-name">
{{param.name}}:
</li>
<li ng-repeat-end>
<div class="dropdown">
<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown">
{{param.current.text}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="option in param.options">
<a ng-click="filterOptionSelected(param, option)">{{option.text}}</a>
</li>
</ul>
</div>
</li>
<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable }">
<i class="annotation-color-icon icon-bolt"></i>
<a ng-click="hide(annotation)">{{annotation.name}}</a>
</li>
</ul>

9
src/css/less/grafana.less
View File

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