diff --git a/static/css/directives/components/pages/repo-page/body.scss b/static/css/directives/components/pages/repo-page/body.scss index 9724ab7df..30b2101d5 100644 --- a/static/css/directives/components/pages/repo-page/body.scss +++ b/static/css/directives/components/pages/repo-page/body.scss @@ -2,6 +2,10 @@ font-size: 16px; } +.rp-throbber { + position: relative; +} + .rp-panelBody { padding: 15px 30px; } diff --git a/static/js/directives/components/pages/repo-page/body.tsx b/static/js/directives/components/pages/repo-page/body.tsx index b64123a44..a7035bd60 100644 --- a/static/js/directives/components/pages/repo-page/body.tsx +++ b/static/js/directives/components/pages/repo-page/body.tsx @@ -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 {
{description}
-
-

Repository Builds

+
+

Repository Builds

diff --git a/static/js/directives/components/pages/repo-page/build.tsx b/static/js/directives/components/pages/repo-page/build.tsx index 7a21454bc..5d8a30fcd 100644 --- a/static/js/directives/components/pages/repo-page/build.tsx +++ b/static/js/directives/components/pages/repo-page/build.tsx @@ -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 { render () { let builds: any = this.props.data; let buildsTable: any = []; + let table: any; if (Object.keys(builds).length === 0) { buildsTable.push('Loading') + table = } else { + // Get Builds builds.forEach((element, i) => { let tags: Array = [] element.tags.forEach(tag => { @@ -31,22 +36,29 @@ export default class Build extends React.Component { ) }); + // Build the table + table = ( + + + + + + + + + + + + {buildsTable} + +
BUILD IDTRIGGERED BYDATE STARTEDTAGS
+ ); } return( - - - - - - - - - - - - {buildsTable} - -
BUILD IDTRIGGERED BYDATE STARTEDTAGS
+
+ {table} +
); } -} \ No newline at end of file +} + diff --git a/static/js/directives/components/pages/repo-page/throbber.tsx b/static/js/directives/components/pages/repo-page/throbber.tsx new file mode 100644 index 000000000..6dc798d80 --- /dev/null +++ b/static/js/directives/components/pages/repo-page/throbber.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import * as moment from "moment"; + +export default class Throbber extends React.Component { + render () { + return( +
+
+
+
+
+ ); + } +} +