Bug 1414229: Display and validate limit ranges on create storage page

app/scripts/directives/oscPersistentVolumeClaim.js

@@ -2,15 +2,21 @@
 
 angular.module("openshiftConsole")
   .directive("oscPersistentVolumeClaim",
-             function(DataService,
+             function($filter,
+                      DataService,
+                      LimitRangesService,
                       ModalsService) {
     return {
       restrict: 'E',
       scope: {
-        claim: "=model"
+        claim: "=model",
+        projectName: "="
       },
       templateUrl: 'views/directives/osc-persistent-volume-claim.html',
       link: function(scope) {
+        var amountAndUnit = $filter('amountAndUnit');
+        var usageValue = $filter('usageValue');
+
         scope.storageClasses = [];
         scope.claim.unit = 'Gi';
         scope.units = [{
@@ -53,9 +59,54 @@ angular.module("openshiftConsole")
           ModalsService.showComputeUnitsHelp();
         };
 
+        var validateLimitRange = function() {
+          // Use usageValue filter to normalize units for comparison.
+          var value = scope.claim.amount && usageValue(scope.claim.amount + scope.claim.unit);
+          var min = _.has(scope, 'limits.min') && usageValue(scope.limits.min);
+          var max = _.has(scope, 'limits.max') && usageValue(scope.limits.max);
+          var minValid = true;
+          var maxValid = true;
+
+          // Test against limit range min if defined.
+          if (value && min) {
+            minValid = value >= min;
+          }
+
+          // Test against limit range max if defined.
+          if (value && max) {
+            maxValid = value <= max;
+          }
+
+          scope.persistentVolumeClaimForm.capacity.$setValidity('limitRangeMin', minValid);
+          scope.persistentVolumeClaimForm.capacity.$setValidity('limitRangeMax', maxValid);
+        };
+
         DataService.list({group: 'storage.k8s.io', resource: 'storageclasses'}, {}, function(storageClasses) {
           scope.storageClasses = storageClasses.by('metadata.name');
         }, {errorNotification: false});
+
+        DataService.list('limitranges', { namespace: scope.projectName }, function(limitRangeData) {
+          var limitRanges = limitRangeData.by('metadata.name');
+          if (_.isEmpty(limitRanges)) {
+            return;
+          }
+
+          scope.limits = LimitRangesService.getEffectiveLimitRange(limitRanges, 'storage', 'PersistentVolumeClaim');
+          // If min === max, set the capacity to the required value and make the field readonly.
+          var requiredAmountAndUnit;
+          if (scope.limits.min && scope.limits.max) {
+            var minUsage = usageValue(scope.limits.min);
+            var maxUsage = usageValue(scope.limits.max);
+            if (minUsage === maxUsage) {
+              requiredAmountAndUnit = amountAndUnit(scope.limits.max);
+              scope.claim.amount = Number(requiredAmountAndUnit[0]);
+              scope.claim.unit = requiredAmountAndUnit[1];
+              scope.capacityReadOnly = true;
+            }
+          }
+
+          scope.$watchGroup(['claim.amount', 'claim.unit'], validateLimitRange);
+        });
       }
     };
   });

app/styles/_forms.less

@@ -1,3 +1,8 @@
+.static-form-value-large {
+  .h3();
+  margin-top: 3px;
+}
+
 .copy-to-clipboard input.form-control:read-only {
   background-color: white;
   color: @text-color;

app/views/create-persistent-volume-claim.html

@@ -21,7 +21,7 @@ <h1>Create Storage</h1>
                   </div>
                   <form name="createPersistentVolumeClaimForm" class="mar-top-lg">
                     <fieldset ng-disabled="disableInputs">
-                      <osc-persistent-volume-claim model="claim"></osc-persistent-volume-claim>
+                      <osc-persistent-volume-claim model="claim" project-name="projectName"></osc-persistent-volume-claim>
                       <div class="button-group gutter-bottom">
                         <button type="submit"
                                 class="btn btn-primary btn-lg"

app/views/directives/osc-persistent-volume-claim.html

@@ -67,7 +67,7 @@
     </div>
 
     <div class="form-group" >
-      <label class="required">Access Mode</label><br/>
+      <label class="required">Access Mode</label>
       <div class="radio">
 
         <label class="radio-inline">
@@ -92,21 +92,38 @@
     </div>
 
     <!-- capacity -->
-    <div class="form-group">
+    <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</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>
+        <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"
-                   ng-attr-id="claim-amount"
+                   id="claim-amount"
                    ng-model="claim.amount"
-                   ng-required="true"
+                   required
                    min="0"
-                   ng-attr-placeholder="10"
                    class="form-control"
-                   ng-attr-aria-describedby="claim-capacity-help">
+                   aria-describedby="claim-capacity-help">
           </div>
           <div class="resource-unit">
             <label class="sr-only" >Unit</label>
@@ -120,20 +137,32 @@
          </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>
+         </div>
+         <div ng-if="persistentVolumeClaimForm.capacity.$touched && !claimDisabled">
+           <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>
+         <div class="learn-more-block mar-top-sm">
+           <a href="" ng-click="showComputeUnitsHelp()">What are GiB?</a>
+         </div>
       </fieldset>
     </div>
     <!--advanced options-->

dist/scripts/scripts.js

@@ -10063,15 +10063,17 @@ _.set(a, "model.service", c);
 });
 }
 };
