Update Scheduled and Pending jobs stats in realtime

wa0x6e · Apr 29, 2013 · 75e693d · 75e693d
1 parent 3f0d2a7
commit 75e693d
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 17 deletions.
diff --git a/src/ResqueBoard/View/jobs_view_pending.ctp b/src/ResqueBoard/View/jobs_view_pending.ctp
@@ -138,26 +138,26 @@
 
 	<?php
 		$totalJobs = 0;
-		foreach ($queues as $queueName => $stats) {
-			if ($queueName === ResqueScheduler\ResqueScheduler::QUEUE_NAME) {
+		foreach ($queues as $queue) {
+			if ($queue['name'] === ResqueScheduler\ResqueScheduler::QUEUE_NAME) {
 				continue;
 			}
-			$totalJobs += $stats['jobs'];
+			$totalJobs += $queue['stats']['pendingjobs'];
 		}
 	?>
 
-	<div class="sidebar">
+	<div class="sidebar" ng-controller="PendingJobsCtrl">
 		<div class="page-header">
 			<h3>Quick Stats <i class="icon-bar-chart"></i></h3>
 		</div>
 
-		<ul class="stats unstyled clearfix">
+		<ul class="stats unstyled clearfix" ng-cloak>
 			<li class="<?php
 				if (!isset($pagination->uri['queue']) || $pagination->uri['queue'] === '') {
 					echo ' active';
 				}
 					 ?>"><a href="/jobs/pending">
-				<strong><?php echo number_format($totalJobs); ?></strong>
+				<strong ng-init="stats.total='<?php echo $totalJobs; ?>'">{{stats.total}}</strong>
 				Total <b>pending</b> jobs</a>
 			</li>
 		</ul>
@@ -166,19 +166,19 @@
 			<h3>Queues Stats</h3>
 		</div>
 
-		<ul class="stats unstyled clearfix">
-			<?php foreach ($queues as $queueName => $stats) { ?>
-				<li class="<?php if (empty($stats['workers'])) {
+		<ul class="stats unstyled clearfix" ng-cloak>
+			<?php foreach ($queues as $queue) { ?>
+				<li class="<?php if (empty($queue['stats']['workerscount'])) {
 					echo 'error';
 				}
-				if (isset($pagination->uri['queue']) && $pagination->uri['queue'] === $queueName) {
+				if (isset($pagination->uri['queue']) && $pagination->uri['queue'] === $queue['name']) {
 					echo ' active';
 				}
 					 ?>">
-					<a href="/https/github.com/jobs/pending?queue=<?php echo $queueName; ?>" title="View all pending jobs from <?php echo $queueName ?>">
-						<strong>
-							<?php echo number_format($stats['jobs']); ?>
-						</strong> from <b><?php echo $queueName; ?></b>
+					<a href="/https/github.com/jobs/pending?queue=<?php echo $queue['name']; ?>" title="View all pending jobs from <?php echo $queue['name'] ?>">
+						<strong ng-init="stats.queues.<?php echo $queue['name']; ?>='<?php echo $queue['stats']['pendingjobs']; ?>'">
+							{{stats.queues.<?php echo $queue['name']; ?>}}
+						</strong> from <b><?php echo $queue['name']; ?></b>
 					</a>
 				</li>
 			<?php } ?>

diff --git a/src/ResqueBoard/webroot/js/app.js b/src/ResqueBoard/webroot/js/app.js
@@ -1541,7 +1541,7 @@ ResqueBoard.factory("workerResumeListener", function($rootScope) {
 });
 
 
-function JobsCtrl($scope, jobsProcessedCounter, jobsFailedCounter) {
+function JobsCtrl($scope, $timeout, $http, jobsProcessedCounter, jobsFailedCounter) {
 	$scope.stats = {
 		"processed" : 0,
 		"failed" : 0,
@@ -1556,6 +1556,23 @@ function JobsCtrl($scope, jobsProcessedCounter, jobsFailedCounter) {
 	jobsFailedCounter.onmessage(function(message) {
 		$scope.stats.failed++;
 	});
+
+	var refreshRate = 5000;
+
+	var updateStats = function() {
+
+		$http({method: "GET", url: "/api/stats?fields=scheduled,pending"}).
+			success(function(data, status, headers, config) {
+				$scope.stats.scheduled = data.scheduled.total;
+				$scope.stats.pending = data.pending.total;
+			}).
+			error(function(data, status, headers, config) {
+		});
+
+		$timeout(updateStats, refreshRate);
+	};
+
+	$timeout(updateStats, refreshRate);
 }
 
 function QueuesCtrl($scope, jobsProcessedCounter, $http, workerStartListener, workerStopListener, $timeout) {
@@ -1864,12 +1881,18 @@ function LatestJobsGraphCtrl($scope, $http) {
 	};
 }
 
-function ScheduledJobsCtrl($scope, $http) {
+function ScheduledJobsCtrl($scope, $http, $timeout) {
 
 	$scope.jobs = [];
 	$scope.loading = false;
 	$scope.date = false;
 
+	$scope.stats = {
+		"total" : 0,
+		"future": 0,
+		"past" : 0
+	};
+
 	var cal = new CalHeatMap();
 	cal.init({
 		id : "scheduled-jobs-graph",
@@ -1909,4 +1932,43 @@ function ScheduledJobsCtrl($scope, $http) {
 		$scope.date = false;
 		$scope.jobs = [];
 	};
+
+	var refreshRate = 5000;
+
+	var updateStats = function() {
+
+		$http({method: "GET", url: "/api/stats?fields=scheduled_full"}).
+			success(function(data, status, headers, config) {
+				$scope.stats = data.scheduled;
+			}).
+			error(function(data, status, headers, config) {
+		});
+
+		$timeout(updateStats, refreshRate);
+	};
+
+	$timeout(updateStats, refreshRate);
+}
+
+function PendingJobsCtrl($scope, $http, $timeout) {
+
+	$scope.stats = {
+		"total" : 0
+	};
+
+	var refreshRate = 5000;
+
+	var updateStats = function() {
+
+		$http({method: "GET", url: "/api/stats?fields=pending_full&queues=" + Object.keys($scope.stats.queues).join(",")}).
+			success(function(data, status, headers, config) {
+				$scope.stats = data.pending;
+			}).
+			error(function(data, status, headers, config) {
+		});
+
+		$timeout(updateStats, refreshRate);
+	};
+
+	$timeout(updateStats, refreshRate);
 }