@spinnaker/google 0.0.0-main-2

package/src/loadBalancer/configure/ssl/gceCreateSslLoadBalancer.controller.ts

@@ -0,0 +1,236 @@
+import type { StateService } from '@uirouter/angularjs';
+import type { IController, IScope } from 'angular';
+import { module } from 'angular';
+import type { IModalInstanceService } from 'angular-ui-bootstrap';
+import _ from 'lodash';
+
+import type {
+  Application,
+  IAccount,
+  ICredentials,
+  IInstance,
+  ILoadBalancerUpsertCommand,
+  IRegion,
+} from '@spinnaker/core';
+import { AccountService, LoadBalancerWriter, TaskMonitor } from '@spinnaker/core';
+
+import { CommonGceLoadBalancerCtrl } from '../common/commonLoadBalancer.controller';
+import type { GceCommonLoadBalancerCommandBuilder } from '../common/commonLoadBalancerCommandBuilder.service';
+import { GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER } from '../common/commonLoadBalancerCommandBuilder.service';
+import { GCE_HEALTH_CHECK_SELECTOR_COMPONENT } from '../common/healthCheck.component';
+import type { IGceBackendService, IGceHealthCheck, IGceLoadBalancer } from '../../../domain/index';
+import { GCEProviderSettings } from '../../../gce.settings';
+
+class ViewState {
+  constructor(public sessionAffinity: string) {}
+}
+
+interface IListKeyedByAccount {
+  [account: string]: string[];
+}
+
+interface ISslLoadBalancerUpsertDescription extends ILoadBalancerUpsertCommand {
+  backendService: IGceBackendService;
+  loadBalancerName: string;
+  instances: IInstance[];
+}
+
+class SslLoadBalancer implements IGceLoadBalancer {
+  public stack: string;
+  public detail: string;
+  public loadBalancerName: string;
+  public portRange = '443';
+  public ipProtocol = 'TCP';
+  public instances: IInstance[];
+  public loadBalancerType = 'SSL';
+  public credentials: string;
+  public account: string;
+  public certificate: string;
+  public backendService: IGceBackendService = { healthCheck: { healthCheckType: 'TCP' } } as IGceBackendService;
+  public cloudProvider: string;
+  public name: string;
+  constructor(public region = 'global') {}
+}
+
+class SslLoadBalancerCtrl extends CommonGceLoadBalancerCtrl implements IController {
+  public pages: any = {
+    location: require('./createLoadBalancerProperties.html'),
+    listener: require('./listener.html'),
+    healthCheck: require('../common/commonHealthCheckPage.html'),
+    advancedSettings: require('../common/commonAdvancedSettingsPage.html'),
+    backendService: require('./backendService.html'),
+  };
+  public sessionAffinityViewToModelMap: any = {
+    None: 'NONE',
+    'Client IP': 'CLIENT_IP',
+    'Generated Cookie': 'GENERATED_COOKIE',
+  };
+  public accounts: ICredentials[];
+  public regions: string[];
+  public certificateWrappers: any[];
+  public healthChecksByAccountAndType: { [account: string]: { [healthCheckType: string]: IGceHealthCheck[] } };
+  public portOptions: string[] = ['25', '43', '110', '143', '195', '443', '465', '587', '700', '993', '995'];
+
+  // The 'by account' maps populate the corresponding 'existing names' lists below.
+  public existingLoadBalancerNamesByAccount: IListKeyedByAccount;
+  public existingHealthCheckNamesByAccount: IListKeyedByAccount;
+  public existingLoadBalancerNames: string[];
+  public existingHealthCheckNames: string[];
+
+  public viewState: ViewState = new ViewState('None');
+  public maxCookieTtl = 60 * 60 * 24; // One day.
+  public taskMonitor: any;
+  public hasBackendService = true;
+
+  private sessionAffinityModelToViewMap: any = _.invert(this.sessionAffinityViewToModelMap);
+
+  public static $inject = [
+    '$scope',
+    'application',
+    '$uibModalInstance',
+    'loadBalancer',
+    'gceCommonLoadBalancerCommandBuilder',
+    'isNew',
+    'wizardSubFormValidation',
+    '$state',
+  ];
+  constructor(
+    public $scope: IScope,
+    public application: Application,
+    public $uibModalInstance: IModalInstanceService,
+    private loadBalancer: SslLoadBalancer,
+    private gceCommonLoadBalancerCommandBuilder: GceCommonLoadBalancerCommandBuilder,
+    private isNew: boolean,
+    private wizardSubFormValidation: any,
+    $state: StateService,
+  ) {
+    super($scope, application, $uibModalInstance, $state);
+  }
+
+  public $onInit(): void {
+    this.gceCommonLoadBalancerCommandBuilder
+      .getBackingData(['existingLoadBalancerNamesByAccount', 'accounts', 'healthChecks', 'certificates'])
+      .then((backingData) => {
+        if (!this.isNew) {
+          this.initializeEditMode();
+        } else {
+          this.loadBalancer = new SslLoadBalancer(GCEProviderSettings ? GCEProviderSettings.defaults.region : null);
+        }
+
+        this.loadBalancer.loadBalancerName = this.getName(this.loadBalancer, this.application);
+
+        const accountNames: string[] = backingData.accounts.map((account: IAccount) => account.name);
+        if (accountNames.length && !accountNames.includes(this.loadBalancer.account)) {
+          this.loadBalancer.credentials = accountNames[0];
+        } else {
+          this.loadBalancer.credentials = this.loadBalancer.account;
+        }
+
+        this.accounts = backingData.accounts;
+        this.certificateWrappers = backingData.certificates as any[];
+        this.existingLoadBalancerNamesByAccount = backingData.existingLoadBalancerNamesByAccount;
+        this.healthChecksByAccountAndType = this.gceCommonLoadBalancerCommandBuilder.groupHealthChecksByAccountAndType(
+          backingData.healthChecks as IGceHealthCheck[],
+        );
+
+        // We don't count the load balancer's health check in the existing health checks list.
+        const healthCheckNamesToOmit = this.isNew ? [] : [this.loadBalancer.backendService.healthCheck.name];
+        this.existingHealthCheckNamesByAccount = this.gceCommonLoadBalancerCommandBuilder.groupHealthCheckNamesByAccount(
+          backingData.healthChecks as IGceHealthCheck[],
+          healthCheckNamesToOmit,
+        );
+
+        this.accountUpdated();
+
+        this.wizardSubFormValidation
+          .config({ scope: this.$scope, form: 'form' })
+          .register({ page: 'location', subForm: 'locationForm' })
+          .register({ page: 'listener', subForm: 'listenerForm' })
+          .register({ page: 'healthCheck', subForm: 'healthCheckForm' })
+          .register({ page: 'advancedSettings', subForm: 'advancedSettingsForm' });
+
+        this.taskMonitor = new TaskMonitor({
+          application: this.application,
+          title: (this.isNew ? 'Creating ' : 'Updating ') + 'your load balancer',
+          modalInstance: this.$uibModalInstance,
+          onTaskComplete: () => this.onTaskComplete(this.loadBalancer),
+        });
+      });
+  }
+
+  public onHealthCheckRefresh(): void {
+    this.gceCommonLoadBalancerCommandBuilder.getBackingData(['healthChecks']).then((data) => {
+      this.healthChecksByAccountAndType = this.gceCommonLoadBalancerCommandBuilder.groupHealthChecksByAccountAndType(
+        data.healthChecks as IGceHealthCheck[],
+      );
+
+      const healthCheckNamesToOmit = this.isNew ? [] : [this.loadBalancer.backendService.healthCheck.name];
+      this.existingHealthCheckNamesByAccount = this.gceCommonLoadBalancerCommandBuilder.groupHealthCheckNamesByAccount(
+        data.healthChecks as IGceHealthCheck[],
+        healthCheckNamesToOmit,
+      );
+    });
+  }
+
+  public onCertificateRefresh(): void {
+    this.gceCommonLoadBalancerCommandBuilder.getBackingData(['certificates']).then((data) => {
+      this.certificateWrappers = data.certificates as any[];
+    });
+  }
+
+  public accountUpdated(): void {
+    const existingHealthCheckNames = _.get<any, string[]>(this, [
+      'existingHealthCheckNamesByAccount',
+      this.loadBalancer.credentials,
+    ]);
+    this.existingHealthCheckNames = existingHealthCheckNames || [];
+
+    const existingLoadBalancerNames = _.get<any, string[]>(this, [
+      'existingLoadBalancerNamesByAccount',
+      this.loadBalancer.credentials,
+    ]);
+    this.existingLoadBalancerNames = existingLoadBalancerNames || [];
+
+    AccountService.getRegionsForAccount(this.loadBalancer.credentials).then((regions: IRegion[]) => {
+      this.regions = regions.map((region: IRegion) => region.name);
+    });
+  }
+
+  public updateName(): void {
+    this.loadBalancer.loadBalancerName = this.getName(this.loadBalancer, this.application);
+  }
+
+  public setSessionAffinity(viewState: ViewState): void {
+    this.loadBalancer.backendService.sessionAffinity = this.sessionAffinityViewToModelMap[viewState.sessionAffinity];
+  }
+
+  public submit(): void {
+    const descriptor = this.isNew ? 'Create' : 'Update';
+    const toSubmitLoadBalancer = _.cloneDeep(this.loadBalancer) as ISslLoadBalancerUpsertDescription;
+    toSubmitLoadBalancer.name = toSubmitLoadBalancer.loadBalancerName;
+    toSubmitLoadBalancer.backendService.name = toSubmitLoadBalancer.loadBalancerName;
+    toSubmitLoadBalancer.cloudProvider = 'gce';
+    delete toSubmitLoadBalancer.instances;
+
+    this.taskMonitor.submit(() =>
+      LoadBalancerWriter.upsertLoadBalancer(toSubmitLoadBalancer, this.application, descriptor, {
+        healthCheck: {},
+      }),
+    );
+  }
+
+  private initializeEditMode(): void {
+    this.loadBalancer.portRange = this.loadBalancer.portRange.split('-')[0];
+    this.loadBalancer.certificate = this.loadBalancer.certificate.split('/').pop();
+    this.viewState = new ViewState(
+      this.sessionAffinityModelToViewMap[this.loadBalancer.backendService.sessionAffinity],
+    );
+  }
+}
+
+export const GCE_SSL_LOAD_BALANCER_CTRL = 'spinnaker.gce.sslLoadBalancer.controller';
+
+module(GCE_SSL_LOAD_BALANCER_CTRL, [
+  GCE_HEALTH_CHECK_SELECTOR_COMPONENT,
+  GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER,
+]).controller('gceSslLoadBalancerCtrl', SslLoadBalancerCtrl);

