service-health-bar (#14295)

* ui: add service-status-bar

* test: service-status-bar

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

@@ -0,0 +1,45 @@
+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;
+
+  'data-test-service-status-bar' = true;
+
+  @computed('services.@each.status')
+  get data() {
+    if (!this.services) {
+      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 [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/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');
+  });
+});