@spinnaker/appengine 0.0.0-main-2

package/src/pipeline/stages/deployAppengineConfig/DeployAppengineConfigForm.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { IAccount, IArtifact, IExpectedArtifact, IFormikStageConfigInjectedProps } from '@spinnaker/core';
+import {
+  AccountService,
+  ArtifactTypePatterns,
+  excludeAllTypesExcept,
+  StageArtifactSelectorDelegate,
+} from '@spinnaker/core';
+import { FormikAccountRegionSelector } from '../../../common/FormikAccountRegionSelector';
+
+export interface IAppEngineDeployConfigSettingsState {
+  accounts: IAccount[];
+}
+
+export class DeployAppengineConfigForm extends React.Component<
+  IFormikStageConfigInjectedProps,
+  IAppEngineDeployConfigSettingsState
+> {
+  private static readonly excludedArtifactTypes = excludeAllTypesExcept(
+    ArtifactTypePatterns.BITBUCKET_FILE,
+    ArtifactTypePatterns.CUSTOM_OBJECT,
+    ArtifactTypePatterns.EMBEDDED_BASE64,
+    ArtifactTypePatterns.GCS_OBJECT,
+    ArtifactTypePatterns.GITHUB_FILE,
+    ArtifactTypePatterns.GITLAB_FILE,
+    ArtifactTypePatterns.S3_OBJECT,
+    ArtifactTypePatterns.HTTP_FILE,
+    ArtifactTypePatterns.ORACLE_OBJECT,
+  );
+
+  private destroy$ = new Subject();
+  public state: IAppEngineDeployConfigSettingsState = {
+    accounts: [],
+  };
+
+  public componentDidMount() {
+    observableFrom(AccountService.listAccounts('appengine'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => this.setState({ accounts }));
+  }
+
+  private onTemplateArtifactEdited = (artifact: IArtifact, name: string) => {
+    this.props.formik.setFieldValue(`${name}.id`, null);
+    this.props.formik.setFieldValue(`${name}.artifact`, artifact);
+    this.props.formik.setFieldValue(`${name}.account`, artifact.artifactAccount);
+  };
+
+  private onTemplateArtifactSelected = (id: string, name: string) => {
+    this.props.formik.setFieldValue(`${name}.id`, id);
+    this.props.formik.setFieldValue(`${name}.artifact`, null);
+  };
+
+  private removeInputArtifact = (name: string) => {
+    this.props.formik.setFieldValue(name, null);
+  };
+
+  private getInputArtifact = (stage: any, name: string) => {
+    if (!stage[name]) {
+      return {
+        account: '',
+        id: '',
+      };
+    } else {
+      return stage[name];
+    }
+  };
+
+  public render() {
+    const stage = this.props.formik.values;
+    const accounts = this.state.accounts;
+    return (
+      <div>
+        <div className="col-md-offset-0 col-md-9">
+          <h4>Basic Settings</h4>
+        </div>
+        <div>
+          <FormikAccountRegionSelector
+            componentName={''}
+            accounts={accounts}
+            application={this.props.application}
+            cloudProvider={'appengine'}
+            credentialsField={'account'}
+            formik={this.props.formik}
+          />
+        </div>
+        <div className="col-md-offset-0 col-md-9">
+          <h4>Configuration Settings</h4>
+        </div>
+        <div>
+          <div className="col-md-offset-1 col-md-9">
+            <StageArtifactSelectorDelegate
+              artifact={this.getInputArtifact(stage, 'cronArtifact').artifact}
+              excludedArtifactTypePatterns={DeployAppengineConfigForm.excludedArtifactTypes}
+              expectedArtifactId={this.getInputArtifact(stage, 'cronArtifact').id}
+              label="Cron Artifact"
+              onArtifactEdited={(artifact) => {
+                this.onTemplateArtifactEdited(artifact, 'cronArtifact');
+              }}
+              helpKey={''}
+              onExpectedArtifactSelected={(artifact: IExpectedArtifact) =>
+                this.onTemplateArtifactSelected(artifact.id, 'cronArtifact')
+              }
+              pipeline={this.props.pipeline}
+              stage={stage}
+            />
+          </div>
+          <div className="col-md-1">
+            <div className="form-control-static">
+              <button onClick={() => this.removeInputArtifact('cronArtifact')}>
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove field</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="col-md-offset-1 col-md-9">
+            <StageArtifactSelectorDelegate
+              artifact={this.getInputArtifact(stage, 'dispatchArtifact').artifact}
+              excludedArtifactTypePatterns={DeployAppengineConfigForm.excludedArtifactTypes}
+              expectedArtifactId={this.getInputArtifact(stage, 'dispatchArtifact').id}
+              label="Dispatch Artifact"
+              onArtifactEdited={(artifact) => {
+                this.onTemplateArtifactEdited(artifact, 'dispatchArtifact');
+              }}
+              helpKey={''}
+              onExpectedArtifactSelected={(artifact: IExpectedArtifact) =>
+                this.onTemplateArtifactSelected(artifact.id, 'dispatchArtifact')
+              }
+              pipeline={this.props.pipeline}
+              stage={stage}
+            />
+          </div>
+          <div className="col-md-1">
+            <div className="form-control-static">
+              <button onClick={() => this.removeInputArtifact('dispatchArtifact')}>
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove field</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="col-md-offset-1 col-md-9">
+            <StageArtifactSelectorDelegate
+              artifact={this.getInputArtifact(stage, 'indexArtifact').artifact}
+              excludedArtifactTypePatterns={DeployAppengineConfigForm.excludedArtifactTypes}
+              expectedArtifactId={this.getInputArtifact(stage, 'indexArtifact').id}
+              label="Index Artifact"
+              onArtifactEdited={(artifact) => {
+                this.onTemplateArtifactEdited(artifact, 'indexArtifact');
+              }}
+              helpKey={''}
+              onExpectedArtifactSelected={(artifact: IExpectedArtifact) =>
+                this.onTemplateArtifactSelected(artifact.id, 'indexArtifact')
+              }
+              pipeline={this.props.pipeline}
+              stage={stage}
+            />
+          </div>
+          <div className="col-md-1">
+            <div className="form-control-static">
+              <button onClick={() => this.removeInputArtifact('indexArtifact')}>
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove field</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="col-md-offset-1 col-md-9">
+            <StageArtifactSelectorDelegate
+              artifact={this.getInputArtifact(stage, 'queueArtifact').artifact}
+              excludedArtifactTypePatterns={DeployAppengineConfigForm.excludedArtifactTypes}
+              expectedArtifactId={this.getInputArtifact(stage, 'queueArtifact').id}
+              label="Queue Artifact"
+              onArtifactEdited={(artifact) => {
+                this.onTemplateArtifactEdited(artifact, 'queueArtifact');
+              }}
+              helpKey={''}
+              onExpectedArtifactSelected={(artifact: IExpectedArtifact) =>
+                this.onTemplateArtifactSelected(artifact.id, 'queueArtifact')
+              }
+              pipeline={this.props.pipeline}
+              stage={stage}
+            />
+          </div>
+          <div className="col-md-1">
+            <div className="form-control-static">
+              <button onClick={() => this.removeInputArtifact('queueArtifact')}>
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove field</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/pipeline/stages/deployAppengineConfig/DeployAppengineConfigurationConfig.tsx

@@ -0,0 +1,34 @@
+import type { FormikErrors } from 'formik';
+import { cloneDeep } from 'lodash';
+import React from 'react';
+
+import type { IStage, IStageConfigProps } from '@spinnaker/core';
+import { FormikStageConfig, FormValidator } from '@spinnaker/core';
+
+import { DeployAppengineConfigForm } from './DeployAppengineConfigForm';
+
+export function DeployAppengineConfigurationConfig({ application, pipeline, stage, updateStage }: IStageConfigProps) {
+  const stageWithDefaults = React.useMemo(() => {
+    return {
+      ...cloneDeep(stage),
+    };
+  }, []);
+
+  return (
+    <FormikStageConfig
+      application={application}
+      onChange={updateStage}
+      pipeline={pipeline}
+      stage={stageWithDefaults}
+      validate={validateDeployAppengineConfigurationStage}
+      render={(props) => <DeployAppengineConfigForm {...props} />}
+    />
+  );
+}
+
+export function validateDeployAppengineConfigurationStage(stage: IStage): FormikErrors<IStage> {
+  const formValidator = new FormValidator(stage);
+  formValidator.field('account').required();
+  formValidator.field('region').required();
+  return formValidator.validateForm();
+}

package/src/pipeline/stages/deployAppengineConfig/deployAppengineConfigStage.ts

@@ -0,0 +1,19 @@
+import { ExecutionArtifactTab, ExecutionDetailsTasks, Registry } from '@spinnaker/core';
+
+import {
+  DeployAppengineConfigurationConfig,
+  validateDeployAppengineConfigurationStage,
+} from './DeployAppengineConfigurationConfig';
+
+export const DEPLOY_APPENGINE_CONFIG_STAGE_KEY = 'deployAppEngineConfiguration';
+
+Registry.pipeline.registerStage({
+  label: 'Deploy App Engine Configuration',
+  description: 'Deploy index, dispatch, cron, and queue configuration to App Engine.',
+  key: DEPLOY_APPENGINE_CONFIG_STAGE_KEY,
+  component: DeployAppengineConfigurationConfig,
+  producesArtifacts: false,
+  cloudProvider: 'appengine',
+  executionDetailsSections: [ExecutionDetailsTasks, ExecutionArtifactTab],
+  validateFn: validateDeployAppengineConfigurationStage,
+});

package/src/pipeline/stages/destroyAsg/appengineDestroyAsgStage.ts

@@ -0,0 +1,45 @@
+import { module } from 'angular';
+
+import { Registry } from '@spinnaker/core';
+
+import { AppengineStageCtrl } from '../appengineStage.controller';
+import type { IAppengineStageScope } from '../../../domain';
+
+class AppengineDestroyAsgStageCtrl extends AppengineStageCtrl {
+  public static $inject = ['$scope'];
+  constructor(protected $scope: IAppengineStageScope) {
+    super($scope);
+
+    super.setAccounts().then(() => {
+      super.setStageRegion();
+    });
+
+    super.setStageCloudProvider();
+    super.setTargets();
+    super.setStageCredentials();
+  }
+}
+
+export const APPENGINE_DESTROY_ASG_STAGE = 'spinnaker.appengine.pipeline.stage.destroyAsgStage';
+
+module(APPENGINE_DESTROY_ASG_STAGE, [])
+  .config(() => {
+    Registry.pipeline.registerStage({
+      provides: 'destroyServerGroup',
+      key: 'destroyServerGroup',
+      cloudProvider: 'appengine',
+      templateUrl: require('./destroyAsgStage.html'),
+      executionStepLabelUrl: require('./destroyAsgStepLabel.html'),
+      validators: [
+        {
+          type: 'targetImpedance',
+          message:
+            'This pipeline will attempt to destroy a server group without deploying a new version into the same cluster.',
+        },
+        { type: 'requiredField', fieldName: 'cluster' },
+        { type: 'requiredField', fieldName: 'target' },
+        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+      ],
+    });
+  })
+  .controller('appengineDestroyAsgStageCtrl', AppengineDestroyAsgStageCtrl);

package/src/pipeline/stages/destroyAsg/destroyAsgStage.html

@@ -0,0 +1,16 @@
+<div ng-controller="appengineDestroyAsgStageCtrl as destroyAsgStageCtrl" class="form-horizontal">
+  <div ng-if="!pipeline.strategy">
+    <account-region-cluster-selector
+      application="application"
+      single-region="true"
+      disable-region-select="true"
+      on-account-update="destroyAsgStageCtrl.setStageRegion()"
+      component="stage"
+      accounts="accounts"
+    >
+    </account-region-cluster-selector>
+  </div>
+  <stage-config-field label="Target">
+    <target-select model="stage" options="targets"></target-select>
+  </stage-config-field>
+</div>

package/src/pipeline/stages/destroyAsg/destroyAsgStepLabel.html

@@ -0,0 +1 @@
+<span class="task-label"> Destroy Server Group: {{step.context.serverGroupName}} ({{step.context.region}}) </span>

package/src/pipeline/stages/disableAsg/appengineDisableAsgStage.ts

@@ -0,0 +1,54 @@
+import { module } from 'angular';
+
+import { Registry } from '@spinnaker/core';
+
+import { AppengineStageCtrl } from '../appengineStage.controller';
+import { AppengineHealth } from '../../../common/appengineHealth';
+import type { IAppengineStageScope } from '../../../domain';
+
+class AppengineDisableAsgStageCtrl extends AppengineStageCtrl {
+  public static $inject = ['$scope'];
+  constructor(protected $scope: IAppengineStageScope) {
+    super($scope);
+
+    super.setAccounts().then(() => {
+      super.setStageRegion();
+    });
+
+    super.setStageCloudProvider();
+    super.setTargets();
+    super.setStageCredentials();
+
+    if (
+      $scope.stage.isNew &&
+      $scope.application.attributes.platformHealthOnlyShowOverride &&
+      $scope.application.attributes.platformHealthOnly
+    ) {
+      $scope.stage.interestingHealthProviderNames = [AppengineHealth.PLATFORM];
+    }
+  }
+}
+
+export const APPENGINE_DISABLE_ASG_STAGE = 'spinnaker.appengine.pipeline.stage.disableAsgStage';
+
+module(APPENGINE_DISABLE_ASG_STAGE, [])
+  .config(() => {
+    Registry.pipeline.registerStage({
+      provides: 'disableServerGroup',
+      key: 'disableServerGroup',
+      cloudProvider: 'appengine',
+      templateUrl: require('./disableAsgStage.html'),
+      executionStepLabelUrl: require('./disableAsgStepLabel.html'),
+      validators: [
+        {
+          type: 'targetImpedance',
+          message:
+            'This pipeline will attempt to disable a server group without deploying a new version into the same cluster.',
+        },
+        { type: 'requiredField', fieldName: 'cluster' },
+        { type: 'requiredField', fieldName: 'target' },
+        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+      ],
+    });
+  })
+  .controller('appengineDisableAsgStageCtrl', AppengineDisableAsgStageCtrl);

package/src/pipeline/stages/disableAsg/disableAsgStage.html

@@ -0,0 +1,18 @@
+<div ng-controller="appengineDisableAsgStageCtrl as disableAsgStageCtrl" class="form-horizontal">
+  <div ng-if="!pipeline.strategy">
+    <account-region-cluster-selector
+      application="application"
+      component="stage"
+      single-region="true"
+      disable-region-select="true"
+      on-account-update="disableAsgStageCtrl.setStageRegion()"
+      accounts="accounts"
+    >
+    </account-region-cluster-selector>
+  </div>
+  <stage-config-field label="Target">
+    <target-select model="stage" options="targets"></target-select>
+  </stage-config-field>
+  <stage-platform-health-override application="application" stage="stage" platform-health-type="platformHealth">
+  </stage-platform-health-override>
+</div>

package/src/pipeline/stages/disableAsg/disableAsgStepLabel.html

@@ -0,0 +1 @@
+<span class="task-label"> Disable Server Group: {{step.context.serverGroupName}} ({{step.context.region}}) </span>

package/src/pipeline/stages/editLoadBalancer/appengineEditLoadBalancerStage.ts

@@ -0,0 +1,74 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { ILoadBalancer } from '@spinnaker/core';
+import { CloudProviderRegistry, Registry } from '@spinnaker/core';
+
+import { APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL } from './loadBalancerChoice.modal.controller';
+
+class AppengineEditLoadBalancerStageCtrl implements IController {
+  public static $inject = ['$scope', '$uibModal'];
+  constructor(public $scope: any, private $uibModal: IModalService) {
+    $scope.stage.loadBalancers = $scope.stage.loadBalancers || [];
+    $scope.stage.cloudProvider = 'appengine';
+  }
+
+  public addLoadBalancer(): void {
+    this.$uibModal
+      .open({
+        templateUrl: require('./loadBalancerChoice.modal.html'),
+        controller: `appengineLoadBalancerChoiceModelCtrl as ctrl`,
+        resolve: {
+          application: () => this.$scope.application,
+        },
+      })
+      .result.then((newLoadBalancer: ILoadBalancer) => {
+        this.$scope.stage.loadBalancers.push(newLoadBalancer);
+      })
+      .catch(() => {});
+  }
+
+  public editLoadBalancer(index: number) {
+    const config = CloudProviderRegistry.getValue('appengine', 'loadBalancer');
+    this.$uibModal
+      .open({
+        templateUrl: config.createLoadBalancerTemplateUrl,
+        controller: `${config.createLoadBalancerController} as ctrl`,
+        size: 'lg',
+        resolve: {
+          application: () => this.$scope.application,
+          loadBalancer: () => cloneDeep(this.$scope.stage.loadBalancers[index]),
+          isNew: () => false,
+          forPipelineConfig: () => true,
+        },
+      })
+      .result.then((updatedLoadBalancer: ILoadBalancer) => {
+        this.$scope.stage.loadBalancers[index] = updatedLoadBalancer;
+      })
+      .catch(() => {});
+  }
+
+  public removeLoadBalancer(index: number): void {
+    this.$scope.stage.loadBalancers.splice(index, 1);
+  }
+}
+
+export const APPENGINE_EDIT_LOAD_BALANCER_STAGE = 'spinnaker.appengine.pipeline.stage.editLoadBalancerStage';
+module(APPENGINE_EDIT_LOAD_BALANCER_STAGE, [APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL])
+  .config(() => {
+    Registry.pipeline.registerStage({
+      label: 'Edit Load Balancer',
+      description: 'Edits a load balancer',
+      key: 'upsertAppEngineLoadBalancers',
+      cloudProvider: 'appengine',
+      templateUrl: require('./editLoadBalancerStage.html'),
+      executionDetailsUrl: require('./editLoadBalancerExecutionDetails.html'),
+      executionConfigSections: ['editLoadBalancerConfig', 'taskStatus'],
+      controller: 'appengineEditLoadBalancerStageCtrl',
+      controllerAs: 'editLoadBalancerStageCtrl',
+      validators: [],
+    });
+  })
+  .controller('appengineEditLoadBalancerStageCtrl', AppengineEditLoadBalancerStageCtrl);

package/src/pipeline/stages/editLoadBalancer/editLoadBalancerExecutionDetails.html

@@ -0,0 +1,33 @@
+<div ng-controller="BaseExecutionDetailsCtrl">
+  <execution-details-section-nav sections="configSections"></execution-details-section-nav>
+  <div class="step-section-details" ng-if="detailsSection === 'editLoadBalancerConfig'">
+    <div class="row">
+      <div class="col-md-12">
+        <table class="table table-condensed">
+          <thead>
+            <tr>
+              <th>Account</th>
+              <th>Name</th>
+              <th>Region</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="loadBalancer in stage.context.loadBalancers">
+              <td>
+                <account-tag account="loadBalancer.credentials"></account-tag>
+              </td>
+              <td>{{ loadBalancer.name }}</td>
+              <td>{{ loadBalancer.region }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <stage-failure-message stage="stage" message="stage.failureMessage"></stage-failure-message>
+  </div>
+  <div class="step-section-details" ng-if="detailsSection === 'taskStatus'">
+    <div class="row">
+      <execution-step-details item="stage"></execution-step-details>
+    </div>
+  </div>
+</div>

package/src/pipeline/stages/editLoadBalancer/editLoadBalancerStage.html

@@ -0,0 +1,51 @@
+<div class="well well-sm clearfix" ng-if="!pipeline.strategy">
+  <div class="row">
+    <div class="col-md-12">
+      <h4 class="text-left">Load Balancers</h4>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <table class="table table-condensed">
+        <thead>
+          <tr>
+            <th>Account</th>
+            <th>Name</th>
+            <th>Region</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="loadBalancer in stage.loadBalancers">
+            <td>
+              <account-tag account="loadBalancer.credentials"></account-tag>
+            </td>
+            <td>{{ loadBalancer.name }}</td>
+            <td>{{ loadBalancer.region }}</td>
+            <td class="condensed-actions">
+              <a class="btn btn-sm btn-link" href ng-click="editLoadBalancerStageCtrl.editLoadBalancer($index)">
+                <span class="glyphicon glyphicon-edit" uib-tooltip="Edit"></span
+              ></a>
+              <a
+                class="btn btn-sm btn-link pad-left"
+                href
+                ng-click="editLoadBalancerStageCtrl.removeLoadBalancer($index)"
+              >
+                <span class="glyphicon glyphicon-trash" uib-tooltip="Remove"></span>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="8">
+              <button class="btn btn-block btn-sm add-new" ng-click="editLoadBalancerStageCtrl.addLoadBalancer()">
+                <span class="glyphicon glyphicon-plus-sign"></span> Add load balancer
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</div>

package/src/pipeline/stages/editLoadBalancer/loadBalancerChoice.modal.controller.ts

@@ -0,0 +1,65 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService, IModalServiceInstance } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { CloudProviderRegistry } from '@spinnaker/core';
+
+class AppengineLoadBalancerChoiceModalCtrl implements IController {
+  public state = { loading: true };
+  public loadBalancers: ILoadBalancer[];
+  public selectedLoadBalancer: ILoadBalancer;
+
+  public static $inject = ['$uibModal', '$uibModalInstance', 'application'];
+  constructor(
+    private $uibModal: IModalService,
+    private $uibModalInstance: IModalServiceInstance,
+    private application: Application,
+  ) {
+    this.initialize();
+  }
+
+  public submit(): void {
+    const config = CloudProviderRegistry.getValue('appengine', 'loadBalancer');
+    const updatedLoadBalancerPromise = this.$uibModal.open({
+      templateUrl: config.createLoadBalancerTemplateUrl,
+      controller: `${config.createLoadBalancerController} as ctrl`,
+      size: 'lg',
+      resolve: {
+        application: () => this.application,
+        loadBalancer: () => cloneDeep(this.selectedLoadBalancer),
+        isNew: () => false,
+        forPipelineConfig: () => true,
+      },
+    }).result;
+
+    this.$uibModalInstance.close(updatedLoadBalancerPromise);
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  private initialize(): void {
+    this.application
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => {
+        this.loadBalancers = (this.application.loadBalancers.data as ILoadBalancer[]).filter(
+          (candidate) => candidate.cloudProvider === 'appengine',
+        );
+
+        if (this.loadBalancers.length) {
+          this.selectedLoadBalancer = this.loadBalancers[0];
+        }
+        this.state.loading = false;
+      });
+  }
+}
+
+export const APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL = 'spinnaker.appengine.loadBalancerChoiceModal.controller';
+module(APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL, []).controller(
+  'appengineLoadBalancerChoiceModelCtrl',
+  AppengineLoadBalancerChoiceModalCtrl,
+);

package/src/pipeline/stages/editLoadBalancer/loadBalancerChoice.modal.html

@@ -0,0 +1,45 @@
+<div modal-page>
+  <modal-close dismiss="$dismiss()"></modal-close>
+  <div class="modal-header">
+    <h4 class="modal-title">Select Load Balancer</h4>
+  </div>
+  <div class="modal-body" ng-if="ctrl.state.loading" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div class="modal-body" ng-if="!ctrl.state.loading">
+    <div class="alert alert-warning" ng-if="ctrl.loadBalancers.length === 0">
+      <p>This application has no App Engine load balancers.</p>
+    </div>
+    <form
+      role="form"
+      name="form"
+      class="form-horizontal"
+      ng-submit="ctrl.submit()"
+      ng-if="ctrl.loadBalancers.length > 0"
+    >
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">
+          <b>Load Balancer</b>
+        </div>
+        <div class="col-md-7">
+          <ui-select class="form-control input-sm" ng-model="ctrl.selectedLoadBalancer">
+            <ui-select-match>
+              <account-tag account="$select.selected.account"></account-tag>
+              <span style="margin-left: 5px">{{$select.selected.name}}</span>
+            </ui-select-match>
+            <ui-select-choices repeat="loadBalancer in ctrl.loadBalancers | filter: $select.search">
+              <account-tag account="loadBalancer.account"></account-tag>
+              <span style="margin-left: 5px" ng-bind-html="loadBalancer.name"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <button class="btn btn-primary" ng-if="ctrl.loadBalancers.length > 0" ng-click="ctrl.submit()">
+      <span class="far fa-check-circle"></span> Edit
+    </button>
+  </div>
+</div>