[ARVADOS] updated: ab874e9d6cd3313ce827dc4d4d574913575ad095

git at public.curoverse.com git at public.curoverse.com
Tue Oct 28 15:36:35 EDT 2014


Summary of changes:
 .../app/assets/javascripts/pipeline_instances.js   |  16 +--
 apps/workbench/app/assets/javascripts/tab_panes.js | 111 +++++++++++++--------
 .../views/pipeline_instances/_show_log.html.erb    |   2 +-
 apps/workbench/test/test_helper.rb                 |   7 +-
 4 files changed, 85 insertions(+), 51 deletions(-)

       via  ab874e9d6cd3313ce827dc4d4d574913575ad095 (commit)
      from  d8c4d51e70a5141447f6259792ffd41bcd2c8209 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit ab874e9d6cd3313ce827dc4d4d574913575ad095
Author: Peter Amstutz <peter.amstutz at curoverse.com>
Date:   Tue Oct 28 15:36:21 2014 -0400

    4084: Split out behavior of updating job subscribe list to
    arv-log-event-subscribe-to-pipeline-job-uuids.  Fix arv:pane:reload
    setTimeout() that was missing a timeout.  Rename etarget -> $anchor.  Refactor
    removeClass calls.  Add comments explaining tab reloading states better.

diff --git a/apps/workbench/app/assets/javascripts/pipeline_instances.js b/apps/workbench/app/assets/javascripts/pipeline_instances.js
index b00f547..78fd195 100644
--- a/apps/workbench/app/assets/javascripts/pipeline_instances.js
+++ b/apps/workbench/app/assets/javascripts/pipeline_instances.js
@@ -55,12 +55,8 @@ $(document).on('arv-log-event', '.arv-refresh-on-state-change', function(event,
     }
 });
 
