Merge pull request #461 from hashicorp/fix-target-sessions-polling

fix: 🐛 target sessions should update on poll

ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js

@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class ScopesScopeProjectsSessionsIndexController extends Controller {
@@ -15,7 +14,6 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
    * and active/pending.
    * @type {SessionModel[]}
    */
-  @computed('model.@each.{created_time,active}', 'session.data.authenticated.user_id')
   get sorted() {
     const userId = this.session.data.authenticated.user_id;
     const sessions = this.model;

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

@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { A } from '@ember/array';
 
@@ -9,14 +8,21 @@ export default class ScopesScopeProjectsTargetsTargetSessionsController extends
   @service session;
 
   /**
-   * Sort and filter to active sessions of current user
+   * Sessions belonging to the target.
+   * @type {SessionModel[]}
+   */
+  get sessions() {
+    return this.model.sessions;
+  }
+
+  /**
+   * 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;
+  get cancelableUserSessions() {
+    const sessions = this.sessions;
     const userId = this.session.data.authenticated.user_id;
     const filteredSessions =
       sessions.filter(session =>
@@ -27,10 +33,6 @@ export default class ScopesScopeProjectsTargetsTargetSessionsController extends
     // 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)
-    ]
+    return sortedSessions;
   }
 }

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

@@ -4,15 +4,6 @@ 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
 
   /**
@@ -25,4 +16,5 @@ export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route
   async cancelSession(session) {
     await session.cancelSession();
   }
+
 }

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

@@ -1,8 +1,19 @@
-{{#if this.selfActiveSessions}}
+{{#if this.cancelableUserSessions}}
+
   <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.headerCell>{{t "form.id.label"}}</row.headerCell>
+        <row.headerCell>{{t "form.proxy.label"}}</row.headerCell>
+        <row.headerCell>{{t "form.started.label"}}</row.headerCell>
+        <row.headerCell />
+      </header.row>
+    </table.header>
     <table.body as |body|>
-      {{#each this.selfActiveSessions as |session|}}
+
+      {{#each this.cancelableUserSessions as |session|}}
         <body.row as |row|>
+
           <row.cell class="nowrap">
             <Rose::Icon
               class={{concat "session-status-" session.status}}
@@ -15,33 +26,41 @@
             >
               <code>{{session.id}}</code>
             </Copyable>
+            <Rose::Badge>{{session.status}}</Rose::Badge>
           </row.cell>
+
           <row.cell>
-            {{!--
-              Two if's here because:
-              1) Local proxy info is only relevant if the session is
-                  active or pending (aka isCancelable).  Once the session
-                  is canceled or in the process thereof, the local proxy
-                  may no longer be used.
-              2) The session actually has proxy information associated
-                  with it.  It's possible for the user to start sessions
-                  from other devices (or even another tab), in which case we
-                  won't have the local proxy info available here.
-            --}}
-            {{#if session.isCancelable}}
-              {{#if session.proxy}}
-                <Copyable
-                  @text={{session.proxy}}
-                  @buttonText={{t "actions.copy-to-clipboard"}}
-                  @acknowledgeText={{t "states.copied"}}
-                >
-                  <code>{{session.proxy}}</code>
-                </Copyable>
-              {{/if}}
+            {{#if session.proxy}}
+              <Copyable
+                @text={{session.proxy}}
+                @buttonText={{t "actions.copy-to-clipboard"}}
+                @acknowledgeText={{t "states.copied"}}
+              >
+                <code>{{session.proxy}}</code>
+              </Copyable>
             {{/if}}
           </row.cell>
+
+          <row.cell>
+            <time datetime={{format-date-iso session.created_time}}>
+              {{format-date-iso-human session.created_time}}
+            </time>
+          </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>
 
@@ -56,4 +75,3 @@
   </Rose::Layout::Centered>
 
 {{/if}}
-