M #~: Change storage tab view on templates form (#28)

src/sunstone/public/app/tabs/images-tab/datatable-common.js

@@ -54,30 +54,40 @@ define(function(require) {
       "bSortClasses" : false,
       "bDeferRender": true,
       "aoColumnDefs": [
-          {"bSortable": false, "aTargets": ["check"]},
-          {"sWidth": "35px", "aTargets": [0]},
-          {"bVisible": true, "aTargets": SunstoneConfig.tabTableColumns(tabId)},
-          {"bVisible": false, "aTargets": ['_all']},
-          {"sType": "file-size", "aTargets": [ 6 ] },
-          {"sType": "num", "aTargets": [1, 11]}
+        {
+          "aTargets": [2, 3, 4, 5, 6, 7, 8, 9, 10],
+          "sClass": "overflow",
+          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+            $(nTd).attr('title', sData)
+          },
+          "mRender": function ( data, type, full ) {
+            return null;
+          },
+        },
+        {"bSortable": false, "aTargets": ["check"]},
+        {"sWidth": "35px", "aTargets": [0]},
+        {"bVisible": true, "aTargets": SunstoneConfig.tabTableColumns(tabId)},
+        {"bVisible": false, "aTargets": ['_all']},
+        {"sType": "file-size", "aTargets": [ 6 ] },
+        {"sType": "num", "aTargets": [1, 11]}
       ]
     }
 
     this.columns = [
-      Locale.tr("ID"),
-      Locale.tr("Name"),
-      Locale.tr("Owner"),
-      Locale.tr("Group"),
-      Locale.tr("Datastore"),
-      Locale.tr("Size"),
-      Locale.tr("Type"),
-      Locale.tr("Registration time"),
-      Locale.tr("Persistent"),
-      Locale.tr("Status"),
-      Locale.tr("#VMS"),
-      Locale.tr("Target"),
-      Locale.tr("Labels"),
-      "search_data"
+      /* 1 */   Locale.tr("ID"),
+      /* 2 */   Locale.tr("Name"),
+      /* 3 */   Locale.tr("Owner"),
+      /* 4 */   Locale.tr("Group"),
+      /* 5 */   Locale.tr("Datastore"),
+      /* 6 */   Locale.tr("Size"),
+      /* 7 */   Locale.tr("Type"),
+      /* 8 */   Locale.tr("Registration time"),
+      /* 9 */   Locale.tr("Persistent"),
+      /* 10 */  Locale.tr("Status"),
+      /* 11 */  Locale.tr("#VMS"),
+      /* 12 */  Locale.tr("Target"),
+      /* 13 */  Locale.tr("Labels"),
+      /* 14 */  "search_data"
     ]
 
     this.conf.searchDropdownHTML = SearchDropdown({tableId: this.dataTableId});

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab.js

@@ -90,6 +90,7 @@ define(function(require) {
         }
       }
     });
+    $("table#"+this.imageTable.dataTableId).css("table-layout", "fixed")
     that.imageTable.refreshResourceTableSelect();
 
     // Select Image or Volatile disk. The div is hidden depending on the selection, and the

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/html.hbs

@@ -13,6 +13,21 @@
 {{! See the License for the specific language governing permissions and        }}
 {{! limitations under the License.                                             }}
 {{! -------------------------------------------------------------------------- }}
+
+<div class="row collapse">
+  <div class="medium-2 columns">
+    <ul class="tabs vertical" id="{{linksContainerId}}" data-tabs>
+    </ul>
+    <div class="text-center">
+      <button type="button" class="button small tabs-add" id="tf_btn_disks" style="margin-top: 5%">
+        <i class="fa fa-lg fa-plus-circle"></i>
+      </button>
+    </div>
+  </div>
+  <div class="medium-10 columns">
+    <div class="tabs-content vertical disks-container" id="{{contentsContainerId}}" data-tabs-content="{{linksContainerId}}"></div>
+  </div>
+</div>
 <div class="row">
   <div class="medium-2 columns"></div>
   <div class="medium-12 columns">
@@ -33,18 +48,4 @@
       </div>
     </fieldset>
   </div>
-</div>
-<div class="row collapse">
-  <div class="medium-2 columns">
-    <ul class="tabs vertical" id="{{linksContainerId}}" data-tabs>
-    </ul>
-    <div class="text-center">
-      <button type="button" class="button small tabs-add" id="tf_btn_disks" style="margin-top: 5%">
-        <i class="fa fa-lg fa-plus-circle"></i>
-      </button>
-    </div>
-  </div>
-  <div class="medium-10 columns">
-    <div class="tabs-content vertical disks-container" id="{{contentsContainerId}}" data-tabs-content="{{linksContainerId}}"></div>
-  </div>
-</div>
+</div>

src/sunstone/public/scss/_table.scss

@@ -32,7 +32,16 @@ table {
     border-bottom: 1px solid smart-scale($table-background, $table-hover-scale);
     border-left: 0;
     border-right: 0;
-    td{
+    td {
+      &.overflow {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        &::before {
+          content: attr(title);
+        }
+      }
+
       .cpu{
         margin: 0px;
         padding: 0px;