From ebe504ff6a09cfa12918b24371b16e6baa78e5a7 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 21 Apr 2023 12:20:25 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20sort=20Connections=20and?=
 =?UTF-8?q?=20Channels=20by=20start=5Ftime=20(#213)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-8962
---
 .../session-recordings/session-recording.js   | 19 +++++++++++++++----
 .../session-recording/index.hbs               |  9 +++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui/admin/app/routes/scopes/scope/session-recordings/session-recording.js b/ui/admin/app/routes/scopes/scope/session-recordings/session-recording.js
index 8e28a9802..fa7d5f926 100644
--- a/ui/admin/app/routes/scopes/scope/session-recordings/session-recording.js
+++ b/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,
     };
   }
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
index 073f994ac..9c110729d 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
+++ b/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