-}), angular.module("openshiftConsole").directive("oscPersistentVolumeClaim", [ "DataService", "ModalsService", function(a, b) {
+}), angular.module("openshiftConsole").directive("oscPersistentVolumeClaim", [ "$filter", "DataService", "LimitRangesService", "ModalsService", function(a, b, c, d) {
 return {
 restrict:"E",
 scope:{
-claim:"=model"
+claim:"=model",
+projectName:"="
 },
 templateUrl:"views/directives/osc-persistent-volume-claim.html",
-link:function(c) {
-c.storageClasses = [], c.claim.unit = "Gi", c.units = [ {
+link:function(e) {
+var f = a("amountAndUnit"), g = a("usageValue");
+e.storageClasses = [], e.claim.unit = "Gi", e.units = [ {
 value:"Mi",
 label:"MiB"
 }, {
@@ -10089,7 +10091,7 @@ label:"GB"
 }, {
 value:"T",
 label:"TB"
-} ], c.claim.selectedLabels = [], c.groupUnits = function(a) {
+} ], e.claim.selectedLabels = [], e.groupUnits = function(a) {
 switch (a.value) {
 case "Mi":
 case "Gi":
@@ -10102,15 +10104,33 @@ case "T":
 return "Decimal Units";
 }
 return "";
-}, c.showComputeUnitsHelp = function() {
-b.showComputeUnitsHelp();
-}, a.list({
+}, e.showComputeUnitsHelp = function() {
+d.showComputeUnitsHelp();
+};
+var h = function() {
+var a = e.claim.amount && g(e.claim.amount + e.claim.unit), b = _.has(e, "limits.min") && g(e.limits.min), c = _.has(e, "limits.max") && g(e.limits.max), d = !0, f = !0;
+a && b && (d = a >= b), a && c && (f = a <= c), e.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMin", d), e.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMax", f);
+};
+b.list({
 group:"storage.k8s.io",
 resource:"storageclasses"
 }, {}, function(a) {
-c.storageClasses = a.by("metadata.name");
+e.storageClasses = a.by("metadata.name");
 }, {
 errorNotification:!1
+}), b.list("limitranges", {
+namespace:e.projectName
+}, function(a) {
+var b = a.by("metadata.name");
+if (!_.isEmpty(b)) {
+e.limits = c.getEffectiveLimitRange(b, "storage", "PersistentVolumeClaim");
+var d;
+if (e.limits.min && e.limits.max) {
+var i = g(e.limits.min), j = g(e.limits.max);
+i === j && (d = f(e.limits.max), e.claim.amount = Number(d[0]), e.claim.unit = d[1], e.capacityReadOnly = !0);
+}
+e.$watchGroup([ "claim.amount", "claim.unit" ], h);
+}
 });
 }
 };

dist/scripts/templates.js

@@ -4531,7 +4531,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<form name=\"createPersistentVolumeClaimForm\" class=\"mar-top-lg\">\n" +
     "<fieldset ng-disabled=\"disableInputs\">\n" +
-    "<osc-persistent-volume-claim model=\"claim\"></osc-persistent-volume-claim>\n" +
+    "<osc-persistent-volume-claim model=\"claim\" project-name=\"projectName\"></osc-persistent-volume-claim>\n" +
     "<div class=\"button-group gutter-bottom\">\n" +
     "<button type=\"submit\" class=\"btn btn-primary btn-lg\" ng-click=\"createPersistentVolumeClaim()\" ng-disabled=\"createPersistentVolumeClaimForm.$invalid || disableInputs\" value=\"\">Create</button>\n" +
     "<a class=\"btn btn-default btn-lg\" href=\"\" back>Cancel</a>\n" +
@@ -7547,7 +7547,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div class=\"form-group\">\n" +
-    "<label class=\"required\">Access Mode</label><br/>\n" +
+    "<label class=\"required\">Access Mode</label>\n" +
     "<div class=\"radio\">\n" +
     "<label class=\"radio-inline\">\n" +
     "<input type=\"radio\" name=\"accessModes\" ng-model=\"claim.accessModes\" value=\"ReadWriteOnce\" aria-describedby=\"access-modes-help\" ng-checked=\"true\">\n" +
@@ -7567,13 +7567,31 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "\n" +
-    "<div class=\"form-group\">\n" +
+    "<div ng-if=\"capacityReadOnly\" class=\"form-group mar-bottom-xl\">\n" +
+    "<label>Size</label>\n" +
+    "<div class=\"static-form-value-large\">\n" +
+    "{{claim.amount}} {{claim.unit | humanizeUnit : 'storage'}}\n" +
+    "<small>(cannot be changed)</small>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div ng-if=\"!capacityReadOnly\" class=\"form-group\">\n" +
     "<fieldset class=\"form-inline compute-resource\">\n" +
-    "<label class=\"required\">Size</label>\n" +
-    "<div class=\"resource-size\">\n" +
-    "<div class=\"resource-amount\" ng-class=\"{ 'has-error': persistentVolumeClaimForm.capacity.$invalid && persistentVolumeClaimForm.capacity.$touched && !claimDisabled }\">\n" +
-    "<label class=\"sr-only\">Amount</label>\n" +
-    "<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\">\n" +
+    "<label class=\"required\">\n" +
+    "Size\n" +
+    "<small ng-if=\"limits.min && limits.max\">\n" +
+    "{{limits.min | usageWithUnits : 'storage'}} min to {{limits.max | usageWithUnits : 'storage'}} max\n" +
+    "</small>\n" +
+    "<small ng-if=\"limits.min && !limits.max\">\n" +
+    "Min: {{limits.min | usageWithUnits : 'storage'}}\n" +
+    "</small>\n" +
+    "<small ng-if=\"limits.max && !limits.min\">\n" +
+    "Max: {{limits.max | usageWithUnits : 'storage'}}\n" +
+    "</small>\n" +
+    "</label>\n" +
+    "<div class=\"resource-size\" ng-class=\"{ 'has-error': persistentVolumeClaimForm.capacity.$invalid && persistentVolumeClaimForm.capacity.$touched && !claimDisabled }\">\n" +
+    "<div class=\"resource-amount\">\n" +
+    "<label for=\"claim-amount\" class=\"sr-only\">Amount</label>\n" +
+    "<input type=\"number\" name=\"capacity\" id=\"claim-amount\" ng-model=\"claim.amount\" required min=\"0\" class=\"form-control\" aria-describedby=\"claim-capacity-help\">\n" +
     "</div>\n" +
     "<div class=\"resource-unit\">\n" +
     "<label class=\"sr-only\">Unit</label>\n" +
@@ -7588,16 +7606,28 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div id=\"claim-capacity-help\" class=\"help-block\">\n" +
     "Desired storage capacity.\n" +
     "</div>\n" +
-    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.capacity.$error.number && persistentVolumeClaimForm.capacity.$touched && !claimDisabled\">\n" +
+    "<div ng-if=\"persistentVolumeClaimForm.capacity.$touched && !claimDisabled\">\n" +
+    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.capacity.$error.number\">\n" +
     "<span class=\"help-block\">\n" +
     "Must be a number.\n" +
     "</span>\n" +
     "</div>\n" +
-    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.capacity.$error.min && persistentVolumeClaimForm.capacity.$touched && !claimDisabled\">\n" +
+    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.capacity.$error.min\">\n" +
     "<span class=\"help-block\">\n" +
     "Must be a positive number.\n" +
     "</span>\n" +
     "</div>\n" +
+    "<div ng-if=\"persistentVolumeClaimForm.capacity.$error.limitRangeMin\" class=\"has-error\">\n" +
+    "<span class=\"help-block\">\n" +
+    "Can't be less than {{limits.min | usageWithUnits : 'storage'}}.\n" +
+    "</span>\n" +
+    "</div>\n" +
+    "<div ng-if=\"persistentVolumeClaimForm.capacity.$error.limitRangeMax\" class=\"has-error\">\n" +
+    "<span class=\"help-block\">\n" +
+    "Can't be greater than {{limits.max | usageWithUnits : 'storage'}}.\n" +
+    "</span>\n" +
+    "</div>\n" +
+    "</div>\n" +
     "<div class=\"learn-more-block mar-top-sm\">\n" +
     "<a href=\"\" ng-click=\"showComputeUnitsHelp()\">What are GiB?</a>\n" +
     "</div>\n" +

dist/styles/main.css

@@ -3581,6 +3581,8 @@ to{transform:rotate(359deg)}
 .btn-flat-default:focus,.btn-flat-default:hover{background-color:#f7f7f7;border-color:#e7e7e7}
 .btn-remove{color:#333;display:inline-block;font-size:15px;line-height:1;opacity:.65;padding:5px 7px;vertical-align:middle}
 .btn-remove:focus,.btn-remove:hover{color:inherit;opacity:1;text-decoration:none}
+.static-form-value-large{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-bottom:10.5px;font-size:16px;margin-top:3px}
+.static-form-value-large .small,.static-form-value-large small{font-weight:400;line-height:1;color:#9c9c9c;font-size:65%}
 .copy-to-clipboard input.form-control:read-only{background-color:#fff;color:#363636}
 .copy-to-clipboard-multiline{position:relative;width:100%}
 .copy-to-clipboard-multiline a{box-shadow:none;position:absolute;right:0;top:0}