Merge pull request #24 from KPMP/KPMP-1919_DisplayValidationResults

Kpmp 1919 display validation results

src/components/Validation/FilenameValidationPage.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Container, Row, Col, Button } from 'reactstrap';
-import ValidationSuccess from './ValidationSuccess';
-import ValidationFailure from './ValidationFailure';
+import ValidationResult from './ValidationResult';
 
 class FilenameValidationPage extends Component {
 
@@ -35,21 +34,16 @@ class FilenameValidationPage extends Component {
 		if (Object.keys(this.props.validationResult).length !== 0 && this.props.validationResult.constructor === Object) {
 			let filesNotInGlobus = this.props.validationResult.metadataFilesNotFoundInGlobus;
 			let filesNotInMetadata = this.props.validationResult.globusFilesNotFoundInMetadata;
-			if (!filesNotInGlobus && !filesNotInMetadata) {
-				return (
-					<ValidationSuccess 
-						result={this.props.validationResult}
-						clearValidationResult={this.props.clearValidationResult}
-					/>
-				);
-			} else {
-				return (
-					<ValidationFailure 
-						result={this.props.validationResult}
-						clearValidationResult={this.props.clearValidationResult}
-					/>
-				);
-			}
+			let isSuccess = !filesNotInGlobus && !filesNotInMetadata;
+
+			return (
+				<ValidationResult
+					result={this.props.validationResult}
+					clearValidationResult={this.props.clearValidationResult}
+					isSuccess={isSuccess}
+				/>
+			);
+
 		} else {
 			return (
 				<Container>

src/components/Validation/ValidationResult.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { Container, Row, Col, Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import { generateTableRows } from './validationResultHelper';
+
+class ValidationFailure extends Component {
+
+
+	render() {
+
+		let rows = generateTableRows(this.props.result);
+		let message = 'Validation Failed!';
+		let imgSrc = 'img/fail-kidneys.jpg';
+		let altText = 'Filname mismatch';
+		if (this.props.isSuccess) {
+			message = 'Validation Success!';
+			imgSrc = 'img/happy-kidneys.jpg';
+			altText = 'Filename match';
+		}
+
+		return (
+			<Container>
+				<Row className='mt-3'>
+					<Col sm={3} >
+						<img
+							src={imgSrc}
+							alt={altText}
+							className='validationImage'
+						/>
+					</Col>
+					<Col sm={9}>
+						<h3 className='validationMessage'>{message}</h3>
+					</Col>
+				</Row>
+				<Row className='mt-3'>
+					<Col sm={12}>
+						<span className='heavierText'>Package Id:</span> {this.props.result.packageId}
+					</Col>
+				</Row>
+
+				<Row className='mt-3'>
+					<Col sm={6} className='resultHeader'>
+						Files Provided
+					</Col>
+					<Col sm={6} className='resultHeader'>
+						Files Found
+					</Col>
+				</Row>
+				{rows}
+
+				<Row className='mt-4'>
+					<Col sm={6}>
+						<Link to='/filenameValidation'>
+							<Button color="primary" onClick={this.props.clearValidationResult}>Let's do it again!</Button>
+						</Link>
+					</Col>
+					<Col sm={6}>
+						<Link to='/'>
+							<Button color="primary">Done for now</Button>
+						</Link>
+					</Col>
+				</Row>
+			</Container>	
+		);
+	}
+}
+
+export default ValidationFailure;