Add a pause button to the header when auto-refresh is enabled

This commit is contained in:
Rashid Khan 2015-05-08 15:55:55 -07:00
parent 1055e92ded
commit 3d900ecf18
10 changed files with 44 additions and 24 deletions

View file

@ -118,9 +118,10 @@ define(function (require) {
};
// Listen for refreshInterval changes
$rootScope.$watch('timefilter.refreshInterval', function () {
$rootScope.$watchCollection('timefilter.refreshInterval', function () {
var refreshValue = _.deepGet($rootScope, 'timefilter.refreshInterval.value');
if (_.isNumber(refreshValue)) {
var refreshPause = _.deepGet($rootScope, 'timefilter.refreshInterval.pause');
if (_.isNumber(refreshValue) && !refreshPause) {
self.fetchInterval(refreshValue);
} else {
self.fetchInterval(0);

View file

@ -137,6 +137,7 @@ define(function (require) {
};
$scope.setRefreshInterval = function (interval) {
interval.pause = false;
$scope.interval = interval;
};

View file

@ -94,7 +94,7 @@ define(function (require) {
timefilter.enabled = true;
$scope.timefilter = timefilter;
$scope.$listen(timefilter, 'update', $scope.refresh);
$scope.$listen(timefilter, 'fetch', $scope.refresh);
courier.setRootSearchSource(dash.searchSource);

View file

@ -150,7 +150,7 @@ define(function (require) {
$scope.updateDataSource()
.then(function () {
$scope.$listen(timefilter, 'update', function () {
$scope.$listen(timefilter, 'fetch', function () {
$scope.fetch();
});

View file

@ -21,5 +21,8 @@ define(function (require) {
}
};
$scope.toggleRefresh = function () {
timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
};
};
});

View file

@ -22,23 +22,34 @@
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-timepicker">
<li ng-show="httpActive.length" class="navbar-text hidden-xs">
<div class="spinner"></div>
<ul ng-if="setupComplete" ng-show="timefilter.enabled" class="nav navbar-nav navbar-right navbar-timepicker">
<li>
<a ng-click="toggleTimepicker()"
ng-show="timefilter.refreshInterval.value > 0"
class="navbar-timepicker-auto-refresh-desc">
{{timefilter.refreshInterval.display}}
</a>
</li>
<li ng-if="setupComplete" ng-show="timefilter.enabled" class="navbar-timepicker-container">
<a ng-click="toggleTimepicker()" aria-haspopup="true" aria-expanded="false">
<span ng-show="timefilter.refreshInterval.value > 0" class="navbar-timepicker-auto-refresh-desc">
{{timefilter.refreshInterval.display}}
<i aria-hidden="true" class="fa fa-rotate-right"></i>
</span>
<span class="navbar-timepicker-timefilter-desc">
<pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
<i aria-hidden="true" class="fa fa-clock-o"></i>
</span>
<li>
<a ng-click="toggleRefresh()"
ng-show="timefilter.refreshInterval.value > 0">
<i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
</a>
</li>
<li>
<a ng-click="toggleTimepicker()" aria-haspopup="true" aria-expanded="false" class="navbar-timepicker-time-desc">
<pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
<i aria-hidden="true" class="fa fa-clock-o"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-timepicker" >
<li ng-show="httpActive.length" class="navbar-text hidden-xs">
<div class="spinner"></div>
</li>
</ul>
<!-- /Full navbar -->
</div>

View file

@ -194,7 +194,7 @@ define(function (require) {
// Without this manual emission, we'd miss filters and queries that were on the $state initially
$state.emit('fetch_with_changes');
$scope.$listen(timefilter, 'update', _.bindKey($scope, 'fetch'));
$scope.$listen(timefilter, 'fetch', _.bindKey($scope, 'fetch'));
$scope.$on('ready:vis', function () {
$scope.$emit('application.load');

View file

@ -32,6 +32,7 @@ define(function (require) {
var refreshIntervalDefaults = {
display: 'Off',
pause: false,
section: 0,
value: 0
};
@ -61,6 +62,7 @@ define(function (require) {
'$$timefilter.time.mode',
'$$timefilter.time',
'$$timefilter.refreshInterval',
'$$timefilter.refreshInterval.pause',
'$$timefilter.refreshInterval.value'
], (function () {
var oldTime;
@ -69,6 +71,10 @@ define(function (require) {
return function () {
if (diff(self.time, oldTime) || diff(self.refreshInterval, oldRefreshInterval)) {
self.emit('update');
if (!self.refreshInterval.pause) {
self.emit('fetch');
}
}
oldTime = _.clone(self.time);

View file

@ -258,12 +258,9 @@ notifications {
}
.navbar-timepicker {
&-auto-refresh-desc {
margin-right: 20px;
}
&-timefilter-desc {
> li > a {
padding-left: 7px !important;
padding-right: 7px !important;
}
.fa {

View file

@ -13,6 +13,7 @@ define(function (require) {
valueOf(rangeA.to) !== valueOf(rangeB.to)
|| valueOf(rangeA.from) !== valueOf(rangeB.from)
|| valueOf(rangeA.value) !== valueOf(rangeB.value)
|| valueOf(rangeA.pause) !== valueOf(rangeB.pause)
) {
return true;
}