Merge pull request #4504 from hashicorp/f-ui-collapsable-job-summary

UI: Collapsable job summary visualization

ui/app/components/job-page/parts/summary.js

@@ -1,13 +1,17 @@
 import Component from '@ember/component';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
 
 export default Component.extend({
-  store: service(),
-
   job: null,
+  classNames: ['boxed-section'],
 
-  summary: alias('job.summary'),
+  isExpanded: computed(function() {
+    const storageValue = window.localStorage.nomadExpandJobSummary;
+    return storageValue != null ? JSON.parse(storageValue) : true;
+  }),
 
-  classNames: ['boxed-section'],
+  persist(item, isOpen) {
+    window.localStorage.nomadExpandJobSummary = isOpen;
+    this.notifyPropertyChange('isExpanded');
+  },
 });

ui/app/components/list-accordion.js

@@ -7,16 +7,20 @@ export default Component.extend({
   key: 'id',
   source: computed(() => []),
 
+  onToggle(/* item, isOpen */) {},
+  startExpanded: false,
+
   decoratedSource: computed('source.[]', function() {
     const stateCache = this.get('stateCache');
     const key = this.get('key');
     const deepKey = `item.${key}`;
+    const startExpanded = this.get('startExpanded');
 
     const decoratedSource = this.get('source').map(item => {
       const cacheItem = stateCache.findBy(deepKey, get(item, key));
       return {
         item,
-        isOpen: cacheItem ? !!cacheItem.isOpen : false,
+        isOpen: cacheItem ? !!cacheItem.isOpen : startExpanded,
       };
     });
 

ui/app/styles/components/accordion.scss

@@ -32,6 +32,7 @@
 
     .accordion-head-content {
       width: 100%;
+      margin-right: 1.5em;
     }
 
     .accordion-toggle {

ui/app/templates/components/job-page/parts/summary.hbs

@@ -1,16 +1,41 @@
-<div class="boxed-section-head">
-  <div>
-    {{#if job.hasChildren}}
-      Children Status <span class="badge is-white">{{summary.totalChildren}}</span>
-    {{else}}
-      Allocation Status <span class="badge is-white">{{summary.totalAllocs}}</span>
-    {{/if}}
-  </div>
-</div>
-<div class="boxed-section-body">
-  {{#component (if job.hasChildren "children-status-bar" "allocation-status-bar")
-    allocationContainer=summary
-    job=summary
+{{#list-accordion source=(array job) key="id" startExpanded=isExpanded onToggle=(action persist) as |a|}}
+  {{#a.head buttonLabel=(if a.isOpen "collapse" "expand")}}
+    <div class="columns">
+      <div class="column is-minimum nowrap">
+        {{#if a.item.hasChildren}}
+          Children Status
+          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
+            {{a.item.summary.totalChildren}}
+          </span>
+        {{else}}
+          Allocation Status
+          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
+            {{a.item.summary.totalAllocs}}
+          </span>
+        {{/if}}
+      </div>
+
+      {{#if (not a.isOpen)}}
+        <div class="column">
+          <div class="inline-chart bumper-left">
+            {{#if a.item.hasChildren}}
+              {{#if (gt a.item.totalChildren 0)}}
+                {{children-status-bar job=a.item isNarrow=true}}
+              {{else}}
+                <em class="is-faded">No Children</em>
+              {{/if}}
+            {{else}}
+              {{allocation-status-bar allocationContainer=a.item isNarrow=true}}
+            {{/if}}
+          </div>
+        </div>
+      {{/if}}
+    </div>
+  {{/a.head}}
+  {{#a.body}}
+    {{#component (if a.item.hasChildren "children-status-bar" "allocation-status-bar")
+    allocationContainer=a.item.summary
+    job=a.item.summary
     class="split-view" as |chart|}}
     <ol data-test-legend class="legend">
       {{#each chart.data as |datum index|}}
@@ -24,4 +49,6 @@
       {{/each}}
     </ol>
   {{/component}}
-</div>
+  {{/a.body}}
+{{/list-accordion}}
+

ui/app/templates/components/list-accordion.hbs

@@ -2,9 +2,17 @@
   {{yield (hash
     head=(component "list-accordion/accordion-head"
       isOpen=item.isOpen
-      onOpen=(action (mut item.isOpen) true)
-      onClose=(action (mut item.isOpen) false))
+      onOpen=(action (queue
+        (action (mut item.isOpen) true)
+        (action onToggle item.item item.isOpen)
+      ))
+      onClose=(action (queue
+        (action (mut item.isOpen) false)
+        (action onToggle item.item item.isOpen)
+      ))
+    )
     body=(component "list-accordion/accordion-body" isOpen=item.isOpen)
     item=item.item
+    isOpen=item.isOpen
   )}}
 {{/each}}

ui/tests/integration/job-page/parts/summary-test.js

@@ -1,7 +1,7 @@
 import { getOwner } from '@ember/application';
 import hbs from 'htmlbars-inline-precompile';
 import wait from 'ember-test-helpers/wait';
-import { find } from 'ember-native-dom-helpers';
+import { find, click } from 'ember-native-dom-helpers';
 import { test, moduleForComponent } from 'ember-qunit';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
@@ -152,3 +152,130 @@ test('the children diagram lists all children status figures', function(assert)
     });
   });
 });
+
+test('the summary block can be collapsed', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait()
+    .then(() => {
+      this.set('job', this.store.peekAll('job').get('firstObject'));
+
+      this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+      return wait();
+    })
+    .then(() => {
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.notOk(find('[data-test-accordion-body]'), 'No accordion body');
+      assert.notOk(find('[data-test-legend]'), 'No legend');
+    });
+});
+
+test('when collapsed, the summary block includes an inline version of the chart', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait()
+    .then(() => {
+      this.set('job', this.store.peekAll('job').get('firstObject'));
+
+      this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+      return wait();
+    })
+    .then(() => {
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
+      assert.ok(
+        find('.inline-chart [data-test-allocation-status-bar]'),
+        'Allocation bar is rendered in an inline-chart container'
+      );
+    });
+});
+
+test('the collapsed/expanded state is persisted to localStorage', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait()
+    .then(() => {
+      this.set('job', this.store.peekAll('job').get('firstObject'));
+
+      this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+      return wait();
+    })
+    .then(() => {
+      assert.notOk(window.localStorage.nomadExpandJobSummary, 'No value in localStorage yet');
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.equal(
+        window.localStorage.nomadExpandJobSummary,
+        'false',
+        'Value is stored for the collapsed state'
+      );
+    });
+});
+
+test('the collapsed/expanded state from localStorage is used for the initial state when available', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  window.localStorage.nomadExpandJobSummary = 'false';
+
+  return wait()
+    .then(() => {
+      this.set('job', this.store.peekAll('job').get('firstObject'));
+
+      this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+      return wait();
+    })
+    .then(() => {
+      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
+      assert.ok(
+        find('.inline-chart [data-test-allocation-status-bar]'),
+        'Allocation bar is rendered in an inline-chart container'
+      );
+
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.equal(
+        window.localStorage.nomadExpandJobSummary,
+        'true',
+        'localStorage value still toggles'
+      );
+      assert.ok(find('[data-test-accordion-body]'), 'Summary still expands');
+    });
+});