Merge ~ya-bo-ng/maas:error-requesting-more-storage into maas:master

[Anthony Dillon]

Highlight storage pools in the compose selection that cannot fulfil the request

Updated the styling of storage pools in the compose machine panel of the pod section. If the requested storage is over the free storage available it is clear with a notification.

[Caleb Ellis (caleb-ellis)]

Does it make sense for storage pools without enough space to still be clickable?

review: Needs Information

[Kit Randel (blr)]

Seems a little odd to have so much logic in a template, can these expressions be moved to functions on the controller?

[Blake Rouse (blake-rouse)]

review: Needs Fixing

[Kit Randel (blr)]

That looks much better, thanks for the tests and moving some of that logic out of the template. A few comments inline for your consideration.

review: Approve

[Anthony Dillon (ya-bo-ng)]

Kit, thanks for the comments. Good points. I have actioned them.

[Blake Rouse (blake-rouse)]

Looks good, thanks for the fixes. Just a typo comment below.

review: Approve

[MAAS Lander (maas-lander)]

LANDING
-b error-requesting-more-storage lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED BUILD
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/4020/consoleText

[MAAS Lander (maas-lander)]

LANDING
-b error-requesting-more-storage lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED BUILD
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/4024/consoleText

40e385f... by Anthony Dillon on 2018-10-01

Fix lint

