Merge remote-tracking branch 'origin/ICU-284-view-hosts-in-a-host-catalog' into ICU-513-targets

addons/api/addon/generated/models/auth-method.js

@@ -39,4 +39,9 @@ export default class GeneratedAuthMethodModel extends BaseModel {
   })
   disabled;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }

addons/api/addon/generated/models/group.js

@@ -33,4 +33,10 @@ export default class GeneratedGroupModel extends BaseModel {
     description: 'Whether the resource is disabled',
   })
   disabled;
+
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+  
 }

addons/api/addon/generated/models/host-catalog.js

@@ -38,4 +38,9 @@ export default class GeneratedHostCatalogModel extends BaseModel {
     description: 'Attributes specific to the catalog type'
   }) attributes;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }

addons/api/addon/generated/models/scope.js

@@ -34,4 +34,9 @@ export default class GeneratedScopeModel extends BaseModel {
   })
   updated_time;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }

addons/api/addon/generated/models/user.js

@@ -33,4 +33,9 @@ export default class GeneratedUserModel extends BaseModel {
     description: 'Whether the resource is disabled',
   })
   disabled;
+
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
 }

addons/api/addon/serializers/application.js

@@ -40,6 +40,10 @@ export default class ApplicationSerializer extends RESTSerializer {
     let value = super.serializeAttribute(...arguments);
     // Do not serialize read-only attributes.
     if (options.readOnly) delete json[key];
+    // Version is sent only if it has a non-nullish value
+    if (key === 'version') {
+      if (json[key] === null || json[key] === undefined) delete json[key];
+    }
     // Do not serialize `disabled` fields.
     // TODO:  disabled is temporarily disabled
     if (key === 'disabled') delete json[key];

addons/api/tests/unit/serializers/application-test.js

@@ -29,6 +29,28 @@ module('Unit | Serializer | application', function (hooks) {
     });
   });
 
