From fbdae2c532ba7302f95a81e039a5a91b85578613 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 4 Feb 2021 10:49:14 -0500
Subject: [PATCH 1/4] feat: Add /target/sessions route

---
 addons/core/translations/resources/en-us.yaml        |  1 +
 ui/desktop/app/router.js                             |  1 +
 .../routes/scopes/scope/projects/targets/target.js   |  7 +++----
 .../scopes/scope/projects/targets/target/sessions.js | 12 ++++++++++++
 .../scope/projects/targets/target/-navigation.hbs    |  3 +++
 .../scope/projects/targets/target/sessions.hbs       |  1 +
 .../scope/projects/targets/target/sessions-test.js   | 11 +++++++++++
 7 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
 create mode 100644 ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
 create mode 100644 ui/desktop/tests/unit/routes/scopes/scope/projects/targets/target/sessions-test.js

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 7ad5434d1..ff2dce9eb 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -104,6 +104,7 @@ host:
 session:
   title: Session
   title_plural: Sessions
+  active_plural: Active Sessions
   description: A session is a connection to a target initiated through Boundary.
   messages:
     none:
diff --git a/ui/desktop/app/router.js b/ui/desktop/app/router.js
index 8e4b8d71e..0af5b7e46 100644
--- a/ui/desktop/app/router.js
+++ b/ui/desktop/app/router.js
@@ -16,6 +16,7 @@ Router.map(function () {
         this.route('targets', function () {
           this.route('target', { path: ':target_id' }, function() {
             this.route('hosts');
+            this.route('sessions');
           });
         });
         this.route('sessions', function() {});
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
index 29efcc413..3c2be903f 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
@@ -14,11 +14,10 @@ export default class ScopesScopeProjectsTargetsTargetRoute extends Route {
   }
 
   /**
-   * Navigate to hostsets within a target.
-   * @param {TargetModel} model 
+   * Navigate to sessions within a target.
    */
-  afterModel(model) {
-    this.transitionTo('scopes.scope.projects.targets.target.hosts', model);
+  afterModel() {
+    this.transitionTo('scopes.scope.projects.targets.target.sessions');
   }
 
   /**
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
new file mode 100644
index 000000000..2b071e3a7
--- /dev/null
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route {
+  // =methods
+
+  /**
+   * Loads all sessions and filter to current target.
+   * @return {Promise{[SessionModel]}}
+   */
+  async model() {
+  }
+}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-navigation.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-navigation.hbs
index bac5c17a3..12bfe97f8 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-navigation.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-navigation.hbs
@@ -1,4 +1,7 @@
 <Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.targets.target.sessions'>
+    {{t 'resources.session.active_plural'}}
+  </nav.link>
   <nav.link @route='scopes.scope.projects.targets.target.hosts'>
     {{t 'resources.host.title_plural'}}
   </nav.link>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
new file mode 100644
index 000000000..c24cd6895
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/ui/desktop/tests/unit/routes/scopes/scope/projects/targets/target/sessions-test.js b/ui/desktop/tests/unit/routes/scopes/scope/projects/targets/target/sessions-test.js
new file mode 100644
index 000000000..2208beec8
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/scopes/scope/projects/targets/target/sessions-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/targets/target/sessions', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/targets/target/sessions');
+    assert.ok(route);
+  });
+});

From c90e4fa69a96c829b8550d7c6b1dd640acbc2d33 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 4 Feb 2021 16:18:04 -0500
Subject: [PATCH 2/4] feat: Show active sessions under /target/:target_id route

---
 .../app/routes/scopes/scope/projects.js       | 15 +++++++++
 .../routes/scopes/scope/projects/sessions.js  |  1 +
 .../scopes/scope/projects/targets/target.js   | 26 +++++++++++++--
 .../scope/projects/targets/target/hosts.js    |  4 +--
 .../scope/projects/targets/target/index.js    |  2 +-
 .../scope/projects/targets/target/sessions.js |  3 +-
 .../scopes/scope/projects/sessions/index.hbs  |  8 +++++
 .../scopes/scope/projects/targets/target.hbs  |  2 +-
 .../scope/projects/targets/target/-header.hbs |  4 +--
 .../projects/targets/target/sessions.hbs      | 33 ++++++++++++++++++-
 10 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/app/routes/scopes/scope/projects.js b/ui/desktop/app/routes/scopes/scope/projects.js
