openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React, {Component} from 'react';
  17 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  20 import {Collapse} from 'react-bootstrap';
  21 /**
  22  * parsing and showing the following Java Response object
  23  *
  24  * public class ValidationResponse {
  25                 private boolean valid = true;
  26                 private Collection<ErrorCode> vspErrors;
  27                 private Collection<ErrorCode> licensingDataErrors;
  28                 private Map<String, List<ErrorMessage>> uploadDataErrors;
  29                 private Map<String, List<ErrorMessage>> compilationErrors;
  30                 private QuestionnaireValidationResult questionnaireValidationResult;
  31     }
  32
  33  * public class ErrorCode {
  34                 private String id;
  35                 private String message;
  36                 private ErrorCategory category;
  37     }
  38
  39  * public class ErrorMessage {
  40                 private final ErrorLevel level;
  41                 private final String message;
  42     }
  43  */
  44 class SubmitErrorResponse extends Component {
  45
  46
  47         render() {
  48                 let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props;
  49                 return (
  50                         <div className='submit-error-response-view'>
  51                                 {vspErrors && this.renderVspErrors(vspErrors)}
  52                                 {licensingDataErrors && this.renderVspErrors(licensingDataErrors)}
  53                                 {questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)}
  54                                 {uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)}
  55                         </div>
  56                 );
  57         }
  58
  59         renderVspErrors(errors) {
  60                 return (
  61                         <ErrorBlock errorType={i18n('VSP Errors')}>
  62                                 <div>
  63                                         {errors.length && errors.map(error=>{return (<ErrorMessage error={error.message}/>);})}
  64                                 </div>
  65                         </ErrorBlock>
  66                 );
  67         }
  68
  69
  70         renderComponentsErrors(errors) {
  71                 return (
  72                         <ErrorBlock errorType={i18n('Components Errors')}>
  73                                 <div>
  74                                         {errors.validationData.length && errors.validationData.map(item =>{ return (<ComponentError item={item}/>);})}
  75                                 </div>
  76                         </ErrorBlock>
  77                 );
  78         }
  79
  80         renderUploadDataErrors(uploadDataErrors) {
  81                 return (
  82                         <ErrorBlock errorType={i18n('Upload Data Errors')}>
  83                                 <div>
  84                                         <UploadErrorList items={uploadDataErrors}/>
  85                                 </div>
  86                         </ErrorBlock>
  87                 );
  88         }
  89 }
  90
  91
  92 const ComponentError = ({item}) => {
  93         let i = 0;
  94         return (
  95                 <div>
  96                         <div className='component-name-header'>{item.entityName}</div>
  97                         {item.errors.map(error => {return(<ErrorMessage key={i++} error={error}/>);})}
  98                 </div>
  99         );
 100 };
 101
 102 function* entries(obj) {
 103         for (let key of Object.keys(obj)) {
 104                 yield {header: key, list: obj[key]};
 105         }
 106 }
 107
 108 const UploadErrorList = ({items}) => {
 109         let generator = entries(items);
 110
 111         let errors = [];
 112         for (let item of generator) {errors.push(
 113                 <div>
 114                         <div className='component-name-header'>{item.header}</div>
 115                         {item.list.map((error, i) => <ErrorMessage key={i} warning={error.level === 'WARNING'} error={error.message}/> )}
 116                 </div>
 117         );}
 118
 119         return (
 120                 <div>
 121                         {errors}
 122                 </div>
 123         );
 124 };
 125
 126 class ErrorBlock extends React.Component {
 127         state = {
 128                 collapsed: false
 129         };
 130
 131         render() {
 132                 let {errorType, children} = this.props;
 133                 return (
 134                         <div className='error-block'>
 135                                 <ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
 136                                 <Collapse in={this.state.collapsed}>
 137                                         {children}
 138                                 </Collapse>
 139                         </div>
 140                 );
 141         }
 142 }
 143
 144 const ErrorHeader = ({errorType, collapsed, onClick}) => {
 145         return(
 146                 <div onClick={onClick} className='error-block-header'>
 147                         <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/>
 148                 </div>
 149         );
 150 };
 151
 152 const ErrorMessage = ({error, warning}) => {
 153         return (
 154                 <ListGroupItem className='error-code-list-item'>
 155                         <SVGIcon
 156                                 name={warning ? 'exclamationTriangleLine' : 'error'}
 157                                 color={warning ? 'warning' : 'negative'} />
 158                         <span className='icon-label'>{error}</span>
 159                 </ListGroupItem>
 160         );
 161 };
 162
 163 export default SubmitErrorResponse;