Add new tables to storage and project edit

app/components/project-row/component.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   model: null,
-  tagName: 'TR',
+  tagName: '',
 
   projects: Ember.inject.service(),
 

app/components/project-template-row/component.js

@@ -2,5 +2,5 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   model: null,
-  tagName: 'TR',
+  tagName: '',
 });

app/components/storagepool-section/component.js

@@ -12,6 +12,27 @@ export default Ember.Component.extend(Sortable, {
     name:   ['displayName','id'],
     mounts: ['mounts.length','displayName','id'],
   },
+  headers:  [
+    {
+      name:           'state',
+      sort:           ['state','displayName','id'],
+      translationKey: 'generic.state',
+      width:          '115',
+    },
+    {
+      name:           'name',
+      sort:           ['displayName','id'],
+      translationKey: 'storagePoolSection.models.table.header.volumeName',
+      width:          '350',
+    },
+    {
+      translationKey: 'storagePoolSection.models.table.header.mounts',
+    },
+    {
+      isActions:      true,
+      width:          '75',
+    },
+  ],
 
 
   init: function() {

app/components/storagepool-section/template.hbs

@@ -39,18 +39,18 @@
   {{#if model.volumes.length}}
     <div class="subsection gutter  col span-9 col-full-height">
       <h6>{{t 'storagePoolSection.volumes.header'}}</h6>
-      <table class="grid" style="margin-bottom: 0">
+      {{#sortable-table
-        <thead>
+          classNames="grid mb-0 sortable-table"
-          <tr>
+          bulkActions=false
-            {{sortable-th sortable=this action="changeSort" name="state" width="115" label="generic.state"}}
+          paging=false
-            {{sortable-th sortable=this action="changeSort" name="name" width="350" label="storagePoolSection.models.table.header.volumeName"}}
+          search=false
-            <th>{{t 'storagePoolSection.models.table.header.mounts'}}</th>
+          sortBy=sortBy
-            <th width="75">&nbsp;</th>
+          descending=descending
-          </tr>
+          headers=headers
-        </thead>
+          body=model
-        <tbody>
+          as |sortable kind vol|
-          {{#each arranged as |vol|}}
+      }}
-            <tr>
+        {{#if (eq kind "row")}}
           <td class="state">
             {{badge-state model=vol}}
           </td>
@@ -81,30 +81,12 @@
           <td class="actions wide">
             {{action-menu model=vol}}
           </td>
-            </tr>
+        {{else if (eq kind "norows")}}
-            {{#if vol.snapshots.length}}
-              <tr class="nohover">
-                <td colspan="4" class="subtable pl-10">
-                  <table class="grid fixed no-lines">
-                    <thead>
           <tr>
-                        <th width="125">{{t 'storagePoolSection.models.table.header.snapshotState'}}</th>
+            <td colspan="{{headers.length}}" class="text-center text-muted">{{t 'storagePoolSection.volumes.none'}}</td>
-                        <th>{{t 'storagePoolSection.models.table.header.snapshotName'}}</th>
-                        <th width="70">&nbsp;</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {{#each vol.snapshots as |snapshot|}}
-                        {{snapshot-section volume=vol snapshot=snapshot}}
-                      {{/each}}
-                    </tbody>
-                  </table>
-                </td>
           </tr>
         {{/if}}
-          {{/each}}
+      {{/sortable-table}}
-        </tbody>
-      </table>
     </div>
   {{else}}
     <div class="text-muted text-center pl-10">{{t 'storagePoolSection.volumes.none'}}</div>

app/components/view-edit-project/component.js

@@ -1,10 +1,9 @@
 import Ember from 'ember';
-import Sortable from 'ui/mixins/sortable';
 import C from 'ui/utils/constants';
 import NewOrEdit from 'ui/mixins/new-or-edit';
 import { sortInsensitiveBy } from 'ui/utils/sort';
 
-export default Ember.Component.extend(NewOrEdit, Sortable, {
+export default Ember.Component.extend(NewOrEdit, {
   projects: Ember.inject.service(),
   access: Ember.inject.service(),
   growl: Ember.inject.service(),
@@ -18,15 +17,30 @@ export default Ember.Component.extend(NewOrEdit, Sortable, {
   editing: false,
   tab: 'access',
 
-  primaryResource: Ember.computed.alias('project'),
-  sortableContent: Ember.computed.alias('project.projectMembers'),
   sortBy: 'name',
-  sorts: {
+  headers:  [
-    name:   ['name', 'externalId'],
+    {
-    type:   ['externalIdType','externalId'],
+      name:           'name',
-    role:   ['role','externalId'],
+      sort:           ['name', 'externalId'],
+      translationKey: 'generic.name',
     },
-
+    {
+      name:           'type',
+      sort:           ['externalIdType','externalId'],
+      translationKey: 'generic.type',
+    },
+    {
+      name:           'role',
+      sort:           ['role','externalId'],
+      translationKey: 'generic.role',
+      width:          '',
+    },
+    {
+      sort:           [],
+      translationKey: '',
+      width:          '40',
+    },
+  ],
   stacks: null,
 
   actions: {

app/components/view-edit-project/template.hbs

@@ -64,24 +64,23 @@
   <hr/>
   <div class="well">
     {{#if (and accessEnabled showEdit)}}
-      <div class="inline-form">
+      <div class="inline-form mb-20">
         {{input-identity action="checkMember" onError="error"}}
       </div>
     {{/if}}
 
     {{#if accessEnabled}}
-      <table class="grid fixed" style="margin-bottom: 0;">
+      {{#sortable-table
-        <thead>
+          classNames="grid fixed mb-0 sortable-table"
-          <tr>
+          bulkActions=false
-            {{sortable-th sortable=this action="changeSort" name="name" label="generic.name"}}
+          paging=false
-            {{sortable-th sortable=this action="changeSort" name="type" label="generic.type"}}
+          search=false
-            {{sortable-th sortable=this action="changeSort" name="role" label="generic.role"}}
+          sortBy=sortBy
-            {{#if showEdit}}<th width="40">&nbsp;</th>{{/if}}
+          headers=headers
-          </tr>
+          body=project.projectMembers
-        </thead>
+          as |sortable kind member|
-        <tbody>
+      }}
-          {{#each arranged as |member|}}
+        {{#if (eq kind "row")}}
-            <tr>
             <td>
               {{identity-block identity=member}}
             </td>
@@ -106,17 +105,15 @@
                 {{/if}}
               </td>
             {{/if}}
-            </tr>
+        {{else if (eq kind "norows")}}
-          {{else}}
           <tr>
-              <td colspan="3" class="text-center text-muted">
+            <td colspan="{{headers.length}}" class="text-center text-muted">
               {{t 'viewEditProject.showEdit.noMembers'}}
             </td>
           </tr>
-          {{/each}}
+        {{/if}}
-        </tbody>
+      {{/sortable-table}}
-      </table>
+      <hr />
-      <hr class="m-0" />
     {{else}}
       <p class="text-info text-center">
         {{format-html-message 'viewEditProject.helpBlock'}}