index fb77550fd..585a35ab6 100644
--- a/ui/desktop/app/routes/scopes/scope/projects.js
+++ b/ui/desktop/app/routes/scopes/scope/projects.js
@@ -1,5 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeProjectsRoute extends Route {
   // =services
@@ -25,4 +27,17 @@ export default class ScopesScopeProjectsRoute extends Route {
       scope_id: currentScope.id,
     });
   }
+
+  // =actions
+
+  /**
+   * Cancels the specified session and notifies user of success or error.
+   * @param {SessionModel}
+   */
+  @action
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.canceled-success')
+  async cancelSession(session) {
+    await session.cancelSession();
+  }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/sessions.js
index 83baf114b..ee013ee3c 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/sessions.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/sessions.js
@@ -99,4 +99,5 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {
   deactivate() {
     this.poller.cancelAll();
   }
+
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
index 5031c8a4a..45d18cdd6 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target.js
@@ -1,16 +1,36 @@
 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.
+   * Load a target and it's active sessions
    * @param {object} params
    * @param {string} params.target_id
-   * @return {TargetModel}
+   * @return {{TargetModel, [SessionModel]}}
    */
   async model({ target_id }) {
-    return this.store.findRecord('target', target_id, { reload: true });
+    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 };
   }
 
   /**
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js
index fda131f12..349543f4c 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js
@@ -9,10 +9,10 @@ export default class ScopesScopeProjectsTargetsTargetHostsRoute extends Route {
    * @return {Promise{[HostModel]}}
    */
   async model() {
-    const { host_sets } = this.modelFor('scopes.scope.projects.targets.target');
+    const { target } = this.modelFor('scopes.scope.projects.targets.target');
     // Load all host-sets
     const hostSets = await all(
-      host_sets.map(({ host_set_id }) => 
+      target.host_sets.map(({ host_set_id }) => 
         this.store.findRecord('host-set', host_set_id)
       )
     );
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target/index.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target/index.js
index dca9bcd77..0f92ba860 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target/index.js
@@ -7,7 +7,7 @@ export default class ScopesScopeProjectsTargetsTargetIndexRoute extends Route {
    * Navigate to hosts within a target.
    */
   afterModel() {
-    this.transitionTo('scopes.scope.projects.targets.target.hosts');
+    this.transitionTo('scopes.scope.projects.targets.target.sessions');
   }
 
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
index 2b071e3a7..bf3f475f3 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
@@ -4,9 +4,10 @@ export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route
   // =methods
 
   /**
-   * Loads all sessions and filter to current target.
+   * Loads all sessions for current target.
    * @return {Promise{[SessionModel]}}
    */
   async model() {
+    return this.modelFor('scopes.scope.projects.targets.target').sessions;
   }
 }
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index d0847dbb3..21f09f00c 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -15,6 +15,7 @@
             <row.headerCell>{{t "resources.target.title"}}</row.headerCell>
             <row.headerCell>{{t "form.started.label"}}</row.headerCell>
             <row.headerCell>{{t "form.status.label"}}</row.headerCell>
+            <row.headerCell />
           </header.row>
         </table.header>
         <table.body as |body|>
@@ -36,6 +37,13 @@
               <row.cell>
                 <Rose::Badge>{{sessionAggregate.session.status}}</Rose::Badge>
               </row.cell>
+              <row.cell>
+                {{#if sessionAggregate.session.isCancelable}}
+                  <Rose::Button @style="secondary" {{on "click" (route-action "cancelSession" sessionAggregate.session)}}>
+                    {{t "actions.cancel"}}
+                  </Rose::Button>
+                {{/if}}
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
index 0ca9acc68..525892043 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
@@ -1,4 +1,4 @@
-{{page-title @model.displayName}}
+{{page-title @model.target.displayName}}
 
 <Rose::Layout::Page as |page|>
 
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
index 695e13318..41f83d562 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
@@ -1,4 +1,4 @@
 <h2>
-  {{@model.displayName}}
+  {{@model.target.displayName}}
 </h2>
-<p>{{@model.description}}</p>
\ No newline at end of file
+<p>{{@model.target.description}}</p>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index c24cd6895..84571556b 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -1 +1,32 @@
-{{outlet}}
+<Rose::Table as |table|>
+  <table.body as |body|>
+    {{#each @model as |session|}}
+      <body.row as |row|>
+        <row.cell class="nowrap">
+          <Rose::Icon
+            class={{concat "session-status-" session.status}}
+            @name="app-icons/action-session"
+            @size="medium" />
+          {{session.id}}
+        </row.cell>
+        <row.cell>{{user.displayName}}</row.cell>
+        <row.cell>{{target.displayName}}</row.cell>
+        <row.cell>
+          <time datetime={{format-date-iso session.created_time}}>
+            {{format-date-iso-human session.created_time}}
+          </time>
+        </row.cell>
+        <row.cell>
+          <Rose::Badge>{{session.status}}</Rose::Badge>
+        </row.cell>
+        <row.cell>
+          {{#if session.isCancelable}}
+            <Rose::Button @style="secondary" {{on "click" (route-action "cancelSession" session)}}>
+              {{t "actions.cancel"}}
+            </Rose::Button>
+          {{/if}}
+        </row.cell>
+      </body.row>
+    {{/each}}
+  </table.body>
+</Rose::Table>

From b0f450f8e96632049ab03c10fd31b59284ee279f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 4 Feb 2021 16:36:43 -0500
Subject: [PATCH 3/4] chore: Fix lint errors

---
 .../templates/scopes/scope/projects/targets/target/sessions.hbs | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index 84571556b..49a8e2585 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -9,8 +9,6 @@
             @size="medium" />
           {{session.id}}
         </row.cell>
-        <row.cell>{{user.displayName}}</row.cell>
-        <row.cell>{{target.displayName}}</row.cell>
         <row.cell>
           <time datetime={{format-date-iso session.created_time}}>
             {{format-date-iso-human session.created_time}}

From 2e2ca24e625c27c03040c88971247f35c26196cb Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 5 Feb 2021 09:34:44 -0500
Subject: [PATCH 4/4] refactor: Move cancelSession route action to /sessions
 routes

---
 ui/desktop/app/routes/scopes/scope/projects.js    | 14 --------------
 .../app/routes/scopes/scope/projects/sessions.js  | 14 ++++++++++++++
 .../scope/projects/targets/target/sessions.js     | 15 +++++++++++++++
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/ui/desktop/app/routes/scopes/scope/projects.js b/ui/desktop/app/routes/scopes/scope/projects.js
index 585a35ab6..0d7ada97c 100644
--- a/ui/desktop/app/routes/scopes/scope/projects.js
+++ b/ui/desktop/app/routes/scopes/scope/projects.js
@@ -1,7 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeProjectsRoute extends Route {
   // =services
@@ -28,16 +26,4 @@ export default class ScopesScopeProjectsRoute extends Route {
     });
   }
 
-  // =actions
-
-  /**
-   * Cancels the specified session and notifies user of success or error.
-   * @param {SessionModel}
-   */
-  @action
-  @notifyError(({ message }) => message, { catch: true })
-  @notifySuccess('notifications.canceled-success')
-  async cancelSession(session) {
-    await session.cancelSession();
-  }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/sessions.js
index ee013ee3c..1c0f133ef 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/sessions.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/sessions.js
@@ -4,6 +4,8 @@ import { all, hash } from 'rsvp';
 import { task, timeout } from 'ember-concurrency';
 import { A } from '@ember/array';
 import config from '../../../../config/environment';
+import { action } from '@ember/object';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 const POLL_TIMEOUT_SECONDS = config.sessionPollingTimeoutSeconds;
 
@@ -100,4 +102,16 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {
     this.poller.cancelAll();
   }
 
+  // =actions
+
+  /**
+   * Cancels the specified session and notifies user of success or error.
+   * @param {SessionModel}
+   */
+  @action
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.canceled-success')
+  async cancelSession(session) {
+    await session.cancelSession();
+  }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
index bf3f475f3..8b448bd47 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/target/sessions.js
@@ -1,4 +1,6 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route {
   // =methods
@@ -10,4 +12,17 @@ export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route
   async model() {
     return this.modelFor('scopes.scope.projects.targets.target').sessions;
   }
+
+  // =actions
+
+  /**
+   * Cancels the specified session and notifies user of success or error.
+   * @param {SessionModel}
+   */
+  @action
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.canceled-success')
+  async cancelSession(session) {
+    await session.cancelSession();
+  }
 }