reactos/developer-web-interface
1
0
Fork 0
mirror of https://github.com/reactos/developer-web-interface.git synced 2025-05-14 10:35:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

printing buildData in commitsCard.js

Browse Source
This commit is contained in:
Ayush Kumar Sinha 2019-07-21 14:37:47 +05:30 committed by Victor Perevertkin
parent bfadfd4fdb
commit 3a81d9d33c
4 changed files with 233 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/components/BuildDetails.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
class BuildDetails extends React.Component {
renderBuild = build => {
return (
<React.Fragment key={build.buildid}>
<div className='col-sm-3'>
<a
target='_blank'
rel='noreferrer noopener'
href={`https://build.reactos.org/#builders/${
build.builderid
}/builds/${build.number}`}
>
{this.props.builders[build.builderid - 1].name}
</a>
</div>
<div className='col-sm-3'>
{build.state_string}
{build.state_string === 'build successful' ? (
<i className='fa fa-check' />
) : (
<i />
)}
</div>
<div className='col-sm-3'>started_at:{build.started_at}</div>
<div className='col-sm-3'>complete_at:{build.complete_at}</div>
</React.Fragment>
);
};
render() {
return this.props.build ? (
<React.Fragment>
{this.props.build.length > 0 ? (
<div className='row'>{this.props.build.map(this.renderBuild)}</div>
) : (
<p>
<strong>No data Exists</strong>
</p>
)}
</React.Fragment>
) : (
<h6>No data Exists</h6>
);
}
}
export default BuildDetails;

174
client/src/components/Commits.js
View File

@ -5,98 +5,108 @@ import Branches from './Branches';
import './styles/Commit.css'; import './styles/Commit.css';
import CommitsCard from './CommitsCard'; import CommitsCard from './CommitsCard';
import Loading from './Loading'; import Loading from './Loading';
class Commits extends React.Component { class Commits extends React.Component {
componentDidMount() { componentDidMount() {
this.props.loadCommits(); this.props.loadCommits();
this.props.loadBuildSets(); this.props.loadBuildSets();
} }
renderCommits = commit => {
return (
<div className='panel-margin' key={commit.sha}>
<CommitsCard {...commit} />
</div>
);
};
render() { renderCommits = commit => {
return ( return (
<div className='container margin'> <div className='panel-margin' key={commit.sha}>
<Branches /> <CommitsCard
<h6>Current Branch:{this.props.branch}</h6> {...commit}
<h3>Latest Commits</h3> builds={this.props.build[commit.sha]}
{this.props.isLoading.load ? ( builders={this.props.builders}
<Loading />
text={`Fetching latest Commits of ${this.props.branch} for you...`} </div>
/> );
) : ( };
<div>
<div>{this.props.commits.map(this.renderCommits)}</div> render() {
{this.props.error ? ( return (
<div className='error'> <div className='container margin'>
Unexpected Error occured. Kindly Reload the page <Branches />
<br /> <h6>Current Branch:{this.props.branch}</h6>
Err:{this.props.error} <h3>Latest Commits</h3>
</div> {this.props.isLoading.load ? (
) : ( <Loading
<div> text={`Fetching latest Commits of ${this.props.branch} for you...`}
<button />
type='button' ) : (
onClick={() => { <div>
this.props.loadCommits(this.props.page.prev); <div>{this.props.commits.map(this.renderCommits)}</div>
}} {this.props.error ? (
className='btn btn-primary ' <div className='error'>
disabled={this.props.page.prev === null || this.props.error !== null} Unexpected Error occured. Kindly Reload the page
> <br />
<i className='fa fa-caret-left' aria-hidden='true' /> Err:{this.props.error}
Previous Page{' '} </div>
</button>{' '} ) : (
<button <div>
type='button' <button
onClick={() => { type='button'
this.props.loadCommits(this.props.page.next); onClick={() => {
}} this.props.loadCommits(this.props.page.prev);
className='btn btn-primary' }}
disabled={this.props.page.next === null || this.props.error !== null} className='btn btn-primary '
> disabled={
Next Page{' '} this.props.page.prev === null || this.props.error !== null
<i className='fa fa-caret-right' aria-hidden='true' /> }
</button> >
<footer className='blockquote-footer'> <i className='fa fa-caret-left' aria-hidden='true' />
Page {this.props.page.next - 1} Previous Page{' '}
</footer> </button>{' '}
<div className='footer-blockquote' /> <button
</div> type='button'
)} onClick={() => {
</div> this.props.loadCommits(this.props.page.next);
)} }}
</div> className='btn btn-primary'
); disabled={
} this.props.page.next === null || this.props.error !== null
}
>
Next Page{' '}
<i className='fa fa-caret-right' aria-hidden='true' />
</button>
<footer className='blockquote-footer'>
Page {this.props.page.next - 1}
</footer>
<div className='footer-blockquote' />
</div>
)}
</div>
)}
</div>
);
}
} }
const mapStateToProps = ({ const mapStateToProps = ({
isLoading, isLoading,
commits, commits,
error, builders,
branch, error,
page, branch,
build page,
build
}) => ({ }) => ({
isLoading, isLoading,
commits, commits,
error, builders,
branch, error,
page, branch,
build page,
build
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
loadBuildSets: () => dispatch(loadBuildSets()), loadBuildSets: () => dispatch(loadBuildSets()),
loadCommits: next => dispatch(loadCommits(next)) loadCommits: next => dispatch(loadCommits(next))
}); });
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Commits); )(Commits);

167
client/src/components/CommitsCard.js
View File

