@spinnaker/google 0.0.0-main-2

package/src/loadBalancer/configure/network/createLoadBalancer.controller.js

@@ -0,0 +1,224 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import { AccountService, LoadBalancerWriter, ModalWizard, TaskMonitor } from '@spinnaker/core';
+
+import { GOOGLE_GCEREGIONSELECTFIELD_DIRECTIVE } from '../../../gceRegionSelectField.directive';
+import { GOOGLE_LOADBALANCER_LOADBALANCER_TRANSFORMER } from '../../loadBalancer.transformer';
+
+export const GOOGLE_LOADBALANCER_CONFIGURE_NETWORK_CREATELOADBALANCER_CONTROLLER =
+  'spinnaker.loadBalancer.gce.create.controller';
+export const name = GOOGLE_LOADBALANCER_CONFIGURE_NETWORK_CREATELOADBALANCER_CONTROLLER; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_CONFIGURE_NETWORK_CREATELOADBALANCER_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  GOOGLE_LOADBALANCER_LOADBALANCER_TRANSFORMER,
+  GOOGLE_GCEREGIONSELECTFIELD_DIRECTIVE,
+]).controller('gceCreateLoadBalancerCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  '$state',
+  'gceLoadBalancerTransformer',
+  'application',
+  'loadBalancer',
+  'isNew',
+  function ($scope, $uibModalInstance, $state, gceLoadBalancerTransformer, application, loadBalancer, isNew) {
+    const ctrl = this;
+
+    $scope.isNew = isNew;
+
+    $scope.pages = {
+      location: require('./createLoadBalancerProperties.html'),
+      listeners: require('./listeners.html'),
+      healthCheck: require('./healthCheck.html'),
+      advancedSettings: require('./advancedSettings.html'),
+    };
+
+    $scope.state = {
+      accountsLoaded: false,
+      submitting: false,
+    };
+
+    $scope.sessionAffinityOptions = [
+      { value: 'NONE', name: 'None' },
+      { value: 'CLIENT_IP', name: 'Client IP' },
+      { value: 'CLIENT_IP_PROTO', name: 'Client IP and protocol' },
+    ];
+
+    function onApplicationRefresh() {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      $uibModalInstance.close();
+      const newStateParams = {
+        name: $scope.loadBalancer.name,
+        accountId: $scope.loadBalancer.credentials,
+        region: $scope.loadBalancer.region,
+        provider: 'gce',
+      };
+      if (!$state.includes('**.loadBalancerDetails')) {
+        $state.go('.loadBalancerDetails', newStateParams);
+      } else {
+        $state.go('^.loadBalancerDetails', newStateParams);
+      }
+    }
+
+    function onTaskComplete() {
+      application.loadBalancers.refresh();
+      application.loadBalancers.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: (isNew ? 'Creating ' : 'Updating ') + 'your load balancer',
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    function initializeEditMode() {}
+
+    function initializeCreateMode() {
+      AccountService.listAccounts('gce').then(function (accounts) {
+        $scope.accounts = accounts;
+        $scope.state.accountsLoaded = true;
+
+        const accountNames = _.map($scope.accounts, 'name');
+        if (accountNames.length && !accountNames.includes($scope.loadBalancer.credentials)) {
+          $scope.loadBalancer.credentials = accountNames[0];
+        }
+
+        ctrl.accountUpdated();
+      });
+    }
+
+    function updateLoadBalancerNames() {
+      const account = $scope.loadBalancer.credentials;
+
+      const accountLoadBalancersByRegion = {};
+      application
+        .getDataSource('loadBalancers')
+        .refresh(true)
+        .then(() => {
+          application.getDataSource('loadBalancers').data.forEach((loadBalancer) => {
+            if (loadBalancer.account === account) {
+              accountLoadBalancersByRegion[loadBalancer.region] =
+                accountLoadBalancersByRegion[loadBalancer.region] || [];
+              accountLoadBalancersByRegion[loadBalancer.region].push(loadBalancer.name);
+            }
+          });
+
+          $scope.existingLoadBalancerNames = _.flatten(_.map(accountLoadBalancersByRegion));
+        });
+    }
+
+    // initialize controller
+    if (loadBalancer) {
+      $scope.loadBalancer = gceLoadBalancerTransformer.convertLoadBalancerForEditing(loadBalancer);
+      initializeEditMode();
+    } else {
+      $scope.loadBalancer = gceLoadBalancerTransformer.constructNewLoadBalancerTemplate();
+      updateLoadBalancerNames();
+      initializeCreateMode();
+    }
+
+    // Controller API
+
+    this.requiresHealthCheckPath = function () {
+      return $scope.loadBalancer.healthCheckProtocol && $scope.loadBalancer.healthCheckProtocol.indexOf('HTTP') === 0;
+    };
+
+    this.prependForwardSlash = (text) => {
+      return text && text.indexOf('/') !== 0 ? `/${text}` : text;
+    };
+
+    this.updateName = function () {
+      $scope.loadBalancer.name = this.getName();
+    };
+
+    this.getName = function () {
+      const loadBalancer = $scope.loadBalancer;
+      const loadBalancerName = [application.name, loadBalancer.stack || '', loadBalancer.detail || ''].join('-');
+      return _.trimEnd(loadBalancerName, '-');
+    };
+
+    this.accountUpdated = function () {
+      AccountService.getRegionsForAccount($scope.loadBalancer.credentials).then(function (regions) {
+        if (_.isArray(regions)) {
+          $scope.regions = _.map(regions, 'name');
+        } else {
+          // TODO(duftler): Remove this once we finish deprecating the old style regions/zones in clouddriver GCE credentials.
+          $scope.regions = _.keys(regions);
+        }
+        ctrl.regionUpdated();
+      });
+    };
+
+    this.regionUpdated = function () {
+      updateLoadBalancerNames();
+      ctrl.updateName();
+    };
+
+    this.setVisibilityHealthCheckTab = function () {
+      const wizard = ModalWizard;
+
+      if ($scope.loadBalancer.listeners[0].healthCheck) {
+        wizard.includePage('Health Check');
+        wizard.markIncomplete('Health Check');
+        wizard.includePage('Advanced Settings');
+        wizard.markIncomplete('Advanced Settings');
+      } else {
+        wizard.excludePage('Health Check');
+        wizard.markComplete('Health Check');
+        wizard.excludePage('Advanced Settings');
+        wizard.markComplete('Advanced Settings');
+        wizard.markComplete('Listener');
+      }
+    };
+
+    this.submit = function () {
+      const descriptor = isNew ? 'Create' : 'Update';
+
+      $scope.taskMonitor.submit(function () {
+        const params = {
+          cloudProvider: 'gce',
+          loadBalancerName: $scope.loadBalancer.name,
+        };
+
+        if ($scope.loadBalancer.listeners && $scope.loadBalancer.listeners.length > 0) {
+          const listener = $scope.loadBalancer.listeners[0];
+
+          if (listener.protocol) {
+            params.ipProtocol = listener.protocol;
+          }
+
+          if (listener.portRange) {
+            params.portRange = listener.portRange;
+          }
+
+          if (listener.healthCheck) {
+            params.healthCheck = {
+              port: $scope.loadBalancer.healthCheckPort,
+              requestPath: $scope.loadBalancer.healthCheckPath,
+              timeoutSec: $scope.loadBalancer.healthTimeout,
+              checkIntervalSec: $scope.loadBalancer.healthInterval,
+              healthyThreshold: $scope.loadBalancer.healthyThreshold,
+              unhealthyThreshold: $scope.loadBalancer.unhealthyThreshold,
+            };
+          } else {
+            params.healthCheck = null;
+          }
+
+          params.sessionAffinity = $scope.loadBalancer.sessionAffinity;
+        }
+
+        return LoadBalancerWriter.upsertLoadBalancer($scope.loadBalancer, application, descriptor, params);
+      });
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+  },
+]);

package/src/loadBalancer/configure/network/createLoadBalancer.controller.spec.js

@@ -0,0 +1,76 @@
+'use strict';
+
+import * as angular from 'angular';
+import { ApplicationModelBuilder, ModalWizard } from '@spinnaker/core';
+
+describe('Controller: gceCreateLoadBalancerCtrl', function () {
+  // load the controller's module
+  beforeEach(function () {
+    window.module(require('./createLoadBalancer.controller').name);
+  });
+
+  // Initialize the controller and a mock scope
+  beforeEach(
+    window.inject(function ($controller, $rootScope) {
+      this.$scope = $rootScope.$new();
+      const app = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'loadBalancers',
+        lazy: true,
+        defaultData: [],
+      });
+      this.ctrl = $controller('gceCreateLoadBalancerCtrl', {
+        $scope: this.$scope,
+        $uibModalInstance: { dismiss: angular.noop, result: { then: angular.noop } },
+        application: app,
+        loadBalancer: null,
+        isNew: true,
+      });
+    }),
+  );
+
+  it('requires health check path for HTTP/S', function () {
+    const loadBalancer = {
+      healthCheckProtocol: 'HTTP',
+    };
+
+    this.$scope.loadBalancer = loadBalancer;
+
+    expect(this.ctrl.requiresHealthCheckPath()).toBe(true);
+
+    loadBalancer.healthCheckProtocol = 'HTTPS';
+    expect(this.ctrl.requiresHealthCheckPath()).toBe(true);
+
+    loadBalancer.healthCheckProtocol = 'SSL';
+    expect(this.ctrl.requiresHealthCheckPath()).toBe(false);
+
+    loadBalancer.healthCheckProtocol = 'TCP';
+    expect(this.ctrl.requiresHealthCheckPath()).toBe(false);
+  });
+
+  it('should update name', function () {
+    const lb = this.$scope.loadBalancer;
+    expect(lb).toBeDefined();
+    expect(lb.name).toBeUndefined();
+
+    this.ctrl.updateName();
+    expect(lb.name).toBe('app');
+
+    this.$scope.loadBalancer.stack = 'testStack';
+    this.ctrl.updateName();
+    expect(lb.name).toBe('app-testStack');
+  });
+
+  it('should make the health check tab invisible then visible again', function () {
+    spyOn(ModalWizard, 'includePage');
+    spyOn(ModalWizard, 'markIncomplete');
+    spyOn(ModalWizard, 'excludePage');
+    spyOn(ModalWizard, 'markComplete');
+    this.$scope.loadBalancer.listeners[0].healthCheck = false;
+    this.ctrl.setVisibilityHealthCheckTab();
+    expect(ModalWizard.excludePage.calls.count()).toEqual(2);
+
+    this.$scope.loadBalancer.listeners[0].healthCheck = true;
+    this.ctrl.setVisibilityHealthCheckTab();
+    expect(ModalWizard.includePage.calls.count()).toEqual(2);
+  });
+});

