diff options
Diffstat (limited to 'src/app/model/history/components/TopologyDiffCard.jsx')
| -rw-r--r-- | src/app/model/history/components/TopologyDiffCard.jsx | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/src/app/model/history/components/TopologyDiffCard.jsx b/src/app/model/history/components/TopologyDiffCard.jsx new file mode 100644 index 0000000..9d49b17 --- /dev/null +++ b/src/app/model/history/components/TopologyDiffCard.jsx @@ -0,0 +1,151 @@ +/* + * ============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 from 'react'; +import moment from "moment"; +import Col from 'react-bootstrap/lib/Col'; +import Panel from 'react-bootstrap/lib/Panel'; + +const topologyDiffCard = (props) => { + let showNoNodesMessage = true; + if(props && props.node){ + const properties = Object.entries(props.node).map((prop, idx) => { + if (prop){ + showNoNodesMessage = false; + let showNoRelationshipsMessage = true; + let showNoAttributesMessage = true; + let propWorkaround = prop; + if(prop.data){ + propWorkaround = prop.data; + } + let tempProp = propWorkaround[1]; + let attributeProperties = ''; + let relationships = ''; + if(tempProp.properties){ + attributeProperties = Object.entries(tempProp.properties).map((property, idx) => { + let attrProp = property[1]; + if(attrProp && attrProp.value && attrProp.value.type !== 'unchanged'){ + showNoAttributesMessage = false; + return ( + <div> + <p><strong>Attribute:</strong> {attrProp.key.data} ({attrProp.value.type})</p> + </div> + ); + }else if (attrProp && attrProp.type){ + showNoAttributesMessage = false; + return ( + <div> + <p><strong>Attribute:</strong> {attrProp.data.key} ({attrProp.type})</p> + </div> + ); + } + }); + } + if(tempProp['related-to'] || tempProp.data['related-to']){ + let rel = null; + let topLevelType = null; + if(tempProp['related-to']){ + rel = tempProp['related-to']; + }else if (tempProp.data['related-to']) { + rel = tempProp.data['related-to']; + topLevelType = tempProp.type; + } + relationships = Object.entries(rel).map((property, idx) => { + let relationProp = property[1]; + if(relationProp && relationProp.type && relationProp.type.type && relationProp.type.type !== "unchanged"){ + return (''); + }else if(relationProp && relationProp.type && !relationProp.type.type && relationProp.url && relationProp.url.data){ + showNoRelationshipsMessage = false; + return ( + <div> + <p><strong>Relationship</strong>: {relationProp['relationship-label'].data} {relationProp['node-type'].data} {relationProp.url.data} ({relationProp.type})</p> + </div> + ); + }else if (relationProp && relationProp.type && relationProp.data){ + showNoRelationshipsMessage = false; + return ( + <div> + <p><strong>Relationship</strong>: {relationProp.data['relationship-label']} {relationProp.data['node-type']} {relationProp.data.url} ({relationProp.type})</p> + </div> + ); + }else if (topLevelType){ + showNoRelationshipsMessage = false; + return ( + <div> + <p><strong>Relationship</strong>: {relationProp['relationship-label']} {relationProp['node-type']} {relationProp.url} ({topLevelType})</p> + </div> + ); + } + }); + } + return ( + <Panel> + <Panel.Heading className="custom-accordion"> + <Panel.Title toggle><strong>Node:</strong> {prop[0]} <p className={tempProp.type ? 'show' : 'hidden'}>({tempProp.type})</p></Panel.Title> + </Panel.Heading> + <Panel.Collapse> + <Panel.Body className='cardwrap'> + {attributeProperties} + <div className={showNoAttributesMessage ? 'show' : 'hidden'}><p><strong>No Attribute differences, current.</strong></p></div> + {relationships} + <div className={showNoRelationshipsMessage ? 'show' : 'hidden'}><p><strong>No Relationship differences, current.</strong></p></div> + </Panel.Body> + </Panel.Collapse> + </Panel> + ); + }else{ + <div> + <p><strong>Node changes in the topology states</strong></p> + </div> + } + }); + + return ( + <Col className='col-lg-12'> + <div className='card model-card'> + <div className='card-header'> + <h4 className='card-title'>Changes from Historic to Current State</h4> + </div> + <div className='card-header'></div> + <div className='card-content model-card-content'> + {properties} + </div> + </div> + </Col> + ); + }else{ + return( + <Col className='col-lg-12'> + <div className='card model-card'> + <div className='card-header'> + <h4 className='card-title'>Unable to pull diff</h4> + </div> + <div className='card-header'></div> + <div className='card-content model-card-content'> + Diff unable to be calculated currently, choose a different timeframe. + </div> + </div> + </Col> + ); + } +}; + +export default topologyDiffCard; + |