package/src/loadBalancer/configure/ssl/listener.html

@@ -0,0 +1,43 @@
+<div class="container-fluid form-horizontal">
+  <ng-form name="listenerForm">
+    <div class="form-group">
+      <div class="col-md-9 col-md-offset-2">
+        <table class="table table-condensed packed" style="table-layout: fixed; width: 390px">
+          <thead>
+            <tr>
+              <th>Certificate</th>
+              <th>Port</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <ui-select ng-model="ctrl.loadBalancer.certificate" required class="form-control input-sm">
+                  <ui-select-match allow-clear placeholder="Select...">{{$select.selected.name}}</ui-select-match>
+                  <ui-select-choices
+                    repeat="certificateWrapper.name as certificateWrapper in ctrl.certificateWrappers | filter: {name: $select.search, account: ctrl.loadBalancer.credentials }"
+                  >
+                    <span ng-bind-html="certificateWrapper.name | highlight: $select.search"></span>
+                  </ui-select-choices>
+                </ui-select>
+              </td>
+              <td>
+                <select
+                  class="form-control input-sm"
+                  ng-options="port for port in ctrl.portOptions"
+                  ng-disabled="!ctrl.isNew"
+                  ng-model="ctrl.loadBalancer.portRange"
+                ></select>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </ng-form>
+  <div class="form-group small" style="margin-top: 20px">
+    <div class="col-md-offset-2 col-md-6">
+      <gce-cache-refresh cache-key="certificates" on-refresh="ctrl.onCertificateRefresh()"></gce-cache-refresh>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/tcp/backendService.html

