openshift · openshift-bot · Jan 18, 2017 · Jan 18, 2017
diff --git a/app/scripts/directives/editRequestLimit.js b/app/scripts/directives/editRequestLimit.js
@@ -68,21 +68,34 @@ angular.module('openshiftConsole')
         case 'memory':
           scope.input.unit = 'Mi';
           scope.units = [{
-            value: "M",
-            label: "MB"
-          }, {
-            value: "G",
-            label: "GB"
-          }, {
             value: "Mi",
             label: "MiB"
           }, {
             value: "Gi",
             label: "GiB"
+          }, {
+            value: "M",
+            label: "MB"
+          }, {
+            value: "G",
+            label: "GB"
           }];
           break;
         }
 
+        scope.groupUnits = function(unit) {
+          switch (unit.value) {
+          case 'Mi':
+          case 'Gi':
+            return 'Binary Units';
+          case 'M':
+          case 'G':
+            return 'Decimal Units';
+          }
+
+          return '';
+        };
+
         var validateLimitRange = function() {
           // Use usageValue filter to normalize units for comparison.
           var value = scope.input.amount && usageValue(scope.input.amount + scope.input.unit),

diff --git a/app/scripts/directives/oscPersistentVolumeClaim.js b/app/scripts/directives/oscPersistentVolumeClaim.js
@@ -1,7 +1,9 @@
 "use strict";
 
 angular.module("openshiftConsole")
-  .directive("oscPersistentVolumeClaim", function(DataService){
+  .directive("oscPersistentVolumeClaim",
+             function(DataService,
+                      ModalsService) {
     return {
       restrict: 'E',
       scope: {
@@ -10,7 +12,7 @@ angular.module("openshiftConsole")
       templateUrl: 'views/directives/osc-persistent-volume-claim.html',
       link: function(scope) {
         scope.storageClasses = [];
-        scope.claim.unit = 'Mi';
+        scope.claim.unit = 'Gi';
         scope.units = [{
           value: "Mi",
           label: "MiB"
@@ -21,10 +23,36 @@ angular.module("openshiftConsole")
           value: "Ti",
           label: "TiB"
         }, {
-          value: "Pi",
-          label: "PiB"
+          value: "M",
+          label: "MB"
+        }, {
+          value: "G",
+          label: "GB"
+        }, {
+          value: "T",
+          label: "TB"
         }];
         scope.claim.selectedLabels = [];
+
+        scope.groupUnits = function(unit) {
+          switch (unit.value) {
+          case 'Mi':
+          case 'Gi':
+          case 'Ti':
+            return 'Binary Units';
+          case 'M':
+          case 'G':
+          case 'T':
+            return 'Decimal Units';
+          }
+
+          return '';
+        };
+
+        scope.showComputeUnitsHelp = function() {
+          ModalsService.showComputeUnitsHelp();
+        };
+
         DataService.list({group: 'storage.k8s.io', resource: 'storageclasses'}, {}, function(storageClasses) {
           scope.storageClasses = storageClasses.by('metadata.name');
         }, {errorNotification: false});

diff --git a/app/styles/_select.less b/app/styles/_select.less
@@ -35,6 +35,10 @@
     min-height: 24px;
     cursor: pointer;
   }
+  .ui-select-choices-group-label:empty {
+    // Prevent extra space above the first choice when the group label is empty.
+    padding: 0;
+  }
   .ui-select-match-text, .ui-select-placeholder {
     font-weight: normal;
   }

diff --git a/app/views/_compute-resource.html b/app/views/_compute-resource.html
@@ -17,7 +17,7 @@
         <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">
+          <ui-select-choices repeat="option.value as option in units" group-by="groupUnits">
             {{option.label}}
           </ui-select-choices>
         </ui-select>

diff --git a/app/views/directives/osc-persistent-volume-claim.html b/app/views/directives/osc-persistent-volume-claim.html
@@ -38,21 +38,23 @@
     <!-- 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">
+      <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>
@@ -92,38 +94,46 @@
     <!-- capacity -->
     <div class="form-group">
       <fieldset class="form-inline compute-resource">
-      <label class="required">Size</label>
-      <div class="resource-size" ng-class="{ 'has-error': form.$invalid }">
-        <div class="resource-amount">
-          <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="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="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">
-              {{option.label}}
-            </ui-select-choices>
-          </ui-select>
+        <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 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-->

diff --git a/app/views/modals/about-compute-units-modal.html b/app/views/modals/about-compute-units-modal.html
@@ -22,11 +22,11 @@ <h3>CPU</h3>
 1000 millcores  =  1 core
 </pre>
 
-    <h3>Memory</h3>
+    <h3>Memory and Storage</h3>
 
     <p>
-      Memory is measured in binary units like <var>KiB</var>, <var>MiB</var>, and <var>GiB</var> or
-      decimal units like <var>kB</var>, <var>MB</var>, and&nbsp;<var>GB</var>.
+      Memory and storage are measured in binary units like <var>KiB</var>, <var>MiB</var>, <var>GiB</var>, and <var>TiB</var> or
+      decimal units like <var>kB</var>, <var>MB</var>, <var>GB</var>, and&nbsp;<var>TB</var>.
     </p>
 
     <div class="row">
@@ -36,6 +36,7 @@ <h4>Binary Units</h4>
 1024 bytes  =  1 KiB
 1024 KiB    =  1 MiB
 1024 MiB    =  1 GiB
+1024 GiB    =  1 TiB
 </pre>
       </div>
       <div class="col-sm-6">
@@ -44,6 +45,7 @@ <h4>Decimal Units</h4>
 1000 bytes  =  1 kB
 1000 kB     =  1 MB
 1000 MB     =  1 GB
+1000 GB     =  1 TB
 </pre>
       </div>
     </div>

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -10063,15 +10063,15 @@ _.set(a, "model.service", c);
 });
 }
 };
-}), angular.module("openshiftConsole").directive("oscPersistentVolumeClaim", [ "DataService", function(a) {
+}), angular.module("openshiftConsole").directive("oscPersistentVolumeClaim", [ "DataService", "ModalsService", function(a, b) {
 return {
 restrict:"E",
 scope:{
 claim:"=model"
 },
 templateUrl:"views/directives/osc-persistent-volume-claim.html",
-link:function(b) {
-b.storageClasses = [], b.claim.unit = "Mi", b.units = [ {
+link:function(c) {
+c.storageClasses = [], c.claim.unit = "Gi", c.units = [ {
 value:"Mi",
 label:"MiB"
 }, {
@@ -10081,13 +10081,34 @@ label:"GiB"
 value:"Ti",
 label:"TiB"
 }, {
-value:"Pi",
-label:"PiB"
-} ], b.claim.selectedLabels = [], a.list({
+value:"M",
+label:"MB"
+}, {
+value:"G",
+label:"GB"
+}, {
+value:"T",
+label:"TB"
+} ], c.claim.selectedLabels = [], c.groupUnits = function(a) {
+switch (a.value) {
+case "Mi":
+case "Gi":
+case "Ti":
+return "Binary Units";
+
+case "M":
+case "G":
+case "T":
+return "Decimal Units";
+}
+return "";
+}, c.showComputeUnitsHelp = function() {
+b.showComputeUnitsHelp();
+}, a.list({
 group:"storage.k8s.io",
 resource:"storageclasses"
 }, {}, function(a) {
-b.storageClasses = a.by("metadata.name");
+c.storageClasses = a.by("metadata.name");
 }, {
 errorNotification:!1
 });
@@ -12461,19 +12482,31 @@ break;
 
 case "memory":
 b.input.unit = "Mi", b.units = [ {
-value:"M",
-label:"MB"
-}, {
-value:"G",
-label:"GB"
-}, {
 value:"Mi",
 label:"MiB"
 }, {
 value:"Gi",
 label:"GiB"
+}, {
+value:"M",
+label:"MB"
+}, {
+value:"G",
+label:"GB"
 } ];
 }
+b.groupUnits = function(a) {
+switch (a.value) {
+case "Mi":
+case "Gi":
+return "Binary Units";
+
+case "M":
+case "G":
+return "Decimal Units";
+}
+return "";
+};
 var j = function() {
 var a = b.input.amount && f(b.input.amount + b.input.unit), c = b.limitRangeMin && f(b.limitRangeMin), d = b.limitRangeMax && f(b.limitRangeMax), e = !0, g = !0;
 a && c && (e = a >= c), a && d && (g = a <= d), b.form.amount.$setValidity("limitRangeMin", e), b.form.amount.$setValidity("limitRangeMax", g);