X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fapp%2Fmodel%2Fhistory%2Fcomponents%2FTopologyDiffCard.jsx;fp=src%2Fapp%2Fmodel%2Fhistory%2Fcomponents%2FTopologyDiffCard.jsx;h=9d49b1731d62fac88b6dbe5258097ff06b0d6c73;hp=0000000000000000000000000000000000000000;hb=5ee7367a101143715c2869d72ea4a6fbf55f5af6;hpb=ddc05d4ea0254b427fea6ec80e2b03950eeca4ce

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;
+