This repository has been archived on 2020-03-24. You can view files and clone it, but cannot push or open issues or pull requests.
quay/static/js/directives/components/pages/repo-page/body.tsx
2016-12-13 16:46:35 -08:00

97 lines
2.7 KiB
TypeScript

import * as React from "react";
import Build from "./build";
interface IBody {
description: string;
api: Object;
repository: Object;
}
interface IBodyState {
currentBuild: any;
}
/**
* 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: []
};
}
componentDidMount() {
setInterval(() => this.getBuilds(), 1000);
}
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
});
});
}
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">
<h3 className="tab-header">Repository Builds</h3>
<div className="panel-body">
<Build data={this.state.currentBuild}/>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default body;