osc-persistent-volume-claim.html

<ng-form name="persistentVolumeClaimForm">
  <fieldset ng-disabled="claimDisabled">
    <div ng-if="persistentVolumeClaimForm.capacity.$error.outOfClaims" class="has-error">
      <div class="alert alert-danger">
        <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
        <strong>Storage quota limit has been reached. You will not be able to create any new storage.</strong>
        <a ng-href="project/{{projectName}}/quota" target="_blank">View Quota&nbsp;</a>
      </div>
    </div>
    <div ng-if="storageClasses.length" class="form-group">
      <!--storage class-->
      <label>Storage Class</label>
      <div>
        <ui-select
          ng-model="claim.storageClass"
          theme="bootstrap"
          search-enabled="true"
          title="Select a storage class"
          class="select-role">
          <ui-select-match placeholder="Select a storage class">
            <span>
              {{$select.selected.metadata.name}}
            </span>
          </ui-select-match>
          <ui-select-choices
            repeat="sclass as sclass in storageClasses | toArray | filter : { metadata: { name: $select.search } } ">
            <div>
              <span ng-bind-html="sclass.metadata.name  | highlight : $select.search"></span>
              <span ng-if="sclass.parameters.type || sclass.parameters.zone || (sclass | description)" class="text-muted">
                <small>&ndash;
                  <span ng-if="sclass.parameters.type">
                    Type: {{sclass.parameters.type}}
                  </span>
                  <span ng-if="sclass.parameters.zone">
                    <span ng-if="sclass.parameters.type">|</span>
                    Zone: {{sclass.parameters.zone}}
                  </span>
                  <span ng-if="sclass | description">
                    <span ng-if="sclass.parameters.type || sclass.parameters.zone">|</span>
                    {{sclass | description}}
                  </span>
                </small>
              </span>
            </div>
          </ui-select-choices>
        </ui-select>
      </div>
      <div id="claim-storage-class-help" class="help-block">
        Storage classes are set by the administrator to define types of storage the users can select.
        <span ng-if="defaultStorageClass"> If another storage class is not chosen, the default storage class <var>{{defaultStorageClass.metadata.name}}</var> will be used.</span>
        <div class="learn-more-block">
          <a ng-href="{{'storage_classes' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"> </i></a>
        </div>
      </div>

    </div>

    <!-- Name -->
    <div class="form-group">
      <label for="claim-name" class="required">Name</label>
      <span ng-class="{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }">
        <input
          id="claim-name"
          class="form-control"
          type="text"
          name="name"
          ng-model="claim.name"
          ng-required="true"
          ng-pattern="nameValidation.pattern"
          ng-maxlength="nameValidation.maxlength"
          placeholder="my-storage-claim"
          take-focus
          select-on-focus
          autocorrect="off"
          autocapitalize="none"
          spellcheck="false"
          aria-describedby="claim-name-help">
      </span>
      <div>
        <span id="claim-name-help" class="help-block">A unique name for the storage claim within the project.</span>
      </div>
      <div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$touched && !claimDisabled">
        <span class="help-block">
          Name is required.
        </span>
      </div>
      <div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.pattern && persistentVolumeClaimForm.name.$touched && !claimDisabled">
        <span class="help-block">
          {{nameValidation.description}}
        </span>
      </div>
      <div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.maxlength && persistentVolumeClaimForm.name.$touched && !claimDisabled">
        <span class="help-block">
          Can't be longer than {{nameValidation.maxlength}} characters.
        </span>
      </div>
    </div>

    <div class="form-group" >
      <label class="required">Access Mode</label><br/>
      <label class="radio-inline">
        <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadWriteOnce" aria-describedby="access-modes-help" ng-checked="true" >
        Single User (RWO)
      </label>
      <label class="radio-inline">
        <input type="radio" id="accessModes" name="accessModes" ng-model="claim.accessModes" value="ReadWriteMany" aria-describedby="access-modes-help" >
        Shared Access (RWX)
      </label>
      <label class="radio-inline">
        <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadOnlyMany" aria-describedby="access-modes-help">
        Read Only (ROX)
      </label>
      <div>
        <span id="access-modes-help" class="help-block">Permissions to the mounted volume.</span>
      </div>
    </div>

    <!-- capacity -->
    <div ng-if="capacityReadOnly" class="form-group mar-bottom-xl">
      <label>Size</label>
      <div class="static-form-value-large">
        {{claim.amount}} {{claim.unit | humanizeUnit : 'storage'}}
        <small>(cannot be changed)</small>
      </div>
    </div>
    <div ng-if="!capacityReadOnly" class="form-group">
      <fieldset class="form-inline compute-resource">
        <label class="required">
          Size
          <small ng-if="limits.min && limits.max">
            {{limits.min | usageWithUnits : 'storage'}} min to {{limits.max | usageWithUnits : 'storage'}} max
          </small>
          <small ng-if="limits.min && !limits.max">
            Min: {{limits.min | usageWithUnits : 'storage'}}
          </small>
          <small ng-if="limits.max && !limits.min">
            Max: {{limits.max | usageWithUnits : 'storage'}}
          </small>
        </label>
        <div class="resource-size" ng-class="{ 'has-error': persistentVolumeClaimForm.capacity.$invalid && persistentVolumeClaimForm.capacity.$touched && !claimDisabled }">
          <div class="resource-amount">
            <label for="claim-amount" class="sr-only">Amount</label>
            <input type="number"
                   name="capacity"
                   id="claim-amount"
                   ng-model="claim.amount"
                   required
                   min="0"
                   pattern="\d+(\.\d+)?"
                   select-on-focus
                   class="form-control"
                   aria-describedby="claim-capacity-help">
          </div>
          <div class="resource-unit">
            <label class="sr-only" >Unit</label>
            <ui-select search-enabled="false" ng-model="claim.unit" input-id="claim-capacity-unit">
              <ui-select-match>{{$select.selected.label}}</ui-select-match>
              <ui-select-choices repeat="option.value as option in units" group-by="groupUnits">
                {{option.label}}
              </ui-select-choices>
            </ui-select>
          </div>
         </div>
         <div id="claim-capacity-help" class="help-block">
           Desired storage capacity.
         </div>
         <div ng-if="persistentVolumeClaimForm.capacity.$touched && !claimDisabled">
           <div class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.required">
             <span class="help-block">
               Size is required.
             </span>
           </div>
           <div class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.number">
             <span class="help-block">
               Must be a number.
             </span>
           </div>
           <div class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.min">
             <span class="help-block">
               Must be a positive number.
             </span>
           </div>
           <div ng-if="persistentVolumeClaimForm.capacity.$error.limitRangeMin" class="has-error">
             <span class="help-block">
               Can't be less than {{limits.min | usageWithUnits : 'storage'}}.
             </span>
           </div>
           <div ng-if="persistentVolumeClaimForm.capacity.$error.limitRangeMax" class="has-error">
             <span class="help-block">
               Can't be greater than {{limits.max | usageWithUnits : 'storage'}}.
             </span>
           </div>
           <div ng-if="persistentVolumeClaimForm.capacity.$error.willExceedStorage" class="has-error">
             <span class="help-block">
               Storage quota will be exceeded. <a ng-href="project/{{projectName}}/quota" target="_blank">View Quota&nbsp;</a>
             </span>
           </div>
         </div>
         <div class="learn-more-block mar-top-sm">
           <a href="" ng-click="showComputeUnitsHelp()">What are GiB?</a>
         </div>
      </fieldset>
    </div>
    <!--advanced options-->
    <div ng-show="!showAdvancedOptions" class="mar-bottom-xl">
      Use
      <a href="" ng-click="showAdvancedOptions = true">label selectors</a>
      to request storage.
    </div>

    <div ng-show="showAdvancedOptions" class="form-group">
      <fieldset class="compute-resource">
        <label>Label Selector</label>
        <div class="help-block mar-bottom-lg">
          Enter a label and value to use for your storage.
          <div class="learn-more-block">
            <a ng-href="{{'selector_label' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
          </div>
        </div>
        <key-value-editor
          entries="claim.selectedLabels"
          key-placeholder="label"
          value-placeholder="value"
          key-validator="[a-zA-Z][a-zA-Z0-9_-]*"
          key-validator-error-tooltip="A valid label name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores and dashes."
          add-row-link="Add Label"></key-value-editor>
      </fieldset>
    </div>
  </fieldset>
</ng-form>