Merge ~lyubomir-popov/maas:ellipsis into maas:master

[Lyubomir Popov]

Refactor the huge _tables.scss file;
implement horizontal 3-dot contextual menu icon;
replace ellipsis with a subtle fade

[Caleb Ellis (caleb-ellis)]

Just a few things need fixing:
- In table column header, text for IP is 14px but everywhere else is 12.25px.
- There's hanging markup on line 140 of machines-table.html. Can you please re-add it so you can view by MAC address (i.e. click on MAC)?
- Can you add a conditional class for p-table-menu if hideActions is true that makes it so hovering over a row does not truncate text if the chevron won't show.
  e.g. data-ng-class="{'is-hidden': hideActions}"
  Otherwise in the pod details machine list the text gets truncated on hover for no reason
https://user-images.githubusercontent.com/25733845/57619864-f21fa500-757e-11e9-8d2a-c8d5780e185e.png

review: Needs Fixing

[Andres Rodriguez (andreserl)]

This seems the type of refactoring we don't want to do right before we are about to release a Release Candidate or a Final release.

Since technically master is frozen with the exception of bug fixes, ESXi and Dismiss test work, is there a reason why this would need to land now?

review: Needs Information

[Lyubomir Popov (lyubomir-popov)]

Caleb thanks for catching those, should be all fixed now.
Andres just trying to get the functionality nailed, not insisting on merging this now.

[Andres Rodriguez (andreserl)]

master is now open for development, feel free to land!

review: Approve

[Lyubomir Popov (lyubomir-popov)]

Thanks, this is with a lower priority now, I will try to merge once the vanilla upgrades are complete.

5f7c8bd... by Lyubomir Popov on 2019-06-27

var-renaming

a541445... by Lyubomir Popov on 2019-06-27

fix merge issues and a rename

ffc26ed... by Lyubomir Popov on 2019-06-27

prettier

04d5042... by Lyubomir Popov on 2019-06-27

fixes

a992099... by Lyubomir Popov on 2019-06-27

fixes

[Lyubomir Popov (lyubomir-popov)]

This is ready for re-review.

[Anthony Dillon (ya-bo-ng)]

Looks good! Few comments inline and some QA issues:
- Hovers on table jump
- Machine names do not ellipse anymore

review: Needs Fixing

[MAAS Lander (maas-lander)]

UNIT TESTS
-b ellipsis lp:~lyubomir-popov/maas/+git/maas into -b master lp:~maas-committers/maas

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

review: Needs Fixing

Unmerged commits

a992099... by Lyubomir Popov on 2019-06-27

fixes

04d5042... by Lyubomir Popov on 2019-06-27

fixes

ffc26ed... by Lyubomir Popov on 2019-06-27

prettier

a541445... by Lyubomir Popov on 2019-06-27

fix merge issues and a rename

5f7c8bd... by Lyubomir Popov on 2019-06-27

var-renaming

c639846... by Lyubomir Popov <email address hidden> on 2019-05-08

refactor tables.scss; improve p-table-menu__toggle

remove duplicated code

remove redundant line

refactor selector for clarity

remove duplicate code; place all global vars in one place

refactor; hover fade of overflowing text fixes fix

move placeholders to top;adjust bg fade

replace fade and dots with chevron; refactor;

fix pool desc overflow

fix column alignment for cores; ip muted row fixes (wip
)

wip: ip, pxe, ipcount and truncation

remove bg color of ip count string

address feedback

fix interfaces double row wrapping regression

conditionally hide checkbox parent

diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html
index cb0f4fb..35cd7e4 100644
--- a/src/maasserver/static/partials/machines-table.html
+++ b/src/maasserver/static/partials/machines-table.html
@@ -1,19 +1,21 @@
 <table class="p-table--sortable p-table--machines" role="grid">
     <thead>
         <tr class="p-table__header p-table__row">
-            <th class="p-table__col--name p-double-row u-align--left">
-                <div class="p-double-row__checkbox" data-ng-if="!hideActions">
-                    <input class="checkbox" type="checkbox" data-ng-click="toggleCheckAll()" data-ng-checked="table.allViewableChecked" id="check-all" data-ng-disabled="ngDisabled()" />
-                    <label class="p-checkbox--action" for="check-all" ng-class="getAllCheckboxClass(table.filteredMachines)"></label>
-                </div>
-                <div class="p-double-row__rows-container--checkbox">
-                    <div>
-                        <span role="columnheader" data-ng-click="selectColumnOrSort('fqdn')" data-ng-class="{'is-active': table.column === 'fqdn', 'is-sorted': table.predicate === 'fqdn', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="FQDN">FQDN</span>
-                        |
-                        <span role="columnheader" data-ng-click="selectColumnOrSort('pxe_mac')" data-ng-class="{'is-active': table.column === 'pxe_mac', 'is-sorted': table.predicate === 'pxe_mac', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="MAC">MAC</span>
+            <th class="p-table__col--name p-double-row">
+                <div class="p-double-row__wrapper">
+                    <div class="p-double-row__checkbox" data-ng-if="!hideActions">
+                        <input class="checkbox" type="checkbox" data-ng-click="toggleCheckAll()" data-ng-checked="table.allViewableChecked" id="check-all" data-ng-disabled="ngDisabled()" />
+                        <label class="p-checkbox--action" for="check-all" ng-class="getAllCheckboxClass(table.filteredMachines)"></label>
                     </div>
-                    <div>
-                        <span role="columnheader" data-ng-click="sortTable('ip_addresses[0]')" data-ng-class="{'is-active': table.column === 'ip_addresses[0]', 'is-sorted': table.predicate === 'ip_addresses[0]', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="IP">IP</span>
+                    <div class="p-double-row__rows-container--checkbox">
+                        <div class="p-double-row__main-row">
+                            <span role="columnheader" data-ng-click="selectColumnOrSort('fqdn')" data-ng-class="{'is-active': table.column === 'fqdn', 'is-sorted': table.predicate === 'fqdn', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="FQDN">FQDN</span>
+                            |
+                            <span role="columnheader" data-ng-click="selectColumnOrSort('pxe_mac')" data-ng-class="{'is-active': table.column === 'pxe_mac', 'is-sorted': table.predicate === 'pxe_mac', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="MAC">MAC</span>
+                        </div>
+                        <div class="p-double-row__muted-header">
+                            <span role="columnheader" data-ng-click="sortTable('ip_addresses[0]')" data-ng-class="{'is-active': table.column === 'ip_addresses[0]', 'is-sorted': table.predicate === 'ip_addresses[0]', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="IP">IP</span>
+                        </div>
                     </div>
                 </div>
             </th>
@@ -21,11 +23,13 @@
                 <span class="u-hide--br3"><i class="p-icon--placeholder"></i>Power</span>
             </th>
             <th class="p-table__col--status p-double-row" title="Status">
-                <div class="p-double-row__icon-container">
-                    <i class="p-icon--placeholder"></i>
-                </div>
-                <div class="p-double-row__rows-container--icon">
-                    <span role="columnheader" data-ng-click="sortTable('status')" data-ng-class="{'is-sorted': table.predicate === 'status', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="Status">Status</span>
+                <div class="p-double-row__wrapper">
+                    <div class="p-double-row__icon-container">
+                        <i class="p-icon--placeholder"></i>
+                    </div>
+                    <div class="p-double-row__rows-container--icon">
+                        <span role="columnheader" data-ng-click="sortTable('status')" data-ng-class="{'is-sorted': table.predicate === 'status', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}" title="Status">Status</span>
+                    </div>
                 </div>
             </th>
             <th class="p-table__col--owner p-double-row" title="Owner, Tags">
@@ -65,7 +69,7 @@
                 'p-table__placeholder': group.label === 'none'
             }"
         >
-            <th class="p-table__group-label p-table__col--name p-double-row u-align--left">
+            <th class="p-table__group-label p-table__col--name p-double-row">
                 <input type="checkbox" id="{$ group.label $}" data-ng-click="toggleCheckGroup(group.label)" data-ng-checked="getGroupSelectedState(group.label)" />
                 <label class="p-checkbox--action u-no-margin--bottom" for="{$ group.label $}">{$ group.label $}</label>
                 <div class="p-muted-text">{$ getGroupCountString(group.label) $}</div>
@@ -98,33 +102,37 @@
                              'is-grouped': group.label !== 'none'
                             }">
             <td class="p-table__col--name p-double-row" aria-label="FQDN" data-ng-if="table.column === 'fqdn' || table.column === 'ip_address'">
-                <div class="p-double-row__checkbox" data-ng-if="!hideActions">
-                    <input type="checkbox" data-ng-click="toggleChecked(node)" data-ng-checked="node.$selected" id="{$ node.fqdn $}" data-ng-disabled="ngDisable()" />
-                    <label class="p-checkbox--action" for="{$ node.fqdn $}" ng-class="getCheckboxClass(node)"></label>
-                </div>
-                <div class="p-double-row__rows-container--checkbox">
-                    <div class="p-double-row__main-row">
-                        <a class="p-domain-name u-text-overflow" href="#/{$ node.link_type $}/{$ node.system_id $}" title="{$ node.fqdn $}">
-                            <span data-ng-if="node.locked" title="This machine is locked. You have to unlock it to perform any actions." aria-describedby="{$ node.fqdn $}-locked-state">
-                                <i class="p-icon--locked">Locked: </i>
-                            </span>
-                            <span class="p-domain-name__host">{$ node.hostname $}</span><span class="p-domain-name__tld">.{$ node.domain.name $}</span>
-                        </a>
+                <div class="p-double-row__wrapper">
+                    <div class="p-double-row__checkbox" data-ng-if="!hideActions">
+                        <input type="checkbox" data-ng-click="toggleChecked(node)" data-ng-checked="node.$selected" id="{$ node.fqdn $}" data-ng-disabled="ngDisable()" />
+                        <label class="p-checkbox--action" for="{$ node.fqdn $}" ng-class="getCheckboxClass(node)"></label>
                     </div>
