Merge lp:~ricgard/maas/vs-repeat-ui-improvement into lp:~maas-committers/maas/trunk

[Richard McCartney]

Created vertical scrolling repeat to improve the loading times of heavy table content pages such as device discovery

Work done
========================

- Added the vs-repeat angular module to MAAS. Module details and code can be found here https://github.com/kamilkp/angular-vs-repeat
- Applied the vs-repeat directive to the following pages:

Device discovery, Node listing, Device listing, Controller listing, Pod listing, Subnet listing, Node events page

How to test
========================

- Pull down the branch and run 'make' then 'make sampledata'
- Go to http://localhost:5240 and install MAAS via the first user journey. Login in with 'admin' 'test.
- View the device discovery page and attempt to rapidly scroll the page. The directive should pull in the table row content and improve the loading time on the page.
- Test in a similar way on other pages such as node events

[Blake Rouse (blake-rouse)]

This is awesome! Thanks for doing it.

review: Approve

[MAAS Lander (maas-lander)]

The attempt to merge lp:~ricgard/maas/vs-repeat-ui-improvement into lp:maas failed. Below is the output from the failed tests.

Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB]
Hit:2 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial InRelease
Get:3 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates InRelease [102 kB]
Get:4 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease [102 kB]
Get:5 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates/main Sources [252 kB]
Get:6 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates/main amd64 Packages [553 kB]
Fetched 1,112 kB in 0s (2,080 kB/s)
Reading package lists...
sudo DEBIAN_FRONTEND=noninteractive apt-get -y \
    --no-install-recommends install apache2 archdetect-deb authbind avahi-utils bash bind9 bind9utils build-essential bzr bzr-builddeb chromium-browser chromium-chromedriver curl daemontools debhelper dh-apport dh-systemd distro-info dnsutils firefox freeipmi-tools git gjs ipython isc-dhcp-common isc-dhcp-server libjs-angularjs libjs-jquery libjs-jquery-hotkeys libjs-yui3-full libjs-yui3-min libnss-wrapper libpq-dev make nodejs-legacy npm postgresql psmisc pxelinux python3-all python3-apt python3-attr python3-bson python3-convoy python3-crochet python3-cssselect python3-curtin python3-dev python3-distro-info python3-django python3-django-nose python3-django-piston3 python3-dnspython python3-docutils python3-formencode python3-hivex python3-httplib2 python3-jinja2 python3-jsonschema python3-lxml python3-netaddr python3-netifaces python3-novaclient python3-oauth python3-oauthlib python3-openssl python3-paramiko python3-petname python3-pexpect python3-psycopg2 python3-pyinotify python3-pyparsing python3-pyvmomi python3-requests python3-seamicroclient python3-setuptools python3-simplestreams python3-sphinx python3-tempita python3-twisted python3-txtftp python3-tz python3-yaml python3-zope.interface python-bson python-crochet python-django python-django-piston python-djorm-ext-pgarray python-formencode python-lxml python-netaddr python-netifaces python-pocket-lint python-psycopg2 python-simplejson python-tempita python-twisted python-yaml socat syslinux-common tgt ubuntu-cloudimage-keyring wget xvfb
Reading package lists...
Building dependency tree...
Reading state information...
authbind is already the newest version (2.1.1+nmu1).
avahi-utils is already the newest version (0.6.32~rc+dfsg-1ubuntu2).
build-essential is already the newest version (12.1ubuntu2).
debhelper is already the newest version (9.20160115ubuntu3).
distro-info is already the newest version (0.14build1).
libjs-angularjs is already the newest version (1.2.28-1ubuntu2).
libjs-jquery is already the newest version (1.11.3+dfsg-4).
libjs-yui3-full is already the newest version (3.5.1-1ubuntu3).
libjs-yui3-min is already the newest version (3.5.1-1ubuntu3).
make is already the newest version (4.1-6).
postgresql is already the newest version (9.5+173).
psmisc is already the newest version (22.21-2.1build1).
pxelinux is already the newest version (3:6.03+dfsg-11ubuntu1).
python-formencode is already the n...

[MAAS Lander (maas-lander)]

The attempt to merge lp:~ricgard/maas/vs-repeat-ui-improvement into lp:maas failed. Below is the output from the failed tests.

