[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

1 files changed, 102 insertions, 73 deletions

diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
index f2ec1582f3..0759f2c28d 100644
--- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -1,9 +1,24 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React, {Component} from 'react';
 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
-import ListGroup from 'react-bootstrap/lib/ListGroup.js';
-import Panel from 'react-bootstrap/lib/Panel.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import Icon from 'nfvo-components/icon/Icon.jsx';
+import {Collapse} from 'react-bootstrap';
 /**
  * parsing and showing the following Java Response object
  *
@@ -31,103 +46,117 @@ class SubmitErrorResponse extends Component {
 
 
 	render() {
-		let {validationResponse} = this.props;
+		let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props;
 		return (
 			<div className='submit-error-response-view'>
-				{validationResponse.vspErrors && this.renderVspErrors(validationResponse.vspErrors)}
-				{validationResponse.licensingDataErrors && this.renderVspErrors(validationResponse.licensingDataErrors)}
-				{validationResponse.compilationErrors && this.renderCompilationErrors(validationResponse.compilationErrors)}
-				{validationResponse.uploadDataErrors && this.renderUploadDataErrors(validationResponse.uploadDataErrors)}
-				{validationResponse.questionnaireValidationResult && this.renderQuestionnaireValidationResult(validationResponse.questionnaireValidationResult)}
+				{vspErrors && this.renderVspErrors(vspErrors)}
+				{licensingDataErrors && this.renderVspErrors(licensingDataErrors)}
+				{questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)}
+				{uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)}
 			</div>
 		);
 	}
 
-	renderVspErrors(vspErrors) {
+	renderVspErrors(errors) {
 		return (
-			<Panel header={i18n('VSP Errors')} collapsible>{this.parseErrorCodeCollection(vspErrors)}</Panel>
+			<ErrorBlock errorType={i18n('VSP Errors')}>
+				<div>
+					{errors.length && errors.map(error=>{return (<ErrorMessage error={error.message}/>);})}
+				</div>
+			</ErrorBlock>
 		);
 	}
 
-	renderLicensingDataErrors(licensingDataErrors) {
+
+	renderComponentsErrors(errors) {
 		return (
-			<Panel
-				header={i18n('Licensing Data Errors')}
-				collapsible>{this.parseErrorCodeCollection(licensingDataErrors)}
-			</Panel>
+			<ErrorBlock errorType={i18n('Components Errors')}>
+				<div>
+					{errors.validationData.length && errors.validationData.map(item =>{ return (<ComponentError item={item}/>);})}
+				</div>
+			</ErrorBlock>
 		);
 	}
 
 	renderUploadDataErrors(uploadDataErrors) {
 		return (
-			<Panel
-				header={i18n('Upload Data Errors')}
-				collapsible>{this.parseMapOfErrorMessagesList(uploadDataErrors)}
-			</Panel>
+			<ErrorBlock errorType={i18n('Upload Data Errors')}>
+				<div>
+					<UploadErrorList items={uploadDataErrors}/>
+				</div>
+			</ErrorBlock>
 		);
 	}
+}
 
-	renderCompilationErrors(compilationErrors) {
-		return (
-			<Panel
-				header={i18n('Compilation Errors')}
-				collapsible>{this.parseMapOfErrorMessagesList(compilationErrors)}
-			</Panel>
-		);
-	}
 
-	parseErrorCodeCollection(errors) {
-		return (
-			<ListGroup>{errors.map(error =>
-				<ListGroupItem className='error-code-list-item'>
-					<div><span>{i18n('Category: ')}</span>{error.category}</div>
-					<div><span>{i18n('Message: ')}</span>{error.message}</div>
-				</ListGroupItem>
-			)}</ListGroup>
-		);
-	}
+const ComponentError = ({item}) => {
+	let i = 0;
+	return (
+		<div>
+			<div className='component-name-header'>{item.entityName}</div>
+			{item.errors.map(error => {return(<ErrorMessage key={i++} error={error}/>);})}
+		</div>
+	);
+};
 
-	parseMapOfErrorMessagesList(errorMap) {
-		return (
-			<ListGroup>
-				{Object.keys(errorMap).map(errorStringKey =>
-					<Panel header={errorStringKey} collapsible>
-						<ListGroup>{errorMap[errorStringKey].map(error =>
-							<ListGroupItem className='error-code-list-item'>
-								<div><span>{i18n('Level: ')}</span>{error.level}</div>
-								<div><span>{i18n('Message: ')}</span>{error.message}</div>
-							</ListGroupItem>
-						)}</ListGroup>
-					</Panel>
-				)}
-			</ListGroup>
-		);
+function* entries(obj) {
+	for (let key of Object.keys(obj)) {
+		yield {header: key, list: obj[key]};
 	}
+}
 
+const UploadErrorList = ({items}) => {
+	let generator = entries(items);
+
+	let errors = [];
+	let i = 0;
+	for (let item of generator) {errors.push(
+		<div>
+			<div className='component-name-header'>{item.header}</div>
+			{item.list.map(error => <ErrorMessage key={i++} warning={error.level === 'WARNING'} error={error.message}/> )}
+		</div>
+	);}
+	return (
+		<div>
+			{errors}
+		</div>
+	);
+};
+
+class ErrorBlock extends React.Component {
+	state = {
+		collapsed: false
+	};
 
-	renderQuestionnaireValidationResult(questionnaireValidationResult) {
-		if (!questionnaireValidationResult.valid) {
-			return this.parseAndRenderCompositionEntityValidationData(questionnaireValidationResult.validationData);
-		}
-	}
-
-	parseAndRenderCompositionEntityValidationData(validationData) {
-		let {entityType, entityId, errors = [], subEntitiesValidationData = []} = validationData;
+	render() {
+		let {errorType, children} = this.props;
 		return (
-			<ListGroup>
-				<Panel header={`${entityType}: ${entityId}`} collapsible>
-					<ListGroup>{errors.map(error =>
-						<ListGroupItem className='error-code-list-item'>
-							<div>{error}</div>
-						</ListGroupItem>
-					)}</ListGroup>
-					{subEntitiesValidationData.map(subValidationData => this.parseAndRenderCompositionEntityValidationData(subValidationData))}
-				</Panel>
-			</ListGroup>
+			<div className='error-block'>
+				<ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
+				<Collapse in={this.state.collapsed}>
+					{children}
+				</Collapse>
+			</div>
 		);
 	}
-
-
 }
 
+const ErrorHeader = ({errorType, collapsed, onClick}) => {
+	return(
+		<div onClick={onClick} className='error-block-header'>
+			<SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevron-down'/>
+			{errorType}
+		</div>
+	);
+};
+
+const ErrorMessage = ({error, warning}) => {
+	return (
+		<ListGroupItem className='error-code-list-item'>
+			<Icon image={warning ? 'warning' : 'error'} label={error}/>
+		</ListGroupItem>
+	);
+};
+
 export default SubmitErrorResponse;