Merge ~ya-bo-ng/maas:esxi-rebuild-2 into maas:master

[Anthony Dillon]

Update machine storage to add datastore support for ESXi

## Done
Updated the machine storage UI to add the ability to create a ESXi datastore from available disk.

## QA
- Open a machine is Ready state
- Open the storage tab
- Change the layout to ESXi and confirm
- See that there is a datastore table.
- Under available disks table, select a disk and create a datastore
- See that is works
- Change the layout and confirm
- Check it does not show the datastores table

## Sreenshots
Storage UI: https://screenshots.firefox.com/0XmfpOlZmMoEgQ7h/10.54.72.65
Layout change confirmation: https://screenshots.firefox.com/0XmfpOlZmMoEgQ7h/10.54.72.65
ESXi layout: https://screenshots.firefox.com/0XmfpOlZmMoEgQ7h/10.54.72.65
Creating a datastore: https://screenshots.firefox.com/DGU5MpBaPAdJwJqq/10.54.72.65

[Steve Rydz (steverydz)]

LGTM +1

review: Approve

[Lilyana Videnova (lilyanavidenova)]

LGTM :)

[Lilyana Videnova (lilyanavidenova)]

review: Approve

[Blake Rouse (blake-rouse)]

JS needs fixing.

review: Needs Fixing

[Anthony Dillon (ya-bo-ng)]

All done Blake, thanks

[Blake Rouse (blake-rouse)]

Approved.

By the way.... smaller branches next time!!!!!

review: Approve

[MAAS Lander (maas-lander)]

LANDING
-b esxi-rebuild-2 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/5706/consoleText

[MAAS Lander (maas-lander)]

LANDING
-b esxi-rebuild-2 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/5707/consoleText

[MAAS Lander (maas-lander)]

LANDING
-b esxi-rebuild-2 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/5711/consoleText

diff --git a/src/maasserver/static/js/angular/controllers/node_details_storage.js b/src/maasserver/static/js/angular/controllers/node_details_storage.js
index 2ddf2e0..87edee0 100644
--- a/src/maasserver/static/js/angular/controllers/node_details_storage.js
+++ b/src/maasserver/static/js/angular/controllers/node_details_storage.js
@@ -45,12 +45,23 @@ export function removeAvailableByNew() {
   };
 }
 
+export function datastoresOnly() {
+  return function(filesystems) {
+    return filesystems.filter(filesystem => {
+      return filesystem.used_for === "VMFS Datastore";
+    });
+  };
+}
+
 /* @ngInject */
 export function NodeStorageController(
   $scope,
   MachinesManager,
   ConverterService,
-  UsersManager
+  UsersManager,
+  $log,
+  $timeout,
+  $filter
 ) {
   // From models/partitiontable.py - must be kept in sync.
   var INITIAL_PARTITION_OFFSET = 4 * 1024 * 1024;
@@ -129,6 +140,8 @@ export function NodeStorageController(
     }
   ];
 
+  var datastoreOnly = $filter("datastoresOnly");
+
   $scope.tableInfo = { column: "name" };
   $scope.has_disks = false;
   $scope.filesystems = [];