@ -1,85 +1,92 @@
import React from 'react'; import React from 'react';
import { UncontrolledCollapse, CardBody, Card, CardHeader } from 'reactstrap'; import { UncontrolledCollapse, CardBody, Card, CardHeader } from 'reactstrap';
import BuildDetails from './BuildDetails';
function CommitsCard(props) { function CommitsCard(props) {
let tog = 'toggler' + props.sha; let tog = 'toggler' + props.sha;
let committerDate = new Date(props.commit.committer.date); let committerDate = new Date(props.commit.committer.date);
let authorDate = new Date(props.commit.author.date); let authorDate = new Date(props.commit.author.date);
let author = encodeURIComponent(props.commit.author.name); let author = encodeURIComponent(props.commit.author.name);
let committer = encodeURIComponent(props.commit.committer.name); let committer = encodeURIComponent(props.commit.committer.name);
return ( return (
<Card> <Card>
<CardHeader className='new' type='button' id={tog}> <CardHeader className='new' type='button' id={tog}>
<div className='row'> <div className='row'>
<div className='col-sm'>{props.sha.substring(0, 7)}</div> <div className='col-sm'>{props.sha.substring(0, 7)}</div>
<div className='col-sm'>{props.commit.committer.name}</div> <div className='col-sm'>{props.commit.committer.name}</div>
<div className='col-sm'>{committerDate.toLocaleString()}</div> <div className='col-sm'>{committerDate.toLocaleString()}</div>
<div className='col-sm'>{props.commit.message.substring(0, 17)}...</div> <div className='col-sm'>
</div> {props.commit.message.substring(0, 17)}...
</CardHeader> </div>
<UncontrolledCollapse toggler={tog}> </div>
<CardBody className='indent'> </CardHeader>
<div> <UncontrolledCollapse toggler={tog}>
<p> <CardBody className='indent'>
<strong>commit: </strong>{' '} <div>
<a <p>
target='_blank' <strong>commit: </strong>{' '}
rel='noreferrer noopener' <a
href={props.commit.html_url} target='_blank'
> rel='noreferrer noopener'
{props.sha} href={props.commit.html_url}
</a> >
</p> {props.sha}
<p> </a>
<strong>Commit Msg:</strong> {props.commit.message} </p>
</p> <p>
</div> <strong>Commit Msg:</strong> {props.commit.message}
<div className='row'> </p>
<div className='col-sm'> </div>
<strong>Author: </strong> <div className='row'>
<a <div className='col-sm'>
target='_blank' <strong>Author: </strong>
rel='noreferrer noopener' <a
href={`https://git.reactos.org/?p=reactos.git;a=search;s=${author};st=author`} target='_blank'
> rel='noreferrer noopener'
{props.commit.author.name} href={`https://git.reactos.org/?p=reactos.git;a=search;s=${author};st=author`}
</a> >
</div> {props.commit.author.name}
<div className='col-sm'> </a>
<strong>Author Date: </strong> </div>
{authorDate.toLocaleString()} <div className='col-sm'>
</div> <strong>Author Date: </strong>
<div className='col-sm'> {authorDate.toLocaleString()}
<strong>Author Email: </strong> </div>
<a href={`mailto:${props.commit.author.email}`} target='_top'> <div className='col-sm'>
{props.commit.author.email} <strong>Author Email: </strong>
</a> <a href={`mailto:${props.commit.author.email}`} target='_top'>
</div> {props.commit.author.email}
</div> </a>
<div className='row'> </div>
<div className='col-sm'> </div>
<strong>Committer: </strong> <div className='row'>
<a <div className='col-sm'>
target='_blank' <strong>Committer: </strong>
rel='noreferrer noopener' <a
href={`https://git.reactos.org/?p=reactos.git;a=search;s=${committer};st=committer`} target='_blank'
> rel='noreferrer noopener'
{props.commit.committer.name} href={`https://git.reactos.org/?p=reactos.git;a=search;s=${committer};st=committer`}
</a> >
</div> {props.commit.committer.name}
<div className='col-sm'> </a>
<strong>Committer Date: </strong> </div>
{committerDate.toLocaleString()} <div className='col-sm'>
</div> <strong>Committer Date: </strong>
<div className='col-sm'> {committerDate.toLocaleString()}
<strong>Committer Email: </strong> </div>
<a href={`mailto:${props.commit.committer.email}`} target='_top'> <div className='col-sm'>
{props.commit.committer.email} <strong>Committer Email: </strong>
</a> <a href={`mailto:${props.commit.committer.email}`} target='_top'>
</div> {props.commit.committer.email}
</div> </a>
</CardBody> </div>
</UncontrolledCollapse> </div>
</Card> <h5>Build Details:</h5>
); <hr />
<BuildDetails build={props.builds} builders={props.builders} />
</CardBody>
</UncontrolledCollapse>
</Card>
);
} }
export default CommitsCard; export default CommitsCard;

12
client/src/redux/api/index.js
View File

@ -17,12 +17,14 @@ export const fetchBuildSets = async () => {
}; };
export const fetchBuildReq = async str => { export const fetchBuildReq = async str => {
const response = await fetch(`/api/buildreq?${str}`); if (str) {
const data = await response.json(); const response = await fetch(`/api/buildreq?${str}`);
if (response.status >= 400) { const data = await response.json();
throw new Error(data.errors); if (response.status >= 400) {
throw new Error(data.errors);
}
return data.buildrequests;
} }
return data.buildrequests;
}; };
export const fetchBuilds = async str => { export const fetchBuilds = async str => {