Merge ~ya-bo-ng/maas:one-pod-view-improvements into maas:master

[Anthony Dillon]

LP: #1793655 - Add over commit styling to the single pod view panel

Added UI that represents to CPU and RAM with overcommit applied.

Screenshots

Normal: https://screenshots.firefox.com/M8gmUWaIxNG10YqO/10.54.72.65
Over commited: https://screenshots.firefox.com/5OYE6IX8sCfMDjl2/10.54.72.65

[Andres Rodriguez (andreserl)]

Hi Ant,

I think this would fix https://bugs.launchpad.net/maas/+bug/1793655 ?

Also, another question, I thought we were gonna use a different color to highlight the overcommit section?

review: Needs Information

[Anthony Dillon (ya-bo-ng)]

Good point, I have amended the commit message. After a discussion we have gone from the medium term fix as of this branch instead of the short term fix of the colour change.

[Andres Rodriguez (andreserl)]

sounds good, although i would have just preferred to update the color.

review: Approve

[Anthony Dillon (ya-bo-ng)]

Sorry, I know. It has sparked a debate about the use of colours across all applications in the design/UX teams. So, to get this out the door, this is a good first step.

[Caleb Ellis (caleb-ellis)]

Code lgtm +1

review: Approve

[MAAS Lander (maas-lander)]

LANDING
-b one-pod-view-improvements 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/4025/consoleText

0079a31... 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..7d17492 100644
--- a/src/maasserver/static/js/angular/controllers/pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/pod_details.js
@@ -275,6 +275,12 @@ angular.module('MAAS').controller('PodDetailsController', [
             $scope.action.option = $scope.compose.action;
         };
 
+        // Calculate the available cores with overcommit applied
+        $scope.availableWithOvercommit = function(
+            total, used, overcommitRatio) {
+            return (total * overcommitRatio) - used;
+        };
+
         // Called before the compose params is sent over the websocket.
         $scope.composePreProcess = function(params) {
             params = angular.copy(params);
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index b3a2d51..11e73f4 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -386,29 +386,35 @@
                     <div class="p-pod-summary__aside">
                         <div class="p-pod-summary__cpu">
                             <div class="row">
-                                <h4>CPU cores: {$ pod.total.cores $}</h4>
+                                <h4>
+                                    CPU cores: {$ pod.total.cores $}
+                                    <span data-ng-if="pod.cpu_over_commit_ratio > 1">x {$ pod.cpu_over_commit_ratio $}</span>
+                                </h4>
                             </div>
                             <div class="p-meter--cpu-cores">
                                 <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 pod.available.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>
                             </div>
                             <p class="u-no-max-width">
                                 <span>{$ pod.used.cores $} used</span>
-                                <span class="u-float--right">{$ pod.available.cores $} available</span>
+                                <span class="u-float--right">{$ availableWithOvercommit(pod.total.cores, pod.used.cores, pod.cpu_over_commit_ratio) $} available</span>
                             </p>
                         </div>
                         <div class="p-pod-summary__ram">
                             <div class="row">
-                                <h4>RAM: {$ pod.total.memory_gb $} (GiB)</h4>
+                                <h4>
+                                    RAM: {$ pod.total.memory_gb $} (GiB)
+                                    <span data-ng-if="pod.memory_over_commit_ratio > 1">x {$ pod.memory_over_commit_ratio $}</span>
+                                </h4>
                             </div>
                             <div class="p-meter__container">
                                 <meter class="p-meter" max="{$ pod.total.memory $}" value="{$ pod.used.memory $}"></meter>
                             </div>
                             <p class="u-no-max-width">
                                 <span>{$ pod.used.memory_gb $} GiB used</span>
-                                <span class="u-float--right">{$ pod.available.memory_gb $} GiB available</span>
+                                <span class="u-float--right">{$ availableWithOvercommit(pod.total.memory_gb, pod.used.memory_gb, pod.memory_over_commit_ratio) $} GiB available</span>
                             </p>
                         </div>
                     </div>