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 <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>
      <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">
      <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 ng-class="{ 'has-error': form.$invalid }">
        <label class="sr-only">Amount</label>
        <input type="number"
               name="amount"
               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">
        <label class="sr-only" >Unit</label>
        <select ng-model="claim.unit"
                name="unit"
                ng-options="option.value as option.label for option in units"
                ng-attr-id="claim-capacity-unit"
                class="form-control inline-select">
        </select>
       </div>
       <div id="claim-capacity-help" class="help-block">
         Desired storage capacity.
      </div>
      <div class="has-error" ng-show="persistentVolumeClaimForm.capacity.$error.pattern && persistentVolumeClaimForm.capacity.$touched && !claimDisabled">
        <span class="help-block">
          Must be a positive integer.
        </span>
      </div>
      </fieldset>
    </div>
    <!--advanced options-->
    <div ng-show="!showAdvancedOptions" class="mar-bottom-xl">
      <a href=""
         ng-click="showAdvancedOptions = true">Use label selectors to request storage</a>
    </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 <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>