Merge pull request #2232 from iminoso/services

Basic builds table for new repo view

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

@@ -41,3 +41,6 @@
   }
 }
 
+.rp-tagSpan {
+  margin: 0 2px;
+}

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

@@ -1,19 +1,74 @@
 import * as React from "react";
+import Build from "./build";
 
 interface IBody {
-  description: string,
-  api: Object
+  description: string;
+  api: Object;
+  repository: Object;
+}
+
+interface IBodyState {
+  currentBuild: any;
+  intervalId: number;
 }
 
 /**
  * The Component for the main body of the repo page
  * @param {string} description - The description of the repository
  * @param {object} api - The ApiService injected from Angular
+ * @param {object} repository - The list of properties for the repository
  */
-class body extends React.Component<IBody, {}> {
+class body extends React.Component<IBody, IBodyState> {
   static propTypes = {
     description: React.PropTypes.string.isRequired,
-    api: React.PropTypes.object.isRequired
+    api: React.PropTypes.object.isRequired,
+    repository: React.PropTypes.object.isRequired,
+  }
+  constructor(props){
+    super(props)
+    this.state = {
+      currentBuild: [],
+      intervalId: null
+    };
+  }
+  componentDidMount() {
+    let intervalId: number = setInterval(() => this.getBuilds(), 1000);
+    this.setState({
+      currentBuild: this.state.currentBuild,
+      intervalId: intervalId
+    });
+  }
+  comoponentDidUnmount() {
+    clearInterval(this.state.intervalId);
+  }
+  getBuilds() {
+    let api: any = this.props.api;
+    let repository: any = this.props.repository;
+    let params: Object = {
+      'repository': repository.namespace + '/' + repository.name,
+      'limit': 8
+    };
+
+    api.getRepoBuildsAsResource(params, true).get((data) => {
+      let builds: Array<Object> = [];
+      data.builds.forEach((element, i) => {
+        builds.push({
+          user: element.manual_user,
+          id: element.id,
+          display_name: element.display_name,
+          started: element.started,
+          tags: element.tags,
+          phase: element.phase,
+          trigger: element.trigger,
+          trigger_metadata: element.trigger_metadata
+        });
+      });
+      
+      this.setState({
+        currentBuild: builds,
+        intervalId: this.state.intervalId
+      });
+    });
   }
   render () {
     let description: string = this.props.description;
@@ -37,6 +92,9 @@ class body extends React.Component<IBody, {}> {
                   </div>
                   <div className="tab-pane" id="tab2">
                     <h3 className="tab-header">Repository Builds</h3>
+                    <div className="panel-body">
+                        <Build data={this.state.currentBuild}/>
+                    </div>
                   </div>
               </div>
           </div>

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as moment from "moment";
+
+export default class Build extends React.Component<any, any> {
+  render () {
+    let builds: any = this.props.data;
+    let buildsTable: any = [];
+    if (Object.keys(builds).length === 0) {
+      buildsTable.push('Loading')
+    }
+    else {
+      builds.forEach((element, i) => {
+        let tags: Array<any> = []
+        element.tags.forEach(tag => {
+          tags.push(
+            <span className="building-tag">
+              <span className="tag-span rp-tagSpan">
+                <i className="fa fa-tag"></i> {tag}
+              </span>
+            </span>
+          );
+        });
+        let buildId: string = element.id.split('-')[0];
+        buildsTable.push(
+          <tr key={buildId}>
+            <td>{element.phase}</td>
+            <td>{buildId}</td>
+            <td>{element.trigger_metadata.commit_info.message}</td>
+            <td>{moment(element.started).format('l')}</td>
+            <td>{tags}</td>
+          </tr>
+        )
+      });
+    }
+    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>
+    );
+  }
+}

static/js/directives/components/pages/repo-page/header.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 interface IHeader {
-  name: string,
-  namespace: string
+  name: string;
+  namespace: string;
 }
 
 /**

static/js/directives/components/pages/repo-page/sidebar.tsx

@@ -9,8 +9,8 @@ interface tag {
 }
 
 interface ISidebar {
-  isPublic: string,
-  tags: Array<tag>,
+  isPublic: string;
+  tags: Array<tag>;
   repository: Object
 }
 

static/partials/repo-view.html

@@ -12,7 +12,7 @@
         </div>
         <!-- Body -->
         <div>
-          <rp-body description="repository.description"></rp-body>
+          <rp-body description="repository.description" repository="repository"></rp-body>
         </div>
       </div>
       <!-- Sidebar -->