fix(aws): remove debounce from ui-select, use inf-scroll

spinnaker · May 5, 2017 · 4f129e9 · 4f129e9
1 parent 4d844f1
commit 4f129e9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/...s/modules/amazon/serverGroup/details/securityGroup/editSecurityGroups.modal.controller.js b/...s/modules/amazon/serverGroup/details/securityGroup/editSecurityGroups.modal.controller.js
@@ -27,14 +27,30 @@ module.exports = angular.module('spinnaker.serverGroup.details.aws.securityGroup
       verification: {},
     };
 
+    this.infiniteScroll = {
+      currentItems: 20,
+    };
+
+    this.addMoreItems = () => this.infiniteScroll.currentItems += 20;
+
+    this.resetCurrentItems = () => this.infiniteScroll.currentItems = 20;
+
     this.isValid = () => this.state.verification.verified;
 
     securityGroupReader.getAllSecurityGroups().then(allGroups => {
       let account = serverGroup.account,
           region = serverGroup.region,
           vpcId = serverGroup.vpcId;
       this.availableSecurityGroups = _.get(allGroups, [account, 'aws', region].join('.'), [])
-        .filter(group => group.vpcId === vpcId);
+        .filter(group => group.vpcId === vpcId).sort((a, b) => {
+          if (this.command.securityGroups.some(g => g.id === a.id)) {
+            return -1;
+          }
+          if (this.command.securityGroups.some(g => g.id === b.id)) {
+            return 1;
+          }
+          return a.name.localeCompare(b.name);
+        });
       this.state.securityGroupsLoaded = true;
     });
 

diff --git a/app/scripts/modules/amazon/serverGroup/details/securityGroup/editSecurityGroups.modal.html b/app/scripts/modules/amazon/serverGroup/details/securityGroup/editSecurityGroups.modal.html
@@ -10,10 +10,12 @@ <h3>Edit Security Groups for {{$ctrl.serverGroup.name}}</h3>
         <div class="col-md-10 col-md-offset-1">
           <ui-select multiple
                      ng-model="$ctrl.command.securityGroups"
-                     ng-model-options="{debounce: 300}"
+                     uis-open-close="$ctrl.resetCurrentItems()"
                      class="form-control input-sm">
             <ui-select-match>{{$item.name}} ({{$item.id}})</ui-select-match>
-            <ui-select-choices repeat="securityGroup as securityGroup in $ctrl.availableSecurityGroups | anyFieldFilter: {name: $select.search, id: $select.search}">
+            <ui-select-choices repeat="securityGroup as securityGroup in $ctrl.availableSecurityGroups | filter: $select.search | limitTo: $ctrl.infiniteScroll.currentItems"
+                               infinite-scroll="$ctrl.addMoreItems()"
+                               infinite-scroll-distance="4">
               <span ng-bind-html="securityGroup.name | highlight: $select.search"></span>
               (<span ng-bind-html="securityGroup.id  | highlight: $select.search"></span>)
             </ui-select-choices>