-                    <span class="p-tooltip--bottom-left" aria-describedby="ip-addresses-{$ node.fqdn $}">
-                        <div data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length" class="p-double-row__muted-row">
-                            <span class="u-text-overflow">
-                                <span>{$ getBootIp(node.ip_addresses) || node.ip_addresses[0].ip $}</span><span data-ng-if="getBootIp(node.ip_addresses)"> (PXE)</span>
-                                <span data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length > 1">(+{$ removeDuplicates(node.ip_addresses, 'ip').length - 1 $})</span>
-                            </span>
-                            <span class="p-tooltip__message" style="white-space:initial;left:3.5rem" role="tooltip" data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length > 1" id="ip-addresses-{$ node.fqdn $}">
-                                <div><strong>{$ removeDuplicates(node.ip_addresses, 'ip').length $} interfaces:</strong></div>
-                                <div data-ng-repeat="ip_address in removeDuplicates(node.ip_addresses, 'ip')">
-                                    <span>{$ ip_address.ip $}</span><span data-ng-if="ip_address.is_boot"> (PXE)</span>
-                                </div>
-                            </span>
+
+                    <div class="p-double-row__rows-container--checkbox">
+                        <div class="p-double-row__main-row">
+                            <a class="p-domain-name u-text-overflow" href="#/{$ node.link_type $}/{$ node.system_id $}" title="{$ node.fqdn $}">
+                                <span data-ng-if="node.locked" title="This machine is locked. You have to unlock it to perform any actions." aria-describedby="{$ node.fqdn $}-locked-state">
+                                    <i class="p-icon--locked">Locked: </i>
+                                </span>
+                                <span class="p-domain-name__host">{$ node.hostname $}</span><span class="p-domain-name__tld">.{$ node.domain.name $}</span>
+                            </a>
                         </div>
-                    </span>
+                        <span class="p-tooltip--bottom-left" aria-describedby="ip-addresses-{$ node.fqdn $}">
+                            <div data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length" class="p-double-row__muted-row">
+                                <span class="u-text-overflow">
+                                    <span>{$ getBootIp(node.ip_addresses) || node.ip_addresses[0].ip $}</span>
+                                    <span data-ng-if="getBootIp(node.ip_addresses)"> (PXE)</span>
+                                    <span data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length > 1">(+{$ removeDuplicates(node.ip_addresses, 'ip').length - 1 $})</span>
+                                </span>
+                                <span class="p-tooltip__message" style="white-space:initial" role="tooltip" data-ng-if="removeDuplicates(node.ip_addresses, 'ip').length > 1" id="ip-addresses-{$ node.fqdn $}">
+                                    <div><strong>{$ removeDuplicates(node.ip_addresses, 'ip').length $} interfaces:</strong></div>
+                                    <div data-ng-repeat="ip_address in removeDuplicates(node.ip_addresses, 'ip')">
+                                        <span>{$ ip_address.ip $}</span><span data-ng-if="ip_address.is_boot"> (PXE)</span>
+                                    </div>
+                                </span>
+                            </div>
+                        </span>
+                    </div>
                 </div>
             </td>
             <td class="p-table__col--name" aria-label="MAC" data-ng-if="table.column === 'pxe_mac'">
@@ -155,43 +163,43 @@
                     <div class="p-double-row__rows-container--icon u-hide--br3">
                         <div class="p-double-row__main-row u-upper-case--first">
                             <span class="u-text-overflow" title="{$ node.power_state $}">{$ node.power_state $}</span>
-                            <button
-                                class="p-table-menu__toggle p-icon--chevron u-hide--br3"
-                                data-ng-if="!hideActions"
-                                data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-power'}"
-                                data-ng-click="toggleMenu(node.system_id + '-power')"
-                            ></button>
                         </div>
+                        <button
+                            class="p-table-menu__toggle p-icon--chevron u-hide--br3"
+                            data-ng-if="!hideActions"
+                            data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-power'}"
+                            data-ng-click="toggleMenu(node.system_id + '-power')"
+                        ></button>
                         <div class="p-double-row__muted-row u-upper-case--first">
                             <span class="u-text-overflow" title="{$ node.power_type $}">{$ node.power_type $}</span>
                         </div>
                     </div>
                     <span class="p-table-menu__dropdown" data-ng-if="!node.powerTransition && openMenu === node.system_id + '-power'">
-                        <div class="p-table-menu__title--icon">Take action:</div>
+                        <div class="p-table-menu__title">Take action:</div>
                         <button
-                            class="p-table-menu__power-on"
+                            class="p-table-menu__link p-table-menu__power-on"
                             data-ng-click="changePowerState(node, 'on')"
                             data-ng-if="node.actions.indexOf('on') !== -1 && node.power_state !== 'on'"
                         >
                             Turn on
                         </button>
                         <button
-                            class="p-table-menu__power-off"
+                            class="p-table-menu__link p-table-menu__power-off"
                             data-ng-click="changePowerState(node, 'off')"
                             data-ng-if="node.actions.indexOf('off') !== -1 && node.power_state !== 'off'"
                         >
                             Turn off
                         </button>
                         <button
+                            class="p-table-menu__link p-table-menu__check-power"
                             data-ng-click="changePowerState(node, 'check')"
-                            class="p-table-menu__check-power"
                             data-ng-if="node.power_state !== 'unknown'"
                         >
                             Check power
                         </button>
                         <button
+                            class="p-table-menu__link p-table-menu__check-power"
                             data-ng-if="node.actions.indexOf('on') === -1 && node.actions.indexOf('off') === -1 && node.power_state === 'unknown'"
-                            class="p-table-menu__check-power"
                             disabled
                         >
                             No power actions available
@@ -230,7 +238,6 @@
                     <span
                         class="p-table-menu__dropdown"
                         data-ng-if="openMenu === node.system_id + '-status'"
-                        style="left: .5rem"
                     >
                         <div class="p-table-menu__title">Take action:</div>
                         <div class="p-contextual-menu__group" data-ng-if="getStatusActions(node).length">
@@ -264,42 +271,43 @@
                     <div class="p-double-row__rows-container">
                         <div class="p-double-row__main-row" aria-label="Owner">
                             <i class="p-icon--spinner u-animation--spin" data-ng-if="node['acquire-transition'] || node['release-transition']">Changing owner</i>
-                            <span class="u-text-overflow" data-ng-if="node.owner">{$ node.owner $}</span>
-                            <span class="u-text-overflow" data-ng-if="!node.owner">-</span>
-                            <button
-                                class="p-table-menu__toggle p-icon--chevron"
-                                data-ng-if="!hideActions"
-                                data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-owner'}"
-                                data-ng-click="toggleMenu(node.system_id + '-owner')"
-                            ></button>                        </div>
+                            <span data-ng-if="node.owner">{$ node.owner $}</span>
+                            <span data-ng-if="!node.owner">-</span>
+                        </div>
+                        <button
+                            class="p-table-menu__toggle p-icon--chevron u-hide--br2"
+                            data-ng-if="!hideActions"
+                            data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-owner'}"
+                            data-ng-click="toggleMenu(node.system_id + '-owner')"
+                        ></button>
                         <div data-ng-if="node.tags.length !== 0" class="p-double-row__muted-row" aria-label="Tags" title="{$ node.tags.join(', ') $}">
                             <span class="u-text-overflow">{$ node.tags.join(', ') $}</span>
                         </div>
+                        <span class="p-table-menu__dropdown" data-ng-if="openMenu === node.system_id + '-owner'">
+                            <div class="p-table-menu__title">Take action:</div>
+                            <button
+                                data-ng-if="node.actions.indexOf('acquire') !== -1"
+                                data-ng-click="performAction(node, 'acquire')"
+                                class="p-table-menu__link"
+                            >
+                                {$ getActionTitle('acquire') $}
+                            </button>
+                            <button
+                                data-ng-if="node.actions.indexOf('release') !== -1"
+                                data-ng-click="performAction(node, 'release')"
+                                class="p-table-menu__link"
+                            >
+                                {$ getActionTitle('release') $}
+                            </button>
+                            <button
+                                data-ng-if="node.actions.indexOf('acquire') === -1 && node.actions.indexOf('release') === -1"
+                                class="p-table-menu__link"
+                                disabled
+                            >
+                                No owner actions available
+                            </button>
+                        </span>
                     </div>
-                    <span class="p-table-menu__dropdown" data-ng-if="openMenu === node.system_id + '-owner'">
-                        <div class="p-table-menu__title">Take action:</div>
-                        <button
-                            data-ng-if="node.actions.indexOf('acquire') !== -1"
-                            data-ng-click="performAction(node, 'acquire')"
-                            class="p-table-menu__link"
-                        >
-                            {$ getActionTitle('acquire') $}
-                        </button>
-                        <button
-                            data-ng-if="node.actions.indexOf('release') !== -1"
-                            data-ng-click="performAction(node, 'release')"
-                            class="p-table-menu__link"
-                        >
-                            {$ getActionTitle('release') $}
-                        </button>
-                        <button
-                            data-ng-if="node.actions.indexOf('acquire') === -1 && node.actions.indexOf('release') === -1"
-                            class="p-table-menu__link"
-                            disabled
-                        >
-                            No owner actions available
-                        </button>
-                    </span>
                 </div>
             </td>
             <td class="p-table__col--pool p-double-row" aria-label="Pool, Note">
