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

[Richard McCartney]

Backport: Commit 6088: 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

[Mike Pontillo (mpontillo)]

I tested this and it's working great on my MAAS 2.2 setup. Nice work!

However, this cannot land unless we fulfill the licensing requirements for including this third-party code[1]. (I guess that means the original branch that landed in trunk needs to be fixed, too; I didn't review that one.)

Per the MIT license, we need to acknowledge our usage of his code by redistributing the copyright notice and MIT license stating freely-available permission to copy the work.

Perhaps we should have some kind of "About" page in MAAS which includes a list of all third-party code included in MAAS, like I've seen many other projects do.

For now, since I don't think we want to design an about page at the moment, if we just modify the 'vs-repeat.js' file to include the MIT license in JavaScript comments at the top, in my (non-lawyer) opinion we would fulfill the requirements of the license.

[1]: https://github.com/kamilkp/angular-vs-repeat/blob/master/LICENSE

review: Needs Fixing

[Andres Rodriguez (andreserl)]

Actually, the way we have always done this is by :

1. having the right headers
2. updating the packaging to highlight this file is with a different license.

Since we are now releasing snaps that do not include a debian/copyright file, we need to include a LICENSE file listing all those files with different licenses.

[Richard McCartney (ricgard)]

Mike can you just check now, I've added the license

Rich

review: Needs Resubmitting

[Mike Pontillo (mpontillo)]

Looks good to me. Per the comments from Andres above, we need to also update the licenses that ship with our packaging (both snap and deb). But that can be done in a separate branch.

review: Approve

=== 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-19 16:17:11 +0000
@@ -0,0 +1,629 @@
+// The MIT License (MIT)
+
+// Copyright (c) 2014 kamilkp
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// 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-19 16:17:11 +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-19 16:17:11 +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-19 16:17:11 +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-19 16:17:11 +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-19 16:17:11 +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-04-13 10:43:13 +0000
+++ src/maasserver/static/partials/nodes-list.html	2017-06-19 16:17:11 +0000
@@ -448,7 +448,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"
@@ -853,7 +853,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"
@@ -917,7 +917,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-19 16:17:11 +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-19 16:17:11 +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-04-06 15:11:01 +0000
+++ src/maasserver/views/combo.py	2017-06-19 16:17:11 +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": [