Further Theming fixes for Launch Instances

- Use actions_column, instead of action-col, for consistency - Use themable checkboxes instead of regular ones - Remove redundant SCSS - Remove some more *-sm classes - Fix colspans - Remove usage of ng-style Change-Id: I1438dbb659001c1c468d8429dbea35d51e64dd7e Closes-Bug: 1568839
2016-04-06 22:19:58 +01:00 · 2016-04-06 22:19:58 +01:00 · fd569dafaa
parent 8bf69bb0f9
commit fd569dafaa
12 changed files with 103 additions and 172 deletions
--- a/horizon/static/framework/widgets/table/table.scss
+++ b/horizon/static/framework/widgets/table/table.scss
@ -115,14 +115,6 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
        border-bottom: $table-border;
      }

-      tr.expanded td {
-        border-bottom: $table-border;
-
-        &[rowspan='2'].action-col {
-          border-bottom: none;
-        }
-      }
-
      tr.expanded:nth-last-child(-n+3) [rowspan='2'].action-col {
        border-bottom: $table-border;
      }
@ -140,21 +132,6 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
      }
    }

-    .detail-row td {
-      padding: 0;
-
-      &.detail .detail-expanded {
-        border-top: none;
-        padding: $detail-row-padding $table-padding;
-        white-space: normal;
-        word-wrap: break-word;
-      }
-    }
-
-    .expanded + tr td {
-      border-top: none;
-    }
-
    .expander {
      cursor: pointer;
      max-width: $expander-width;
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html
@ -23,13 +23,15 @@
  </div>

  <div hz-if-nova-extensions='["ConfigDrive"]'>
-    <div class="checkbox">
-      <label for="config-drive" translate>
+    <div class="form-group">
+      <div class="themable-checkbox">
        <input type="checkbox"
               id="config-drive"
               ng-model="model.newInstanceSpec.config_drive">
-        Configuration Drive
-      </label>
+        <label for="config-drive">
+          <span translate>Configuration Drive</span>
+        </label>
+      </div>
    </div>
  </div>
 </div>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html
@ -99,8 +99,7 @@ limitations under the License.
        </td>
      </tr>
      <tr ng-repeat-end class="detail-row">
-        <td></td>
-        <td colspan="7" class="detail">
+        <td colspan="9" class="detail">
          <span class="h5" translate>Impact on your quota</span>
          <div class="row">
            <div class="col-xs-4">
@ -127,7 +126,6 @@ limitations under the License.
            </div>
          </div>
        </td>
-        <td></td>
      </tr>
    </tbody>
  </table>
@ -214,8 +212,7 @@ limitations under the License.
        </td>
      </tr>
      <tr ng-repeat-end class="detail-row">
-        <td></td>
-        <td colspan="7" class="detail">
+        <td colspan="9" class="detail">
          <span class="h5" translate>Impact on your quota</span>
          <div class="row">
            <div class="col-xs-4">
@ -242,7 +239,6 @@ limitations under the License.
            </div>
          </div>
        </td>
-        <td></td>
      </tr>
    </tbody>
  </table>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair-details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair-details.html
@ -1,4 +1,4 @@
-<dl class="dl-horizontal key-pair-details">
+<dl class="key-pair-details">
  <dt translate>Public Key</dt>
  <dd>
    <pre><code>{$ row.public_key $}</code></pre>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
@ -58,9 +58,9 @@
          </td>
          <td class="rsp-p1">{$ row.name $}</td>
          <td class="rsp-p2">{$ row.fingerprint $}</td>
-          <td class="action-col">
+          <td class="actions_column">
            <action-list>
-              <action action-classes="'btn btn-sm btn-default'"
+              <action action-classes="'btn btn-default'"
                      callback="trCtrl.deallocate" item="row">
                <span class="fa fa-minus"></span>
              </action>
@ -68,11 +68,7 @@
          </td>
        </tr>
        <tr ng-repeat-end class="detail-row">
-          <td></td>
-          <td class="detail" colspan="3">
-            <dl class="dl-horizontal" ng-include="ctrl.tableDetails">
-            </dl>
-          </td>
+          <td class="detail" colspan="4" ng-include="ctrl.tableDetails"></td>
        </tr>
        </tbody>
      </table>
@ -112,9 +108,9 @@
            </td>
            <td class="rsp-p1">{$ row.name$}</td>
            <td class="rsp-p1">{$ row.fingerprint $}</td>
-            <td class="action-col">
+            <td class="actions_column">
              <action-list>
-                <action action-classes="'btn btn-sm btn-default'"
+                <action action-classes="'btn btn-default'"
                        callback="trCtrl.allocate" item="row">
                  <span class="fa fa-plus"></span>
                </action>
@ -122,8 +118,7 @@
            </td>
          </tr>
          <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-            <td></td>
-            <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
+            <td class="detail" colspan="4" ng-include="ctrl.tableDetails">
            </td>
          </tr>
        </tbody>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
@ -52,9 +52,9 @@
            <td class="rsp-p1">{$ row.shared | yesno $}</td>
            <td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
            <td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
-            <td class="action-col">
+            <td class="actions_column">
              <action-list>
-                <action action-classes="'btn btn-sm btn-default'"
+                <action action-classes="'btn btn-default'"
                  callback="trCtrl.deallocate" item="row">
                  <span class="fa fa-minus"></span>
                </action>
@ -62,8 +62,7 @@
            </td>
          </tr>
          <tr ng-repeat-end class="detail-row">
-            <td colspan="2"></td>
-            <td colspan="7" class="detail">
+            <td colspan="9" class="detail">
              <dl class="dl-horizontal">
                <dt translate>ID</dt>
                <dd>{$ row.id $}</dd>
@ -72,17 +71,17 @@
                <dt translate>External Network</dt>
                <dd>{$ row['router:external'] | yesno $}</dd>
              </dl>
-              <div><b translate>Provider Network</b></div>
+              <span class="h5" translate>Provider Network</span>
              <div class="row" class="detail">
-                <dl class="col-sm-3">
+                <dl class="col-sm-4">
                  <dt translate>Type</dt>
                  <dd translate>{$ row['provider:network_type'] $}</dd>
                </dl>
-                <dl class="col-sm-3">
+                <dl class="col-sm-4">
                  <dt translate>Segmentation ID</dt>
                  <dd>{$ row['provider:segmentation_id'] $}</dd>
                </dl>
-                <dl class="col-sm-3">
+                <dl class="col-sm-4">
                  <dt translate>Physical Network</dt>
                  <dd>{$ row['provider:physical_network'] $}</dd>
                </dl>
@ -94,10 +93,9 @@
    </allocated>
    <available>
      <hz-magic-search-context filter-facets="ctrl.networkFacets">
-        <hz-magic-search-bar>
-        </hz-magic-search-bar>
-        <table st-magic-search st-table="ctrl.tableDataMulti.displayedAvailable" st-safe-src="ctrl.tableDataMulti.available"
-          hz-table class="table table-striped table-rsp table-detail">
+        <hz-magic-search-bar></hz-magic-search-bar>
+          <table st-magic-search st-table="ctrl.tableDataMulti.displayedAvailable" st-safe-src="ctrl.tableDataMulti.available"
+            hz-table class="table table-striped table-rsp table-detail">
          <thead>
            <tr>
              <th class="expander"></th>
@ -129,14 +127,14 @@
              <td class="rsp-p1">{$ row.shared | yesno $}</td>
              <td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
              <td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
-              <td class="action-col">
+              <td class="actions_column">
                <action-list button-tooltip="row.warningMessage"
                  bt-model="ctrl.tooltipModel" bt-disabled="!row.disabled"
                  warning-classes="'invalid'">
                  <notifications>
                    <span class="fa fa-exclamation-circle invalid" ng-show="row.disabled"></span>
                  </notifications>
-                  <action action-classes="'btn btn-sm btn-default'"
+                  <action action-classes="'btn btn-default'"
                    callback="trCtrl.allocate" item="row" disabled="row.disabled">
                    <span class="fa fa-plus"></span>
                  </action>
@ -144,8 +142,7 @@
              </td>
            </tr>
            <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-              <td></td>
-              <td colspan="7" class="detail">
+              <td colspan="9" class="detail">
                <dl class="dl-horizontal">
                  <dt translate>ID</dt>
                  <dd>{$ row.id $}</dd>
@ -154,17 +151,17 @@
                  <dt translate>External Network</dt>
                  <dd>{$ row['router:external'] | yesno $}</dd>
                </dl>
-                <div><b translate>Provider Network</b></div>
+                <span class="h5" translate>Provider Network</span>
                <div class="row">
-                  <dl class="col-sm-3">
+                  <dl class="col-sm-4">
                    <dt translate>Type</dt>
-                    <dd>{$ row['provider:network_type'] $}</dd>
+                    <dd translate>{$ row['provider:network_type'] $}</dd>
                  </dl>
-                  <dl class="col-sm-3">
+                  <dl class="col-sm-4">
                    <dt translate>Segmentation ID</dt>
                    <dd>{$ row['provider:segmentation_id'] $}</dd>
                  </dl>
-                  <dl class="col-sm-3">
+                  <dl class="col-sm-4">
                    <dt translate>Physical Network</dt>
                    <dd>{$ row['provider:physical_network'] $}</dd>
                  </dl>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.html
@ -15,7 +15,7 @@
            <th class="rsp-p2" translate>IP</th>
            <th st-sort="admin_state" class="rsp-p1" translate>Admin State</th>
            <th st-sort="status" class="rsp-p1" translate>Status</th>
-            <th class="action-col"></th>
+            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
@ -45,9 +45,9 @@
            </td>
            <td class="rsp-p1">{$ item.admin_state | decode:ctrl.portAdminStates $}</td>
            <td class="rsp-p1">{$ item.status | decode:ctrl.portStatuses $}</td>
-            <td class="action-col">
+            <td class="actions_column">
              <action-list>
-                <action action-classes="'btn btn-sm btn-default'"
+                <action action-classes="'btn btn-default'"
                        callback="trCtrl.deallocate" item="item">
                  <span class="fa fa-minus"></span>
                </action>
@ -93,7 +93,7 @@
            <th class="rsp-p2" translate>IP</th>
            <th st-sort="admin_state" class="rsp-p1" translate>Admin State</th>
            <th st-sort="status" class="rsp-p1" translate>Status</th>
-            <th class="action-col"></th>
+            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
@ -118,9 +118,9 @@
            </td>
            <td class="rsp-p1">{$ item.admin_state | decode:ctrl.portAdminStates $}</td>
            <td class="rsp-p1">{$ item.status | decode:ctrl.portStatuses $}</td>
-            <td class="action-col">
+            <td class="actions_column">
              <action-list>
-                <action action-classes="'btn btn-sm btn-default'"
+                <action action-classes="'btn btn-default'"
                        callback="trCtrl.allocate" item="item">
                  <span class="fa fa-plus"></span>
                </action>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html
@ -1,4 +1,4 @@
-<table st-table="row.security_group_rules" class="table table-rsp security-group-details">
+<table st-table="row.security_group_rules" class="table table-condensed table-rsp security-group-details">
  <thead>
    <tr>
      <th st-sort="direction" st-sort-default translate>Direction</th>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
@ -33,9 +33,9 @@
          </td>
          <td class="rsp-p1">{$ row.name $}</td>
          <td class="rsp-p2">{$ row.description $}</td>
-          <td class="action-col">
+          <td class="actions_column">
            <action-list>
-              <action action-classes="'btn btn-sm btn-default'"
+              <action action-classes="'btn btn-default'"
                      callback="trCtrl.deallocate" item="row">
                <span class="fa fa-minus"></span>
              </action>
@ -85,9 +85,9 @@
          </td>
          <td class="rsp-p1">{$ row.name$}</td>
          <td class="rsp-p1">{$ row.description $}</td>
-          <td class="action-col">
+          <td class="actions_column">
            <action-list>
-              <action action-classes="'btn btn-sm btn-default'"
+              <action action-classes="'btn btn-default'"
                                      callback="trCtrl.allocate" item="row">
                <span class="fa fa-plus"></span>
              </action>
@ -95,8 +95,7 @@
          </td>
        </tr>
        <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-          <td></td>
-          <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
+          <td class="detail" colspan="4" ng-include="ctrl.tableDetails">
          </td>
        </tr>
        </tbody>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source-details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source-details.html
@ -1,43 +1,34 @@
-<td></td>
-
-<td colspan="{$ ::ctrl.tableHeadCells.length $}" class="detail">
+<td colspan="{$ ::ctrl.tableHeadCells.length +2 $}" class="detail">

  <div class="row">
-    <dl class="col-sm-2">
-      <dt translate>Min Disk</dt>
+    <dl class="col-xs-4">
+      <dt translate>Min Disk (GB)</dt>
      <dd>
        {$ (row.properties ? row.min_disk : row.volume_image_metadata.min_disk) || '--' $}
      </dd>
    </dl>
-    <dl class="col-sm-2">
-      <dt translate>Min RAM</dt>
+    <dl class="col-xs-4">
+      <dt translate>Min RAM (MB)</dt>
      <dd>
        {$ (row.properties ? row.min_ram : row.volume_image_metadata.min_ram) || '--' $}
      </dd>
    </dl>
  </div>

-  <div class="row"
-       ng-if="model.metadataDefs.image || model.metadataDefs.volume">
-
-    <div class="col-sm-12">
-      <div ng-if="row.properties && model.metadataDefs.image">
-        <metadata-display
-            available="::model.metadataDefs.image"
-            existing="::row.properties">
-        </metadata-display>
-      </div>
-
-      <div ng-if="row.volume_image_metadata && model.metadataDefs.volume">
-        <metadata-display
-            available="::model.metadataDefs.volume"
-            existing="::row.volume_image_metadata">
-        </metadata-display>
-      </div>
+  <div ng-if="model.metadataDefs.image || model.metadataDefs.volume">
+    <div ng-if="row.properties && model.metadataDefs.image">
+      <metadata-display
+          available="::model.metadataDefs.image"
+          existing="::row.properties">
+      </metadata-display>
    </div>

+    <div ng-if="row.volume_image_metadata && model.metadataDefs.volume">
+      <metadata-display
+          available="::model.metadataDefs.volume"
+          existing="::row.volume_image_metadata">
+      </metadata-display>
+    </div>
  </div>

 </td>
-
-<td></td>
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.controller.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.controller.js
@ -134,32 +134,32 @@
    // Mapping for dynamic table headers
    var tableHeadCellsMap = {
      image: [
-        { text: gettext('Name'), style: { width: '30%' }, sortable: true, sortDefault: true },
-        { text: gettext('Updated'), style: { width: '15%' }, sortable: true },
-        { text: gettext('Size'), style: { width: '15%' }, classList: ['number'], sortable: true },
+        { text: gettext('Name'), sortable: true, sortDefault: true },
+        { text: gettext('Updated'), sortable: true },
+        { text: gettext('Size'), classList: ['number'], sortable: true },
        { text: gettext('Type'), sortable: true },
        { text: gettext('Visibility'), sortable: true }
      ],
      snapshot: [
-        { text: gettext('Name'), style: { width: '30%' }, sortable: true, sortDefault: true },
-        { text: gettext('Updated'), style: { width: '15%' }, sortable: true },
-        { text: gettext('Size'), style: { width: '15%' }, classList: ['number'], sortable: true },
+        { text: gettext('Name'), sortable: true, sortDefault: true },
+        { text: gettext('Updated'), sortable: true },
+        { text: gettext('Size'), classList: ['number'], sortable: true },
        { text: gettext('Type'), sortable: true },
        { text: gettext('Visibility'), sortable: true }
      ],
      volume: [
-        { text: gettext('Name'), style: { width: '25%' }, sortable: true, sortDefault: true },
-        { text: gettext('Description'), style: { width: '20%' }, sortable: true },
-        { text: gettext('Size'), style: { width: '15%' }, classList: ['number'], sortable: true },
-        { text: gettext('Type'), style: { width: '20%' }, sortable: true },
-        { text: gettext('Availability Zone'), style: { width: '20%' }, sortable: true }
+        { text: gettext('Name'), sortable: true, sortDefault: true },
+        { text: gettext('Description'), sortable: true },
+        { text: gettext('Size'), classList: ['number'], sortable: true },
+        { text: gettext('Type'), sortable: true },
+        { text: gettext('Availability Zone'), sortable: true }
      ],
      volume_snapshot: [
-        { text: gettext('Name'), style: { width: '25%' }, sortable: true, sortDefault: true },
-        { text: gettext('Description'), style: { width: '20%' }, sortable: true },
-        { text: gettext('Size'), style: { width: '15%' }, classList: ['number'], sortable: true },
-        { text: gettext('Created'), style: { width: '15%' }, sortable: true },
-        { text: gettext('Status'), style: { width: '20%' }, sortable: true }
+        { text: gettext('Name'), sortable: true, sortDefault: true },
+        { text: gettext('Description'), sortable: true },
+        { text: gettext('Size'), classList: ['number'], sortable: true },
+        { text: gettext('Created'), sortable: true },
+        { text: gettext('Status'), sortable: true }
      ]
    };

@ -172,26 +172,21 @@
        { key: 'name', classList: ['hi-light'] },
        { key: 'updated_at', filter: dateFilter, filterArg: 'short' },
        { key: 'size', filter: bytesFilter, classList: ['number'] },
-        { key: 'disk_format', style: { 'text-transform': 'uppercase' },
-          filter: diskFormatFilter, filterRawData: true },
-        { key: 'is_public', filter: decodeFilter, filterArg: _visibilitymap,
-          style: { 'text-transform': 'capitalize' } }
+        { key: 'disk_format', filter: diskFormatFilter, filterRawData: true },
+        { key: 'is_public', filter: decodeFilter, filterArg: _visibilitymap }
      ],
      snapshot: [
        { key: 'name', classList: ['hi-light'] },
        { key: 'updated_at', filter: dateFilter, filterArg: 'short' },
        { key: 'size', filter: bytesFilter, classList: ['number'] },
-        { key: 'disk_format', style: { 'text-transform': 'uppercase' },
-          filter: diskFormatFilter, filterRawData: true },
-        { key: 'is_public', filter: decodeFilter, filterArg: _visibilitymap,
-          style: { 'text-transform': 'capitalize' } }
+        { key: 'disk_format', filter: diskFormatFilter, filterRawData: true },
+        { key: 'is_public', filter: decodeFilter, filterArg: _visibilitymap }
      ],
      volume: [
        { key: 'name', classList: ['hi-light'] },
        { key: 'description' },
        { key: 'size', filter: gbFilter, classList: ['number'] },
-        { key: 'volume_image_metadata', filter: diskFormatFilter,
-          style: { 'text-transform': 'uppercase' } },
+        { key: 'volume_image_metadata', filter: diskFormatFilter },
        { key: 'availability_zone' }
      ],
      volume_snapshot: [
@ -199,7 +194,7 @@
        { key: 'description' },
        { key: 'size', filter: gbFilter, classList: ['number'] },
        { key: 'created_at', filter: dateFilter, filterArg: 'short' },
-        { key: 'status', style: { 'text-transform': 'capitalize' } }
+        { key: 'status' }
      ]
    };

