ui: add service health viz to table

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

@@ -0,0 +1,48 @@
+import { computed } from '@ember/object';
+import DistributionBar from './distribution-bar';
+import { attributeBindings } from '@ember-decorators/component';
+import classic from 'ember-classic-decorator';
+
+@classic
+@attributeBindings('data-test-service-status-bar')
+export default class ServiceStatusBar extends DistributionBar {
+  layoutName = 'components/distribution-bar';
+
+  services = null;
+  name = null;
+
+  'data-test-service-status-bar' = true;
+
+  @computed('services.{}', 'name')
+  get data() {
+    const service = this.services && this.services.get(this.name);
+
+    if (!service) {
+      return [];
+    }
+
+    const pending = service.pending || 0;
+    const failing = service.failure || 0;
+    const success = service.success || 0;
+
+    const [grey, red, green] = ['queued', 'failed', 'complete'];
+
+    return [
+      {
+        label: 'Pending',
+        value: pending,
+        className: grey,
+      },
+      {
+        label: 'Failing',
+        value: failing,
+        className: red,
+      },
+      {
+        label: 'Success',
+        value: success,
+        className: green,
+      },
+    ];
+  }
+}

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

@@ -67,6 +67,35 @@ 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 currentServiceStatus = service.Status;
+      const currentServiceName = 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 });
+      }
+    });
+
+    return result;
+  }
+
   onDismiss() {
     this.set('error', null);
   }

ui/app/routes/allocations/allocation.js

@@ -13,10 +13,21 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
   startWatchers(controller, model) {
     if (model) {
       controller.set('watcher', this.watch.perform(model));
-      controller.set(
-        'watchHealthChecks',
-        this.watchHealthChecks.perform(model, 'getServiceHealth')
-      );
+
+      // Conditionally Long Poll /checks endpoint if alloc has nomad services
+      const doesAllocHaveServices =
+        !!model.taskGroup.services.filterBy('provider', 'nomad').length ||
+        !!model.states
+          .mapBy('task')
+          .map((t) => t && t.get('services'))[0]
+          .filterBy('provider', 'nomad').length;
+
+      if (doesAllocHaveServices) {
+        controller.set(
+          'watchHealthChecks',
+          this.watchHealthChecks.perform(model, 'getServiceHealth')
+        );
+      }
     }
   }
 

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

@@ -276,6 +276,9 @@
             <td>
               Upstreams
             </td>
+            <td>
+              Health Check Status
+            </td>
           </t.head>
           <t.body as |row|>
             <tr data-test-service>
@@ -301,6 +304,13 @@
                   {{upstream.destinationName}}:{{upstream.localBindPort}}
                 {{/each}}
               </td>
+              <td data-test-service-health>
+                {{#if (eq row.model.provider "nomad")}}
+                  <div class="inline-chart">
+                    <ServiceStatusBar @isNarrow={{true}} @services={{this.serviceHealthStatuses}} @name={{row.model.name}} />
+                  </div>
+                {{/if}}
+              </td>
             </tr>
           </t.body>
         </ListTable>

ui/tests/integration/components/service-status-bar-test.js

@@ -0,0 +1,47 @@
+import { A } from '@ember/array';
+import EmberObject from '@ember/object';
+import { findAll, render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { module, test } from 'qunit';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+
+module('Integration | Component | Service Status Bar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('Visualizes aggregate status of a service', async function (assert) {
+    assert.expect(2);
+    const component = this;
+    await componentA11yAudit(component, assert);
+
+    const healthyService = EmberObject.create({
+      id: '1',
+      status: 'success',
+    });
+
+    const failingService = EmberObject.create({
+      id: '2',
+      status: 'failing',
+    });
+
+    const pendingService = EmberObject.create({
+      id: '3',
+      status: 'pending',
+    });
+
+    const services = A([healthyService, failingService, pendingService]);
+    this.set('services', services);
+
+    await render(hbs`
+      <div class="inline-chart">
+        <ServiceStatusBar
+          @services={{this.services}}  
+        />
+      </div>
+    `);
+
+    const bars = findAll('g > g').length;
+
+    assert.equal(bars, 3, 'It visualizes services by status');
+  });
+});