WIP - Create the Builds information

ui/src/components/build/BuildDownloadLinks.js

@@ -3,21 +3,21 @@ import { Col, Row } from 'patternfly-react';
 import './BuildDownloadLinks.css';
 import QRCode from 'qrcode.react';
 
+
 class BuildDownloadLinks extends Component {
     render() {
-        const {downloadUrl} = this.props.downloadInfo;
-        const size = this.props.QRSize || 256;
-
         return (
             <div className="build-download-component">
               <Row>
-                <Col md={6}>
+                <Col md={5}>
                     <p>Download from URL:</p>
-                    <a>{downloadUrl}</a>
+                    <a>{this.props.downloadURL}</a>
+                </Col>
+                <Col md={2}>
+                        <p className="float-right">or Scan QR Code:</p>
                 </Col>
-                <Col md={6}>
-                    <p>or Scan QR Code:</p>
-                    <QRCode value={downloadUrl} size={size}/>
+                <Col md={4}>
+                    <QRCode value={this.props.downloadURL} size={200}/>
                 </Col>
               </Row>
             </div>

ui/src/components/build/BuildDownloadLinks.scss

@@ -1,5 +1,13 @@
 .build-download-component {
+  padding: 4px;
+  margin-top: 4px;
   p {
     font-weight: 700;
+    margin: 0 !important;
   }
 }
+
+.build-download-component .float-right {
+  float: right;
+}
+

ui/src/components/build/BuildInformation.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { Button, Col } from 'patternfly-react';
+
+import BuildDownloadLinks from './BuildDownloadLinks';
+import BuildSummary from './BuildSummary';
+
+import "./BuildInformation.css";
+
+class BuildInformation extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            toggleLinks : false,
+            buildSuccessfull : true
+        }
+    }
+
+    handleDownload(){
+        this.setState(prevState => ({
+            toggleLinks: !prevState.toggleLinks
+        }));
+    }
+
+    renderDownloadButton(){
+        if (this.props.build.status.phase === "Complete"){
+            return <Button bsStyle="primary" onClick={this.handleDownload.bind(this)}>
+                Download
+            </Button>
+        }
+        return null;
+    }
+
+    renderDownloadDialog(){
+        if (this.state.toggleLinks){
+            return <BuildDownloadLinks downloadURL={this.props.build.metadata.annotations["aerogear.org/download-mobile-artifact-url"]}/>
+        }
+        return null;
+    }
+
+    render () {
+        return (
+            <div className="build-information">
+                <div className="latest-mobile-build">
+                    <Col className="latest-build-pipeline" md={10}>
+                        <div className="build-pipeline">
+                            <BuildSummary build={this.props.build}/>
+                            <div className="pipeline-container">
+                                <div className="pipeline">
+
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                    <Col className="latest-download-trigger" md={2}>
+                        {this.renderDownloadButton()}
+                    </Col>
+                </div>
+                {this.renderDownloadDialog()}
+            </div>
+        )
+    }
+}
+
+export default BuildInformation;

ui/src/components/build/BuildInformation.scss

@@ -0,0 +1,43 @@
+.latest-mobile-build{
+    display: flex;
+}
+
+.build-information {
+    border: 1px solid #dbdbdb;
+    padding : 4px ;
+    display:  inline-block;
+    margin-bottom: 10px;
+    width: 100%;
+ }
+
+ .build-pipeline {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: row;
+}
+
+ .latest-build-pipeline {
+     padding: 0px;
+ }
+
+ .build-information .col-md-1 {
+    padding-right: 0 !important;
+ }
+
+ .pipeline-container {
+    flex: 1 1 auto;
+    overflow: hidden;
+ }
+
+ .pipeline {
+     display: flex;
+     flex-wrap: wrap;
+     height: 100%;
+     padding: 0 5px;
+ }
+
+ .latest-download-trigger {
+     align-items: center;
+     display: flex;
+     justify-content: flex-end;
+ }

