feat: 🎸 Add related channel information (#162)

* feat: 🎸 Add related channel information

addons/api/addon/models/session-recording.js

@@ -28,7 +28,19 @@ export default class SessionRecordingModel extends GeneratedSessionRecordingMode
     return !TYPES_SESSION_RECORDING.includes(this.type);
   }
 
+  /**
+   * Returns scope name or scope id from the target that belongs to the session recording.
+   * @type {string}
+   */
   get targetScopeDisplayName() {
     return this.target?.scope?.name || this.target?.scope?.id;
   }
+
+  /**
+   * Returns the user name or user id that belongs to the session recording.
+   * @type {string}
+   */
+  get userDisplayName() {
+    return this.user?.name || this.user?.id;
+  }
 }

addons/api/tests/unit/models/session-recording-test.js

@@ -56,32 +56,37 @@ module('Unit | Model | session-recording', function (hooks) {
     const store = this.owner.lookup('service:store');
     const fakeName = 'Scope name';
     const fakeId = 's_123456789';
-    // Scope models: A has just name, B has just id.
-    const scopeModelA = await store.createRecord('scope', {
-      type: 'global',
-      name: fakeName,
-      id: 's_1234567890',
-    });
-    const scopeModelB = await store.createRecord('scope', {
-      type: 'org',
-      id: fakeId,
-    });
-
-    const targetModelA = await store.createRecord('target', {
-      scope: scopeModelA,
-    });
-    const targetModelB = await store.createRecord('target', {
-      scope: scopeModelB,
-    });
 
     const modelA = store.createRecord('session-recording', {
-      target: targetModelA,
+      target: {
+        scope: { name: fakeName, id: fakeId },
+      },
     });
     const modelB = store.createRecord('session-recording', {
-      target: targetModelB,
+      target: {
+        scope: { id: fakeId },
+      },
     });
 
     assert.strictEqual(modelA.targetScopeDisplayName, fakeName);
     assert.strictEqual(modelB.targetScopeDisplayName, fakeId);
   });
+
+  test('it has userDisplayName and returns the expected values', async function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const fakeUserName = 'User name';
+    const fakeUserId = 'userid';
+
+    const userModelA = store.createRecord('session-recording', {
+      user: { name: fakeUserName, id: fakeUserId },
+    });
+
+    const userModelB = store.createRecord('session-recording', {
+      user: { id: fakeUserId },
+    });
+
+    assert.strictEqual(userModelA.userDisplayName, fakeUserName);
+    assert.strictEqual(userModelB.userDisplayName, fakeUserId);
+  });
 });

ui/admin/app/controllers/scopes/scope/session-recordings/session-recording.js

@@ -10,6 +10,6 @@ export default class ScopesScopeSessionRecordingsSessionRecordingController exte
    * Session recording breadcrumb
    */
   get breadCrumb() {
-    return this.model.displayName;
+    return this.model.sessionRecording.displayName;
   }
 }

ui/admin/app/routes/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js

@@ -7,7 +7,7 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
 
   // =methods
   async model({ channel_id }) {
-    const sessionRecording = await this.modelFor(
+    const { sessionRecording, storageBucket } = await this.modelFor(
       'scopes.scope.session-recordings.session-recording'
     );
     const channelRecording = await this.store.peekRecord(
@@ -21,6 +21,7 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
     return {
       channelRecording,
       sessionRecording,
+      storageBucket,
       asciicast: asciicast,
     };
   }

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -34,7 +34,7 @@
                 class='session-recording-list-cell-item hds-font-weight-semibold'
               >
                 <span><FlightIcon @name='user' /></span>
-                <span>{{B.data.user.name}}</span>
+                <span>{{B.data.userDisplayName}}</span>
               </div>
             </B.Td>
             {{! Target }}

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs

@@ -17,6 +17,7 @@
       </sb.Body>
 
       <sb.Sidebar>
+        {{! Channel details information }}
         <div>
           <h3>{{t 'resources.session-recording.channel.details'}}</h3>
           {{! Start time }}
@@ -25,12 +26,6 @@
             {{@model.channelRecording.start_time}}
           </p>
 
-          {{! Created By }}
-          <p>
-            <FlightIcon @name='corner-down-right' />
-            {{@model.sessionRecording.user.name}}
-          </p>
-
           {{! Type }}
           <p>
             <FlightIcon @name='terminal-screen' />
@@ -54,11 +49,27 @@
             <FlightIcon @name='arrow-down' />
             {{format-bytes-size @model.channelRecording.bytes_down}}
           </p>
+        </div>
 
-          {{! Errors }}
+        {{! Channel related information }}
+        <div>
+          <h3>{{t 'resources.session-recording.related'}}</h3>
+          {{! User name }}
           <p>
-            <FlightIcon @name='alert-triangle' />
-            {{@model.channelRecording.errors}}
+            <FlightIcon @name='user' />
+            {{#if @model.sessionRecording.user}}
+              {{@model.sessionRecording.userDisplayName}}
+            {{/if}}
+          </p>
+          {{! Target name }}
+          <p>
+            <FlightIcon @name='target' />
+            {{@model.sessionRecording.target.name}}
+          </p>
+          {{! Bucket name }}
+          <p>
+            <FlightIcon @name='cloud-check' />
+            {{@model.storageBucket.name}}
           </p>
         </div>
       </sb.Sidebar>

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs

@@ -111,7 +111,9 @@
             {{! User name }}
             <p>
               <FlightIcon @name='user' />
-              {{@model.sessionRecording.user.name}}
+              {{#if @model.sessionRecording.user}}
+                {{@model.sessionRecording.userDisplayName}}
+              {{/if}}
             </p>
             {{! Target name }}
             <p>
@@ -121,10 +123,7 @@
             {{! Bucket name }}
             <p>
               <FlightIcon @name='cloud-check' />
-              {{or
-                @model.storageBucket.name
-                (t 'resources.storage-bucket.title')
-              }}
+              {{@model.storageBucket.name}}
             </p>
           </div>
         </sb.Sidebar>