luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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

UI Loading states
This commit is contained in:
Michael Lange 2017-10-05 18:00:51 -07:00 committed by GitHub
parent 16c92fc1bb 877cbe6fbc
commit 0941c7bec1
13 changed files with 150 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/adapters/job.js
View File

@ -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.

15
ui/app/components/allocation-row.js
View File

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

8
ui/app/controllers/jobs/job/loading.js Normal file
View File

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

1
ui/app/styles/components.scss
View File

@ -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";

71
ui/app/styles/components/loading-spinner.scss Normal file
View File

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

8
ui/app/templates/components/allocation-row.hbs
View File

@ -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">

8
ui/app/templates/components/job-row.hbs
View File

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

9
ui/app/templates/jobs/job/loading.hbs Normal file
View File

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

6
ui/app/templates/jobs/loading.hbs Normal file
View File

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

7
ui/app/templates/loading.hbs Normal file
View File

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

6
ui/app/templates/nodes/loading.hbs Normal file
View File

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

11
ui/app/templates/partials/loading-spinner.hbs Normal file
View File

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

1
ui/app/templates/servers/loading.hbs Normal file
View File

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