@spinnaker/google 0.0.0-2025.1-0

package/src/loadBalancer/configure/common/commonLoadBalancer.controller.ts

@@ -0,0 +1,56 @@
+import type { StateService } from '@uirouter/angularjs';
+import type { IScope } from 'angular';
+import type { IModalInstanceService } from 'angular-ui-bootstrap';
+import { trimEnd } from 'lodash';
+
+import type { Application } from '@spinnaker/core';
+import { InfrastructureCaches } from '@spinnaker/core';
+import type { IGceLoadBalancer } from '../../../domain/loadBalancer';
+
+export class CommonGceLoadBalancerCtrl {
+  public static $inject = ['$scope', 'application', '$uibModalInstance', '$state'];
+  constructor(
+    public $scope: IScope,
+    public application: Application,
+    public $uibModalInstance: IModalInstanceService,
+    private $state: StateService,
+  ) {}
+
+  public onTaskComplete(loadBalancer: IGceLoadBalancer): void {
+    InfrastructureCaches.clearCache('healthChecks');
+    this.application.getDataSource('loadBalancers').refresh();
+    this.application
+      .getDataSource('loadBalancers')
+      .onNextRefresh(this.$scope, () => this.onApplicationRefresh(loadBalancer));
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  public getName(lb: IGceLoadBalancer, application: Application): string {
+    const loadBalancerName = [application.name, lb.stack || '', lb.detail || ''].join('-');
+    return trimEnd(loadBalancerName, '-');
+  }
+
+  private onApplicationRefresh(loadBalancer: IGceLoadBalancer): void {
+    // If the user has already closed the modal, do not navigate to the new details view
+    if (this.$scope.$$destroyed) {
+      return;
+    }
+    this.$uibModalInstance.close();
+
+    const newStateParams = {
+      name: loadBalancer.loadBalancerName,
+      accountId: loadBalancer.credentials,
+      region: loadBalancer.region,
+      provider: 'gce',
+    };
+
+    if (!this.$state.includes('**.loadBalancerDetails')) {
+      this.$state.go('.loadBalancerDetails', newStateParams);
+    } else {
+      this.$state.go('^.loadBalancerDetails', newStateParams);
+    }
+  }
+}

package/src/loadBalancer/configure/common/commonLoadBalancerCommandBuilder.service.ts

@@ -0,0 +1,87 @@
+import { module } from 'angular';
+import _ from 'lodash';
+
+import type { IAccount, ILoadBalancersByAccount, INetwork, ISubnet, LoadBalancerReader } from '@spinnaker/core';
+import { AccountService, LOAD_BALANCER_READ_SERVICE, NetworkReader, SubnetReader } from '@spinnaker/core';
+import type { GceCertificateReader, IGceCertificate } from '../../../certificate/certificate.reader';
+import { GCE_CERTIFICATE_READER } from '../../../certificate/certificate.reader';
+import type { IGceHealthCheck } from '../../../domain/healthCheck';
+import type { GceHealthCheckReader } from '../../../healthCheck/healthCheck.read.service';
+import { GCE_HEALTH_CHECK_READER } from '../../../healthCheck/healthCheck.read.service';
+
+export class GceCommonLoadBalancerCommandBuilder {
+  private dataFetchers: { [key: string]: Function } = {
+    existingLoadBalancerNamesByAccount: (): PromiseLike<_.Dictionary<any>> => {
+      return this.loadBalancerReader.listLoadBalancers('gce').then((loadBalancerList: ILoadBalancersByAccount[]) => {
+        return _.chain(loadBalancerList)
+          .map('accounts')
+          .flatten()
+          .groupBy('name') // account name
+          .mapValues((regionWrappers) =>
+            _.chain(regionWrappers)
+              .map('regions')
+              .flatten()
+              .map('loadBalancers')
+              .flatten()
+              .map('name') // load balancer name
+              .value(),
+          )
+          .value();
+      });
+    },
+    accounts: (): PromiseLike<IAccount[]> => AccountService.listAccounts('gce'),
+    networks: (): PromiseLike<INetwork[]> => NetworkReader.listNetworksByProvider('gce'),
+    subnets: (): PromiseLike<ISubnet[]> => SubnetReader.listSubnetsByProvider('gce'),
+    healthChecks: (): PromiseLike<IGceHealthCheck[]> => this.gceHealthCheckReader.listHealthChecks(),
+    certificates: (): PromiseLike<IGceCertificate[]> => this.gceCertificateReader.listCertificates(),
+  };
+
+  public static $inject = ['$q', 'loadBalancerReader', 'gceHealthCheckReader', 'gceCertificateReader'];
+  constructor(
+    private $q: ng.IQService,
+    private loadBalancerReader: LoadBalancerReader,
+    private gceHealthCheckReader: GceHealthCheckReader,
+    private gceCertificateReader: GceCertificateReader,
+  ) {}
+
+  public getBackingData(dataTypes: string[]): PromiseLike<any> {
+    const promises = dataTypes.reduce(
+      (promisesByDataType: { [dataType: string]: PromiseLike<any> }, dataType: string) => {
+        if (this.dataFetchers[dataType]) {
+          promisesByDataType[dataType] = this.dataFetchers[dataType]();
+        }
+        return promisesByDataType;
+      },
+      {},
+    );
+
+    return this.$q.all(promises);
+  }
+
+  public groupHealthChecksByAccountAndType(
+    healthChecks: IGceHealthCheck[],
+  ): { [account: string]: { [healthCheckType: string]: IGceHealthCheck[] } } {
+    return _.chain(healthChecks)
+      .groupBy('account')
+      .mapValues((grouped: IGceHealthCheck[]) => _.groupBy(grouped, 'healthCheckType'))
+      .value();
+  }
+
+  public groupHealthCheckNamesByAccount(
+    healthChecks: IGceHealthCheck[],
+    namesToOmit: string[],
+  ): { [account: string]: string[] } {
+    return _.chain(healthChecks)
+      .groupBy('account')
+      .mapValues((grouped: IGceHealthCheck[]) => _.chain(grouped).map('name').difference(namesToOmit).value())
+      .value() as { [account: string]: string[] };
+  }
+}
+
+export const GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER = 'spinnaker.gce.commonLoadBalancerCommandBuilder.service';
+
+module(GCE_COMMON_LOAD_BALANCER_COMMAND_BUILDER, [
+  LOAD_BALANCER_READ_SERVICE,
+  GCE_CERTIFICATE_READER,
+  GCE_HEALTH_CHECK_READER,
+]).service('gceCommonLoadBalancerCommandBuilder', GceCommonLoadBalancerCommandBuilder);

package/src/loadBalancer/configure/common/healthCheck.component.html

@@ -0,0 +1,164 @@
+<ng-form name="healthCheckForm" novalidate>
+  <div class="container-fluid form-horizontal">
+    <div class="form-group">
+      <div class="col-md-12 well alert-danger" ng-if="healthCheckForm.healthCheckName.$error.validateUnique">
+        <validation-error message="There is already a health check with that name."></validation-error>
+      </div>
+      <div
+        class="col-md-12 well alert-danger"
+        ng-if="healthCheckForm.healthCheckName.$error.pattern || healthCheckForm.healthCheckName.$error.max"
+      >
+        <validation-error
+          message="Name must start with a lowercase letter followed by up to 62 lowercase letters,
+                   numbers, or hyphens, and cannot end with a hyphen."
+        >
+        </validation-error>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Protocol</div>
+      <div class="col-md-4">
+        <select
+          class="form-control input-sm"
+          ng-change="$ctrl.onProtocolChange()"
+          ng-options="protocol as protocol for protocol in ['HTTP', 'HTTPS', 'TCP', 'SSL']"
+          ng-model="$ctrl.healthCheck.healthCheckType"
+        ></select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Name</div>
+
+      <div class="col-md-4" ng-if="$ctrl.editExisting">
+        <ui-select
+          ng-model="$ctrl.healthCheckPlaceholder"
+          on-select="$ctrl.onHealthCheckSelect($item)"
+          class="form-control input-sm"
+        >
+          <ui-select-match placeholder="Select...">
+            {{ $select.selected.name }}
+          </ui-select-match>
+          <ui-select-choices
+            repeat="healthCheck in $ctrl.existingHealthChecksForProtocol | filter: {name: $select.search}"
+          >
+            <div ng-bind-html="healthCheck.name | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+      <div class="col-md-4" ng-if="!$ctrl.editExisting">
+        <input
+          class="form-control input-sm"
+          novalidate
+          type="text"
+          ng-pattern="/^[a-z]([-a-z0-9]*[a-z0-9])?$/"
+          name="healthCheckName"
+          max="63"
+          required
+          validate-unique="$ctrl.existingHealthCheckNames"
+          ng-model-options="{ debounce: 250 }"
+          ng-change="$ctrl.onHealthCheckNameChange($ctrl.healthCheckPlaceholder.name)"
+          ng-model="$ctrl.healthCheckPlaceholder.name"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-6 col-md-offset-4">
+        <a href class="small" ng-if="!$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()"
+          >Toggle for list of existing health checks</a
+        >
+        <a href class="small" ng-if="$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()">Toggle for text input</a>
+      </div>
+    </div>
+
+    <div
+      class="form-group"
+      ng-if="$ctrl.healthCheck.healthCheckType === 'HTTP' || $ctrl.healthCheck.healthCheckType === 'HTTPS'"
+    >
+      <div class="col-md-4 sm-label-right">Request Path</div>
+      <div class="col-md-4">
+        <input class="form-control input-sm" required ng-model="$ctrl.healthCheck.requestPath" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Port</div>
+      <div class="col-md-4">
+        <input
+          type="number"
+          class="form-control input-sm"
+          required
+          min="1"
+          max="65535"
+          ng-model="$ctrl.healthCheck.port"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Timeout</b><help-field key="loadBalancer.advancedSettings.healthTimeout"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.timeoutSec"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Interval</b><help-field key="gce.loadBalancer.advancedSettings.healthInterval"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.checkIntervalSec"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Healthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.healthyThreshold"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.healthyThreshold"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Unhealthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.unhealthyThreshold"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.unhealthyThreshold"
+        />
+      </div>
+    </div>
+  </div>
+</ng-form>

package/src/loadBalancer/configure/common/healthCheck.component.ts

@@ -0,0 +1,82 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import { get } from 'lodash';
+
+import type { IGceHealthCheck } from '../../../domain/index';
+
+class HealthCheckCreateCtrl implements IController {
+  public healthCheck: IGceHealthCheck;
+  public healthCheckPlaceholder: IGceHealthCheck;
+  public healthChecksByAccountAndType: { [account: string]: { [healthCheckType: string]: IGceHealthCheck[] } };
+  public editExisting = false;
+  public existingHealthChecksForProtocol: IGceHealthCheck[];
+  public existingHealthCheckNames: string[];
+  public credentials: string;
+  public max = Number.MAX_SAFE_INTEGER;
+
+  public static $inject = ['$scope'];
+  constructor(private $scope: ng.IScope) {}
+
+  public $onInit(): void {
+    if (this.healthCheck.name) {
+      this.healthCheckPlaceholder = this.healthCheck;
+      this.existingHealthChecksForProtocol = this.healthChecksByAccountAndType[this.credentials][
+        this.healthCheck.healthCheckType
+      ];
+      this.editExisting = true;
+    } else {
+      this.existingHealthChecksForProtocol = this.healthChecksByAccountAndType[this.credentials]['TCP'];
+    }
+
+    this.$scope.$watch('$ctrl.credentials', () => this.setExistingHealthChecksForProtocol());
+  }
+
+  public onProtocolChange(): void {
+    delete this.healthCheck.name;
+    delete this.healthCheckPlaceholder;
+    this.setExistingHealthChecksForProtocol();
+  }
+
+  public setExistingHealthChecksForProtocol() {
+    this.existingHealthChecksForProtocol =
+      get<{}, IGceHealthCheck[]>(this, [
+        'healthChecksByAccountAndType',
+        this.credentials,
+        this.healthCheck.healthCheckType,
+      ]) || [];
+
+    if (!this.existingHealthChecksForProtocol.find((healthCheck) => healthCheck.name === this.healthCheck.name)) {
+      delete this.healthCheck.name;
+      delete this.healthCheckPlaceholder;
+    }
+  }
+
+  public toggleEditExisting(): void {
+    this.editExisting = !this.editExisting;
+    delete this.healthCheck.name;
+    delete this.healthCheckPlaceholder;
+  }
+
+  public onHealthCheckSelect(selectedHealthCheck: IGceHealthCheck): void {
+    Object.assign(this.healthCheck, selectedHealthCheck);
+  }
+
+  public onHealthCheckNameChange(typedName: string): void {
+    this.healthCheck.name = typedName;
+  }
+}
+
+const healthCheckCreateComponent: ng.IComponentOptions = {
+  bindings: {
+    healthCheck: '=',
+    credentials: '<',
+    healthChecksByAccountAndType: '<',
+    existingHealthCheckNames: '<',
+  },
+  templateUrl: require('./healthCheck.component.html'),
+  controller: HealthCheckCreateCtrl,
+};
+
+export const GCE_HEALTH_CHECK_SELECTOR_COMPONENT = 'spinnaker.gce.healthCheckSelector.component';
+
+module(GCE_HEALTH_CHECK_SELECTOR_COMPONENT, []).component('gceHealthCheckSelector', healthCheckCreateComponent);

package/src/loadBalancer/configure/common/sessionAffinityNameMaps.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash';
+
+export interface IStringMap {
+  [key: string]: string;
+}
+
+export const sessionAffinityViewToModelMap: IStringMap = {
+  None: 'NONE',
+  'Client IP': 'CLIENT_IP',
+  'Generated Cookie': 'GENERATED_COOKIE',
+  'Client IP and protocol': 'CLIENT_IP_PROTO',
+  'Client IP, port and protocol': 'CLIENT_IP_PORT_PROTO',
+  'Header Field': 'HEADER_FIELD',
+  'HTTP Cookie': 'HTTP_COOKIE',
+  'Strong Cookie': 'STRONG_COOKIE_AFFINITY',
+};
+
+export const sessionAffinityModelToViewMap = _.invert<IStringMap, IStringMap>(sessionAffinityViewToModelMap);

package/src/loadBalancer/configure/http/backendService/backendService.component.html

@@ -0,0 +1,157 @@
+<div class="container-fluid form-horizontal">
+  <hr ng-if="$ctrl.index > 0" />
+  <ng-form name="backendService">
+    <div class="form-group">
+      <div class="col-md-12 well alert-danger" ng-if="backendService.serviceName.$error.validateUnique">
+        <validation-error message="There is already a backend service with that name."></validation-error>
+      </div>
+      <div
+        class="col-md-12 well alert-danger"
+        ng-if="backendService.serviceName.$error.pattern || backendService.serviceName.$error.max"
+      >
+        <validation-error
+          message="Name must start with a lowercase letter followed by up to 62 lowercase letters, numbers, or hyphens, and cannot end with a hyphen."
+        >
+        </validation-error>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Name</div>
+
+      <div class="col-md-4" ng-if="$ctrl.editExisting">
+        <ui-select
+          ng-model="$ctrl.backendService"
+          on-select="$ctrl.onBackendServiceSelect($item)"
+          class="form-control input-sm"
+        >
+          <ui-select-match placeholder="Select...">
+            {{ $select.selected.name }}
+          </ui-select-match>
+          <ui-select-choices
+            repeat="backendService in $ctrl.backingData.backendServices | filter: {name: $select.search, account: $ctrl.loadBalancer.credentials}"
+          >
+            <div ng-bind-html="backendService.name | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+
+      <div class="col-md-4" ng-if="!$ctrl.editExisting">
+        <input
+          class="form-control input-sm"
+          required
+          type="text"
+          name="serviceName"
+          ng-pattern="/^[a-z]([-a-z0-9]*[a-z0-9])?$/"
+          max="63"
+          validate-unique="$ctrl.getAllServiceNames()"
+          ng-model-options="{ debounce: 250 }"
+          ng-model="$ctrl.backendService.name"
+        />
+      </div>
+
+      <div class="col-md-2">
+        <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteService()">
+          <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+          <span>Delete</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-6 col-md-offset-4">
+        <a href class="small" ng-if="!$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()"
+          >Toggle for list of existing backend services</a
+        >
+        <a href class="small" ng-if="$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()">Toggle for text input</a>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Health Check</b>
+      </div>
+      <div class="col-md-4">
+        <ui-select
+          ng-model="$ctrl.backendService.healthCheck"
+          required
+          on-select="$ctrl.command.onHealthCheckSelected($item, $ctrl.command)"
+          class="form-control input-sm"
+        >
+          <ui-select-match placeholder="Select...">
+            {{ $select.selected }}
+          </ui-select-match>
+          <ui-select-choices repeat="healthCheck in $ctrl.getAllHealthChecks() | filter: $select.search">
+            <div ng-bind-html="healthCheck | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Session Affinity</b>
+      </div>
+      <div class="col-md-4">
+        <ui-select ng-model="$ctrl.backendService.sessionAffinity" required class="form-control input-sm">
+          <ui-select-match placeholder="Select...">
+            {{ $select.selected }}
+          </ui-select-match>
+          <ui-select-choices repeat="sessionAffinity in $ctrl.getSessionAffinitySuggestions() | filter: $select.search">
+            <div ng-bind-html="sessionAffinity | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Port Name</b>
+        <help-field key="gce.loadBalancer.portName"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input required type="string" class="form-control input-sm" ng-model="$ctrl.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.backendService.connectionDrainingTimeoutSec"
+        />
+      </div>
+    </div>
+
+    <div ng-if="$ctrl.loadBalancer.loadBalancerType === 'HTTP'" class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Enable CDN</b>
+      </div>
+      <div class="col-md-4">
+        <input type="checkbox" ng-model="$ctrl.backendService.enableCDN" />
+      </div>
+    </div>
+
+    <div class="form-group" ng-if="$ctrl.backendService.sessionAffinity === 'Generated Cookie'">
+      <div class="col-md-4 sm-label-right">
+        <b>Affinity Cookie TTL Seconds</b>
+      </div>
+      <div class="col-md-4">
+        <input
+          ng-model="$ctrl.backendService.affinityCookieTtlSec"
+          required
+          type="number"
+          name="cookieTtl"
+          min="0"
+          max="{{ $ctrl.maxCookieTtl }}"
+          class="form-control input-sm"
+        />
+      </div>
+    </div>
+  </ng-form>
+</div>

package/src/loadBalancer/configure/http/backendService/backendService.component.js

@@ -0,0 +1,80 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+import { BackendServiceTemplate } from '../templates';
+
+export const GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BACKENDSERVICE_BACKENDSERVICE_COMPONENT =
+  'spinnaker.deck.gce.httpLoadBalancer.backendService.component';
+export const name = GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BACKENDSERVICE_BACKENDSERVICE_COMPONENT; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BACKENDSERVICE_BACKENDSERVICE_COMPONENT, []).component(
+  'gceHttpLoadBalancerBackendServiceSelector',
+  {
+    bindings: {
+      deleteService: '&',
+      backendService: '=',
+      command: '=',
+      index: '=',
+    },
+    templateUrl: require('./backendService.component.html'),
+    controller: function () {
+      this.$onInit = () => {
+        this.backingData = this.command.backingData;
+        this.loadBalancer = this.command.loadBalancer;
+        const servicesByName = this.backingData.backendServicesKeyedByName;
+
+        this.onBackendServiceSelect = (selectedBackendService) => {
+          assign(selectedBackendService);
+          this.command.onHealthCheckSelected(selectedBackendService.healthCheck, this.command);
+        };
+
+        this.toggleEditExisting = () => {
+          this.editExisting = !this.editExisting;
+          if (!this.editExisting) {
+            const template = new BackendServiceTemplate();
+            assign(template);
+          } else {
+            delete this.backendService.name;
+          }
+        };
+
+        this.getAllHealthChecks = () => {
+          const allHealthChecks = this.loadBalancer.healthChecks.concat(this.backingData.healthChecks);
+          return _.chain(allHealthChecks)
+            .filter((hc) => hc.account === this.loadBalancer.credentials || !hc.account)
+            .map((hc) => hc.name)
+            .uniq()
+            .value();
+        };
+
+        this.getSessionAffinitySuggestions = () => {
+          if (this.loadBalancer.loadBalancerType === 'HTTP') {
+            return ['None', 'Client IP', 'Generated Cookie'];
+          } else {
+            return ['None', 'Client IP', 'Generated Cookie', 'Header Field', 'HTTP Cookie'];
+          }
+        };
+
+        this.getAllServiceNames = () => {
+          return this.command.backingData.backendServices
+            .filter((service) => service.account === this.loadBalancer.credentials)
+            .map((service) => service.name);
+        };
+
+        this.maxCookieTtl = 60 * 60 * 24; // One day.
+
+        const getBackendServiceName = () => {
+          return _.get(this, 'backendService.name');
+        };
+
+        if (servicesByName[getBackendServiceName()]) {
+          this.editExisting = true;
+        }
+
+        const assign = (toAssign) => {
+          this.loadBalancer.backendServices[this.index] = this.backendService = toAssign;
+        };
+      };
+    },
+  },
+);