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 Icon from 'nfvo-components/icon/Icon.jsx';
  21 import {Collapse} from 'react-bootstrap';
  22 /**
  23  * parsing and showing the following Java Response object
  24  *
  25  * public class ValidationResponse {
  26                 private boolean valid = true;
  27                 private Collection<ErrorCode> vspErrors;
  28                 private Collection<ErrorCode> licensingDataErrors;
  29                 private Map<String, List<ErrorMessage>> uploadDataErrors;
  30                 private Map<String, List<ErrorMessage>> compilationErrors;
  31                 private QuestionnaireValidationResult questionnaireValidationResult;
  32     }
  33
  34  * public class ErrorCode {
  35                 private String id;
  36                 private String message;
  37                 private ErrorCategory category;
  38     }
  39
  40  * public class ErrorMessage {
  41                 private final ErrorLevel level;
  42                 private final String message;
  43     }
  44  */
  45 class SubmitErrorResponse extends Component {
  46
  47
  48         render() {
  49                 let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props;
  50                 return (
  51                         <div className='submit-error-response-view'>
  52                                 {vspErrors && this.renderVspErrors(vspErrors)}
  53                                 {licensingDataErrors && this.renderVspErrors(licensingDataErrors)}
  54                                 {questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)}
  55                                 {uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)}
  56                         </div>
  57                 );
  58         }
  59
  60         renderVspErrors(errors) {
  61                 return (
  62                         <ErrorBlock errorType={i18n('VSP Errors')}>
  63                                 <div>
  64                                         {errors.length && errors.map(error=>{return (<ErrorMessage error={error.message}/>);})}
  65                                 </div>
  66                         </ErrorBlock>
  67                 );
  68         }
  69
  70
  71         renderComponentsErrors(errors) {
  72                 return (
  73                         <ErrorBlock errorType={i18n('Components Errors')}>
  74                                 <div>
  75                                         {errors.validationData.length && errors.validationData.map(item =>{ return (<ComponentError item={item}/>);})}
  76                                 </div>
  77                         </ErrorBlock>
  78                 );
  79         }
  80
  81         renderUploadDataErrors(uploadDataErrors) {
  82                 return (
  83                         <ErrorBlock errorType={i18n('Upload Data Errors')}>
  84                                 <div>
  85                                         <UploadErrorList items={uploadDataErrors}/>
  86                                 </div>
  87                         </ErrorBlock>
  88                 );
  89         }
  90 }
  91
  92
  93 const ComponentError = ({item}) => {
  94         let i = 0;
  95         return (
  96                 <div>
  97                         <div className='component-name-header'>{item.entityName}</div>
  98                         {item.errors.map(error => {return(<ErrorMessage key={i++} error={error}/>);})}
  99                 </div>
 100         );
 101 };
 102
 103 function* entries(obj) {
 104         for (let key of Object.keys(obj)) {
 105                 yield {header: key, list: obj[key]};
 106         }
 107 }
 108
 109 const UploadErrorList = ({items}) => {
 110         let generator = entries(items);
 111
 112         let errors = [];
 113         let i = 0;
 114         for (let item of generator) {errors.push(
 115                 <div>
 116                         <div className='component-name-header'>{item.header}</div>
 117                         {item.list.map(error => <ErrorMessage key={i++} warning={error.level === 'WARNING'} error={error.message}/> )}
 118                 </div>
 119         );}
 120         return (
 121                 <div>
 122                         {errors}
 123                 </div>
 124         );
 125 };
 126
 127 class ErrorBlock extends React.Component {
 128         state = {
 129                 collapsed: false
 130         };
 131
 132         render() {
 133                 let {errorType, children} = this.props;
 134                 return (
 135                         <div className='error-block'>
 136                                 <ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
 137                                 <Collapse in={this.state.collapsed}>
 138                                         {children}
 139                                 </Collapse>
 140                         </div>
 141                 );
 142         }
 143 }
 144
 145 const ErrorHeader = ({errorType, collapsed, onClick}) => {
 146         return(
 147                 <div onClick={onClick} className='error-block-header'>
 148                         <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/>
 149                         {errorType}
 150                 </div>
 151         );
 152 };
 153
 154 const ErrorMessage = ({error, warning}) => {
 155         return (
 156                 <ListGroupItem className='error-code-list-item'>
 157                         <Icon image={warning ? 'warning' : 'error'} label={error}/>
 158                 </ListGroupItem>
 159         );
 160 };
 161
 162 export default SubmitErrorResponse;