--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
@ -103,29 +103,23 @@
             hz-table
             st-safe-src="ctrl.tableData.allocated"
             st-table="ctrl.tableData.displayAllocated">
-
        <!-- transfer table, allocated table head -->
        <thead>
          <tr>
            <th class="expander"></th>
-            <th ng-class="ctrl.tableHeadCells[0].classList"
-                ng-style="ctrl.tableHeadCells[0].style">
+            <th ng-class="ctrl.tableHeadCells[0].classList">
              {$ ctrl.tableHeadCells[0].text $}
            </th>
-            <th ng-class="ctrl.tableHeadCells[1].classList"
-                ng-style="ctrl.tableHeadCells[1].style">
+            <th ng-class="ctrl.tableHeadCells[1].classList">
              {$ ctrl.tableHeadCells[1].text $}
            </th>
-            <th ng-class="ctrl.tableHeadCells[2].classList"
-                ng-style="ctrl.tableHeadCells[2].style">
+            <th ng-class="ctrl.tableHeadCells[2].classList">
              {$ ctrl.tableHeadCells[2].text $}
            </th>
-            <th ng-class="ctrl.tableHeadCells[3].classList"
-                ng-style="ctrl.tableHeadCells[3].style">
+            <th ng-class="ctrl.tableHeadCells[3].classList">
              {$ ctrl.tableHeadCells[3].text $}
            </th>
