@spotinst/spinnaker-deck/app/scripts/modules/google/src/loadBalancer/configure/network/createLoadBalancerProperties.html

Spinnaker-Deck service, forked with support to Spotinst

<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>