Basic services table implemented

ui/app/models/job.js

@@ -144,6 +144,8 @@ export default class Job extends Model {
 
   @hasMany('recommendation-summary') recommendationSummaries;
 
+  @hasMany('services') services;
+
   @computed('taskGroups.@each.drivers')
   get drivers() {
     return this.taskGroups

ui/app/models/service-fragment.js

@@ -0,0 +1,11 @@
+import { attr } from '@ember-data/model';
+import Fragment from 'ember-data-model-fragments/fragment';
+import { fragment } from 'ember-data-model-fragments/attributes';
+
+export default class Service extends Fragment {
+  @attr('string') name;
+  @attr('string') portLabel;
+  @attr() tags;
+  @attr('string') onUpdate;
+  @fragment('consul-connect') connect;
+}

ui/app/models/service.js

@@ -1,11 +1,10 @@
 import { attr } from '@ember-data/model';
-import Fragment from 'ember-data-model-fragments/fragment';
-import { fragment } from 'ember-data-model-fragments/attributes';
+// import { fragment } from 'ember-data-model-fragments/attributes';
+import Model from '@ember-data/model';
+import { alias } from '@ember/object/computed';
 
-export default class Service extends Fragment {
-  @attr('string') name;
-  @attr('string') portLabel;
+export default class Service extends Model {
+  @attr('string') ServiceName;
+  @alias('ServiceName') name;
   @attr() tags;
-  @attr('string') onUpdate;
-  @fragment('consul-connect') connect;
 }

ui/app/models/task-group.js

@@ -35,7 +35,7 @@ export default class TaskGroup extends Fragment {
 
   @fragmentArray('task') tasks;
 
-  @fragmentArray('service') services;
+  @fragmentArray('service-fragment') services;
 
   @fragmentArray('volume-definition') volumes;
 

ui/app/router.js

@@ -95,4 +95,5 @@ Router.map(function () {
       path: '/path/*absolutePath',
     });
   });
+  this.route('services', function () {});
 });

ui/app/routes/services.js

@@ -0,0 +1,18 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+import WithForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
+import notifyForbidden from 'nomad-ui/utils/notify-forbidden';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class ServicesRoute extends Route.extend(WithForbiddenState) {
+  @service store;
+  @service system;
+
+  async model() {
+    return RSVP.hash({
+      services: this.store.findAll('service'),
+    }).catch(notifyForbidden(this));
+  }
+}

ui/app/routes/services/index.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ServicesIndexRoute extends Route {}

ui/app/serializers/service-fragment.js

@@ -0,0 +1,11 @@
+import ApplicationSerializer from './application';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class ServiceFragmentSerializer extends ApplicationSerializer {
+  attrs = {
+    connect: 'Connect',
+  };
+
+  arrayNullOverrides = ['Tags'];
+}

ui/app/serializers/service.js

@@ -3,9 +3,16 @@ import classic from 'ember-classic-decorator';
 
 @classic
 export default class ServiceSerializer extends ApplicationSerializer {
-  attrs = {
-    connect: 'Connect',
-  };
-
-  arrayNullOverrides = ['Tags'];
+  normalize(typeHash, hash) {
+    hash.ID = hash.ServiceName;
+    return super.normalize(typeHash, hash);
+  }
+  normalizeResponse(store, typeClass, hash, ...args) {
+    return super.normalizeResponse(
+      store,
+      typeClass,
+      hash.mapBy('Services').flat() || [],
+      ...args
+    );
+  }
 }

ui/app/templates/components/gutter-menu.hbs

@@ -73,6 +73,15 @@
           </LinkTo>
         </li>
         {{/if}}
+        <li>
+          <LinkTo
+            @route="services"
+            @activeClass="is-active"
+            data-test-gutter-link="services"
+          >
+            Services
+          </LinkTo>
+        </li>
       </ul>
       <p class="menu-label">
         Cluster

ui/app/templates/services.hbs

@@ -0,0 +1,4 @@
+<Breadcrumb @crumb={{hash label="Services" args=(array "services.index")}} />
+<PageLayout>
+  {{outlet}}
+</PageLayout>

ui/app/templates/services/index.hbs

