109 lines
3 KiB
TypeScript
109 lines
3 KiB
TypeScript
import * as React from "react";
|
|
|
|
import Build from "./build";
|
|
import Throbber from "./throbber";
|
|
|
|
interface IBody {
|
|
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, IBodyState> {
|
|
static propTypes = {
|
|
description: React.PropTypes.string.isRequired,
|
|
api: React.PropTypes.object.isRequired,
|
|
repository: React.PropTypes.object.isRequired,
|
|
}
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
currentBuild: [],
|
|
intervalId: null
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
let intervalId: number = window.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;
|
|
if (description === null || description === "") {
|
|
description = "No Description";
|
|
}
|
|
return(
|
|
<div>
|
|
<ul className="nav nav-tabs rp-tabs">
|
|
<li className="active">
|
|
<a data-target="#tab1" data-toggle="tab">Description</a>
|
|
</li>
|
|
<li>
|
|
<a data-target="#tab2" data-toggle="tab">Automated Builds</a>
|
|
</li>
|
|
</ul>
|
|
<div className="panel-body rp-panelBody">
|
|
<div className="tab-content">
|
|
<div className="tab-pane in active" id="tab1">
|
|
<div className="rp-description">{description}</div>
|
|
</div>
|
|
<div className="tab-pane" id="tab2">
|
|
<div className="panel-body">
|
|
<h3 className="tab-header">Repository Builds</h3>
|
|
<Build data={this.state.currentBuild}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default body;
|
|
|