Merge ~ya-bo-ng/maas:kvm-storage-improvements into maas:master

[Anthony Dillon]

Styling improvements to the KVM compose storage UI

Styling improvements to the KVM compose storage UI and a bug fix to the overcommitted RAM bar chart.

[MAAS Lander (maas-lander)]

UNIT TESTS
-b kvm-storage-improvements lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 2a05418252560152281e0e104339f6e0a40734c1

review: Approve

16db28b... by Anthony Dillon on 2018-10-23

Fix memory chart

[MAAS Lander (maas-lander)]

UNIT TESTS
-b kvm-storage-improvements lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 53a0c77bf2621ae932e521eb3404e5ef50e3e426

review: Approve

[MAAS Lander (maas-lander)]

UNIT TESTS
-b kvm-storage-improvements lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 16db28bb480a4b5d415b1ec7c171f56b63c167e7

review: Approve

[Blake Rouse (blake-rouse)]

Looks good, other than the change that should not be in this branch.

review: Needs Fixing

5ca7d60... by Anthony Dillon on 2018-10-24

Revert unexpected change

d9c9e10... by Anthony Dillon on 2018-10-24

Revert unexpected change

[Anthony Dillon (ya-bo-ng)]

Blake, thanks updated.

[Blake Rouse (blake-rouse)]

Thanks for the fix.

review: Approve

[MAAS Lander (maas-lander)]

UNIT TESTS
-b kvm-storage-improvements lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: d9c9e10c6152ab170655cb0b9c0ba8329be9cbf3

review: Approve

7835a97... by Anthony Dillon on 2018-10-24

Remove the overcommit styling in Pod summary

[MAAS Lander (maas-lander)]

UNIT TESTS
-b kvm-storage-improvements lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 7835a976b56cf39ce1d9f4f66577b79e90682eb1

review: Approve