@@ -309,15 +317,15 @@
                             <i class="p-icon--spinner u-animation--spin" data-ng-if="node['set-pool-transition']">Setting pool</i>
                             <span class="u-text-overflow" data-ng-if="node.pool.name"><a class="p-link--soft" href="#/pools" title="{$ node.pool.name $}"> {$ node.pool.name $}</a></span>
                             <span class="u-text-overflow" data-ng-if="!node.pool.name">-</span>
-                            <button
-                                class="p-table-menu__toggle p-icon--chevron u-hide--br3"
-                                data-ng-if="node.actions.indexOf('set-pool') !== -1 && !hideActions"
-                                data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-pool'}"
-                                data-ng-click="toggleMenu(node.system_id + '-pool')"
-                            ></button>
                         </div>
-                        <div class="p-double-row__muted-row" aria-label="Note" title="{$ node.description $}">
-                            <span class="u-text-overflow" data-ng-if="node.description">{$ node.description $}</span>
+                        <button
+                            class="p-table-menu__toggle p-icon--chevron u-hide--br3"
+                            data-ng-if="node.actions.indexOf('set-pool') !== -1 && !hideActions"
+                            data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-pool'}"
+                            data-ng-click="toggleMenu(node.system_id + '-pool')"
+                        ></button>
+                        <div class="p-double-row__muted-row" aria-label="Note" title="{$ node.description $}" data-ng-if="node.description" >
+                            {$ node.description $}
                         </div>
                     </div>
                     <span class="p-table-menu__dropdown" data-ng-if="openMenu === node.system_id + '-pool'">
@@ -347,43 +355,41 @@
                             <i class="p-icon--spinner u-animation--spin" data-ng-if="node['set-zone-transition']">Setting zone</i>
                             <span class="u-text-overflow" data-ng-if="node.zone.name"><a class="p-link--soft" href="#/zone/{$ node.zone.id $}" title="{$ node.zone.name $}">{$ node.zone.name $}</a></span>
                             <span class="u-text-overflow" data-ng-if="!node.zone.name">-</span>
-                            <button
-                                class="p-table-menu__toggle p-icon--chevron u-hide--br3"
-                                data-ng-if="node.actions.indexOf('set-zone') !== -1 && !hideActions"
-                                data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-zone'}"
-                                data-ng-click="toggleMenu(node.system_id + '-zone')"
-                            ></button>
                         </div>
+                        <button
+                            class="p-table-menu__toggle p-icon--chevron u-hide--br3"
+                            data-ng-if="node.actions.indexOf('set-zone') !== -1 && !hideActions"
+                            data-ng-class="{'u-mirror--y' : openMenu === node.system_id + '-zone'}"
+                            data-ng-click="toggleMenu(node.system_id + '-zone')"
+                        ></button>
                         <div class="p-double-row__muted-row" style="overflow: visible">
                             <span class="u-text-overflow" data-ng-if="node.spaces.length === 1">
                                 {$ node.spaces[0] $}
                             </span>
                             <span data-ng-if="node.spaces.length > 1" class="p-tooltip--btm-left" aria-described-by="{$ node.hostname $}-spaces" style="overflow: visible">
-                                <span class="u-text-overflow">
-                                    {$ node.spaces.length $} spaces
-                                </span>
+                                {$ node.spaces.length $} spaces
                                 <span class="p-tooltip__message" role="tooltip" id="{$ node.hostname $}-spaces">{$ getSpacesTooltipMessage(node.spaces) $}</span>
                             </span>
                         </div>
+                        <span class="p-table-menu__dropdown" data-ng-if="openMenu === node.system_id + '-zone'">
+                            <div class="p-table-menu__title">Change AZ:</div>
+                            <button
+                                data-ng-repeat="zone in zones | orderBy:'name'"
+                                data-ng-if="node.zone.id !== zone.id && zones.length > 1 && node.actions.indexOf('set-zone') !== -1"
+                                data-ng-click="performAction(node, 'set-zone', { zone_id: zone.id })"
+                                class="p-table-menu__link"
+                            >
+                                {$ zone.name $}
+                            </button>
+                            <button
+                                data-ng-if="zones.length < 2 && node.actions.indexOf('set-zone') !== -1"
+                                class="p-table-menu__link"
+                                disabled
+                            >
+                                No other zones available
+                            </button>
+                        </span>
                     </div>
-                    <span class="p-table-menu__dropdown" data-ng-if="openMenu === node.system_id + '-zone'">
-                        <div class="p-table-menu__title">Change AZ:</div>
-                        <button
-                            data-ng-repeat="zone in zones | orderBy:'name'"
-                            data-ng-if="node.zone.id !== zone.id && zones.length > 1 && node.actions.indexOf('set-zone') !== -1"
-                            data-ng-click="performAction(node, 'set-zone', { zone_id: zone.id })"
-                            class="p-table-menu__link"
-                        >
-                            {$ zone.name $}
-                        </button>
-                        <button
-                            data-ng-if="zones.length < 2 && node.actions.indexOf('set-zone') !== -1"
-                            class="p-table-menu__link"
-                            disabled
-                        >
-                            No other zones available
-                        </button>
-                    </span>
                 </div>
             </td>
             <td class="p-table__col--fabric p-double-row" aria-label="Fabric, VLAN" title="{$ node.fabric.name $}">
@@ -397,9 +403,9 @@
                     </div>
                 </div>
             </td>
-            <td class="p-table__col--cores p-table--action-cell u-align--right p-double-row" aria-label="CPU, Architecture">
-                <div class="p-double-row__rows-container">
-                    <div class="p-double-row__main-row u-align--right" aria-label="CPU" style="overflow: visible"> <!-- overflow override so tooltip is visible -->
+            <td class="p-table__col--cores p-table--action-cell p-double-row" aria-label="CPU, Architecture">
+                <div class="p-double-row__rows-container u-align--right">
+                    <div class="p-double-row__main-row" aria-label="CPU" style="overflow: visible"> <!-- overflow override so tooltip is visible -->
                         <span class="p-tooltip--left">
                             <span data-maas-script-status="script-status" data-script-status="node.cpu_test_status" data-ng-if="node.cpu_test_status !== -1 && node.cpu_test_status !== 2 && !hideFailedTests" aria-describedby="node-cpu-tooltip-{$ node.fqdn $}"></span>
                             <span class="u-text-overflow">{$ node.cpu_count $}</span>
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index 9eb044b..f5d4764 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -2214,13 +2214,14 @@
                                 <th>IP Address</th>
                                 <th><div class="u-align--right">Actions</div></th>
                             </tr>
-
                             <tr data-ng-if="!isDevice" class="p-table--is-not-device">
                                 <th class="p-double-row">
-                                    <div class="p-double-row__checkbox"><span data-ng-hide="isAllNetworkingDisabled() || isController">&nbsp;</span></div>
-                                    <div class="p-double-row__rows-container--checkbox">
-                                        <div>Name</div>
-                                        <div>MAC</div>
+                                    <div class="p-double-row__wrapper">
+                                        <div class="p-double-row__checkbox" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)"><span data-ng-hide="isAllNetworkingDisabled() || isController">&nbsp;</span></div>
+                                        <div class="p-double-row__rows-container--checkbox">
+                                            <div>Name</div>
+                                            <div class="p-double-row__muted-header">MAC</div>
+                                        </div>
                                     </div>
                                 </th>
                                 <th><div data-ng-if="!isController" class="u-align--center">PXE</div></th>
@@ -2284,23 +2285,25 @@
                             <tr data-ng-if="!isDevice" class="p-table--is-not-device" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }"
                                 data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">
                                 <td class="p-double-row" aria-label="Name" data-ng-class="{ 'is-error': isInterfaceNameInvalid(editInterface) }">
-                                    <div class="p-double-row__checkbox" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)">
-                                        <input type="checkbox" class="checkbox" id="{$ getUniqueKey(interface) $}"
-                                            data-ng-hide="isAllNetworkingDisabled()"
-                                            data-ng-checked="isInterfaceSelected(interface)"
-                                            data-ng-click="toggleInterfaceSelect(interface)"
-                                            data-ng-disabled="isDisabled()">
-                                        <label for="{$ getUniqueKey(interface) $}"></label>
-                                    </div>
-                                    <div class="p-double-row__rows-container--checkbox">
-                                        <div class="p-double-row__main-row">
-                                            <div data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')" title="{$ interface.name $}">
-                                                {$ interface.name $}
-                                            </div>
+                                    <div class="p-double-row__wrapper">
+                                        <div class="p-double-row__checkbox" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)">
+                                            <input type="checkbox" class="checkbox" id="{$ getUniqueKey(interface) $}"
+                                                data-ng-hide="isAllNetworkingDisabled()"
+                                                data-ng-checked="isInterfaceSelected(interface)"
+                                                data-ng-click="toggleInterfaceSelect(interface)"
+                                                data-ng-disabled="isDisabled()">
+                                            <label for="{$ getUniqueKey(interface) $}"></label>
                                         </div>