Hit:1 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial InRelease
Hit:2 http://security.ubuntu.com/ubuntu xenial-security InRelease
Hit:3 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates InRelease
Hit:4 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease
Reading package lists...
sudo DEBIAN_FRONTEND=noninteractive apt-get -y \
    --no-install-recommends install apache2 archdetect-deb authbind avahi-utils bash bind9 bind9utils build-essential bzr bzr-builddeb chromium-browser chromium-chromedriver curl daemontools debhelper dh-apport dh-systemd distro-info dnsutils firefox freeipmi-tools git gjs ipython isc-dhcp-common isc-dhcp-server libjs-angularjs libjs-jquery libjs-jquery-hotkeys libjs-yui3-full libjs-yui3-min libnss-wrapper libpq-dev make nodejs-legacy npm postgresql psmisc pxelinux python3-all python3-apt python3-attr python3-bson python3-convoy python3-crochet python3-cssselect python3-curtin python3-dev python3-distro-info python3-django python3-django-nose python3-django-piston3 python3-dnspython python3-docutils python3-formencode python3-hivex python3-httplib2 python3-jinja2 python3-jsonschema python3-lxml python3-netaddr python3-netifaces python3-novaclient python3-oauth python3-oauthlib python3-openssl python3-paramiko python3-petname python3-pexpect python3-psycopg2 python3-pyinotify python3-pyparsing python3-pyvmomi python3-requests python3-seamicroclient python3-setuptools python3-simplestreams python3-sphinx python3-tempita python3-twisted python3-txtftp python3-tz python3-yaml python3-zope.interface python-bson python-crochet python-django python-django-piston python-djorm-ext-pgarray python-formencode python-lxml python-netaddr python-netifaces python-pocket-lint python-psycopg2 python-simplejson python-tempita python-twisted python-yaml socat syslinux-common tgt ubuntu-cloudimage-keyring wget xvfb
