@spotinst/spinnaker-deck
Version:
Spinnaker-Deck service, forked with support to Spotinst
168 lines (165 loc) • 6.64 kB
HTML
<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 load balancer will be named:</strong>
<span>{{loadBalancerCmd.name}}</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="loadBalancerCmd.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 {{loadBalancerCmd.credentials}}:{{loadBalancerCmd.region}} with that name."
></validation-error>
</div>
</div>
<div class="form-group">
<div class="col-md-3 sm-label-right">Shape</div>
<div class="col-md-7">
<ui-select class="form-control input-sm" required ng-model="loadBalancerCmd.shape">
<ui-select-match placeholder="Select Shape">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="shape in ctrl.shapes | filter: $select.search">
<span ng-bind-html="shape | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
<!-- <select class="form-control input-sm" ng-model="loadBalancer.shape" required ng-options="shape for shapes in shapes"></select> -->
</div>
</div>
<div class="form-group">
<div class="col-md-3 sm-label-right">Private Load Balancer</div>
<div class="col-md-7 checkbox">
<label>
<input
type="checkbox"
name="isPrivate"
ng-model="loadBalancerCmd.isPrivate"
on-change="ctrl.isPrivateChanged()"
/>
</label>
</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="loadBalancerCmd"
field="credentials"
accounts="accounts"
provider="'oracle'"
on-change="ctrl.accountUpdated()"
></account-select-field>
</div>
</div>
<region-select-field
required
label-columns="3"
component="loadBalancerCmd"
field="region"
account="loadBalancerCmd.credentials"
provider="'oracle'"
on-change="ctrl.regionUpdated()"
regions="regions"
></region-select-field>
<div class="form-group">
<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="ctrl.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="vnet in ctrl.filteredVnets | filter: $select.search">
<span ng-bind-html="vnet.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 sm-label-right">Subnets</div>
<div class="col-md-7">
<ui-select
multiple
required
limit="2"
name="subnets"
class="form-control input-sm"
ng-model="ctrl.selectedSubnets"
on-select="ctrl.selectedSubnetsChanged($item)"
on-remove="ctrl.selectedSubnetRemoved()"
>
<ui-select-match placeholder="Select from existing subnets">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="subnet in ctrl.filteredSubnetsByType | filter: $select.search">
<span ng-bind-html="subnet.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
<div ng-if="ctrl.filteredSubnetsByType.length > 0">
<div class="col-md-7 col-md-offset-3" ng-if="loadBalancerCmd.isPrivate && ctrl.selectedSubnets.length != 1">
<validation-error message="Exactly one subnet must be selected for a private load balancer."></validation-error>
</div>
<div
class="col-md-7 col-md-offset-3"
ng-if="!loadBalancerCmd.isPrivate && ctrl.selectedSubnets.length === 1 && ctrl.selectedSubnets[0].availabilityDomain"
>
<validation-error
message="Exactly 2 Availability Domain-specific subnets must be selected for a public load balancer."
></validation-error>
</div>
</div>
<div class="form-group">
<div class="col-md-3 sm-label-right">Stack <help-field key="oracle.loadBalancer.stack"></help-field></div>
<div class="col-md-3">
<input
type="text"
class="form-control input-sm"
ng-model="loadBalancerCmd.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="oracle.loadBalancer.detail"></help-field> </label>
<input
type="text"
class="form-control input-sm"
ng-model="loadBalancerCmd.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>