date range filtering

src/app/organization/organizationEventsController.js

@@ -6,10 +6,20 @@
         $scope.events = [];
         $scope.orgUsers = [];
         $scope.loading = true;
+
+        var d = new Date();
+        $scope.filterEnd = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59);
+        d.setDate(d.getDate() - 30);
+        $scope.filterStart = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0);
+
         $scope.$on('$viewContentLoaded', function () {
             load();
         });
 
+        $scope.refresh = function () {
+            loadEvents();
+        };
+
         var i = 0,
             orgUsersUserIdDict = {},
             orgUsersIdDict = {};
@@ -33,8 +43,32 @@
                 }
 
                 $scope.orgUsers = users;
-                return apiService.events.listOrganization({ orgId: $state.params.orgId }).$promise;
-            }).then(function (list) {
+
+                return loadEvents();
+            });
+        }
+
+        function loadEvents() {
+            $scope.loading = true;
+
+            var start = null, end = null;
+            try {
+                var format = 'yyyy-MM-ddTHH:mm';
+                start = $filter('date')($scope.filterStart, format + 'Z', 'UTC');
+                end = $filter('date')($scope.filterEnd, format + ':59.999Z', 'UTC');
+            } catch (e) { }
+
+            if (!start || !end || end < start) {
+                $scope.loading = false;
+                alert('Invalid date range.');
+                return;
+            }
+
+            return apiService.events.listOrganization({
+                orgId: $state.params.orgId,
+                start: start,
+                end: end
+            }).$promise.then(function (list) {
                 var events = [];
                 for (i = 0; i < list.Data.length; i++) {
                     var userId = list.Data[i].ActingUserId || list.Data[i].UserId;

src/app/organization/views/organizationEvents.html

@@ -8,8 +8,17 @@
     <div class="box">
         <div class="box-header with-border">
             &nbsp;
-            <div class="box-filters hidden-xs">
-                Filters
+            <div class="box-filters hidden-xs hidden-sm">
+                <input type="datetime-local" ng-model="filterStart" required
+                       class="form-control input-sm" style="width:initial;" />
+                -
+                <input type="datetime-local" ng-model="filterEnd" required
+                       class="form-control input-sm" style="width:initial;" />
+            </div>
+            <div class="box-tools">
+                <button type="button" class="btn btn-primary btn-sm btn-flat" ng-click="refresh()">
+                    <i class="fa fa-fw fa-refresh" ng-class="{'fa-spin': loading}"></i> Refresh
+                </button>
             </div>
         </div>
         <div class="box-body" ng-class="{'no-padding': filteredEvents.length}">
@@ -17,7 +26,7 @@
                 Loading...
             </div>
             <div ng-show="!loading && !events.length">
-                <p>There are no events yet for your organization.</p>
+                <p>There are no events to list.</p>
             </div>
             <div class="table-responsive" ng-show="events.length">
                 <table class="table table-striped table-hover">
@@ -25,7 +34,7 @@
                         <tr>
                             <th>Timestamp</th>
                             <th>User</th>
-                            <th>App</th>
+                            <th><span class="sr-only">App</span></th>
                             <th>Event</th>
                         </tr>
                     </thead>

src/app/views/organizationLayout.html

@@ -97,7 +97,7 @@
             </li>
             <li ng-class="{active: $state.is('backend.org.events')}" ng-if="orgProfile.useEvents">
                 <a ui-sref="backend.org.events({orgId: params.orgId})">
-                    <i class="fa fa-file-text-o fa-fw"></i> <span>Audit Logs</span>
+                    <i class="fa fa-file-text-o fa-fw"></i> <span>Event Logs</span>
                 </a>
             </li>
             <li ng-class="{active: $state.is('backend.org.billing')}" ng-if="isOrgOwner(orgProfile)">

src/less/vault.less

@@ -524,6 +524,10 @@ form .btn .loading-icon {
     position: absolute;
     left: 10px;
     top: 5px;
+
+    input {
+        display: inline;
+    }
 }
 
 .box-body p:last-child {