src/app/model/history/components/HistoryCard.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 historyCard = (props) => {
  27   if(props && props.node && props.node.properties){
  28     const properties = (props.node.properties).map((prop, idx) => {
  29       return (
  30         <Panel>
  31           <Panel.Heading className="custom-accordion">
  32              <Panel.Title toggle> <strong>{prop.key}</strong> : {'' + prop.value}</Panel.Title>
  33           </Panel.Heading>
  34           <Panel.Collapse>
  35             <Panel.Body className='cardwrap'>
  36               <p><strong>Last Updated By:</strong> {prop.sot}</p>
  37               <p><strong>Last Updated (time):</strong> {moment(prop.timestamp).format('dddd, MMMM Do, YYYY h:mm:ss A')}</p>
  38               <p><strong>Transaction Id:</strong> {(prop['tx-id']) ? prop['tx-id'] : 'N/A'}</p>
  39             </Panel.Body>
  40           </Panel.Collapse>
  41         </Panel>
  42       );
  43     });
  44
  45     //TODO handle no relationships and no attributes
  46
  47     const relationships = (props.node['related-to']).map((prop, idx) => {
  48         return (
  49           <p key={idx}><strong>{prop['node-type']}:</strong> {prop.url} {prop['relationship-label']} (added by {prop.sot} on {moment(prop.timestamp).format('dddd, MMMM Do, YYYY h:mm:ss A')})</p>
  50         );
  51       });
  52
  53     return (
  54       <Col className={""+(props.split ? 'col-lg-4' : 'col-lg-12')}>
  55         <div className='card model-card'>
  56           <div className='card-header'>
  57             <h4 className='card-title'>{props.node.primaryHeader}</h4>
  58           </div>
  59           <div className='card-header'>
  60             {props.node.secondaryHeader}
  61           </div>
  62           <div className='card-content model-card-content'>
  63             {properties}
  64           </div>
  65           <div className='card-footer'>
  66              <Panel>
  67                <Panel.Heading>
  68                  <Panel.Toggle>
  69                    <button type='button' className='btn btn-outline-primary'>
  70                      Relationships
  71                      </button>
  72                  </Panel.Toggle>
  73                </Panel.Heading>
  74                <Panel.Collapse>
  75                  <Panel.Body className='cardwrap'>
  76                    {relationships}
  77                  </Panel.Body>
  78                </Panel.Collapse>
  79              </Panel>
  80           </div>
  81         </div>
  82       </Col>
  83     );
  84   }else{
  85     return(
  86         <Col className={""+(props.split ? 'col-lg-4' : 'col-lg-12')}>
  87                 <div className='card model-card'>
  88                   <div className='card-header'>
  89                     <h4 className='card-title'>No State Found</h4>
  90                   </div>
  91                   <div className='card-content model-card-content'>
  92                     No State was found at the provided timestamp. Please try another timestamp.
  93                   </div>
  94                 </div>
  95         </Col>
  96     );
  97   }
  98 };
  99
 100 export default historyCard;
 101