-                                        <div class="p-double-row__muted-row">
-                                            <div data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')" title="{$ interface.mac_address $}">
-                                                {$ interface.mac_address $}
+                                        <div class="p-double-row__rows-container--checkbox">
+                                            <div class="p-double-row__main-row">
+                                                <div data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')" title="{$ interface.name $}">
+                                                    {$ interface.name $}
+                                                </div>
+                                            </div>
+                                            <div class="p-double-row__muted-row">
+                                                <div data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')" title="{$ interface.mac_address $}">
+                                                    {$ interface.mac_address $}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/maasserver/static/scss/_breakpoints.scss b/src/maasserver/static/scss/_breakpoints.scss
new file mode 100644
index 0000000..cb466f4
--- /dev/null
+++ b/src/maasserver/static/scss/_breakpoints.scss
@@ -0,0 +1,47 @@
+@mixin breakpoint-widths(
+  $width-one,
+  $width-two: $width-one,
+  $width-three: $width-two,
+  $width-four: $width-three,
+  $width-five: $width-four
+) {
+  @media (max-width: $breakpoint-first - 1px) {
+    @if $width-one == 0 {
+      display: none !important;
+    } @else {
+      width: $width-one;
+    }
+  }
+
+  @media (min-width: $breakpoint-first) and (max-width: $breakpoint-second - 1px) {
+    @if $width-two == 0 {
+      display: none !important;
+    } @else {
+      width: $width-two;
+    }
+  }
+
+  @media (min-width: $breakpoint-second) and (max-width: $breakpoint-third - 1px) {
+    @if $width-three == 0 {
+      display: none !important;
+    } @else {
+      width: $width-three;
+    }
+  }
+
+  @media (min-width: $breakpoint-third) and (max-width: $breakpoint-fourth - 1px) {
+    @if $width-four == 0 {
+      display: none !important;
+    } @else {
+      width: $width-four;
+    }
+  }
+
+  @media (min-width: $breakpoint-fourth) {
+    @if $width-five == 0 {
+      display: none !important;
+    } @else {
+      width: $width-five;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/_settings.scss b/src/maasserver/static/scss/_settings.scss
index cb8eb7b..361370e 100644
--- a/src/maasserver/static/scss/_settings.scss
+++ b/src/maasserver/static/scss/_settings.scss
@@ -1,3 +1,5 @@
+@import "settings_breakpoints";
+
 $grid-max-width: 1440 / 16 * 1rem; // express in rems for easier calculations
 
 $color-navigation-background: #333;
diff --git a/src/maasserver/static/scss/_settings_breakpoints.scss b/src/maasserver/static/scss/_settings_breakpoints.scss
new file mode 100644
index 0000000..5267ebb
--- /dev/null
+++ b/src/maasserver/static/scss/_settings_breakpoints.scss
@@ -0,0 +1,5 @@
+// breakpoints used to hide content in responsive tables
+$breakpoint-first: 600px;
+$breakpoint-second: 900px;
+$breakpoint-third: 1030px;
+$breakpoint-fourth: 1360px;
diff --git a/src/maasserver/static/scss/_tables.scss b/src/maasserver/static/scss/_tables.scss
index c0d1fd2..d061214 100644
--- a/src/maasserver/static/scss/_tables.scss
+++ b/src/maasserver/static/scss/_tables.scss
@@ -1,768 +1,143 @@
-$breakpoint-first: 600px;
-$breakpoint-second: 900px;
-$breakpoint-third: 1030px;
-$breakpoint-fourth: 1360px;
-
-@mixin breakpoint-widths(
-  $width-one,
-  $width-two: $width-one,
-  $width-three: $width-two,
-  $width-four: $width-three,
-  $width-five: $width-four
-) {
-  @media (max-width: $breakpoint-first - 1px) {
-    @if $width-one == 0 {
-      display: none !important;
-    } @else {
-      width: $width-one;
-    }
-  }
+@import "tables/bcache";
+@import "tables/controllers";
+@import "tables/controller-interfaces";
+@import "tables/controllers-commissioning";
+@import "tables/controller-vlans";
+@import "tables/create-raid";
+@import "tables/create-volume-group";
+@import "tables/devices";
+@import "tables/disk-partitions";
+@import "tables/images";
+@import "tables/machines";
+@import "tables/network-discovery";
+@import "tables/pod-networking-config";
+@import "tables/pod-storage-config";
+@import "tables/pods";
+
+$checkbox-space: 1rem + $sph-inner;
+$icon-space: map-get($icon-sizes, default) + $sph-inner--small;
+$icon-margin-right: $sph-inner--small;
+$icon-button-width: $icon-margin-right + 2 * $vanilla-2-icon-button-side-padding +
+  map-get($icon-sizes, default);
+
+$chevron-cell-width: 50px;
 
-  @media (min-width: $breakpoint-first) and (max-width: $breakpoint-second - 1px) {
-    @if $width-two == 0 {
-      display: none !important;
-    } @else {
-      width: $width-two;
-    }
-  }
-
-  @media (min-width: $breakpoint-second) and (max-width: $breakpoint-third - 1px) {
-    @if $width-three == 0 {
-      display: none !important;
-    } @else {
-      width: $width-three;
-    }
-  }
-
-  @media (min-width: $breakpoint-third) and (max-width: $breakpoint-fourth - 1px) {
-    @if $width-four == 0 {
-      display: none !important;
-    } @else {
-      width: $width-four;
-    }
-  }
-
-  @media (min-width: $breakpoint-fourth) {
-    @if $width-five == 0 {
-      display: none !important;
-    } @else {
-      width: $width-five;
-    }
+@mixin maas-table-widths {
+  @include maas-table--bcache;
+  @include maas-table--controllers;
+  @include maas-table--controller-interfaces;
+  @include maas-table--controllers-commissioning;
+  @include maas-table--controller-vlans;
+  @include maas-table--create-raid;
+  @include maas-table--create-volume-group;
+  @include maas-table--devices;
+  @include maas-table--disk-partitions;
+  @include maas-table--images;
+  @include maas-table--machines;
+  @include maas-table--pods;
+  @include maas-table--pod-networking-config;
+  @include maas-table--pod-storage-config;
+  @include maas-table--network-discovery;
+
+  %p-double-row__icon-container {
+    display: block;
+    width: map-get($icon-sizes, default);
+  }
+
+  %ellipse-single-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  %double-row-flex-behaviour {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
   }
-}
 
-@mixin maas-table-widths {
   .p-table__row {
-    .p-table--machines tbody &:hover {
-      background-color: $color-x-light;
-      box-shadow: 0 1px 3px 0 transparentize($color-dark, 0.8);
-
-      .p-table-menu__toggle {
-        display: inline-block;
-      }
-
-      .p-table-menu:not(.is-hidden) .p-double-row__main-row .u-text-overflow {
-        max-width: calc(100% - 1.5rem);
-      }
-    }
-
     &--muted {
       background: $color-light;
     }
   }
 
-  .p-table--network-discovery {
-    $chevron-cell-width: 50px;
-
-    tr {
-      justify-content: space-between;
-    }
-
-    th,
-    td {
-      flex: 0 0 auto;
-    }
-
-    &__name {
-      width: 15%;
-    }
-
-    &__mac {
-      width: 20%;
-    }
-
-    &__ip {
-      width: 25%;
-    }
-
-    &__rack {
-      width: 15%;
-    }
-
-    &__last-seen {
-      width: calc(25% - #{$chevron-cell-width});
-    }
-
-    &__chevron {
-      flex: 0 0 auto;
-      width: $chevron-cell-width; // chevron needs a static width
-    }
-  }
-
-  .p-table--pods {
-    .p-table__row {
-      .p-table__cell {
-        &:nth-child(1) {
-          width: 10%;
-        }
-
-        &:nth-child(2) {
-          width: 10%;
-        }
-
-        &:nth-child(3) {
-          width: 10%;
-        }
-
-        &:nth-child(4) {
-          width: 10%;
-        }
-
-        &:nth-child(5) {
-          width: 16%;
-        }
-
-        &:nth-child(6) {
-          width: 8%;
-        }
-
-        &:nth-child(7) {
-          width: 8%;
-        }
-
-        &:nth-child(8) {
-          width: 8%;
-        }
-      }
-    }
-  }
-
-  .p-table--pod-networking-config,
-  .p-table--pod-storage-config {
-    input {
-      // overriding min-width to make inputs fit within container
-      min-width: auto;
-      @extend %u-input-min-margin--bottom;
-    }
-  }
-
-  $icon-button-width: calc(
-    2px + #{$sph-inner--small + $vanilla-2-icon-button-side-padding * 2 +
-      map-get($icon-sizes, default)}
-  );
-
-  .p-table--pod-networking-config {
-    select {
-      @extend %u-input-min-margin--bottom;
-    }
-
-    @media (min-width: $breakpoint-small) {
-      margin-bottom: 0;
-
-      .p-table__row {
-        th,
-        td {
-          &:nth-child(1) {
-            width: $icon-button-width;
-          }
-
-          &:nth-child(2) {
-            width: 10%;
-          }
-
-          &:nth-child(3) {
-            width: 25%;
-          }
-
-          &:nth-child(4) {
-            width: 15%;
-          }
-
-          &:nth-child(5) {
-            width: 23%;
-          }
-
-          &:nth-child(6) {
-            width: 10%;
-          }
-
-          &:nth-child(7) {
-            width: 12%;
-          }
-
-          &:nth-child(8) {
-            width: 5%;
-          }
-        }
-      }
-    }
-  }
-
-  .p-table--pod-storage-config {
-    @media (min-width: $breakpoint-small) {
-      margin-bottom: 0;
-
-      .p-table__row {
-        th,
-        td {
-          &:nth-child(1) {
-            width: $icon-button-width;
-          }
-
-          &:nth-child(2) {
-            width: 10%;
-          }
-
-          &:nth-child(3) {
-            width: 40%;
-          }
-
-          &:nth-child(4) {
-            width: 40%;
-          }
-
-          &:nth-child(5) {
-            width: 10%;
-          }
-        }
-      }
-    }
-  }
-
-  .p-table--pod-networking-config--message {
-    margin-left: 35%;
-  }
-
-  .p-table--devices {
-    .p-table__row {
-      .p-table__cell {
-        &:nth-child(1) {
-          width: 33%;
-        }
-
-        &:nth-child(2) {
-          width: 17%;
-        }
-
-        &:nth-child(3) {
-          width: 15%;
-
-          @media (max-width: 1000px) {
-            display: none !important;
-          }
-        }
-
-        &:nth-child(4) {
-          width: 20%;
-        }
-
-        &:nth-child(5) {
-          width: 15%;
-        }
-      }
-    }
+  .p-double-row {
+    overflow: visible;
   }
 
-  .p-table--controllers {
-    .p-table__row {
-      .p-table__cell {
-        &:nth-child(1) {
-          width: 30%;
-        }
-
-        &:nth-child(2) {
-          width: 10%;
-        }
-
-        &:nth-child(3) {
-          width: 20%;
-        }
-
-        &:nth-child(4) {
-          width: 15%;
-        }
-
-        &:nth-child(5) {
-          width: 20%;
-        }
-
-        &:nth-child(6) {
-          width: 15%;
-        }
-      }
-    }
+  .p-double-row__wrapper {
+    @extend %double-row-flex-behaviour;
+    width: 100%;
   }
 
-  .p-table--images {
-    .p-table__row {
-      .p-table__cell {
-        &:nth-child(1) {
-          width: 20%;
-        }
-
-        &:nth-child(2) {
-          width: 15%;
-        }
-
-        &:nth-child(3) {
-          width: 15%;
-        }
-
-        &:nth-child(4) {
-          width: 35%;
-        }
-
-        &:nth-child(5) {
-          width: 15%;
-        }
-      }
-    }
+  .p-double-row__checkbox {
+    @extend %p-double-row__icon-container;
+    margin-right: $sph-inner;
   }
 
-  .p-table--disks-partitions,
-  .p-table--used-disks {
-    .p-table__row {
-      .p-table__cell {
-        flex: 0 0 auto !important;
-
-        &:nth-child(1) {
-          width: 15%;
-        }
-
-        &:nth-child(2) {
-          width: 15%;
-        }
-
-        &:nth-child(3) {
-          width: 7%;
-        }
-
-        &:nth-child(4) {
-          width: 9%;
-        }
-
-        &:nth-child(5) {
-          width: 22%;
-        }
-
-        &:nth-child(6) {
-          width: 22%;
-        }
-
-        &:nth-child(7) {
-          width: 10%;
-        }
-      }
-    }
+  .p-double-row__icon-container {
+    @extend %p-double-row__icon-container;
+    margin-right: $sph-inner--small;
   }
 
-  .p-table--used-disks {
-    .p-table__row {
-      .p-table__cell {
-        &:nth-child(6) {
-          width: 7%;
-        }
-
-        &:nth-child(7) {
-          width: 25%;
-        }
-      }
-    }
+  %p-double-row__rows-container {
+    @extend %double-row-flex-behaviour;
+    position: relative;
   }
-
-  .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(3) {
-          width: 9%;
-        }
-
-        &:nth-child(4) {
-          width: 44%;
-        }
-
-        &:nth-child(5) {
-          width: 10%;
-        }
-      }
-    }
+  .p-double-row__rows-container {
+    @extend %p-double-row__rows-container;
+    width: 100%;
   }
 
-  .p-table--machines {
-    $group-padding-left: 2.5rem;
-    @extend %vf-pseudo-border--bottom;
-    margin: 0;
-    position: relative;
-
-    .p-table__header {
-      border-bottom: 1px solid $color-mid-light;
-    }
-
-    .p-table__group {
-      border: 0;
-      position: relative;
-
-      .p-table__group-label {
-        color: $color-dark;
-        font-size: 1rem;
-        padding: $spv-inner--small 0 $spv-inner--small $sph-inner--small;
-        text-transform: none;
-      }
-
-      .p-table__group-toggle {
-        padding: 0 $sp-x-small;
-        position: absolute;
-        right: $spv-inner--medium;
-        top: $spv-outer--medium;
-      }
-
-      &.is-open {
-        @include vf-icon-minus($color-mid-dark);
-      }
-    }
-
-    .p-table__row {
-      position: relative;
-
-      &::after {
-        content: "";
-      }
-
-      &.is-grouped {
-        border: 0;
-
-        &::after {
-          position: absolute;
-          left: $group-padding-left;
-          right: 0;
-          height: 1px;
-          background-color: $color-light-new;
-        }
-
-        & td:first-child {
-          padding-left: $group-padding-left;
-        }
-      }
-
-      td {
-        vertical-align: top;
-      }
-
-      .p-table__col--name {
-        @include breakpoint-widths(46%, 30%, 22%, 20%, 17%);
-        position: relative;
-
-        .p-tooltip {
-          position: static;
-        }
-      }
-
-      .p-table__col--power {
-        @include breakpoint-widths(8%, 8%, 4%, 10%, 9%);
-      }
-
-      .p-table__col--status {
-        @include breakpoint-widths(46%, 44%, 22%, 22%, 18%);
-        position: relative;
-
-        .p-tooltip {
-          position: static;
-        }
-      }
-
-      .p-table__col--owner {
-        @include breakpoint-widths(0, 18%, 8%, 10%, 9%);
-      }
-
-      .p-table__col--pool {
-        @include breakpoint-widths(0, 0, 0, 0, 7%);
-        overflow: visible;
-      }
-
-      .p-table__col--zone {
-        @include breakpoint-widths(0, 0, 0, 10%, 9%);
-      }
-
-      .p-table__col--fabric {
-        @include breakpoint-widths(0, 0, 0, 0, 8%);
-      }
-
-      .p-table__col--cores {
-        @include breakpoint-widths(0, 0, 10%, 6%, 5%);
-      }
-
-      .p-table__col--ram {
-        @include breakpoint-widths(0, 0, 12%, 8%, 7%);
-      }
-
-      .p-table__col--disks {
-        @include breakpoint-widths(0, 0, 10%, 6%, 5%);
-      }
-
-      .p-table__col--storage {
-        @include breakpoint-widths(0, 0, 10%, 8%, 6%);
-      }
-    }
-
-    // Needed to keep widths of machine table correct when no grouping selected
-    .p-table__placeholder {
-      * {
-        height: 0 !important;
-        padding: 0 !important;
-        visibility: hidden;
-      }
-    }
-
-    .p-icon--placeholder {
-      @extend %icon;
-      height: map-get($icon-sizes, default);
-      margin-right: $sph-inner--small;
-      width: map-get($icon-sizes, default);
-    }
-
-    .p-tooltip__message--latest-event {
-      max-width: 500px;
-      white-space: inherit;
-    }
-
-    &:last-of-type::after {
-      display: none;
-    }
+  .p-double-row__rows-container--icon {
+    @extend %p-double-row__rows-container;
+    width: calc(100% - #{$icon-space});
   }
 
-  .p-table--controller-interfaces {
-    .p-table--is-device {
-      th,
-      td {
-        &:nth-child(1) {
-          width: 30%;
-        }
-        &:nth-child(2) {
-          width: 25%;
-        }
-        &:nth-child(3) {
-          width: 25%;
-        }
-        &:nth-child(4) {
-          width: 15%;
-        }
-      }
-    }
-
-    .p-table--is-not-device {
-      th,
-      td {
-        &:nth-child(1) {
-          width: 20%;
-        }
-        &:nth-child(2) {
-          width: 6%;
-        }
-        &:nth-child(3) {
-          width: 10%;
-        }
-        &:nth-child(4) {
-          width: 14%;
-        }
-        &:nth-child(5) {
-          width: 16%;
-        }
-        &:nth-child(6) {
-          width: 28%;
-        }
-        &:nth-child(7) {
-          width: 6%;
-        }
-      }
-    }
+  .p-double-row__rows-container--checkbox {
+    @extend %p-double-row__rows-container;
+    width: calc(100% - #{$checkbox-space});
   }
 
-  .p-table--controllers-commissioning {
-    .p-table__row {
-      th,
-      td {
-        &:nth-child(1) {
-          width: 15%;
-        }
-        &:nth-child(2) {
-          width: 15%;
-        }
-        &:nth-child(3) {
-          width: 20%;
-        }
-        &:nth-child(4) {
-          width: 20%;
-        }
-        &:nth-child(5) {
-          width: 25%;
-        }
-        &:nth-child(6) {
-          width: 5%;
-        }
-      }
-    }
-  }
-  .p-table--controller-vlans {
-    .p-table__row {
-      @media (min-width: $breakpoint-small) {
-        th,
-        td {
-          &:nth-child(1) {
-            width: 15%;
-          }
-          &:nth-child(2) {
-            width: 15%;
-          }
-          &:nth-child(3) {
-            width: 10%;
-          }
-          &:nth-child(4) {
-            width: 20%;
-          }
-          &:nth-child(5) {
-            width: 20%;
-          }
-          &:nth-child(6) {
-            width: 20%;
-          }
-        }
-      }
+  .p-double-row__main-row {
+    @extend %ellipse-single-line;
+    @at-root .p-table--machines
+        .p-table__row:hover
+        .p-table-menu.has-actions
+        & {
+      max-width: calc(100% - #{$icon-space + $sph-inner});
+      margin-right: 0.5rem;
     }
   }
 
-  .p-table--create-raid {
-    &__name {
-      @media (max-width: $breakpoint-medium) {
-        width: 50%;
-      }
-      @media (min-width: $breakpoint-medium) {
-        width: 30%;
-      }
-    }
-    &__size {
-      width: 10%;
-    }
-    &__type {
-      width: 20%;
-    }
-    &__active {
-      width: 10%;
-    }
-    &__spare {
-      width: 10%;
-    }
+  .p-double-row__muted-header {
+    @extend %ellipse-single-line;
+    width: 100%;
   }
 
-  .p-table--create-volume-group {
-    &__name {
-      @media (max-width: $breakpoint-medium) {
-        width: 50%;
-      }
-      @media (min-width: $breakpoint-medium) {
-        width: 30%;
-      }
-    }
-    &__size {
-      width: 30%;
-    }
-    &__type {
-      width: 20%;
-    }
-    &__empty {
-      width: 10%;
-    }
-  }
-  .p-table--bcache {
-    &__name {
-      @media (max-width: $breakpoint-medium) {
-        width: 50%;
-      }
-      @media (min-width: $breakpoint-medium) {
-        width: 30%;
-      }
-    }
-    &__size {
-      width: 30%;
-    }
-    &__type {
-      width: 20%;
-    }
-    &__empty {
-      width: 10%;
-    }
+  .p-double-row__muted-row {
+    @extend %small-text;
+    @extend %ellipse-single-line;
+    color: $color-mid-dark;
+    margin-bottom: map-get($line-heights, default-text) -
+      map-get($line-heights, small) - map-get($nudges, nudge--small);
+    width: 100%;
   }
 
-  $checkbox-space: 1rem + $sph-inner;
-  $icon-space: map-get($icon-sizes, default) + $sph-inner--small;
+  .p-double-row__muted-row-text {
+    @extend %ellipse-single-line;
 
-  .p-double-row {
-    overflow: visible;
+    $ip-count-width: 2rem;
 
-    %p-double-row__icon-container {
-      display: block;
-      float: left;
-      width: map-get($icon-sizes, default);
+    &--ip-count {
+      @extend %ellipse-single-line;
+      width: $ip-count-width;
     }
 
-    %p-double-row__row {
-      align-items: center;
-      display: flex;
-      white-space: nowrap;
-      width: 100%;
-    }
-
-    .p-double-row__checkbox {
-      @extend %p-double-row__icon-container;
-      margin-right: $sph-inner;
-    }
-
-    .p-double-row__icon-container {
-      @extend %p-double-row__icon-container;
-      margin-right: $sph-inner--small;
-    }
-
-    .p-double-row__rows-container--icon {
-      float: left;
-      width: calc(100% - #{$icon-space});
-    }
-
-    .p-double-row__rows-container--checkbox {
-      float: left;
-      width: calc(100% - #{$checkbox-space});
-    }
-
-    .p-double-row__main-row {
-      @extend %p-double-row__row;
-    }
-
-    .p-double-row__muted-row {
-      @extend %small-text;
-      @extend %p-double-row__row;
-      color: $color-mid-dark;
-      margin-bottom: map-get($line-heights, default-text) -
-        map-get($line-heights, small) - map-get($nudges, nudge--small);
+    &--ip {
+      @extend %ellipse-single-line;
+      width: calc(100% - #{$ip-count-width});
     }
   }
 
@@ -819,136 +194,132 @@ $breakpoint-fourth: 1360px;
 
   .p-table-menu {
     @extend .p-contextual-menu;
-    margin-bottom: -$sp-unit;
+    display: flex;
     width: 100%;
 
-    %table-menu-link {
-      @extend .p-contextual-menu__link;
-      padding: $spv-inner--small $sph-inner;
-      position: relative;
-      transition: 0s;
-
-      &::before {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: map-get($icon-sizes, default);
-        content: "";
-        height: 17px;
-        left: $sph-inner;
-        position: absolute;
-        top: $spv-inner--medium;
-        width: map-get($icon-sizes, default);
-      }
+    .p-double-row__icon-container {
+      cursor: pointer;
     }
+  }
 
-    %table-menu-title {
-      border-bottom: 1px solid $color-light-new;
-      color: $color-mid-dark;
-      font-size: 0.75rem;
-      font-weight: 400;
-      padding: $spv-inner--x-small $sph-inner;
-      text-transform: uppercase;
-    }
+  .p-table-menu__title {
+    @extend %table-menu-title;
+  }
 
-    .p-table-menu__title {
-      @extend %table-menu-title;
-    }
+  .p-table-menu__footer {
+    border-top: 1px solid $color-light-new;
+    color: $color-mid-dark;
+    padding: $spv-inner--x-small $sp-xx-large;
+  }
 
-    .p-table-menu__title--icon {
-      @extend %table-menu-title;
-      padding-left: $sp-xx-large;
-    }
+  .p-table-menu__toggle {
+    @include vf-icon-chevron;
+    background-color: transparentize($color-x-light, 0.25);
+    background-position: 0 60%;
+    background-repeat: no-repeat;
+    border: 0;
+    cursor: pointer;
+    height: map-get($line-heights, default-text);
+    display: none;
+    flex: 0 0 auto;
+    left: $sp-x-small;
+    margin-left: $sph-inner--small;
+    opacity: 0.25;
+    overflow: hidden;
+    padding: $spv-inner--small $sph-inner--small;
+    top: 1px;
+    width: map-get($icon-sizes, default);
 
-    .p-table-menu__footer {
-      border-top: 1px solid $color-light-new;
-      color: $color-mid-dark;
-      padding: $spv-inner--x-small $sp-xx-large;
+    td:hover & {
+      opacity: 1;
     }
+  }
 
-    .p-table-menu__toggle {
-      background-color: transparentize($color-x-light, 0.25);
-      border: 0;
-      cursor: pointer;
-      display: none;
-      left: $sp-x-small;
-      opacity: 0.25;
-      top: 1px;
-
-      td:hover & {
-        opacity: 1;
-      }
-    }
+  .p-table-menu__dropdown {
+    @extend .p-contextual-menu__dropdown;
+    left: -#{$sph-inner};
+    max-width: none;
+    min-width: 100%;
+    top: $sp-x-large;
+    width: -moz-max-content;
+    width: max-content;
 
-    .p-table-menu__dropdown {
-      @extend .p-contextual-menu__dropdown;
-      left: -#{$sph-inner};
-      max-width: none;
-      min-width: 100%;
-      top: $sp-x-large;
-      width: -moz-max-content;
-      width: max-content;
-
-      .p-contextual-menu__group {
-        border-color: $color-light-new;
-      }
+    .p-contextual-menu__group {
+      border-color: $color-light-new;
     }
+  }
 
-    .p-table-menu__link {
-      @extend %table-menu-link;
-    }
+  .p-contextual-menu__group {
+    border-color: $color-light-new;
+  }
 
-    .p-table-menu__check-power {
-      @extend %table-menu-link;
-      padding-left: $sp-xx-large;
-      padding-right: $sp-xx-large;
-    }
+  %table-menu-title {
+    @extend %bold;
+    border-bottom: 1px solid $color-light-new;
+    color: $color-mid-dark;
+    display: flex;
+    flex: 0 0 auto;
+    font-size: #{pow($ms-ratio, -2)}rem;
+    padding: $spv-inner--x-small $sph-inner;
+    text-transform: uppercase;
+    width: 100%;
+  }
 
-    .p-table-menu__power-on {
-      @extend %table-menu-link;
-      padding-left: $sp-xx-large;
-      padding-right: $sp-xx-large;
+  %table-menu-link {
+    @extend .p-contextual-menu__link;
+    display: flex;
+    padding: $spv-inner--x-small $sph-inner;
+    position: relative;
+    transition: 0s;
+  }
 
-      &::before {
-        @include maas-icon-power-on($color-positive);
-      }
+  %p-table-menu__icon-placeholder {
+    &::before {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      content: "";
+      display: block;
+      height: map-get($line-heights, default-text);
+      margin-right: $icon-margin-right;
+      position: relative;
+      width: map-get($icon-sizes, default);
     }
+  }
 
-    .p-table-menu__power-off {
-      @extend %table-menu-link;
-      padding-left: $sp-xx-large;
-      padding-right: $sp-xx-large;
-
-      &::before {
-        @include maas-icon-power-on($color-mid-light);
-      }
-    }
+  %p-table-menu__icon-offset {
+    margin-left: map-get($icon-sizes, default) + $sph-inner--small;
+  }
 
-    .p-double-row__icon-container {
-      cursor: pointer;
+  .p-table-menu__title,
+  .p-table-menu__link {
+    .p-table__col--power & {
+      @extend %p-table-menu__icon-placeholder;
     }
   }
 
-  .u-hide--br1 {
-    @media (max-width: $breakpoint-first - 1px) {
-      display: none !important;
+  .p-table-menu__dropdown {
+    .p-table__col--status & {
+      @extend %p-table-menu__icon-offset;
     }
   }
 
-  .u-hide--br2 {
-    @media (max-width: $breakpoint-second - 1px) {
-      display: none !important;
-    }
+  .p-table-menu__link,
+  .p-table-menu__check-power,
+  .p-table-menu__power-on,
+  .p-table-menu__power-off {
+    @extend %table-menu-link;
   }
 
-  .u-hide--br3 {
-    @media (max-width: $breakpoint-third - 1px) {
-      display: none !important;
+  .p-table-menu__power-on {
+    &::before {
+      @include maas-icon-power-on($color-positive);
     }
   }
 
-  .u-hide--br4 {
-    @media (max-width: $breakpoint-fourth - 1px) {
-      display: none !important;
+  .p-table-menu__power-off {
+    &::before {
+      @include maas-icon-power-on($color-mid-light);
     }
   }
 }
diff --git a/src/maasserver/static/scss/_utilities_breakpoints.scss b/src/maasserver/static/scss/_utilities_breakpoints.scss
new file mode 100644
index 0000000..cb466f4
--- /dev/null
+++ b/src/maasserver/static/scss/_utilities_breakpoints.scss
@@ -0,0 +1,47 @@
+@mixin breakpoint-widths(
+  $width-one,
+  $width-two: $width-one,
+  $width-three: $width-two,
+  $width-four: $width-three,
+  $width-five: $width-four
+) {
+  @media (max-width: $breakpoint-first - 1px) {
+    @if $width-one == 0 {
+      display: none !important;
+    } @else {
+      width: $width-one;
+    }
+  }
+
+  @media (min-width: $breakpoint-first) and (max-width: $breakpoint-second - 1px) {
+    @if $width-two == 0 {
+      display: none !important;
+    } @else {
+      width: $width-two;
+    }
+  }
+
+  @media (min-width: $breakpoint-second) and (max-width: $breakpoint-third - 1px) {
+    @if $width-three == 0 {
+      display: none !important;
+    } @else {
+      width: $width-three;
+    }
+  }
+
+  @media (min-width: $breakpoint-third) and (max-width: $breakpoint-fourth - 1px) {
+    @if $width-four == 0 {
+      display: none !important;
+    } @else {
+      width: $width-four;
+    }
+  }
+
+  @media (min-width: $breakpoint-fourth) {
+    @if $width-five == 0 {
+      display: none !important;
+    } @else {
+      width: $width-five;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/_utilities_hide.scss b/src/maasserver/static/scss/_utilities_hide.scss
new file mode 100644
index 0000000..dd512a7
--- /dev/null
+++ b/src/maasserver/static/scss/_utilities_hide.scss
@@ -0,0 +1,25 @@
+@mixin maas-util-hide {
+  .u-hide--br1 {
+    @media (max-width: $breakpoint-first - 1px) {
+      display: none !important;
+    }
+  }
+
+  .u-hide--br2 {
+    @media (max-width: $breakpoint-second - 1px) {
+      display: none !important;
+    }
+  }
+
+  .u-hide--br3 {
+    @media (max-width: $breakpoint-third - 1px) {
+      display: none !important;
+    }
+  }
+
+  .u-hide--br4 {
+    @media (max-width: $breakpoint-fourth - 1px) {
+      display: none !important;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
index ae54295..876b4bf 100644
--- a/src/maasserver/static/scss/_utils.scss
+++ b/src/maasserver/static/scss/_utils.scss
@@ -1,4 +1,9 @@
 //does not work with colors containing alpha
+@import "utilities_hide";
+@import "utilities_breakpoints";
+
+@include maas-util-hide;
+
 @function encodecolor($string) {
   @if type-of($string) == "color" {
     $hex: str-slice(ie-hex-str($string), 4);
diff --git a/src/maasserver/static/scss/build.scss b/src/maasserver/static/scss/build.scss
index c3ae410..8105e13 100644
--- a/src/maasserver/static/scss/build.scss
+++ b/src/maasserver/static/scss/build.scss
@@ -50,7 +50,6 @@
 @include maas-inline-lists;
 @include maas-divided-lists;
 @include maas-tables;
-
 @include maas-b-forms;
 @include maas-b-links;
 @include maas-action-button;
diff --git a/src/maasserver/static/scss/tables/_bcache.scss b/src/maasserver/static/scss/tables/_bcache.scss
new file mode 100644
index 0000000..76be3c7
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_bcache.scss
@@ -0,0 +1,21 @@
+@mixin maas-table--bcache {
+  .p-table--bcache {
+    &__name {
+      @media (max-width: $breakpoint-medium) {
+        width: 50%;
+      }
+      @media (min-width: $breakpoint-medium) {
+        width: 30%;
+      }
+    }
+    &__size {
+      width: 30%;
+    }
+    &__type {
+      width: 20%;
+    }
+    &__empty {
+      width: 10%;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_controller-interfaces.scss b/src/maasserver/static/scss/tables/_controller-interfaces.scss
new file mode 100644
index 0000000..50a3e1f
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_controller-interfaces.scss
@@ -0,0 +1,48 @@
+@mixin maas-table--controller-interfaces {
+  .p-table--controller-interfaces {
+    .p-table--is-device {
+      th,
+      td {
+        &:nth-child(1) {
+          width: 30%;
+        }
+        &:nth-child(2) {
+          width: 25%;
+        }
+        &:nth-child(3) {
+          width: 25%;
+        }
+        &:nth-child(4) {
+          width: 15%;
+        }
+      }
+    }
+
+    .p-table--is-not-device {
+      th,
+      td {
+        &:nth-child(1) {
+          width: 20%;
+        }
+        &:nth-child(2) {
+          width: 6%;
+        }
+        &:nth-child(3) {
+          width: 10%;
+        }
+        &:nth-child(4) {
+          width: 14%;
+        }
+        &:nth-child(5) {
+          width: 16%;
+        }
+        &:nth-child(6) {
+          width: 28%;
+        }
+        &:nth-child(7) {
+          width: 6%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_controller-vlans.scss b/src/maasserver/static/scss/tables/_controller-vlans.scss
new file mode 100644
index 0000000..f5e0bbe
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_controller-vlans.scss
@@ -0,0 +1,29 @@
+@mixin maas-table--controller-vlans {
+  .p-table--controller-vlans {
+    .p-table__row {
+      @media (min-width: $breakpoint-small) {
+        th,
+        td {
+          &:nth-child(1) {
+            width: 15%;
+          }
+          &:nth-child(2) {
+            width: 15%;
+          }
+          &:nth-child(3) {
+            width: 10%;
+          }
+          &:nth-child(4) {
+            width: 20%;
+          }
+          &:nth-child(5) {
+            width: 20%;
+          }
+          &:nth-child(6) {
+            width: 20%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_controllers-commissioning.scss b/src/maasserver/static/scss/tables/_controllers-commissioning.scss
new file mode 100644
index 0000000..32ee360
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_controllers-commissioning.scss
@@ -0,0 +1,27 @@
+@mixin maas-table--controllers-commissioning {
+  .p-table--controllers-commissioning {
+    .p-table__row {
+      th,
+      td {
+        &:nth-child(1) {
+          width: 15%;
+        }
+        &:nth-child(2) {
+          width: 15%;
+        }
+        &:nth-child(3) {
+          width: 20%;
+        }
+        &:nth-child(4) {
+          width: 20%;
+        }
+        &:nth-child(5) {
+          width: 25%;
+        }
+        &:nth-child(6) {
+          width: 5%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_controllers.scss b/src/maasserver/static/scss/tables/_controllers.scss
new file mode 100644
index 0000000..713fc35
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_controllers.scss
@@ -0,0 +1,31 @@
+@mixin maas-table--controllers {
+  .p-table--controllers {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(1) {
+          width: 30%;
+        }
+
+        &:nth-child(2) {
+          width: 10%;
+        }
+
+        &:nth-child(3) {
+          width: 20%;
+        }
+
+        &:nth-child(4) {
+          width: 15%;
+        }
+
+        &:nth-child(5) {
+          width: 20%;
+        }
+
+        &:nth-child(6) {
+          width: 15%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_create-raid.scss b/src/maasserver/static/scss/tables/_create-raid.scss
new file mode 100644
index 0000000..5ad5726
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_create-raid.scss
@@ -0,0 +1,24 @@
+@mixin maas-table--create-raid {
+  .p-table--create-raid {
+    &__name {
+      @media (max-width: $breakpoint-medium) {
+        width: 50%;
+      }
+      @media (min-width: $breakpoint-medium) {
+        width: 30%;
+      }
+    }
+    &__size {
+      width: 10%;
+    }
+    &__type {
+      width: 20%;
+    }
+    &__active {
+      width: 10%;
+    }
+    &__spare {
+      width: 10%;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_create-volume-group.scss b/src/maasserver/static/scss/tables/_create-volume-group.scss
new file mode 100644
index 0000000..66e851f
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_create-volume-group.scss
@@ -0,0 +1,21 @@
+@mixin maas-table--create-volume-group {
+  .p-table--create-volume-group {
+    &__name {
+      @media (max-width: $breakpoint-medium) {
+        width: 50%;
+      }
+      @media (min-width: $breakpoint-medium) {
+        width: 30%;
+      }
+    }
+    &__size {
+      width: 30%;
+    }
+    &__type {
+      width: 20%;
+    }
+    &__empty {
+      width: 10%;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_devices.scss b/src/maasserver/static/scss/tables/_devices.scss
new file mode 100644
index 0000000..5be49c0
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_devices.scss
@@ -0,0 +1,31 @@
+@mixin maas-table--devices {
+  .p-table--devices {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(1) {
+          width: 33%;
+        }
+
+        &:nth-child(2) {
+          width: 17%;
+        }
+
+        &:nth-child(3) {
+          width: 15%;
+
+          @media (max-width: 1000px) {
+            display: none !important;
+          }
+        }
+
+        &:nth-child(4) {
+          width: 20%;
+        }
+
+        &:nth-child(5) {
+          width: 15%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_disk-partitions.scss b/src/maasserver/static/scss/tables/_disk-partitions.scss
new file mode 100644
index 0000000..95ffaff
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_disk-partitions.scss
@@ -0,0 +1,43 @@
+@mixin maas-table--disk-partitions {
+  .p-table--disks-partitions {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(1) {
+          width: 15%;
+        }
+
+        &:nth-child(2) {
+          width: 15%;
+        }
+
+        &:nth-child(3) {
+          width: 7%;
+        }
+
+        &:nth-child(4) {
+          width: 9%;
+        }
+
+        &:nth-child(5) {
+          width: 12%;
+        }
+
+        &:nth-child(6) {
+          width: 10%;
+        }
+
+        &:nth-child(7) {
+          width: 12%;
+        }
+
+        &:nth-child(8) {
+          width: 10%;
+        }
+
+        &:nth-child(9) {
+          width: 10%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_images.scss b/src/maasserver/static/scss/tables/_images.scss
new file mode 100644
index 0000000..6b0eb98
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_images.scss
@@ -0,0 +1,27 @@
+@mixin maas-table--images {
+  .p-table--images {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(1) {
+          width: 20%;
+        }
+
+        &:nth-child(2) {
+          width: 15%;
+        }
+
+        &:nth-child(3) {
+          width: 15%;
+        }
+
+        &:nth-child(4) {
+          width: 35%;
+        }
+
+        &:nth-child(5) {
+          width: 15%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_machines.scss b/src/maasserver/static/scss/tables/_machines.scss
new file mode 100644
index 0000000..737acd1
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_machines.scss
@@ -0,0 +1,153 @@
+@mixin maas-table--machines {
+  .p-table--machines {
+    $group-padding-left: 2.5rem;
+    @extend %vf-pseudo-border--bottom;
+    margin: 0;
+    position: relative;
+
+    .p-table__header {
+      border-bottom: 1px solid $color-mid-light;
+    }
+
+    .p-table__group {
+      border: 0;
+      position: relative;
+
+      .p-table__group-label {
+        color: $color-dark;
+        font-size: 1rem;
+        padding: $spv-inner--small 0 $spv-inner--small $sph-inner--small;
+        text-transform: none;
+      }
+
+      .p-table__group-toggle {
+        padding: 0 $sp-x-small;
+        position: absolute;
+        right: $spv-inner--medium;
+        top: $spv-outer--medium;
+      }
+
+      &.is-open {
+        @include vf-icon-minus($color-mid-dark);
+      }
+    }
+
+    & tbody .p-table__row:hover {
+      background-color: $color-x-light;
+
+      .p-table-menu__toggle {
+        display: inline-block;
+      }
+    }
+
+    .p-table__row {
+      position: relative;
+
+      &::after {
+        content: "";
+      }
+
+      &.is-grouped {
+        border: 0;
+
+        &::after {
+          position: absolute;
+          left: $group-padding-left;
+          right: 0;
+          height: $px;
+          background-color: $color-light-new;
+        }
+
+        & td:first-child {
+          padding-left: $group-padding-left;
+        }
+      }
+
+      td {
+        vertical-align: top;
+      }
+
+      .p-table__col--name {
+        @include breakpoint-widths(46%, 30%, 22%, 20%, 17%);
+        position: relative;
+
+        .p-tooltip {
+          position: static;
+          width: 100%;
+        }
+      }
+
+      .p-table__col--power {
+        @include breakpoint-widths(8%, 8%, 4%, 10%, 9%);
+      }
+
+      .p-table__col--status {
+        @include breakpoint-widths(46%, 44%, 22%, 22%, 18%);
+        position: relative;
+
+        .p-tooltip {
+          position: static;
+          width: 100%;
+        }
+      }
+
+      .p-table__col--owner {
+        @include breakpoint-widths(0, 18%, 8%, 10%, 9%);
+      }
+
+      .p-table__col--pool {
+        @include breakpoint-widths(0, 0, 0, 0, 7%);
+        overflow: visible;
+      }
+
+      .p-table__col--zone {
+        @include breakpoint-widths(0, 0, 0, 10%, 9%);
+      }
+
+      .p-table__col--fabric {
+        @include breakpoint-widths(0, 0, 0, 0, 8%);
+      }
+
+      .p-table__col--cores {
+        @include breakpoint-widths(0, 0, 10%, 6%, 5%);
+      }
+
+      .p-table__col--ram {
+        @include breakpoint-widths(0, 0, 12%, 8%, 7%);
+      }
+
+      .p-table__col--disks {
+        @include breakpoint-widths(0, 0, 10%, 6%, 5%);
+      }
+
+      .p-table__col--storage {
+        @include breakpoint-widths(0, 0, 10%, 8%, 6%);
+      }
+    }
+
+    // Needed to keep widths of machine table correct when no grouping selected
+    .p-table__placeholder {
+      * {
+        height: 0 !important;
+        padding: 0 !important;
+        visibility: hidden;
+      }
+    }
+
+    .p-icon--placeholder {
+      @extend %icon;
+      height: map-get($icon-sizes, default);
+      margin-right: $sph-inner--small;
+      width: map-get($icon-sizes, default);
+    }
+
+    .p-tooltip__message--latest-event {
+      max-width: 500px;
+      white-space: inherit;
+    }
+
+    &:last-of-type::after {
+      display: none;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_network-discovery.scss b/src/maasserver/static/scss/tables/_network-discovery.scss
new file mode 100644
index 0000000..bde66c4
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_network-discovery.scss
@@ -0,0 +1,37 @@
+@mixin maas-table--network-discovery {
+  .p-table--network-discovery {
+    tr {
+      justify-content: space-between;
+    }
+
+    th,
+    td {
+      flex: 0 0 auto;
+    }
+
+    &__name {
+      width: 15%;
+    }
+
+    &__mac {
+      width: 20%;
+    }
+
+    &__ip {
+      width: 25%;
+    }
+
+    &__rack {
+      width: 15%;
+    }
+
+    &__last-seen {
+      width: calc(25% - #{$chevron-cell-width});
+    }
+
+    &__chevron {
+      flex: 0 0 auto;
+      width: $chevron-cell-width; // chevron needs a static width
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_pod-networking-config.scss b/src/maasserver/static/scss/tables/_pod-networking-config.scss
new file mode 100644
index 0000000..76a5b7c
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_pod-networking-config.scss
@@ -0,0 +1,58 @@
+@mixin maas-table--pod-networking-config {
+  .p-table--pod-networking-config {
+    input {
+      // overriding min-width to make inputs fit within container
+      min-width: auto;
+      @extend %u-input-min-margin--bottom;
+    }
+
+    select {
+      @extend %u-input-min-margin--bottom;
+    }
+
+    @media (min-width: $breakpoint-small) {
+      margin-bottom: 0;
+
+      .p-table__row {
+        th,
+        td {
+          &:nth-child(1) {
+            width: calc(#{$icon-button-width} - 2px);
+          }
+
+          &:nth-child(2) {
+            width: 10%;
+          }
+
+          &:nth-child(3) {
+            width: 25%;
+          }
+
+          &:nth-child(4) {
+            width: 15%;
+          }
+
+          &:nth-child(5) {
+            width: 23%;
+          }
+
+          &:nth-child(6) {
+            width: 10%;
+          }
+
+          &:nth-child(7) {
+            width: 12%;
+          }
+
+          &:nth-child(8) {
+            width: 5%;
+          }
+        }
+      }
+    }
+  }
+
+  .p-table--pod-networking-config--message {
+    margin-left: 35%;
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_pod-storage-config.scss b/src/maasserver/static/scss/tables/_pod-storage-config.scss
new file mode 100644
index 0000000..40c8f79
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_pod-storage-config.scss
@@ -0,0 +1,38 @@
+@mixin maas-table--pod-storage-config {
+  .p-table--pod-storage-config {
+    input {
+      // overriding min-width to make inputs fit within container
+      min-width: auto;
+      @extend %u-input-min-margin--bottom;
+    }
+
+    @media (min-width: $breakpoint-small) {
+      margin-bottom: 0;
+
+      .p-table__row {
+        th,
+        td {
+          &:nth-child(1) {
+            width: calc(#{$icon-button-width} - 2px);
+          }
+
+          &:nth-child(2) {
+            width: 10%;
+          }
+
+          &:nth-child(3) {
+            width: 40%;
+          }
+
+          &:nth-child(4) {
+            width: 40%;
+          }
+
+          &:nth-child(5) {
+            width: 10%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/tables/_pods.scss b/src/maasserver/static/scss/tables/_pods.scss
new file mode 100644
index 0000000..a0273e8
--- /dev/null
+++ b/src/maasserver/static/scss/tables/_pods.scss
@@ -0,0 +1,39 @@
+@mixin maas-table--pods {
+  .p-table--pods {
+    .p-table__row {
+      .p-table__cell {
+        &:nth-child(1) {
+          width: 10%;
+        }
+
+        &:nth-child(2) {
+          width: 10%;
+        }
+
+        &:nth-child(3) {
+          width: 10%;
+        }
+
+        &:nth-child(4) {
+          width: 10%;
+        }
+
+        &:nth-child(5) {
+          width: 10%;
+        }
+
+        &:nth-child(6) {
+          width: 10%;
+        }
+
+        &:nth-child(7) {
+          width: 10%;
+        }
+
+        &:nth-child(8) {
+          width: 10%;
+        }
+      }
+    }
+  }
+}