F UI/service discovery

.changelog/14408.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add service discovery, along with health checks, to job and allocation routes
+```

ui/app/adapters/allocation.js

@@ -35,6 +35,14 @@ export default class AllocationAdapter extends Watchable {
       )
       .then(handleFSResponse);
   }
+
+  async check(model) {
+    const res = await this.token.authorizedRequest(
+      `/v1/client/allocation/${model.id}/checks`
+    );
+    const data = await res.json();
+    return data;
+  }
 }
 
 async function handleFSResponse(response) {

ui/app/adapters/service.js

@@ -0,0 +1,5 @@
+import Watchable from './watchable';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class ServiceAdapter extends Watchable {}

ui/app/adapters/watchable.js

@@ -143,9 +143,9 @@ export default class Watchable extends ApplicationAdapter {
   reloadRelationship(
     model,
     relationshipName,
-    options = { watch: false, abortController: null }
+    options = { watch: false, abortController: null, replace: false }
   ) {
-    const { watch, abortController } = options;
+    const { watch, abortController, replace } = options;
     const relationship = model.relationshipFor(relationshipName);
     if (relationship.kind !== 'belongsTo' && relationship.kind !== 'hasMany') {
       throw new Error(
@@ -185,6 +185,9 @@ export default class Watchable extends ApplicationAdapter {
             modelClass,
             json
           );
+          if (replace) {
+            store.unloadAll(relationship.type);
+          }
           store.push(normalizedData);
         },
         (error) => {

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

@@ -0,0 +1,130 @@
+<div
+	class="sidebar has-subnav service-sidebar {{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.name}}
+				<span class="aggregate-status">
+					{{#if (eq this.aggregateStatus 'Unhealthy')}}
+						<FlightIcon @name="x-square-fill" @color="#c84034" />
+						Unhealthy
+					{{else}}
+						<FlightIcon @name="check-square-fill" @color="#25ba81" />
+						Healthy
+					{{/if}}
+				</span>
+			</h1>
+			<button
+				data-test-close-service-sidebar
+				class="button is-borderless"
+				type="button"
+				{{on "click" @fns.closeSidebar}}
+			>
+				{{x-icon "cancel"}}
+			</button>
+		</header>
+
+		<div class="boxed-section is-small">
+			<div
+				class="boxed-section-body inline-definitions"
+			>
+				<span class="label">
+					Service Details
+				</span>
+
+				<div>
+					<span class="pair">
+						<span class="term">
+							Allocation
+						</span>
+						<LinkTo
+							@route="allocations.allocation"
+							@model={{@allocation}}
+							@query={{hash service=""}}
+						>
+							{{@allocation.shortId}}
+						</LinkTo>
+					</span>
+					<span class="pair">
+						<span class="term">
+							IP Address &amp; Port
+						</span>
+						<a
+							href="http://{{this.address}}"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{{this.address}}
+						</a>
+					</span>
+					{{#if @service.tags.length}}
+						<span class="pair">
+							<span class="term">
+								Tags
+							</span>
+							{{join ", " @service.tags}}
+						</span>
+					{{/if}}
+					<span class="pair">
+						<span class="term">
+							Client
+						</span>
+						<LinkTo
+							@route="clients.client"
+							@model={{@allocation.node}}
+						>
+							{{@allocation.node.shortId}}
+						</LinkTo>
+					</span>
+
+				</div>
+			</div>
+		</div>
+		{{#if @service.mostRecentChecks.length}}
+			<ListTable class="health-checks" @source={{@service.mostRecentChecks}} as |t|>
+				<t.head>
+					<th>
+						Name
+					</th>
+					<th>
+						Status
+					</th>
+					<td>
+						Output
+					</td>
+				</t.head>
+				<t.body as |row|>
+					<tr data-service-health={{row.model.Status}}>
+						<td class="name">
+							<span title={{row.model.Check}}>{{row.model.Check}}</span>
+						</td>
+						<td class="status">
+							<span>
+								{{#if (eq row.model.Status "success")}}
+									<FlightIcon @name="check-square-fill" @color="#25ba81" />
+									Healthy
+								{{else if (eq row.model.Status "failure")}}
+									<FlightIcon @name="x-square-fill" @color="#c84034" />
+									Unhealthy
+								{{else if (eq row.model.Status "pending")}}
+									Pending
+								{{/if}}
+							</span>
+						</td>
+						<td class="service-output">
+							<code>
+								{{row.model.Output}}
+							</code>
+						</td>
+					</tr>
+				</t.body>
+			</ListTable>
+		{{/if}}
+	{{/if}}
+</div>

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

@@ -0,0 +1,41 @@
+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 });
+  }
+
+  get address() {
+    const port = this.args.allocation?.allocatedResources?.ports?.findBy(
+      'label',
+      this.args.service.portLabel
+    );
+    if (port) {
+      return `${port.hostIp}:${port.value}`;
+    } else {
+      return null;
+    }
+  }
+
+  get aggregateStatus() {
+    return this.args.service?.mostRecentChecks?.any(
+      (check) => check.Status === 'failure'
+    )
+      ? 'Unhealthy'
+      : 'Healthy';
+  }
+}

ui/app/components/job-service-row.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class JobServiceRowComponent extends Component {
+  @service router;
+
+  @action
+  gotoService(service) {
+    if (service.provider === 'nomad') {
+      this.router.transitionTo('jobs.job.services.service', service.name, {
+        queryParams: { level: service.level },
+        instances: service.instances,
+      });
+    }
+  }
+}

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

@@ -8,19 +8,19 @@ import classic from 'ember-classic-decorator';
 export default class ServiceStatusBar extends DistributionBar {
   layoutName = 'components/distribution-bar';
 
-  services = null;
+  status = null;
 
   'data-test-service-status-bar' = true;
 
-  @computed('services.@each.status')
+  @computed('status.{failure,pending,success}')
   get data() {
-    if (!this.services) {
+    if (!this.status) {
       return [];
     }
 
-    const pending = this.services.filterBy('status', 'pending').length;
-    const failing = this.services.filterBy('status', 'failing').length;
-    const success = this.services.filterBy('status', 'success').length;
+    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';
@@ -55,7 +59,7 @@ export default class IndexController extends Controller.extend(Sortable) {
   @computed('tasks.@each.services')
   get taskServices() {
     return this.get('tasks')
-      .map((t) => ((t && t.get('services')) || []).toArray())
+      .map((t) => ((t && t.services) || []).toArray())
       .flat()
       .compact();
   }
@@ -67,6 +71,35 @@ export default class IndexController extends Controller.extend(Sortable) {
 
   @union('taskServices', 'groupServices') services;
 
+  @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);
+            service.healthChecks = [...service.healthChecks.slice(-10)];
+          }
+        });
+      }
+      return service;
+    });
+  }
+
   onDismiss() {
     this.set('error', null);
   }
@@ -131,4 +164,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/controllers/jobs/job/services.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class JobsJobServicesController extends Controller {}