@@ -0,0 +1,26 @@
+{{page-title "Services"}}
+<section class="section">
+	<ListTable
+		@source={{this.model.services}}
+		as |t|
+	>
+		<t.head>
+			<th>
+				Name
+			</th>
+			<th>
+				Tags
+			</th>
+		</t.head>
+		<t.body as |row|>
+			<tr data-test-service-row>
+				<td>{{row.model.name}}</td>
+				<td>
+					{{#each row.model.tags as |tag|}}
+						<span class="tag">{{tag}}</span>
+					{{/each}}
+				</td>
+			</tr>
+		</t.body>
+	</ListTable>
+</section>

ui/mirage/config.js

@@ -863,6 +863,17 @@ export default function () {
   });
 
   //#endregion Secure Variables
+
+  //#region Services
+  this.get('/services', function (schema) {
+    return [
+      {
+        Namespace: 'default',
+        Services: schema.services.all().models,
+      },
+    ];
+  });
+  //#endregion Services
 }
 
 function filterKeys(object, ...keys) {

ui/mirage/factories/service-fragment.js

@@ -0,0 +1,34 @@
+import { Factory } from 'ember-cli-mirage';
+import faker from 'nomad-ui/mirage/faker';
+import { provide } from '../utils';
+import { dasherize } from '@ember/string';
+
+const ON_UPDATE = ['default', 'ignore', 'ignore_warnings'];
+
+export default Factory.extend({
+  name: (id) => `${dasherize(faker.hacker.noun())}-${id}-service`,
+  portLabel: () => dasherize(faker.hacker.noun()),
+  onUpdate: faker.helpers.randomize(ON_UPDATE),
+  tags: () => {
+    if (!faker.random.boolean()) {
+      return provide(
+        faker.random.number({ min: 0, max: 2 }),
+        faker.hacker.noun.bind(faker.hacker.noun)
+      );
+    } else {
+      return null;
+    }
+  },
+  Connect: {
+    SidecarService: {
+      Proxy: {
+        Upstreams: [
+          {
+            DestinationName: dasherize(faker.hacker.noun()),
+            LocalBindPort: faker.random.number({ min: 5000, max: 60000 }),
+          },
+        ],
+      },
+    },
+  },
+});

ui/mirage/factories/service.js

@@ -1,15 +1,11 @@
 import { Factory } from 'ember-cli-mirage';
 import faker from 'nomad-ui/mirage/faker';
+import { pickOne } from '../utils';
 import { provide } from '../utils';
-import { dasherize } from '@ember/string';
-
-const ON_UPDATE = ['default', 'ignore', 'ignore_warnings'];
 
 export default Factory.extend({
-  name: (id) => `${dasherize(faker.hacker.noun())}-${id}-service`,
-  portLabel: () => dasherize(faker.hacker.noun()),
-  onUpdate: faker.helpers.randomize(ON_UPDATE),
-  tags: () => {
+  ServiceName: () => `${faker.hacker.adjective()}-${faker.hacker.noun()}`,
+  Tags: () => {
     if (!faker.random.boolean()) {
       return provide(
         faker.random.number({ min: 0, max: 2 }),
@@ -19,16 +15,4 @@ export default Factory.extend({
       return null;
     }
   },
-  Connect: {
-    SidecarService: {
-      Proxy: {
-        Upstreams: [
-          {
-            DestinationName: dasherize(faker.hacker.noun()),
-            LocalBindPort: faker.random.number({ min: 5000, max: 60000 }),
-          },
-        ],
-      },
-    },
-  },
 });

ui/mirage/factories/task-group.js

@@ -135,7 +135,7 @@ export default Factory.extend({
       Array(faker.random.number({ min: 1, max: 3 }))
         .fill(null)
         .forEach(() => {
-          server.create('service', {
+          server.create('service-fragment', {
             taskGroup: group,
           });
         });

ui/mirage/models/task-group.js

@@ -2,6 +2,6 @@ import { Model, belongsTo, hasMany } from 'ember-cli-mirage';
 
 export default Model.extend({
   job: belongsTo(),
-  services: hasMany(),
+  services: hasMany('service-fragment'),
   tasks: hasMany(),
 });

ui/mirage/scenarios/default.js

@@ -51,6 +51,7 @@ function smallCluster(server) {
   server.create('allocFile', 'dir', { depth: 2 });
   server.createList('csi-plugin', 2);
   server.createList('variable', 3);
+  server.createList('service', 10);
 
   const variableLinkedJob = server.db.jobs[0];
   const variableLinkedGroup = server.db.taskGroups.findBy({

ui/tests/acceptance/services-test.js

@@ -0,0 +1,50 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, findAll } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import percySnapshot from '@percy/ember';
+import Services from 'nomad-ui/tests/pages/services';
+import Layout from 'nomad-ui/tests/pages/layout';
+import defaultScenario from '../../mirage/scenarios/default';
+import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
+
+module('Acceptance | services', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  test('it passes an accessibility audit', async function (assert) {
+    assert.expect(1);
+    defaultScenario(server);
+    await Services.visit();
+    await a11yAudit(assert);
+  });
+
+  module('traversal', function () {
+    test('visiting /services by url', async function (assert) {
+      defaultScenario(server);
+      await Services.visit();
+      assert.equal(currentURL(), '/services');
+    });
+
+    test('main menu correctly takes you to services', async function (assert) {
+      assert.expect(1);
+      defaultScenario(server);
+      await visit('/');
+      await Layout.gutter.visitServices();
+      assert.equal(currentURL(), '/services');
+      await percySnapshot(assert);
+    });
+  });
+
+  module('services index table', function () {
+    test('services table shows expected number of services', async function (assert) {
+      server.createList('service', 3);
+      await Services.visit();
+      assert.equal(
+        findAll('[data-test-service-row]').length,
+        3,
+        'correctly shows 3 services'
+      );
+    });
+  });
+});

ui/tests/pages/layout.js

@@ -80,6 +80,7 @@ export default create({
     visitClients: clickable('[data-test-gutter-link="clients"]'),
     visitServers: clickable('[data-test-gutter-link="servers"]'),
     visitStorage: clickable('[data-test-gutter-link="storage"]'),
+    visitServices: clickable('[data-test-gutter-link="services"]'),
   },
 
   breadcrumbs: collection('[data-test-breadcrumb]', {

ui/tests/pages/services.js

@@ -0,0 +1,5 @@
+import { create, visitable } from 'ember-cli-page-object';
+
+export default create({
+  visit: visitable('/services'),
+});