-$(document).on('arv-log-event', '.arv-log-event-handler-append-logs', function(event, eventData){
-    var wasatbottom = ($(this).scrollTop() + $(this).height() >= this.scrollHeight);
-
-    if (eventData.event_type == "stderr" || eventData.event_type == "stdout") {
-        $(this).append(eventData.properties.text);
-    } else if (eventData.event_type == "create" || eventData.event_type == "update") {
+$(document).on('arv-log-event', '.arv-log-event-subscribe-to-pipeline-job-uuids', function(event, eventData){
+    if (eventData.event_type == "create" || eventData.event_type == "update") {
         if (eventData.object_kind == 'arvados#pipelineInstance') {
             var objs = "";
             var components = eventData.properties.new_attributes.components;
@@ -72,6 +68,14 @@ $(document).on('arv-log-event', '.arv-log-event-handler-append-logs', function(e
             $(event.target).attr("data-object-uuids", eventData.object_uuid + objs);
         }
     }
+});
+
+$(document).on('arv-log-event', '.arv-log-event-handler-append-logs', function(event, eventData){
+    var wasatbottom = ($(this).scrollTop() + $(this).height() >= this.scrollHeight);
+
+    if (eventData.event_type == "stderr" || eventData.event_type == "stdout") {
+        $(this).append(eventData.properties.text);
+    }
 
     if (wasatbottom) {
         this.scrollTop = this.scrollHeight;
diff --git a/apps/workbench/app/assets/javascripts/tab_panes.js b/apps/workbench/app/assets/javascripts/tab_panes.js
index b856663..0430ca9 100644
--- a/apps/workbench/app/assets/javascripts/tab_panes.js
+++ b/apps/workbench/app/assets/javascripts/tab_panes.js
@@ -2,6 +2,10 @@
 
 // Fire when a tab is selected/clicked.
 $(document).on('shown.bs.tab', '[data-toggle="tab"]', function(event) {
+    // When we switch tabs, remove "active" from any refreshable panes within
+    // the previous tab content so they don't continue to refresh unnecessarily, and
+    // add "active" to any refreshable panes under the newly shown tab content.
+
     var tgt = $($(event.relatedTarget).attr('href'));
     $(".pane-anchor", tgt).each(function (i, e) {
         var a = $($(e).attr('href'));
@@ -14,56 +18,85 @@ $(document).on('shown.bs.tab', '[data-toggle="tab"]', function(event) {
         a.addClass("active");
     });
 
+    // Now trigger reload of the newly shown tab pane.
     $(event.target).trigger('arv:pane:reload');
 });
 
 // Ask a refreshable pane to reload via ajax.
 // Target of this event is the anchoring element that manages the pane.
-// Panes can be in one of four states: not loaded (no state classes), pane-loading, pane-loading+pane-stale, pane-loaded
+//
+// Panes can be in one of three primary states, managed by setting CSS classes
+// on the object: not loaded (no pane-* state classes), pane-loading, pane-loaded
+//
+// not loaded means the pane needs to be loaded when the pane becomes active
+//
+// pane-loading means there is a current AJAX call outstanding to reload the pane
+//
+// pane-loaded means the pane is believe to be up to date
+//
+// There are two additional states: pane-stale and pane-reload-pending
+//
+// pane-stale indicates a pane that is already loading has been invalidated and
+// should schedule a reload immediately when the current load completes.  (This
+// happens if there are clusters of events, where the reload is trigged by the
+// first event, but we actually want to display the state after the final event
+// has been processed.)
+//
+// pane-reload-pending indicates a reload is scheduled, to suppress
+// scheduling any additional reloads.
 $(document).on('arv:pane:reload', function(e) {
     e.stopPropagation();
 
-    var etarget = $(e.target);
+    // '$anchor' is the event target, which is a .pane-anchor or a bootstrap
+    // tab anchor.  This is the element that stores the state of the pane.  The
+    // actual element that will contain the content is pointed to in the 'href'
+    // attribute of etarget.
+    var $anchor = $(e.target);
 
-    if (etarget.hasClass('pane-loading')) {
+    if ($anchor.hasClass('pane-loading')) {
         // Already loading, mark stale to schedule a reload after this one.
-        //console.log(e.target.id + " stale");
-        etarget.addClass('pane-stale');
+        $anchor.addClass('pane-stale');
         return;
     }
 
-    if (etarget.hasClass('pane-no-auto-reload') && etarget.hasClass('pane-loaded')) {
+    if ($anchor.hasClass('pane-no-auto-reload') && $anchor.hasClass('pane-loaded')) {
         // Have to explicitly remove pane-loaded if we want it to reload.
         return;
     }
 
-    var throttle = etarget.attr('data-load-throttle');
+    var throttle = $anchor.attr('data-load-throttle');
     if (!throttle) {
         throttle = 3000;
     }
     var now = (new Date()).getTime();
-    var loaded_at = etarget.attr('data-loaded-at');
-    if (loaded_at && (now - loaded_at) < throttle) {
-        setTimeout(function() {
-            etarget.trigger('arv:pane:reload');
-        });
+    var loaded_at = $anchor.attr('data-loaded-at');
+    var since_last_load = now - loaded_at;
+    if (loaded_at && (since_last_load < throttle)) {
+        if (!$anchor.hasClass('pane-reload-pending')) {
+            $anchor.addClass('pane-reload-pending');
+            setTimeout((function() {
+                $anchor.trigger('arv:pane:reload');
+            }), throttle - since_last_load);
+        }
         return;
     }
 
-    var $pane = $(etarget.attr('href'));
-    if ($pane.hasClass('active')) {
-        //console.log(e.target.id + " loading");
+    // We know this doesn't have 'pane-loading' because we tested for it above
+    $anchor.removeClass('pane-reload-pending');
+    $anchor.removeClass('pane-loaded');
+    $anchor.removeClass('pane-stale');
 
-        etarget.removeClass('pane-loaded');
-        etarget.removeClass('pane-stale');
-        etarget.addClass('pane-loading');
+    // $pane is the actual content area that is going to be updated.
+    var $pane = $($anchor.attr('href'));
+    if ($pane.hasClass('active')) {
+        $anchor.addClass('pane-loading');
 
-        var content_url = etarget.attr('data-pane-content-url');
+        var content_url = $anchor.attr('data-pane-content-url');
         $.ajax(content_url, {dataType: 'html', type: 'GET', context: $pane}).
             done(function(data, status, jqxhr) {
                 // Preserve collapsed state
                 var collapsable = {};
-                $(".collapse", $pane).each(function(i, c) {
+                $(".collapse", $(this)).each(function(i, c) {
                     collapsable[c.id] = $(c).hasClass('in');
                 });
                 var tmp = $(data);
@@ -74,16 +107,14 @@ $(document).on('arv:pane:reload', function(e) {
                         $(c).removeClass('in');
                     }
                 });
-                $pane.html(tmp);
-                etarget.removeClass('pane-loading');
-                etarget.addClass('pane-loaded');
-                etarget.attr('data-loaded-at', (new Date()).getTime());
-                $pane.trigger('arv:pane:loaded');
-
-                //console.log(e.target.id + " loaded");
-
-                if (etarget.hasClass('pane-stale')) {
-                    etarget.trigger('arv:pane:reload');
+                $(this).html(tmp);
+                $anchor.removeClass('pane-loading');
+                $anchor.addClass('pane-loaded');
+                $anchor.attr('data-loaded-at', (new Date()).getTime());
+                $(this).trigger('arv:pane:loaded');
+
+                if ($anchor.hasClass('pane-stale')) {
+                    $anchor.trigger('arv:pane:reload');
                 }
             }).fail(function(jqxhr, status, error) {
                 var errhtml;
@@ -102,35 +133,29 @@ $(document).on('arv:pane:reload', function(e) {
                         replace(/</g, '<').
                         replace(/>/g, '>');
                 }
-                $pane.html('<div><p>' +
+                $(this).html('<div><p>' +
                         '<a href="#" class="btn btn-primary tab_reload">' +
                         '<i class="fa fa-fw fa-refresh"></i> ' +
-                        'Reload tab</a></p><iframe></iframe></div>');
-                $('.tab_reload', $pane).click(function() {
-                    $pane.html('<div class="spinner spinner-32px spinner-h-center"></div>');
-                    etarget.trigger('arv:pane:reload');
+                        'Reload tab</a></p><iframe style="width: 100%"></iframe></div>');
+                $('.tab_reload', $(this)).click(function() {
+                    $(this).html('<div class="spinner spinner-32px spinner-h-center"></div>');
+                    $anchor.trigger('arv:pane:reload');
                 });
                 // We want to render the error in an iframe, in order to
                 // avoid conflicts with the main page's element ids, etc.
                 // In order to do that dynamically, we have to set a
                 // timeout on the iframe window to load our HTML *after*
                 // the default source (e.g., about:blank) has loaded.
-                var iframe = $('iframe', e.target)[0];
+                var iframe = $('iframe', $(this))[0];
                 iframe.contentWindow.setTimeout(function() {
                     $('body', iframe.contentDocument).html(errhtml);
                     iframe.height = iframe.contentDocument.body.scrollHeight + "px";
                 }, 1);
-                etarget.addClass('pane-loaded');
+                $anchor.addClass('pane-loaded');
             });
     } else {
-        //console.log(etarget.attr('href') + " is not active");
-
         // When the user selects e.target tab, show a spinner instead of
         // old content while loading.
-        etarget.removeClass('pane-loading');
-        etarget.removeClass('pane-loaded');
-        etarget.removeClass('pane-stale');
-
         $pane.html('<div class="spinner spinner-32px spinner-h-center"></div>');
     }
 });
diff --git a/apps/workbench/app/views/pipeline_instances/_show_log.html.erb b/apps/workbench/app/views/pipeline_instances/_show_log.html.erb
index 39625b6..5bc7828 100644
--- a/apps/workbench/app/views/pipeline_instances/_show_log.html.erb
+++ b/apps/workbench/app/views/pipeline_instances/_show_log.html.erb
@@ -1,4 +1,4 @@
 <% log_uuids = [@object.uuid] + pipeline_jobs(@object).collect{|x|x[:job].andand[:uuid]}.compact %>
 <% log_history = stderr_log_history(log_uuids) %>
-<div class="arv-log-event-listener arv-log-event-handler-append-logs arv-job-log-window" id="pipeline_event_log_div" data-object-uuids="<%= log_uuids.join(' ') %>"><%= log_history.join("\n") %>
+<div class="arv-log-event-listener arv-log-event-handler-append-logs arv-log-event-subscribe-to-pipeline-job-uuids arv-job-log-window" id="pipeline_event_log_div" data-object-uuids="<%= log_uuids.join(' ') %>"><%= log_history.join("\n") %>
 </div>
diff --git a/apps/workbench/test/test_helper.rb b/apps/workbench/test/test_helper.rb
index c0d6ac8..e365487 100644
--- a/apps/workbench/test/test_helper.rb
+++ b/apps/workbench/test/test_helper.rb
@@ -128,8 +128,13 @@ class ApiServerForTests
 
   def find_server_pid
     pid = nil
+    @pidfile = if @websocket
+                 WEBSOCKET_PID_PATH
+               else
+                 SERVER_PID_PATH
+               end
     begin
-      pid = IO.read(if @websocket then WEBSOCKET_PID_PATH else SERVER_PID_PATH end).to_i
+      pid = IO.read(@pidfile).to_i
       $stderr.puts "API server is running, pid #{pid.inspect}"
     rescue Errno::ENOENT
     end

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list