Acceptance test coverage for all the pages with resource utilization …

…graphs

ui/app/components/primary-metric.js

@@ -16,6 +16,8 @@ export default Component.extend({
   // cpu or memory
   metric: null,
 
+  'data-test-primary-metric': true,
+
   // An instance of a StatsTracker. An alternative interface to resource
   tracker: computed('trackedResource', 'type', function() {
     const resource = this.get('trackedResource');

ui/app/templates/components/primary-metric.hbs

@@ -1,4 +1,4 @@
-<h4 class="title is-5">{{metricLabel}}</h4>
+<h4 data-test-primary-metric-title class="title is-5">{{metricLabel}}</h4>
 <div class="primary-graphic">
   {{stats-time-series data=data chartClass=chartClass}}
 </div>

ui/app/utils/classes/allocation-stats-tracker.js

@@ -88,7 +88,8 @@ const AllocationStatsTracker = EmberObject.extend(AbstractStatsTracker, {
 
   tasks: computed('allocation', function() {
     const bufferSize = this.get('bufferSize');
-    return this.get('allocation.taskGroup.tasks').map(task => ({
+    const tasks = this.get('allocation.taskGroup.tasks') || [];
+    return tasks.map(task => ({
       task: get(task, 'name'),
 
       // Static figures, denominators for stats

ui/tests/acceptance/allocation-detail-test.js

@@ -64,6 +64,12 @@ test('/allocation/:id should name the allocation and link to the corresponding j
   });
 });
 
+test('/allocation/:id should include resource utilization graphs', function(assert) {
+  assert.equal(Allocation.resourceCharts.length, 2, 'Two resource utilization graphs');
+  assert.equal(Allocation.resourceCharts.objectAt(0).name, 'CPU', 'First chart is CPU');
+  assert.equal(Allocation.resourceCharts.objectAt(1).name, 'Memory', 'Second chart is Memory');
+});
+
 test('/allocation/:id should list all tasks for the allocation', function(assert) {
   assert.equal(
     Allocation.tasks.length,

ui/tests/acceptance/client-detail-test.js

@@ -93,6 +93,16 @@ test('/clients/:id should list additional detail for the node below the title',
   });
 });
 
+test('/clients/:id should include resource utilization graphs', function(assert) {
+  ClientDetail.visit({ id: node.id });
+
+  andThen(() => {
+    assert.equal(ClientDetail.resourceCharts.length, 2, 'Two resource utilization graphs');
+    assert.equal(ClientDetail.resourceCharts.objectAt(0).name, 'CPU', 'First chart is CPU');
+    assert.equal(ClientDetail.resourceCharts.objectAt(1).name, 'Memory', 'Second chart is Memory');
+  });
+});
+
 test('/clients/:id should list all allocations on the node', function(assert) {
   const allocationsCount = server.db.allocations.where({ nodeId: node.id }).length;
 

ui/tests/acceptance/task-detail-test.js

@@ -94,6 +94,12 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
   });
 });
 
+test('/allocation/:id/:task_name should include resource utilization graphs', function(assert) {
+  assert.equal(Task.resourceCharts.length, 2, 'Two resource utilization graphs');
+  assert.equal(Task.resourceCharts.objectAt(0).name, 'CPU', 'First chart is CPU');
+  assert.equal(Task.resourceCharts.objectAt(1).name, 'Memory', 'Second chart is Memory');
+});
+
 test('the addresses table lists all reserved and dynamic ports', function(assert) {
   const taskResources = allocation.taskResourcesIds
     .map(id => server.db.taskResources.find(id))

ui/tests/pages/allocations/detail.js

@@ -1,4 +1,12 @@
-import { clickable, create, collection, isPresent, text, visitable } from 'ember-cli-page-object';
+import {
+  attribute,
+  clickable,
+  create,
+  collection,
+  isPresent,
+  text,
+  visitable,
+} from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/allocations/:id'),
@@ -15,6 +23,11 @@ export default create({
     visitClient: clickable('[data-test-client-link]'),
   },
 
+  resourceCharts: collection('[data-test-primary-metric]', {
+    name: text('[data-test-primary-metric-title]'),
+    chartClass: attribute('class', '[data-test-percentage-chart] progress'),
+  }),
+
   tasks: collection('[data-test-task-row]', {
     name: text('[data-test-name]'),
     state: text('[data-test-state]'),

ui/tests/pages/allocations/task/detail.js

@@ -25,6 +25,11 @@ export default create({
     return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
   },
 
+  resourceCharts: collection('[data-test-primary-metric]', {
+    name: text('[data-test-primary-metric-title]'),
+    chartClass: attribute('class', '[data-test-percentage-chart] progress'),
+  }),
+
   hasAddresses: isPresent('[data-test-task-addresses]'),
   addresses: collection('[data-test-task-address]', {
     name: text('[data-test-task-address-name]'),

ui/tests/pages/clients/detail.js

@@ -38,6 +38,11 @@ export default create({
   eligibilityDefinition: text('[data-test-eligibility]'),
   datacenterDefinition: text('[data-test-datacenter-definition]'),
 
+  resourceCharts: collection('[data-test-primary-metric]', {
+    name: text('[data-test-primary-metric-title]'),
+    chartClass: attribute('class', '[data-test-percentage-chart] progress'),
+  }),
+
   ...allocations(),
 
   attributesTable: isPresent('[data-test-attributes]'),