@@ -0,0 +1,31 @@
+<div class="container-fluid form-horizontal">
+  <ng-form name="portName">
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        Port Name
+        <help-field key="gce.loadBalancer.portName"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          type="text"
+          required
+          class="form-control input-sm"
+          ng-model="ctrl.loadBalancer.backendService.portName"
+        />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        Connection Draining
+        <help-field key="gce.loadBalancer.connectionDraining"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          type="number"
+          class="form-control input-sm"
+          ng-model="ctrl.loadBalancer.backendService.connectionDrainingTimeoutSec"
+        />
+      </div>
+    </div>
+  </ng-form>
+</div>

package/src/loadBalancer/configure/tcp/createLoadBalancerProperties.html

@@ -0,0 +1,86 @@
+<div class="container-fluid form-horizontal">
+  <ng-form name="locationForm">
+    <div class="modal-body">
+      <div class="form-group">
+        <div
+          class="col-md-12 well"
+          ng-class="{'alert-danger': locationForm.loadBalancerName.$error.validateUnique, 'alert-info': !locationForm.loadBalancerName.$error.validateUnique}"
+        >
+          <strong>Your load balancer will be named:</strong>
+          <span>{{ctrl.getName(ctrl.loadBalancer, ctrl.application)}}</span>
+          <!-- Angular does not seem to run length validation on hidden inputs, hence the text + display:none -->
+          <input
+            type="text"
+            style="display: none"
+            ng-maxlength="63"
+            class="form-control input-sm"
+            ng-model="ctrl.loadBalancer.loadBalancerName"
+            validate-unique="ctrl.existingLoadBalancerNames"
+            validate-ignore-case="true"
+            name="loadBalancerName"
+          />
+          <validation-error
+            ng-if="locationForm.loadBalancerName.$error.validateUnique"
+            message="There is already a load balancer in {{ctrl.loadBalancer.credentials}} with that name."
+          >
+          </validation-error>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-2 sm-label-right">Account</div>
+        <div class="col-md-8">
+          <account-select-field
+            component="ctrl.loadBalancer"
+            field="credentials"
+            accounts="ctrl.accounts"
+            provider="'gce'"
+            on-change="ctrl.accountUpdated()"
+          ></account-select-field>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="col-md-2 sm-label-right">Region</div>
+        <div class="col-md-8">
+          <input readonly class="form-control input-sm" ng-model="ctrl.loadBalancer.region" />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="col-md-2 sm-label-right">Stack <help-field key="aws.loadBalancer.stack"></help-field></div>
+        <div class="col-md-3">
+          <input
+            type="text"
+            class="form-control input-sm"
+            ng-model="ctrl.loadBalancer.stack"
+            name="stackName"
+            ng-change="ctrl.updateName()"
+            ng-pattern="/^[a-z0-9]*$/"
+          />
+        </div>
+        <div class="col-md-2 sm-label-right">Detail<help-field key="gce.loadBalancer.detail"></help-field></div>
+        <div class="col-md-3">
+          <input
+            type="text"
+            class="form-control input-sm"
+            ng-model="ctrl.loadBalancer.detail"
+            name="detailName"
+            ng-change="ctrl.updateName()"
+            ng-pattern="/^[a-z0-9-]*$/"
+          />
+        </div>
+        <div class="col-md-7 col-md-offset-3" ng-if="locationForm.stackName.$error.pattern">
+          <validation-error message="Stack can only contain letters and numbers."></validation-error>
+        </div>
+        <div class="col-md-7 col-md-offset-3" ng-if="locationForm.detailName.$error.pattern">
+          <validation-error message="Detail can only contain letters, numbers, and dashes(-)."></validation-error>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-9 col-md-offset-3" ng-if="locationForm.loadBalancerName.$error.maxlength">
+          <validation-error message="Load Balancer name can only be 63 characters."></validation-error>
+        </div>
+      </div>
+    </div>
+  </ng-form>
+</div>