@@ -148,6 +161,235 @@ export function NodeStorageController(
   $scope.nodeManager = MachinesManager;
   $scope.used = [];
   $scope.showMembers = [];
+  $scope.createNewDatastore = false;
+  $scope.addToExistingDatastore = false;
+  $scope.datastores = {
+    new: {},
+    old: {}
+  };
+  $scope.selectedAvailableDatastores = [];
+  $scope.creatingDatastore = false;
+  $scope.updatingDatastore = false;
+  $scope.updatingOSFamily = false;
+  $scope.updatingStorageLayout = false;
+  $scope.confirmStorageLayout = false;
+  $scope.newLayout = "";
+  $scope.addToDatastoreValid = false;
+
+  // XXX: Steve Rydz 09/08/2019
+  // Hardcoded for now in current cycle as no mapping exists
+  $scope.osFamilies = [
+    {
+      id: "linux",
+      name: "Linux",
+      layouts: [
+        {
+          id: "flat",
+          name: "Flat"
+        },
+        {
+          id: "lvm",
+          name: "LVM"
+        },
+        {
+          id: "bcache",
+          name: "bcache"
+        },
+        {
+          id: "vmfs6",
+          name: "VMFS6 (VMware ESXI)"
+        },
+        {
+          id: "blank",
+          name: "No storage (blank) layout"
+        }
+      ]
+    }
+  ];
+
+  $scope.osFamily = $scope.osFamilies[0];
+  $scope.storageLayout = $scope.osFamily.layouts.find(layout => {
+    return layout.id === $scope.node.detected_storage_layout;
+  });
+
+  $scope.openStorageLayoutConfirm = function(selectedLayout) {
+    $scope.osFamily.layouts.forEach(layout => {
+      if (layout.id === selectedLayout) {
+        $scope.newLayout = layout;
+      }
+    });
+    $scope.confirmStorageLayout = true;
+  };
+
+  $scope.closeStorageLayoutConfirm = function() {
+    $scope.confirmStorageLayout = false;
+  };
+
+  $scope.updateStorageLayout = function(storageLayout) {
+    storageLayout = $scope.storageLayout = $scope.newLayout;
+
+    var params = {
+      system_id: $scope.node.system_id,
+      storage_layout: storageLayout.id
+    };
+
+    $scope.updatingStorageLayout = true;
+
+    MachinesManager.applyStorageLayout(params)
+      .then(function() {
+        $timeout(function() {
+          $scope.updatingStorageLayout = false;
+        }, 0);
+      })
+      .catch(function(error) {
+        $log.error(error);
+        $timeout(function() {
+          $scope.updatingStorageLayout = false;
+        }, 0);
+      });
+
+    $scope.closeStorageLayoutConfirm();
+  };
+
+  $scope.openNewDatastorePanel = function() {
+    $scope.createNewDatastore = true;
+    var selectedDisks = $scope.getSelectedAvailable();
+    $scope.datastores.new = {
+      id: selectedDisks[0].id,
+      name: "",
+      mountpoint: selectedDisks[0].mount_point,
+      filesystem: "VMFS6",
+      size: selectedDisks[0].size_human
+    };
+  };
+
+  $scope.closeNewDatastorePanel = function() {
+    $scope.createNewDatastore = false;
+    $scope.datastores.new = {};
+  };
+
+  $scope.openAddToExistingDatastorePanel = function() {
+    $scope.addToExistingDatastore = true;
+    $scope.selectedAvailableDatastores = $scope.getSelectedAvailable();
+    $scope.datastores.old = datastoreOnly($scope.node.disks)[0];
+  };
+
+  $scope.closeAddToExistingDatastorePanel = function() {
+    $scope.addToExistingDatastore = false;
+    $scope.datastores.new = {};
+  };
+
+  $scope.canPerformActionOnDatastoreSet = function() {
+    var editing = $scope.addToExistingDatastore || $scope.createNewDatastore;
+    var selected = $scope.selectedAvailableDatastores.length > 0;
+    var vmfs6 = $scope.storageLayout.id === "vmfs6";
+    return !editing && selected && vmfs6;
+  };
+
+  $scope.createDatastore = function() {
+    $scope.createNewDatastore = true;
+
+    var selectedAvailable = $scope.getSelectedAvailable();
+    var blockDeviceIDs = [];
+    var partitionIDs = [];
+
+    selectedAvailable.forEach(function(item) {
+      if (item.type === "partition") {
+        partitionIDs.push(item.partition_id);
+      } else {
+        blockDeviceIDs.push(item.block_id);
+      }
+    });
+
+    var params = {
+      system_id: $scope.node.system_id,
+      block_devices: blockDeviceIDs,
+      partitions: partitionIDs,
+      name: $scope.datastores.new.name
+    };
+
+    $scope.creatingDatastore = true;
+
+    MachinesManager.createDatastore(params)
+      .then(function() {
+        $timeout(function() {
+          $scope.creatingDatastore = false;
+        }, 0);
+        $scope.closeNewDatastorePanel();
+        $scope.selectedAvailableDatastores = [];
+      })
+      .catch(function(error) {
+        $log.error(error);
+        $timeout(function() {
+          $scope.creatingDatastore = false;
+        }, 0);
+      });
+  };
+
+  $scope.checkAddToDatastoreValid = function() {
+    var selectedAvailable = $scope.getSelectedAvailable();
+    var valid = true;
+    if (selectedAvailable.length < 1) {
+      valid = false;
+    }
+    selectedAvailable.forEach(function(item) {
+      if (item.has_partitions) {
+        valid = false;
+      }
+    });
+    $scope.addToDatastoreValid = valid;
+  };
+
+  $scope.addToDatastore = function() {
+    var selectedAvailable = $scope.getSelectedAvailable();
+    var blockDeviceIDs = [];
+    var partitionIDs = [];
+
+    selectedAvailable.forEach(function(item) {
+      if (item.type === "partition") {
+        partitionIDs.push(item.partition_id);
+      } else {
+        blockDeviceIDs.push(item.block_id);
+      }
+    });
+
+    var params = {
+      system_id: $scope.node.system_id,
+      add_block_devices: blockDeviceIDs,
+      add_partitions: partitionIDs,
+      name: $scope.datastores.old.name,
+      vmfs_datastore_id: $scope.datastores.old.id
+    };
+
+    $scope.updatingDatastore = true;
+
+    MachinesManager.updateDatastore(params)
+      .then(function() {
+        $timeout(function() {
+          $scope.updatingDatastore = false;
+        }, 0);
+        $scope.closeAddToExistingDatastorePanel();
+        $scope.selectedAvailableDatastores = [];
+      })
+      .catch(function(error) {
+        $log.error(error);
+        $timeout(function() {
+          $scope.updatingDatastore = false;
+        }, 0);
+      });
+  };
+
+  $scope.storageLayoutIsReadOnly = function(layouts) {
+    return layouts.length <= 1;
+  };
+
+  $scope.storageLayoutIsDisabled = function(layouts) {
+    return !layouts.length;
+  };
+
+  $scope.hasStorageLayout = function(storageLayout) {
+    return storageLayout ? true : false;
+  };
 
   // Return True if the filesystem is mounted.
   function isMountedFilesystem(filesystem) {
@@ -461,6 +703,7 @@ export function NodeStorageController(
           type: disk.type,
           model: disk.model,
           serial: disk.serial,
+          size_human: disk.size_human,
           tags: getTags(disk),
           used_for: disk.used_for,
           is_boot: disk.is_boot,
@@ -480,6 +723,7 @@ export function NodeStorageController(
             type: "partition",
             model: "",
             serial: "",
+            size_human: partition.size_human,
             tags: [],
             used_for: partition.used_for,
             is_boot: false
@@ -776,6 +1020,9 @@ export function NodeStorageController(
     } else if (filesystem.original_type === "partition") {
       // Delete the partition.
       MachinesManager.deletePartition($scope.node, filesystem.original.id);
+    } else if (filesystem.parent_type === "vmfs6") {
+      // Delete the datastore.
+      MachinesManager.deleteDisk($scope.node, filesystem.id);
     } else {
       // Delete the disk.
       MachinesManager.deleteFilesystem(
@@ -878,6 +1125,8 @@ export function NodeStorageController(
   $scope.toggleAvailableSelect = function(disk) {
     disk.$selected = !disk.$selected;
     $scope.updateAvailableSelection(true);
+    $scope.selectedAvailableDatastores = $scope.getSelectedAvailable();
+    $scope.checkAddToDatastoreValid();
   };
 
   // Toggle the selection of all available disks.
@@ -1592,24 +1841,24 @@ export function NodeStorageController(
   };
 
   // Return true when the name of the new disk is invalid.
-  $scope.isNewDiskNameInvalid = function() {
+  $scope.isNewDiskNameInvalid = function(newDiskName) {
     if (!angular.isObject($scope.node) || !angular.isArray($scope.node.disks)) {
       return true;
     }
 
-    if ($scope.availableNew.name === "") {
+    if (newDiskName === "") {
       return true;
     } else {
       var i, j;
       for (i = 0; i < $scope.node.disks.length; i++) {
         var disk = $scope.node.disks[i];
-        if ($scope.availableNew.name === disk.name) {
+        if (newDiskName === disk.name) {
           return true;
         }
         if (angular.isArray(disk.partitions)) {
           for (j = 0; j < disk.partitions.length; j++) {
             var partition = disk.partitions[j];
-            if ($scope.availableNew.name === partition.name) {
+            if (newDiskName === partition.name) {
               return true;
             }
           }
@@ -1622,7 +1871,7 @@ export function NodeStorageController(
   // Return true if bcache can be saved.
   $scope.createBcacheCanSave = function() {
     return (
-      !$scope.isNewDiskNameInvalid() &&
+      !$scope.isNewDiskNameInvalid($scope.availableNew.name) &&
       !$scope.isMountPointInvalid($scope.availableNew.mountPoint)
     );
   };
@@ -1831,7 +2080,7 @@ export function NodeStorageController(
   // Return true if RAID can be saved.
   $scope.createRAIDCanSave = function() {
     return (
-      !$scope.isNewDiskNameInvalid() &&
+      !$scope.isNewDiskNameInvalid($scope.availableNew.name) &&
       !$scope.isMountPointInvalid($scope.availableNew.mountPoint)
     );
   };
@@ -1944,7 +2193,7 @@ export function NodeStorageController(
 
   // Return true if volume group can be saved.
   $scope.createVolumeGroupCanSave = function() {
-    return !$scope.isNewDiskNameInvalid();
+    return !$scope.isNewDiskNameInvalid($scope.availableNew.name);
   };
 
   // Confirm and create the volume group device.
diff --git a/src/maasserver/static/js/angular/controllers/tests/test_node_details_storage.js b/src/maasserver/static/js/angular/controllers/tests/test_node_details_storage.js
index f267fa8..023c970 100644
--- a/src/maasserver/static/js/angular/controllers/tests/test_node_details_storage.js
+++ b/src/maasserver/static/js/angular/controllers/tests/test_node_details_storage.js
@@ -431,6 +431,7 @@ describe("NodeStorageController", function() {
         type: disks[2].type,
         model: disks[2].model,
         serial: disks[2].serial,
+        size_human: disks[2].size_human,
         tags: disks[2].tags,
         used_for: disks[2].used_for,
         has_partitions: false,
@@ -443,6 +444,7 @@ describe("NodeStorageController", function() {
         type: disks[3].type,
         model: disks[3].model,
         serial: disks[3].serial,
+        size_human: disks[3].size_human,
         tags: disks[3].tags,
         used_for: disks[3].used_for,
         has_partitions: true,
@@ -455,6 +457,7 @@ describe("NodeStorageController", function() {
         type: "partition",
         model: "",
         serial: "",
+        size_human: disks[3].partitions[1].size_human,
         tags: [],
         used_for: disks[3].partitions[1].used_for
       }
@@ -3597,9 +3600,8 @@ describe("NodeStorageController", function() {
     it("returns true if blank name", function() {
       makeController();
       $scope.node.disks = [];
-      $scope.availableNew.name = "";
 
-      expect($scope.isNewDiskNameInvalid()).toBe(true);
+      expect($scope.isNewDiskNameInvalid("")).toBe(true);
     });
 
     it("returns true if name used by disk", function() {
@@ -3610,9 +3612,8 @@ describe("NodeStorageController", function() {
           name: name
         }
       ];
-      $scope.availableNew.name = name;
 
-      expect($scope.isNewDiskNameInvalid()).toBe(true);
+      expect($scope.isNewDiskNameInvalid(name)).toBe(true);
     });
 
     it("returns true if name used by partition", function() {
@@ -3628,9 +3629,8 @@ describe("NodeStorageController", function() {
           ]
         }
       ];
-      $scope.availableNew.name = name;
 
-      expect($scope.isNewDiskNameInvalid()).toBe(true);
+      expect($scope.isNewDiskNameInvalid(name)).toBe(true);
     });
 
     it("returns false if the name is not already used", function() {
@@ -3646,9 +3646,8 @@ describe("NodeStorageController", function() {
           ]
         }
       ];
-      $scope.availableNew.name = name;
 
-      expect($scope.isNewDiskNameInvalid()).toBe(false);
+      expect($scope.isNewDiskNameInvalid(name)).toBe(false);
     });
   });
 
@@ -5073,4 +5072,307 @@ describe("NodeStorageController", function() {
       expect($scope.hasStorageLayoutIssues()).toBe(false);
     });
   });
+
+  describe("openStorageLayoutConfirm", function() {
+    it("sets 'confirmStorageLayout' to true", function() {
+      makeController();
+      $scope.confirmStorageLayout = false;
+      $scope.osFamilies = [
+        {
+          id: "linux",
+          name: "Linux",
+          layouts: [
+            {
+              id: "flat",
+              name: "Flat"
+            },
+            {
+              id: "lvm",
+              name: "LVM"
+            },
+            {
+              id: "bcache",
+              name: "bcache"
+            },
+            {
+              id: "vmfs6",
+              name: "VMFS6 (VMware ESXI)"
+            },
+            {
+              id: "blank",
+              name: "No storage (blank) layout"
+            }
+          ]
+        }
+      ];
+      $scope.openStorageLayoutConfirm("flat");
+      expect($scope.confirmStorageLayout).toBe(true);
+    });
+
+    it("sets 'newLayout' to layout argument", function() {
+      makeController();
+      $scope.osFamilies = [
+        {
+          id: "linux",
+          name: "Linux",
+          layouts: [
+            {
+              id: "flat",
+              name: "Flat"
+            },
+            {
+              id: "lvm",
+              name: "LVM"
+            },
+            {
+              id: "bcache",
+              name: "bcache"
+            },
+            {
+              id: "vmfs6",
+              name: "VMFS6 (VMware ESXI)"
+            },
+            {
+              id: "blank",
+              name: "No storage (blank) layout"
+            }
+          ]
+        }
+      ];
+      $scope.openStorageLayoutConfirm("flat");
+      expect($scope.newLayout).toEqual($scope.osFamilies[0].layouts[0]);
+    });
+  });
+
+  describe("closeStorageLayoutConfirm", function() {
+    it("sets 'confirmStorageLayout' to false", function() {
+      makeController();
+      $scope.confirmStorageLayout = true;
+      $scope.closeStorageLayoutConfirm();
+      expect($scope.confirmStorageLayout).toBe(false);
+    });
+  });
+
+  describe("updateStorageLayout", function() {
+    it("calls 'applyStorageLayout'", function() {
+      makeController();
+      spyOn(MachinesManager, "applyStorageLayout").and.callFake(function() {
+        var deferred = $q.defer();
+        return deferred.promise;
+      });
+      $scope.newLayout = {
+        id: "flat",
+        name: "Flat"
+      };
+      $scope.updateStorageLayout($scope.newLayout);
+      expect(MachinesManager.applyStorageLayout).toHaveBeenCalled();
+    });
+
+    it("calls 'closeStorageLayoutConfirm'", function() {
+      makeController();
+      spyOn(MachinesManager, "applyStorageLayout").and.callFake(function() {
+        var deferred = $q.defer();
+        return deferred.promise;
+      });
+      spyOn($scope, "closeStorageLayoutConfirm");
+      $scope.updateStorageLayout({
+        id: "flat",
+        name: "Flat"
+      });
+      expect($scope.closeStorageLayoutConfirm).toHaveBeenCalled();
+    });
+  });
+
+  describe("openNewDatastorePanel", function() {
+    it("sets 'createNewDatastore' to true", function() {
+      makeController();
+      $scope.createNewDatastore = false;
+      $scope.available = [
+        {
+          $selected: true,
+          id: 1
+        }
+      ];
+      $scope.openNewDatastorePanel();
+      expect($scope.createNewDatastore).toBe(true);
+    });
+
+    it("sets newDatastore", function() {
+      makeController();
+      $scope.available = [
+        {
+          $selected: true,
+          id: 1,
+          mount_point: "dev/null",
+          size_human: "35 GB"
+        }
+      ];
+      $scope.openNewDatastorePanel();
+      expect($scope.datastores.new).toEqual({
+        id: $scope.available[0].id,
+        name: "",
+        mountpoint: $scope.available[0].mount_point,
+        filesystem: "VMFS6",
+        size: $scope.available[0].size_human
+      });
+    });
+  });
+
+  describe("closeNewDatastorePanel", function() {
+    it("sets 'createNewDatastore' to false", function() {
+      makeController();
+      $scope.createNewDatastore = true;
+      $scope.closeNewDatastorePanel();
+      expect($scope.createNewDatastore).toBe(false);
+    });
+
+    it("sets 'newDatastore' to '{}'", function() {
+      makeController();
+      $scope.datastores.new = { id: 1, name: "" };
+      $scope.closeNewDatastorePanel();
+      expect($scope.datastores.new).toEqual({});
+    });
+  });
+
+  describe("canPerformActionOnDatastoreSet", function() {
+    it("return false if not on vmsf6 storage layout", function() {
+      makeController();
+      $scope.addToExistingDatastore = false;
+      $scope.createNewDatastore = false;
+      $scope.selectedAvailableDatastores = [1];
+      $scope.storageLayout = { id: "flat" };
+      expect($scope.canPerformActionOnDatastoreSet()).toBe(false);
+    });
+
+    it("return false if already editing datastores", function() {
+      makeController();
+      $scope.addToExistingDatastore = false;
+      $scope.createNewDatastore = true;
+      $scope.selectedAvailableDatastores = [1];
+      $scope.storageLayout = { id: "vmfs6" };
+      expect($scope.canPerformActionOnDatastoreSet()).toBe(false);
+    });
+
+    it("return false if no device is selected", function() {
+      makeController();
+      $scope.addToExistingDatastore = false;
+      $scope.createNewDatastore = false;
+      $scope.selectedAvailableDatastores = [];
+      $scope.storageLayout = { id: "vmfs6" };
+      expect($scope.canPerformActionOnDatastoreSet()).toBe(false);
+    });
+
+    it("return true when conditions are matched", function() {
+      makeController();
+      $scope.addToExistingDatastore = false;
+      $scope.createNewDatastore = false;
+      $scope.selectedAvailableDatastores = [1];
+      $scope.storageLayout = { id: "vmfs6" };
+      expect($scope.canPerformActionOnDatastoreSet()).toBe(true);
+    });
+  });
+
+  describe("checkAddToDatastoreValid", function() {
+    it("selected disks are valid when that condition is true", function() {
+      makeController();
+      var selected = {
+        has_partitions: false
+      };
+      spyOn($scope, "getSelectedAvailable").and.returnValue([selected]);
+      expect($scope.addToDatastoreValid).toBe(false);
+      $scope.checkAddToDatastoreValid();
+      expect($scope.addToDatastoreValid).toBe(true);
+    });
+
+    it("selected disks are not valid disk has a partition", function() {
+      makeController();
+      var selected = {
+        has_partitions: true
+      };
+      spyOn($scope, "getSelectedAvailable").and.returnValue([selected]);
+      expect($scope.addToDatastoreValid).toBe(false);
+      $scope.checkAddToDatastoreValid();
+      expect($scope.addToDatastoreValid).toBe(false);
+    });
+
+    it("selected disks are not valid when no selected disks", function() {
+      makeController();
+      spyOn($scope, "getSelectedAvailable").and.returnValue([]);
+      expect($scope.addToDatastoreValid).toBe(false);
+      $scope.checkAddToDatastoreValid();
+      expect($scope.addToDatastoreValid).toBe(false);
+    });
+  });
+
+  describe("openAddToExistingDatastorePanel", function() {
+    it("sets 'addToExistingDatastore' to true", function() {
+      makeController();
+      $scope.addToExistingDatastore = false;
+      $scope.available = [
+        {
+          $selected: true,
+          id: 1
+        }
+      ];
+      $scope.openAddToExistingDatastorePanel();
+      expect($scope.addToExistingDatastore).toBe(true);
+    });
+
+    it("sets 'selectedAvailableDatastores' to selected", function() {
+      makeController();
+      $scope.datastores.old = [
+        {
+          $selected: true,
+          id: 1
+        }
+      ];
+      $scope.openAddToExistingDatastorePanel();
+      expect($scope.selectedAvailableDatastores).toEqual($scope.available);
+    });
+
+    it("sets 'datastores.old' to first disk", function() {
+      makeController();
+      $scope.openAddToExistingDatastorePanel();
+      expect($scope.datastores.old).toBe($scope.node.disks[0]);
+    });
+  });
+
+  describe("closeAddToExistingDatastorePanel", function() {
+    it("sets 'addToExistingDatastore' to false", function() {
+      makeController();
+      $scope.addToExistingDatastore = true;
+      $scope.closeAddToExistingDatastorePanel();
+      expect($scope.addToExistingDatastore).toBe(false);
+    });
+
+    it("sets, 'newDatasore' to '{}'", function() {
+      makeController();
+      $scope.datastores.new = { id: 1, name: "" };
+      $scope.closeAddToExistingDatastorePanel();
+      expect($scope.datastores.new).toEqual({});
+    });
+  });
+
+  describe("createDatastore", function() {
+    it("sets 'createNewDatastore' to true", function() {
+      makeController();
+      spyOn(MachinesManager, "createDatastore").and.callFake(function() {
+        var deferred = $q.defer();
+        return deferred.promise;
+      });
+      $scope.createNewDatastore = false;
+      $scope.createDatastore();
+      expect($scope.createNewDatastore).toBe(true);
+    });
+
+    it("calls 'MachinesManager.createDatastore'", function() {
+      makeController();
+      spyOn(MachinesManager, "createDatastore").and.callFake(function() {
+        var deferred = $q.defer();
+        return deferred.promise;
+      });
+      $scope.createDatastore();
+      expect(MachinesManager.createDatastore).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/maasserver/static/js/angular/directives/nodedetails/storage_datastores.js b/src/maasserver/static/js/angular/directives/nodedetails/storage_datastores.js
 new file mode 100644
index 0000000..d040063
--- /dev/null
+++ b/src/maasserver/static/js/angular/directives/nodedetails/storage_datastores.js
@@ -0,0 +1,9 @@
+function storageDatastores() {
+  const path = "static/partials/nodedetails/storage/datastores.html";
+  return {
+    restrict: "E",
+    templateUrl: `${path}?v=${MAAS_config.files_version}`
+  };
+}
+
+export default storageDatastores;
diff --git a/src/maasserver/static/js/angular/entry.js b/src/maasserver/static/js/angular/entry.js
index 0cf83dc..cea8d08 100644
--- a/src/maasserver/static/js/angular/entry.js
+++ b/src/maasserver/static/js/angular/entry.js
@@ -36,7 +36,8 @@ import {
 } from "./controllers/node_details_networking"; // TODO: fix export/namespace
 // prettier-ignore
 import {
-  removeAvailableByNew
+  removeAvailableByNew,
+  datastoresOnly
 } from "./controllers/node_details_storage"; // TODO: fix export/namespace
 // prettier-ignore
 import {
@@ -152,6 +153,7 @@ import ZonesListController from "./controllers/zones_list";
 import storageDisksPartitions
   from "./directives/nodedetails/storage_disks_partitions";
 import storageFilesystems from "./directives/nodedetails/storage_filesystems";
+import storageDatastores from "./directives/nodedetails/storage_datastores";
 import maasMachinesTable from "./directives/machines_table";
 import addMachine from "./directives/nodelist/add_machine";
 import maasAccordion from "./directives/accordion";
@@ -493,6 +495,7 @@ angular
   .filter("removeDefaultVLANIfVLAN", removeDefaultVLANIfVLAN)
   .filter("filterLinkModes", filterLinkModes)
   .filter("removeAvailableByNew", removeAvailableByNew)
+  .filter("datastoresOnly", datastoresOnly)
   .filter("filterSource", filterSource)
   .filter("ignoreSelf", ignoreSelf)
   .filter("removeNoDHCP", removeNoDHCP)
@@ -594,6 +597,7 @@ angular
   // directives
   .directive("storageDisksPartitions", storageDisksPartitions)
   .directive("storageFilesystems", storageFilesystems)
+  .directive("storageDatastores", storageDatastores)
   .directive("addMachine", addMachine)
   .directive("maasAccordion", maasAccordion)
   .directive("maasActionButton", maasActionButton)
diff --git a/src/maasserver/static/js/angular/factories/machines.js b/src/maasserver/static/js/angular/factories/machines.js
index c3c3a5b..e70b096 100644
--- a/src/maasserver/static/js/angular/factories/machines.js
+++ b/src/maasserver/static/js/angular/factories/machines.js
@@ -77,6 +77,21 @@ function MachinesManager(RegionConnection, NodesManager) {
     return RegionConnection.callMethod(method, params);
   };
 
+  MachinesManager.prototype.applyStorageLayout = function(params) {
+    var method = this._handler + ".apply_storage_layout";
+    return RegionConnection.callMethod(method, params);
+  };
+
+  MachinesManager.prototype.createDatastore = function(params) {
+    var method = this._handler + ".create_vmfs_datastore";
+    return RegionConnection.callMethod(method, params);
+  };
+
+  MachinesManager.prototype.updateDatastore = function(params) {
+    var method = this._handler + ".update_vmfs_datastore";
+    return RegionConnection.callMethod(method, params);
+  };
+
   return new MachinesManager();
 }
 
diff --git a/src/maasserver/static/js/angular/factories/tests/test_machines.js b/src/maasserver/static/js/angular/factories/tests/test_machines.js
index 26eff00..9d4f7b6 100644
--- a/src/maasserver/static/js/angular/factories/tests/test_machines.js
+++ b/src/maasserver/static/js/angular/factories/tests/test_machines.js
@@ -87,4 +87,56 @@ describe("MachinesManager", function() {
       );
     });
   });
+
+  describe("applyStorageLayout", function() {
+    it("calls apply_storage_layout", function() {
+      spyOn(RegionConnection, "callMethod");
+      var params = {
+        system_id: makeName("system-id"),
+        mount_point: makeName("/dir")
+      };
+      MachinesManager.applyStorageLayout(params);
+      expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+        "machine.apply_storage_layout",
+        params
+      );
+    });
+  });
+
+  describe("createDatastore", function() {
+    it("calls create_vmfs_datastore", function() {
+      spyOn(RegionConnection, "callMethod");
+      var params = {
+        system_id: makeName("system-id"),
+        block_devices: [1, 2, 3, 5],
+        partitions: [5, 6, 7, 8],
+        name: "New datastore"
+      };
+      MachinesManager.createDatastore(params);
+      expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+        "machine.create_vmfs_datastore",
+        params
+      );
+    });
+  });
+
+  describe("updateDatastore", function() {
+    it("calls update_vmfs_datastore", function() {
+      spyOn(RegionConnection, "callMethod");
+      var params = {
+        system_id: makeName("system-id"),
+        add_block_devices: [1, 2, 3, 4],
+        add_partitions: [5, 6, 7, 8],
+        remove_partitions: [],
+        remove_block_devices: [],
+        name: "New datastore",
+        vmfs_datastore_id: 1
+      };
+      MachinesManager.updateDatastore(params);
+      expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+        "machine.update_vmfs_datastore",
+        params
+      );
+    });
+  });
 });
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index d722404..5612ef2 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -69,7 +69,7 @@
                     <p class="page-header__message"><i class="p-icon--warning">Warning:</i> MAAS is not providing DHCP.</p>
                 </div>
             </div>
-            <div class="row ng-hide u-no-margin--top" data-ng-hide="isActionError() || isDeployError() || hasActionPowerError(action.option.name)">
+            <div class="row ng-hide u-no-margin--top" data-ng-hide="isActionError() || isDeployError() || isSSHKeyError() || hasActionPowerError(action.option.name)">
                 <!-- XXX blake_r 2015-02-19 - Need to add e2e test. -->
                 <div class="page-header__section">
                     <form class="p-form">
@@ -110,7 +110,7 @@
                                                     </label>
                                                     <span data-ng-if="!nodesManager.isModernUbuntu(osSelection)">
                                                         <i class="p-icon--warning"></i>
-                                                        <strong>Warning:</strong> Ubuntu 18.04 is the minimum required to create a KVM host. <a target="_blank"
+                                                        <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a target="_blank"
                                                         class="p-link--external"
                                                         href="https://docs.maas.io/2.5/en/manage-pods-webui#add-a-kvm-host">Learn more</a>
                                                     </span>
@@ -122,11 +122,6 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div data-ng-if="isSSHKeyWarning()" class="p-strip is-shallow u-no-padding--top">
-                                            <p class="u-remove-max-width">
-                                                <i class="p-icon--warning">Warning:</i> Login will not be possible because no SSH keys have been added to your account. To add an SSH key, visit <a href="account/prefs/">your account page</a>.
-                                            </p>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -172,7 +167,7 @@
                     </form>
                 </div>
             </div>
-            <div class="row ng-hide" data-ng-hide="isActionError() || isDeployError() || hasActionPowerError(action.option.name) || action.option.name !== 'commission'" data-ng-if="hasCustomCommissioningScripts()">
+            <div class="row ng-hide" data-ng-hide="isActionError() || isDeployError() || isSSHKeyError() || hasActionPowerError(action.option.name) || action.option.name !== 'commission'" data-ng-if="hasCustomCommissioningScripts()">
                 <div class="page-header__section">
                     <form class="p-form">
                         <div class="col-8">
@@ -184,7 +179,7 @@
                     </form>
                 </div>
             </div>
-            <div class="row u-no-margin--top ng-hide" data-ng-hide="isActionError() || isDeployError() || hasActionPowerError(action.option.name) || (action.option.name !== 'commission' && action.option.name !== 'test')">
+            <div class="row u-no-margin--top ng-hide" data-ng-hide="isActionError() || isDeployError() || isSSHKeyError() || hasActionPowerError(action.option.name) || (action.option.name !== 'commission' && action.option.name !== 'test')">
                 <hr />
                 <div class="page-header__section">
                     <form class="p-form">
@@ -197,7 +192,7 @@
                     </form>
                 </div>
             </div>
-            <div class="u-no-margin--top row ng-hide"  data-ng-hide="isActionError() || isDeployError() || hasActionPowerError(action.option.name)" data-ng-if="action.option.name === 'commission' || action.option.name === 'test' && !action.showing_confirmation">
+            <div class="u-no-margin--top row ng-hide"  data-ng-hide="isActionError() || isDeployError() || isSSHKeyError() || hasActionPowerError(action.option.name)" data-ng-if="action.option.name === 'commission' || action.option.name === 'test' && !action.showing_confirmation">
                 <hr />
                 <div class="page-header__section col-12">
                     <form class="p-form">
@@ -219,18 +214,18 @@
                     <div data-ng-repeat="confirmation_detail in action.confirmation_details">
                         <span>{$ confirmation_detail $}</span>
                     </div>
-		    <div class="u-equal-height">
-			<div class="col-9 u-vertically-center">
-			    <p class="u-remove-max-width">
-				Are you sure you want to {$ action.actionOption.name $} this {$ type_name $}?
-			    </p>
-			</div>
-			<div class="col-3">
-			    <div class="u-align--right">
-				<button class="p-button--base" data-ng-click="actionCancel()">No</button>
-				<button class="p-button--negative" data-ng-click="actionGo()">Yes</button>
-			    </div>
-			</div>
+            <div class="u-equal-height">
+            <div class="col-9 u-vertically-center">
+                <p class="u-remove-max-width">
+                Are you sure you want to {$ action.actionOption.name $} this {$ type_name $}?
+                </p>
+            </div>
+            <div class="col-3">
+                <div class="u-align--right">
+                <button class="p-button--base" data-ng-click="actionCancel()">No</button>
+                <button class="p-button--negative" data-ng-click="actionGo()">Yes</button>
+                </div>
+            </div>
                     </div>
                 </div>
             </div>
@@ -273,6 +268,18 @@
                     </div>
                 </div>
             </div>
+            <div class="row u-equal-height ng-hide" data-ng-show="!isDeployError() && isSSHKeyError()">
+                <div class="col-9 u-vertically-center">
+                    <p class="u-remove-max-width">
+                        <i class="p-icon--error">Error:</i> Node cannot be {$ action.option.sentence $}, because an SSH key has not been added to your account. To add an SSH key, visit <a href="account/prefs/">your account page</a>.
+                    </p>
+                </div>
+                <div class="col-3">
+                    <div class="u-align--right">
+                        <button class="p-button--base" data-ng-click="actionCancel()">Cancel</button>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <nav class="p-tabs u-hr--fixed-width">
@@ -394,97 +401,97 @@
     </div>
     <div class="p-strip is-shallow">
         <div class="row u-equal-height" data-ng-if="isDevice">
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
             <div maas-card-loader="device"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
             <div maas-card-loader="tags"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="node.node_type == 3">
-          <div class="col-4 p-card--highlighted action-card u-border--solid">
+            <div class="col-4 p-card--highlighted action-card u-border--solid">
             <div maas-card-loader="services"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
             <div maas-card-loader="controller"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
             <div maas-card-loader="hardware_info"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="node.node_type == 3">
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
             <div maas-card-loader="cpu"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
             <div maas-card-loader="memory"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
             <div maas-card-loader="storage"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="node.node_type == 3">
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
             <div maas-card-loader="tags"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="node.node_type == 2 || node.node_type == 4">
-          <div class="col-4 p-card--highlighted action-card u-border--solid">
+            <div class="col-4 p-card--highlighted action-card u-border--solid">
             <div maas-card-loader="services"></div>
-          </div>
-          <div class="col-8">
+            </div>
+            <div class="col-8">
             <div class="row u-equal-height">
-              <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+                <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
                 <div maas-card-loader="images"></div>
-              </div>
-              <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+                </div>
+                <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
                 <div maas-card-loader="controller"></div>
-              </div>
+                </div>
             </div>
             <div class="row u-equal-height">
-              <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+                <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
                 <div maas-card-loader="hardware_info"></div>
-              </div>
-              <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
+                </div>
+                <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid">
                 <div maas-card-loader="tags"></div>
-              </div>
+                </div>
+            </div>
             </div>
-          </div>
         </div>
         <div class="row u-equal-height" data-ng-if="node.node_type == 2 || node.node_type == 4">
-          <div class="col-4 p-card--highlighted action-card u-border--solid" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
+            <div class="col-4 p-card--highlighted action-card u-border--solid" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
             <div maas-card-loader="cpu"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
             <div maas-card-loader="memory"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
             <div maas-card-loader="storage"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="!isDevice && !isController">
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController" data-ng-class="{ 'is-error': node.cpu_test_status === 3 }">
             <div maas-card-loader="cpu"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController" data-ng-class="{ 'is-error': node.memory_test_status === 3 }">
             <div maas-card-loader="memory"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="node.node_type != 3" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="node.node_type != 3" data-ng-class="{ 'is-error': node.storage_test_status === 3 }">
             <div maas-card-loader="storage"></div>
-          </div>
+            </div>
         </div>
         <div class="row u-equal-height" data-ng-if="!isDevice && !isController">
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
             <div maas-card-loader="machine"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
             <div maas-card-loader="hardware_info"></div>
-          </div>
-          <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
+            </div>
+            <div class="col-4 p-card--highlighted action-card action-card--positionable u-border--solid" data-ng-if="!isController">
             <div maas-card-loader="tags"></div>
-          </div>
+            </div>
+        </div>
         </div>
-      </div>
     </section>
     <section class="p-strip" data-ng-if="section.area === 'containers'">
         <div class="row">
@@ -839,7 +846,7 @@
                                 </td>
                                 <td>
                                     <div class="u-no-margin--top" data-ng-repeat="subnet in vlanRow['subnets']">
-                                      <a href="#/subnet/{$ subnet.id $}" title="{$ getSubnetText(subnet) $}">{$ getSubnetText(subnet) $}</a>
+                                        <a href="#/subnet/{$ subnet.id $}" title="{$ getSubnetText(subnet) $}">{$ getSubnetText(subnet) $}</a>
                                     </div>
                                 </td>
                                 <td>
@@ -2890,105 +2897,197 @@
             </form>
         </div>
     </section>
-    <section class="p-strip" data-ng-if="section.area === 'storage'">
-        <form data-ng-controller="NodeStorageController">
-            <div class="row">
-                <div class="col-12">
-                    <div class="p-notification--negative ng-hide" data-ng-hide="has_disks">
-                        <p class="p-notification__response">
-                            <span class="p-notification__status">Error:</span> No storage information. Commissioning this node will gather the storage information.
-                        </p>
-                    </div>
-                    <div class="p-notification ng-hide" data-ng-show="isAllStorageDisabled() && canEdit()">
-                        <p class="p-notification__response">Storage configuration cannot be modified unless the machine is Ready or Allocated.</p>
-                    </div>
-                    <div class="p-notification ng-hide" data-ng-show="!isUbuntuOS() && !isCentOS()">
-                        <p class="p-notification__response">Custom storage configuration is only supported on Ubuntu, CentOS, and RHEL.</p>
-                    </div>
-                    <div class="p-notification ng-hide" data-ng-show="!isUbuntuOS()">
-                        <p class="p-notification__response">Bcache and ZFS are only supported on Ubuntu.</p>
+
+    <section class="p-strip is-shallow" data-ng-if="section.area === 'storage'" data-ng-controller="NodeStorageController">
+        <div class="row">
+            <div class="col-12">
+                <div class="p-notification--negative ng-hide" data-ng-hide="has_disks">
+                    <p class="p-notification__response">
+                        <span class="p-notification__status">Error:</span> No storage information. Commissioning this node will gather the storage information.
+                    </p>
+                </div>
+                <div class="p-notification ng-hide" data-ng-show="isAllStorageDisabled() && canEdit()">
+                    <p class="p-notification__response">Storage configuration cannot be modified unless the machine is Ready or Allocated.</p>
+                </div>
+                <div class="p-notification ng-hide" data-ng-show="!isUbuntuOS() && !isCentOS()">
+                    <p class="p-notification__response">Custom storage configuration is only supported on Ubuntu, CentOS, and RHEL.</p>
+                </div>
+                <div class="p-notification ng-hide" data-ng-show="!isUbuntuOS()">
+                    <p class="p-notification__response">Bcache and ZFS are only supported on Ubuntu.</p>
+                </div>
+                <div data-ng-repeat="issue in node.storage_layout_issues" class="p-notification--negative ng-hide" data-ng-show="hasStorageLayoutIssues()">
+                    <p class="p-notification__response">
+                        <span class="p-notification__status">Error:</span> {$ issue $}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="p-strip u-no-padding--bottom" data-ng-if="section.area === 'storage'" data-ng-controller="NodeStorageController">
+        <form>
+            <div data-ng-if="node.status_code === 4 || node.status_code === 10">
+                <div class="row" data-ng-if="!confirmStorageLayout">
+                    <div class="col-12 prefix-9 u-sv3">
+                        <div class="p-form__group u-align--right">
+                            <div data-ng-if="storageLayoutIsDisabled(osFamily.layouts) && storageLayoutIsDisabled(osFamily.layouts)">
+                                <button class="p-button--neutral" disabled>Change storage layout</button>
+                            </div>
+                            <div data-ng-if="!(storageLayoutIsDisabled(osFamily.layouts) && storageLayoutIsDisabled(osFamily.layouts))">
+                                <div class="p-contextual-menu" toggle-ctrl>
+                                    <button class="p-button--neutral p-contextual-menu__toggle u-no-margin--bottom" data-ng-click="toggleMenu()">
+                                        <span data-ng-if="!updatingStorageLayout">
+                                            Change storage layout&nbsp;
+                                            <i class="p-icon--chevron" data-ng-class="{'u-rotate':isToggled}"></i>
+                                        </span>
+
+                                        <span data-ng-if="updatingStorageLayout">
+                                            <i class="p-icon--spinner u-animation--spin"></i>
+                                            &nbsp;
+                                            Updating storage layout&hellip;
+                                        </span>
+                                    </button>
+                                    <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">
+                                        <button class="p-contextual-menu__link" data-ng-click="toggleMenu(); openStorageLayoutConfirm('flat')">Flat</button>
+                                        <button class="p-contextual-menu__link" data-ng-click="toggleMenu(); openStorageLayoutConfirm('lvm')">LVM</button>
+                                        <button class="p-contextual-menu__link" data-ng-click="toggleMenu(); openStorageLayoutConfirm('bcache')">bcache</button>
+                                        <hr class="u-no-margin--bottom"/>
+                                        <button class="p-contextual-menu__link" data-ng-click="toggleMenu(); openStorageLayoutConfirm('vmfs6')">VMFS6 (VMware ESXi)</button>
+                                        <hr class="u-no-margin--bottom"/>
+                                        <button class="p-contextual-menu__link" data-ng-click="toggleMenu(); openStorageLayoutConfirm('blank')">No storage (blank) layout</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div data-ng-repeat="issue in node.storage_layout_issues" class="p-notification--negative ng-hide" data-ng-show="hasStorageLayoutIssues()">
-                        <p class="p-notification__response">
-                            <span class="p-notification__status">Error:</span> {$ issue $}
-                        </p>
+                </div>
+                <div class="row" data-ng-if="confirmStorageLayout">
+                    <div class="p-card--highlighted">
+                        <div class="col-6 u-no-margin--left">
+                            <div class="p-notification--caution is-subtle" data-ng-if="newLayout.id === 'vmfs6'">
+                                <p class="p-notification__response">
+                                    <strong>Are you sure you want to change the storage layout to VMFS6?</strong><br />
+                                    Any changes done already will be discarded.<br />
+                                    This layout allows only for the deployment of <strong>VMware ESXi</strong> images.<br />
+                                    The storage layout will be applied to a node when it is deployed.
+                                </p>
+                            </div>
+                            <div class="p-notification--caution is-subtle" data-ng-if="newLayout.id === 'lvm'">
+                                <p class="p-notification__response">
+                                    <strong>Are you sure you want to change the storage layout to LVM?</strong><br />
+                                    Any changes done already will be lost.<br />
+                                    The storage layout will be applied to a node when it is deployed.
+                                </p>
+                            </div>
+                            <div class="p-notification--caution is-subtle" data-ng-if="newLayout.id === 'blank'">
+                                <p class="p-notification__response">
+                                    <strong>Are you sure you want to change this storage layout to blank?</strong><br />
+                                    Used disks will be returned to available, and any volume groups, raid sets, 
 caches, and filesystems removed.<br />
+                                    The storage layout will be applied to a node when it is deployed.
+                                </p>
+                            </div>
+                            <div class="p-notification--caution is-subtle" data-ng-if="newLayout.id !== 'lvm' && newLayout.id !== 'vmfs6' && newLayout.id !== 'blank'">
+                                <p class="p-notification__response">
+                                    <strong>Are you sure you want to change the storage layout to {$ newLayout.id $}?</strong><br />
+                                    Any changes done already will be lost.<br />
+                                    The storage layout will be applied to a node when it is deployed.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-6 u-align--right">
+                            <button class="p-button--base"
+                                data-ng-click="closeStorageLayoutConfirm()">Cancel</button>
+                            <button class="p-button--negative"
+                                data-ng-click="updateStorageLayout(storageLayout)">
+                                Change storage layout
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div data-ng-controller="NodeFilesystemsController">
-                    <storage-filesystems></storage-filesystems>
+
+            <div class="p-strip">
+                <div class="row" data-ng-if="storageLayout.id === 'vmfs6'">
+                    <div data-ng-controller="NodeFilesystemsController">
+                        <storage-datastores></storage-datastores>
+                    </div>
                 </div>
-                <div data-ng-show="cachesets.length">
-                    <div class="row">
-                        <h3 class="p-heading--four">Available cache sets</h3>
+
+                <div class="row">
+                    <div data-ng-controller="NodeFilesystemsController" data-ng-if="storageLayout.id !== 'vmfs6'">
+                        <storage-filesystems></storage-filesystems>
                     </div>
-                    <div class="row">
-                        <table class="p-table-expanding">
-                            <thead>
-                                <tr>
-                                    <th class="col-2">Name</th>
-                                    <th class="col-3">Size</th>
-                                    <th class="col-4">Used by</th>
-                                    <th class="col-2">
-                                        <div class="u-align--right">Actions</div>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr data-ng-repeat="cacheset in cachesets" data-ng-class="{ 'is-active': cacheset.$selected }">
-                                    <td class="col-2" aria-label="Name" title="{$ cacheset.name $}">{$ cacheset.name $}</td>
-                                    <td class="col-3" aria-label="Size" title="{$ cacheset.size_human $}">{$ cacheset.size_human $}</td>
-                                    <td class="col-4" aria-label="Used by" title="{$ cacheset.used_by $}">{$ cacheset.used_by $}</td>
-                                    <td class="col-2 p-table--action-cell">
-                                        <div class="u-align--right">
-                                        <div class="p-contextual-menu" toggle-ctrl data-ng-if="canDeleteCacheSet(cacheset) && !cacheset.$selected">
-                                            <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()">
-                                                <i class="p-icon--contextual-menu u-no-margin--right">Actions</i>
-                                            </button>
-                                            <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">
-                                                <button class="p-contextual-menu__link"
-                                                    aria-label="Remove"
-                                                    data-ng-show="canDeleteCacheSet(cacheset)"
-                                                    data-ng-click="toggleMenu(); quickCacheSetDelete(cacheset)">Remove&hellip;</button>
-                                            </div>
-                                        </div>
-                                        </div>
-                                    </td>
-                                    <td class="p-table-expanding__panel col-12" data-ng-if="cacheset.$selected && cachesetsMode === 'delete'">
-                                        <div class="row" data-ng-if="windowWidth <= 768">
-                                            <div class="col-8">
-                                                <h2 data-ng-click="filesystemCancel()" class="p-heading--four">
-                                                    <span data-ng-if="cachesetsMode === 'delete'">Removing {$ cacheset.name $}</span>
-                                                </h2>
+                    <div data-ng-show="cachesets.length">
+                        <div class="row">
+                            <h3 class="p-heading--four">Available cache sets</h3>
+                        </div>
+                        <div class="row">
+                            <table class="p-table-expanding">
+                                <thead>
+                                    <tr>
+                                        <th class="col-2">Name</th>
+                                        <th class="col-3">Size</th>
+                                        <th class="col-4">Used by</th>
+                                        <th class="col-2">
+                                            <div class="u-align--right">Actions</div>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr data-ng-repeat="cacheset in cachesets" data-ng-class="{ 'is-active': cacheset.$selected }">
+                                        <td class="col-2" aria-label="Name" title="{$ cacheset.name $}">{$ cacheset.name $}</td>
+                                        <td class="col-3" aria-label="Size" title="{$ cacheset.size_human $}">{$ cacheset.size_human $}</td>
+                                        <td class="col-4" aria-label="Used by" title="{$ cacheset.used_by $}">{$ cacheset.used_by $}</td>
+                                        <td class="col-2 p-table--action-cell">
+                                            <div class="u-align--right">
+                                            <div class="p-contextual-menu" toggle-ctrl data-ng-if="canDeleteCacheSet(cacheset) && !cacheset.$selected">
+                                                <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()">
+                                                    <i class="p-icon--contextual-menu u-no-margin--right">Actions</i>
+                                                </button>
+                                                <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">
+                                                    <button class="p-contextual-menu__link"
+                                                        aria-label="Remove"
+                                                        data-ng-show="canDeleteCacheSet(cacheset)"
+                                                        data-ng-click="toggleMenu(); quickCacheSetDelete(cacheset)">Remove&hellip;</button>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="row" data-ng-class="{ 'is-active': cachesetsMode !== null && cachesetsMode !== 'multi' }">
-                                            <div data-ng-show="cachesetsMode === 'single' && canDeleteCacheSet(cacheset)">
-                                                <button class="p-button--base"
-                                                    data-ng-show="canDeleteCacheSet(cacheset)"
-                                                    data-ng-click="cacheSetDelete()">Remove</button>
                                             </div>
-                                            <div class="row ng-hide" data-ng-show="cachesetsMode === 'delete'">
+                                        </td>
+                                        <td class="p-table-expanding__panel col-12" data-ng-if="cacheset.$selected && cachesetsMode === 'delete'">
+                                            <div class="row" data-ng-if="windowWidth <= 768">
                                                 <div class="col-8">
-                                                    <p><span class="p-icon--warning">Warning:</span> Are you sure you want to delete this cache set?</p>
+                                                    <h2 data-ng-click="filesystemCancel()" class="p-heading--four">
+                                                        <span data-ng-if="cachesetsMode === 'delete'">Removing {$ cacheset.name $}</span>
+                                                    </h2>
+                                                </div>
+                                            </div>
+                                            <div class="row" data-ng-class="{ 'is-active': cachesetsMode !== null && cachesetsMode !== 'multi' }">
+                                                <div data-ng-show="cachesetsMode === 'single' && canDeleteCacheSet(cacheset)">
+                                                    <button class="p-button--base"
+                                                        data-ng-show="canDeleteCacheSet(cacheset)"
+                                                        data-ng-click="cacheSetDelete()">Remove</button>
                                                 </div>
-                                                <div class="col-4">
-                                                    <div class="u-align--right">
-                                                        <button class="p-button--base" type="button" data-ng-click="cacheSetCancel()">Cancel</button>
-                                                        <button class="p-button--negative u-no-margin--top" data-ng-click="cacheSetConfirmDelete(cacheset)">Remove cache set</button>
+                                                <div class="row ng-hide" data-ng-show="cachesetsMode === 'delete'">
+                                                    <div class="col-8">
+                                                        <p><span class="p-icon--warning">Warning:</span> Are you sure you want to delete this cache set?</p>
+                                                    </div>
+                                                    <div class="col-4">
+                                                        <div class="u-align--right">
+                                                            <button class="p-button--base" type="button" data-ng-click="cacheSetCancel()">Cancel</button>
+                                                            <button class="p-button--negative u-no-margin--top" data-ng-click="cacheSetConfirmDelete(cacheset)">Remove cache set</button>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div>
+                        <storage-disks-partitions></storage-disks-partitions>
                     </div>
-                </div>
-                <div>
-                    <storage-disks-partitions></storage-disks-partitions>
                 </div>
             </div>
         </form>
diff --git a/src/maasserver/static/partials/nodedetails/storage/datastores.html b/src/maasserver/static/partials/nodedetails/storage/datastores.html
 new file mode 100644
index 0000000..28984c8
--- /dev/null
+++ b/src/maasserver/static/partials/nodedetails/storage/datastores.html
@@ -0,0 +1,112 @@
+<div class="p-strip is-shallow">
+  <h3 class="p-heading--four">Datastores</h3>
+
+  <table class="p-table-expanding p-table--datastores col-12" role="grid">
+    <thead>
+      <tr class="p-table__row">
+        <th scope="col" aria-sort="none" class="p-table__cell">Name</th>
+        <th scope="col" aria-sort="none" class="p-table__cell">Filesystem</th>
+        <th scope="col" aria-sort="none" class="p-table__cell">Size</th>
+        <th scope="col" aria-sort="none" class="p-table__cell">Mount point</th>
+        <th scope="col" aria-sort="none" class="p-table__cell u-align--right">Actions</th>
+        <th class="u-hide">
+          <!-- empty cell for validation -->
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr data-ng-hide="node.disks.length" class="col-12">
+        <td>
+          No datastores defined.
+        </td>
+      </tr>
+      <tr class="p-table__row" data-ng-repeat="filesystem in node.disks" data-ng-class="{ 'is-active': filesystem.$selected }" data-ng-if="filesystem.used_for == 'VMFS Datastore'">
+        <td role="gridcell" class="p-table__cell" aria-label="Name" title="{$ filesystem.name $}">{$ filesystem.name $}</td>
+        <td role="gridcell" class="p-table__cell" aria-label="Filesystem" title="VMFS6">VMFS6</td>
+        <td role="gridcell" class="p-table__cell" aria-label="Size" title="{$ filesystem.size_human $}">{$ filesystem.size_human $}</td>
+        <td role="gridcell" class="p-table__cell" aria-label="Mount point" title="{$ filesystem.path $}">{$ filesystem.path $}</td>
+        <td role="gridcell" class="p-table__cell p-table--action-cell u-align--right">
+          <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllStorageDisabled()">
+            <button class="p-button--base p-contextual-menu__toggle" aria-controls="#{$ item.name $}-menu"
+              data-ng-click="toggleMenu()" aria-haspopup="true">
+              <i class="p-icon--contextual-menu">Actions</i>
+            </button>
+            <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled" id="{$ item.name $}-menu">
+              <button class="p-contextual-menu__link" aria-label="Remove"
+                data-ng-click="toggleMenu(); quickFilesystemDelete(filesystem)"
+                data-ng-show="!isAllStorageDisabled() && filesystemMode !== 'delete'">Remove&hellip;</button>
+            </div>
+          </div>
+        </td>
+        <td class="p-table-expanding__panel--bordered"
+          data-ng-if="filesystem.$selected && filesystemMode === 'delete'"
+          aria-hidden="!filesystem.$selected && filesystemMode !== 'delete'">
+          <div class="row u-flex--no-wrap" data-ng-if="windowWidth <= 768">
+            <h2 data-ng-click="filesystemCancel()" class="p-heading--four">
+              <span data-ng-if="filesystemMode === 'delete'">Removing {$ filesystem.name $}</span>
+            </h2>
+            <button class="p-button--close" data-ng-click="filesystemCancel()"><span
+                class="p-icon--close">Cancel</span></button>
+          </div>
+          <div data-ng-if="filesystemMode !== null && filesystemMode !== 'multi'"
+            data-ng-class="{ 'is-active': filesystemMode !== null && filesystemMode !== 'multi' }">
+            <div data-ng-if="filesystemMode === 'delete'" class="p-space-between">
+              <p><span class="p-icon--warning">Warning:</span> Are you sure you want to remove this {$
+                getRemoveTypeText(filesystem) $}?</p>
+              <div class="p-space-between__align-right">
+                <button class="p-button--base u-width--auto" type="button"
+                  data-ng-click="filesystemCancel(filesystem)">Cancel</button>
+                <button class="p-button--negative u-width--auto"
+                  data-ng-click="filesystemConfirmDelete(filesystem)">Remove</button>
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+
+      <tr class="is-active p-table__row" data-ng-if="dropdown" data-ng-switch="dropdown">
+        <!-- Adding a new TMPFS or RAMFPS filesystem -->
+        <td class="p-table-expanding__panel" data-ng-controller="NodeAddSpecialFilesystemController"
+          data-ng-switch-when="special">
+          <maas-obj-form obj="newFilesystem" manager="machineManager" manager-method="mountSpecialFilesystem"
+            inline="false" save-on-blur="false" after-save="cancel">
+            <div class="row" data-ng-if="windowWidth <= 768">
+              <div class="u-flex--no-wrap">
+                <h2 data-ng-click="cancel()" class="u-align--left p-heading--four">Adding filesystem</h2>
+                <button class="p-button--close" data-ng-click="cancel()" type="button">
+                  <i class="p-icon--close">Cancel</i></button>
+              </div>
+            </div>
+            <div class="row p-form p-form--stacked">
+              <div class="col-6">
+                <div class="p-form__group">
+                  <label class="p-form__label mobile-col-2">Description</label>
+                  <div class="p-form__control p-form__control--placeholder mobile-col-2">
+                    <span data-ng-bind="description"></span>
+                  </div>
+                </div>
+                <maas-obj-field type="options" key="fstype" label="Filesystem" subtle="false"
+                  options="type for type in specialFilesystemTypes"></maas-obj-field>
+              </div>
+              <div class="col-6">
+                <maas-obj-field type="text" key="mount_point" label="Mount point" subtle="false"
+                  placeholder="Absolute path"></maas-obj-field>
+                <maas-obj-field type="text" key="mount_options" label="Mount options" subtle="false"
+                  placeholder="Separated by commas, no spaces"></maas-obj-field>
+              </div>
+            </div>
+            <hr>
+            <div class="p-space-between">
+              <maas-obj-errors></maas-obj-errors>
+              <div class="p-space-between__align-right">
+                <button class="p-button--base u-width--auto" type="button" data-ng-click="cancel()">Cancel</button>
+                <button class="p-button--neutral  u-width--auto ng-binding" data-ng-disabled="!canMount()"
+                  maas-obj-save>Mount</button>
+              </div>
+            </div>
+          </maas-obj-form>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 \ No newline at end of file
diff --git a/src/maasserver/static/partials/nodedetails/storage/disks-partitions.html b/src/maasserver/static/partials/nodedetails/storage/disks-partitions.html
index 8f85fc7..041f4ae 100644
--- a/src/maasserver/static/partials/nodedetails/storage/disks-partitions.html
+++ b/src/maasserver/static/partials/nodedetails/storage/disks-partitions.html
@@ -4,27 +4,25 @@
         <table class="p-table-expanding p-table--disks-partitions col-12">
             <thead>
                 <tr class="p-table__row">
-                    <th class="col-3">
-                        <div class="u-float--left">
-                            <input type="checkbox" class="checkbox u-float--left" id="available-check-all" data-ng-hide="isAvailableDisabled()" data-ng-checked="availableAllSelected"
-                            data-ng-click="toggleAvailableAllSelect()" data-ng-disabled="isAvailableDisabled()" />
-                            <label for="available-check-all"></label>
-                        </div>
-                        <a data-ng-click="tableInfo.column = 'name'" data-ng-class="{'p-link--soft': tableInfo.column === 'name'}">Name</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'model'" data-ng-class="{'p-link--soft': tableInfo.column === 'model'}">Model</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'serial'" data-ng-class="{'p-link--soft': tableInfo.column === 'serial'}">Serial</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'firmware_version'" data-ng-class="{'p-link--soft': tableInfo.column === 'firmware_version'}">Firmware</a>
+                    <th class="p-double-row p-table__cell">
+                        <div class="p-double-row__checkbox">&nbsp;</div>
+                        <div class="p-double-row__rows-container--checkbox">
+                            <div>Name</div>
+                            <div>Serial</div>
+                        </div>
+                    </th>
+                    <th class="p-double-row p-table__cell">
+                        <div>Model</div>
+                        <div>Firmware</div>
                     </th>
-                    <th class="col-1"><div class="u-align--center">Boot</div></th>
-                    <th class="col-1">Size</th>
-                    <th class="col-1">Type</th>
-                    <th class="col-2">Filesystem</th>
-                    <th class="col-2">Tags</th>
-                    <th class="col-1">Health</th>
-                    <th class="col-1"><div class="u-align--right">Actions</div></th>
+                    <th class="p-table__cell"><div class="u-align--center">Boot</div></th>
+                    <th class="p-table__cell">Size</th>
+                    <th class="col-3 p-double-row p-table__cell">
+                        <div>Type</div>
+                        <div>Tags</div>
+                    </th>
+                    <th class="p-table__cell">Health</th>
+                    <th class="p-table__cell"><div class="u-align--right">Actions</div></th>
                 </tr>
             </thead>
             <tbody>
@@ -34,32 +32,34 @@
                     </td>
                 </tr>
                 <tr class="p-table__row" data-ng-repeat="item in available | removeAvailableByNew:availableNew"
-                    data-ng-class="{ 'is-active': item.$selected }">
-                    <td class="col-3 p-form-validation" aria-label="Name"
+                    data-ng-class="{ 'is-active': item.$selected }" data-ng-if="item.parent_type !== 'vmfs6'">
+                    <td class="p-form-validation p-double-row p-table__cell" aria-label="Name"
                         data-ng-class="{ 'is-error': isNameInvalid(item) }">
-                        <div class="u-float--left">
-                            <input type="checkbox" class="checkbox u-float--left" id="{$ item.name $}"
-                            data-ng-hide="isAvailableDisabled()"
-                            data-ng-checked="item.$selected"
-                            data-ng-click="toggleAvailableSelect(item)"
-                            data-ng-disabled="isAvailableDisabled()" />
-                            <label for="{$ item.name $}">
-                                <span data-ng-show="tableInfo.column === 'name'"
-                                data-ng-hide="availableMode === 'edit' && item.$selected"
-                                title="{$ item.name $}">{$ item.name $}</span>
-                            </label>
-                        </div>
-                        <span data-ng-show="tableInfo.column === 'model'" title="{$ item.model $}">{$ item.model $}</span>
-                        <span data-ng-show="tableInfo.column === 'serial'" title="{$ item.serial $}">{$ item.serial $}</span>
-                        <span data-ng-show="tableInfo.column === 'firmware_version'" title="{$ item.firmware_version $}">{$ item.firmware_version $}</span>
-                        <input type="text" class="p-form-validation__input"
-                            data-ng-model="item.name"
-                            data-ng-show="availableMode === 'edit' && item.$selected"
-                            data-ng-disabled="item.type === 'partition' || isAllStorageDisabled() || !canEdit()"
-                            data-ng-change="nameHasChanged(item)">
+                        <div class="p-double-row__checkbox">
+                            <input type="checkbox" class="checkbox u-float--left" id="{$ item.name $}" data-ng-hide="isAvailableDisabled()" data-ng-checked="item.$selected" data-ng-click="toggleAvailableSelect(item)" data-ng-disabled="isAvailableDisabled()" />
+                            <label for="{$ item.name $}"></label>
+                        </div>
+                        <div class="p-double-row__rows-container--checkbox">
+                            <div class="p-double-row__main-row">
+                                {$ item.name $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                {$ item.serial $}
+                            </div>
+                        </div>
                     </td>
-                    <td class="col-1" aria-label="Boot">
-                        <div class="u-align--center">
+                    <td class="p-double-row p-table__cell">
+                        <div class="p-double-row__container">
+                            <div class="p-double-row__main-row">
+                                {$ item.model $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                {$ item.firmware_version $}
+                            </div>
+                        </div>
+                    </td>
+                    <td class="p-table__cell" aria-label="Boot">
+                        <div class="u-align--center" data-ng-if="storageLayout.id !== 'vmfs6'">
                             <input type="radio" name="boot-disk" id="{$ item.name $}-boot" class="u-no-margin--right"
                                 data-ng-click="setAsBootDisk(item)"
                                 data-ng-checked="item.is_boot"
@@ -69,30 +69,31 @@
                             <label for="{$ item.name $}-boot" data-ng-hide="availableMode === 'edit' && item.$selected"></label>
                         </div>
                     </td>
-                    <td class="col-1" aria-label="Size">
+                    <td class="p-table__cell" aria-label="Size">
                         <span data-ng-hide="availableMode === 'edit' && item.$selected" title="{$ item.size_human $}">
-                            {$ item.size_human $} <span class="table__label ng-hide" data-ng-show="showFreeSpace(item)">Free: {$ item.available_size_human $}</span>
+                            {$ item.size_human $} <span class="table__labeldatastore-name ng-hide" data-ng-show="showFreeSpace(item)">Free: {$ item.available_size_human $}</span>
                         </span>
                     </td>
-                    <td class="col-1" aria-label="type">
-                        <span data-ng-hide="availableMode === 'edit' && item.$selected" title="{$ getDeviceType(item) $}">{$ getDeviceType(item) $}</span>
-                    </td>
-                    <td class="col-2" aria-label="Filesystem">
-                        <span data-ng-hide="availableMode === 'edit' && item.$selected" title="{$ item.fstype $}">{$ item.fstype $}</span>
-                    </td>
-                    <td class="col-2" aria-label="Tags">
-                        <span class="table__tag" data-ng-repeat="tag in item.tags" data-ng-hide="item.$options.editingTags">
-                            <a href="#/machines/?query=storage_tags:({$ tag.text $})" title="{$ tag.text $}">{$ tag.text $}</a>
-                        </span>
+                    <td class="p-double-row p-table__cell" aria-label="type">
+                        <div class="p-double-rows__container">
+                            <div class="p-double-row__main-row">
+                                {$ getDeviceType(item) $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                <span class="table__tag" data-ng-repeat="tag in item.tags" data-ng-hide="item.$options.editingTags">
+                                    <a href="#/machines/?query=storage_tags:({$ tag.text $})" title="{$ tag.text $}">{$ tag.text $}</a>
+                                </span>
+                            </div>
+                        </div>
                     </td>
-                    <td class="col-1" aria-label="Health">
+                    <td class="p-table__cell" aria-label="Health">
                         <span data-maas-script-status="script-status" data-script-status="item.test_status" data-ng-if="item.type === 'physical'"></span>
                         <span data-ng-if="item.test_status === 0 || item.test_status === 1 || item.test_status === 2 || item.test_status === 5 || item.test_status === 7" title="Ok">Ok</span>
                         <span data-ng-if="item.test_status === 3 || item.test_status === 4 || item.test_status === 8" title="Error">Error</span>
                         <span data-ng-if="item.test_status === 6" title="Degraded">Degraded</span>
                         <span data-ng-if="item.test_status === -1" title="Unknown">Unknown</span>
                     </td>
-                    <td class="col-1 p-table--action-cell">
+                    <td class="p-table--action-cell p-table__cell">
                         <div class="u-align--right">
                             <div class="p-contextual-menu" toggle-ctrl
                                 data-ng-if="canAddLogicalVolume(item) || canAddPartition(item) || canEdit(item) || canDelete(item)">
@@ -463,7 +464,7 @@
                                 <label class="checkbox-label" for="bcache-create"></label>
                             </div>
                             <div class="u-float--left p-form-validation"
-                                data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                 <input type="text" class="p-form-validation__input"
                                     data-ng-model="availableNew.name">
                             </div>
@@ -481,7 +482,7 @@
                             <div class="row">
                                 <div class="col-6">
                                     <div class="p-form__group u-hide--large p-form-validation"
-                                        data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                        data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                         <label for="bcache-name" class="p-form__label">Name</label>
                                         <div class="p-form__control">
                                             <input type="text" id="bcache-name" data-ng-model="availableNew.name"
@@ -600,7 +601,7 @@
                                 <label for="raid-create"></label>
                             </div>
                             <div class="u-float--left p-form-validation"
-                                data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                 <input type="text" class="p-form-validation__input"
                                     data-ng-model="availableNew.name">
                             </div>
@@ -619,7 +620,7 @@
                                 <div class="col-6">
                                     <div class="p-form__group u-hide--medium u-hide--large">
                                         <label for="new-raid-name" class="p-form__label">Name</label>
-                                        <div class="p-form__control" data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                        <div class="p-form__control" data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                             <input type="text" id="new-raid-name" data-ng-model="availableNew.name">
                                         </div>
                                     </div>
@@ -734,7 +735,7 @@
                                 <label for="vg-create"></label>
                             </div>
                             <div class="u-float--left p-form-validation"
-                                data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                 <input type="text" class="p-form-validation__input"
                                     data-ng-model="availableNew.name">
                             </div>
@@ -753,7 +754,7 @@
                                 <div class="col-6">
                                     <div class="p-form__group p-form-validation">
                                         <label for="new-vg-name" class="p-form__label">Name</label>
-                                        <div class="p-form__control" data-ng-class="{ 'is-error': isNewDiskNameInvalid() }">
+                                        <div class="p-form__control" data-ng-class="{ 'is-error': isNewDiskNameInvalid(availableNew.name) }">
                                             <input type="text" class="p-form-validation__input" id="new-vg-name" data-ng-model="availableNew.name">
                                         </div>
                                     </div>
@@ -806,57 +807,212 @@
                 </tr>
             </tbody>
         </table>
-        <button class="p-button--neutral p-tooltip p-tooltip--top-center"
-            data-ng-disabled="!canCreateRAID()"
-            data-ng-hide="isAllStorageDisabled() || !canEdit()"
-            data-ng-click="createRAID()">
-            Create RAID
-            <span class="p-tooltip__message" role="tooltip">Select two or more physical devices to create a RAID</span>
-        </button>
-        <button class="p-button--neutral p-tooltip p-tooltip--top-center"
-            data-ng-disabled="!canCreateVolumeGroup()"
-            data-ng-hide="isAllStorageDisabled() || !canEdit()"
-            data-ng-click="createVolumeGroup()">
-            Create volume group
-            <span class="p-tooltip__message" role="tooltip">Select one or more devices to create a volume group</span>
-        </button>
-        <button class="p-button--neutral p-tooltip p-tooltip--top-center"
-            data-ng-disabled="!canCreateCacheSet()"
-            data-ng-hide="isAllStorageDisabled() || !canEdit()"
-            data-ng-click="createCacheSet()">
-            Create cache Set
-            <span class="p-tooltip__message" role="tooltip">Select one device to create a cache set</span>
-        </button>
-        <button class="p-button--neutral p-tooltip--top-center"
-            data-ng-class="{ 'p-tooltip': !canCreateBcache() }"
-            data-ng-disabled="!canCreateBcache()"
-            data-ng-hide="isAllStorageDisabled() || !canEdit()"
-            data-ng-click="createBcache()">
-            Create bcache
-            <span class="p-tooltip__message" role="tooltip">{$ getCannotCreateBcacheMsg() $}</span>
-        </button>
+
+        <div class="p-card" data-ng-if="createNewDatastore">
+            <div class="row">
+                <div class="row p-form--stacked">
+                    <div class="col-6">
+                        <div class="p-form__group p-form-validation"
+                            data-ng-class="{ 'is-error': isNewDiskNameInvalid(datastores.new.name) }">
+                            <label for="datastore-name" class="p-form__label u-sv3">Name</label>
+                            <div class="p-form__control">
+                                <input type="text"
+                                    name="datastore-name"
+                                    id="datastore-name"
+                                    class="p-form-validation__input"
+                                    data-ng-model="datastores.new.name"
+                                    data-ng-keydown="$event.keyCode == 13 && !isNewDiskNameInvalid(datastores.new.name) && $event.preventDefault()"
+                                    data-ng-keyup="$event.keyCode == 13 && !isNewDiskNameInvalid(datastores.new.name) && createDatastore()">
+
+                                <p class="p-form-validation__message"
+                                    data-ng-if="isNewDiskNameInvalid(datastores.new.name) && datastores.new.name != ''">
+                                    <strong>Error:</strong> Disk name is already in use
+                                </p>
+                                <p class="p-form-validation__message"
+                                    data-ng-if="isNewDiskNameInvalid(datastores.new.name) && datastores.new.name == ''">
+                                    <strong>Error:</strong> Please enter a name for your new datastore
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="p-form__group">
+                            <label for="datastore-filesystem" class="p-form__label u-sv3">Filesystem</label>
+                            <div class="p-form__control">
+                                <p>{$ datastores.new.filesystem $}</p>
+                            </div>
+                        </div>
+                        <div class="p-form__group" data-ng-if="datastores.new.path">
+                            <label for="datastore-mountpoint" class="p-form__label">Mount point</label>
+                            <div class="p-form__control">
+                                <p>{$ datastores.new.path $}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="u-sv2">
+                    <hr />
+                </div>
+                <div class="u-align--right">
+                    <button class="p-button--neutral u-no-margin--bottom" data-ng-click="closeNewDatastorePanel()" data-ng-disabled="creatingDatastore">Cancel</button>
+                    <button class="p-button--positive u-no-margin--bottom" data-ng-click="createDatastore()" data-ng-if="!creatingDatastore" data-ng-disabled="isNewDiskNameInvalid(datastores.new.name)">
+                        Create datastore
+                    </button>
+                    <button class="p-button--positive u-no-margin--bottom" data-ng-if="creatingDatastore">
+                        <i class="p-icon--spinner is-light u-animation--spin"></i>
+                        &nbsp;
+                        Creating datastore
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="p-card" data-ng-if="addToExistingDatastore">
+            <div class="row p-form--stacked">
+                <div class="col-6">
+                    <div class="p-form__group">
+                        <label for="datastore-name" class="p-form__label u-sv3">Datastore</label>
+                        <div class="p-form__control">
+                            <select name="datastore-name" id="datastore-name"
+                                data-ng-model="datastores.old"
+                                data-ng-options="disk as disk.name for disk in node.disks | datastoresOnly">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="p-form__group">
+                        <label for="datastore-mountpoint" class="p-form__label">Mount point</label>
+                        <div class="p-form__control">
+                            <p>{$ datastores.old.path $}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="u-sv2">
+                <hr />
+            </div>
+            <div class="u-align--right">
+                <button class="p-button--neutral u-no-margin--bottom" data-ng-click="closeAddToExistingDatastorePanel()" data-ng-disabled="updatingDatastore">Cancel</button>
+                <span class="p-tooltip p-tooltip--top-right">
+                    <button class="p-button--positive u-no-margin--bottom"
+                        data-ng-click="addToDatastore()"
+                        data-ng-if="!updatingDatastore"
+                        data-ng-disabled="!addToDatastoreValid">
+                        Add to datastore
+                    </button>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="!addToDatastoreValid">Disks with partitions cannot be added to a datastore</span>
+                </span>
+                <button class="p-button--positive u-no-margin--bottom" data-ng-if="updatingDatastore">
+                    <i class="p-icon--spinner is-light u-animation--spin"></i>
+                    &nbsp;
+                    Adding to datastore
+                </button>
+            </div>
+        </div>
+
+        <div>
+            <span class="p-tooltip p-tooltip--top-left">
+                <button class="p-button--neutral"
+                    data-ng-disabled="!canCreateRAID() || storageLayout.id === 'vmfs6'"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-click="createRAID()">
+                    Create RAID
+                </button>
+                <span data-ng-if="!canCreateRAID()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">Select two or more physical devices to create a RAID</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Not supported in the VMFS6 layout</span>
+                </span>
+            </span>
+            <span class="p-tooltip p-tooltip--top-center">
+                <button class="p-button--neutral"
+                    data-ng-disabled="!canCreateVolumeGroup() || storageLayout.id === 'vmfs6'"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-click="createVolumeGroup()">
+                    Create volume group
+                </button>
+                <span data-ng-if="!canCreateVolumeGroup()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">Select one or more devices to create a volume group</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Not supported in the VMFS6 layout</span>
+                </span>
+            </span>
+            <span class="p-tooltip p-tooltip--top-center">
+                <button class="p-button--neutral"
+                    data-ng-disabled="!canCreateCacheSet() || storageLayout.id === 'vmfs6'"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-click="createCacheSet()">
+                    Create cache Set
+                </button>
+                <span data-ng-if="!canCreateCacheSet()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">Select one device to create a cache set</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Not supported in the VMFS6 layout</span>
+                </span>
+            </span>
+            <span class="p-tooltip p-tooltip--top-center">
+                <button class="p-button--neutral"
+                    data-ng-class="{ 'p-tooltip': !canCreateBcache() }"
+                    data-ng-disabled="!canCreateBcache() || storageLayout.id === 'vmfs6'"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-click="createBcache()">
+                    Create bcache
+                </button>
+                <span data-ng-if="!canCreateBcache()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">{$ getCannotCreateBcacheMsg() $}</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Not supported in the VMFS6 layout</span>
+                </span>
+            </span>
+            <span class="p-tooltip p-tooltip--top-center">
+                <button class="p-button--neutral"
+                    data-ng-click="openNewDatastorePanel()"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-disabled="!canPerformActionOnDatastoreSet()">
+                    Create new datastore
+                </button>
+                <span data-ng-if="!canPerformActionOnDatastoreSet()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Select one or more devices to create a datastore</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">Only available in the VMFS6 layout</span>
+                </span>
+            </span>
+            <span class="p-tooltip p-tooltip--top-center" data-ng-if="storageLayout.id === 'vmfs6'">
+                <button class="p-button--neutral"
+                    data-ng-click="openAddToExistingDatastorePanel()"
+                    data-ng-hide="isAllStorageDisabled() || !canEdit()"
+                    data-ng-disabled="!canPerformActionOnDatastoreSet()">
+                    Add to existing datastore
+                </button>
+                <span data-ng-if="!canPerformActionOnDatastoreSet()">
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id === 'vmfs6'">Select one or more devices to add an existing datastore</span>
+                    <span class="p-tooltip__message" role="tooltip" data-ng-if="storageLayout.id !== 'vmfs6'">Only available in the VMFS6 layout</span>
+                </span>
+            </span>
+        </div>
     </div>
 </div>
+
 <div class="p-strip is-shallow">
     <div class="row">
-        <hr>
         <h3 class="p-heading--four">Used disks and partitions</h3>
-        <table class="p-table-expanding">
+        <table class="p-table-expanding p-table--used-disks">
             <thead>
-                <tr>
-                    <th class="col-3">
-                        <a data-ng-click="tableInfo.column = 'name'" data-ng-class="{'p-link--soft': tableInfo.column === 'name'}">Name</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'model'" data-ng-class="{'p-link--soft': tableInfo.column === 'model'}">Model</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'serial'" data-ng-class="{'p-link--soft': tableInfo.column === 'serial'}">Serial</a>
-                        <span class="divide"> | </span>
-                        <a data-ng-click="tableInfo.column = 'firmware_version'" data-ng-class="{'p-link--soft': tableInfo.column === 'firmware_version'}">Firmware</a>
+                <tr class="p-table__row">
+                    <th class="p-double-row p-table__cell">
+                        <div>Name</div>
+                        <div>Serial</div>
+                    </th>
+                    <th class="p-double-row p-table__cell">
+                        <div>Model</div>
+                        <div>Firmware</div>
+                    </th>
+                    <th class="p-table__cell"><div class="u-align--center">Boot</div></th>
+                    <th class="p-table__cell">Size</th>
+                    <th class="p-double-row p-table__cell">
+                        <div>Type</div>
+                        <div>Tags</div>
+                    </th>
+                    <th class="p-table__cell">Health</th>
+                    <th class="p-double-row p-table__cell">
+                        <div>Used for</div>
+                        <div>Mount point</div>
                     </th>
-                    <th class="col-1"><div class="u-align--center">Boot</div></th>
-                    <th class="col-2">Device type</th>
-                    <th class="col-3">Used for</th>
-                    <th class="col-2">Health</th>
                 </tr>
             </thead>
             <tbody>
@@ -865,16 +1021,31 @@
                         No disk or partition has been fully utilized.
                     </td>
                 </tr>
-                <tr data-ng-repeat="item in used" class="table__row details__used">
-                    <td class="col-3" aria-label="Name">
-                        <span data-ng-show="tableInfo.column === 'name'" title="{$ item.name $}">{$ item.name $}</span>
-                        <span data-ng-show="tableInfo.column === 'model'" title="{$ item.model $}">{$ item.model $}</span>
-                        <span data-ng-show="tableInfo.column === 'serial'" title="{$ item.serial $}">{$ item.serial $}</span>
-                        <span data-ng-show="tableInfo.column === 'firmware_version'" title="{$ item.firmware_version $}">{$ item.firmware_version $}</span>
+                <tr data-ng-repeat="item in used" class="table__row details__used p-table__row">
+                    <td class="p-double-row p-table__cell" aria-label="Name">
+                        <div class="p-double-rows__container">
+                            <div class="p-double-row__main-row">
+                                {$ item.name $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                {$ item.serial $}
+                            </div>
+                        </div>
+                    </td>
+                    <td class="p-double-row p-table__cell">
+                        <div class="p-double-rows__container">
+                            <div class="p-double-row__main-row">
+                                {$ item.model $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                {$ item.firmware_version $}
+                            </div>
+                        </div>
                     </td>
-                    <td class="col-1" aria-label="Boot disk">
-                        <div class="u-align--center">
+                    <td aria-label="Boot disk" class="p-table__cell">
+                        <div class="u-align--center" data-ng-hide="item.parent_type !== 'vmfs6' && !item.is_boot">
                             <input type="radio" id="{$ item.name $}-boot" name="boot-disk"
+                                class="u-no-margin--right"
                                 data-ng-click="setAsBootDisk(item)"
                                 data-ng-checked="item.is_boot"
                                 data-ng-if="item.type === 'physical'"
@@ -882,19 +1053,46 @@
                             <label for="{$ item.name $}-boot"></label>
                         </div>
                     </td>
-                    <td class="col-2" aria-label="Device type" title="{$ getDeviceType(item) $}">{$ getDeviceType(item) $}</td>
-                    <td class="col-3" aria-label="Used for" title="{$ item.used_for $}">{$ item.used_for $}</td>
-                    <td class="col-2" aria-label="Health">
+                    <td class="p-table__cell">{$ item.size_human $}</td>
+                    <td class="p-double-row p-table__cell">
+                        <div class="p-double-rows__container">
+                            <div class="p-double-row__main-row">
+                                {$ getDeviceType(item) $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                <span class="table__tag" data-ng-repeat="tag in item.tags" data-ng-hide="item.$options.editingTags">
+                                    <a href="#/machines/?query=storage_tags:({$ tag.text $})" title="{$ tag.text $}">{$ tag.text $}</a>
+                                </span>
+                            </div>
+                        </div>
+                    </td>
+                    <td aria-label="Health" class="p-table__cell">
                         <span data-ng-if="item.type === 'physical'">
                             <span data-maas-script-status="script-status" data-script-status="item.test_status"></span>
-                            <span data-ng-if="item.test_status === 0 || item.test_status === 1 || item.test_status === 2 || item.test_status === 5 || item.test_status === 7" title="Ok">Ok</span>
-                            <span data-ng-if="item.test_status === 3 || item.test_status === 4 || item.test_status === 8" title="Error">Error</span>
+                            <span
+                                data-ng-if="item.test_status === 0 || item.test_status === 1 || item.test_status === 2 || item.test_status === 5 || item.test_status === 7"
+                                title="Ok">Ok</span>
+                            <span data-ng-if="item.test_status === 3 || item.test_status === 4 || item.test_status === 8"
+                                title="Error">Error</span>
                             <span data-ng-if="item.test_status === 6" title="Degraded">Degraded</span>
                             <span data-ng-if="item.test_status === -1" title="Unknown">Unknown</span>
                         </span>
                     </td>
+                    <td class="p-double-row p-table__cell" aria-label="Used for" title="{$ item.used_for $}">
+                        <div class="p-double-rows__container">
+                            <div class="p-double-row__main-row">
+                                {$ item.used_for $}
+                            </div>
+                            <div class="p-double-row__muted-row">
+                                {$ item.mount_point $}
+                            </div>
+                        </div>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
 </div>
+
+<p>Learn more about deploying <a href="https://docs.maas.io/en/installconfig-images" class="p-link--external" target="_blank">Windows</a></p>
+<p>Change the default layout in <a href="/MAAS/settings/storage/">Settings &rsaquo; Storage</a></p>
diff --git a/src/maasserver/static/partials/nodedetails/storage/filesystems.html b/src/maasserver/static/partials/nodedetails/storage/filesystems.html
index 340739e..908e7aa 100644
--- a/src/maasserver/static/partials/nodedetails/storage/filesystems.html
+++ b/src/maasserver/static/partials/nodedetails/storage/filesystems.html
@@ -110,7 +110,7 @@
             </tr>
         </tbody>
     </table>
-    <button class="p-button--neutral p-tooltip--top-center" data-ng-disabled="dropdown !== null" data-ng-class="{ 'p-tooltip': dropdown === null}"
+    <button class="p-button--neutral p-tooltip--top-left" data-ng-disabled="dropdown !== null" data-ng-class="{ 'p-tooltip': dropdown === null}"
         data-ng-if="!isAllStorageDisabled()" data-ng-click="addSpecialFilesystem()">
         Add special filesystem
         <span class="p-tooltip__message" role="tooltip">Create a tmpfs or ramfs filesystem</span>
diff --git a/src/maasserver/static/scss/_base_tables.scss b/src/maasserver/static/scss/_base_tables.scss
index 710e416..bfdd68e 100644
--- a/src/maasserver/static/scss/_base_tables.scss
+++ b/src/maasserver/static/scss/_base_tables.scss
@@ -40,7 +40,6 @@
       flex-basis: auto !important;
       flex-grow: 0;
       vertical-align: top;
-      padding-bottom: 0.05rem;
 
       &:first-of-type {
         padding-left: $sph-intra--condensed;
diff --git a/src/maasserver/static/scss/_patterns_notification.scss b/src/maasserver/static/scss/_patterns_notification.scss
index ab3dab2..65620d4 100644
--- a/src/maasserver/static/scss/_patterns_notification.scss
+++ b/src/maasserver/static/scss/_patterns_notification.scss
@@ -1,6 +1,7 @@
 @mixin maas-p-notifications {
   @include maas-notification;
   @include maas-notification-group;
+  @include maas-notification-subtle;
 }
 
 @mixin maas-notification-group {
@@ -23,3 +24,14 @@
     }
   }
 }
+
+@mixin maas-notification-subtle {
+  [class*="p-notification"].is-subtle {
+    background: transparent;
+    box-shadow: none;
+
+    &::before {
+      height: 0;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/_tables.scss b/src/maasserver/static/scss/_tables.scss
index 47738fd..6194abb 100644
--- a/src/maasserver/static/scss/_tables.scss
+++ b/src/maasserver/static/scss/_tables.scss
@@ -326,9 +326,12 @@
     }
   }
 
-  .p-table--disks-partitions {
+  .p-table--disks-partitions,
+  .p-table--used-disks {
     .p-table__row {
       .p-table__cell {
+        flex: 0 0 auto !important;
+
         &:nth-child(1) {
           width: 15%;
         }
@@ -346,22 +349,58 @@
         }
 
         &:nth-child(5) {
-          width: 12%;
+          width: 22%;
         }
 
         &:nth-child(6) {
+          width: 22%;
+        }
+
+        &:nth-child(7) {
           width: 10%;
         }
+      }
+    }
+  }
+
+  .p-table--used-disks {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(6) {
+          width: 7%;
+        }
 
         &:nth-child(7) {
-          width: 12%;
+          width: 25%;
         }
+      }
+    }
+  }
 
-        &:nth-child(8) {
-          width: 10%;
+  .p-table--datastores {
+    flex: 0 0 auto !important;
+
+    .p-table__row {
+      .p-table__cell {
+        flex: 0 0 auto !important;
+
+        &:nth-child(1) {
+          width: 15%;
+        }
+
+        &:nth-child(2) {
+          width: 22%;
         }
 
-        &:nth-child(9) {
+        &:nth-child(3) {
+          width: 9%;
+        }
+
+        &:nth-child(4) {
+          width: 44%;
+        }
+
+        &:nth-child(5) {
           width: 10%;
         }
       }
diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
index f6528d2..1724cf8 100644
--- a/src/maasserver/static/scss/_utils.scss
+++ b/src/maasserver/static/scss/_utils.scss
@@ -67,3 +67,7 @@ $table-h-indent: $sph-intra--condensed;
 .u-mirror--y {
   transform: rotate(180deg);
 }
+
+.u-rotate {
+  transform: rotate(180deg);
+}