From 18ba5753685e89a826eadaaceaed85a6980086fe Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 3 Oct 2017 15:52:03 -0700
Subject: [PATCH 1/5] New loading spinner

Courtesy of SpinKit: https://github.com/tobiasahlin/SpinKit
---
 ui/app/styles/components.scss                 |  1 +
 ui/app/styles/components/loading-spinner.scss | 71 +++++++++++++++++++
 ui/app/templates/partials/loading-spinner.hbs | 11 +++
 3 files changed, 83 insertions(+)
 create mode 100644 ui/app/styles/components/loading-spinner.scss
 create mode 100644 ui/app/templates/partials/loading-spinner.hbs

diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss
index 50f6ef1c8..fa69b4f92 100644
--- a/ui/app/styles/components.scss
+++ b/ui/app/styles/components.scss
@@ -6,6 +6,7 @@
 @import "./components/inline-definitions";
 @import "./components/job-diff";
 @import "./components/json-viewer";
+@import "./components/loading-spinner";
 @import "./components/metrics";
 @import "./components/node-status-light";
 @import "./components/status-text";
diff --git a/ui/app/styles/components/loading-spinner.scss b/ui/app/styles/components/loading-spinner.scss
new file mode 100644
index 000000000..0bf07e49e
--- /dev/null
+++ b/ui/app/styles/components/loading-spinner.scss
@@ -0,0 +1,71 @@
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+
+  .loading-spinner-square {
+    width: 33%;
+    height: 33%;
+    background-color: $primary;
+    float: left;
+    animation: loading-spinner-squareGridScaleDelay 1.3s infinite ease-in-out;
+  }
+
+  .loading-spinner-square1 {
+    animation-delay: 0.2s;
+  }
+
+  .loading-spinner-square2 {
+    animation-delay: 0.3s;
+  }
+
+  .loading-spinner-square3 {
+    animation-delay: 0.4s;
+  }
+
+  .loading-spinner-square4 {
+    animation-delay: 0.1s;
+  }
+
+  .loading-spinner-square5 {
+    animation-delay: 0.2s;
+  }
+
+  .loading-spinner-square6 {
+    animation-delay: 0.3s;
+  }
+
+  .loading-spinner-square7 {
+    animation-delay: 0s;
+  }
+
+  .loading-spinner-square8 {
+    animation-delay: 0.1s;
+  }
+
+  .loading-spinner-square9 {
+    animation-delay: 0.2s;
+  }
+}
+
+@-webkit-keyframes loading-spinner-squareGridScaleDelay {
+  0%,
+  70%,
+  100% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    transform: scale3D(0, 0, 1);
+  }
+}
+
+@keyframes loading-spinner-squareGridScaleDelay {
+  0%,
+  70%,
+  100% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    transform: scale3D(0, 0, 1);
+  }
+}
diff --git a/ui/app/templates/partials/loading-spinner.hbs b/ui/app/templates/partials/loading-spinner.hbs
new file mode 100644
index 000000000..ee8ca9fa7
--- /dev/null
+++ b/ui/app/templates/partials/loading-spinner.hbs
@@ -0,0 +1,11 @@
+<div class="loading-spinner">
+  <div class="loading-spinner-square loading-spinner-square1"></div>
+  <div class="loading-spinner-square loading-spinner-square2"></div>
+  <div class="loading-spinner-square loading-spinner-square3"></div>
+  <div class="loading-spinner-square loading-spinner-square4"></div>
+  <div class="loading-spinner-square loading-spinner-square5"></div>
+  <div class="loading-spinner-square loading-spinner-square6"></div>
+  <div class="loading-spinner-square loading-spinner-square7"></div>
+  <div class="loading-spinner-square loading-spinner-square8"></div>
+  <div class="loading-spinner-square loading-spinner-square9"></div>
+</div>

From 033c7432cc92da32544fa347c374cc4d357b0756 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 3 Oct 2017 15:54:01 -0700
Subject: [PATCH 2/5] Loading templates in places