package/src/loadBalancer/configure/tcp/gceCreateTcpLoadBalancer.controller.ts

@@ -0,0 +1,226 @@
+import type { StateService } from '@uirouter/angularjs';
+import type { IScope } from 'angular';
+import { module } from 'angular';
+import type { IModalInstanceService } from 'angular-ui-bootstrap';
+import _ from 'lodash';
+
+import type {
+  Application,
+  IAccount,
+  ICredentials,
+  IInstance,
+  ILoadBalancerUpsertCommand,
+  IRegion,
+} from '@spinnaker/core';
+import { AccountService, LoadBalancerWriter, TaskMonitor } from '@spinnaker/core';
+
+import { CommonGceLoadBalancerCtrl } from '../common/commonLoadBalancer.controller';
+import type { GceCommonLoadBalancerCommandBuilder } from '../common/commonLoadBalancerCommandBuilder.service';
+import { GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER } from '../common/commonLoadBalancerCommandBuilder.service';
+import { GCE_HEALTH_CHECK_SELECTOR_COMPONENT } from '../common/healthCheck.component';
+import type { IGceBackendService, IGceHealthCheck, IGceLoadBalancer } from '../../../domain/index';
+import { GCEProviderSettings } from '../../../gce.settings';
+
+class ViewState {
+  constructor(public sessionAffinity: string) {}
+}
+
+interface IListKeyedByAccount {
+  [account: string]: string[];
+}
+
+interface ITcpLoadBalancerUpsertDescription extends ILoadBalancerUpsertCommand {
+  backendService: IGceBackendService;
+  loadBalancerName: string;
+  instances: IInstance[];
+}
+
+class TcpLoadBalancer implements IGceLoadBalancer {
+  public stack: string;
+  public detail: string;
+  public loadBalancerName: string;
+  public portRange = '443';
+  public ipProtocol = 'TCP';
+  public instances: IInstance[];
+  public loadBalancerType = 'TCP';
+  public credentials: string;
+  public account: string;
+  public backendService: IGceBackendService = { healthCheck: { healthCheckType: 'TCP' } } as IGceBackendService;
+  public cloudProvider: string;
+  public name: string;
+  constructor(public region = 'global') {}
+}
+
+class TcpLoadBalancerCtrl extends CommonGceLoadBalancerCtrl implements ng.IComponentController {
+  public pages: any = {
+    location: require('./createLoadBalancerProperties.html'),
+    listener: require('./listener.html'),
+    healthCheck: require('../common/commonHealthCheckPage.html'),
+    advancedSettings: require('../common/commonAdvancedSettingsPage.html'),
+    backendService: require('./backendService.html'),
+  };
+  public sessionAffinityViewToModelMap: any = {
+    None: 'NONE',
+    'Client IP': 'CLIENT_IP',
+    'Generated Cookie': 'GENERATED_COOKIE',
+  };
+  public accounts: ICredentials[];
+  public regions: string[];
+  public healthChecksByAccountAndType: { [account: string]: { [healthCheckType: string]: IGceHealthCheck[] } };
+  public portOptions: string[] = ['25', '43', '110', '143', '195', '443', '465', '587', '700', '993', '995'];
+
+  // The 'by account' maps populate the corresponding 'existing names' lists below.
+  public existingLoadBalancerNamesByAccount: IListKeyedByAccount;
+  public existingHealthCheckNamesByAccount: IListKeyedByAccount;
+  public existingLoadBalancerNames: string[];
+  public existingHealthCheckNames: string[];
+
+  public viewState: ViewState = new ViewState('None');
+  public maxCookieTtl = 60 * 60 * 24; // One day.
+  public taskMonitor: any;
+  public hasBackendService = true;
+
+  private sessionAffinityModelToViewMap: any = _.invert(this.sessionAffinityViewToModelMap);
+
+  public static $inject = [
+    '$scope',
+    'application',
+    '$uibModalInstance',
+    'loadBalancer',
+    'gceCommonLoadBalancerCommandBuilder',
+    'isNew',
+    'wizardSubFormValidation',
+    '$state',
+  ];
+  constructor(
+    public $scope: IScope,
+    public application: Application,
+    public $uibModalInstance: IModalInstanceService,
+    private loadBalancer: TcpLoadBalancer,
+    private gceCommonLoadBalancerCommandBuilder: GceCommonLoadBalancerCommandBuilder,
+    private isNew: boolean,
+    private wizardSubFormValidation: any,
+    $state: StateService,
+  ) {
+    super($scope, application, $uibModalInstance, $state);
+  }
+
+  public $onInit(): void {
+    this.gceCommonLoadBalancerCommandBuilder
+      .getBackingData(['existingLoadBalancerNamesByAccount', 'accounts', 'healthChecks'])
+      .then((backingData) => {
+        if (!this.isNew) {
+          this.initializeEditMode();
+        } else {
+          this.loadBalancer = new TcpLoadBalancer(GCEProviderSettings ? GCEProviderSettings.defaults.region : null);
+        }
+
+        this.loadBalancer.loadBalancerName = this.getName(this.loadBalancer, this.application);
+
+        const accountNames: string[] = backingData.accounts.map((account: IAccount) => account.name);
+        if (accountNames.length && !accountNames.includes(this.loadBalancer.account)) {
+          this.loadBalancer.credentials = accountNames[0];
+        } else {
+          this.loadBalancer.credentials = this.loadBalancer.account;
+        }
+
+        this.accounts = backingData.accounts;
+        this.existingLoadBalancerNamesByAccount = backingData.existingLoadBalancerNamesByAccount;
+        this.healthChecksByAccountAndType = this.gceCommonLoadBalancerCommandBuilder.groupHealthChecksByAccountAndType(
+          backingData.healthChecks as IGceHealthCheck[],
+        );
+
+        // We don't count the load balancer's health check in the existing health checks list.
+        const healthCheckNamesToOmit = this.isNew ? [] : [this.loadBalancer.backendService.healthCheck.name];
+        this.existingHealthCheckNamesByAccount = this.gceCommonLoadBalancerCommandBuilder.groupHealthCheckNamesByAccount(
+          backingData.healthChecks as IGceHealthCheck[],
+          healthCheckNamesToOmit,
+        );
+
+        this.accountUpdated();
+
+        this.wizardSubFormValidation
+          .config({ scope: this.$scope, form: 'form' })
+          .register({ page: 'location', subForm: 'locationForm' })
+          .register({ page: 'listener', subForm: 'listenerForm' })
+          .register({ page: 'healthCheck', subForm: 'healthCheckForm' })
+          .register({ page: 'advancedSettings', subForm: 'advancedSettingsForm' });
+
+        this.taskMonitor = new TaskMonitor({
+          application: this.application,
+          title: (this.isNew ? 'Creating ' : 'Updating ') + 'your load balancer',
+          modalInstance: this.$uibModalInstance,
+          onTaskComplete: () => this.onTaskComplete(this.loadBalancer),
+        });
+      });
+  }
+
+  public onHealthCheckRefresh(): void {
+    this.gceCommonLoadBalancerCommandBuilder.getBackingData(['healthChecks']).then((data) => {
+      this.healthChecksByAccountAndType = this.gceCommonLoadBalancerCommandBuilder.groupHealthChecksByAccountAndType(
+        data.healthChecks as IGceHealthCheck[],
+      );
+
+      const healthCheckNamesToOmit = this.isNew ? [] : [this.loadBalancer.backendService.healthCheck.name];
+      this.existingHealthCheckNamesByAccount = this.gceCommonLoadBalancerCommandBuilder.groupHealthCheckNamesByAccount(
+        data.healthChecks as IGceHealthCheck[],
+        healthCheckNamesToOmit,
+      );
+    });
+  }
+
+  public accountUpdated(): void {
+    const existingHealthCheckNames = _.get<any, string[]>(this, [
+      'existingHealthCheckNamesByAccount',
+      this.loadBalancer.credentials,
+    ]);
+    this.existingHealthCheckNames = existingHealthCheckNames || [];
+
+    const existingLoadBalancerNames = _.get<any, string[]>(this, [
+      'existingLoadBalancerNamesByAccount',
+      this.loadBalancer.credentials,
+    ]);
+    this.existingLoadBalancerNames = existingLoadBalancerNames || [];
+
+    AccountService.getRegionsForAccount(this.loadBalancer.credentials).then((regions: IRegion[]) => {
+      this.regions = regions.map((region: IRegion) => region.name);
+    });
+  }
+
+  public updateName(): void {
+    this.loadBalancer.loadBalancerName = this.getName(this.loadBalancer, this.application);
+  }
+
+  public setSessionAffinity(viewState: ViewState): void {
+    this.loadBalancer.backendService.sessionAffinity = this.sessionAffinityViewToModelMap[viewState.sessionAffinity];
+  }
+
+  public submit(): void {
+    const descriptor = this.isNew ? 'Create' : 'Update';
+    const toSubmitLoadBalancer = _.cloneDeep(this.loadBalancer) as ITcpLoadBalancerUpsertDescription;
+    toSubmitLoadBalancer.name = toSubmitLoadBalancer.loadBalancerName;
+    toSubmitLoadBalancer.backendService.name = toSubmitLoadBalancer.loadBalancerName;
+    toSubmitLoadBalancer.cloudProvider = 'gce';
+    delete toSubmitLoadBalancer.instances;
+
+    this.taskMonitor.submit(() =>
+      LoadBalancerWriter.upsertLoadBalancer(toSubmitLoadBalancer, this.application, descriptor, {
+        healthCheck: {},
+      }),
+    );
+  }
+
+  private initializeEditMode(): void {
+    this.loadBalancer.portRange = this.loadBalancer.portRange.split('-')[0];
+    this.viewState = new ViewState(
+      this.sessionAffinityModelToViewMap[this.loadBalancer.backendService.sessionAffinity],
+    );
+  }
+}
+
+export const GCE_TCP_LOAD_BALANCER_CTRL = 'spinnaker.gce.tcpLoadBalancer.controller';
+
+module(GCE_TCP_LOAD_BALANCER_CTRL, [
+  GCE_HEALTH_CHECK_SELECTOR_COMPONENT,
+  GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER,
+]).controller('gceTcpLoadBalancerCtrl', TcpLoadBalancerCtrl);

