feat: 🎸 add sidebar data for session recording screen (#158)

* feat: 🎸 add sidebar data for session recording screen

✅ Closes: ICU-8610

* refactor: 💡 add logic for no storage bucket linked to target

* refactor: 💡 update comments

addons/core/translations/resources/en-us.yaml

@@ -214,6 +214,8 @@ org:
 session-recording:
   title: Session Recording
   title_plural: Session Recordings
+  details: Session details
+  related: Related
   connection:
     title: Connection
     title_plural: Connections

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

@@ -16,7 +16,27 @@ export default class ScopesScopeSessionRecordingsSessionRecordingRoute extends R
     if (!this.session.isAuthenticated) this.router.transitionTo('index');
   }
 
+  /**
+   * Load session recording and related storage bucket if present
+   * @return {SessionRecordingModel, ?StorageBucketModel}
+   */
   async model({ session_recording_id }) {
-    return this.store.findRecord('session-recording', session_recording_id);
+    let storageBucket = null;
+    const sessionRecording = await this.store.findRecord(
+      'session-recording',
+      session_recording_id
+    );
+    if (sessionRecording.target?.storage_bucket_id) {
+      const { storage_bucket_id } = sessionRecording.target;
+      storageBucket = await this.store.findRecord(
+        'storage-bucket',
+        storage_bucket_id
+      );
+    }
+
+    return {
+      sessionRecording,
+      storageBucket,
+    };
   }
 }

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

@@ -11,7 +11,10 @@
     <div class='channels-by-connection'>
       <Layout::Sidebar as |sb|>
         <sb.Body>
-          {{#each @model.connection_recordings as |connection|}}
+          {{#each
+            @model.sessionRecording.connection_recordings
+            as |connection|
+          }}
             <div class='channels-by-connection-connection-header'>
               <p class='hds-typography-display-300 hds-font-weight-semibold'>
                 {{t 'resources.session-recording.connection.title'}}
@@ -77,7 +80,50 @@
           {{/each}}
         </sb.Body>
         <sb.Sidebar>
-          <p>{{t 'actions.help'}}</p>
+          <div>
+            <h3>{{t 'resources.session-recording.details'}}</h3>
+            {{! Start time }}
+            <p>
+              <FlightIcon @name='calendar' />
+              {{@model.sessionRecording.start_time}}
+            </p>
+            {{! Duration }}
+            <p>
+              <FlightIcon @name='clock' />
+              {{@model.sessionRecording.duration}}
+            </p>
+
+            {{! Bytes up }}
+            <p>
+              <FlightIcon @name='arrow-up' />
+              {{@model.sessionRecording.bytes_up}}
+            </p>
+
+            {{! Bytes down }}
+            <p>
+              <FlightIcon @name='arrow-down' />
+              {{@model.sessionRecording.bytes_down}}
+            </p>
+          </div>
+          {{! Related }}
+          <div>
+            <h3>{{t 'resources.session-recording.related'}}</h3>
+            {{! User name }}
+            <p>
+              <FlightIcon @name='user' />
+              {{@model.sessionRecording.user.name}}
+            </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>
       </Layout::Sidebar>
     </div>