Browse Source

HUE-6325 [jb] Optimize arrows redrawing and visibility polling of the workflow graph

Enrico Berti 8 years ago
parent
commit
542195307b

+ 42 - 22
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -1233,7 +1233,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
       self.id = ko.observableDefault(job.id);
       self.id = ko.observableDefault(job.id);
       self.id.subscribe(function () {
       self.id.subscribe(function () {
-        huePubSub.publish('stop.refresh.view');
+        huePubSub.publish('graph.stop.refresh.view');
       });
       });
       self.doc_url = ko.observableDefault(job.doc_url);
       self.doc_url = ko.observableDefault(job.doc_url);
       self.name = ko.observableDefault(job.name || job.id);
       self.name = ko.observableDefault(job.name || job.id);
@@ -1530,28 +1530,47 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       }
       }
 
 
       self.workflowGraphLoaded = false;
       self.workflowGraphLoaded = false;
-      self.updateWorkflowGraph = function() {
-        var lastPosition = {
-          top: 0,
-          left: 0
-        }
 
 
-        var updateArrowPosition = function () {
-          huePubSub.publish('draw.graph.arrows');
-          if ($('canvas').length > 0 && $('canvas').position().top !== lastPosition.top && $('canvas').position().left !== lastPosition.left) {
-            lastPosition = $('canvas').position();
-            window.setTimeout(updateArrowPosition, 100);
-          }
+      self.lastArrowsPosition = {
+        top: 0,
+        left: 0
+      }
+
+      self.initialArrowsDrawingCount = 0;
+      self.initialArrowsDrawing = function() {
+        if (self.initialArrowsDrawingCount < 20) {
+          self.initialArrowsDrawingCount++;
+          huePubSub.publish('graph.draw.arrows');
+          window.setTimeout(self.initialArrowsDrawing, 100);
         }
         }
+        else if (self.initialArrowsDrawingCount < 30){
+          self.initialArrowsDrawingCount++;
+          huePubSub.publish('graph.draw.arrows');
+          window.setTimeout(self.initialArrowsDrawing, 500);
+        }
+        else {
+          self.initialArrowsDrawingCount = 0;
+        }
+      }
 
 
-        var arrowsPolling = function () {
-          if ($('#workflow-page-graph').is(':visible')){
-            window.setTimeout(arrowsPolling, 100);
-          }
-          else {
-            $('canvas').remove();
+      self.updateArrowsTimeout = -1;
+      self.updateArrows = function() {
+        if ($('canvas').length > 0 && $('canvas').position().top !== self.lastArrowsPosition.top && $('canvas').position().left !== self.lastArrowsPosition.left) {
+          self.lastArrowsPosition = $('canvas').position();
+        }
+        if ($('#workflow-page-graph').is(':visible')){
+          if ($('canvas').length === 0){
+            huePubSub.publish('graph.draw.arrows');
           }
           }
         }
         }
+        else {
+          $('canvas').remove();
+        }
+        self.updateArrowsTimeout = window.setTimeout(self.updateArrows, 100);
+      }
+
+      self.updateWorkflowGraph = function() {
+        huePubSub.publish('graph.stop.refresh.view');
 
 
         $('canvas').remove();
         $('canvas').remove();
 
 
@@ -1580,8 +1599,9 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 response: response,
                 response: response,
                 callback: function (r) {
                 callback: function (r) {
                   $('#workflow-page-graph').html(r);
                   $('#workflow-page-graph').html(r);
-                  updateArrowPosition();
-                  arrowsPolling();
+                  window.clearTimeout(self.updateArrowsTimeout);
+                  self.initialArrowsDrawing();
+                  self.updateArrows();
                 }
                 }
               });
               });
             }
             }
