osc-persistent-volume-claim.html

<ng-form name="persistentVolumeClaimForm">
  <fieldset ng-disabled="claimDisabled">
    <div ng-show="storageClasses | hashSize" class="form-group">
      <!--storage class-->
      <label class="required">Storage Classes</label>
      <div id="claim-storage-class-help" class="help-block mar-bottom-lg">
        Storage classes are set by the administrator to define types of storage the users can select.
        <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 ng-repeat="sclass in storageClasses track by (sclass | uid)" id="storageclass-{{sclass.metadata.name}}">
        <div class="radio">
          <label>
            <input  type="radio"
                    name="storageClass"
                    ng-value="sclass"
                    ng-model="claim.storageClass">
            {{sclass.metadata.name}}
          </label>
        </div>
        <div class="help-block">
          Type: {{sclass.parameters.type}} | Zone: {{sclass.parameters.zone}}
          <span ng-if="sclass.metadata.annotations.description"> | {{sclass.metadata.annotations.description}}</span>
        </div>
      </div>
      <div class="radio">
        <label>
          <input type="radio"
                 name="storageClass"
                 ng-model="claim.storageClass">
            No Storage Class
          <div class="help-block">No storage class will be assigned unless a default class has been assigned by the system administrator.</div>
        </label>
      </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="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/"
          ng-maxlength="253"
          placeholder="my-storage-claim"
          select-on-focus
          autocorrect="off"
          autocapitalize="off"
          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.pattern && persistentVolumeClaimForm.name.$touched && !claimDisabled">
        <span class="help-block">
          Claim names may only contain lower-case letters, numbers, and dashes.
          They may not start or end with a dash. Max length of 253.
        </span>
      </div>
    </div>

    <div class="form-group" >
      <label class="required">Access Mode</label><br/>
      <div class="radio">

        <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>
      <div>
        <span id="access-modes-help" class="help-block">Permissions to the mounted volume.</span>
      </div>
    </div>

    <!-- capacity -->
    <div class="form-group">
      <fieldset class="form-inline compute-resource">
        <label class="required">Size</label>
        <div class="resource-size">
          <div class="resource-amount" ng-class="{ 'has-error': persistentVolumeClaimForm.capacity.$invalid && persistentVolumeClaimForm.capacity.$touched && !claimDisabled }">
            <label class="sr-only">Amount</label>
            <input type="number"
                   name="capacity"
                   ng-attr-id="claim-amount"
                   ng-model="claim.amount"
                   ng-required="true"
                   min="0"
                   ng-attr-placeholder="10"
                   class="form-control"
                   ng-attr-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 class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.number && persistentVolumeClaimForm.capacity.$touched && !claimDisabled">
          <span class="help-block">
            Must be a number.
          </span>
        </div>
        <div class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.min && persistentVolumeClaimForm.capacity.$touched && !claimDisabled">
          <span class="help-block">
            Must be a positive number.
          </span>
        </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>