public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the ability to toggle filters

Browse Source
This commit is contained in:
Rashid Khan
2013-07-15 10:52:57 -07:00
parent 803f24cb4c
commit 1d4af12f57
7 changed files with 151 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panels/filtering/module.html
+17 -8
View File
@@ -1,7 +1,11 @@
<kibana-panel ng-controller='filtering' ng-init="init()">
<style>
.filtering-container {
margin-top: 3px;
}
.filter-panel-filter {
display:inline-block;
vertical-align: top;
margin-left: 10px;
width: 200px;
padding: 5px;
@@ -17,20 +21,25 @@
.filter-should {
border-bottom: #EF843C 3px solid;
}
.filter-remove {
.filter-action {
float:right;
margin-bottom: 0px !important;
margin-left: 3px;
}
</style>
<div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
<div class="filter-{{filterSrv.list[id].mandate}}">
{{filterSrv.list[id].type}} ({{filterSrv.list[id].mandate}})
<i class="filter-remove pointer icon-remove" ng-click="remove(id)"></i>
<div class='filtering-container'>
<div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
<div class="filter-{{filterSrv.list[id].mandate}}">
<strong>{{filterSrv.list[id].type}}</strong> {{filterSrv.list[id].mandate}}
<i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(id)"></i>
<i class="filter-action pointer" ng-class="{'icon-check': filterSrv.list[id].active,'icon-check-empty': !filterSrv.list[id].active}" bs-tooltip="'Toggle'" ng-click="toggle(id)"></i>
</div>
<ul class="unstyled">
<li ng-repeat="(key,value) in filterSrv.list[id]" ng-show="show_key(key)"><strong>{{key}}</strong> : {{value}}</li>
</ul>
</div>
<ul class="unstyled">
<li ng-repeat="(key,value) in stripped(filterSrv.list[id])"><strong>{{key}}</strong> : {{value}}</li>
</ul>
</div>
</kibana-panel>
panels/filtering/module.js
+7 -3
View File
@@ -26,6 +26,11 @@ angular.module('kibana.filtering', [])
dashboard.refresh();
}
$scope.toggle = function(id) {
filterSrv.list[id].active = !filterSrv.list[id].active;
dashboard.refresh();
}
$scope.refresh = function(query) {
$rootScope.$broadcast('refresh')
}
@@ -34,9 +39,8 @@ angular.module('kibana.filtering', [])
$rootScope.$broadcast('render')
}
$scope.stripped = function(filter) {
var filter = _.omit(filter,'type','id','alias','mandate')
return filter
$scope.show_key = function(key) {
return !_.contains(['type','id','alias','mandate','active'],key)
}
});
panels/timepicker/module.html
+13 -3
View File
@@ -1,5 +1,5 @@
<kibana-panel ng-controller='timepicker' ng-init="init()">
<div class="row-fluid" ng-switch="panel.mode">
<div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
<div ng-switch-when="absolute">
<div class="span5">
<form class="nomargin">
@@ -47,17 +47,27 @@
</div>
</div>
</div>
<div class="row-fluid" ng-show="filterSrv.idsByType('time').length < 1">
<div>
<div class="span11">
<h4>No time filter present</h4>
</div>
</div>
</div>
<div class="row-fluid nomargin">
<div class="span12 small">
<div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
<a ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
<a ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
<a ng-click="set_mode('since')" ng-class="{'strong': (panel.mode == 'since')}">Since</a>
<span ng-hide="panel.mode == 'absolute'"> |
<span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
<input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
<span ng-class="{'ng-cloak': !panel.refresh.enable}">
every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
</span>
</span>
</div>
<div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
<a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
</div>
</div>
</kibana-panel>
panels/timepicker/module.js
+18 -11
View File
@@ -44,7 +44,7 @@ angular.module('kibana.timepicker', [])
// Private refresh interval that we can use for view display without causing
// unnecessary refreshes during changes
$scope.refresh_interval = $scope.panel.refresh.interval
$scope.filterSrv = filterSrv;
// Init a private time object with Date() objects depending on mode
switch($scope.panel.mode) {
@@ -68,7 +68,12 @@ angular.module('kibana.timepicker', [])
break;
}
$scope.time.field = $scope.panel.timefield;
$scope.time_apply();
// These 3 statements basicly do everything time_apply() does
set_timepicker($scope.time.from,$scope.time.to)
update_panel()
set_time_filter($scope.time)
dashboard.refresh();
// Start refresh timer if enabled
if ($scope.panel.refresh.enable)
@@ -76,17 +81,19 @@ angular.module('kibana.timepicker', [])
// In case some other panel broadcasts a time, set us to an absolute range
$scope.$on('refresh', function() {
var time = filterSrv.timeRange('min')
if(filterSrv.idsByType('time').length > 0) {
var time = filterSrv.timeRange('min')
if($scope.time.from.diff(moment.utc(time.from)) != 0
|| $scope.time.to.diff(moment.utc(time.to)) != 0)
{
$scope.panel.mode = 'absolute';
if($scope.time.from.diff(moment.utc(time.from)) != 0
|| $scope.time.to.diff(moment.utc(time.to)) != 0)
{
$scope.set_mode('absolute');
// These 3 statements basicly do everything time_apply() does
set_timepicker(moment(time.from),moment(time.to))
$scope.time = $scope.time_calc();
update_panel()
// These 3 statements basicly do everything time_apply() does
set_timepicker(moment(time.from),moment(time.to))
$scope.time = $scope.time_calc();
update_panel()
}
}
});
}