-            <th ng-class="ctrl.tableHeadCells[4].classList"
-                ng-style="ctrl.tableHeadCells[4].style">
+            <th ng-class="ctrl.tableHeadCells[4].classList">
              {$ ctrl.tableHeadCells[4].text $}
            </th>
            <th class="action"></th>
@ -149,24 +143,19 @@
                    hz-expand-detail
                    title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
            </td>
-            <td ng-class="ctrl.tableBodyCells[0].classList"
-                ng-style="ctrl.tableBodyCells[0].style">
+            <td ng-class="ctrl.tableBodyCells[0].classList">
              {$ ctrl.tableBodyCells[0].filter ? ctrl.tableBodyCells[0].filter(row[ctrl.tableBodyCells[0].key], ctrl.tableBodyCells[0].filterArg) : row[ctrl.tableBodyCells[0].key] $}
            </td>
-            <td ng-class="ctrl.tableBodyCells[1].classList"
-                ng-style="ctrl.tableBodyCells[1].style">
+            <td ng-class="ctrl.tableBodyCells[1].classList">
              {$ ctrl.tableBodyCells[1].filter ? ctrl.tableBodyCells[1].filter(row[ctrl.tableBodyCells[1].key], ctrl.tableBodyCells[1].filterArg) : row[ctrl.tableBodyCells[1].key] $}
            </td>