diff --git a/src/maasserver/static/js/angular/controllers/pod_details.js b/src/maasserver/static/js/angular/controllers/pod_details.js
index f420dc5..929f2db 100644
--- a/src/maasserver/static/js/angular/controllers/pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/pod_details.js
@@ -377,13 +377,13 @@ angular.module('MAAS').controller('PodDetailsController', [
         // Calculate the available cores with overcommit applied
         $scope.availableWithOvercommit = function(
             total, used, overcommitRatio, precisionValue) {
-                if (precisionValue) {
-                    return (
-                        (total * overcommitRatio) - used
-                    ).toPrecision(precisionValue);
-                } else {
-                    return ((total * overcommitRatio) - used);
-                }
+            if (precisionValue) {
+                return (
+                    (total * overcommitRatio) - used
+                ).toPrecision(precisionValue);
+            } else {
+                return ((total * overcommitRatio) - used);
+            }
         };
 
         // Called before the compose params is sent over the websocket.
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index ff6380c..ad85c8d 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -15,6 +15,8 @@
                         data-ng-show="canEdit()"
                         data-ng-model="header.hostname.value"
                         data-ng-disabled="!canEdit()"
+                        data-ng-keydown="$event.keyCode == 13 && $event.preventDefault()"
+                        data-ng-keyup="$event.keyCode == 13 && saveEditHeader()"
                         data-maas-editing="editHeader()"></span>
                     <span ng-click="editHeaderDomain()" data-ng-show="!canEdit()">{$ header.hostname.value $}</span>
                     <span class="page-header__title-dot u-no-margin--top ng-hide" data-ng-show="header.editing || header.editing_domain">.</span>
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index 2b37076..0f762a9 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -15,6 +15,8 @@
                         data-ng-show="canEdit()"
                         data-ng-model="name.value"
                         data-ng-disabled="!canEdit()"
+                        data-ng-keydown="$event.keyCode == 13 && $event.preventDefault()"
+                        data-ng-keyup="$event.keyCode == 13 && saveEditName()"
                         data-ng-click="editName()"></span>
                 </h1>
                 <button class="p-button--base u-no-margin--top ng-hide"
@@ -312,7 +314,7 @@
                                             <span class="p-tooltip p-tooltip--top-left u-float--right"
                                                 style="position: absolute; top: 8px; right: 8px;"
                                                 aria-describedby="storage-size-warning"
-                                                data-ng-if="!storage.size || storage.size < 8">
+                                                data-ng-if="(storage.size > 0 && storage.size < 8) || storage.size == 0">
                                                 <i class="p-icon--warning">Warning</i>
                                                 <span class="p-tooltip__message" role="tooltip" id="storage-size-warning">Ubuntu typically requires 8GB minimum. Lower allocations may fail.</span>
                                             </span>
@@ -342,9 +344,11 @@
                                                             <li class="p-key-list__item--used">
                                                                 <p class="p-p-compact">Used</p>
                                                             </li>
+                                                            <li class="p-key-list__item--other-requests" data-ng-if="compose.obj.storage.length > 1">
+                                                                <p class="p-p-compact">+</p>
+                                                            </li>
                                                             <li class="p-key-list__item--requests">
                                                                 <p class="p-p-compact">
-                                                                    <span data-ng-if="compose.obj.storage.length > 1">+</span>
                                                                     Request<span data-ng-if="compose.obj.storage.length > 1">s</span>
                                                                 </p>
                                                             </li>
@@ -384,25 +388,26 @@
                                                                     <div class="p-chart__bar--used" style="width: {$ storage_pool.used / storage_pool.total * 100 $}%"></div>
                                                                 </div>
                                                             </div>
-                                                            <ul class="p-inline-list u-no-margin--bottom p-space-between"
+                                                            <ul class="p-inline-list u-no-margin--bottom u-flex--no-wrap"
                                                                 ng-if="totalStoragePercentage(storage_pool, (storage.size + getOtherRequests(storage_pool, storage)) | convertGigabyteToBytes) < 100">
-                                                                <li class="p-inline-list__item p-key-list__item--used">
+                                                                <li class="p-inline-list__item p-key-list__item--used u-no-padding--right">
                                                                     <p class="p-p-compact">
                                                                         {$ storage_pool.used | formatBytes $}
                                                                     </p>
                                                                 </li>
                                                                 <li data-ng-if="compose.obj.storage.length > 1 && getOtherRequests(storage_pool, storage) > 0"
-                                                                    class="p-inline-list__item p-key-list__item--other">
+                                                                    class="p-inline-list__item p-key-list__item--other-requests u-no-padding--right">
                                                                     <p class="p-p-compact">
                                                                         {$ getOtherRequests(storage_pool, storage) $} GB
                                                                     </p>
                                                                 </li>
-                                                                <li ng-if="storage.pool === storage_pool" class="p-inline-list__item p-key-list__item--requests">
+                                                                <li ng-if="storage.pool === storage_pool"
+                                                                    class="p-inline-list__item p-key-list__item--requests u-no-padding--right">
                                                                     <p class="p-p-compact">
                                                                         {$ storage.size $} GB
                                                                     </p>
                                                                 </li>
-                                                                <li class="p-inline-list__item p-key-list__item--free">
+                                                                <li class="p-inline-list__item p-key-list__item--free u-no-padding--right">
                                                                     <p class="p-p-compact">
                                                                         {$ storage_pool.available | formatBytes $}
                                                                     </p>
@@ -536,8 +541,7 @@
                                 </h4>
                             </div>
                             <div class="p-meter--cpu-cores">
-                                <div class="p-meter--cpu-cores__container"
-                                    ng-class="{'is-over': pod.available.cores < 0}">
+                                <div class="p-meter--cpu-cores__container">
                                     <span class="p-meter--cpu-cores__core--used" ng-repeat="i in pod.used.cores | range"></span>
                                     <span class="p-meter--cpu-cores__core--available" ng-repeat="i in availableWithOvercommit(pod.total.cores, pod.used.cores, pod.cpu_over_commit_ratio) | range"></span>
                                 </div>
@@ -555,8 +559,7 @@
                                 </h4>
                             </div>
                             <div class="p-meter__container">
-                                <meter class="p-meter" max="{$ pod.total.memory $}" value="{$ pod.used.memory $}"
-                                    ng-class="{'is-over': pod.used.memory > pod.total.memory}"></meter>
+                                <meter class="p-meter" max="{$ pod.total.memory * pod.memory_over_commit_ratio $}" value="{$ pod.used.memory $}"></meter>
                             </div>
                             <p class="u-no-max-width">
                                 <span>{$ pod.used.memory_gb $} GiB used</span>
diff --git a/src/maasserver/static/scss/_patterns_charts.scss b/src/maasserver/static/scss/_patterns_charts.scss
index b959f6a..1fb0e1c 100644
--- a/src/maasserver/static/scss/_patterns_charts.scss
+++ b/src/maasserver/static/scss/_patterns_charts.scss
@@ -25,9 +25,7 @@
   .p-chart__bar--used {
     @extend .p-chart__bar;
     background-color: $color--used;
-    &:not(:last-child) {
-      border-right: 1px solid $color-x-light;
-    }
+    border-right: 1px solid $color-x-light;
   }
 
   .p-chart__bar--other {
@@ -65,6 +63,7 @@
   // Key inside option selector
   %p-key-list-item--common-properties {
     display: flex;
+    flex: 1;
     padding-right: $sph-intra;
 
     &::before {
@@ -77,6 +76,11 @@
       padding-top: map-get($nudges, nudge--p);
       width: $sp-unit;
     }
+
+    &:last-of-type {
+      text-align: right;
+      justify-content: flex-end;
+    }
   }
 
   .p-key-list__item--requests {
@@ -86,6 +90,14 @@
     }
   }
 
+  .p-key-list__item--other-requests {
+    @extend %p-key-list-item--common-properties;
+    padding-right: 0.25rem;
+    &::before {
+      color: #1aaf65;
+    }
+  }
+
   .p-key-list__item--used {
     @extend %p-key-list-item--common-properties;
     &::before {