Reading package lists...
Building dependency tree...
Reading state information...
authbind is already the newest version (2.1.1+nmu1).
avahi-utils is already the newest version (0.6.32~rc+dfsg-1ubuntu2).
build-essential is already the newest version (12.1ubuntu2).
debhelper is already the newest version (9.20160115ubuntu3).
distro-info is already the newest version (0.14build1).
libjs-angularjs is already the newest version (1.2.28-1ubuntu2).
libjs-jquery is already the newest version (1.11.3+dfsg-4).
libjs-yui3-full is already the newest version (3.5.1-1ubuntu3).
libjs-yui3-min is already the newest version (3.5.1-1ubuntu3).
make is already the newest version (4.1-6).
postgresql is already the newest version (9.5+173).
psmisc is already the newest version (22.21-2.1build1).
pxelinux is already the newest version (3:6.03+dfsg-11ubuntu1).
python-formencode is already the newest version (1.3.0-0ubuntu5).
python-lxml is already the newest version (3.5.0-1build1).
python-netaddr is already the newest version (0.7.18-1).
python-netifaces is already the newest version (0.10.4-0.1build2).
python-psycopg2 is already the newest version (2.6.1-1b...

=== added file 'src/maasserver/static/js/angular/3rdparty/vs-repeat.js'
--- src/maasserver/static/js/angular/3rdparty/vs-repeat.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/3rdparty/vs-repeat.js	2017-06-15 11:16:28 +0000
@@ -0,0 +1,608 @@
+//
+// Copyright Kamil Pękala http://github.com/kamilkp
+// Angular Virtual Scroll Repeat v1.1.7 2016/03/08
+//
+
+(function(window, angular) {
+    'use strict';
+    /* jshint eqnull:true */
+    /* jshint -W038 */
+
+    // DESCRIPTION:
+    // vsRepeat directive stands for Virtual Scroll Repeat. It turns a standard ngRepeated set of elements in a scrollable container
+    // into a component, where the user thinks he has all the elements rendered and all he needs to do is scroll (without any kind of
+    // pagination - which most users loath) and at the same time the browser isn't overloaded by that many elements/angular bindings etc.
+    // The directive renders only so many elements that can fit into current container's clientHeight/clientWidth.
+
+    // LIMITATIONS:
+    // - current version only supports an Array as a right-hand-side object for ngRepeat
+    // - all rendered elements must have the same height/width or the sizes of the elements must be known up front
+
+    // USAGE:
+    // In order to use the vsRepeat directive you need to place a vs-repeat attribute on a direct parent of an element with ng-repeat
+    // example:
+    // <div vs-repeat>
+    //      <div ng-repeat="item in someArray">
+    //          <!-- content -->
+    //      </div>
+    // </div>
+    //
+    // or:
+    // <div vs-repeat>
+    //      <div ng-repeat-start="item in someArray">
+    //          <!-- content -->
+    //      </div>
+    //      <div>
+    //         <!-- something in the middle -->
+    //      </div>
+    //      <div ng-repeat-end>
+    //          <!-- content -->
+    //      </div>
+    // </div>
+    //
+    // You can also measure the single element's height/width (including all paddings and margins), and then speficy it as a value
+    // of the attribute 'vs-repeat'. This can be used if one wants to override the automatically computed element size.
+    // example:
+    // <div vs-repeat="50"> <!-- the specified element height is 50px -->
+    //      <div ng-repeat="item in someArray">
+    //          <!-- content -->
+    //      </div>
+    // </div>
+    //
+    // IMPORTANT!
+    //
+    // - the vsRepeat directive must be applied to a direct parent of an element with ngRepeat
+    // - the value of vsRepeat attribute is the single element's height/width measured in pixels. If none provided, the directive
+    //      will compute it automatically
+
+    // OPTIONAL PARAMETERS (attributes):
+    // vs-repeat-container="selector" - selector for element containing ng-repeat. (defaults to the current element)
+    // vs-scroll-parent="selector" - selector to the scrollable container. The directive will look for a closest parent matching
+    //                              the given selector (defaults to the current element)
+    // vs-horizontal - stack repeated elements horizontally instead of vertically
+    // vs-offset-before="value" - top/left offset in pixels (defaults to 0)
+    // vs-offset-after="value" - bottom/right offset in pixels (defaults to 0)
+    // vs-excess="value" - an integer number representing the number of elements to be rendered outside of the current container's viewport
+    //                      (defaults to 2)
+    // vs-size - a property name of the items in collection that is a number denoting the element size (in pixels)
+    // vs-autoresize - use this attribute without vs-size and without specifying element's size. The automatically computed element style will
+    //              readjust upon window resize if the size is dependable on the viewport size
+    // vs-scrolled-to-end="callback" - callback will be called when the last item of the list is rendered
+    // vs-scrolled-to-end-offset="integer" - set this number to trigger the scrolledToEnd callback n items before the last gets rendered
+    // vs-scrolled-to-beginning="callback" - callback will be called when the first item of the list is rendered
+    // vs-scrolled-to-beginning-offset="integer" - set this number to trigger the scrolledToBeginning callback n items before the first gets rendered
+
+    // EVENTS:
+    // - 'vsRepeatTrigger' - an event the directive listens for to manually trigger reinitialization
+    // - 'vsRepeatReinitialized' - an event the directive emits upon reinitialization done
+
+    var dde = document.documentElement,
+        matchingFunction = dde.matches ? 'matches' :
+                            dde.matchesSelector ? 'matchesSelector' :
+                            dde.webkitMatches ? 'webkitMatches' :
+                            dde.webkitMatchesSelector ? 'webkitMatchesSelector' :
+                            dde.msMatches ? 'msMatches' :
+                            dde.msMatchesSelector ? 'msMatchesSelector' :
+                            dde.mozMatches ? 'mozMatches' :
+                            dde.mozMatchesSelector ? 'mozMatchesSelector' : null;
+
+    var closestElement = angular.element.prototype.closest || function (selector) {
+        var el = this[0].parentNode;
+        while (el !== document.documentElement && el != null && !el[matchingFunction](selector)) {
+            el = el.parentNode;
+        }
+
+        if (el && el[matchingFunction](selector)) {
+            return angular.element(el);
+        }
+        else {
+            return angular.element();
+        }
+    };
+
+    function getWindowScroll() {
+        if ('pageYOffset' in window) {
+            return {
+                scrollTop: pageYOffset,
+                scrollLeft: pageXOffset
+            };
+        }
+        else {
+            var sx, sy, d = document, r = d.documentElement, b = d.body;
+            sx = r.scrollLeft || b.scrollLeft || 0;
+            sy = r.scrollTop || b.scrollTop || 0;
+            return {
+                scrollTop: sy,
+                scrollLeft: sx
+            };
+        }
+    }
+
+    function getClientSize(element, sizeProp) {
+        if (element === window) {
+            return sizeProp === 'clientWidth' ? window.innerWidth : window.innerHeight;
+        }
+        else {
+            return element[sizeProp];
+        }
+    }
+
+    function getScrollPos(element, scrollProp) {
+        return element === window ? getWindowScroll()[scrollProp] : element[scrollProp];
+    }
+
+    function getScrollOffset(vsElement, scrollElement, isHorizontal) {
+        var vsPos = vsElement.getBoundingClientRect()[isHorizontal ? 'left' : 'top'];
+        var scrollPos = scrollElement === window ? 0 : scrollElement.getBoundingClientRect()[isHorizontal ? 'left' : 'top'];
+        var correction = vsPos - scrollPos +
+            (scrollElement === window ? getWindowScroll() : scrollElement)[isHorizontal ? 'scrollLeft' : 'scrollTop'];
+
+        return correction;
+    }
+
+    var vsRepeatModule = angular.module('vs-repeat', []).directive('vsRepeat', ['$compile', '$parse', function($compile, $parse) {
+        return {
+            restrict: 'A',
+            scope: true,
+            compile: function($element, $attrs) {
+                var repeatContainer = angular.isDefined($attrs.vsRepeatContainer) ? angular.element($element[0].querySelector($attrs.vsRepeatContainer)) : $element,
+                    ngRepeatChild = repeatContainer.children().eq(0),
+                    ngRepeatExpression,
+                    childCloneHtml = ngRepeatChild[0].outerHTML,
+                    expressionMatches,
+                    lhs,
+                    rhs,
+                    rhsSuffix,
+                    originalNgRepeatAttr,
+                    collectionName = '$vs_collection',
+                    isNgRepeatStart = false,
+                    attributesDictionary = {
+                        'vsRepeat': 'elementSize',
+                        'vsOffsetBefore': 'offsetBefore',
+                        'vsOffsetAfter': 'offsetAfter',
+                        'vsScrolledToEndOffset': 'scrolledToEndOffset',
+                        'vsScrolledToBeginningOffset': 'scrolledToBeginningOffset',
+                        'vsExcess': 'excess'
+                    };
+
+                if (ngRepeatChild.attr('ng-repeat')) {
+                    originalNgRepeatAttr = 'ng-repeat';
+                    ngRepeatExpression = ngRepeatChild.attr('ng-repeat');
+                }
+                else if (ngRepeatChild.attr('data-ng-repeat')) {
+                    originalNgRepeatAttr = 'data-ng-repeat';
+                    ngRepeatExpression = ngRepeatChild.attr('data-ng-repeat');
+                }
+                else if (ngRepeatChild.attr('ng-repeat-start')) {
+                    isNgRepeatStart = true;
+                    originalNgRepeatAttr = 'ng-repeat-start';
+                    ngRepeatExpression = ngRepeatChild.attr('ng-repeat-start');
+                }
+                else if (ngRepeatChild.attr('data-ng-repeat-start')) {
+                    isNgRepeatStart = true;
+                    originalNgRepeatAttr = 'data-ng-repeat-start';
+                    ngRepeatExpression = ngRepeatChild.attr('data-ng-repeat-start');
+                }
+                else {
+                    throw new Error('angular-vs-repeat: no ng-repeat directive on a child element');
+                }
+
+                expressionMatches = /^\s*(\S+)\s+in\s+([\S\s]+?)(track\s+by\s+\S+)?$/.exec(ngRepeatExpression);
+                lhs = expressionMatches[1];
+                rhs = expressionMatches[2];
+                rhsSuffix = expressionMatches[3];
+
+                if (isNgRepeatStart) {
+                    var index = 0;
+                    var repeaterElement = repeatContainer.children().eq(0);
+                    while(repeaterElement.attr('ng-repeat-end') == null && repeaterElement.attr('data-ng-repeat-end') == null) {
+                        index++;
+                        repeaterElement = repeatContainer.children().eq(index);
+                        childCloneHtml += repeaterElement[0].outerHTML;
+                    }
+                }
+
+                repeatContainer.empty();
+                return {
+                    pre: function($scope, $element, $attrs) {
+                        var repeatContainer = angular.isDefined($attrs.vsRepeatContainer) ? angular.element($element[0].querySelector($attrs.vsRepeatContainer)) : $element,
+                            childClone = angular.element(childCloneHtml),
+                            childTagName = childClone[0].tagName.toLowerCase(),
+                            originalCollection = [],
+                            originalLength,
+                            $$horizontal = typeof $attrs.vsHorizontal !== 'undefined',
+                            $beforeContent = angular.element('<' + childTagName + ' class="vs-repeat-before-content"></' + childTagName + '>'),
+                            $afterContent = angular.element('<' + childTagName + ' class="vs-repeat-after-content"></' + childTagName + '>'),
+                            autoSize = !$attrs.vsRepeat,
+                            sizesPropertyExists = !!$attrs.vsSize || !!$attrs.vsSizeProperty,
+                            $scrollParent = $attrs.vsScrollParent ?
+                                $attrs.vsScrollParent === 'window' ? angular.element(window) :
+                                closestElement.call(repeatContainer, $attrs.vsScrollParent) : repeatContainer,
+                            $$options = 'vsOptions' in $attrs ? $scope.$eval($attrs.vsOptions) : {},
+                            clientSize = $$horizontal ? 'clientWidth' : 'clientHeight',
+                            offsetSize = $$horizontal ? 'offsetWidth' : 'offsetHeight',
+                            scrollPos = $$horizontal ? 'scrollLeft' : 'scrollTop';
+
+                        $scope.totalSize = 0;
+                        if (!('vsSize' in $attrs) && 'vsSizeProperty' in $attrs) {
+                            console.warn('vs-size-property attribute is deprecated. Please use vs-size attribute which also accepts angular expressions.');
+                        }
+
+                        if ($scrollParent.length === 0) {
+                            throw 'Specified scroll parent selector did not match any element';
+                        }
+                        $scope.$scrollParent = $scrollParent;
+
+                        if (sizesPropertyExists) {
+                            $scope.sizesCumulative = [];
+                        }
+
+                        //initial defaults
+                        $scope.elementSize = (+$attrs.vsRepeat) || getClientSize($scrollParent[0], clientSize) || 50;
+                        $scope.offsetBefore = 0;
+                        $scope.offsetAfter = 0;
+                        $scope.excess = 2;
+
+                        if ($$horizontal) {
+                            $beforeContent.css('height', '100%');
+                            $afterContent.css('height', '100%');
+                        }
+                        else {
+                            $beforeContent.css('width', '100%');
+                            $afterContent.css('width', '100%');
+                        }
+
+                        Object.keys(attributesDictionary).forEach(function(key) {
+                            if ($attrs[key]) {
+                                $attrs.$observe(key, function(value) {
+                                    // '+' serves for getting a number from the string as the attributes are always strings
+                                    $scope[attributesDictionary[key]] = +value;
+                                    reinitialize();
+                                });
+                            }
+                        });
+
+
+                        $scope.$watchCollection(rhs, function(coll) {
+                            originalCollection = coll || [];
+                            refresh();
+                        });
+
+                        function refresh() {
+                            if (!originalCollection || originalCollection.length < 1) {
+                                $scope[collectionName] = [];
+                                originalLength = 0;
+                                $scope.sizesCumulative = [0];
+                            }
+                            else {
+                                originalLength = originalCollection.length;
+                                if (sizesPropertyExists) {
+                                    $scope.sizes = originalCollection.map(function(item) {
+                                        var s = $scope.$new(false);
+                                        angular.extend(s, item);
+                                        s[lhs] = item;
+                                        var size = ($attrs.vsSize || $attrs.vsSizeProperty) ?
+                                                        s.$eval($attrs.vsSize || $attrs.vsSizeProperty) :
+                                                        $scope.elementSize;
+                                        s.$destroy();
+                                        return size;
+                                    });
+                                    var sum = 0;
+                                    $scope.sizesCumulative = $scope.sizes.map(function(size) {
+                                        var res = sum;
+                                        sum += size;
+                                        return res;
+                                    });
+                                    $scope.sizesCumulative.push(sum);
+                                }
+                                else {
+                                    setAutoSize();
+                                }
+                            }
+
+                            reinitialize();
+                        }
+
+                        function setAutoSize() {
+                            if (autoSize) {
+                                $scope.$$postDigest(function() {
+                                    if (repeatContainer[0].offsetHeight || repeatContainer[0].offsetWidth) { // element is visible
+                                        var children = repeatContainer.children(),
+                                            i = 0,
+                                            gotSomething = false,
+                                            insideStartEndSequence = false;
+
+                                        while (i < children.length) {
+                                            if (children[i].attributes[originalNgRepeatAttr] != null || insideStartEndSequence) {
+                                                if (!gotSomething) {
+                                                    $scope.elementSize = 0;
+                                                }
+
+                                                gotSomething = true;
+                                                if (children[i][offsetSize]) {
+                                                    $scope.elementSize += children[i][offsetSize];
+                                                }
+
+                                                if (isNgRepeatStart) {
+                                                    if (children[i].attributes['ng-repeat-end'] != null || children[i].attributes['data-ng-repeat-end'] != null) {
+                                                        break;
+                                                    }
+                                                    else {
+                                                        insideStartEndSequence = true;
+                                                    }
+                                                }
+                                                else {
+                                                    break;
+                                                }
+                                            }
+                                            i++;
+                                        }
+
+                                        if (gotSomething) {
+                                            reinitialize();
+                                            autoSize = false;
+                                            if ($scope.$root && !$scope.$root.$$phase) {
+                                                $scope.$apply();
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        var dereg = $scope.$watch(function() {
+                                            if (repeatContainer[0].offsetHeight || repeatContainer[0].offsetWidth) {
+                                                dereg();
+                                                setAutoSize();
+                                            }
+                                        });
+                                    }
+                                });
+                            }
+                        }
+
+                        function getLayoutProp() {
+                            var layoutPropPrefix = childTagName === 'tr' ? '' : 'min-';
+                            var layoutProp = $$horizontal ? layoutPropPrefix + 'width' : layoutPropPrefix + 'height';
+                            return layoutProp;
+                        }
+
+                        childClone.eq(0).attr(originalNgRepeatAttr, lhs + ' in ' + collectionName + (rhsSuffix ? ' ' + rhsSuffix : ''));
+                        childClone.addClass('vs-repeat-repeated-element');
+
+                        repeatContainer.append($beforeContent);
+                        repeatContainer.append(childClone);
+                        $compile(childClone)($scope);
+                        repeatContainer.append($afterContent);
+
+                        $scope.startIndex = 0;
+                        $scope.endIndex = 0;
+
+                        function scrollHandler() {
+                            if (updateInnerCollection()) {
+                                $scope.$digest();
+                            }
+                        }
+
+                        $scrollParent.on('scroll', scrollHandler);
+
+                        function onWindowResize() {
+                            if (typeof $attrs.vsAutoresize !== 'undefined') {
+                                autoSize = true;
+                                setAutoSize();
+                                if ($scope.$root && !$scope.$root.$$phase) {
+                                    $scope.$apply();
+                                }
+                            }
+                            if (updateInnerCollection()) {
+                                $scope.$apply();
+                            }
+                        }
+
+                        angular.element(window).on('resize', onWindowResize);
+                        $scope.$on('$destroy', function() {
+                            angular.element(window).off('resize', onWindowResize);
+                            $scrollParent.off('scroll', scrollHandler);
+                        });
+
+                        $scope.$on('vsRepeatTrigger', refresh);
+
+                        $scope.$on('vsRepeatResize', function() {
+                            autoSize = true;
+                            setAutoSize();
+                        });
+
+                        var _prevStartIndex,
+                            _prevEndIndex,
+                            _minStartIndex,
+                            _maxEndIndex;
+
+                        $scope.$on('vsRenderAll', function() {//e , quantum) {
+                            if($$options.latch) {
+                                setTimeout(function() {
+                                    // var __endIndex = Math.min($scope.endIndex + (quantum || 1), originalLength);
+                                    var __endIndex = originalLength;
+                                    _maxEndIndex = Math.max(__endIndex, _maxEndIndex);
+                                    $scope.endIndex = $$options.latch ? _maxEndIndex : __endIndex;
+                                    $scope[collectionName] = originalCollection.slice($scope.startIndex, $scope.endIndex);
+                                    _prevEndIndex = $scope.endIndex;
+
+                                    $scope.$$postDigest(function() {
+                                        $beforeContent.css(getLayoutProp(), 0);
+                                        $afterContent.css(getLayoutProp(), 0);
+                                    });
+
+                                    $scope.$apply(function() {
+                                        $scope.$emit('vsRenderAllDone');
+                                    });
+                                });
+                            }
+                        });
+
+                        function reinitialize() {
+                            _prevStartIndex = void 0;
+                            _prevEndIndex = void 0;
+                            _minStartIndex = originalLength;
+                            _maxEndIndex = 0;
+                            updateTotalSize(sizesPropertyExists ?
+                                                $scope.sizesCumulative[originalLength] :
+                                                $scope.elementSize * originalLength
+                                            );
+                            updateInnerCollection();
+
+                            $scope.$emit('vsRepeatReinitialized', $scope.startIndex, $scope.endIndex);
+                        }
+
+                        function updateTotalSize(size) {
+                            $scope.totalSize = $scope.offsetBefore + size + $scope.offsetAfter;
+                        }
+
+                        var _prevClientSize;
+                        function reinitOnClientHeightChange() {
+                            var ch = getClientSize($scrollParent[0], clientSize);
+                            if (ch !== _prevClientSize) {
+                                reinitialize();
+                                if ($scope.$root && !$scope.$root.$$phase) {
+                                    $scope.$apply();
+                                }
+                            }
+                            _prevClientSize = ch;
+                        }
+
+                        $scope.$watch(function() {
+                            if (typeof window.requestAnimationFrame === 'function') {
+                                window.requestAnimationFrame(reinitOnClientHeightChange);
+                            }
+                            else {
+                                reinitOnClientHeightChange();
+                            }
+                        });
+
+                        function updateInnerCollection() {
+                            var $scrollPosition = getScrollPos($scrollParent[0], scrollPos);
+                            var $clientSize = getClientSize($scrollParent[0], clientSize);
+
+                            var scrollOffset = repeatContainer[0] === $scrollParent[0] ? 0 : getScrollOffset(
+                                                    repeatContainer[0],
+                                                    $scrollParent[0],
+                                                    $$horizontal
+                                                );
+
+                            var __startIndex = $scope.startIndex;
+                            var __endIndex = $scope.endIndex;
+
+                            if (sizesPropertyExists) {
+                                __startIndex = 0;
+                                while ($scope.sizesCumulative[__startIndex] < $scrollPosition - $scope.offsetBefore - scrollOffset) {
+                                    __startIndex++;
+                                }
+                                if (__startIndex > 0) { __startIndex--; }
+
+                                // Adjust the start index according to the excess
+                                __startIndex = Math.max(
+                                    Math.floor(__startIndex - $scope.excess / 2),
+                                    0
+                                );
+
+                                __endIndex = __startIndex;
+                                while ($scope.sizesCumulative[__endIndex] < $scrollPosition - $scope.offsetBefore - scrollOffset + $clientSize) {
+                                    __endIndex++;
+                                }
+
+                                // Adjust the end index according to the excess
+                                __endIndex = Math.min(
+                                    Math.ceil(__endIndex + $scope.excess / 2),
+                                    originalLength
+                                );
+                            }
+                            else {
+                                __startIndex = Math.max(
+                                    Math.floor(
+                                        ($scrollPosition - $scope.offsetBefore - scrollOffset) / $scope.elementSize
+                                    ) - $scope.excess / 2,
+                                    0
+                                );
+
+                                __endIndex = Math.min(
+                                    __startIndex + Math.ceil(
+                                        $clientSize / $scope.elementSize
+                                    ) + $scope.excess,
+                                    originalLength
+                                );
+                            }
+
+                            _minStartIndex = Math.min(__startIndex, _minStartIndex);
+                            _maxEndIndex = Math.max(__endIndex, _maxEndIndex);
+
+                            $scope.startIndex = $$options.latch ? _minStartIndex : __startIndex;
+                            $scope.endIndex = $$options.latch ? _maxEndIndex : __endIndex;
+
+                            var digestRequired = false;
+                            if (_prevStartIndex == null) {
+                                digestRequired = true;
+                            }
+                            else if (_prevEndIndex == null) {
+                                digestRequired = true;
+                            }
+
+                            if (!digestRequired) {
+                                if ($$options.hunked) {
+                                    if (Math.abs($scope.startIndex - _prevStartIndex) >= $scope.excess / 2 ||
+                                        ($scope.startIndex === 0 && _prevStartIndex !== 0)) {
+                                        digestRequired = true;
+                                    }
+                                    else if (Math.abs($scope.endIndex - _prevEndIndex) >= $scope.excess / 2 ||
+                                        ($scope.endIndex === originalLength && _prevEndIndex !== originalLength)) {
+                                        digestRequired = true;
+                                    }
+                                }
+                                else {
+                                    digestRequired = $scope.startIndex !== _prevStartIndex ||
+                                                        $scope.endIndex !== _prevEndIndex;
+                                }
+                            }
+
+                            if (digestRequired) {
+                                $scope[collectionName] = originalCollection.slice($scope.startIndex, $scope.endIndex);
+
+                                // Emit the event
+                                $scope.$emit('vsRepeatInnerCollectionUpdated', $scope.startIndex, $scope.endIndex, _prevStartIndex, _prevEndIndex);
+                                var triggerIndex;
+                                if ($attrs.vsScrolledToEnd) {
+                                    triggerIndex = originalCollection.length - ($scope.scrolledToEndOffset || 0);
+                                    if (($scope.endIndex >= triggerIndex && _prevEndIndex < triggerIndex) || (originalCollection.length && $scope.endIndex === originalCollection.length)) {
+                                        $scope.$eval($attrs.vsScrolledToEnd);
+                                    }
+                                }
+                                if ($attrs.vsScrolledToBeginning) {
+                                    triggerIndex = $scope.scrolledToBeginningOffset || 0;
+                                    if (($scope.startIndex <= triggerIndex && _prevStartIndex > $scope.startIndex)) {
+                                        $scope.$eval($attrs.vsScrolledToBeginning);
+                                    }
+                                }
+
+                                _prevStartIndex = $scope.startIndex;
+                                _prevEndIndex = $scope.endIndex;
+
+                                var offsetCalculationString = sizesPropertyExists ?
+                                    '(sizesCumulative[$index + startIndex] + offsetBefore)' :
+                                    '(($index + startIndex) * elementSize + offsetBefore)';
+
+                                var parsed = $parse(offsetCalculationString);
+                                var o1 = parsed($scope, {$index: 0});
+                                var o2 = parsed($scope, {$index: $scope[collectionName].length});
+                                var total = $scope.totalSize;
+
+                                $beforeContent.css(getLayoutProp(), o1 + 'px');
+                                $afterContent.css(getLayoutProp(), (total - o2) + 'px');
+                            }
+
+                            return digestRequired;
+                        }
+                    }
+                };
+            }
+        };
+    }]);
+
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = vsRepeatModule.name;
+    }
+})(window, window.angular);

=== modified file 'src/maasserver/static/js/angular/maas.js'
--- src/maasserver/static/js/angular/maas.js	2017-03-10 18:38:46 +0000
+++ src/maasserver/static/js/angular/maas.js	2017-06-15 11:16:28 +0000
@@ -9,7 +9,8 @@
  */
 
 angular.module('MAAS',
-    ['ngRoute', 'ngCookies', 'ngSanitize', 'ngTagsInput', 'sticky']).config(
+    ['ngRoute', 'ngCookies', 'ngSanitize', 'ngTagsInput', 'sticky',
+    'vs-repeat']).config(
     function($interpolateProvider, $routeProvider, $httpProvider) {
         $interpolateProvider.startSymbol('{$');
         $interpolateProvider.endSymbol('$}');

=== modified file 'src/maasserver/static/partials/dashboard.html'
--- src/maasserver/static/partials/dashboard.html	2017-04-18 10:57:48 +0000
+++ src/maasserver/static/partials/dashboard.html	2017-06-15 11:16:28 +0000
@@ -46,7 +46,8 @@
                             No new discoveries
                         </div>
                     </div>
-                    <div class="table__row"
+                    <div vs-repeat vs-scroll-parent="window">
+                        <div class="table__row"
                         data-ng-repeat="discovery in discoveredDevices | orderBy:'-last_seen' track by discovery.first_seen"
                         data-ng-class="{'is-active' : discovery.first_seen === selectedDevice}">
                         <div data-ng-if="discovery.first_seen !== selectedDevice"
@@ -179,6 +180,7 @@
                             </div>
                         </maas-obj-form>
                     </div>
+                    </div>
                 </div>
             </div>
         </div>

=== modified file 'src/maasserver/static/partials/machines-table.html'
--- src/maasserver/static/partials/machines-table.html	2017-04-18 11:31:25 +0000
+++ src/maasserver/static/partials/machines-table.html	2017-06-15 11:16:28 +0000
@@ -39,7 +39,7 @@
             </th>
         </tr>
     </thead>
-    <tbody>
+    <tbody vs-repeat vs-scroll-parent="window">
         <tr
             data-ng-repeat="node in filteredMachines = (machines | nodesFilter:search | orderBy:table.predicate:table.reverse) track by node.system_id"
             data-ng-class="{ 'table--error': machineHasError({ $machine: node }), selected: node.$selected }">

=== modified file 'src/maasserver/static/partials/networks-list.html'
--- src/maasserver/static/partials/networks-list.html	2017-04-10 15:35:18 +0000
+++ src/maasserver/static/partials/networks-list.html	2017-06-15 11:16:28 +0000
@@ -147,7 +147,7 @@
                         <th class="table__column--13 align-right">Available IPs</th>
                     </tr>
                 </thead>
-                <tbody>
+                <tbody vs-repeat vs-scroll-parent="window">
                     <tr class="table-listing__row" data-ng-repeat="row in group.spaces.rows">
                         <!-- <td class="table-listing__cell table__column--3 ng-hide">
                             <div data-ng-if="row.space_name">
@@ -207,7 +207,7 @@
                         <th class="table__column--25">Space</th>
                     </tr>
                 </thead>
-                <tbody>
+                <tbody vs-repeat vs-scroll-parent="window">
                     <tr class="table-listing__row" data-ng-repeat="row in group.fabrics.rows">
                         <!-- <td class="table-listing__cell table__column--3 ng-hide">
                             <div data-ng-if="row.fabric_name">

=== modified file 'src/maasserver/static/partials/node-events.html'
--- src/maasserver/static/partials/node-events.html	2017-04-05 02:36:06 +0000
+++ src/maasserver/static/partials/node-events.html	2017-06-15 11:16:28 +0000
@@ -35,7 +35,7 @@
                             <th class="table-col--20">Time</th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody vs-repeat vs-scroll-parent="window">
                         <tr
                             data-ng-repeat="event in events | filter:search | orderByDate:'created':'id' track by event.id">
                             <td class="table-col--1 u-padding--right-none u-padding--left-none">

=== modified file 'src/maasserver/static/partials/nodes-list.html'
--- src/maasserver/static/partials/nodes-list.html	2017-05-25 13:56:07 +0000
+++ src/maasserver/static/partials/nodes-list.html	2017-06-15 11:16:28 +0000
@@ -452,7 +452,7 @@
                             <th class="table-col--5"></th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody vs-repeat vs-scroll-parent="window">
                         <tr data-ng-repeat="interface in device.interfaces">
                             <td class="table-col--20" aria-label="MAC address">
                                 <input type="text" id="mac-address1" placeholder="00:00:00:00:00:00"
@@ -857,7 +857,7 @@
                     </th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody vs-repeat vs-scroll-parent="window">
                 <!-- XXX rvba 2015-02-25 - Need to add e2e test. This really needs lots of tests. -->
                 <tr
                     data-ng-repeat="device in tabs.devices.filtered_items = (devices | nodesFilter:tabs.devices.search | orderBy:tabs.devices.predicate:tabs.devices.reverse) track by device.system_id"
@@ -921,7 +921,7 @@
                     </th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody vs-repeat vs-scroll-parent="window">
                 <!-- XXX rvba 2015-02-25 - Need to add e2e test. This really needs lots of tests. -->
                 <tr
                     data-ng-repeat="controller in tabs.controllers.filtered_items = (controllers | nodesFilter:tabs.controllers.search | orderBy:tabs.controllers.predicate:tabs.controllers.reverse) track by controller.system_id"

=== modified file 'src/maasserver/static/partials/pods-list.html'
--- src/maasserver/static/partials/pods-list.html	2017-05-01 20:31:46 +0000
+++ src/maasserver/static/partials/pods-list.html	2017-06-15 11:16:28 +0000
@@ -123,7 +123,7 @@
                         </div>
                     </div>
                 </header>
-                <div class="table__body">
+                <div class="table__body" vs-repeat vs-scroll-parent="window">
                     <div class="table__row" data-ng-repeat="pod in filteredItems = (pods | nodesFilter:search | orderBy:predicate:reverse) track by pod.id"
                         data-ng-class="{ selected: pod.$selected, 'is-active': pod.$selected && pod.action_failed }">
                         <div data-ng-if="isSuperUser()">

=== modified file 'src/maasserver/templates/maasserver/js-conf.html'
--- src/maasserver/templates/maasserver/js-conf.html	2017-03-10 15:30:26 +0000
+++ src/maasserver/templates/maasserver/js-conf.html	2017-06-15 11:16:28 +0000
@@ -42,6 +42,9 @@
     src="{% url "merge" filename="sticky.js" %}?v={{files_version}}">
 </script>
 <script type="text/javascript"
+    src="{% url "merge" filename="vs-repeat.js" %}?v={{files_version}}">
+</script>
+<script type="text/javascript"
     src="{% url "merge" filename="maas-angular.js" %}?v={{files_version}}">
 </script>
 

=== modified file 'src/maasserver/views/combo.py'
--- src/maasserver/views/combo.py	2017-05-25 13:56:07 +0000
+++ src/maasserver/views/combo.py	2017-06-15 11:16:28 +0000
@@ -53,6 +53,12 @@
             "js/angular/3rdparty/sticky.js",
         ]
     },
+    "vs-repeat.js": {
+        "content_type": "text/javascript; charset=UTF-8",
+        "files": [
+            "js/angular/3rdparty/vs-repeat.js",
+        ]
+    },
     "maas-angular.js": {
         "content_type": "text/javascript; charset=UTF-8",
         "files": [