Merge ~ya-bo-ng/maas:kvm-storage-pods-landing-view into maas:master

[Anthony Dillon]

KVM storage pod configuration UI

Added a storage drop down widget to the compose pod table.

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3892/console
COMMIT: 671f56d044dcda5a288081eb8d1fdc8b23ed80c6

review: Needs Fixing

5c2ed41... by Anthony Dillon on 2018-09-11

Fix tests

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3893/console
COMMIT: ba0d5fbae52d1fab586e84b5ee85f5001ea101c8

review: Needs Fixing

4f9ca99... by Anthony Dillon on 2018-09-11

Fix lint issues

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3894/console
COMMIT: 1cdc58449c2eb58989a187085be7a530e2c164bc

review: Needs Fixing

d3d86f4... by Anthony Dillon on 2018-09-11

White space

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3896/console
COMMIT: a253d14a19de98c8d4e8929825894b628a2bda2a

review: Needs Fixing

f52cea9... by Anthony Dillon on 2018-09-12

Make the dropdown keyboard accessible

e905752... by Anthony Dillon on 2018-09-12

Make the storage location unique to the storage object

f212454... by Anthony Dillon on 2018-09-13

Set default storage pool

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3939/console
COMMIT: 5af783308fd8ba63cef2a4c4f248e3347c98dd68

review: Needs Fixing

[Martin Storey (cassiocassio)]

Following a call... notes:

8 GB mininimum check?
compose machine button grey and warning around capacity field?

default should be selected
“name (default)” shuold be be shown

tick align with name of pool?
spacing of green tick - not wide enough
tick should be black chosen tick not green success tick

love the “impossible to remove the boot partition” function… check with team nobody has a good reason to make unbootable machines, you never know

it’s big pulldown, but still a pulldown -
- single click to open - stays open
- click and drag - stays open, unike a system pulldown
- click to select an item, selects that pool, AND closes
- moving focus, e.g. tab to tags field, also closes…
- HOWEVER clicking on capacity

Capacity field is a number so should be input type="number”>

escape key to close dropdown
mouseover on cross rectangular - square would make more visual sense

focus to tags should close

consider: alighing used key to left and putting close X top right?

what happens when there are 10 pools to pick from, or 20?
max depth and clipping and autoscroll

clicking + to add another row needs to close any open dropdown?

handle multiple requests to the same pool in the same compose dialog with “other” colour and o+o in the key…
https://zpl.io/2j4v7GQ

a647124... by Anthony Dillon on 2018-09-14

Fix tests

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3943/console
COMMIT: 0065a188774bed75a55f5d4eaacc55116b251bd6

review: Needs Fixing

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3944/console
COMMIT: 91bbb1a41015ae7193dcbee00d533004c3ea1925

review: Needs Fixing

[MAAS Lander (maas-lander)]

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

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3945/console
COMMIT: 72ed76c2098d62e7aa2b324f2b3be739d3075e70

review: Needs Fixing

9d0503e... by Anthony Dillon on 2018-09-18

Set the default pod storage

8499adc... by Anthony Dillon on 2018-09-18

Lint the pod details

[Caleb Ellis (caleb-ellis)]

- I get an angular error: TypeError: Cannot read property 'storage_pools' of null at Scope.$scope.getDefaultStoragePool. If I go back a couple of commits it works.

- How many different locations or storage configurations can we expect? It's already pretty close to the bottom of my viewport, and with it attached to a sticky header it's possible for content to become unreachable. Maybe we can remove sticky when the header is expanded?

- Other comments inline

review: Needs Fixing

82e7e30... by Anthony Dillon on 2018-09-19

Fix the defaultPod function call order