diff --git a/src/maasserver/static/js/angular/controllers/pod_details.js b/src/maasserver/static/js/angular/controllers/pod_details.js
index b347b5a..82220ef 100644
--- a/src/maasserver/static/js/angular/controllers/pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/pod_details.js
@@ -226,6 +226,33 @@ angular.module('MAAS').controller('PodDetailsController', [
             iface.showOptions = true;
         }
 
+        $scope.validateMachineCompose = function() {
+            var pools = $scope.compose.obj.storage;
+            var valid = true;
+            pools.forEach(function(pool) {
+                var requested = pool.size * 1000000000;
+                if (requested > pool.pool.available || pool.size === '') {
+                    valid = false;
+                }
+            });
+            return valid;
+        };
+
+        $scope.totalStoragePercentage = function(storage_pool, storage) {
+            var used = storage_pool.used / storage_pool.total * 100;
+            var requested = storage / storage_pool.total * 100;
+            var percent = used + requested;
+            return percent;
+        };
+
+        // Prevents key input if input is not a number key code.
+        $scope.numberOnly = function(evt) {
+            var charCode = (evt.which) ? evt.which : event.keyCode;
+            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+                evt.preventDefault();
+            }
+        };
+
         $scope.openOptions = function(storage) {
             angular.forEach($scope.compose.obj.storage, function(disk) {
                 disk.showOptions = false;
@@ -244,8 +271,10 @@ angular.module('MAAS').controller('PodDetailsController', [
         };
 
 
-        $scope.selectStoragePool = function(storagePool, storage) {
-            storage.pool = storagePool;
+        $scope.selectStoragePool = function(storagePool, storage, isDisabled) {
+            if (!isDisabled) {
+                storage.pool = storagePool;
+            }
         };
 
         // Return the title of the pod type.
diff --git a/src/maasserver/static/js/angular/controllers/tests/test_pod_details.js b/src/maasserver/static/js/angular/controllers/tests/test_pod_details.js
index 028db4c..62c1edc 100644
--- a/src/maasserver/static/js/angular/controllers/tests/test_pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/tests/test_pod_details.js
@@ -566,6 +566,30 @@ describe("PodDetailsController", function() {
         });
     });
 
+    describe("totalStoragePercentage", function() {
+        it("returns the correct percentage", function() {
+            var controller = makeController();
+            var storage_pool = {
+                'used': 40,
+                'total': 100
+            }
+            var storage = 10;
+            expect($scope.totalStoragePercentage(
+                storage_pool, storage)).toBe(50);
+        });
+
+        it("returns the over committed percentage", function() {
+            var controller = makeController();
+            var storage_pool = {
+                'used': 90,
+                'total': 100
+            }
+            var storage = 60;
+            expect($scope.totalStoragePercentage(
+                storage_pool, storage)).toBe(150);
+        });
+    });
+
     describe("canCompose", function() {
 
         it("returns false when no pod", function() {
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index b3a2d51..e7bd7f3 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -209,7 +209,9 @@
                                     </td>
                                     <td>
                                         <div class="form__group-input">
-                                            <input type="text" class="u-no-margin--bottom" placeholder="Enter capacity" data-ng-model="storage.size">
+                                            <input type="text" class="u-no-margin--bottom" placeholder="Enter capacity" ng-keypress="numberOnly($event)"
+                                                data-ng-model="storage.size"
+                                                ng-class="{'in-warning': storage.size == ''}">
                                         </div>
                                     </td>
                                     <td style="overflow: visible">
@@ -221,7 +223,12 @@
                                         </select>
                                         <div class="form__group-input" ng-if="pod.type === 'virsh'">
                                             <div class="p-option-selector" tabindex="0">
-                                                <input class="p-option-selector__input u-no-margin--bottom" type="text" data-ng-model="storage.pool.name" ng-focus="openOptions(storage)">
+                                                <input class="p-option-selector__input u-no-margin--bottom" readonly type="text" data-ng-model="storage.pool.name" ng-focus="openOptions(storage)"
+                                                    ng-class="{'in-warning': (storage.size | convertGigabyteToBytes) > storage.pool.available}">
+
+                                                <p class="u-no-margin--bottom" ng-if="(storage.size | convertGigabyteToBytes) > storage.pool.available">
+                                                    <small class-"u-no-margin--bottom"><strong>Warning</strong>: Not enough space in {$ storage.pool.name $}, only {$ storage.pool.available | formatBytes $} free.</small>
+                                                </p>
                                                 <div class="p-option-selector__options" ng-if="storage.showOptions" ng-keyup="$event.keyCode == 27 ? closeOptions(storage) : null">
                                                     <button class="p-button--base u-float--left" ng-click="closeOptions(storage)">
                                                         <i class="p-icon--close">Close</i>
@@ -240,7 +247,10 @@
                                                     <hr class="u-no-margin--bottom">
                                                     <div class="p-option-selector__option"
                                                         tabindex="0"
-                                                        ng-repeat="storage_pool in pod.storage_pools" ng-click="selectStoragePool(storage_pool, storage)" ng-keyup="$event.keyCode == 13 ? selectStoragePool(storage_pool, storage) : null" ng-class="{'is-selected': storage.pool === storage_pool}">
+                                                        ng-repeat="storage_pool in pod.storage_pools"
+                                                        ng-click="selectStoragePool(storage_pool, storage, totalStoragePercentage(storage_pool, storage.size | convertGigabyteToBytes) >= 100)"
+                                                        ng-keyup="$event.keyCode == 13 ? selectStoragePool(storage_pool, storage) : null"
+                                                        ng-class="{'is-selected': storage.pool === storage_pool, 'is-over': totalStoragePercentage(storage_pool, storage.size | convertGigabyteToBytes) >= 100}">
                                                         <div class="p-option-selector__option-cell">
                                                             <div><strong>{$ storage_pool.name $} <span data-ng-if="pod.default_storage_pool == storage_pool.id">(default)</span></strong></div>
                                                             <div class="u-text--light">{$ storage_pool.path $}</div>
@@ -251,12 +261,12 @@
                                                         </div>
                                                         <div class="p-option-selector__option-cell">
                                                             <div class="p-chart">
-                                                                <div class="p-chart__bar--requests" style="width: {$ (storage_pool.used / storage_pool.total * 100) + ((storage.size | convertGigabyteToBytes) / storage_pool.total * 100) $}%"
-                                                                ng-class="{'is-over': (storage_pool.used / storage_pool.total * 100) + ((storage.size | convertGigabyteToBytes) / storage_pool.total * 100) >= 100}"></div>
+                                                                <div class="p-chart__bar--requests" style="width: {$ totalStoragePercentage(storage_pool, storage.size | convertGigabyteToBytes) $}%"></div>
                                                                 <div class="p-chart__bar--used" style="width: {$ storage_pool.used / storage_pool.total * 100 $}%"></div>
                                                             </div>
 
-                                                            <ul class="p-inline-list u-no-margin--bottom p-space-between">
+                                                            <ul class="p-inline-list u-no-margin--bottom p-space-between"
+                                                                ng-if="totalStoragePercentage(storage_pool, storage.size | convertGigabyteToBytes) < 100">
                                                                 <li class="p-inline-list__item">
                                                                     <span class="p-key-icon--used"></span>
                                                                     {$ storage_pool.used | formatBytes $}
@@ -270,6 +280,10 @@
                                                                     {$ storage_pool.available | formatBytes $}
                                                                 </li>
                                                             </ul>
+
+                                                            <small class="u-no-margin--bottom" ng-if="totalStoragePercentage(storage_pool, storage.size | convertGigabyteToBytes) >= 100">
+                                                                <i class="p-icon--warning">Warning</i> Not enough space. {$ storage_pool.available | formatBytes $} free.
+                                                            </small>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -309,7 +323,7 @@
                         <p maas-obj-show-saving><maas-obj-saving>Composing machine</maas-obj-saving></p>
                         <div class="u-align--right u-no-margin--top" maas-obj-hide-saving>
                             <button class="p-button--base" type="button" data-ng-click="cancelCompose()">Cancel</button>
-                            <button class="p-button--positive u-no-margin--top" maas-obj-save>Compose machine</button>
+                            <button class="p-button--positive u-no-margin--top" maas-obj-save ng-disabled="!validateMachineCompose()">Compose machine</button>
                         </div>
                     </div>
                 </div>
diff --git a/src/maasserver/static/scss/_patterns_charts.scss b/src/maasserver/static/scss/_patterns_charts.scss
index 2f391ac..cf86b82 100644
--- a/src/maasserver/static/scss/_patterns_charts.scss
+++ b/src/maasserver/static/scss/_patterns_charts.scss
@@ -32,9 +32,9 @@
   .p-chart__bar--requests {
     @extend .p-chart__bar;
     background-color: #3a77af;
+  }
 
-    &.is-over {
-      background-color: #ff8936;
-    }
+  .is-over .p-chart__bar--requests {
+    background-color: #ff8936;
   }
 }
diff --git a/src/maasserver/static/scss/_patterns_forms.scss b/src/maasserver/static/scss/_patterns_forms.scss
index bed4c9a..2f39ca2 100644
--- a/src/maasserver/static/scss/_patterns_forms.scss
+++ b/src/maasserver/static/scss/_patterns_forms.scss
@@ -7,6 +7,12 @@
   .p-form__group {
     @extend %vf-clearfix;
   }
+
+  .form__group-input {
+    input.in-warning {
+      border-color: $color-caution !important;
+    }
+  }
 }
 
 @mixin maas-p-form-stacked {
diff --git a/src/maasserver/static/scss/_patterns_option-selector.scss b/src/maasserver/static/scss/_patterns_option-selector.scss
index 233229a..5d7d789 100644
--- a/src/maasserver/static/scss/_patterns_option-selector.scss
+++ b/src/maasserver/static/scss/_patterns_option-selector.scss
@@ -5,7 +5,16 @@
 
   .p-option-selector__input {
     @extend select;
-    color: #111 !important;
+    cursor: pointer;
+
+    &.in-warning {
+      border-color: $color-caution !important;
+    }
+  }
+
+  [readonly][type="text"].p-option-selector__input {
+    color: $color-dark;
+    border-color: $color-mid-light;
   }
 
   .p-option-selector__options {
@@ -49,6 +58,10 @@
       background-color: $color-light;
     }
 
+    &.is-over {
+      opacity: .5;
+    }
+
     &.is-selected {
       background-color: $color-light;
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%230e8420' stroke-width='1.5' fill='%230e8420' cx='7.25' cy='7.25' r='7.25'/%3E%3Cpath fill='%23fff' d='M11.05 4.173l-.066.058L6.25 8.378l-2.776-2.38-.839.948L6.25 10.75l5.5-5.787-.7-.79z'/%3E%3C/g%3E%3C/svg%3E");