refactor: Sort and filter active sessions in a target

ui/desktop/app/controllers/scopes/scope/projects/targets/target/sessions.js

@@ -0,0 +1,36 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { A } from '@ember/array';
+
+export default class ScopesScopeProjectsTargetsTargetSessionsController extends Controller {
+  // =services
+
+  @service session;
+
+  /**
+   * Sort and filter to active sessions of current user
+   * @param {[SessionModel]} model
+   * @param {object} session
+   * @type {[SessionModel]}
+   */
+  @computed('model.@each.{created_time,active}', 'session.data.authenticated.user_id')
+  get selfActiveSessions() {
+    const sessions = this.model;
+    const userId = this.session.data.authenticated.user_id;
+    const filteredSessions =
+      sessions.filter(session =>
+        session.isCancelable &&
+        session.user_id === userId
+      );
+
+    // Sort sessions
+    const sortedSessions = A(filteredSessions).sortBy('created_time').reverse();
+
+    // Move active sessions to top
+    return [
+      ...sortedSessions.filter(session => session.isActive),
+      ...sortedSessions.filter(session => !session.isActive)
+    ]
+  }
+}

ui/desktop/app/routes/scopes/scope/projects/targets/target.js

@@ -1,36 +1,17 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
-import { A } from '@ember/array';
 
 export default class ScopesScopeProjectsTargetsTargetRoute extends Route {
 
-  // =services
-
-  @service session;
-
   // =methods
 
   /**
-   * Load a target and it's active sessions
+   * Load a target
    * @param {object} params
    * @param {string} params.target_id
-   * @return {{TargetModel, [SessionModel]}}
+   * @return {TargetModel}
    */
-  async model({ target_id }) {
-    const userId = this.session.data.authenticated.user_id;
-    const target = await this.store.findRecord('target', target_id, { reload: true });
-    const sessions = await this.store.query('session', { scope_id: target.scopeID });
-
-    // Filter to current user, current target, and active state
-    const filteredSessions = sessions.filter(
-      session => session.user_id === userId &&
-        session.target_id === target.id &&
-        session.isCancelable
-    )
-    // Sort sessions by time created
-    const sortedSessions =
-      A(filteredSessions).sortBy('session.created_time').reverse();
-    return { target, sessions: sortedSessions };
+  model({ target_id }) {
+    return this.store.findRecord('target', target_id, { reload: true });
   }
 
   /**

ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js

@@ -18,7 +18,7 @@ export default class ScopesScopeProjectsTargetsTargetHostsRoute extends Route {
    * @return {Promise{[HostModel]}}
    */
   async model() {
-    const { target } = this.modelFor('scopes.scope.projects.targets.target');
+    const target = this.modelFor('scopes.scope.projects.targets.target');
     // Load all host-sets
     const hostSets = await all(
       target.host_sets.map(({ host_set_id }) =>

ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js

@@ -3,6 +3,16 @@ import { action } from '@ember/object';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route {
+
+  // =methods
+
+  /**
+   * @return {[SessionModel]}
+   */
+  model() {
+    return this.modelFor('scopes.scope.projects.targets.target').sessions;
+  }
+
   // =actions
 
   /**

ui/desktop/app/templates/scopes/scope/projects/targets/target/-actions.hbs

@@ -1,3 +1,3 @@
-<Rose::Button @style="primary" {{on "click" (route-action "connect" @model.target)}}>
+<Rose::Button @style="primary" {{on "click" (route-action "connect" @model)}}>
   {{t "resources.session.actions.connect"}}
 </Rose::Button>

ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs

@@ -1,18 +1,18 @@
 <h2>
-  {{@model.target.displayName}}
-  {{#if @model.target.isActive}}
+  {{@model.displayName}}
+  {{#if @model.isActive}}
     <Rose::Badge @style="success">
       {{t "states.active"}}
     </Rose::Badge>
   {{/if}}
 </h2>
-<p>{{@model.target.description}}</p>
+<p>{{@model.description}}</p>
 <p>
   <Copyable
-    @text={{@model.target.id}}
+    @text={{@model.id}}
     @buttonText={{t "actions.copy-to-clipboard"}}
     @acknowledgeText={{t "states.copied"}}
   >
-    <code>{{@model.target.id}}</code>
+    <code>{{@model.id}}</code>
   </Copyable>
 </p>

ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs

@@ -1,10 +1,6 @@
 <Rose::Table as |table|>
   <table.body as |body|>
-    {{!--
-      TODO:  sort these via the controller so that active and pending appear first
-      similar to the way the sessions routes are sorted.
-     --}}
-    {{#each @model.target.sessions as |session|}}
+    {{#each this.selfActiveSessions as |session|}}
       <body.row as |row|>
         <row.cell class="nowrap">
           <Rose::Icon

ui/desktop/tests/unit/controllers/scopes/scope/projects/targets/target/sessions-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/targets/target/sessions', function(hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/targets/target/sessions');
+    assert.ok(controller);
+  });
+});