@@ -1924,7 +1944,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         }
         }
       };
       };
       self.selectInterface = function(interface) {
       self.selectInterface = function(interface) {
-        huePubSub.publish('stop.refresh.view');
+        huePubSub.publish('graph.stop.refresh.view');
         interface = self.isValidInterface(interface);
         interface = self.isValidInterface(interface);
         self.interface(interface);
         self.interface(interface);
         self.resetBreadcrumbs();
         self.resetBreadcrumbs();
@@ -1975,7 +1995,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
       self.load = function() {
       self.load = function() {
         var h = window.location.hash;
         var h = window.location.hash;
-        huePubSub.publish('stop.refresh.view');
+        huePubSub.publish('graph.stop.refresh.view');
 
 
         h = h.indexOf('#!') === 0 ? h.substr(2) : '';
         h = h.indexOf('#!') === 0 ? h.substr(2) : '';
         switch (h) {
         switch (h) {

+ 0 - 2
apps/oozie/src/oozie/static/oozie/js/workflow-editor.ko.js

@@ -1318,8 +1318,6 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
     }
     }
   }
   }
 
 
-  huePubSub.subscribe('draw.graph.arrows', self.drawArrows);
-
   function bareWidgetBuilder(name, type) {
   function bareWidgetBuilder(name, type) {
     return new ExtendedWidget({
     return new ExtendedWidget({
       size: 12,
       size: 12,

+ 51 - 39
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow_graph.mako

@@ -78,53 +78,65 @@ ${ dashboard.import_layout() }
       var refreshViewTimeout = -1;
       var refreshViewTimeout = -1;
 
 
       function refreshView() {
       function refreshView() {
-        $.getJSON("${ oozie_workflow.get_absolute_url(format='json') }", function (data) {
-
-          if (data.actions) {
-            % if layout_json != '':
-              ko.utils.arrayForEach(data.actions, function (action) {
-                var _w, actionId = action.id.substr(action.id.length - 4);
-                if (actionId === '@End') {
-                  _w = viewModel.getWidgetById('33430f0f-ebfa-c3ec-f237-3e77efa03d0a');
-                }
-                else {
-                  if ($("[id^=wdg_" + actionId.toLowerCase() + "]").length > 0) {
-                    _w = viewModel.getWidgetById($("[id^=wdg_" + actionId.toLowerCase() + "]").attr("id").substr(4));
-                  }
-                  else {
+        if ($('#loaded${doc_uuid}graph').is(':visible')) {
+          $.getJSON("${ oozie_workflow.get_absolute_url(format='json') }", function (data) {
+
+            if (data.actions) {
+              % if layout_json != '':
+                ko.utils.arrayForEach(data.actions, function (action) {
+                  var _w, actionId = action.id.substr(action.id.length - 4);
+                  if (actionId === '@End') {
                     _w = viewModel.getWidgetById('33430f0f-ebfa-c3ec-f237-3e77efa03d0a');
                     _w = viewModel.getWidgetById('33430f0f-ebfa-c3ec-f237-3e77efa03d0a');
                   }
                   }
-                }
-                if (_w != null) {
-                  if (['SUCCEEDED', 'OK', 'DONE'].indexOf(action.status) > -1) {
-                    _w.status("success");
-                    _w.progress(100);
-                  }
-                  else if (['RUNNING', 'READY', 'PREP', 'WAITING', 'SUSPENDED', 'PREPSUSPENDED', 'PREPPAUSED', 'PAUSED', 'SUBMITTED', 'SUSPENDEDWITHERROR', 'PAUSEDWITHERROR'].indexOf(action.status) > -1) {
-                    _w.status("running");
-                    _w.progress(50);
-                  }
                   else {
                   else {
-                    _w.status("failed");
-                    _w.progress(100);
+                    if ($("[id^=wdg_" + actionId.toLowerCase() + "]").length > 0) {
+                      _w = viewModel.getWidgetById($("[id^=wdg_" + actionId.toLowerCase() + "]").attr("id").substr(4));
+                    }
+                    else {
+                      _w = viewModel.getWidgetById('33430f0f-ebfa-c3ec-f237-3e77efa03d0a');
+                    }
                   }
                   }
-                  _w.actionURL(action.url);
-                  _w.logsURL(action.log);
-                  _w.externalIdUrl(action.externalIdUrl);
-                  _w.externalId(action.id);
-                }
-              });
-            %endif
-          }
-          if (data.status != "RUNNING" && data.status != "PREP") {
-            return;
-          }
+                  if (_w != null) {
+                    if (['SUCCEEDED', 'OK', 'DONE'].indexOf(action.status) > -1) {
+                      _w.status("success");
+                      _w.progress(100);
+                    }
+                    else if (['RUNNING', 'READY', 'PREP', 'WAITING', 'SUSPENDED', 'PREPSUSPENDED', 'PREPPAUSED', 'PAUSED', 'SUBMITTED', 'SUSPENDEDWITHERROR', 'PAUSEDWITHERROR'].indexOf(action.status) > -1) {
+                      _w.status("running");
+                      _w.progress(50);
+                    }
+                    else {
+                      _w.status("failed");
+                      _w.progress(100);
+                    }
+                    _w.actionURL(action.url);
+                    _w.logsURL(action.log);
+                    _w.externalIdUrl(action.externalIdUrl);
+                    _w.externalId(action.id);
+                  }
+                });
+              %endif
+            }
+            if (data.status != "RUNNING" && data.status != "PREP") {
+              return;
+            }
+            else {
+              refreshViewTimeout = window.setTimeout(refreshView, 1000);
+            }
+          });
+        }
+        else {
           refreshViewTimeout = window.setTimeout(refreshView, 1000);
           refreshViewTimeout = window.setTimeout(refreshView, 1000);
-        });
+        }
       }
       }
 
 
-      huePubSub.subscribeOnce('stop.refresh.view', function(){
+      huePubSub.subscribe('graph.stop.refresh.view', function(){
         window.clearTimeout(refreshViewTimeout);
         window.clearTimeout(refreshViewTimeout);
+        huePubSub.removeAll('graph.draw.arrows');
+      });
+
+      huePubSub.subscribe('graph.draw.arrows', function(){
+        viewModel.drawArrows();
       });
       });
 
 
     %endif
     %endif

+ 3 - 0
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -443,6 +443,9 @@ var huePubSub = (function () {
         }
         }
       };
       };
     },
     },
+    removeAll: function (topic) {
+      topics[topic] = [];
+    },
     subscribeOnce: function (topic, listener, app) {
     subscribeOnce: function (topic, listener, app) {
       var ephemeral = this.subscribe(topic, function () {
       var ephemeral = this.subscribe(topic, function () {
         listener.apply(listener, arguments);
         listener.apply(listener, arguments);