KPMP-1919: Finish failure page

KPMP · Jul 1, 2020 · 02e2d80 · 02e2d80
1 parent 51f865e
commit 02e2d80
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 11 deletions.
diff --git a/src/components/Validation/FilenameValidationPage.js b/src/components/Validation/FilenameValidationPage.js
@@ -37,11 +37,17 @@ class FilenameValidationPage extends Component {
 			let filesNotInMetadata = this.props.validationResult.globusFilesNotFoundInMetadata;
 			if (!filesNotInGlobus && !filesNotInMetadata) {
 				return (
-					<ValidationSuccess result={this.props.validationResult}/>
+					<ValidationSuccess 
+						result={this.props.validationResult}
+						clearValidationResult={this.props.clearValidationResult}
+					/>
 				);
 			} else {
 				return (
-					<ValidationFailure result={this.props.validationResult}/>
+					<ValidationFailure 
+						result={this.props.validationResult}
+						clearValidationResult={this.props.clearValidationResult}
+					/>
 				);
 			}
 		} else {

diff --git a/src/components/Validation/ValidationFailure.js b/src/components/Validation/ValidationFailure.js
@@ -1,22 +1,111 @@
 import React, { Component } from 'react';
 import { Container, Row, Col, Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
 
 class ValidationFailure extends Component {
+
+	generateTableRows(filesProvided, filesFound) {
+		let rows = [];
+		if (filesProvided.length > filesFound.length) {
+			for (let i=0; i< filesProvided.length; i++) {
+				let fileProvided = filesProvided[i];
+				let fileFound = filesFound.find((file) => file === fileProvided);
+				rows.push( 
+					<Row className='mt-3'>
+						<Col sm={6}>
+							{fileProvided}
+						</Col>
+						<Col sm={6}>
+							{fileFound}
+						</Col>
+					</Row>
+				);
+			}
+		} else {
+			for (let i=0; i< filesFound.length; i++) {
+				let fileFound = filesFound[i];
+				let fileProvided = filesProvided.find((file) => file === fileFound);
+				rows.push( 
+					<Row className='mt-3'>
+						<Col sm={6}>
+							{fileProvided}
+						</Col>
+						<Col sm={6}>
+							{fileFound}
+						</Col>
+					</Row>
+				);
+			}
+		}
+		return rows;
+	}
+
 	render() {
-		return(
+		let metadataFileName = '';
+		let filesProvided = this.props.result.filesFromMetadata.sort();
+		let filesFound = this.props.result.filesInGlobus.sort();
+		let metadataFileIndex = filesFound.findIndex((file) => file.startsWith('METADATA'));
+		if (metadataFileIndex > -1) {
+			metadataFileName = filesFound[metadataFileIndex];
+			filesFound.splice(metadataFileIndex, 1);
+		}
+		let rows = this.generateTableRows(filesProvided, filesFound);
+
+		return (
 			<Container>
 				<Row className='mt-3'>
-					<Col sm={12}>
+					<Col sm={2} >
 						<img
-			              src="img/fail-kidneys.jpg"
-			              alt="Filename mismatch"
-			              id="fail-kidneys"
+							src="img/fail-kidneys.jpg"
+							alt="Filename mismatch"
+							id="fail-kidneys"
+							className='validationImage'
 			            />
 					</Col>
+					<Col sm={10}>
+						<h3 className='validationMessage'>Validation Failed!</h3>
+					</Col>
+				</Row>
+				<Row className='mt-3'>
+					<Col sm={12}>
+						<span className='heavierText'>Package Id:</span> {this.props.result.packageId}
+					</Col>
 				</Row>
-			</Container>
 
-		)
+				<Row className='mt-3'>
+					<Col sm={6} className='resultHeader'>
+						Files Provided
+					</Col>
+					<Col sm={6} className='resultHeader'>
+						Files Found
+					</Col>
+				</Row>
+				{rows}
+				{metadataFileName !== '' &&
+					<Row className='mt-3'>
+						<Col sm={6}>
+
+						</Col>
+						<Col sm={6}>
+							{metadataFileName}
+						</Col>
+					</Row>
+
+				}
+				<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>	
+		);
 	}
 }
 

diff --git a/src/components/Validation/ValidationSuccess.js b/src/components/Validation/ValidationSuccess.js
@@ -75,10 +75,10 @@ class ValidationSuccess extends Component {
 					</Row>
 
 				}
-				<Row className='mt-6'>
+				<Row className='mt-4'>
 					<Col sm={6}>
 						<Link to='/filenameValidation'>
-							<Button color="primary">Let's do it again!</Button>
+							<Button color="primary" onClick={this.props.clearValidationResult}>Let's do it again!</Button>
 						</Link>
 					</Col>
 					<Col sm={6}>