[ui] Service Discovery: Allocation Service fly-out

ui/app/components/allocation-service-sidebar.hbs

@@ -0,0 +1,22 @@
+<div
+	class="sidebar has-subnav {{if this.isSideBarOpen "open"}}"
+	{{on-click-outside
+		@fns.closeSidebar
+		capture=true
+	}}
+>
+	{{#if @service}}
+		{{keyboard-commands this.keyCommands}}
+		<header class="detail-header">
+			<h1 class="title">Service Details for {{@service.name}}</h1>
+			<button
+				data-test-close-service-sidebar
+				class="button is-borderless"
+				type="button"
+				{{on "click" @fns.closeSidebar}}
+			>
+				{{x-icon "cancel"}}
+			</button>
+		</header>
+	{{/if}}
+</div>

ui/app/components/allocation-service-sidebar.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class AllocationServiceSidebarComponent extends Component {
+  @service store;
+
+  get isSideBarOpen() {
+    return !!this.args.service;
+  }
+  keyCommands = [
+    {
+      label: 'Close Evaluations Sidebar',
+      pattern: ['Escape'],
+      action: () => this.args.fns.closeSidebar(),
+    },
+  ];
+
+  get service() {
+    return this.store.query('service-fragment', { refID: this.args.serviceID });
+  }
+}

ui/app/components/evaluation-sidebar/detail.js

@@ -75,12 +75,4 @@ export default class Detail extends Component {
   closeSidebar() {
     return this.statechart.send('MODAL_CLOSE');
   }
-
-  keyCommands = [
-    {
-      label: 'Close Evaluations Sidebar',
-      pattern: ['Escape'],
-      action: () => this.closeSidebar(),
-    },
-  ];
 }

ui/app/components/service-status-bar.js

@@ -8,22 +8,19 @@ import classic from 'ember-classic-decorator';
 export default class ServiceStatusBar extends DistributionBar {
   layoutName = 'components/distribution-bar';
 
-  services = null;
-  name = null;
+  status = null;
 
   'data-test-service-status-bar' = true;
 
-  @computed('services.{}', 'name')
+  @computed('status.{failure,pending,success}')
   get data() {
-    const service = this.services && this.services.get(this.name);
-
-    if (!service) {
+    if (!this.status) {
       return [];
     }
 
-    const pending = service.pending || 0;
-    const failing = service.failure || 0;
-    const success = service.success || 0;
+    const pending = this.status.pending || 0;
+    const failing = this.status.failure || 0;
+    const success = this.status.success || 0;
 
     const [grey, red, green] = ['queued', 'failed', 'complete'];
 

ui/app/controllers/allocations/allocation/index.js

@@ -12,6 +12,7 @@ import { watchRecord } from 'nomad-ui/utils/properties/watch';
 import messageForError from 'nomad-ui/utils/message-from-adapter-error';
 import classic from 'ember-classic-decorator';
 import { union } from '@ember/object/computed';
+import { tracked } from '@glimmer/tracking';
 
 @classic
 export default class IndexController extends Controller.extend(Sortable) {
@@ -25,6 +26,9 @@ export default class IndexController extends Controller.extend(Sortable) {
     {
       sortDescending: 'desc',
     },
+    {
+      activeServiceID: 'service',
+    },
   ];
 
   sortProperty = 'name';
@@ -67,38 +71,32 @@ export default class IndexController extends Controller.extend(Sortable) {
 
   @union('taskServices', 'groupServices') services;
 
-  @computed('model.healthChecks.{}')
-  get serviceHealthStatuses() {
-    if (!this.model.healthChecks) return null;
-
-    let result = new Map();
-    Object.values(this.model.healthChecks)?.forEach((service) => {
-      const isTask = !!service.Task;
-      const groupName = service.Group.split('.')[1].split('[')[0];
-      const currentServiceStatus = service.Status;
-
-      const currentServiceName = isTask
-        ? service.Task.concat(`-${service.Service}`)
-        : groupName.concat(`-${service.Service}`);
-      const serviceStatuses = result.get(currentServiceName);
-      if (serviceStatuses) {
-        if (serviceStatuses[currentServiceStatus]) {
-          result.set(currentServiceName, {
-            ...serviceStatuses,
-            [currentServiceStatus]: serviceStatuses[currentServiceStatus]++,
-          });
-        } else {
-          result.set(currentServiceName, {
-            ...serviceStatuses,
-            [currentServiceStatus]: 1,
-          });
-        }
-      } else {
-        result.set(currentServiceName, { [currentServiceStatus]: 1 });
+  @computed('model.healthChecks.{}', 'services')
+  get servicesWithHealthChecks() {
+    return this.services.map((service) => {
+      if (this.model.healthChecks) {
+        const healthChecks = Object.values(this.model.healthChecks)?.filter(
+          (check) => {
+            const refPrefix =
+              check.Task || check.Group.split('.')[1].split('[')[0];
+            const currentServiceName = `${refPrefix}-${check.Service}`;
+            return currentServiceName === service.refID;
+          }
+        );
+        // Only append those healthchecks whose timestamps are not already found in service.healthChecks
+        healthChecks.forEach((check) => {
+          if (
+            !service.healthChecks.find(
+              (sc) =>
+                sc.Check === check.Check && sc.Timestamp === check.Timestamp
+            )
+          ) {
+            service.healthChecks.pushObject(check);
+          }
+        });
       }
+      return service;
     });
-
-    return result;
   }
 
   onDismiss() {
@@ -165,4 +163,31 @@ export default class IndexController extends Controller.extend(Sortable) {
   taskClick(allocation, task, event) {
     lazyClick([() => this.send('gotoTask', allocation, task), event]);
   }
+
+  //#region Services
+
+  @tracked activeServiceID = null;
+
+  @action handleServiceClick(service) {
+    this.set('activeServiceID', service.refID);
+  }
+
+  @computed('activeServiceID', 'services')
+  get activeService() {
+    return this.services.findBy('refID', this.activeServiceID);
+  }
+
+  @action closeSidebar() {
+    this.set('activeServiceID', null);
+  }
+
+  keyCommands = [
+    {
+      label: 'Close Evaluations Sidebar',
+      pattern: ['Escape'],
+      action: () => this.closeSidebar(),
+    },
+  ];
+
+  //#endregion Services
 }

ui/app/models/service-fragment.js

@@ -1,6 +1,7 @@
 import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragment } from 'ember-data-model-fragments/attributes';
+import { computed } from '@ember/object';
 
 export default class Service extends Fragment {
   @attr('string') name;
@@ -11,8 +12,25 @@ export default class Service extends Fragment {
   @fragment('consul-connect') connect;
   @attr() groupName;
   @attr() taskName;
-
   get refID() {
     return `${this.groupName || this.taskName}-${this.name}`;
   }
+  @attr({ defaultValue: () => [] }) healthChecks;
+
+  @computed('healthChecks.[]')
+  get mostRecentCheckStatus() {
+    // Get unique check names, then get the most recent one
+    return this.healthChecks
+      .mapBy('Check')
+      .uniq()
+      .map((name) => {
+        // Assumtion: health checks are being pushed in sequential order (hence .reverse)
+        return this.healthChecks.reverse().find((x) => x.Check === name);
+      })
+      .mapBy('Status')
+      .reduce((acc, curr) => {
+        acc[curr] = (acc[curr] || 0) + 1;
+        return acc;
+      }, {});
+  }
 }

ui/app/serializers/task-group.js

@@ -13,7 +13,6 @@ export default class TaskGroup extends ApplicationSerializer {
         service.GroupName = hash.Name;
       });
     }
-
     // Provide EphemeralDisk to each task
     hash.Tasks.forEach((task) => {
       task.EphemeralDisk = copy(hash.EphemeralDisk);

ui/app/styles/components/sidebar.scss

@@ -1,3 +1,6 @@
+$topNavOffset: 112px;
+$subNavOffset: 49px;
+
 .sidebar {
   position: fixed;
   background: #ffffff;
@@ -6,14 +9,17 @@
   right: 0%;
   overflow-y: auto;
   bottom: 0;
-  top: 112px;
+  top: $topNavOffset;
   transform: translateX(100%);
   transition-duration: 150ms;
   transition-timing-function: ease;
-  box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
   z-index: $z-modal;
   &.open {
     transform: translateX(0%);
+    box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
+  }
+  &.has-subnav {
+    top: calc($topNavOffset + $subNavOffset);
   }
 }
 

ui/app/templates/allocations.hbs

@@ -1,3 +1,4 @@
 <PageLayout>
+  {{!-- <PortalTarget @name="service-detail-portal" /> --}}
   {{outlet}}
 </PageLayout>

ui/app/templates/allocations/allocation/index.hbs

@@ -270,7 +270,7 @@
         Services
       </div>
       <div class="boxed-section-body is-full-bleed">
-        <ListTable @source={{this.services}} as |t|>
+        <ListTable @source={{this.servicesWithHealthChecks}} as |t|>
           <t.head>
             <th class="is-2">
               Name
@@ -295,7 +295,13 @@
             </td>
           </t.head>
           <t.body as |row|>
-            <tr data-test-service>
+            <tr data-test-service class="is-interactive"
+              {{on "click" (fn this.handleServiceClick row.model)}}
+              {{keyboard-shortcut 
+                enumerated=true
+                action=(fn this.handleServiceClick row.model)
+              }}
+            >
               <td data-test-service-name>
                 {{row.model.name}}
               </td>
@@ -321,11 +327,7 @@
               <td data-test-service-health>
                 {{#if (eq row.model.provider "nomad")}}
                   <div class="inline-chart">
-                    {{#if (is-empty row.model.taskName)}}
-                      <ServiceStatusBar @isNarrow={{true}} @services={{this.serviceHealthStatuses}} @name={{concat row.model.groupName "-" row.model.name}} />
-                    {{else}}
-                      <ServiceStatusBar @isNarrow={{true}} @services={{this.serviceHealthStatuses}} @name={{concat row.model.taskName "-" row.model.name}} />
-                    {{/if}}
+                    <ServiceStatusBar @isNarrow={{true}} @status={{row.model.mostRecentCheckStatus}} />
                   </div>
                 {{/if}}
               </td>
@@ -497,4 +499,10 @@
       </div>
     </div>
   {{/if}}
+  <AllocationServiceSidebar
+    @service={{this.activeService}}
+    @fns={{hash
+      closeSidebar=this.closeSidebar
+    }}
+  />
 </section>

ui/mirage/factories/task.js

@@ -75,11 +75,13 @@ export default Factory.extend({
     if (task.withServices) {
       const services = server.createList('service-fragment', 1, {
         provider: 'nomad',
+        taskName: task.name,
       });
 
       services.push(
         server.create('service-fragment', {
           provider: 'consul',
+          taskName: task.name,
         })
       );
       services.forEach((fragment) => {

ui/tests/integration/components/allocation-service-sidebar-test.js

@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+
+module(
+  'Integration | Component | allocation-service-sidebar',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it supports basic open/close states', async function (assert) {
+      assert.expect(7);
+      await componentA11yAudit(this.element, assert);
+
+      this.set('closeSidebar', () => this.set('service', null));
+
+      this.set('service', { name: 'Funky Service' });
+      await render(
+        hbs`<AllocationServiceSidebar @service={{this.service}} @fns={{hash closeSidebar=this.closeSidebar}} />`
+      );
+      assert.dom(this.element).hasText('Service Details for Funky Service');
+      assert.dom('.sidebar').hasClass('open');
+
+      this.set('service', null);
+      await render(
+        hbs`<AllocationServiceSidebar @service={{this.service}} @fns={{hash closeSidebar=this.closeSidebar}} />`
+      );
+      assert.dom(this.element).hasText('');
+      assert.dom('.sidebar').doesNotHaveClass('open');
+
+      this.set('service', { name: 'Funky Service' });
+      await click('[data-test-close-service-sidebar]');
+      assert.dom(this.element).hasText('');
+      assert.dom('.sidebar').doesNotHaveClass('open');
+    });
+  }
+);