Add group filtering

walien · Feb 23, 2014 · c3ad09d · c3ad09d
1 parent dc286f1
commit c3ad09d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -47,6 +47,9 @@ <h1>Qzui - Job Scheduler</h1>
   <!-- Moment (for date display) -->
   <script src="lib/momentjs/moment.min.js"></script>
 
+  <!-- Lodash -->
+  <script src="lib/lodash/lodash.js"></script>
+
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://code.jquery.com/jquery.js"></script>
   <!-- Include all compiled plugins -->

diff --git a/ui/app/js/controllers.js b/ui/app/js/controllers.js
@@ -5,12 +5,18 @@
 angular.module('myApp.controllers', []).
   controller('JobsCtrl', ['$scope', '$http', 'Jobs', function($scope, $http, Jobs) {
         $scope.jobs = [];
+        $scope.groups = {};
 
         function loadJobs() {
             $http.get('/api/jobs').success(function(jobs) {
+
                 $scope.jobs = jobs;
 
-                angular.forEach($scope.jobs, function(job) {
+                _.each($scope.jobs, function(job) {
+                    $scope.groups[job.group] = true;
+                });
+
+                _.each($scope.jobs, function(job) {
                     $http.get('/api/groups/' + job.group + '/jobs/' + job.name).success(function(j) {
                         job.triggers = j.triggers;
                     });
@@ -23,12 +29,11 @@ angular.module('myApp.controllers', []).
             if (confirm('Are you sure you want to delete this job?')) {
                 $http.delete('/api/groups/' + job.group + '/jobs/' + job.name).success(function() {
                     alert('job deleted');
-
                 });
             }
         };
 
-        $scope.isTriggered = function(trigger) {
+        $scope.isDone = function(trigger) {
             return trigger.when && moment().isAfter(moment(trigger.when));
         };
 

diff --git a/ui/app/js/filters.js b/ui/app/js/filters.js
@@ -3,8 +3,16 @@
 /* Filters */
 
 angular.module('myApp.filters', []).
-  filter('interpolate', ['version', function(version) {
-    return function(text) {
-      return String(text).replace(/\%VERSION\%/mg, version);
-    }
-  }]);
+    filter('jobs', function ($filter) {
+        return function (jobs, text, groups) {
+            if (text && text != "") {
+                return $filter('filter')(jobs, text);
+            } else if (_.isObject(groups)) {
+                return $filter('filter')(jobs, function (job) {
+                    return groups[job.group] === true;
+                });
+            } else {
+                return jobs;
+            }
+        }
+    });
diff --git a/ui/app/partials/jobs.html b/ui/app/partials/jobs.html
@@ -1,21 +1,28 @@
 <p>
 <h2>Now</h2>
 {{ now | date:'dd/MM/yyyy HH:mm:ss'}}
-<h2>Jobs</h2>
 
+<h2>Jobs</h2>
 <div class="pull-right">
     <label>Search : </label>
-    <input class="form-control" ng-model="searchText">
+    <input class="form-control" ng-model="searchText"/>
+</div>
+
+<div class="pull-left">
+    <div ng-repeat="(group, isActive) in groups">
+        <input type="checkbox" ng-model="groups[group]" />
+        <label>{{ group }}</label>
+    </div>
 </div>
 
 <table class="table">
     <thead><tr><th>Group</th><th>Name</th><th>Triggers</th><th>Actions</th></tr></thead>
     <tbody>
-    <tr ng-repeat="job in jobs | filter:searchText">
+    <tr ng-repeat="job in jobs | jobs:searchText:groups">
         <td>{{job.group}}</td><td>{{job.name}}</td>
         <td>
             <ul>
-                <li ng-repeat="trigger in job.triggers" ng-class="{ 'triggered' : isTriggered(trigger) }">
+                <li ng-repeat="trigger in job.triggers" ng-class="{ 'triggered' : isDone(trigger) }">
                     <span ng-if="trigger.when">{{ trigger.when | date:'dd/MM/yyyy HH:mm:ss Z' }}</span>
                     <span ng-if="trigger.cron">{{ trigger.cron }}</span>
                 </li>