Adds workflow actions "Replay" and "Jump to end"

bin/ambrose-demo

@@ -23,7 +23,7 @@ cd "$WEBROOT" || die "Failed to cd to WEBROOT '$WEBROOT'"
 
 log "Starting web server on port '$PORT'"
 log "Browse to the following URLs to see Ambrose demo:"
-log "  http://localhost:$PORT/workflow.html?localdata=true"
+log "  http://localhost:$PORT/workflow.html?localdata=true&replay=true"
 log "Hit ctrl-c to stop the web server"
 
 exec python -m SimpleHTTPServer "$PORT"

common/src/main/resources/web/js/modules/ambrose/workflow.js

@@ -197,20 +197,21 @@ define(['lib/jquery', 'lib/uri', './core', './client', './graph'], function(
      * Starts event polling if not already started.
      *
      * @param frequency poll events at this frequency (ms). Defaults to 1000.
-     * @param maxEvents max number of events to process on each request. Defaults to 1.
+     * @param maxEvents max number of events to process on each request. Defaults to -1 (no limit).
      * @return this.
      */
     startEventPolling: function(frequency, maxEvents) {
-      if (this.eventPollingIntervalId != null) return;
+      var self = this;
+      if (self.eventPollingIntervalId != null) return;
       if (frequency == null) frequency = 1000;
-      if (maxEvents == null) maxEvents = 1;
+      if (maxEvents == null) maxEvents = -1;
       console.info('Starting event polling');
-      this.clientFailureCount = 0;
-      var self = this;
-      this.eventPollingIntervalId = setInterval(function() {
-        self.pollEvents(maxEvents);
-      }, frequency);
-      this.trigger('eventPollingStarted');
+      self.clientFailureCount = 0;
+      var pollEvents = function() { self.pollEvents(maxEvents); };
+      self.eventPollingIntervalId = setInterval(pollEvents, frequency);
+      self.trigger('eventPollingStarted');
+      // poll once right now to kick things off
+      pollEvents();
       return this;
     },
 
@@ -236,11 +237,13 @@ define(['lib/jquery', 'lib/uri', './core', './client', './graph'], function(
      * sequentially, triggering events in set {'workflowProgress', 'jobStarted', 'jobProgress',
      * 'jobComplete', 'jobFailed'}.
      *
-     * @param maxEvents max number of events to process. Defaults to 1.
+     * @param maxEvents max number of events to process. Defaults to -1.
      * @return Promise configured with error and success callbacks which update state of this
      * Workflow and trigger events.
      */
     pollEvents: function(maxEvents) {
+      if (maxEvents == null) maxEvents = -1;
+
       // stop polling if all jobs are done
       if (this.isComplete()) {
         console.info('Workflow complete');
@@ -249,9 +252,6 @@ define(['lib/jquery', 'lib/uri', './core', './client', './graph'], function(
         return;
       }
 
-      // TODO Integer.MAX_VALUE
-      if (maxEvents == null) maxEvents = 999999;
-
       // error handler
       var self = this;
       var handleError = function(textStatus, errorThrown) {
@@ -287,7 +287,7 @@ define(['lib/jquery', 'lib/uri', './core', './client', './graph'], function(
           if (id <= self.lastEventId) return;
 
           // don't process more than specified number of events
-          if (eventCount > maxEvents) return;
+          if (maxEvents > 0 && eventCount >= maxEvents) return;
 
           // check for workflow event
           if (type == 'WORKFLOW_PROGRESS') {
@@ -464,10 +464,31 @@ define(['lib/jquery', 'lib/uri', './core', './client', './graph'], function(
       if (job === prev) job = null;
       else if (job != null) job.selected = true;
       this.current.selected = job;
-      //console.debug('Job selected:', job, prev);
       this.trigger('jobSelected', [job, prev]);
       return job;
     },
+
+    /**
+     * Reload jobs and poll for events at limited rate.
+     */
+    replay: function() {
+      var self = this;
+      self.stopEventPolling();
+      self.loadJobs().done(function() {
+        self.startEventPolling(1000, 1);
+      });
+    },
+
+    /**
+     * Reload jobs and poll for as many events as possible.
+     */
+    jumpToEnd: function() {
+      var self = this;
+      self.stopEventPolling();
+      self.loadJobs().done(function() {
+        self.startEventPolling(1000, -1);
+      });
+    },
   };
 
   // bind prototype to ctor

common/src/main/resources/web/js/workflow.js

@@ -1,13 +1,36 @@
 requirejs.config(REQUIREJS_CONFIG);
 
-require(['lib/jquery', 'ambrose', 'lib/bootstrap'], function($, Ambrose) {
+require([
+  'lib/jquery', 'lib/uri', 'ambrose', 'lib/bootstrap'
+], function($, URI, Ambrose) {
   $(document).ready(function() {
+    // parse uri params
+    var uri = new URI(window.location.href);
+    var params = uri.search(true);
+
+    // initialize workflow and views
     console.info('Creating default workflow');
     var workflow = Ambrose.Workflow();
     var progressBar = Ambrose.View.ProgressBar(workflow, $('#ambrose-view-progress-bar'));
     var graph = Ambrose.View.Graph(workflow, $('#ambrose-view-graph'));
     var table = Ambrose.View.Table(workflow, $('#ambrose-view-table'));
-    workflow.loadJobs();
-    workflow.startEventPolling();
+
+    // install workflow actions
+    var workflowDropdown = $('#workflow-dropdown');
+    var playbackAction = $('<a href="#">')
+      .appendTo($('<li>').appendTo(workflowDropdown));
+
+    // load jobs and poll for events
+    if (params.replay) {
+      delete params.replay;
+      uri.search(params);
+      playbackAction.text('Jump to end').attr('href', uri.toString());
+      workflow.replay();
+    } else {
+      params.replay = true;
+      uri.search(params);
+      playbackAction.text('Replay').attr('href', uri.toString());
+      workflow.jumpToEnd();
+    }
   });
 });

common/src/main/resources/web/workflow.html

@@ -37,6 +37,15 @@
           <div class="nav-collapse collapse">
             <ul class="nav">
               <li><a href="dashboard.html">Dashboard</a></li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                  Workflow
+                  <b class="caret"></b>
+                </a>
+                <ul id="workflow-dropdown" class="dropdown-menu">
+                  <!-- workflow actions inserted here -->
+                </ul>
+              </li>
             </ul>
             <ul class="nav pull-right">
               <li><a target="_blank" href="https://github.com/twitter/ambrose">About</a></li>