-            <td ng-class="ctrl.tableBodyCells[2].classList"
-                ng-style="ctrl.tableBodyCells[2].style">
+            <td ng-class="ctrl.tableBodyCells[2].classList">
              {$ ctrl.tableBodyCells[2].filter ? ctrl.tableBodyCells[2].filter(row[ctrl.tableBodyCells[2].key], ctrl.tableBodyCells[2].filterArg) : row[ctrl.tableBodyCells[2].key] $}
            </td>
-            <td ng-class="ctrl.tableBodyCells[3].classList"
-                ng-style="ctrl.tableBodyCells[3].style">
+            <td ng-class="ctrl.tableBodyCells[3].classList">
              {$ ctrl.tableBodyCells[3].filter ? ctrl.tableBodyCells[3].filter(ctrl.tableBodyCells[3].filterRawData ? row : row[ctrl.tableBodyCells[3].key], ctrl.tableBodyCells[3].filterArg) : row[ctrl.tableBodyCells[3].key] $}
            </td>
-            <td ng-class="ctrl.tableBodyCells[4].classList"
-                ng-style="ctrl.tableBodyCells[4].style">
+            <td ng-class="ctrl.tableBodyCells[4].classList">
              <span ng-if="model.newInstanceSpec.source_type.type === 'volume' && row.availability_zone !== model.newInstanceSpec.availability_zone"
                    class="invalid fa fa-exclamation-triangle"
                    popover="{$ ::trCtrl.helpText.volumeAZHelpText $}"
