src/app/model/history/components/TopologyDiffCard.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React from 'react';
  22 import moment from "moment";
  23 import Col from 'react-bootstrap/lib/Col';
  24 import Panel from 'react-bootstrap/lib/Panel';
  25
  26 const topologyDiffCard = (props) => {
  27   let showNoNodesMessage = true;
  28   if(props && props.node){
  29     const properties =  Object.entries(props.node).map((prop, idx) => {
  30         if (prop){
  31                     showNoNodesMessage = false;
  32                     let showNoRelationshipsMessage = true;
  33                     let showNoAttributesMessage = true;
  34                     let propWorkaround = prop;
  35                     if(prop.data){
  36                         propWorkaround = prop.data;
  37                     }
  38                     let tempProp = propWorkaround[1];
  39                     let attributeProperties = '';
  40                     let relationships = '';
  41                     if(tempProp.properties){
  42                         attributeProperties =  Object.entries(tempProp.properties).map((property, idx) => {
  43                           let attrProp = property[1];
  44                           if(attrProp && attrProp.value && attrProp.value.type !== 'unchanged'){
  45                             showNoAttributesMessage = false;
  46                             return (
  47                               <div>
  48                                   <p><strong>Attribute:</strong> {attrProp.key.data} ({attrProp.value.type})</p>
  49                               </div>
  50                             );
  51                           }else if (attrProp && attrProp.type){
  52                              showNoAttributesMessage = false;
  53                              return (
  54                                <div>
  55                                    <p><strong>Attribute:</strong> {attrProp.data.key} ({attrProp.type})</p>
  56                                </div>
  57                              );
  58                           }
  59                         });
  60                     }
  61                     if(tempProp['related-to'] || tempProp.data['related-to']){
  62                         let rel = null;
  63                         let topLevelType = null;
  64                         if(tempProp['related-to']){
  65                             rel = tempProp['related-to'];
  66                         }else if (tempProp.data['related-to']) {
  67                             rel = tempProp.data['related-to'];
  68                             topLevelType = tempProp.type;
  69                         }
  70                         relationships =  Object.entries(rel).map((property, idx) => {
  71                                 let relationProp = property[1];
  72                                 if(relationProp && relationProp.type && relationProp.type.type &&  relationProp.type.type !== "unchanged"){
  73                                     return ('');
  74                                 }else if(relationProp && relationProp.type && !relationProp.type.type && relationProp.url && relationProp.url.data){
  75                                     showNoRelationshipsMessage = false;
  76                                     return (
  77                                       <div>
  78                                         <p><strong>Relationship</strong>: {relationProp['relationship-label'].data} {relationProp['node-type'].data} {relationProp.url.data} ({relationProp.type})</p>
  79                                       </div>
  80                                     );
  81                                 }else if (relationProp && relationProp.type && relationProp.data){
  82                                      showNoRelationshipsMessage = false;
  83                                        return (
  84                                          <div>
  85                                            <p><strong>Relationship</strong>: {relationProp.data['relationship-label']} {relationProp.data['node-type']} {relationProp.data.url} ({relationProp.type})</p>
  86                                          </div>
  87                                        );
  88                                 }else if (topLevelType){
  89                                     showNoRelationshipsMessage = false;
  90                                     return (
  91                                               <div>
  92                                                 <p><strong>Relationship</strong>: {relationProp['relationship-label']} {relationProp['node-type']} {relationProp.url} ({topLevelType})</p>
  93                                               </div>
  94                                             );
  95                                 }
  96                         });
  97                     }
  98                        return (
  99                              <Panel>
 100                                 <Panel.Heading className="custom-accordion">
 101                                    <Panel.Title toggle><strong>Node:</strong> {prop[0]} <p className={tempProp.type ? 'show' : 'hidden'}>({tempProp.type})</p></Panel.Title>
 102                                 </Panel.Heading>
 103                                 <Panel.Collapse>
 104                                   <Panel.Body className='cardwrap'>
 105                                     {attributeProperties}
 106                                     <div className={showNoAttributesMessage ? 'show' : 'hidden'}><p><strong>No Attribute differences, current.</strong></p></div>
 107                                     {relationships}
 108                                     <div className={showNoRelationshipsMessage ? 'show' : 'hidden'}><p><strong>No Relationship differences, current.</strong></p></div>
 109                                   </Panel.Body>
 110                                 </Panel.Collapse>
 111                              </Panel>
 112                        );
 113               }else{
 114                   <div>
 115                       <p><strong>Node changes in the topology states</strong></p>
 116                   </div>
 117               }
 118         });
 119
 120     return (
 121       <Col className='col-lg-12'>
 122         <div className='card model-card'>
 123           <div className='card-header'>
 124             <h4 className='card-title'>Changes from Historic to Current State</h4>
 125           </div>
 126           <div className='card-header'></div>
 127           <div className='card-content model-card-content'>
 128               {properties}
 129           </div>
 130         </div>
 131       </Col>
 132     );
 133   }else{
 134     return(
 135         <Col className='col-lg-12'>
 136                 <div className='card model-card'>
 137                   <div className='card-header'>
 138                     <h4 className='card-title'>Unable to pull diff</h4>
 139                   </div>
 140                   <div className='card-header'></div>
 141                   <div className='card-content model-card-content'>
 142                       Diff unable to be calculated currently, choose a different timeframe.
 143                   </div>
 144                 </div>
 145         </Col>
 146     );
 147   }
 148 };
 149
 150 export default topologyDiffCard;
 151