Merge pull request #3323 from hashicorp/f-ui-loading-states

UI Loading states

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.

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();
+    }
+  },
 });

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'),
+});

ui/app/styles/components.scss

@@ -7,6 +7,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";

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

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 class="has-text-centered">

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>

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

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

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>

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

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>

ui/app/templates/servers/loading.hbs

@@ -0,0 +1 @@
+  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>