---
 ui/app/controllers/jobs/job/loading.js | 8 ++++++++
 ui/app/templates/jobs/job/loading.hbs  | 9 +++++++++
 ui/app/templates/jobs/loading.hbs      | 6 ++++++
 ui/app/templates/loading.hbs           | 7 +++++++
 ui/app/templates/nodes/loading.hbs     | 6 ++++++
 ui/app/templates/servers/loading.hbs   | 1 +
 6 files changed, 37 insertions(+)
 create mode 100644 ui/app/controllers/jobs/job/loading.js
 create mode 100644 ui/app/templates/jobs/job/loading.hbs
 create mode 100644 ui/app/templates/jobs/loading.hbs
 create mode 100644 ui/app/templates/loading.hbs
 create mode 100644 ui/app/templates/nodes/loading.hbs
 create mode 100644 ui/app/templates/servers/loading.hbs

diff --git a/ui/app/controllers/jobs/job/loading.js b/ui/app/controllers/jobs/job/loading.js
new file mode 100644
index 000000000..bb159e836
--- /dev/null
+++ b/ui/app/controllers/jobs/job/loading.js
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+const { Controller, computed, inject } = Ember;
+
+export default Controller.extend({
+  jobController: inject.controller('jobs.job'),
+  breadcrumbs: computed.alias('jobController.breadcrumbs'),
+});
diff --git a/ui/app/templates/jobs/job/loading.hbs b/ui/app/templates/jobs/job/loading.hbs
new file mode 100644
index 000000000..072715949
--- /dev/null
+++ b/ui/app/templates/jobs/job/loading.hbs
@@ -0,0 +1,9 @@
+{{#global-header class="page-header"}}
+  {{#each breadcrumbs as |breadcrumb|}}
+    <a href="{{href-to-spread breadcrumb.args}}" class="breadcrumb">{{breadcrumb.label}}</a>
+  {{/each}}
+{{/global-header}}
+{{#gutter-menu class="page-body"}}
+  {{partial "jobs/job/subnav"}}
+  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+{{/gutter-menu}}
diff --git a/ui/app/templates/jobs/loading.hbs b/ui/app/templates/jobs/loading.hbs
new file mode 100644
index 000000000..f754d94ff
--- /dev/null
+++ b/ui/app/templates/jobs/loading.hbs
@@ -0,0 +1,6 @@
+{{#global-header class="page-header"}}
+  Jobs
+{{/global-header}}
+{{#gutter-menu class="page-body"}}
+  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+{{/gutter-menu}}
diff --git a/ui/app/templates/loading.hbs b/ui/app/templates/loading.hbs
new file mode 100644
index 000000000..14013c55b
--- /dev/null
+++ b/ui/app/templates/loading.hbs
@@ -0,0 +1,7 @@
+<div class="page-layout">
+  {{#global-header class="page-header"}}
+  {{/global-header}}
+  {{#gutter-menu class="page-body"}}
+    <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  {{/gutter-menu}}
+</div>
diff --git a/ui/app/templates/nodes/loading.hbs b/ui/app/templates/nodes/loading.hbs
new file mode 100644
index 000000000..d247848fd
--- /dev/null
+++ b/ui/app/templates/nodes/loading.hbs
@@ -0,0 +1,6 @@
+{{#global-header class="page-header"}}
+  Nodes
+{{/global-header}}
+{{#gutter-menu class="page-body"}}
+  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+{{/gutter-menu}}
diff --git a/ui/app/templates/servers/loading.hbs b/ui/app/templates/servers/loading.hbs
new file mode 100644
index 000000000..f1647480c
--- /dev/null
+++ b/ui/app/templates/servers/loading.hbs
@@ -0,0 +1 @@
+  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>

From 900b21863211f53ce9688159b0bd5f9071c38074 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 3 Oct 2017 16:24:30 -0700
Subject: [PATCH 3/5] Simple loading state for job details in a job row

---
 ui/app/templates/components/job-row.hbs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/app/templates/components/job-row.hbs b/ui/app/templates/components/job-row.hbs
index 36a3d8d50..94e0118bd 100644
--- a/ui/app/templates/components/job-row.hbs
+++ b/ui/app/templates/components/job-row.hbs
@@ -4,7 +4,13 @@
 </td>
 <td>{{job.type}}</td>
 <td>{{job.priority}}</td>
-<td>{{job.taskGroups.length}}</td>
+<td>
+  {{#if job.isReloading}}
+    ...
+  {{else}}
+    {{job.taskGroups.length}}
+  {{/if}}
+</td>
 <td>
   <div class="inline-chart">{{allocation-status-bar allocationContainer=job isNarrow=true}}</div>
 </td>

From 5b0095627d713f7b875c5b73fc599b53b0b549de Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 3 Oct 2017 17:17:45 -0700
Subject: [PATCH 4/5] Always reload all jobs

Ember tries to be clever by showing cached jobs instead of a loading spinner
in the event that a user starts on nodes, loads a couple jobs through
allocation relationships, then visits jobs.
---
 ui/app/adapters/job.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/app/adapters/job.js b/ui/app/adapters/job.js
index c51690a05..1c6e69bd0 100644
--- a/ui/app/adapters/job.js
+++ b/ui/app/adapters/job.js
@@ -4,6 +4,8 @@ import ApplicationAdapter from './application';
 const { RSVP } = Ember;
 
 export default ApplicationAdapter.extend({
+  shouldReloadAll: () => true,
+
   findRecord(store, { modelName }, id, snapshot) {
     // To make a findRecord response reflect the findMany response, the JobSummary
     // from /summary needs to be stitched into the response.

From bc3c59c3e009f2572ac51f041d9b5c333fcc785c Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 3 Oct 2017 17:18:33 -0700
Subject: [PATCH 5/5] Add a loading state to job information on allocation row.

This information is already loaded when traversing to an alloc row from
a job, but not when traversing to an alloc row from a node.
---
 ui/app/components/allocation-row.js            | 15 +++++++++++++++
 ui/app/templates/components/allocation-row.hbs |  8 ++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/allocation-row.js b/ui/app/components/allocation-row.js
index 415d5f3fe..044d368d2 100644
--- a/ui/app/components/allocation-row.js
+++ b/ui/app/components/allocation-row.js
@@ -18,4 +18,19 @@ export default Component.extend({
   click(event) {
     lazyClick([this.get('onClick'), event]);
   },
+
+  didReceiveAttrs() {
+    // If the job for this allocation is incomplete, reload it to get
+    // detailed information.
+    const allocation = this.get('allocation');
+    if (
+      allocation &&
+      allocation.get('job') &&
+      !allocation.get('job.isPending') &&
+      !allocation.get('taskGroup')
+    ) {
+      const job = allocation.get('job.content');
+      job && job.reload();
+    }
+  },
 });
diff --git a/ui/app/templates/components/allocation-row.hbs b/ui/app/templates/components/allocation-row.hbs
index 9da0e3722..477d03dab 100644
--- a/ui/app/templates/components/allocation-row.hbs
+++ b/ui/app/templates/components/allocation-row.hbs
@@ -11,8 +11,12 @@
   <td><a href="{{href-to "nodes.node" allocation.node}}">{{allocation.node.shortId}}</a></td>
 {{else if (eq context "node")}}
   <td>
-    <a href="{{href-to "jobs.job" allocation.job}}">{{allocation.job.name}}</a>
-    <span class="is-faded">/ {{allocation.taskGroup.name}}</span>
+    {{#if (or allocation.job.isPending allocation.job.isReloading)}}
+      ...
+    {{else}}
+      <a href="{{href-to "jobs.job" allocation.job}}">{{allocation.job.name}}</a>
+      <span class="is-faded">/ {{allocation.taskGroup.name}}</span>
+    {{/if}}
   </td>
 {{/if}}
 <td>