+  test('it serializes non-nullish version fields', function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const record = store.createRecord('user', {
+      name: 'User',
+      description: 'Description',
+      version: null
+    });
+    let serializedRecord = record.serialize();
+    assert.deepEqual(serializedRecord, {
+      name: 'User',
+      description: 'Description'
+    });
+    record.version = 1;
+    serializedRecord = record.serialize();
+    assert.deepEqual(serializedRecord, {
+      name: 'User',
+      description: 'Description',
+      version: 1
+    });
+  });
+
   test('it normalizes array records from an `items` root key', function (assert) {
     assert.expect(1);
     const store = this.owner.lookup('service:store');

ui/core/app/components/form/host/index.hbs

@@ -0,0 +1,55 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.input
+  @value={{t (concat 'host.types.' @model.type)}}
+  @label={{t "form.label.type"}}
+  readonly={{true}}
+  @disabled={{true}} />
+
+  <form.input
+    @name="name"
+    @type="name"
+    @value={{@model.name}}
+    @label={{t "form.label.name"}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name="description"
+    @type="description"
+    @value={{@model.description}}
+    @label={{t "form.label.description"}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+</Rose::Form>

ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js

@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Hosts breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.hosts');
+  }
+  
+}

ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js

@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostController extends Controller {
+
+  // =attributes
+
+  /**
+   * Host breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+
+}

ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js

@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsNewController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated new host breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('titles.new');
+  }
+
+}

ui/core/app/router.js

@@ -27,6 +27,10 @@ Router.map(function () {
                 this.route('host-set', { path: ':host_set_id' }, function() {});
                 this.route('new');
               });
+              this.route('hosts', function() {
+                this.route('host', { path: ':host_id' }, function() {});
+                this.route('new');
+              });
             });
           });
           this.route('targets', function() {

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js

@@ -15,9 +15,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
    * @return {Promise{[HostSetModel]}}
    */
   async model() {
-    const scopeID = this.modelFor('scopes.scope.projects.project').id;
-    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
-    return this.store.findAll('host-set', { adapterOptions: { scopeID, hostCatalogID } });
+    return this.store.findAll('host-set', this.adapterOptions());
   }
 
   // =actions

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js

@@ -24,7 +24,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
    * @param {object} model
    */
   renderTemplate(controller, model) {
-    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets');
+    super.renderTemplate(...arguments);
 
     this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header', {
       into: 'scopes/scope/projects/project/host-catalogs/host-catalog',

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/new.js

@@ -6,7 +6,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsNe
 
   /**
    * Creates a new unsaved host set in current host catalog scope.
-   * @return {HostCatalogModel}
+   * @return {HostSetModel}
    */
   model() {
     const scopeModel = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog');

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js

@@ -0,0 +1,81 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Loads all hosts under the current host catalog and it's parent project scope.
+   * @return {Promise{[HostModel]}}
+   */
+  async model() {
+    return this.store.findAll('host', this.adapterOptions());
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on a host.
+   * @param {HostModel} host
+   */
+  @action
+  cancel(host) {
+    const { isNew } = host;
+    host.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts');
+  }
+
+  /**
+   * Handle save of a host.
+   * @param {HostModel} host
+   * @param {Event} e
+   */
+  @action
+  async save(host) {
+    try {
+      const { isNew } = host;
+      await host.save(this.adapterOptions());
+      this.refresh();
+      this.notify.success(
+        this.intl.t(isNew ? 'notify.create-success' : 'notify.save-success')
+      );
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host', host);
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Delete host in current scope and redirect to index.
+   * @param {HostModel} host
+   */
+  @action
+  async delete(host) {
+    try {
+      await host.destroyRecord(this.adapterOptions());
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Configure adapter options using current host catalog scope and it's parent project scope.
+   * @return {object}
+   */
+  adapterOptions() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    return { adapterOptions : { scopeID, hostCatalogID } };
+  }
+}

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js

@@ -0,0 +1,47 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostRoute extends Route {
+  // =methods
+
+  /**
+   * Load a host using current host-catalog and it's parent project scope.
+   * @param {object} params
+   * @param {string} params.host_id
+   * @return {HostModel}
+   */
+  async model({ host_id }) {
+    const { id: scopeID } = this.modelFor('scopes.scope.projects.project');
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    return this.store.findRecord('host', host_id, {
+      adapterOptions: { scopeID, hostCatalogID }
+    });
+  }
+
+  /**
+   * Renders the host specific templates for header, navigation, and action page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'actions',
+      model: model
+    });
+  }
+}

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.js

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

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.js

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

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js

@@ -0,0 +1,46 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsNewRoute extends Route {
+
+  // =methods
+
+  /**
+   * Creates a new unsaved host in current host catalog scope.
+   * @return {HostModel}
+   */
+  model() {
+    const scopeModel = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog');
+    return this.store.createRecord('host', {
+      type: 'static',
+      scopeModel
+    });
+  }
+
+  /**
+   * Renders new host specific templates for header, navigation, and action page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('_empty', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+
+    this.render('_empty', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'actions',
+      model: model
+    });
+  }
+}

ui/core/app/templates/scopes/scope/auth-methods/index.hbs

@@ -21,16 +21,16 @@
       <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.type'}}</row.cell>
-            <row.cell>{{t 'form.label.id'}}</row.cell>
+            <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 |authMethod|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.auth-methods.auth-method"
                   @model={{authMethod}}
@@ -38,13 +38,15 @@
                   {{authMethod.name}}
                 </LinkTo>
                 <p>{{authMethod.description}}</p>
-              </row.cell>
+              </row.headerCell>
               <row.cell>
                 <Rose::Badge @style="outline">
                   {{t (concat 'auth.method-types.' authMethod.type)}}
                 </Rose::Badge>
               </row.cell>
-              <row.cell>{{authMethod.id}}</row.cell>
+              <row.cell>
+                <code>{{authMethod.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>

ui/core/app/templates/scopes/scope/groups/index.hbs

@@ -21,22 +21,25 @@
       <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.description'}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |group|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.groups.group"
                   @model={{group}}
                 >
                   {{group.name}}
                 </LinkTo>
+                <p>{{group.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <code>{{group.id}}</code>
               </row.cell>
-              <row.cell>{{group.description}}</row.cell>
             </body.row>
           {{/each}}
         </table.body>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs

@@ -1,4 +1,10 @@
 <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link
+    @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.new"
+    @model={{@model}}
+  >
+    {{t "actions.add-host"}}
+  </dropdown.link>
   <dropdown.link
     @route="scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.new"
     @model={{@model}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs

@@ -5,4 +5,7 @@
   <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets'>
     {{t 'titles.host-sets'}}
   </nav.link>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.hosts'>
+    {{t 'titles.hosts'}}
+  </nav.link>
 </Rose::Nav::Tabs>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs

@@ -3,15 +3,15 @@
   <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.type"}}</row.cell>
-        <row.cell>{{t "form.label.id"}}</row.cell>
+        <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.cell>
+          <row.headerCell>
             <LinkTo
               @route="scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set"
               @model={{hostSet}}
@@ -19,7 +19,7 @@
               {{hostSet.displayName}}
             </LinkTo>
             <p>{{hostSet.description}}</p>
-          </row.cell>
+          </row.headerCell>
           <row.cell>
             <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
           </row.cell>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs

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

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs

@@ -0,0 +1,9 @@
+<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-host'}}
+  </dropdown.button>
+</Rose::Dropdown>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs

@@ -0,0 +1 @@
+<h2>{{t "resources.host"}}</h2>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation.hbs

@@ -0,0 +1,5 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.hbs

@@ -0,0 +1 @@
+{{outlet}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.hbs

@@ -0,0 +1,5 @@
+<Form::Host
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs

@@ -0,0 +1,48 @@
+{{#if @model}}
+
+  <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 |host|}}
+        <body.row as |row|>
+          <row.headerCell>
+            <LinkTo
+              @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host"
+              @model={{host}}
+            >
+              {{host.displayName}}
+            </LinkTo>
+            <p>{{host.description}}</p>
+          </row.headerCell>
+          <row.cell>
+            <Rose::Badge @style="outline">{{host.type}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            <code>{{host.id}}</code>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.hosts-welcome"}} as |message|>
+      <message.description>
+        {{t "descriptions.hosts-welcome"}}
+      </message.description>
+      <message.link @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.new">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t "titles.new"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+
+{{/if}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs

@@ -0,0 +1,7 @@
+{{title (t 'titles.new')}}
+
+<Form::Host
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header.hbs

@@ -0,0 +1 @@
+<h2>{{t "titles.new"}}</h2>

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs

@@ -24,18 +24,15 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t "form.label.id"}}</row.cell>
-            <row.cell>{{t "form.label.name"}}</row.cell>
-            <row.cell>{{t "form.label.type"}}</row.cell>
+            <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 |hostCatalog|}}
             <body.row as |row|>
-              <row.cell>
-                <code>{{hostCatalog.id}}</code>
-              </row.cell>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.projects.project.host-catalogs.host-catalog"
                   @model={{hostCatalog}}
@@ -43,8 +40,11 @@
                   {{hostCatalog.displayName}}
                 </LinkTo>
                 <p>{{hostCatalog.description}}</p>
-              </row.cell>
+              </row.headerCell>
               <row.cell>{{hostCatalog.type}}</row.cell>
+              <row.cell>
+                <code>{{hostCatalog.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>

ui/core/app/templates/scopes/scope/roles/index.hbs

@@ -21,22 +21,25 @@
       <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.description'}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |role|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.roles.role"
                   @model={{role}}
                 >
                   {{role.displayName}}
                 </LinkTo>
+                <p>{{role.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <code>{{role.id}}</code>
               </row.cell>
-              <row.cell>{{role.description}}</row.cell>
             </body.row>
           {{/each}}
         </table.body>

ui/core/app/templates/scopes/scope/users/index.hbs

@@ -21,8 +21,8 @@
       <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.description'}}</row.headerCell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
@@ -35,8 +35,11 @@
                 >
                   {{user.name}}
                 </LinkTo>
+                <p>{{user.description}}</p>
               </row.headerCell>
-              <row.cell>{{user.description}}</row.cell>
+              <row.cell>
+                <code>{{user.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>

ui/core/tests/acceptance/host-catalogs-test.js

@@ -69,7 +69,7 @@ module('Acceptance | host catalogs', function (hooks) {
     assert.expect(1);
     authenticateSession({});
     await visit(urls.hostCatalogs);
-    await click('main tbody .rose-table-cell:nth-child(2) a');
+    await click('main tbody .rose-table-header-cell:nth-child(1) a');
     await a11yAudit();
     assert.equal(currentURL(), urls.hostCatalog);
   });

ui/core/tests/acceptance/hosts-test.js

@@ -0,0 +1,61 @@
+import { module, test } from 'qunit';
+// import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+// import {
+//   authenticateSession,
+//   // These are left here intentionally for future reference.
+//   //currentSession,
+//   //invalidateSession,
+// } from 'ember-simple-auth/test-support';
+
+module('Acceptance | hosts', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function () {
+    // Setup Mirage mock resources for this test
+    // Generate route URLs for resources
+  });
+
+  test('visiting host', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can navigate to a host form', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a host and save changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a host and cancel changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can create new host', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can cancel new host creation', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving a new host with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when save on auth method fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when delete on a host fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving an existing host with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+});

ui/core/tests/integration/components/form/host-test.js

@@ -0,0 +1,23 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/host', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.submit = () => {};
+    this.cancel = () => {};
+
+    await render(hbs`
+      <Form::Host
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
+  });
+});

ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/project/host-catalogs/host-catalog/hosts');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js

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

ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js

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

ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index-test.js

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

ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index-test.js

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

ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js

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

ui/core/translations/en-us.yaml

@@ -16,8 +16,10 @@ actions:
   delete-host-catalog: Delete host catalog
   delete-auth-method: Delete auth method
   delete-host-set: Delete host set
+  delete-host: Delete host
   delete-target: Delete target
   add-host-set: Create Host Set
+  add-host: Create Host
 auth:
   titles:
     no-scopes: No Scopes Available
@@ -36,6 +38,9 @@ target:
   protocols:
     ssh: SSH
     SSH: SSH
+host:
+  types:
+    static: Static
 resources:
   user: User
   users: Users
@@ -53,6 +58,8 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  hosts: Hosts
+  host: Host
   target: Target
   targets: Targets
 titles:
@@ -67,6 +74,7 @@ titles:
   projects-welcome: Welcome to Projects
   host-catalogs-welcome: Welcome to Host Catalogs
   host-sets-welcome: Welcome to Host Sets
+  hosts-welcome: Welcome to Hosts
   users-welcome: Welcome to Users
   roles-welcome: Welcome to Roles
   groups-welcome: Welcome to Groups
@@ -76,6 +84,7 @@ titles:
   new-grant: New Grant
   principals: Principals
   host-sets: Host Sets
+  hosts: Hosts
   targets: Targets
   global: Global
 descriptions:
@@ -84,6 +93,7 @@ descriptions:
   projects-welcome: Projects allow you to create and manage host catalogs. To start, create a project.
   host-catalogs-welcome: Host catalogs allow you to configure to collect and create hosts and host sets. To start, create a host catalog.
   host-sets-welcome: Configure a static host set in this host catalog.
+  hosts-welcome: Configure a static host in this host catalog.
   users-welcome: Users are authorized to access Boundary.
   roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
   groups-welcome: Groups are collections of users.