package/src/loadBalancer/configure/network/createLoadBalancer.html

@@ -0,0 +1,25 @@
+<form name="form" class="form-horizontal">
+  <v2-modal-wizard heading="Create New Load Balancer" task-monitor="taskMonitor" dismiss="$dismiss()">
+    <v2-wizard-page key="Location" label="Location">
+      <ng-include src="pages.location"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Listener" label="Listener" done="true">
+      <ng-include src="pages.listeners"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Health Check" label="Health Check" done="true">
+      <ng-include src="pages.healthCheck"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Advanced Settings" label="Advanced Settings" done="true">
+      <ng-include src="pages.advancedSettings"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="form.$invalid || taskMonitor.submitting"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="isNew"
+    ></submit-button>
+  </div>
+</form>

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

@@ -0,0 +1,86 @@
+<div class="container-fluid form-horizontal">
+  <div ng-if="!state.accountsLoaded" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div class="modal-body" ng-if="state.accountsLoaded">
+    <div class="form-group">
+      <div
+        class="col-md-12 well"
+        ng-class="{'alert-danger': form.loadBalancerName.$error.validateUnique, 'alert-info': !form.loadBalancerName.$error.validateUnique}"
+      >
+        <strong>Your load balancer will be named:</strong>
+        <span>{{ctrl.getName()}}</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="loadBalancer.name"
+          validate-unique="existingLoadBalancerNames"
+          validate-ignore-case="true"
+          name="loadBalancerName"
+        />
+        <validation-error
+          ng-if="form.loadBalancerName.$error.validateUnique"
+          message="There is already a load balancer in {{loadBalancer.credentials}} with that name."
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Account</div>
+      <div class="col-md-7">
+        <account-select-field
+          component="loadBalancer"
+          field="credentials"
+          accounts="accounts"
+          provider="'gce'"
+          on-change="ctrl.accountUpdated()"
+        ></account-select-field>
+      </div>
+    </div>
+    <gce-region-select-field
+      label-columns="3"
+      component="loadBalancer"
+      field="region"
+      account="loadBalancer.credentials"
+      on-change="ctrl.regionUpdated()"
+      regions="regions"
+    ></gce-region-select-field>
+    <div class="form-group">
+      <div class="col-md-3 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="loadBalancer.stack"
+          name="stackName"
+          ng-change="ctrl.updateName()"
+          ng-pattern="/^[a-zA-Z0-9]*$/"
+        />
+      </div>
+      <div class="col-md-6 form-inline">
+        <label class="sm-label-right"> Detail <help-field key="gce.loadBalancer.detail"></help-field> </label>
+        <input
+          type="text"
+          class="form-control input-sm"
+          ng-model="loadBalancer.detail"
+          name="detailName"
+          ng-change="ctrl.updateName()"
+          ng-pattern="/^[a-zA-Z0-9-]*$/"
+        />
+      </div>
+      <div class="col-md-7 col-md-offset-3" ng-if="form.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="form.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="form.loadBalancerName.$error.maxlength">
+        <validation-error message="Load Balancer name can only be 63 characters."></validation-error>
+      </div>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/network/editLoadBalancer.html