package/src/loadBalancer/configure/tcp/listener.html

@@ -0,0 +1,15 @@
+<div class="container-fluid form-horizontal">
+  <ng-form name="listenerForm">
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Port</div>
+      <div class="col-md-4">
+        <select
+          class="form-control input-sm"
+          ng-options="port for port in ctrl.portOptions"
+          ng-disabled="!ctrl.isNew"
+          ng-model="ctrl.loadBalancer.portRange"
+        ></select>
+      </div>
+    </div>
+  </ng-form>
+</div>

package/src/loadBalancer/details/backendService/backendService.component.ts

@@ -0,0 +1,23 @@
+import { module } from 'angular';
+
+const gceBackendServiceDetailsComponent: ng.IComponentOptions = {
+  bindings: {
+    backendService: '<',
+  },
+  template: `
+    <dt>Name</dt>
+    <dd>{{$ctrl.backendService.name}}</dd>
+    <dt>Health Check</dt>
+    <dd>{{$ctrl.backendService.healthCheck.name}}</dd>
+    <dt ng-if="$ctrl.backendService.sessionAffinity">Session Affinity</dt>
+    <dd ng-if="$ctrl.backendService.sessionAffinity">{{$ctrl.backendService.sessionAffinity | gceSessionAffinityFilter}}</dd>
+    <dt ng-if="$ctrl.backendService.sessionAffinity === 'GENERATED_COOKIE'">Affinity Cookie TTL</dt>
+    <dd ng-if="$ctrl.backendService.sessionAffinity === 'GENERATED_COOKIE'">{{$ctrl.backendService.affinityCookieTtlSec}}</dd>`,
+};
+
+export const GCE_BACKEND_SERVICE_DETAILS_COMPONENT =
+  'spinnaker.gce.loadBalancer.details.backendServiceDetails.component';
+module(GCE_BACKEND_SERVICE_DETAILS_COMPONENT, []).component(
+  'gceBackendServiceDetails',
+  gceBackendServiceDetailsComponent,
+);

package/src/loadBalancer/details/backendService/sessionAffinity.filter.ts

@@ -0,0 +1,11 @@
+import { module } from 'angular';
+import { sessionAffinityModelToViewMap } from '../../configure/common/sessionAffinityNameMaps';
+
+function gceSessionAffinityFilter() {
+  return function (modelValue: string): string {
+    return sessionAffinityModelToViewMap[modelValue] || modelValue;
+  };
+}
+
+export const SESSION_AFFINITY_FILTER = 'spinnaker.gce.loadBalancer.details.sessionAffinity.filter';
+module(SESSION_AFFINITY_FILTER, []).filter('gceSessionAffinityFilter', gceSessionAffinityFilter);