@ -175,9 +164,9 @@
                    popover-placement="top"></span>
              {$ ctrl.tableBodyCells[4].filter ? ctrl.tableBodyCells[4].filter(row[ctrl.tableBodyCells[4].key], ctrl.tableBodyCells[4].filterArg) : row[ctrl.tableBodyCells[4].key] $}
            </td>
-            <td class="action-col">
+            <td class="actions_column">
              <action-list>
-                <action action-classes="'btn btn-sm btn-default'"
+                <action action-classes="'btn btn-default'"
                        callback="trCtrl.deallocate"
                        item="row">
                  <span class="fa fa-minus"></span>
@ -209,31 +198,26 @@
              <th class="expander"></th>
              <th ng-attr-st-sort-default="{$ ctrl.tableHeadCells[0].sortDefault $}"
                  ng-class="ctrl.tableHeadCells[0].classList"
-                  ng-style="ctrl.tableHeadCells[0].style"
                  st-sort="{$ ctrl.tableHeadCells[0].sortable && ctrl.tableBodyCells[0].key $}">
                {$ ctrl.tableHeadCells[0].text $}
              </th>
              <th ng-attr-st-sort-default="{$ ctrl.tableHeadCells[1].sortDefault $}"
                  ng-class="ctrl.tableHeadCells[1].classList"