@@ -0,0 +1,29 @@
+<v2-modal-wizard
+  heading="Edit {{loadBalancer.name}}: {{loadBalancer.region}}: {{loadBalancer.credentials}}"
+  task-monitor="taskMonitor"
+  dismiss="$dismiss()"
+>
+  <v2-wizard-page key="Listener" label="Listener" done="true">
+    <ng-include src="pages.listeners"></ng-include>
+  </v2-wizard-page>
+  <v2-wizard-page key="Health Check" label="Health Check" done="true" render="!!loadBalancer.listeners[0].healthCheck">
+    <ng-include src="pages.healthCheck"></ng-include>
+  </v2-wizard-page>
+  <v2-wizard-page
+    key="Advanced Settings"
+    label="Advanced Settings"
+    done="true"
+    render="!!loadBalancer.listeners[0].healthCheck"
+  >
+    <ng-include src="pages.advancedSettings"></ng-include>
+  </v2-wizard-page>
+</v2-modal-wizard>
+<div class="modal-footer">
+  <button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+  <submit-button
+    is-disabled="form.$invalid || taskMonitor.submitting"
+    submitting="taskMonitor.submitting"
+    on-click="ctrl.submit()"
+    is-new="isNew"
+  ></submit-button>
+</div>

package/src/loadBalancer/configure/network/healthCheck.html

