perf(google): avoid unnecessary fetching and filtering of gce images (#…

…7115)
spinnaker · Jun 13, 2019 · 5cc4146 · 5cc4146
1 parent b8aebd7
commit 5cc4146
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 37 deletions.
diff --git a/app/scripts/modules/google/src/serverGroup/configure/serverGroupConfiguration.service.js b/app/scripts/modules/google/src/serverGroup/configure/serverGroupConfiguration.service.js
@@ -90,7 +90,7 @@ module.exports = angular
         } else {
           imageLoader = command.viewState.imageId
             ? loadImagesFromImageName(command)
-            : loadImagesFromApplicationName(application, command.selectedProvider);
+            : loadImagesFromApplicationName(application, command.selectedProvider, command.credentials);
         }
 
         return $q
@@ -101,7 +101,7 @@ module.exports = angular
             subnets: SubnetReader.listSubnetsByProvider('gce'),
             loadBalancers: loadBalancerReader.listLoadBalancers('gce'),
             packageImages: imageLoader,
-            allImages: loadAllImages(),
+            allImages: loadAllImages(command.credentials),
             instanceTypes: gceInstanceTypeService.getAllTypesByRegion(),
             persistentDiskTypes: $q.when(angular.copy(persistentDiskTypes)),
             authScopes: $q.when(angular.copy(authScopes)),
@@ -153,16 +153,18 @@ module.exports = angular
           });
       }
 
-      function loadImagesFromApplicationName(application, provider) {
+      function loadImagesFromApplicationName(application, provider, account) {
         return gceImageReader.findImages({
+          account: account,
           provider: provider,
           q: application.name.replace(/_/g, '[_\\-]') + '*',
         });
       }
 
       // Used to populate the image selection dropdowns in the persistent disk configurer.
-      function loadAllImages() {
+      function loadAllImages(account) {
         return gceImageReader.findImages({
+          account: account,
           provider: 'gce',
           q: '*',
         });
@@ -181,6 +183,7 @@ module.exports = angular
         }
 
         return gceImageReader.findImages({
+          account: command.credentials,
           provider: command.selectedProvider,
           q: packageBase + '*',
         });

diff --git a/...ules/google/src/serverGroup/configure/wizard/advancedSettings/diskConfigurer.component.ts b/...ules/google/src/serverGroup/configure/wizard/advancedSettings/diskConfigurer.component.ts
@@ -159,7 +159,7 @@ const gceDiskConfigurer: IComponentOptions = {
                            class="form-control input-sm"
                            required>
                   <ui-select-match placeholder="Select an image...">{{$select.selected.imageName || 'Select an image...'}}</ui-select-match>
-                  <ui-select-choices repeat="image.imageName as image in $ctrl.command.backingData.allImages | filter: { account: $ctrl.command.credentials } | orderBy: 'imageName'">
+                  <ui-select-choices repeat="image.imageName as image in $ctrl.command.backingData.allImages | filter: { imageName: $select.search }">
                     <span ng-bind-html="image.imageName | highlight: $select.search"></span>
                   </ui-select-choices>
                 </ui-select>

diff --git a/...ipts/modules/google/src/serverGroup/configure/wizard/location/basicSettings.controller.js b/...ipts/modules/google/src/serverGroup/configure/wizard/location/basicSettings.controller.js
@@ -21,45 +21,28 @@ module.exports = angular
     '$state',
     'imageReader',
     function($scope, $controller, $uibModalStack, $state, imageReader) {
-      function searchImages(q) {
-        $scope.command.backingData.filtered.images = [
-          {
-            message: `<loading-spinner size="'nano'"></loading-spinner> Finding results matching "${q}"...`,
-          },
-        ];
+      function fetchImagesForAccount() {
         return Observable.fromPromise(
           imageReader.findImages({
+            account: $scope.command.credentials,
             provider: $scope.command.selectedProvider,
-            q: q,
+            q: '*',
           }),
         );
       }
 
       const imageSearchResultsStream = new Subject();
+      imageSearchResultsStream.switchMap(fetchImagesForAccount).subscribe(images => {
+        $scope.command.backingData.allImages = images;
+        $scope.command.backingData.packageImages = images;
+      });
 
-      imageSearchResultsStream
-        .debounceTime(250)
-        .switchMap(searchImages)
-        .subscribe(function(data) {
-          $scope.command.backingData.filtered.images = data.map(function(image) {
-            if (image.message && !image.imageName) {
-              return image;
-            }
-            return {
-              account: image.account,
-              imageName: image.imageName,
-            };
-          });
-          $scope.command.backingData.packageImages = $scope.command.backingData.filtered.images;
-        });
-
-      this.searchImages = function(q) {
-        imageSearchResultsStream.next(q);
+      this.accountUpdated = () => {
+        imageSearchResultsStream.next();
       };
 
       this.enableAllImageSearch = () => {
         $scope.command.viewState.useAllImageSelection = true;
-        this.searchImages('');
       };
 
       angular.extend(

diff --git a/app/scripts/modules/google/src/serverGroup/configure/wizard/location/basicSettings.html b/app/scripts/modules/google/src/serverGroup/configure/wizard/location/basicSettings.html
@@ -10,6 +10,7 @@
           field="credentials"
           accounts="command.backingData.accounts"
           provider="'gce'"
+          on-change="basicSettingsCtrl.accountUpdated()"
         ></account-select-field>
       </div>
     </div>
@@ -124,12 +125,8 @@
             >{{$select.selected.imageName || 'Search for an image...'}}</ui-select-match
           >
           <ui-select-choices
-            repeat="result.imageName as result in command.backingData.filtered.images | filter: { account: command.credentials } | orderBy: 'imageName'"
-            refresh="basicSettingsCtrl.searchImages($select.search)"
-            ui-disable-choice="result.message"
-            reset-search-input="false"
+            repeat="result.imageName as result in command.backingData.allImages | filter: { imageName: $select.search }"
           >
-            <span ng-bind-html="result.message"></span>
             <span ng-bind-html="result.imageName | highlight: $select.search"></span>
           </ui-select-choices>
         </ui-select>
@@ -138,7 +135,7 @@
         <ui-select class="form-control input-sm" required ng-model="command.image">
           <ui-select-match placeholder="Pick an image">{{$select.selected.imageName}}</ui-select-match>
           <ui-select-choices
-            repeat="image.imageName as image in command.backingData.filtered.images | filter: { imageName: $select.search } | orderBy: '-imageName'"
+            repeat="image.imageName as image in command.backingData.allImages | filter: { imageName: $select.search }"
           >
             <span ng-bind-html="image.imageName | highlight: $select.search"></span>
           </ui-select-choices>