diff options
Diffstat (limited to 'src/app/modifications/Modifications.jsx')
| -rw-r--r-- | src/app/modifications/Modifications.jsx | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/src/app/modifications/Modifications.jsx b/src/app/modifications/Modifications.jsx new file mode 100644 index 0000000..f9837e7 --- /dev/null +++ b/src/app/modifications/Modifications.jsx @@ -0,0 +1,190 @@ +/* + * ============LICENSE_START======================================================= + * org.onap.aai + * ================================================================================ + * Copyright © 2017-2021 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. + * ============LICENSE_END========================================================= + */ + +import React, {Component} from 'react'; +import {GlobalExtConstants} from 'utils/GlobalExtConstants.js'; +import Col from 'react-bootstrap/lib/Col'; +import Row from 'react-bootstrap/lib/Row'; +import Grid from 'react-bootstrap/lib/Grid'; +import Panel from 'react-bootstrap/lib/Panel'; +import * as Excel from 'exceljs/dist/exceljs.min.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +let INVLIST = GlobalExtConstants.INVLIST; +let OXM = GlobalExtConstants.OXM; + +let invList = null; + +class Modifications extends Component { + + state = { + file:null, + enableBusyFeedback: false, + enableUploadFeedback: false, + showResults: false, + errorResults: true + }; + + constructor(){ + super(); + } + componentDidMount(){ + }; + addValidationError = (baseString, sheetName, row, validationError) => { + return baseString += 'Error occurred on worksheet ' + sheetName + ' at Row ' + row + ' ' + + validationError + '\n'; + } + uploadedFile = (e) => { + this.setState({enableUploadFeedback: true,enableBusyFeedback:false,showResults:false,errorResults:false}); + let reader = new FileReader(); + let file = e.target.files[0]; + let wb = new Excel.Workbook(); + var columnHeaders = []; + var jsonPayload = []; + reader.onload= () => { + const buffer = reader.result; + var validationErrors = {}; + wb.xlsx.load(buffer).then(workbook => { + workbook.eachSheet(function(worksheet, sheetId) { + worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) { + if(rowNumber === 1){ + for(var j = 1;j <= row.values.length; j++){ + columnHeaders[sheetId + '-' + j ] = row.values[j]; + } + }else{ + var obj = {}; + obj.properties = {}; + obj['node-type'] = worksheet.name; + for(var j = 1;j <= row.values.length; j++){ + if(['uri','action'].indexOf(columnHeaders[sheetId + '-' + j ]) > -1){ + obj[columnHeaders[sheetId + '-' + j ]] = row.values[j]; + if(!row.values[j] || row.values[j] === ""){ + + }else if (columnHeaders[sheetId + '-' + j ] === 'action' + && ['DELETE','UPDATE', 'ADD'].indexOf((row.values[j]).toUpperCase()) === -1 ){ + validationErrors = this.addValidationError(validationErrors, + worksheet.name, j, 'Action needs to be DELETE, UPDATE, or ADD'); + } + }else if(columnHeaders[sheetId + '-' + j ] !== 'relationship-list'){ + obj.properties[columnHeaders[sheetId + '-' + j ]] = row.values[j]; + } + } + jsonPayload.push(obj); + } + console.log("Row " + rowNumber + " = " + JSON.stringify(row.values)); + }); + console.log(JSON.stringify(jsonPayload)); + }); + this.setState({enableUploadFeedback: false}); + }); + + } + if((file.name).endsWith(".xls") || (file.name).endsWith(".xlsx")){ + reader.readAsArrayBuffer(file); + }else{ + var error = {}; + error.validationMsg = "Please upload a valid file, valid files are .xslx and .xsl only." + triggerError(error); + this.setState({enableUploadFeedback: false}); + } + } + onFileSubmit = () => { + this.setState({enableBusyFeedback:true,showResults:false,errorResults:false}); + } + triggerError = (error) => { + console.error('[Modifications.jsx] error : ', JSON.stringify(error)); + this.setState({ + enableBusyFeedback: false, + showResults: false, + errorResults: true + }); + let errMsg = ''; + if(error.validationMsg){ + errMsg = error.validationMsg; + } else if (error.response) { + // The request was made and the server responded with a status code + // that falls out of the range of 2xx + console.log(error.response.data); + console.log(error.response.status); + console.log(error.response.headers); + if(error.response.status){ + errMsg += " Code: " + error.response.status; + } + if(error.response.data){ + errMsg += " - " + JSON.stringify(error.response.data); + } + } else if (error.request) { + // The request was made but no response was received + // `error.request` is an instance of XMLHttpRequest in the browser and an instance of + // http.ClientRequest in node.js + console.log(error.request); + errMsg += " - Request was made but no response received"; + } else { + // Something happened in setting up the request that triggered an Error + console.log('Error', error.message); + errMsg += " - Unknown error occurred " + error.message; + } + //Suppress Error Message when 404 results not found occur + if(error.response && error.response.status === 404){ + this.setState({errorMessage:'', errorResults:false}); + }else{ + this.setState({errorMessage:errMsg}); + } + } + render = () => { + return( + <div> + <div id='modifications'> + <header className='addPadding jumbotron my-4'> + <h1 className='display-2'>Modifications Page</h1> + <p className='lead'> + On this page you have the ability to make modifications to the data by uploading a xslx. + </p> + </header> + <Grid fluid={true} className='model-container'> + <Spinner loading={this.state.enableUploadFeedback}> + <Row> + <form className="addPadding" onSubmit={this.onFileSubmit}> + <div className="row justify-content-center mb-2"> + <input onChange={this.uploadedFile} type="file" id="excelFile" accept=".xlsx, .xls"/> + <button type="submit" className="btn btn-sm btn-info">Send</button> + </div> + </form> + </Row> + </Spinner> + <Spinner loading={this.state.enableBusyFeedback}> + <Row> + <div className={'addPaddingTop alert alert-danger ' +(this.state.errorResults ? 'show' : 'hidden')} role="alert"> + An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage} + </div> + </Row> + <Row> + <div className={'addPaddingTop alert alert-success ' +(this.state.showResults ? 'show' : 'hidden')} role="alert"> + The updates were made successfully. + </div> + </Row> + </Spinner> + </Grid> + </div> + </div> + ); + } + } +export default Modifications; |