ui/src/components/build/BuildPipelineStage.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class BuildPipelineStage extends Component {
+    render () {
+        return (
+            <div>
+                 <span>Pipeline Stage</span>
+            </div>
+        )
+    }
+}
+
+export default BuildPipelineStage;

ui/src/components/build/BuildSummary.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import Moment from "react-moment";
+import BuildStatus from '../common/BuildStatus';
+
+import "./BuildSummary.css";
+
+class BuildSummary extends Component { 
+    render () {
+        return (
+            <div className="build-summary-container">
+                 <div className="build-phase"><BuildStatus build={this.props.build} />&nbsp;<a>Build #1</a></div>
+                 <div className="build-timestamp"><Moment fromNow>{this.props.build.status.startTimestamp}</Moment></div>
+                 <div className="build-links"><a>View log</a></div>
+            </div>
+        )
+    }
+}
+
+export default BuildSummary;

ui/src/components/build/BuildSummary.scss

@@ -0,0 +1,46 @@
+.build-status-container {
+    text-align: center;
+    flex: 0 0 125px;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+
+    .col-md-2 {
+        width: 0
+    }
+}
+
+.build-status-container .build-status.timestamp {
+    color: #757575;
+    padding-left: 5px;
+    font-size: 10px;
+}
+
+.build-status-container a {
+    cursor: pointer;
+}
+
+.build-summary-container {
+    display: flex;
+    width: 10em;
+    flex: 0 0 125px;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    position: relative;
+    text-align: center;
+}
+
+.build-timestamp {
+    font-size: 91%;
+    color: #757575;
+}
+
+.build-phase {
+    padding: 0 10px;
+}
+
+.build-links {
+    padding: 0 10px;
+    font-size: 91%;
+}

ui/src/components/build/MobileClientBuildListItem.js

@@ -4,8 +4,8 @@ import BuildStatus from '../common/BuildStatus';
 import MobileListViewItem from '../common/MobileListViewItem';
 import BuildConfigDetails from './BuildConfigDetails';
 import ComponentSectionLabel from '../common/ComponentSectionLabel';
-import BuildDownloadLinks from './BuildDownloadLinks';
 import MobileClientBuildHistoryList from './MobileClientBuildHistoryList';
+import BuildInformation from './BuildInformation';
 
 const mobileClientBuilds = [
     {
@@ -101,10 +101,6 @@ const buildConfig = {
   "repoUrl": "https://github.com/myusername/my-mobile-application"
 }
 
-const downloadInfo = {
-  "downloadUrl": "https://github.com/somedownloadlink"
-}
-
 const heading = mobileClientBuild => (
     <div className="pull-left text-left">
         <a className="name">
@@ -168,6 +164,7 @@ class MobileClientBuildListItem extends Component {
               <ComponentSectionLabel>
                 Builds
               </ComponentSectionLabel>
+              <BuildInformation build={mobileClientBuild}/>
               <Row>
                   <Col md={12}>
                       <div className="mobile-chevron">
@@ -189,7 +186,6 @@ class MobileClientBuildListItem extends Component {
                       }
                   </Col>
               </Row>
-              <BuildDownloadLinks downloadInfo={downloadInfo}/>
             </Col>
           </Row>
           </MobileListViewItem>

ui/src/components/build/MobileClientBuildsList.js

@@ -6,7 +6,7 @@ import MobileClientBuildListItem from './MobileClientBuildListItem';
 class MobileClientBuildOverviewList extends Component {
     render = () => {
         const {mobileClientBuilds} = this.props;
-
+        console.log(mobileClientBuilds);
         return (
             <div>
                 <ListView>

ui/src/components/common/BuildStatus.js

@@ -33,7 +33,6 @@ const getIcon = phase => {
 class BuildStatus extends Component {
     render = () => {
         const {phase} = this.props.build.status;
-
         return (
             <React.Fragment>
                 {getIcon(phase)}