Scalability: Add deboucing for several API in the UI, to better handle large job / queue throughput.

Author: jhuckaby

htdocs/js/pages/Events.class.js

@@ -10,6 +10,8 @@ Page.Events = class Events extends Page.PageUtils {
 		// called once at page load
 		this.default_sub = 'list';
 		this.dom_prefix = 'ee';
+		
+		this.handleJobsChangedViewDebounce = debounce( this.handleJobsChangedView.bind(this), 1000 );
 	}
 
 	onActivate(args) {
@@ -1243,19 +1245,26 @@ Page.Events = class Events extends Page.PageUtils {
 		} ); // confirm
 	}
 
+	handleJobsChangedView() {
+		// called via debounce when jobs changed on view page
+		if (!this.active || !this.event) return; // sanity
+		
+		this.renderActiveJobs();
+		this.getQueuedJobs();
+		this.fetchJobHistory();
+		
+		// recompute upcoming: shift() entries off if they happened
+		this.autoExpireUpcomingJobs();
+		this.renderUpcomingJobs();
+	}
+	
 	handleStatusUpdateView(data) {
 		// received status update from server, see if major or minor
 		var self = this;
 		var div = this.div;
 
 		if (data.jobsChanged) {
-			this.renderActiveJobs();
-			this.getQueuedJobs();
-			this.fetchJobHistory();
-			
-			// recompute upcoming: shift() entries off if they happened
-			this.autoExpireUpcomingJobs();
-			this.renderUpcomingJobs();
+			this.handleJobsChangedViewDebounce();
 		}
 		else {
 			// fast update without redrawing entire table

htdocs/js/pages/Job.class.js

@@ -10,6 +10,9 @@ Page.Job = class Job extends Page.PageUtils {
 		// called once at page load
 		this.colors = app.colors;
 		this.header_bar_width = 175;
+		
+		// throttle this API call for dealing with heavy jobs
+		this.getWorkflowQueueSummaryDebounce = debounce( this.getWorkflowQueueSummary.bind(this), 1000 );
 	}
 
 	onActivate(args) {
@@ -1061,7 +1064,7 @@ Page.Job = class Job extends Page.PageUtils {
 		this.decorateWorkflowNodes();
 
 		// we have to fetch queued job information separately
-		if (!this.job.final) this.getWorkflowQueueSummary();
+		if (!this.job.final) this.getWorkflowQueueSummaryDebounce();
 
 		// show orange notification if sus level has increased
 		if (!this.lastSuspendedCount) this.lastSuspendedCount = 0;
@@ -1235,14 +1238,18 @@ Page.Job = class Job extends Page.PageUtils {
 	getWorkflowQueueSummary() {
 		// fetch summary of queued job counts per node
 		var self = this;
+		if (!self.active || !self.job || self.job.final) return; // sanity checks
+		
 		var workflow = this.job.workflow;
 		var $cont = this.wfGetContainer();
+		if (!workflow || !workflow.nodes || !$cont.length) return; // more sanity checks
 
 		app.api.get( 'app/get_workflow_job_summary', { 'workflow.job': this.job.id, state: 'queued' }, function(resp) {
-			if (!self.active || !resp || !resp.nodes || !self.job || self.job.final) return; // sanity checks
+			if (!self.active || !resp || !resp.nodes || !self.job || self.job.final) return; // even more sanity checks
 
 			workflow.nodes.filter( function(node) { return !!node.type.match(/^(event|job)$/); } ).forEach( function(node) {
 				var $div = $cont.find(`#d_wfn_${node.id} > .wf_active_bar > .wf_active_widget.wf_queued`);
+				if (!$div.length) return; // sanity
 				var count = resp.nodes[node.id] || 0;
 
 				if (count) $div.show().html( `<i class="mdi mdi-tray-full"></i><span>${commify(count)}</span>` );