-                  ng-style="ctrl.tableHeadCells[1].style"
                  st-sort="{$ ctrl.tableHeadCells[1].sortable && ctrl.tableBodyCells[1].key $}">
                {$ ctrl.tableHeadCells[1].text $}
              </th>
              <th ng-attr-st-sort-default="{$ ctrl.tableHeadCells[2].sortDefault $}"
                  ng-class="ctrl.tableHeadCells[2].classList"
-                  ng-style="ctrl.tableHeadCells[2].style"
                  st-sort="{$ ctrl.tableHeadCells[2].sortable && ctrl.tableBodyCells[2].key $}">
                {$ ctrl.tableHeadCells[2].text $}
              </th>
              <th ng-attr-st-sort-default="{$ ctrl.tableHeadCells[3].sortDefault $}"
                  ng-class="ctrl.tableHeadCells[3].classList"
-                  ng-style="ctrl.tableHeadCells[3].style"
                  st-sort="{$ ctrl.tableHeadCells[3].sortable && ctrl.tableBodyCells[3].key $}">
                {$ ctrl.tableHeadCells[3].text $}
              </th>
              <th ng-attr-st-sort-default="{$ ctrl.tableHeadCells[4].sortDefault $}"
                  ng-class="ctrl.tableHeadCells[4].classList"
