From 78e66d410052ff3d5a78d58d91c4d8cb9f72480b Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 12 Jul 2018 12:06:42 -0700
Subject: [PATCH] Make job alloc/children summary collapsable (and persist the
 choice in localStorage)

---
 ui/app/components/job-page/parts/summary.js   | 18 +++---
 ui/app/styles/components/accordion.scss       |  1 +
 .../components/job-page/parts/summary.hbs     | 55 ++++++++++++++-----
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/ui/app/components/job-page/parts/summary.js b/ui/app/components/job-page/parts/summary.js
index 5f69e09ca..ba6211659 100644
--- a/ui/app/components/job-page/parts/summary.js
+++ b/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');
+  },
 });
diff --git a/ui/app/styles/components/accordion.scss b/ui/app/styles/components/accordion.scss
index 17ca8bcc5..3aaa057e5 100644
--- a/ui/app/styles/components/accordion.scss
+++ b/ui/app/styles/components/accordion.scss
@@ -32,6 +32,7 @@
 
     .accordion-head-content {
       width: 100%;
+      margin-right: 1.5em;
     }
 
     .accordion-toggle {
diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
index 8fd9679c0..38e9a1b68 100644
--- a/ui/app/templates/components/job-page/parts/summary.hbs
+++ b/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}}
+