_compute-resource.html

<ng-form name="form">
  <fieldset class="form-inline compute-resource">
    <label ng-if="label">{{label}}</label>
    <div class="resource-size" ng-class="{ 'has-error': form.$invalid }">
      <div class="resource-amount">
        <label class="sr-only" ng-attr-for="{{id}}">Amount</label>
        <input type="number"
               name="amount"
               ng-attr-id="{{id}}"
               ng-model="input.amount"
               min="0"
               ng-attr-placeholder="{{placeholder}}"
               class="form-control"
               ng-attr-aria-describedby="{{description ? id + '-help' : undefined}}">
      </div>
      <div class="resource-unit">
        <label class="sr-only" ng-attr-for="{{id}}-unit">Unit</label>
        <ui-select search-enabled="false" ng-model="input.unit" input-id="{{id}}-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 ng-if="description" class="help-block" ng-attr-id="{{id}}-help">
      {{description}}
    </div>
    <div ng-if="form.$invalid" class="has-error">
      <div ng-if="form.amount.$error.number" class="help-block">
        Must be a number.
      </div>
      <div ng-if="form.amount.$error.min" class="help-block">
        Can't be negative.
      </div>
      <div ng-if="form.amount.$error.limitRangeMin" class="help-block">
        Can't be less than {{limitRangeMin | usageWithUnits : type}}.
      </div>
      <div ng-if="form.amount.$error.limitRangeMax" class="help-block">
        Can't be greater than {{limitRangeMax | usageWithUnits : type}}.
      </div>
      <div ng-if="form.amount.$error.limitLargerThanRequest" class="help-block">
        Limit can't be less than request ({{request | usageWithUnits : type}}).
      </div>
      <div ng-if="form.amount.$error.limitWithinRatio" class="help-block">
        <span ng-if="!input.amount && !defaultValue">
          Limit is required if request is set. (Max Limit/Request Ratio: {{maxLimitRequestRatio}})
        </span>
        <span ng-if="input.amount || defaultValue">
          Limit cannot be more than {{maxLimitRequestRatio}} times request value.
          (Request: {{request | usageWithUnits : type}},
          <!-- Show default if amount is unset. -->
          Limit: {{(input.amount ? (input.amount + input.unit) : defaultValue) | usageWithUnits : type}})
        </span>
      </div>
    </div>
  </fieldset>
</ng-form>