-                  ng-style="ctrl.tableHeadCells[4].style"
                  st-sort="{$ ctrl.tableHeadCells[4].sortable && ctrl.tableBodyCells[4].key $}">
                {$ ctrl.tableHeadCells[4].text $}
              </th>
@ -259,24 +243,19 @@
                      title="{$ ::trCtrl.helpText.expandDetailsText $}">
                </span>
              </td>
-              <td ng-class="ctrl.tableBodyCells[0].classList"
-                  ng-style="ctrl.tableBodyCells[0].style">
+              <td ng-class="ctrl.tableBodyCells[0].classList">
                {$ ctrl.tableBodyCells[0].filter ? ctrl.tableBodyCells[0].filter(row[ctrl.tableBodyCells[0].key], ctrl.tableBodyCells[0].filterArg) : row[ctrl.tableBodyCells[0].key] $}
              </td>
-              <td ng-class="ctrl.tableBodyCells[1].classList"
-                  ng-style="ctrl.tableBodyCells[1].style">
+              <td ng-class="ctrl.tableBodyCells[1].classList">
                {$ ctrl.tableBodyCells[1].filter ? ctrl.tableBodyCells[1].filter(row[ctrl.tableBodyCells[1].key], ctrl.tableBodyCells[1].filterArg) : row[ctrl.tableBodyCells[1].key] $}
              </td>
-              <td ng-class="ctrl.tableBodyCells[2].classList"
-                  ng-style="ctrl.tableBodyCells[2].style">
+              <td ng-class="ctrl.tableBodyCells[2].classList">
                {$ ctrl.tableBodyCells[2].filter ? ctrl.tableBodyCells[2].filter(row[ctrl.tableBodyCells[2].key], ctrl.tableBodyCells[2].filterArg) : row[ctrl.tableBodyCells[2].key] $}
              </td>
-              <td ng-class="ctrl.tableBodyCells[3].classList"
-                  ng-style="ctrl.tableBodyCells[3].style">
+              <td ng-class="ctrl.tableBodyCells[3].classList">
                {$ ctrl.tableBodyCells[3].filter ? ctrl.tableBodyCells[3].filter(ctrl.tableBodyCells[3].filterRawData ? row : row[ctrl.tableBodyCells[3].key], ctrl.tableBodyCells[3].filterArg) : row[ctrl.tableBodyCells[3].key] $}
              </td>
-              <td ng-class="ctrl.tableBodyCells[4].classList"
-                  ng-style="ctrl.tableBodyCells[4].style">
+              <td ng-class="ctrl.tableBodyCells[4].classList">
                <span ng-if="model.newInstanceSpec.source_type.type === 'volume' && row.availability_zone !== model.newInstanceSpec.availability_zone"
                      class="invalid fa fa-exclamation-triangle"
                      popover="{$ ::trCtrl.helpText.volumeAZHelpText $}"
@ -285,9 +264,9 @@
                      popover-placement="top"></span>
                {$ ctrl.tableBodyCells[4].filter ? ctrl.tableBodyCells[4].filter(row[ctrl.tableBodyCells[4].key], ctrl.tableBodyCells[4].filterArg) : row[ctrl.tableBodyCells[4].key] $}
              </td>
-              <td class="action-col">
+              <td class="actions_column">
                <action-list>
-                  <action action-classes="'btn btn-sm btn-default'"
+                  <action action-classes="'btn btn-default'"
                          callback="trCtrl.allocate"
                          item="row">
                    <span class="fa fa-plus"></span>