@@ -0,0 +1,36 @@
+<div class="container-fluid form-horizontal">
+  <div class="col-md-4 sm-label-right">Ping</div>
+  <div class="col-md-8">
+    <table class="table table-condensed packed">
+      <thead>
+        <tr>
+          <th width="30%">Port</th>
+          <th><span ng-if="ctrl.requiresHealthCheckPath()">Path</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input
+              class="form-control input-sm"
+              type="number"
+              ng-model="loadBalancer.healthCheckPort"
+              required
+              min="0"
+            />
+          </td>
+          <td>
+            <input
+              ng-if="ctrl.requiresHealthCheckPath()"
+              class="form-control input-sm"
+              type="text"
+              ng-change="loadBalancer.healthCheckPath = ctrl.prependForwardSlash(loadBalancer.healthCheckPath)"
+              ng-model="loadBalancer.healthCheckPath"
+              required
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/loadBalancer/configure/network/listeners.html

@@ -0,0 +1,55 @@
+<div class="container-fluid form-horizontal">
+  <form name="listenerForm">
+    <div class="form-group">
+      <div class="alert alert-warning" ng-if="listenerForm.protocolSelect.$dirty || listenerForm.portRangeInput.$dirty">
+        <p>
+          <i class="fa fa-exclamation-triangle"></i>
+          Changing your load balancer's protocol or port range will cause the forwarding rule to be destroyed and
+          recreated. This will most likely cause the IP address of this load balancer to change. If you want to preserve
+          the IP for this load balancer, you need to reserve it and manipulate the forwarding rule in Google Cloud
+          Console.
+        </p>
+      </div>
+      <div class="col-md-3 sm-label-right table-offset">Listener</div>
+      <div class="col-md-9">
+        <table class="table table-condensed packed">
+          <thead>
+            <tr>
+              <th>Protocol</th>
+              <th>
+                Port Range
+                <help-field key="gce.loadBalancer.portRange"></help-field>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="listener in loadBalancer.listeners">
+              <td>
+                <select
+                  class="form-control input-sm"
+                  ng-model="listener.protocol"
+                  ng-options="protocol for protocol in ['TCP', 'UDP']"
+                  name="protocolSelect"
+                ></select>
+              </td>
+              <td><input class="form-control input-sm" ng-model="listener.portRange" name="portRangeInput" /></td>
+            </tr>
+            <tr>
+              <td>
+                <label
+                  ><input
+                    type="checkbox"
+                    ng-model="loadBalancer.listeners[0].healthCheck"
+                    ng-change="ctrl.setVisibilityHealthCheckTab()"
+                  />
+                  Enable health check?
+                  <help-field key="gce.loadBalancer.healthCheck"></help-field>
+                </label>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </form>
+</div>

package/src/loadBalancer/configure/ssl/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/ssl/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>