feat: 🎸 add host details to session details screen if present (#1889)

* feat: 🎸 add host details to session details screen if present

✅ Closes: ICU-10282

* refactor: 💡 update style for host details

* refactor: 💡 update styles for sidebar details

* refactor: 💡 remove unneeded class selector

addons/api/addon/models/session.js

@@ -110,6 +110,7 @@ export default class SessionModel extends GeneratedSessionModel {
   @tracked started_desktop_client;
   @tracked proxy_address;
   @tracked proxy_port;
+  @tracked host;
   credentials = A();
 
   @equal('status', STATUS_SESSION_ACTIVE) isActive;
@@ -159,6 +160,14 @@ export default class SessionModel extends GeneratedSessionModel {
     this.credentials.pushObject(new SessionCredential(cred));
   }
 
+  /**
+   * Adds associated host to session if host present
+   * @param {HostModel} host
+   */
+  addHost(host) {
+    this.host = host;
+  }
+
   /**
    * Cancels the session via the `cancel` method.
    * See serializer and adapter for more information.

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

@@ -253,6 +253,7 @@ host:
   title_plural: Hosts
   no_name_title: Unnamed Host
   description: A host is a resource that may be accessed by a Boundary target.
+  details: Host Details
   messages:
     welcome:
       title: Welcome to Hosts

addons/rose/app/styles/rose/components/metadata-list/_index.scss

@@ -17,6 +17,6 @@
   .rose-metadata-list-item {
     display: flex;
     align-items: center;
-    column-gap: 0.3rem;
+    column-gap: 0.5rem;
   }
 }

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

@@ -115,6 +115,10 @@ export default class ScopesScopeProjectsTargetsTargetRoute extends Route {
       if (credentials) {
         credentials.forEach((cred) => session.addCredential(cred));
       }
+      if (session.host_id) {
+        const host = await this.store.findRecord('host', session.host_id);
+        session.addHost(host);
+      }
 
       await this.router.transitionTo(
         'scopes.scope.projects.sessions.session',

ui/desktop/app/styles/app.scss

@@ -512,12 +512,16 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 }
 
-.details-sidebar-target-details {
+.details-sidebar {
   background-color: var(--token-color-palette-neutral-50);
   border-radius: 0.313rem;
   padding: 1.5rem 2.5rem;
   margin-top: 3.5rem;
 
+  > :not(:last-child) {
+    margin-bottom: 2.25rem;
+  }
+
   .title {
     color: var(--token-color-palette-neutral-600);
     margin-bottom: 0.75rem;

ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs

@@ -31,46 +31,81 @@
         <Session::Tabs @model={{@model}} />
       </bc.Body>
       <bc.Sidebar>
-        <div class='details-sidebar-target-details'>
-          <div
-            class='title hds-typography-display-200 hds-font-weight-semibold'
-          >
-            {{t 'resources.target.details'}}
-          </div>
-          <Rose::MetadataList @orientation='vertical' as |list|>
-            {{! Target name }}
-            <list.Item @icon='target' @color='faint'>
-              {{@model.target.name}}
-            </list.Item>
-            {{! Project name }}
-            <list.Item @icon='grid' @color='faint'>
-              {{@model.target.project.displayName}}
-            </list.Item>
-            {{! Target description }}
-            {{#if @model.target.description}}
-              <list.Item @icon='message-circle-fill' @color='faint'>
-                {{@model.target.description}}
-              </list.Item>
-            {{/if}}
-            {{! Target type }}
-            <list.Item class='resource-type' @icon='terminal' @color='faint'>
-              {{#if @model.target.isSSH}}
-                {{t 'resources.target.types.ssh'}}
-              {{else}}
-                {{t 'resources.target.types.tcp'}}
-              {{/if}}
-            </list.Item>
-            {{! Target ID }}
-            <list.Item @icon='hash' @color='faint'>
-              <Copyable
-                @text={{@model.target.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
+        <div class='details-sidebar'>
+          {{#if @model.host}}
+            <div>
+              <div
+                class='title hds-typography-display-200 hds-font-weight-semibold'
               >
-                {{@model.target.id}}
-              </Copyable>
-            </list.Item>
-          </Rose::MetadataList>
+                {{t 'resources.host.details'}}
+              </div>
+              <Rose::MetadataList @orientation='vertical' as |list|>
+                {{! Host name }}
+                {{#if @model.host.name}}
+                  <list.Item @icon='network-alt' @color='faint'>
+                    {{@model.host.name}}
+                  </list.Item>
+                {{/if}}
+                {{! Host description }}
+                {{#if @model.host.description}}
+                  <list.Item @icon='message-circle-fill' @color='faint'>
+                    {{@model.host.description}}
+                  </list.Item>
+                {{/if}}
+                {{! Host ID }}
+                <list.Item @icon='hash' @color='faint'>
+                  <Copyable
+                    @text={{@model.host.id}}
+                    @buttonText={{t 'actions.copy-to-clipboard'}}
+                    @acknowledgeText={{t 'states.copied'}}
+                  >
+                    {{@model.host.id}}
+                  </Copyable>
+                </list.Item>
+              </Rose::MetadataList>
+            </div>
+          {{/if}}
+          <div>
+            <div
+              class='title hds-typography-display-200 hds-font-weight-semibold'
+            >
+              {{t 'resources.target.details'}}
+            </div>
+            <Rose::MetadataList @orientation='vertical' as |list|>
+              {{! Target name }}
+              <list.Item @icon='target' @color='faint'>
+                {{@model.target.name}}
+              </list.Item>
+              {{! Project name }}
+              <list.Item @icon='grid' @color='faint'>
+                {{@model.target.project.displayName}}
+              </list.Item>
+              {{! Target description }}
+              {{#if @model.target.description}}
+                <list.Item @icon='message-circle-fill' @color='faint'>
+                  {{@model.target.description}}
+                </list.Item>
+              {{/if}}
+              {{! Target type }}
+              <list.Item class='resource-type' @icon='terminal' @color='faint'>
+                {{#if @model.target.isSSH}}
+                  {{t 'resources.target.types.ssh'}}
+                {{else}}
+                  {{t 'resources.target.types.tcp'}}
+                {{/if}}
+              </list.Item>
+              {{! Target ID }}
+              <list.Item @icon='hash' @color='faint'>
+                <Copyable
+                  @text={{@model.target.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  {{@model.target.id}}
+                </Copyable>
+              </list.Item>
+            </Rose::MetadataList>
+          </div>
         </div>
       </bc.Sidebar>
     </Rose::Layout::BodyContent>

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

@@ -39,46 +39,48 @@
         </Hds::ApplicationState>
       </bc.Body>
       <bc.Sidebar>
-        <div class='details-sidebar-target-details'>
-          <div
-            class='title hds-typography-display-200 hds-font-weight-semibold'
-          >
-            {{t 'resources.target.details'}}
-          </div>
-          <Rose::MetadataList @orientation='vertical' as |list|>
-            {{! Target name }}
-            <list.Item @icon='target' @color='faint'>
-              {{@model.target.name}}
-            </list.Item>
-            {{! Project name }}
-            <list.Item @icon='grid' @color='faint'>
-              {{@model.target.project.displayName}}
-            </list.Item>
-            {{! Target description }}
-            {{#if @model.target.description}}
-              <list.Item @icon='message-circle-fill' @color='faint'>
-                {{@model.target.description}}
+        <div class='details-sidebar'>
+          <div>
+            <div
+              class='title hds-typography-display-200 hds-font-weight-semibold'
+            >
+              {{t 'resources.target.details'}}
+            </div>
+            <Rose::MetadataList @orientation='vertical' as |list|>
+              {{! Target name }}
+              <list.Item @icon='target' @color='faint'>
+                {{@model.target.name}}
               </list.Item>
-            {{/if}}
-            {{! Target type }}
-            <list.Item class='resource-type' @icon='terminal' @color='faint'>
-              {{#if @model.target.isSSH}}
-                {{t 'resources.target.types.ssh'}}
-              {{else}}
-                {{t 'resources.target.types.tcp'}}
+              {{! Project name }}
+              <list.Item @icon='grid' @color='faint'>
+                {{@model.target.project.displayName}}
+              </list.Item>
+              {{! Target description }}
+              {{#if @model.target.description}}
+                <list.Item @icon='message-circle-fill' @color='faint'>
+                  {{@model.target.description}}
+                </list.Item>
               {{/if}}
-            </list.Item>
-            {{! Target ID }}
-            <list.Item @icon='hash' @color='faint'>
-              <Copyable
-                @text={{@model.target.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                {{@model.target.id}}
-              </Copyable>
-            </list.Item>
-          </Rose::MetadataList>
+              {{! Target type }}
+              <list.Item class='resource-type' @icon='terminal' @color='faint'>
+                {{#if @model.target.isSSH}}
+                  {{t 'resources.target.types.ssh'}}
+                {{else}}
+                  {{t 'resources.target.types.tcp'}}
+                {{/if}}
+              </list.Item>
+              {{! Target ID }}
+              <list.Item @icon='hash' @color='faint'>
+                <Copyable
+                  @text={{@model.target.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  {{@model.target.id}}
+                </Copyable>
+              </list.Item>
+            </Rose::MetadataList>
+          </div>
         </div>
       </bc.Sidebar>
     </Rose::Layout::BodyContent>

ui/desktop/tests/acceptance/projects/sessions/session-test.js

@@ -85,7 +85,13 @@ module('Acceptance | projects | sessions | session', function (hooks) {
       scope: stubs.org,
     });
     stubs.project = { id: instances.scopes.project.id, type: 'project' };
-
+    instances.hostCatalog = this.server.create('host-catalog', {
+      scope: instances.scopes.project,
+    });
+    instances.host = this.server.create('host', {
+      scope: instances.scopes.project,
+      hostCatalog: instances.hostCatalog,
+    });
     instances.authMethods.global = this.server.create('auth-method', {
       scope: instances.scopes.global,
     });