Add filter bar for event log view

This commit is contained in:
Johannes Zellner
2016-05-06 17:18:47 +02:00
parent 4c7dc5056d
commit 54c9bb7409
4 changed files with 57 additions and 11 deletions

View File

@@ -380,9 +380,11 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
}).error(defaultErrorHandler(callback));
};
Client.prototype.getEventLogs = function (page, perPage, callback) {
Client.prototype.getEventLogs = function (action, search, page, perPage, callback) {
var config = {
params: {
action: action,
search: search,
page: page,
per_page: perPage
}

View File

@@ -1029,3 +1029,15 @@ $graphs-success-alt: lighten(#27CE65, 20%);
}
}
}
.filter {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 2px;
.form-control {
display: inline-block;
width: 200px;
}
}

View File

@@ -2,17 +2,25 @@
<br/>
<div class="row">
<div class="col-md-8 col-md-offset-1">
<h1>Activity Log</h1>
</div>
<div class="pagination col-md-offset-1">
<button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="busy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
<button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="busy || pageItems > eventLogs.length">next <i class="fa fa-angle-double-right"></i></button>
<div class="col-md-10 col-md-offset-1">
<h1>Activity Log</h1>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="filter">
<input type="text" class="form-control" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
<select class="form-control" ng-model="action" ng-options="a.name for a in actions" ng-change="updateFilter()">
<option value="">-- all actions --</option>
</select>
</div>
<div class="pagination pull-right">
<button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="busy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
<button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="busy || pageItems > eventLogs.length">next <i class="fa fa-angle-double-right"></i></button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">

View File

@@ -5,14 +5,34 @@ angular.module('Application').controller('ActivityController', ['$scope', '$loca
$scope.eventLogs = [ ];
$scope.actions = [
{ name: 'cloudron.activate', value: 'cloudron.activate' },
{ name: 'app.configure', value: 'app.configure' },
{ name: 'app.install', value: 'app.install' },
{ name: 'app.restore', value: 'app.restore' },
{ name: 'app.uninstall', value: 'app.uninstall' },
{ name: 'app.update', value: 'app.update' },
{ name: 'backup.finish', value: 'backup.finish' },
{ name: 'backup.start', value: 'backup.start' },
{ name: 'certificate.renew', value: 'certificate.renew' },
{ name: 'settings.climode', value: 'settings.climode' },
{ name: 'cloudron.start', value: 'cloudron.start' },
{ name: 'cloudron.update', value: 'cloudron.update' },
{ name: 'user.add', value: 'user.add' },
{ name: 'user.login', value: 'user.login' },
{ name: 'user.remove', value: 'user.remove' },
{ name: 'user.update', value: 'user.update' }
];
$scope.currentPage = 1;
$scope.pageItems = 20;
$scope.action = '';
$scope.search = '';
function fetchEventLogs() {
$scope.busy = true;
Client.getEventLogs($scope.currentPage, $scope.pageItems, function (error, eventLogs) {
Client.getEventLogs($scope.action ? $scope.action.value : null, $scope.search || null, $scope.currentPage, $scope.pageItems, function (error, eventLogs) {
$scope.busy = false;
if (error) return console.error(error);
@@ -36,4 +56,8 @@ angular.module('Application').controller('ActivityController', ['$scope', '$loca
fetchEventLogs();
};
$scope.updateFilter = function () {
fetchEventLogs();
};
}]);