diff --git a/src/maasserver/static/js/angular/3rdparty/ng-tags-input.js b/src/maasserver/static/js/angular/3rdparty/ng-tags-input.js
index 86eb45c..481d915 100644
--- a/src/maasserver/static/js/angular/3rdparty/ng-tags-input.js
+++ b/src/maasserver/static/js/angular/3rdparty/ng-tags-input.js
@@ -1119,7 +1119,7 @@ tagsInput.factory('tiUtil', ["$timeout", function($timeout) {
 /* HTML templates */
 tagsInput.run(["$templateCache", function($templateCache) {
     $templateCache.put('ngTagsInput/tags-input.html',
-    "<div class=\"host\" tabindex=\"-1\" data-ng-click=\"eventHandlers.host.click()\" ti-transclude-append=\"\"><div class=\"tags\" data-ng-class=\"{focused: hasFocus}\"><ul class=\"tag-list\"><li class=\"tag-item\" data-ng-repeat=\"tag in tagList.items track by track(tag)\" data-ng-class=\"{ selected: tag == tagList.selected }\"><ti-tag-item data=\"tag\"></ti-tag-item></li></ul><input class=\"input u-no-margin--top\" autocomplete=\"off\" data-ng-model=\"newTag.text\" data-ng-change=\"eventHandlers.input.change(newTag.text)\" data-ng-keydown=\"eventHandlers.input.keydown($event)\" data-ng-focus=\"eventHandlers.input.focus($event)\" data-ng-blur=\"eventHandlers.input.blur($event)\" data-ng-paste=\"eventHandlers.input.paste($event)\" data-ng-trim=\"false\" data-ng-class=\"{'invalid-tag': newTag.invalid}\" data-ng-disabled=\"disabled\" ti-bind-attrs=\"{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}\" ti-autosize=\"\"></div></div>"
+    "<div class=\"host\" tabindex=\"-1\" data-ng-click=\"eventHandlers.host.click()\" ti-transclude-append=\"\"><div class=\"tags\" data-ng-class=\"{focused: hasFocus}\"><ul class=\"tag-list\"><li class=\"tag-item\" data-ng-repeat=\"tag in tagList.items track by track(tag)\" data-ng-class=\"{ selected: tag == tagList.selected }\"><ti-tag-item data=\"tag\"></ti-tag-item></li></ul><input class=\"input u-no-margin--top u-no-margin--bottom\" autocomplete=\"off\" data-ng-model=\"newTag.text\" data-ng-change=\"eventHandlers.input.change(newTag.text)\" data-ng-keydown=\"eventHandlers.input.keydown($event)\" data-ng-focus=\"eventHandlers.input.focus($event)\" data-ng-blur=\"eventHandlers.input.blur($event)\" data-ng-paste=\"eventHandlers.input.paste($event)\" data-ng-trim=\"false\" data-ng-class=\"{'invalid-tag': newTag.invalid}\" data-ng-disabled=\"disabled\" ti-bind-attrs=\"{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}\" ti-autosize=\"\"></div></div>"
   );
 
   $templateCache.put('ngTagsInput/tag-item.html',
diff --git a/src/maasserver/static/js/angular/controllers/pod_details.js b/src/maasserver/static/js/angular/controllers/pod_details.js
index 8f015cc..192274a 100644
--- a/src/maasserver/static/js/angular/controllers/pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/pod_details.js
@@ -53,6 +53,7 @@ angular.module('MAAS').controller('PodDetailsController', [
               type: 'local',
               size: 8,
               tags: [],
+              pool: {},
               boot: true
             }]
           }
@@ -211,6 +212,21 @@ angular.module('MAAS').controller('PodDetailsController', [
               });
         };
 
+        $scope.openOptions = function(storage) {
+            angular.forEach($scope.compose.obj.storage, function(disk) {
+                disk.showOptions = false;
+            });
+            storage.showOptions = true;
+        }
+
+        $scope.closeOptions = function(storage) {
+            storage.showOptions = false;
+        }
+
+        $scope.selectStoragePool = function(storagePool, storage) {
+            storage.pool = storagePool;
+        }
+
         // Return the title of the pod type.
         $scope.getPodTypeTitle = function() {
             var i;
@@ -274,6 +290,7 @@ angular.module('MAAS').controller('PodDetailsController', [
               type: 'local',
               size: 8,
               tags: [],
+              pool: {},
               boot: true
             }]
           };
@@ -282,16 +299,18 @@ angular.module('MAAS').controller('PodDetailsController', [
 
         // Add another storage device.
         $scope.composeAddStorage = function() {
-          var storage = {
-            type: 'local',
-            size: 8,
-            tags: [],
-            boot: false
-          };
-          if($scope.pod.capabilities.indexOf('iscsi_storage') >= 0) {
-            storage.type = 'iscsi';
-          }
-          $scope.compose.obj.storage.push(storage);
+            var storage = {
+                type: 'local',
+                size: 8,
+                tags: [],
+                pool: $scope.getDefaultStoragePool(),
+                boot: false
+            };
+
+            if($scope.pod.capabilities.indexOf('iscsi_storage') >= 0) {
+                storage.type = 'iscsi';
+            }
+            $scope.compose.obj.storage.push(storage);
         };
 
         // Change which disk is the boot disk.
@@ -302,6 +321,18 @@ angular.module('MAAS').controller('PodDetailsController', [
           storage.boot = true;
         };
 
+        // Get the default pod pool
+        $scope.getDefaultStoragePool = function () {
+            var defaultPool = {};
+            console.log($scope);
+            if($scope.pod.storage_pools && $scope.pod.default_storage_pool) {
+                defaultPool = $scope.pod.storage_pools.filter(
+                    pool => pool.id == $scope.pod.default_storage_pool
+                )[0];
+            }
+            return defaultPool;
+        };
+
         // Remove a disk from storage config.
         $scope.composeRemoveDisk = function(storage) {
           var idx = $scope.compose.obj.storage.indexOf(storage);
@@ -357,8 +388,10 @@ angular.module('MAAS').controller('PodDetailsController', [
             // the activeItem.
             var activePod = PodsManager.getActiveItem();
             if(angular.isObject(activePod) &&
-                activePod.id === parseInt($routeParams.id, 10)) {
+            activePod.id === parseInt($routeParams.id, 10)) {
                 $scope.pod = activePod;
+                $scope.compose.obj.storage[0].pool = (
+                    $scope.getDefaultStoragePool());
                 $scope.loaded = true;
                 $scope.machinesSearch = 'pod-id:=' + $scope.pod.id;
                 $scope.startWatching();
@@ -366,6 +399,8 @@ angular.module('MAAS').controller('PodDetailsController', [
                 PodsManager.setActiveItem(
                     parseInt($routeParams.id, 10)).then(function(pod) {
                         $scope.pod = pod;
+                        $scope.compose.obj.storage[0].pool = (
+                            $scope.getDefaultStoragePool());
                         $scope.loaded = true;
                         $scope.machinesSearch = 'pod-id:=' + $scope.pod.id;
                         $scope.startWatching();
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 f1f9322..998d263 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
@@ -157,6 +157,7 @@ describe("PodDetailsController", function() {
               type: 'local',
               size: 8,
               tags: [],
+              pool: {},
               boot: true
             }]
           }
@@ -660,6 +661,7 @@ describe("PodDetailsController", function() {
                 type: 'local',
                 size: 8,
                 tags: [],
+                pool: {},
                 boot: true
               }]
             });
@@ -678,6 +680,7 @@ describe("PodDetailsController", function() {
               type: 'local',
               size: 8,
               tags: [],
+              pool: {},
               boot: false
             });
         });
@@ -692,6 +695,7 @@ describe("PodDetailsController", function() {
               type: 'iscsi',
               size: 8,
               tags: [],
+              pool: {},
               boot: false
             });
         });
diff --git a/src/maasserver/static/js/angular/filters/format_bytes.js b/src/maasserver/static/js/angular/filters/format_bytes.js
 new file mode 100644
index 0000000..1ea393d
--- /dev/null
+++ b/src/maasserver/static/js/angular/filters/format_bytes.js
@@ -0,0 +1,75 @@
+/* Copyright 2016-2018 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Converts bytes into human readable string, e.g. 10 GB
+ */
+
+angular.module('MAAS').filter('formatBytes', function() {
+  return function(bytes) {
+      var bytesInKilobyte = 1000;
+      var kilobytesInMegabyte = 1000;
+      var megabytesInGigabyte = 1000;
+      var gigabytesInTerabyte = 1000;
+
+      var bytesInMegabyte = (
+        bytesInKilobyte * kilobytesInMegabyte
+      );
+      var bytesInGigabyte = (
+        bytesInKilobyte * kilobytesInMegabyte * megabytesInGigabyte
+      );
+      var bytesInTerabyte = (
+        bytesInKilobyte *
+        kilobytesInMegabyte *
+        megabytesInGigabyte * gigabytesInTerabyte
+      );
+
+      if (bytes >= bytesInTerabyte) {
+        return Math.round(
+          bytes /
+          bytesInKilobyte /
+          kilobytesInMegabyte /
+          megabytesInGigabyte /
+          gigabytesInTerabyte
+        ) + ' TB';
+      } else if (bytes >= bytesInGigabyte) {
+        return Math.round(
+          bytes /
+          bytesInKilobyte /
+          kilobytesInMegabyte /
+          megabytesInGigabyte
+        ) +  ' GB';
+      } else if (bytes >= bytesInMegabyte) {
+        return Math.round(
+          bytes /
+          bytesInKilobyte /
+          kilobytesInMegabyte
+        ) + ' MB';
+      } else if (bytes >= bytesInKilobyte) {
+        return Math.round(bytes / bytesInKilobyte) + ' KB';
+      } else if (bytes > 0) {
+        return bytes + ' B';
+      } else {
+        return 0;
+      }
+  }
+});
+
+angular.module('MAAS').filter('convertGigabyteToBytes', function() {
+  return function(gigabytes) {
+      var bytesInKilobyte = 1000;
+      var kilobytesInMegabyte = 1000;
+      var megabytesInGigabyte = 1000;
+
+      if (gigabytes) {
+        return Math.round(
+          gigabytes *
+          bytesInKilobyte *
+          kilobytesInMegabyte *
+          megabytesInGigabyte
+        );
+      } else {
+        return 0;
+      }
+  }
+});
+
diff --git a/src/maasserver/static/js/angular/filters/format_storage_type.js b/src/maasserver/static/js/angular/filters/format_storage_type.js
 new file mode 100644
index 0000000..2d05113
--- /dev/null
+++ b/src/maasserver/static/js/angular/filters/format_storage_type.js
@@ -0,0 +1,20 @@
+/* Copyright 2016-2018 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Converts storage type into human readable string, e.g. LVM
+ */
+
+angular.module('MAAS').filter('formatStorageType', function() {
+  return function(storageType) {
+    if (!storageType) {
+      return '';
+    }
+
+    switch(storageType) {
+      case 'lvm':
+        return 'LVM';
+      default:
+        return storageType;
+    }
+  }
+});
diff --git a/src/maasserver/static/js/angular/filters/tests/test_format_bytes.js b/src/maasserver/static/js/angular/filters/tests/test_format_bytes.js
 new file mode 100644
index 0000000..4086438
--- /dev/null
+++ b/src/maasserver/static/js/angular/filters/tests/test_format_bytes.js
@@ -0,0 +1,39 @@
+/* Copyright 2015-2018 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for formatBytes.
+ */
+
+describe("formatBytes", function() {
+
+  // Load the MAAS module.
+  beforeEach(module("MAAS"));
+
+  // Load the formatBytes.
+  var formatBytes;
+  beforeEach(inject(function($filter) {
+      formatBytes = $filter("formatBytes");
+  }));
+
+  it("returns zero if undefined bytes", function() {
+      expect(formatBytes()).toEqual(0);
+  });
+
+  it("returns value in bytes if less than a kilobyte", function() {
+      expect(formatBytes(456)).toEqual('456 B');
+  });
+
+  it("returns value in kilobytes if less than a megabyte", function() {
+      expect(formatBytes(568000000)).toEqual('568 MB');
+  });
+
+  it("returns value in gigabytes if less than a terabyte", function() {
+      expect(formatBytes(382000000000)).toEqual('382 GB');
+  });
+
+  it("returns value in terabytes if great than or equal to 1 terabyte",
+    function() {
+      expect(formatBytes(2000000000000)).toEqual('2 TB');
+    }
+  );
+});
diff --git a/src/maasserver/static/js/angular/filters/tests/test_storage_type.js b/src/maasserver/static/js/angular/filters/tests/test_storage_type.js
 new file mode 100644
index 0000000..5de13ca
--- /dev/null
+++ b/src/maasserver/static/js/angular/filters/tests/test_storage_type.js
@@ -0,0 +1,29 @@
+/* Copyright 2015-2018 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for formatStorageType.
+ */
+
+describe("formatStorageType", function() {
+
+  // Load the MAAS module.
+  beforeEach(module("MAAS"));
+
+  // Load the storageType.
+  var storageType;
+  beforeEach(inject(function($filter) {
+    storageType = $filter("formatStorageType");
+  }));
+
+  it("returns empty string if undefined storage type", function() {
+      expect(storageType()).toEqual('');
+  });
+
+  it("returns original value if not recognised", function() {
+      expect(storageType('foo')).toEqual('foo');
+  });
+
+  it("returns formatted when recognised", function() {
+      expect(storageType('lvm')).toEqual('LVM');
+  });
+});
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index 1b41b4d..a30f03c 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -16,7 +16,7 @@
                         data-ng-model="name.value"
                         data-ng-disabled="!canEdit()"
                         data-ng-click="editName()"></span>
-	        </h1>		    
+	        </h1>
                 <button class="p-button--base u-no-margin--top ng-hide"
                     data-ng-show="name.editing"
                     data-ng-click="cancelEditName()">Cancel</button>
@@ -64,41 +64,97 @@
                 <div class="row">
                     <div class="col-12">
                         <h3 class="p-heading--four">Storage configuration</h3>
-                        <table class="p-table-expanding">
+                        <table class="p-table-expanding p-table--pod-storage-config">
                             <thead>
-                                <tr>
-                                    <th class="col-2">Location</th>
-                                    <th class="col-3">Capacity (GB)</th>
-                                    <th class="col-4">Tags</th>
-                                    <th class="col-1">
+                                <tr class="p-table__row">
+                                    <th></th>
+                                    <th>Capacity (GB)</th>
+                                    <th>Location</th>
+                                    <th>Tags</th>
+                                    <th>
                                         <div class="u-align--center">Boot</div>
                                     </th>
-                                    <th class="col-2"></th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr data-ng-repeat="storage in compose.obj.storage">
-                                    <td class="col-2">
+                                <tr class="p-table__row" data-ng-repeat="storage in compose.obj.storage">
+                                    <td>
+                                        <div data-ng-if="!storage.boot">
+                                            <button class="p-button--base" data-ng-click="composeRemoveDisk(storage)">
+                                                <i class="p-icon--close"></i>
+                                                <span class="u-off-screen">Remove</span>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td>
                                         <div class="form__group-input">
-                                            <select data-ng-model="storage.type">
-                                                <option value="local">Local</option>
-                                                <option value="iscsi"
-                                                    data-ng-if="pod.capabilities.indexOf('iscsi_storage') >= 0"
-                                                    data-ng-disabled="storage.boot">iSCSI</option>
-                                            </select>
+                                            <input type="text" class="u-no-margin--bottom" placeholder="Enter capacity" data-ng-model="storage.size">
                                         </div>
                                     </td>
-                                    <td class="col-3">
+                                    <td style="overflow: visible">
                                         <div class="form__group-input">
-                                            <input type="text" placeholder="Enter capacity" data-ng-model="storage.size">
+                                            <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)">
+                                                <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>
+                                                    </button>
+                                                    <ul class="p-inline-list u-align--right p-option-selector__options-key">
+                                                        <li class="p-inline-list__item">
+                                                            <span class="p-key-icon--used"></span> Used
+                                                        </li>
+                                                        <li class="p-inline-list__item">
+                                                            <span class="p-key-icon--requests"></span> Requests
+                                                        </li>
+                                                        <li class="p-inline-list__item">
+                                                            <span class="p-key-icon--free"></span> Free
+                                                        </li>
+                                                    </ul>
+                                                    <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}">
+                                                        <div class="p-option-selector__option-cell">
+                                                            <div><strong>{$ storage_pool.name $}</strong></div>
+                                                            <div class="u-text--light">{$ storage_pool.path $}</div>
+                                                        </div>
+                                                        <div class="p-option-selector__option-cell u-align--right">
+                                                            <div>{$ storage_pool.type | formatStorageType $}</div>
+                                                            <div>{$ storage_pool.total | formatBytes $}</div>
+                                                        </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--used" style="width: {$ storage_pool.used / storage_pool.total * 100 $}%"></div>
+                                                            </div>
+
+                                                            <ul class="p-inline-list u-no-margin--bottom p-space-between">
+                                                                <li class="p-inline-list__item">
+                                                                    <span class="p-key-icon--used"></span>
+                                                                    {$ storage_pool.used | formatBytes $}
+                                                                </li>
+                                                                <li class="p-inline-list__item">
+                                                                    <span class="p-key-icon--requests"></span>
+                                                                    {$ storage.size $} GB
+                                                                </li>
+                                                                <li class="p-inline-list__item">
+                                                                    <span class="p-key-icon--free"></span>
+                                                                    {$ storage_pool.available | formatBytes $}
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                     </td>
-                                    <td class="col-4">
+                                    <td>
                                         <div class="form__group-input">
-                                            <tags-input data-ng-model="storage.tags" allow-tags-pattern="[\\w-]+"></tags-input>
+                                            <tags-input data-ng-model="storage.tags" class="u-no-margin--bottom" allow-tags-pattern="[\\w-]+"></tags-input>
                                         </div>
                                     </td>
-                                    <td class="col-1">
+                                    <td>
                                         <div class="u-align--center">
                                             <input type="radio" id="{$ $index $}-boot" class="u-no-margin--right"
                                                 data-ng-click="composeSetBootDisk(storage)"
@@ -107,19 +163,21 @@
                                             <label for="{$ $index $}-boot"></label>
                                         </div>
                                     </td>
-                                    <td class="col-2">
-                                        <div class="u-align--right" data-ng-if="!storage.boot">
-                                            <button data-ng-click="composeRemoveDisk(storage)">Remove</button>
-                                        </div>
-                                    </td>
                                 </tr>
+                                <tr class="p-table__row">
+                                    <td>
+                                        <button class="p-button--base" data-ng-click="composeAddStorage()">
+                                            <i class="p-icon--plus"></i>
+                                            <span class="u-off-screen">Add another device</span>
+                                        </button>
+                                    </td>
                             </tbody>
                         </table>
-                        <button class="p-button--neutral" data-ng-click="composeAddStorage()">Add another device</button>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-12">
+                        <hr>
                         <p maas-obj-hide-saving><maas-obj-errors></maas-obj-errors></p>
                         <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>
diff --git a/src/maasserver/static/scss/_patterns_charts.scss b/src/maasserver/static/scss/_patterns_charts.scss
 new file mode 100644
index 0000000..2f391ac
--- /dev/null
+++ b/src/maasserver/static/scss/_patterns_charts.scss
@@ -0,0 +1,40 @@
+@mixin patterns_charts {
+  .p-chart {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 1rem;
+    border-radius: 1rem;
+    background-color: $color-x-light;
+    border: 1px solid $color-mid-light;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+
+  .p-chart__bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .p-chart__bar--used {
+    @extend .p-chart__bar;
+    background-color: #c6b3d4;
+    border-right: 1px solid $color-x-light;
+  }
+
+  .p-chart__bar--other {
+    @extend .p-chart__bar;
+    background-color: #adcde1;
+  }
+
+  .p-chart__bar--requests {
+    @extend .p-chart__bar;
+    background-color: #3a77af;
+
+    &.is-over {
+      background-color: #ff8936;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/_patterns_option-selector.scss b/src/maasserver/static/scss/_patterns_option-selector.scss
 new file mode 100644
index 0000000..badafbd
--- /dev/null
+++ b/src/maasserver/static/scss/_patterns_option-selector.scss
@@ -0,0 +1,130 @@
+@mixin patterns_option-selector {
+  .p-option-selector {
+    position: relative;
+  }
+
+  .p-option-selector__input {
+    @extend select;
+  }
+
+  .p-option-selector__options {
+    position: absolute;
+    top: 2.25rem;
+    padding: $sph-intra 0 0;
+    border: 1px solid $color-mid-light;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    background-color: $color-x-light;
+    z-index: 10;
+    width: 100%;
+
+    @media (min-width: $breakpoint-medium) {
+      width: 70vw;
+    }
+
+    @media (min-width: $breakpoint-large) {
+      width: 750px;
+    }
+  }
+
+  .p-option-selector__options-key {
+    padding: 0 $sph-intra;
+  }
+
+  .p-option-selector__option {
+    @include vf-focus;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: $sph-intra $sph-intra;
+    border-bottom: 1px solid $color-mid-light;
+    cursor: pointer;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover {
+      background-color: $color-light;
+    }
+
+    &.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");
+      background-repeat: no-repeat;
+      background-position: 10px center;
+    }
+  }
+
+  .p-option-selector__option-cell {
+    padding: $sp-small $sp-medium;
+
+    &:first-child {
+      width: 70%;
+
+      @media (min-width: $breakpoint-medium) {
+        border-right: 1px solid $color-mid-light;
+        width: 35%;
+      }
+
+      @media (min-width: $breakpoint-large) {
+        width: 40%;
+      }
+    }
+
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:nth-child(2) {
+      width: 30%;
+
+      @media (min-width: $breakpoint-medium) {
+        width: 20%;
+        border-right: 1px solid $color-mid-light;
+      }
+
+      @media (min-width: $breakpoint-large) {
+        width: 15%;
+      }
+    }
+
+    &:nth-child(3) {
+      width: 100%;
+
+      @media (min-width: $breakpoint-medium) {
+        width: 45%;
+      }
+    }
+  }
+}
+
+// Key inside option selector
+.p-key-icon {
+  display: inline-block;
+  width: .75rem;
+  height: .75rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+}
+
+.p-key-icon--free {
+  @extend .p-key-icon;
+  background-color: $color-x-light;
+  border-color: $color-mid-light;
+}
+
+.p-key-icon--used {
+  @extend .p-key-icon;
+  background-color: #c6b3d4;
+  border-color: #c6b3d4;
+}
+
+.p-key-icon--requests {
+  @extend .p-key-icon;
+  background-color: #3a77af;
+  border-color: #3a77af;
+}
diff --git a/src/maasserver/static/scss/_patterns_table-expanding.scss b/src/maasserver/static/scss/_patterns_table-expanding.scss
index d210c3f..0298c81 100644
--- a/src/maasserver/static/scss/_patterns_table-expanding.scss
+++ b/src/maasserver/static/scss/_patterns_table-expanding.scss
@@ -1,10 +1,4 @@
 @mixin maas-table-expanding {
-  .p-table-expanding__panel {
-    // .p-form-validation .p-form-validation__input {
-    //   padding: .5rem .75rem;
-    // }
-  }
-
   .p-table-expanding {
     .p-table-expanding__panel {
       @extend %vf-card;
@@ -30,7 +24,6 @@
       }
     }
 
-
     tr {
       display: table-row; //XXX (2) ove flex to only direct descendants as it is breaking nexsted tables
       .is-active {
@@ -38,8 +31,14 @@
       }
     }
   }
+
   .p-table-expanding > thead > tr,
   .p-table-expanding > tbody > tr {
     display: flex; //XXX (1): move flex to only direct descendants as it is breaking nexsted tables
   }
+
+  // Remove margins from tag inputs within tables
+  .p-table-expanding .tags-input .tags .input {
+    margin-bottom: 0;
+  }
 }
diff --git a/src/maasserver/static/scss/_tables.scss b/src/maasserver/static/scss/_tables.scss
index 509e233..0f21734 100644
--- a/src/maasserver/static/scss/_tables.scss
+++ b/src/maasserver/static/scss/_tables.scss
@@ -452,6 +452,32 @@
     }
   }
 
+  .p-table--pod-storage-config {
+    @media (min-width: $breakpoint-small) {
+      margin-bottom: 0;
+
+      .p-table__row {
+        th, td {
+          &:nth-child(1) {
+            width: 5%;
+          }
+          &:nth-child(2) {
+            width: 20%;
+          }
+          &:nth-child(3) {
+            width: 30%;
+          }
+          &:nth-child(4) {
+            width: 35%;
+          }
+          &:nth-child(5) {
+            width: 10%;
+          }
+        }
+      }
+    }
+  }
+
   .p-double-row {
     $checkbox-space: 1rem + $sph-intra;
     $icon-space: map-get($icon-sizes, default) + $sph-intra--condensed;
diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
index 2587691..8e95c14 100644
--- a/src/maasserver/static/scss/_utils.scss
+++ b/src/maasserver/static/scss/_utils.scss
@@ -19,3 +19,7 @@
 .u-flex--no-wrap {
   display: flex;
 }
+
+.u-text--light {
+  color: $color-mid-dark;
+}
diff --git a/src/maasserver/static/scss/build.scss b/src/maasserver/static/scss/build.scss
index 0846e1a..7a54ba4 100644
--- a/src/maasserver/static/scss/build.scss
+++ b/src/maasserver/static/scss/build.scss
@@ -33,6 +33,8 @@
 @import 'tables';
 @import 'patterns_space-between';
 @import 'patterns_filter';
+@import 'patterns_charts';
+@import 'patterns_option-selector';
 
 // Include local patterns
 @include maas;
@@ -61,3 +63,5 @@
 @include maas-table-sortable;
 @include maas-table-widths;
 @include patterns_space-between;
+@include patterns_charts;
+@include patterns_option-selector;