Make job alloc/children summary collapsable (and persist the choice in localStorage)

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,
-
-  summary: alias('job.summary'),
-
   classNames: ['boxed-section'],
+
+  isExpanded: computed(function() {
+    const storageValue = window.localStorage.nomadExpandJobSummary;
+    return storageValue != null ? JSON.parse(storageValue) : true;
+  }),
+
+  persist(item, isOpen) {
+    window.localStorage.nomadExpandJobSummary = isOpen;
+    this.notifyPropertyChange('isExpanded');
+  },
 });

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}}
+