fix(google): replace stateful MIG image input with dropdown (#7210) (#…

…7227)
spinnaker · Jul 15, 2019 · 66249c2 · 66249c2
1 parent 8553b1e
commit 66249c2
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 48 deletions.
diff --git a/app/scripts/modules/google/src/gce.module.ts b/app/scripts/modules/google/src/gce.module.ts
@@ -9,6 +9,7 @@ import { GCE_TCP_LOAD_BALANCER_CTRL } from './loadBalancer/configure/tcp/gceCrea
 import { IAP_INTERCEPTOR } from 'google/interceptors/iap.interceptor';
 import { LOAD_BALANCER_SET_TRANSFORMER } from './loadBalancer/loadBalancer.setTransformer';
 import { GCE_SERVER_GROUP_DISK_DESCRIPTIONS } from './serverGroup/details/ServerGroupDiskDescriptions';
+import { GceImageReader } from './image';
 import './help/gce.help';
 
 import './logo/gce.logo.less';
@@ -60,7 +61,6 @@ module(GOOGLE_MODULE, [
   require('./securityGroup/securityGroup.reader').name,
   require('./subnet/subnet.renderer').name,
   require('./validation/applicationName.validator').name,
-  require('./image/image.reader').name,
   require('./cache/cacheConfigurer.service').name,
   require('./common/xpnNaming.gce.service').name,
 ]).config(() => {
@@ -73,7 +73,7 @@ module(GOOGLE_MODULE, [
       configurer: 'gceCacheConfigurer',
     },
     image: {
-      reader: 'gceImageReader',
+      reader: GceImageReader,
     },
     serverGroup: {
       transformer: 'gceServerGroupTransformer',

diff --git a/app/scripts/modules/google/src/image/ImageSelect.tsx b/app/scripts/modules/google/src/image/ImageSelect.tsx
@@ -5,12 +5,10 @@ import * as React from 'react';
 import { Async, AutocompleteResult, Option } from 'react-select';
 import { react2angular } from 'react2angular';
 
-interface IImage {
-  imageName: string;
-}
+import { IGceImage } from '../image';
 
 interface IImageSelectProps {
-  availableImages: IImage[];
+  availableImages: IGceImage[];
   selectedImage: string;
   selectImage: (image: string, target?: any) => void;
   target?: any;

diff --git a/app/scripts/modules/google/src/image/image.reader.js b/app/scripts/modules/google/src/image/image.reader.js
diff --git a/app/scripts/modules/google/src/image/image.reader.ts b/app/scripts/modules/google/src/image/image.reader.ts
@@ -0,0 +1,21 @@
+import { IPromise } from 'angular';
+
+import { API } from '@spinnaker/core';
+
+export interface IGceImage {
+  imageName: string;
+}
+
+export class GceImageReader {
+  public static findImages(params: { account?: string; provider?: string; q?: string }): IPromise<IGceImage[]> {
+    return API.one('images/find')
+      .withParams(params)
+      .get()
+      .catch(() => [] as IGceImage[]);
+  }
+
+  public static getImage(/*amiName: string, region: string, credentials: string*/): IPromise<IGceImage> {
+    // GCE images are not regional so we don't need to retrieve ids scoped to regions.
+    return null;
+  }
+}
diff --git a/app/scripts/modules/google/src/image/index.ts b/app/scripts/modules/google/src/image/index.ts
@@ -0,0 +1,2 @@
+export * from './image.reader';
+export * from './ImageSelect';
diff --git a/app/scripts/modules/google/src/serverGroup/configure/serverGroupConfiguration.service.js b/app/scripts/modules/google/src/serverGroup/configure/serverGroupConfiguration.service.js
@@ -17,22 +17,21 @@ import { GCE_HEALTH_CHECK_READER } from 'google/healthCheck/healthCheck.read.ser
 import { getHealthCheckOptions } from 'google/healthCheck/healthCheckUtils';
 import { GCE_HTTP_LOAD_BALANCER_UTILS } from 'google/loadBalancer/httpLoadBalancerUtils.service';
 import { LOAD_BALANCER_SET_TRANSFORMER } from 'google/loadBalancer/loadBalancer.setTransformer';
+import { GceImageReader } from 'google/image';
 
 module.exports = angular
   .module('spinnaker.serverGroup.configure.gce.configuration.service', [
     LOAD_BALANCER_SET_TRANSFORMER,
     SECURITY_GROUP_READER,
     CACHE_INITIALIZER_SERVICE,
     LOAD_BALANCER_READ_SERVICE,
-    require('../../image/image.reader').name,
     require('../../instance/gceInstanceType.service').name,
     require('./../../instance/custom/customInstanceBuilder.gce.service').name,
     GCE_HTTP_LOAD_BALANCER_UTILS,
     GCE_HEALTH_CHECK_READER,
     require('./wizard/securityGroups/tagManager.service').name,
   ])
   .factory('gceServerGroupConfigurationService', [
-    'gceImageReader',
     'securityGroupReader',
     'gceInstanceTypeService',
     'cacheInitializer',
@@ -44,7 +43,6 @@ module.exports = angular
     'gceTagManager',
     'gceLoadBalancerSetTransformer',
     function(
-      gceImageReader,
       securityGroupReader,
       gceInstanceTypeService,
       cacheInitializer,
@@ -144,7 +142,7 @@ module.exports = angular
       }
 
       function loadAllImages(account) {
-        return gceImageReader.findImages({
+        return GceImageReader.findImages({
           account: account,
           provider: 'gce',
           q: '*',

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
@@ -12,6 +12,8 @@ import {
   NgGCEImageArtifactDelegate,
 } from '@spinnaker/core';
 
+import { GceImageReader } from 'google/image';
+
 module.exports = angular
   .module('spinnaker.google.serverGroup.configure.wizard.basicSettings.controller', [
     require('@uirouter/angularjs').default,
@@ -26,11 +28,10 @@ module.exports = angular
     '$controller',
     '$uibModalStack',
     '$state',
-    'imageReader',
-    function($scope, $controller, $uibModalStack, $state, imageReader) {
+    function($scope, $controller, $uibModalStack, $state) {
       function fetchImagesForAccount() {
         return Observable.fromPromise(
-          imageReader.findImages({
+          GceImageReader.findImages({
             account: $scope.command.credentials,
             provider: $scope.command.selectedProvider,
             q: '*',
@@ -58,7 +59,7 @@ module.exports = angular
         this,
         $controller('BasicSettingsMixin', {
           $scope: $scope,
-          imageReader: imageReader,
+          imageReader: GceImageReader,
           $uibModalStack: $uibModalStack,
           $state: $state,
         }),

diff --git a/app/scripts/modules/google/src/serverGroup/details/stateful/UpdateBootImageButton.tsx b/app/scripts/modules/google/src/serverGroup/details/stateful/UpdateBootImageButton.tsx
@@ -3,16 +3,17 @@ import * as React from 'react';
 import {
   Application,
   FormikFormField,
+  IFormInputProps,
   IModalComponentProps,
   ReactModal,
   TaskMonitor,
-  TextInput,
   WizardModal,
   WizardPage,
 } from '@spinnaker/core';
 
 import { IGceServerGroup } from 'google/domain';
 import { StatefulMIGService } from './StatefulMIGService';
+import { GceImageReader, IGceImage, ImageSelect } from 'google/image';
 
 interface IUpdateBootImageButtonProps {
   application: Application;
@@ -39,6 +40,7 @@ interface IUpdateBootImageModalProps extends IModalComponentProps, IUpdateBootIm
 }
 
 interface IUpdateBootImageModalState {
+  availableImages: IGceImage[];
   taskMonitor: TaskMonitor;
 }
 
@@ -50,6 +52,7 @@ class UpdateBootImageModal extends React.Component<IUpdateBootImageModalProps, I
   public constructor(props: IUpdateBootImageModalProps) {
     super(props);
     this.state = {
+      availableImages: [],
       taskMonitor: new TaskMonitor({
         application: props.application,
         title: 'Updating Boot Image',
@@ -58,13 +61,22 @@ class UpdateBootImageModal extends React.Component<IUpdateBootImageModalProps, I
     };
   }
 
+  public componentDidMount() {
+    GceImageReader.findImages({
+      account: this.props.serverGroup.account,
+      provider: 'gce',
+      q: '*',
+    }).then(images => {
+      this.setState({ availableImages: images });
+    });
+  }
+
   private submit = (values: IUpdateBootImageModalFormValues): void => {
     this.state.taskMonitor.submit(() =>
       StatefulMIGService.statefullyUpdateBootDisk(this.props.application.name, values.image, this.props.serverGroup),
     );
   };
 
-  // todo(mneterval): replace TextInput with new, performant React GceImageSelector
   public render() {
     return (
       <WizardModal<IUpdateBootImageModalFormValues>
@@ -74,13 +86,27 @@ class UpdateBootImageModal extends React.Component<IUpdateBootImageModalProps, I
         initialValues={{ image: this.props.bootImage }}
         submitButtonLabel="Update Image"
         taskMonitor={this.state.taskMonitor}
-        render={({ nextIdx, wizard }) => (
+        render={({ formik, nextIdx, wizard }) => (
           <WizardPage
             label="Boot Image"
             wizard={wizard}
             order={nextIdx()}
             render={() => (
-              <FormikFormField input={TextInput} label="Enter name of new boot image:" name="image" required={true} />
+              <FormikFormField
+                fastField={false}
+                input={(props: IFormInputProps) => (
+                  <div className="full-width" style={{ height: '225px' }}>
+                    <ImageSelect
+                      availableImages={this.state.availableImages}
+                      selectedImage={props.value}
+                      selectImage={(imageName: string) => formik.setFieldValue('image', imageName)}
+                    />
+                  </div>
+                )}
+                label="Boot image name:"
+                name="image"
+                required={true}
+              />
             )}
           />
         )}