351 lines
14 KiB
HTML
351 lines
14 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" translate>{$ 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>
|
|
<!--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>
|
|
<!--properties add-property-->
|
|
<form id="addPropertyForm"
|
|
name="addPropertyForm">
|
|
<div class="form-group">
|
|
<label for="properties"
|
|
class="control-label"
|
|
translate>Properties</label>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon"
|
|
style="width:25%;text-align:right"
|
|
translate>
|
|
Add New Property:</span>
|
|
<input class="form-control"
|
|
id="properties"
|
|
type="text"
|
|
ng-model="propertyName"
|
|
validate-unique="ctrl.checkPropertyUnique"
|
|
placeholder="{$ 'Property Name' | translate $}"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary"
|
|
type="button"
|
|
ng-disabled="!propertyName || addPropertyForm.$invalid"
|
|
ng-click="ctrl.node.properties[propertyName] = null;
|
|
propertyName = null">
|
|
<span class="fa fa-plus"> </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--properties property-list-->
|
|
<form id="propertiesForm"
|
|
name="propertiesForm">
|
|
<div class="form-group">
|
|
<div class="input-group input-group-sm"
|
|
ng-repeat="(propertyName, propertyValue) in ctrl.node.properties">
|
|
<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.properties[propertyName]"
|
|
ng-required="true"/>
|
|
<div class="input-group-btn">
|
|
<a class="btn btn-default"
|
|
ng-click="ctrl.deleteProperty(propertyName)">
|
|
<span class="fa fa-minus"> </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--extras add-property-->
|
|
<form id="addExtraForm"
|
|
name="addExtraForm">
|
|
<div class="form-group">
|
|
<label for="extras"
|
|
class="control-label"
|
|
translate>Extras</label>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon"
|
|
style="width:25%;text-align:right"
|
|
translate>
|
|
Add Extra:</span>
|
|
<input class="form-control"
|
|
id="extras"
|
|
type="text"
|
|
ng-model="extraName"
|
|
validate-unique="ctrl.checkExtraUnique"
|
|
placeholder="{$ 'Extra Property Name' | translate $}"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary"
|
|
type="button"
|
|
ng-disabled="!extraName || addExtraForm.$invalid"
|
|
ng-click="ctrl.node.extra[extraName] = null;
|
|
extraName = null">
|
|
<span class="fa fa-plus"> </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--extras property-list-->
|
|
<form id="extraForm"
|
|
name="extraForm">
|
|
<div class="form-group">
|
|
<div class="input-group input-group-sm"
|
|
ng-repeat="(propertyName, propertyValue) in ctrl.node.extra">
|
|
<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.extra[propertyName]"
|
|
ng-required="true"/>
|
|
<div class="input-group-btn">
|
|
<a class="btn btn-default"
|
|
ng-click="ctrl.deleteExtra(propertyName)">
|
|
<span class="fa fa-minus"> </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--instance-info add-property-->
|
|
<form ng-if="ctrl.showInstanceInfo"
|
|
id="addInstancePropertyForm"
|
|
name="addInstancePropertyForm">
|
|
<div class="form-group">
|
|
<label for="instanceProperty"
|
|
class="control-label"
|
|
translate>Instance Info</label>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon"
|
|
style="width:25%;text-align:right"
|
|
translate>
|
|
Add New Instance Property:</span>
|
|
<input class="form-control"
|
|
id="instanceProperty"
|
|
type="text"
|
|
ng-model="instancePropertyName"
|
|
validate-unique="ctrl.checkInstancePropertyUnique"
|
|
placeholder="{$ 'Instance Property Name' | translate $}"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary"
|
|
type="button"
|
|
ng-disabled="!instancePropertyName ||
|
|
addInstancePropertyForm.$invalid"
|
|
ng-click="ctrl.node.instance_info[instancePropertyName] = null;
|
|
instancePropertyName = null">
|
|
<span class="fa fa-plus"> </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--instance-info property-list-->
|
|
<form ng-if="ctrl.showInstanceInfo"
|
|
id="instanceInfoForm"
|
|
name="instanceInfoForm">
|
|
<div class="form-group">
|
|
<div class="input-group input-group-sm"
|
|
ng-repeat="(propertyName, propertyValue) in ctrl.node.instance_info">
|
|
<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.instance_info[propertyName]"
|
|
ng-required="true"/>
|
|
<div class="input-group-btn">
|
|
<a class="btn btn-default"
|
|
ng-click="ctrl.deleteInstanceProperty(propertyName)">
|
|
<span class="fa fa-minus"> </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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() | translate $}">
|
|
<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
|
|
translate>{$ 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"
|
|
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"
|
|
translate>
|
|
{$ ctrl.submitButtonTitle $}
|
|
</button>
|
|
</div>
|