91 lines
4.3 KiB
HTML
91 lines
4.3 KiB
HTML
<div ng-controller="horizon.app.core.images.steps.CreateVolumeController as createVolumeCtrl">
|
|
<p translate>Volumes are block devices that can be attached to instances.</p>
|
|
<fieldset ng-disabled="createVolumeCtrl.volumeQuota.overMax">
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<div class="form-group" ng-class="{'has-error':volumeForm.name.$invalid && volumeForm.name.$dirty}">
|
|
<label class="control-label">
|
|
<span translate>Name</span>
|
|
</label>
|
|
<input name="name" class="form-control" type="text" ng-model="createVolumeCtrl.volume.name"
|
|
ng-maxlength="createVolumeCtrl.validationRules.fieldMaxLength">
|
|
<p class="help-block alert alert-danger"
|
|
ng-show="volumeForm.name.$invalid && volumeForm.name.$dirty">
|
|
<translate>
|
|
A volume name less than {$createVolumeCtrl.validationRules.fieldMaxLength + 1$} characters is required.
|
|
</translate>
|
|
</p>
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-error':volumeForm.description.$invalid && volumeForm.description.$dirty}">
|
|
<label class="control-label">
|
|
<span translate>Description</span>
|
|
</label>
|
|
<input name="description" class="form-control" type="text" ng-model="createVolumeCtrl.volume.description"
|
|
ng-maxlength="createVolumeCtrl.validationRules.fieldMaxLength">
|
|
<p class="help-block alert alert-danger"
|
|
ng-show="volumeForm.description.$invalid && volumeForm.description.$dirty">
|
|
<translate>
|
|
A volume description less than {$createVolumeCtrl.validationRules.fieldMaxLength + 1$} characters is required.
|
|
</translate>
|
|
</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
<span translate>Use image as a source</span>
|
|
</label>
|
|
<input class="form-control" type="text" ng-model="createVolumeCtrl.sourceImage" disabled>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
<span translate>Type</span>
|
|
</label>
|
|
<select class="form-control"
|
|
ng-model="createVolumeCtrl.volumeType"
|
|
ng-options="volumeType as volumeType.name for volumeType in createVolumeCtrl.volumeTypes">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<div class="form-group" ng-class="{'has-error':volumeForm['volume-size'].$invalid && volumeForm['volume-size'].$dirty}">
|
|
<label for="volume-size" class="control-label">
|
|
<span translate>Size (GiB)</span>
|
|
<span class="hz-icon-required fa fa-asterisk"></span>
|
|
</label>
|
|
<input name="volume-size" class="form-control" id="volume-size" type="number" min="1" ng-required="true" ng-model="createVolumeCtrl.volume.size">
|
|
<p class="help-block alert alert-danger"
|
|
ng-show="volumeForm['volume-size'].$invalid && volumeForm['volume-size'].$dirty">
|
|
<translate>Volume size is required and must be positive integer</translate>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="availability-zone" class="control-label">
|
|
<span translate>Availability Zone</span>
|
|
<span class="hz-icon-required fa fa-asterisk"></span>
|
|
</label>
|
|
<select ng-options="item for item in createVolumeCtrl.availabilityZones"
|
|
class="form-control"
|
|
id="availability-zone"
|
|
ng-model="createVolumeCtrl.volume.availability_zone"
|
|
ng-required="true">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<pie-chart chart-data="createVolumeCtrl.storageQuota"></pie-chart>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<pie-chart chart-data="createVolumeCtrl.volumeQuota"></pie-chart>
|
|
<p translate>Volume Type Description:</p>
|
|
<dl class>
|
|
<dt>{$ createVolumeCtrl.volumeType.name $}</dt>
|
|
<dd>{$ createVolumeCtrl.volumeType.description $}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|