feat: 🎸 sort Connections and Channels by start_time (#213)

✅ Closes: ICU-8962

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

@@ -17,8 +17,9 @@ export default class ScopesScopeSessionRecordingsSessionRecordingRoute extends R
   }
 
   /**
-   * Load session recording and related storage bucket if present
-   * @return {SessionRecordingModel, ?StorageBucketModel}
+   * Load session recording, sorted connections and channels,
+   * and related storage bucket if present
+   * @return {SessionRecordingModel, [ConnectionRecordingModel] ?StorageBucketModel}
    */
   async model({ session_recording_id }) {
     let storageBucket = null;
@@ -38,13 +39,23 @@ export default class ScopesScopeSessionRecordingsSessionRecordingRoute extends R
     } catch (e) {
       // no op
     }
+
     const sortedConnections = sessionRecording.connection_recordings
       .sortBy('start_time')
-      .reverse();
-    sessionRecording.connection_recordings = sortedConnections;
+      .reverse()
+      .map((connection) => {
+        const sortedChannels = connection.channel_recordings
+          .sortBy('start_time')
+          .reverse();
+        return {
+          connection,
+          channels: sortedChannels,
+        };
+      });
 
     return {
       sessionRecording,
+      sortedConnections,
       storageBucket,
     };
   }

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

@@ -11,18 +11,15 @@
     <div class='channels-by-connection'>
       <Layout::Sidebar as |sb|>
         <sb.Body>
-          {{#each
-            @model.sessionRecording.connection_recordings
-            as |connection|
-          }}
+          {{#each @model.sortedConnections 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'}}
-                {{connection.id}}
+                {{connection.connection.id}}
               </p>
             </div>
             <Hds::Table
-              @model={{connection.channel_recordings}}
+              @model={{connection.channels}}
               @density='tall'
               @columns={{array
                 (hash