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, i) => {return (<ErrorMessage key={i} 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, i) =>{ return (<ComponentError key={i} 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         return (
  94                 <div>
  95                         <div className='component-name-header'>{item.entityName}</div>
  96                         {item.errors.map((error, i) => {return(<ErrorMessage key={i} error={error}/>);})}
  97                 </div>
  98         );
  99 };
 100
 101 function* entries(obj) {
 102         for (let key of Object.keys(obj)) {
 103                 yield {header: key, list: obj[key]};
 104         }
 105 }
 106
 107 const UploadErrorList = ({items}) => {
 108         let generator = entries(items);
 109
 110         let errors = [];
 111         for (let item of generator) {errors.push(
 112                 <div key={item.header}>
 113                         <div className='component-name-header'>{item.header}</div>
 114                         {item.list.map((error, i) => <ErrorMessage key={i} warning={error.level === 'WARNING'} error={error.message}/> )}
 115                 </div>
 116         );}
 117
 118         return (
 119                 <div>
 120                         {errors}
 121                 </div>
 122         );
 123 };
 124
 125 class ErrorBlock extends React.Component {
 126         state = {
 127                 collapsed: false
 128         };
 129
 130         render() {
 131                 let {errorType, children} = this.props;
 132                 return (
 133                         <div className='error-block'>
 134                                 <ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
 135                                 <Collapse in={this.state.collapsed}>
 136                                         {children}
 137                                 </Collapse>
 138                         </div>
 139                 );
 140         }
 141 }
 142
 143 const ErrorHeader = ({errorType, collapsed, onClick}) => {
 144         return(
 145                 <div onClick={onClick} className='error-block-header'>
 146                         <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/>
 147                 </div>
 148         );
 149 };
 150
 151 const ErrorMessage = ({error, warning}) => {
 152         return (
 153                 <ListGroupItem className='error-code-list-item'>
 154                         <SVGIcon
 155                                 name={warning ? 'exclamationTriangleLine' : 'error'}
 156                                 color={warning ? 'warning' : 'negative'} />
 157                         <span className='icon-label'>{error}</span>
 158                 </ListGroupItem>
 159         );
 160 };
 161
 162 export default SubmitErrorResponse;