chore: List targets under a project scope

ui/core/app/router.js

@@ -29,6 +29,7 @@ Router.map(function () {
               });
             });
           });
+          this.route('targets', function() {});
         });
         this.route('new');
       });

ui/core/app/routes/scopes/scope/projects/project/targets.js

@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsRoute extends Route {
+  // =methods
+
+  /**
+   * Loads all targets under current project scope.
+   * @return {Promise{[TargetModel]}}
+   */
+  async model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    return this.store.findAll('target', { adapterOptions: { scopeID } });
+  }
+}

ui/core/app/routes/scopes/scope/projects/project/targets/index.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsIndexRoute extends Route {
+}

ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs

@@ -1,4 +1,7 @@
 <Rose::Nav::Sidebar @title={{t "titles.resources"}} as |nav|>
+  <nav.link @route="scopes.scope.projects.project.targets">
+    {{t "resources.targets"}}
+  </nav.link>
   <nav.link @route="scopes.scope.projects.project.host-catalogs">
     {{t "resources.host-catalogs"}}
   </nav.link>

ui/core/app/templates/scopes/scope/projects/project/targets.hbs

@@ -0,0 +1,3 @@
+{{title (t "resources.targets")}}
+
+{{outlet}}

ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs

@@ -0,0 +1,53 @@
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h2>{{t "resources.targets"}}</h2>
+  </page.header>
+
+  <page.body>
+
+    {{#if @model}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.cell>{{t "form.label.name"}}</row.cell>
+            <row.cell>{{t "form.label.protocol"}}</row.cell>
+            <row.cell>{{t "form.label.id"}}</row.cell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model as |target|}}
+            <body.row as |row|>
+              <row.cell>
+                {{target.displayName}}
+                <p>{{target.description}}</p>
+              </row.cell>
+              <row.cell>
+                <Rose::Badge @style="outline">
+                  {{t (concat "target.protocols." target.protocol)}}
+                </Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <code>{{target.id}}</code>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t "titles.targets-welcome"}} as |message|>
+          <message.description>
+            {{t "descriptions.targets-welcome"}}
+          </message.description>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+
+  </page.body>
+
+</Rose::Layout::Page>

ui/core/mirage/scenarios/default.js

@@ -33,10 +33,7 @@ export default function(server) {
   server.db.scopes.where({type: 'project'}).forEach(({ id, type }) => {
     const scope = { id, type };
     server.createList('host-catalog', 2, { scope }, 'withChildren');
+    server.createList('target', 2, { scope });
   });
-
-  // Target
-
-  server.createList('target', 5, { scope });
-
+  
 }

ui/core/tests/unit/routes/scopes/scope/projects/project/targets-test.js

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

ui/core/tests/unit/routes/scopes/scope/projects/project/targets/index-test.js

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

ui/core/translations/en-us.yaml

@@ -31,6 +31,10 @@ auth:
 host-set:
   types:
     static: Static
+target:
+  protocols:
+    ssh: SSH
+    SSH: SSH
 resources:
   user: User
   users: Users
@@ -48,6 +52,7 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  targets: Targets
 titles:
   iam: IAM
   new: New
@@ -64,10 +69,12 @@ titles:
   roles-welcome: Welcome to Roles
   groups-welcome: Welcome to Groups
   auth-methods-welcome: Welcome to Auth Methods
+  targets-welcome: Create your first Target
   grants: Permissions
   new-grant: New Grant
   principals: Principals
   host-sets: Host Sets
+  targets: Targets
   global: Global
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
@@ -79,6 +86,7 @@ descriptions:
   roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
   groups-welcome: Groups are collections of users.
   auth-methods-welcome: Auth methods are configurations to authenticate users.
+  targets-welcome: Targets provide Users the means to connect to and interact networked services. A Target contains a collection of Hosts and a collection of Credentials.
 states:
   info: Info
   success: Success
@@ -95,6 +103,7 @@ form:
     manage: Manage
     grant: Grant
     principal: Principal
+    protocol: Protocol
 errors:
   titles:
     unauthenticated-error: You are not signed in