161 lines
9.0 KiB
HTML
161 lines
9.0 KiB
HTML
<md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
|
|
<md-tab label="Basic" >
|
|
<md-content layout-padding>
|
|
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Name</label>
|
|
<input ng-model="$ctrl.subnet.name" name="name" ng-pattern="validate_name" md-maxlength="255" />
|
|
<div ng-messages="$ctrl.formReference.name.$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid network name.</div>
|
|
<div ng-message="md-maxlength" class="my-message">Too long network name.</div>
|
|
</div>
|
|
</md-input-container>
|
|
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Network</label>
|
|
<md-select ng-model="$ctrl.subnet.network" name="network" ng-disabled="$ctrl.disable.network" required>
|
|
<md-option ng-repeat="nw in networks" ng-value="nw.id" >
|
|
{$ nw.name $}
|
|
</md-option>
|
|
</md-select>
|
|
<div ng-messages="$ctrl.formReference.network.$error" role="alert" multiple>
|
|
<div ng-message="required" class="my-message">You must supply a network.</div>
|
|
</div>
|
|
</md-input-container>
|
|
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>IP Version</label>
|
|
<md-select ng-model="$ctrl.subnet.ip_version">
|
|
<md-option ng-value="4">4</md-option>
|
|
<md-option ng-value="6">6</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>CIDR</label>
|
|
<input ng-model="$ctrl.subnet.cidr" name="cidr" ng-pattern="validate_cidr" />
|
|
<div ng-messages="$ctrl.formReference.cidr.$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">Please input a valid cidr range.</div>
|
|
</div>
|
|
</md-input-container>
|
|
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<md-checkbox ng-model="$ctrl.subnet.enable_dhcp" aria-label="enable_dhcp">
|
|
Enable DHCP
|
|
</md-checkbox>
|
|
</md-input-container>
|
|
</md-content>
|
|
|
|
<md-switch class="md-primary" name="show_more" ng-model="show_more">
|
|
{$ 'Show More Properties' | translate $}
|
|
</md-switch>
|
|
</md-tab>
|
|
|
|
<md-tab label="More Properties" ng-if="show_more">
|
|
<md-content layout-padding>
|
|
|
|
<md-input-container class="md-block" ng-if="$ctrl.subnet.ip_version=='6'" flex-gt-xs>
|
|
<label>IPv6 Address Mode</label>
|
|
<input ng-model="$ctrl.subnet.ipv6_address_mode" name="ipv6_address_mode" md-maxlength="255" />
|
|
</md-input-container>
|
|
<md-input-container class="md-block" ng-if="$ctrl.subnet.ip_version=='6'" flex-gt-xs>
|
|
<label>IPv6 RA Mode</label>
|
|
<input ng-model="$ctrl.subnet.ipv6_ra_mode" name="ipv6_ra_mode" md-maxlength="255" />
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Gateway</label>
|
|
<input ng-model="$ctrl.subnet.gateway_ip" name="gateway_ip" ng-pattern="validate_ip_address" />
|
|
<div ng-messages="$ctrl.formReference.gateway_ip.$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">Please input a valid address.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Subnet Pool</label>
|
|
<input ng-model="$ctrl.subnet.subnetpool" name="subnetpool" type="text" ng-pattern="validate_uuid4">
|
|
<div ng-messages="$ctrl.formReference.subnetpool.$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid subnet pool id.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Prefix length</label>
|
|
<input ng-model="$ctrl.subnet.prefixlen" type="number" step="1" min="0"/>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>DNS Nameservers</label>
|
|
<md-chips ng-model="$ctrl.subnet.dns_nameservers"
|
|
placeholder="+ nameserver address"
|
|
readonly="false"
|
|
md-removeable="true"
|
|
md-transform-chip="validate_dns($chip)">
|
|
</md-chips>
|
|
</md-input-container>
|
|
</md-content>
|
|
</md-tab>
|
|
<md-tab label="Allocations & Routes" ng-if="show_more">
|
|
<md-content layout-padding>
|
|
<label>Allocation Pools</label>
|
|
<md-button ng-click="$ctrl.add_allocation_pool()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
|
|
<div ng-repeat="allocation_pool in $ctrl.subnet.allocation_pools" ng-class-odd="'odd'" ng-class-even="'even'">
|
|
<div layout-gt-xs="row" >
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Start</label>
|
|
<input ng-model="allocation_pool.start" type="text" name="allocpool_start_{$ $index $}" ng-pattern="validate_ip_address" />
|
|
<div ng-messages="$ctrl.formReference['allocpool_start_'+$index].$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid ip address.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>End</label>
|
|
<input ng-model="allocation_pool.end" type="text" name="allocpool_end_{$ $index $}" ng-pattern="validate_ip_address">
|
|
<div ng-messages="$ctrl.formReference['allocpool_end_'+$index].$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid ip address.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-button ng-click="$ctrl.delete_allocation_pool($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
|
|
</div>
|
|
</div>
|
|
|
|
<label>Host Routes</label>
|
|
<md-button ng-click="$ctrl.add_hostroute()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
|
|
<div ng-repeat="hostroute in $ctrl.subnet.host_routes" ng-class-odd="'odd'" ng-class-even="'even'">
|
|
<div layout-gt-xs="row" >
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Destination</label>
|
|
<input ng-model="hostroute.destination" name="hostroute_dest_{$ $index $}" type="text" ng-pattern="validate_cidr" />
|
|
<div ng-messages="$ctrl.formReference['hostroute_dest_'+$index].$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid ip address.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Nexthop</label>
|
|
<input ng-model="hostroute.nexthop"name="hostroute_nexthop_{$ $index $}" type="text" ng-pattern="validate_ip_address">
|
|
<div ng-messages="$ctrl.formReference['hostroute_nexthop_'+$index].$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid ip address.</div>
|
|
</div>
|
|
</md-input-container>
|
|
<md-button ng-click="$ctrl.delete_hostroute($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
|
|
</div>
|
|
</div>
|
|
</md-content>
|
|
</md-tab>
|
|
|
|
<md-tab label="Administration" ng-if="$ctrl.admin">
|
|
<md-content layout-padding>
|
|
<md-input-container class="md-block" flex-gt-xs>
|
|
<label>Tenant ID</label>
|
|
<input ng-model="$ctrl.subnet.tenant_id" name="tenant_id" type="text" ng-pattern="validate_uuid_nohyphen">
|
|
<div ng-messages="$ctrl.formReference.tenant_id.$error" role="alert" multiple>
|
|
<div ng-message="pattern" class="my-message">That doesn't look like a valid tenant id.</div>
|
|
</div>
|
|
</md-input-container>
|
|
</md-content>
|
|
</md-tab>
|
|
|
|
<md-tab label="Depends on">
|
|
<md-content layout-padding>
|
|
<depends-on dependson='dependson'></depends-on>
|
|
</md-content>
|
|
</md-tab>
|
|
|
|
</md-tabs>
|