more logviewer optimizations

Signed-off-by: Pierre Tardy <pierre.tardy@intel.com>
buildbot · Nov 14, 2014 · 91f9395 · 91f9395
1 parent 613ba38
commit 91f9395
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/www/base/src/app/builders/log/logviewer/logviewer.directive.coffee b/www/base/src/app/builders/log/logviewer/logviewer.directive.coffee
@@ -27,7 +27,7 @@ class Logviewer extends Directive
                                 lines.pop()
                             for line in lines
                                 logclass = "o"
-                                if line.length > 0 and log.type == 's'
+                                if line.length > 0 and (self.scope.log.type == 's')
                                     logclass = line[0]
                                     line = line[1..]
                                 ret.push

diff --git a/www/base/src/app/builders/log/logviewer/logviewer.tpl.jade b/www/base/src/app/builders/log/logviewer/logviewer.tpl.jade
@@ -9,7 +9,7 @@
     span(ng-if="log.type=='s' || log.type=='t'")
         div(scroll="line in lines", scroll-position="log.num_lines", load-all="loadAll", is-loading="isLoading", total-size="log.num_lines", style="height:20px")
             span.linenumber {{::$index}}
-            span.no-wrap {{::line.content + '\n'}}
+            span.no-wrap(class="{{::line.class}}") {{::line.content}}
   div.panel(ng-if="log.type=='h'", ng-class="log.name=='err.html' && 'panel-danger' || 'panel-default'")
     div.panel-heading
         h4.panel-title {{log.name}}

diff --git a/www/base/src/app/builders/log/logviewer/scrollviewport.directive.coffee b/www/base/src/app/builders/log/logviewer/scrollviewport.directive.coffee
@@ -12,6 +12,16 @@ This scroll directive uses ui.scroll base, but replace the whole DOM manipulatio
 - row height is fixed (or you cannot make geometric calculation to determine the positions of arbitrary elements)
 
 This directive uses JQuery for DOM manipulation
+
+Performance considerations:
+
+Having to deal with huge logs is not uncommon thing we buildbot, we need to deal with them as fast as possible.
+AngularJS does a lot of things with the DOM, and is not as fast as we can do.
+
+This is why using angularJS's linker is avoided. We rather use lodash template(), that is configured to
+simulate angularjs 1.3 "bindonce" templating.
+
+With this technic, we can load 20k lines log in 2 seconds.
 ###
 class ScrollViewport extends Directive
     constructor: ($log) ->
@@ -25,7 +35,7 @@ class ScrollViewport extends Directive
         }
 
 class Scroll extends Directive
-    constructor: ($log, $injector, $rootScope, $timeout, $window, $animate) ->
+    constructor: ($log, $injector, $rootScope, $timeout, $window) ->
         return {
             require: ['?^scrollViewport']
             transclude: 'element'
@@ -35,7 +45,6 @@ class Scroll extends Directive
                 ($scope, element, $attr, controllers) ->
 
                     log = $log.debug || $log.log
-                    $animate.enabled(false, element)
 
                     match = $attr.scroll.match(/^\s*(\w+)\s+in\s+([\w\.]+)\s*$/)
                     if !match
@@ -79,6 +88,15 @@ class Scroll extends Directive
                         viewport = controllers[0].viewport
                         viewport.css({'overflow-y': 'auto', 'display': 'block'})
                         rowHeight = template.height()
+
+                        # Replace angularjs linker by _.template, which is much faster
+                        rowTemplate = "<#{repeaterType} style='height:#{rowHeight}px;'>" +
+                            "#{template[0].innerHTML}</#{repeaterType}>"
+                        rowTemplate = _.template(rowTemplate,null, interpolate: /\{\{::(.+?)\}\}/g )
+                        linker = (scope, cb) ->
+                            cb(angular.element(rowTemplate(scope)))
+
+
                         padding = (height) ->
                             result = angular.element("<#{repeaterType} class='padding'></#{repeaterType}>")
                             result.set_height = (height) ->
@@ -116,7 +134,7 @@ class Scroll extends Directive
                         if buffer[pos]? and not buffer[pos]._height?
                             return
 
-                        itemScope = $scope.$new()
+                        itemScope = {}
                         itemScope[itemName] = item
                         itemScope.$index = pos
                         linker itemScope, (clone) ->

diff --git a/www/base/src/app/builders/log/logviewer/scrollviewport.spec.coffee b/www/base/src/app/builders/log/logviewer/scrollviewport.spec.coffee
@@ -44,7 +44,7 @@ describe 'page with sidebar', ->
         rootScope = $rootScope
         elmBody = angular.element(
             '<div scroll-viewport style="height:50px">'+
-            '<div style="height:10px" total-size="1000" scroll="item in items">{{::$index}}a{{item.v}}'+
+            '<div style="height:10px" total-size="1000" scroll="item in items">{{::$index}}a{{::item.v}}'+
             '</div></div>'
         )
         scope = $rootScope.$new()