03af6076fd
Rework HTML and Javascript to provide better strings for the translators to work on. The existing code generated strings that contained unnecessary HTML markup. Change-Id: Ib528c64234d88c39b266e03a702f1ce50a96684f
265 lines
11 KiB
HTML
265 lines
11 KiB
HTML
<div class="modal-header" modal-draggable>
|
|
<button type="button"
|
|
class="close"
|
|
ng-click="$dismiss()"
|
|
aria-hidden="true"
|
|
aria-label="Close">
|
|
<span aria-hidden="true" class="fa fa-times"></span>
|
|
</button>
|
|
<h3 class="modal-title">{$ ::ctrl.modalTitle $}</h3>
|
|
</div>
|
|
<!-- begin general node info modal -->
|
|
<div class="modal-body">
|
|
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
|
<ul class="nav nav-tabs">
|
|
<li class="required active">
|
|
<a href=""
|
|
data-target="#nodeInfo"
|
|
data-toggle="tab"
|
|
translate>Node Info</a></li>
|
|
<li ng-if="!ctrl.driverProperties"
|
|
class="disabled">
|
|
<a data-target="#driverDetails"
|
|
translate>Driver Details</a></li>
|
|
<li ng-if="ctrl.driverProperties">
|
|
<a href=""
|
|
data-target="#driverDetails"
|
|
data-toggle="tab"
|
|
translate>Driver Details</a></li>
|
|
</ul>
|
|
|
|
<!--base node form-->
|
|
<form id="baseNodeForm"
|
|
name="baseNodeForm">
|
|
|
|
<!--tabbed content-->
|
|
<div class="tab-content">
|
|
<!-- node info tab-->
|
|
<div class="tab-pane active" id="nodeInfo">
|
|
<!--node name-->
|
|
<div class="form-group"
|
|
ng-class="{'has-error': baseNodeForm.name.$invalid &&
|
|
baseNodeForm.name.$dirty}">
|
|
<label for="name"
|
|
class="control-label"
|
|
translate>Node Name</label>
|
|
<div>
|
|
<input type="text"
|
|
class="form-control"
|
|
ng-model="ctrl.node.name"
|
|
id="name"
|
|
name="name"
|
|
ng-pattern="ctrl.validHostNameRegex"
|
|
placeholder="{$ ::'A unique node name. Optional.' | translate $}"/>
|
|
</div>
|
|
</div>
|
|
<!--network interface-->
|
|
<div class="form-group">
|
|
<label for="network_interface"
|
|
class="control-label"
|
|
translate>
|
|
Network Interface
|
|
</label>
|
|
<span class="help-icon"
|
|
data-container="body"
|
|
title=""
|
|
data-toggle="tooltip"
|
|
data-original-title="{$ ::'Network interface used for switching between provisioning, tenant, and cleaning networks.' | translate $}">
|
|
<span class="fa fa-question-circle"></span>
|
|
</span>
|
|
<div>
|
|
<div class="btn-group">
|
|
<label class="btn btn-default"
|
|
ng-repeat="opt in ['noop', 'flat', 'neutron']"
|
|
ng-model="ctrl.node.network_interface"
|
|
uib-btn-radio="opt">{$ opt $}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--node driver-->
|
|
<div class="form-group required">
|
|
<label for="driver"
|
|
class="control-label"
|
|
translate>Node Driver</label>
|
|
<span class="hz-icon-required fa fa-asterisk"></span>
|
|
<div>
|
|
<select id="driver"
|
|
class="form-control"
|
|
ng-options="driver as driver.name for driver in ctrl.drivers"
|
|
ng-model="ctrl.selectedDriver"
|
|
ng-change="ctrl.loadDriverProperties(ctrl.selectedDriver.name)">
|
|
<option value="" disabled selected translate>Select a Driver</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--property collections-->
|
|
<div ng-repeat="collection in ctrl.propertyCollections">
|
|
<form
|
|
id="add-{$ collection.id $}-form"
|
|
name="add-{$ collection.id $}-form">
|
|
<div class="form-group">
|
|
<label for="add-{$ collection.id $}-input"
|
|
class="control-label">
|
|
{$ collection.title $}</label>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon"
|
|
style="width:25%;text-align:right">
|
|
{$ collection.addPrompt $}:</span>
|
|
<input class="form-control"
|
|
id="add-{$ collection.id $}-input"
|
|
type="text"
|
|
ng-model="ctrl[collection.id]"
|
|
placeholder="{$ collection.placeholder $}"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary"
|
|
type="button"
|
|
ng-disabled="!ctrl[collection.id] ||
|
|
!ctrl.collectionCheckPropertyUnique(collection.id,
|
|
ctrl[collection.id]) ||
|
|
add-{$ collection.id $}-form.$invalid"
|
|
ng-click="ctrl.node[collection.id][ctrl[collection.id]] = null;
|
|
ctrl[collection.id] = null">
|
|
<span class="fa fa-plus"> </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form id="{$ collection.id $}-form"
|
|
name="{$ collection.id $}-form">
|
|
<div class="form-group">
|
|
<div class="input-group input-group-sm"
|
|
ng-repeat="(propertyName, propertyValue) in ctrl.node[collection.id]">
|
|
<span class="input-group-addon"
|
|
style="width:25%;text-align:right">
|
|
{$ propertyName $}
|
|
</span>
|
|
<input class="form-control"
|
|
type="text"
|
|
name="{$ propertyName $}"
|
|
ng-model="ctrl.node[collection.id][propertyName]"
|
|
ng-required="true"/>
|
|
<div class="input-group-btn">
|
|
<a class="btn btn-default"
|
|
ng-click="ctrl.collectionDeleteProperty(collection.id, propertyName)">
|
|
<span class="fa fa-minus"> </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!--end node info tab-->
|
|
|
|
<!--driver details tab-->
|
|
<div class="tab-pane" id="driverDetails">
|
|
<p class="text-center"
|
|
ng-if="ctrl.loadingDriverProperties">
|
|
<small><em><i class="fa fa-spin fa-refresh"></i></em></small>
|
|
</p>
|
|
<div ng-repeat="propertyGroup in ctrl.driverPropertyGroups"
|
|
ng-class="{'well': propertyGroup.length > 1}">
|
|
<div class="form-group"
|
|
ng-repeat="property in propertyGroup | filter:ctrl.isDriverPropertyActive"
|
|
ng-init="name = property.name;
|
|
selectOptions = property.getSelectOptions()"
|
|
ng-class="{'has-error': baseNodeForm.{$ name $}.$invalid &&
|
|
baseNodeForm.{$ name $}.$dirty}">
|
|
<label for="{$ name $}"
|
|
class="control-label"
|
|
style="white-space: nowrap">
|
|
{$ name $}
|
|
<span ng-if="property.isRequired()"
|
|
class="hz-icon-required fa fa-asterisk"></span>
|
|
<span class="help-icon"
|
|
data-container="body"
|
|
title=""
|
|
data-toggle="tooltip"
|
|
data-original-title="{$ property.getDescription() $}">
|
|
<span class="fa fa-question-circle"></span>
|
|
</span>
|
|
</label>
|
|
<div ng-if="!selectOptions"
|
|
ng-class="{'input-group': name === 'deploy_kernel' ||
|
|
name === 'deploy_ramdisk'}">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="{$ name $}"
|
|
name="{$ name $}"
|
|
ng-model="property.inputValue"
|
|
ng-pattern="property.getValidValueRegex()"
|
|
placeholder="{$ property.defaultValue !== undefined ?
|
|
property.defaultValue :
|
|
property.getDescription() $}"
|
|
ng-required="property.isRequired()"
|
|
empty-to-pristine/>
|
|
<div ng-if="name === 'deploy_kernel' ||
|
|
name === 'deploy_ramdisk'"
|
|
class="input-group-btn">
|
|
<button type="button"
|
|
class="btn btn-primary dropdown-toggle"
|
|
data-toggle="dropdown"
|
|
translate>
|
|
Choose an Image
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-right">
|
|
<li>
|
|
<a class="dropdown-item"
|
|
ng-repeat="imageObj in ctrl.images"
|
|
href="#"
|
|
ng-click="property.inputValue = imageObj.id">{$ imageObj.name + ' [' + imageObj.id + ']' $}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div ng-if="selectOptions" class="">
|
|
<select ng-if="selectOptions.length > 4"
|
|
id="{$ name $}"
|
|
class="form-control"
|
|
ng-options="opt for opt in selectOptions"
|
|
ng-model="property.inputValue"
|
|
ng-required="property.isRequired()">
|
|
<option ng-if="property.defaultValue === undefined"
|
|
value=""
|
|
disabled
|
|
selected>
|
|
{$ property.getDescription() $}</option>
|
|
</select>
|
|
<div ng-if="selectOptions.length <= 4"
|
|
class="btn-group">
|
|
<label class="btn btn-default"
|
|
ng-repeat="opt in selectOptions"
|
|
ng-model="property.inputValue"
|
|
uib-btn-radio="opt">{$ opt $}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end driver details tab-->
|
|
</div>
|
|
<!--end tabbed content-->
|
|
</form>
|
|
<!--end base node form-->
|
|
</div>
|
|
</div>
|
|
<!--modal footer-->
|
|
<div class="modal-footer ng-scope">
|
|
<button class="btn btn-default"
|
|
ng-click="ctrl.cancel()">
|
|
<span class="fa fa-close"></span>
|
|
<span class="ng-scope" translate>Cancel</span>
|
|
</button>
|
|
|
|
<button type="submit"
|
|
ng-disabled="!ctrl.driverProperties ||
|
|
propertiesForm.$invalid ||
|
|
extraForm.$invalid ||
|
|
instanceInfoForm.$invalid"
|
|
ng-click="ctrl.submit()"
|
|
class="btn btn-primary">
|
|
{$ ::ctrl.submitButtonTitle $}
|
|
</button>
|
|
</div>
|