feat: Add hosts nav tab in a target view

ui/desktop/app/router.js

@@ -14,7 +14,9 @@ Router.map(function () {
       });
       this.route('projects', function () {
         this.route('targets', function () {
-          this.route('target', { path: ':target_id' }, function() {});
+          this.route('target', { path: ':target_id' }, function() {
+            this.route('hosts');
+          });
         });
         this.route('sessions', function() {});
       });

ui/desktop/app/routes/scopes/scope/projects/targets/target.js

@@ -13,6 +13,14 @@ export default class ScopesScopeProjectsTargetsTargetRoute extends Route {
     return this.store.findRecord('target', target_id, { reload: true });
   }
 
+  /**
+   * Navigate to hostsets within a target.
+   * @param {TargetModel} model 
+   */
+  afterModel(model) {
+    this.transitionTo('scopes.scope.projects.targets.target.hosts', model);
+  }
+
   /**
    * Renders the target-specific templates for header and navigation
    * page sections.

ui/desktop/app/routes/scopes/scope/projects/targets/target/hosts.js

@@ -0,0 +1,35 @@
+import Route from '@ember/routing/route';
+import { all, hash } from 'rsvp';
+import { A } from '@ember/array';
+
+export default class ScopesScopeProjectsTargetsTargetHostsRoute extends Route {
+  // =methods
+
+  /**
+   * Loads all host-sets and associated hosts under the current target.
+   * @return {Promise{[HostModel]}}
+   */
+  async model() {
+    const { host_sets } = this.modelFor('scopes.scope.projects.targets.target');
+    const hostSetsPromises = await all(
+      host_sets.map(({ host_set_id }) => 
+        this.store.findRecord('host-set', host_set_id)
+      )
+    );
+
+    // Extract host ids from all host set
+    const hostIds = A();
+    hostSetsPromises.map(({ host_ids }) => 
+      host_ids.forEach(({ value }) => hostIds.push(value) )
+    );
+    
+    // Fetch all hosts
+    const hostPromises = await all(
+      hostIds.uniq().map((hostId) => 
+        this.store.findRecord('host', hostId)
+      )
+    )
+
+    return all(hostPromises);
+  }
+}

ui/desktop/app/templates/scopes/scope/projects/targets/target/-navigation.hbs

@@ -1,5 +1,5 @@
 <Rose::Nav::Tabs as |nav|>
-  <nav.link @route='scopes.scope.projects.targets.target.index'>
-    {{t 'resources.host-set.title_plural'}}
+  <nav.link @route='scopes.scope.projects.targets.target.hosts'>
+    {{t 'resources.host.title_plural'}}
   </nav.link>
 </Rose::Nav::Tabs>

ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs

@@ -0,0 +1,23 @@
+{{page-title (t "resources.host-set.title_plural")}}
+
+{{#if @model}}
+
+  <Rose::Table as |table|>
+    <table.body as |body|>
+      {{#each @model as |host|}}
+        <body.row as |row|>
+          <row.cell>
+            {{host.displayName}}
+            <p>{{host.description}}</p>
+          </row.cell>
+          <row.cell>{{host.id}}</row.cell>
+          <row.cell>{{host.attributes.address}}</row.cell>
+          <row.cell>
+            <Rose::Badge>{{t (concat 'resources.host.types.' host.type)}}</Rose::Badge>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{/if}}

ui/desktop/tests/unit/routes/scopes/scope/projects/targets/target/hosts-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/targets/target/hosts', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/targets/target/hosts');
+    assert.ok(route);
+  });
+});