src/app/model/history/components/NodeDiffCard.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 nodeDiffCard = (props) => {
  27   let showNoPropsMessage = true;
  28   let showNoRelationshipsMessage = true;
  29   if(props && props.diff && props.diff.properties){
  30     const properties =  Object.entries(props.diff.properties).map((property, idx) => {
  31       let prop = property[1];
  32       if(prop && prop.value && prop.value.type !== 'unchanged'){
  33         showNoPropsMessage = false;
  34         return (
  35           <div>
  36               <p><strong>Attribute:</strong> {prop.key.data} ({prop.value.type})</p>
  37           </div>
  38         );
  39       }else if (prop && prop.type){
  40         showNoPropsMessage = false;
  41          return (
  42            <div>
  43                <p><strong>Attribute:</strong> {prop.data.key} ({prop.type})</p>
  44            </div>
  45          );
  46       }
  47     });
  48
  49     //TODO handle no relationships and no attributes
  50
  51     const relationships =  Object.entries(props.diff['related-to']).map((property, idx) => {
  52         let prop = property[1];
  53         if(prop && prop.type && prop.type.type){
  54             return ('');
  55         }else if(prop && prop.type && !prop.data){
  56             showNoRelationshipsMessage = false;
  57             return (
  58               <div>
  59                 <p><strong>Relationship</strong>: {prop['relationship-label'].data} {prop['node-type'].data} {prop.url.data} ({prop.type})</p>
  60               </div>
  61             );
  62         }else if (prop && prop.type && prop.data){
  63              showNoRelationshipsMessage = false;
  64                return (
  65                  <div>
  66                    <p><strong>Relationship</strong>: {prop.data['relationship-label']} {prop.data['node-type']} {prop.data.url} ({prop.type})</p>
  67                  </div>
  68                );
  69         }
  70       });
  71
  72     return (
  73       <Col className='col-lg-4'>
  74         <div className='card model-card'>
  75           <div className='card-header'>
  76             <h4 className='card-title'>Changes from Historic to Current State</h4>
  77           </div>
  78           <div className='card-header'></div>
  79           <div className='card-content model-card-content'>
  80               {properties}
  81               <div className={showNoPropsMessage ? 'show' : 'hidden'}><p><strong>No Attribute differences, current.</strong></p></div>
  82               {relationships}
  83               <div className={showNoRelationshipsMessage ? 'show' : 'hidden'}><p><strong>No Relationship differences, current.</strong></p></div>
  84           </div>
  85         </div>
  86       </Col>
  87     );
  88   }else{
  89     return(
  90         <Col className='col-lg-4'>
  91                 <div className='card model-card'>
  92                   <div className='card-header'>
  93                     <h4 className='card-title'>Unable to pull diff</h4>
  94                   </div>
  95                   <div className='card-header'></div>
  96                   <div className='card-content model-card-content'>
  97                       Diff unable to be calculated currently, choose a different timeframe.
  98                   </div>
  99                 </div>
 100         </Col>
 101     );
 102   }
 103 };
 104
 105 export default nodeDiffCard;
 106