vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #2239 from iminoso/loading

Browse source 
Add throbber while waiting for builds to load
This commit is contained in:
Ian Minoso 2016-12-15 13:27:48 -08:00 committed by GitHub
commit 1eff25f459
4 changed files with 50 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/css/directives/components/pages/repo-page/body.scss
View file

@ -2,6 +2,10 @@
font-size: 16px;
}
.rp-throbber {
position: relative;
}
.rp-panelBody {
padding: 15px 30px;
}

6
static/js/directives/components/pages/repo-page/body.tsx
View file

@ -1,5 +1,7 @@
import * as React from "react";
import Build from "./build";
import Throbber from "./throbber";
interface IBody {
description: string;
@ -90,9 +92,9 @@ class body extends React.Component<IBody, IBodyState> {
<div className="tab-pane in active" id="tab1">
<div className="rp-description">{description}</div>
</div>
<div className="tab-pane" id="tab2">
<h3 className="tab-header">Repository Builds</h3>
<div className="tab-pane" id="tab2">
<div className="panel-body">
<h3 className="tab-header">Repository Builds</h3>
<Build data={this.state.currentBuild}/>
</div>
</div>

42
static/js/directives/components/pages/repo-page/build.tsx
View file

@ -1,14 +1,19 @@
import * as React from 'react';
import * as moment from "moment";
import Throbber from "./throbber";
export default class Build extends React.Component<any, any> {
render () {
let builds: any = this.props.data;
let buildsTable: any = [];
let table: any;
if (Object.keys(builds).length === 0) {
buildsTable.push('Loading')
table = <Throbber />
}
else {
// Get Builds
builds.forEach((element, i) => {
let tags: Array<any> = []
element.tags.forEach(tag => {
@ -31,22 +36,29 @@ export default class Build extends React.Component<any, any> {
</tr>
)
});
// Build the table
table = (
<table className="co-table">
<thead>
<tr>
<td></td>
<td>BUILD ID</td>
<td>TRIGGERED BY</td>
<td>DATE STARTED</td>
<td>TAGS</td>
</tr>
</thead>
<tbody>
{buildsTable}
</tbody>
</table>
);
}
return(
<table className="co-table">
<thead>
<tr>
<td></td>
<td>BUILD ID</td>
<td>TRIGGERED BY</td>
<td>DATE STARTED</td>
<td>TAGS</td>
</tr>
</thead>
<tbody>
{buildsTable}
</tbody>
</table>
<div className="row">
{table}
</div>
);
}
}
}

15
static/js/directives/components/pages/repo-page/throbber.tsx Normal file
View file

@ -0,0 +1,15 @@
import * as React from 'react';
import * as moment from "moment";
export default class Throbber extends React.Component<any, any> {
render () {
return(
<div className="co-m-loader co-an-fade-in-out rp-throbber">
<div className="co-m-loader-dot__one"></div>
<div className="co-m-loader-dot__two"></div>
<div className="co-m-loader-dot__three"></div>
</div>
);
}
}