Sort all the things

app/apps/index/controller.js

@@ -1,9 +1,18 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  sortBy: ['handle:asc'],
+
+  // Apps by status
   deployedApps: Ember.computed.filterBy('model', 'isProvisioned'),
   pendingApps: Ember.computed.filterBy('model', 'isPending'),
   deprovisionedApps: Ember.computed.filterBy('model', 'hasBeenDeprovisioned'),
+
+  // Sorted apps by status
+  sortedDeployedApps: Ember.computed.sort('deployedApps', 'sortBy'),
+  sortedPendingApps: Ember.computed.sort('pendingApps', 'sortBy'),
+  sortedDeprovisionedApps: Ember.computed.sort('deprovisionedApps', 'sortBy'),
+
   hasActive: Ember.computed.gt('deployedApps.length', 0),
   hasPending: Ember.computed.gt('pendingApps.length', 0),
   hasDeprovisioning: Ember.computed.gt('deprovisionedApps.length', 0),

app/apps/index/template.hbs

@@ -6,7 +6,7 @@
         <h5 class="sort-header">Deployed Apps</h5>
       {{/if}}
       <div class="row">
-        {{#each deployedApps as |app|}}
+        {{#each sortedDeployedApps as |app|}}
           <div class="col-xs-4">
             {{partial 'stack/app'}}
           </div>
@@ -19,7 +19,7 @@
     <div class="sort-group pending-apps">
       <h5 class="sort-header">Pending Apps</h5>
       <div class="row">
-        {{#each pendingApps as |app|}}
+        {{#each sortedPendingApps as |app|}}
         <div class="col-xs-4">
           {{partial 'stack/app'}}
         </div>
@@ -32,7 +32,7 @@
     <div class="sort-group deprovisioning-apps">
       <h5 class="sort-header">Deprovisioned Apps</h5>
       <div class="row">
-        {{#each deprovisionedApps as |app|}}
+        {{#each sortedDeprovisionedApps as |app|}}
           <div class="col-xs-4">
             {{partial 'stack/app'}}
           </div>

app/components/resource-sidebar/component.js

@@ -1,5 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  tagName: ''
+  tagName: '',
+  sortBy: ['handle:asc'],
+  sortedApps: Ember.computed.sort('stack.apps', 'sortBy'),
+  sortedDatabases: Ember.computed.sort('stack.databases', 'sortBy')
 });

app/components/resource-sidebar/template.hbs

@@ -6,7 +6,7 @@
   {{/link-to}}
 </div>
 
-{{#if stack.apps}}
+{{#if sortedApps}}
   <ul class="nav sidebar-nav">
     <li class="title">
       {{link-to 'Apps' 'apps' stack classNames='title-link'}}
@@ -22,15 +22,15 @@
       {{/aptible-ability}}
     </li>
 
-    {{#each stack.apps as |app|}}
+    {{#each sortedApps as |app|}}
       {{#link-to 'app' app tagName="li"}}
         {{link-to app.handle 'app' app bubbles=false}}
       {{/link-to}}
     {{/each}}
   </ul>
 {{/if}}
 
-{{#if stack.databases}}
+{{#if sortedDatabases}}
   <ul class="nav sidebar-nav">
     <li class="title">
       {{link-to 'Databases' 'databases' stack classNames='title-link'}}
@@ -46,7 +46,7 @@
       {{/aptible-ability}}
     </li>
 
-    {{#each stack.databases as |database|}}
+    {{#each sortedDatabases as |database|}}
       {{#link-to 'database' database tagName="li"}}
         {{link-to database.handle 'database' database bubbles=false}}
       {{/link-to}}

app/components/stack-sidebar/component.js

@@ -1,10 +1,14 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  sortBy: ['handle:asc'],
+
   tooltipTitle: function() {
     return `${this.get('organization.name')} Settings`;
   }.property('organization.name'),
   organizationStacks: function() {
     return this.get('stacks').filterBy('organization.id', this.get('organization.id'));
-  }.property('stacks.@each.organization.id', 'organization.id')
+  }.property('stacks.@each.organization.id', 'organization.id'),
+
+  sortedStacks: Ember.computed.sort('organizationStacks', 'sortBy')
 });

app/components/stack-sidebar/template.hbs

@@ -8,7 +8,7 @@
     {{organization.name}} Environments
   </li>
 
-  {{#each organizationStacks as |stack|}}
+  {{#each sortedStacks as |stack|}}
     {{#link-to 'stack' stack tagName="li"}}
       {{link-to stack.handle 'stack' stack bubbles=false}}
     {{/link-to}}

app/databases/index/controller.js

@@ -1,9 +1,18 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  sortBy: ['handle:asc'],
+
+  // Databases by status
   deployedDatabases: Ember.computed.filterBy('model', 'isProvisioned'),
   pendingDatabases: Ember.computed.filterBy('model', 'isProvisioning'),
   deprovisionedDatabases: Ember.computed.filterBy('model', 'hasBeenDeprovisioned'),
+
+  // Sorted databases by status
+  sortedDeployedDatabases: Ember.computed.sort('deployedDatabases', 'sortBy'),
+  sortedPendingDatabases: Ember.computed.sort('pendingDatabases', 'sortBy'),
+  sortedDeprovisionedDatabases: Ember.computed.sort('deprovisionedDatabases', 'sortBy'),
+
   hasActive: Ember.computed.gt('deployedDatabases.length', 0),
   hasPending: Ember.computed.gt('pendingDatabases.length', 0),
   hasDeprovisioned: Ember.computed.gt('deprovisionedDatabases.length', 0),

app/databases/index/template.hbs

@@ -6,7 +6,7 @@
         <h5 class="sort-header">Provisioned Databases</h5>
       {{/if}}
       <div class="row">
-        {{#each deployedDatabases as |database|}}
+        {{#each sortedDeployedDatabases as |database|}}
           <div class="col-xs-4">
             {{partial 'stack/db'}}
           </div>
@@ -19,7 +19,7 @@
     <div class="sort-group pending-databases">
       <h5 class="sort-header">Provisioning Databases</h5>
       <div class="row">
-        {{#each pendingDatabases as |database|}}
+        {{#each sortedPendingDatabases as |database|}}
           <div class="col-xs-4">
             {{partial 'stack/db'}}
           </div>
@@ -32,7 +32,7 @@
     <div class="sort-group deprovisioned-databases">
       <h5 class="sort-header">Deprovisioned Databases</h5>
       <div class="row">
-        {{#each deprovisionedDatabases as |database|}}
+        {{#each sortedDeprovisionedDatabases as |database|}}
           <div class="col-xs-4">
             {{partial 'stack/db'}}
           </div>

app/organization/environments/index/controller.js

@@ -1,7 +1,14 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  sortBy: ['handle:asc'],
+
   activatedStacks: Ember.computed.filterBy('model', 'activated'),
   pendingStacks: Ember.computed.filterBy('model', 'pending'),
+
+  sortedActivatedStacks: Ember.computed.sort('activatedStacks', 'sortBy'),
+  sortedPendingStacks: Ember.computed.sort('pendingStacks', 'sortBy'),
+
+
   hasPending: Ember.computed.gt('pendingStacks.length', 0)
 });

app/organization/environments/index/template.hbs

@@ -16,7 +16,7 @@
         <h5 class="sort-header">Provisioned Environments</h5>
       {{/if}}
       <div class="row">
-        {{#each activatedStacks as |environment|}}
+        {{#each sortedActivatedStacks as |environment|}}
           <div class="col-xs-4">
 
             <div class="panel panel-default resource-list-item">
@@ -38,7 +38,7 @@
       <div class="sort-group">
         <h5 class="sort-header">Pending Environments</h5>
         <div class="row">
-          {{#each pendingStacks as |environment|}}
+          {{#each sortedPendingStacks as |environment|}}
             <div class="col-xs-4">
 
               <div class="panel panel-default resource-list-item">

app/organization/members/index/controller.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  sortBy: ['name:asc'],
+  invitesSortBy: ['email:asc'],
+
+  sortedMembers: Ember.computed.sort('model', 'sortBy'),
+  sortedInvites: Ember.computed.sort('organization.invitations', 'invitesSortBy')
+});

app/organization/members/index/template.hbs

@@ -2,27 +2,42 @@
 
 <div class="layout-container">
   <div class="resource-list-grid">
-    <div class="row">
-      {{#each model as |user|}}
-        <div class="col-xs-4">
-          {{#aptible-ability user=session.currentUser scope='manage' permittable=organization as |hasAbility|}}
-            {{#if hasAbility}}
-              {{#link-to 'organization.members.edit' user classNames='panel-link'}}
+
+
+    <div class="sort-group organization-members">
+      {{#if sortedInvites}}
+        <h5 class="sort-header">Current Members</h5>
+      {{/if}}
+      <div class="row">
+        {{#each sortedMembers as |user|}}
+          <div class="col-xs-4">
+            {{#aptible-ability user=session.currentUser scope='manage' permittable=organization as |hasAbility|}}
+              {{#if hasAbility}}
+                {{#link-to 'organization.members.edit' user classNames='panel-link'}}
+                  {{partial 'organization/user'}}
+                {{/link-to}}
+              {{else}}
                 {{partial 'organization/user'}}
-              {{/link-to}}
-            {{else}}
-              {{partial 'organization/user'}}
-            {{/if}}
-          {{/aptible-ability}}
-        </div>
-      {{/each}}
-      {{#each organization.invitations as |invitation|}}
-        <div class="col-xs-4">
-          {{partial 'organization/invited-user'}}
-        </div>
-      {{/each}}
+              {{/if}}
+            {{/aptible-ability}}
+          </div>
+        {{/each}}
+      </div>
     </div>
 
+    {{#if sortedInvites}}
+      <div class="sort-group organization-invites">
+        <h5 class="sort-header">Pending Invitations</h5>
+        <div class="row">
+          {{#each sortedInvites as |invitation|}}
+            <div class="col-xs-4">
+              {{partial 'organization/invited-user'}}
+            </div>
+          {{/each}}
+        </div>
+      </div>
+    {{/if}}
+
     <div class="resource-actions">
       {{#aptible-ability scope="manage" user=session.currentUser permittable=organization as |hasAbility|}}
         {{#if hasAbility}}
@@ -34,3 +49,5 @@
     </div>
   </div>
 </div>
+
+

app/organization/roles/index/controller.js

@@ -1,6 +1,8 @@
 import Ember from "ember";
 
 export default Ember.Controller.extend({
+  sortBy: ['name:asc'],
+  sortedRoles: Ember.computed.sort('model', 'sortBy'),
   confirmationModal: Ember.inject.service(),
 
   actions: {

app/organization/roles/index/template.hbs

@@ -3,7 +3,7 @@
 <div class="layout-container">
   <div class="resource-list-grid">
     <div class="row">
-      {{#each model as |role|}}
+      {{#each sortedRoles as |role|}}
         <div class="col-xs-4">
           {{#aptible-ability user=session.currentUser scope='manage' permittable=organization as |hasAbility|}}
             {{#if hasAbility}}

app/settings/ssh/controller.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  sortBy: ['name:asc'],
   error: null,
   newKey: null,
 
@@ -9,5 +10,7 @@ export default Ember.Controller.extend({
     return this.get('model').filter(function(key){
       return key.get('isLoaded') && !key.get('isDirty');
     });
-  }.property('model.@each.isLoaded', 'model.@each.isDirty')
+  }.property('model.@each.isLoaded', 'model.@each.isDirty'),
+
+  sortedKeys: Ember.computed.sort('validKeys', 'sortBy')
 });

app/settings/ssh/template.hbs

@@ -13,13 +13,13 @@
 
 <div class="row">
   <div class="col-xs-6">
-    {{#if validKeys}}
+    {{#if sortedKeys}}
       <div class="panel panel-default">
         <div class="panel-heading">
           <h3>SSH Keys</h3>
         </div>
         <div class="ssh-keys">
-          {{#each validKeys as |sshKey|}}
+          {{#each sortedKeys as |sshKey|}}
           <div class="ssh-key-item">
             <div class="ssh-key-info">
               <label>{{sshKey.name}}</label>