feat: 🎸 Add Channel data from mirage (#151)

* feat: 🎸 Add Channel data from mirage

✅ Closes: ICU-8635

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

@@ -222,6 +222,7 @@ session-recording:
   channel:
     title: Channel
     title_plural: Channels
+    details: Channel details
   session:
     title: Session Playback
   form:

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

@@ -7,11 +7,20 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
 
   // =methods
   async model({ channel_id }) {
+    const sessionRecording = await this.modelFor(
+      'scopes.scope.session-recordings.session-recording'
+    );
+    const channelRecording = await this.store.peekRecord(
+      'channel-recording',
+      channel_id
+    );
+
     const response = await fetch('/session.cast');
     const asciicast = await response.text();
 
     return {
-      channel_id: channel_id,
+      channelRecording,
+      sessionRecording,
       asciicast: asciicast,
     };
   }

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

@@ -6,7 +6,8 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t 'resources.session-recording.channel.title'}}</h2>
+    <h2>{{t 'resources.session-recording.channel.title'}}
+      {{@model.channelRecording.id}}</h2>
   </page.header>
 
   <page.body>
@@ -16,7 +17,50 @@
       </sb.Body>
 
       <sb.Sidebar>
-        <p>{{@model.channel_id}}</p>
+        <div>
+          <h3>{{t 'resources.session-recording.channel.details'}}</h3>
+          {{! Started time }}
+          <p>
+            <FlightIcon @name='calendar' />
+            {{@model.channelRecording.started_time}}
+          </p>
+
+          {{! Created By }}
+          <p>
+            <FlightIcon @name='corner-down-right' />
+            {{@model.sessionRecording.user.name}}
+          </p>
+
+          {{! Type }}
+          <p>
+            <FlightIcon @name='terminal-screen' />
+            {{@model.sessionRecording.type}}
+          </p>
+
+          {{! Duration }}
+          <p>
+            <FlightIcon @name='clock' />
+            {{@model.channelRecording.duration}}
+          </p>
+
+          {{! Bytes up }}
+          <p>
+            <FlightIcon @name='arrow-up' />
+            {{@model.channelRecording.bytes_up}}
+          </p>
+
+          {{! Bytes down }}
+          <p>
+            <FlightIcon @name='arrow-down' />
+            {{@model.channelRecording.bytes_down}}
+          </p>
+
+          {{! Errors }}
+          <p>
+            <FlightIcon @name='alert-triangle' />
+            {{@model.channelRecording.errors}}
+          </p>
+        </div>
       </sb.Sidebar>
     </Layout::Sidebar>
   </page.body>