Icu 11861 add sorting to session recording (#2005)

* refactor: 💡 add sorting to session recordings & sessions

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11861

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

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

---------

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

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

@@ -5,6 +5,7 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import orderBy from 'lodash/orderBy';
 
 export default class ScopesScopeSessionRecordingsRoute extends Route {
   // =services
@@ -43,6 +44,13 @@ export default class ScopesScopeSessionRecordingsRoute extends Route {
         recursive: true,
       });
 
+      // Sort sessions by created time descending (newest on top)
+      const sortedSessionRecordings = orderBy(
+        sessionRecordings,
+        'created_time',
+        'desc',
+      );
+
       // Storage buckets could fail for a number of reasons, including that
       // the user isn't authorized to access them.
       try {
@@ -55,7 +63,7 @@ export default class ScopesScopeSessionRecordingsRoute extends Route {
       }
 
       return {
-        sessionRecordings,
+        sessionRecordings: sortedSessionRecordings,
         storageBuckets,
       };
     }

ui/admin/app/routes/scopes/scope/sessions.js

@@ -11,6 +11,7 @@ import runEvery from 'ember-pollster/decorators/route/run-every';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 import config from '../../../config/environment';
 import { resourceFilter } from 'core/decorators/resource-filter';
+import orderBy from 'lodash/orderBy';
 
 const POLL_TIMEOUT_SECONDS = config.sessionPollingTimeoutSeconds;
 
@@ -79,12 +80,19 @@ export default class ScopesScopeSessionsRoute extends Route {
       ),
     );
 
+    // Sort sessions by created time descending (newest on top)
+    let sortedSessionAggregates = orderBy(
+      sessionAggregates,
+      'created_time',
+      'desc',
+    );
+
     // Move active sessions to the top...
-    const sortedSessionAggregates = [
-      ...sessionAggregates.filter(
+    sortedSessionAggregates = [
+      ...sortedSessionAggregates.filter(
         (aggregate) => aggregate.session.status === 'active',
       ),
-      ...sessionAggregates.filter(
+      ...sortedSessionAggregates.filter(
         (aggregate) => aggregate.session.status !== 'active',
       ),
     ];

ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js

@@ -4,6 +4,7 @@
  */
 
 import Controller from '@ember/controller';
+import orderBy from 'lodash/orderBy';
 
 export default class ScopesScopeProjectsSessionsIndexController extends Controller {
   // =attributes
@@ -15,11 +16,13 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
    */
   get sorted() {
     const sessions = this.model;
+    // Sort sessions by created time descending (newest on top)
+    const sortedSessions = orderBy(sessions, 'created_time', 'desc');
     return [
       // then move active sessions to the top
-      ...sessions.filter((session) => session.isAvailable),
+      ...sortedSessions.filter((session) => session.isAvailable),
       // and all others to the end
-      ...sessions.filter((session) => !session.isAvailable),
+      ...sortedSessions.filter((session) => !session.isAvailable),
     ];
   }
 }