From e8cc2f5729b2f06f43f2277bc0819cdae6fa72a4 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 26 Aug 2020 12:31:55 -0400
Subject: [PATCH] chore: Add host-sets tab to in target view

---
 ui/core/app/router.js                         |  2 +-
 .../project/targets/target/host-sets.js       | 21 +++++++++
 .../scope/projects/project/targets/target.hbs | 39 ++++++++++++++-
 .../project/targets/target/host-sets.hbs      | 32 ++++++++++++-
 .../projects/project/targets/target/index.hbs | 47 ++-----------------
 5 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 43bc97d14..e5577e83a 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -38,7 +38,7 @@ Router.map(function () {
           this.route('targets', function() {
             this.route('target', { path: ':target_id' }, function() {
               this.route('host-sets', function() {
-                this.route('host-set');
+                this.route('host-set', { path: ':host_set_id'}, function() {});
               });
             });
             this.route('new');
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
index c9b491c05..1c63e3aaf 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
@@ -1,5 +1,26 @@
 import Route from '@ember/routing/route';
+import { all } from 'rsvp';
 
 export default class ScopesScopeProjectsProjectTargetsTargetHostSetsRoute extends Route {
+  // =methods
 
+  /**
+   *
+   * Loads all host-sets under the current target and it's parent scope.
+   * @return {Promise{[HostSetModel]}}
+   */
+  async model() {
+    const target = this.modelFor('scopes.scope.projects.project.targets.target');
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+
+    const hostSets = target.host_sets.map((hostSet) =>
+      this.store.findRecord(
+        'host-set',
+        hostSet.host_set_id,
+        { adapterOptions : { scopeID, hostCatalogID: hostSet.host_catalog_id } }
+      )
+    );
+
+    return all(hostSets);
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
index e2147cab0..50b97cd47 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
@@ -1 +1,38 @@
-{{outlet}}
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "resources.target"}}</h2>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='scopes.scope.projects.project.targets.target.index'>
+        {{t 'titles.details'}}
+      </nav.link>
+      <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
+        {{t 'titles.host-sets'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="danger"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-target'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
+  <page.body>
+    {{outlet}}
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
index 49966461b..f156172d3 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
@@ -1,3 +1,33 @@
 {{title (t "resources.host-sets")}}
 
-{{outlet}}
\ No newline at end of file
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+      <row.headerCell>{{t "form.label.type"}}</row.headerCell>
+      <row.headerCell>{{t "form.label.id"}}</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    {{#each @model as |hostSet|}}
+      <body.row as |row|>
+        <row.headerCell>
+          <LinkTo
+            @route="scopes.scope.projects.project.targets.target.host-sets.host-set"
+            @model={{hostSet}}
+          >
+            {{hostSet.displayName}}
+          </LinkTo>
+          <p>{{hostSet.description}}</p>
+        </row.headerCell>
+        <row.cell>
+          <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
+        </row.cell>
+        <row.cell>
+          <code>{{hostSet.id}}</code>
+        </row.cell>
+      </body.row>
+    {{/each}}
+  </table.body>
+</Rose::Table>
+
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
index ec7719f9a..5c39ce009 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
@@ -1,42 +1,5 @@
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    <h2>{{t "resources.target"}}</h2>
-  </page.header>
-
-  <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.projects.project.targets.target'>
-        {{t 'titles.details'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
-        {{t 'titles.host-sets'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
-  </page.navigation>
-
-  <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-target'}}
-      </dropdown.button>
-    </Rose::Dropdown>
-  </page.actions>
-
-  <page.body>
-    <Form::Target
-      @model={{@model}}
-      @submit={{route-action "save" @model}}
-      @cancel={{route-action "cancel" @model}}
-    />
-  </page.body>
-
-</Rose::Layout::Page>
+<Form::Target
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>
\ No newline at end of file