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

Spinnaker-Deck service, forked with support to Spotinst

<div>
  <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 {{loadBalancerType}} 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="32"
          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}}:{{loadBalancer.region}} 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
          required
          component="loadBalancer"
          field="credentials"
          accounts="accounts"
          provider="'azure'"
          on-change="ctrl.accountUpdated()"
        ></account-select-field>
      </div>
    </div>
    <region-select-field
      required
      label-columns="3"
      component="loadBalancer"
      field="region"
      account="loadBalancer.credentials"
      provider="'azure'"
      on-change="ctrl.regionUpdated()"
      regions="regions"
    ></region-select-field>

    <div class="form-group" ng-if="!isALB">
      <div class="col-md-3 sm-label-right">Virtual Network</div>
      <div class="col-md-7">
        <ui-select
          class="form-control input-sm"
          required
          ng-model="loadBalancer.selectedVnet"
          on-select="ctrl.selectedVnetChanged($item)"
        >
          <ui-select-match placeholder="Select from existing virtual networks"
            >{{$select.selected.name}}</ui-select-match
          >
          <ui-select-choices repeat="selectVnet in ctrl.selectedVnets | filter: $select.search">
            <span ng-bind-html="selectVnet.name | highlight: $select.search"></span>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>

    <div class="form-group" ng-if="!isALB">
      <div class="col-md-3 sm-label-right">Subnet</div>
      <div class="col-md-7">
        <ui-select
          class="form-control input-sm"
          required
          ng-model="loadBalancer.selectedSubnet"
          on-select="ctrl.selectedSubnetChanged($item)"
        >
          <ui-select-match placeholder="Select from existing subnets">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="selectSubnet in ctrl.selectedSubnets | filter: $select.search">
            <span ng-bind-html="selectSubnet.name | highlight: $select.search"></span>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-3 sm-label-right">Stack <help-field key="azure.loadBalancer.stack"></help-field></div>
      <div class="col-md-3">
        <input
          required
          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="azure.loadBalancer.detail"></help-field> </label>
        <input
          required
          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 32 characters."></validation-error>
      </div>
    </div>
  </div>
</div>