Merge pull request #121 from hashicorp/feat-use-mirage-for-recordings-navigation

feat: 🎸 Use mirage data for simple navigation

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

@@ -214,6 +214,9 @@ org:
 session-recording:
   title: Session Recording
   title_plural: Session Recordings
+  connection:
+    title: Connection
+    title_plural: Connections
   channel:
     title: Channel
     title_plural: Channels

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

@@ -24,14 +24,11 @@ export default class ScopesScopeSessionRecordingsRoute extends Route {
    */
   model() {
     // TODO: awaiting modeled data
-    // const scope = this.modelFor('scopes.scope');
-    // const { id: scope_id } = scope;
+    const scope = this.modelFor('scopes.scope');
+    const { id: scope_id } = scope;
     // if (this.can.can('list session-recording', scope, { collection: 'session-recordings' })) {
-    //   return this.store.query('session-recording', { scope_id });
+    return this.store.query('recording', { scope_id });
     // }
-    return {
-      session_recording_id: 'sr_1234567890',
-    };
   }
 
   // =actions

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

@@ -1,12 +1,22 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeSessionRecordingsSessionRecordingRoute extends Route {
   // =services
+  @service store;
+  @service session;
+  @service router;
+
   // =methods
-  model() {
-    return {
-      session_recording_id: 'sr_1234567890',
-      channel_connection_id: 'srcc_1234567890',
-    };
+
+  /**
+   * If arriving here unauthenticated, redirect to index for further processing.
+   */
+  beforeModel() {
+    if (!this.session.isAuthenticated) this.router.transitionTo('index');
+  }
+
+  async model({ session_recording_id }) {
+    return this.store.findRecord('recording', session_recording_id);
   }
 }

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

@@ -1,12 +1,17 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelRoute extends Route {
-  async model() {
+  // =services
+  @service store;
+
+  // =methods
+  async model({ channel_id }) {
     const response = await fetch('/session.cast');
     const asciicast = await response.text();
 
     return {
-      scope_id: 'srcc_1234567890',
+      channel_id: channel_id,
       asciicast: asciicast,
     };
   }

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

@@ -12,7 +12,7 @@
       </sb.Body>
 
       <sb.Sidebar>
-        <p>{{@model.scope_id}}</p>
+        <p>{{@model.channel_id}}</p>
       </sb.Sidebar>
     </Layout::Sidebar>
   </page.body>

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

@@ -8,20 +8,23 @@
       <sb.Body>
         <p>
           {{t 'resources.session-recording.title'}}
-          {{@model.session_recording_id}}
+          {{@model.id}}
         </p>
 
-        <p>
-          {{t 'resources.session-recording.channel.title'}}
-          {{@model.channel_connection_id}}
-        </p>
-
-        <LinkTo
-          @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
-          @model={{@model.channel_connection_id}}
-        >
-          {{@model.channel_connection_id}}
-        </LinkTo>
+        {{#each @model.connections as |connection|}}
+          <p>{{t 'resources.session-recording.connection.title'}}
+            {{connection.id}}</p>
+          {{#each connection.channels as |channel|}}
+            <p>
+              <LinkTo
+                @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
+                @model={{channel.id}}
+              >
+                {{channel.id}}
+              </LinkTo>
+            </p>
+          {{/each}}
+        {{/each}}
       </sb.Body>
 
       <sb.Sidebar>