Updated Sparky to add ECOMP functionality Browse, Specialized Search, BYOQ, and the...

[aai/sparky-fe.git] / src / app / model / modelSearch / components / ModelRelationships.jsx

diff --git a/src/app/model/modelSearch/components/ModelRelationships.jsx b/src/app/model/modelSearch/components/ModelRelationships.jsx
new file mode 100644 (file)
index 0000000..8dec154
--- /dev/null
+++ b/src/app/model/modelSearch/components/ModelRelationships.jsx
@@ -0,0 +1,137 @@
+/*
+ * ============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, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import Label from 'react-bootstrap/lib/Label';
+import Panel from 'react-bootstrap/lib/Panel';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+import {ExportExcel} from 'utils/ExportExcel.js';
+let buildAttrList = ExportExcel.buildAttrList;
+
+let INVLIST = GlobalExtConstants.INVLIST;
+
+class ModelRelationships extends Component {
+  constructor(props){
+      console.log(props);
+      super(props);
+      this.props = props;
+  }
+
+  render(){
+  console.log('[ModelRelationships.jsx] props : ', this.props);
+  let relationships = null;
+  let navigateByoq = null;
+  let relativesArray = [];
+  this.nodeDisplay = this.props.relatives.nodeType + ' : ' + (this.props.relatives.nodeUrl).split(this.props.relatives.nodeType + '\/').pop();
+  this.historyClick = () => {
+    this.props.openHistoryModal(this.nodeDisplay, this.props.relatives.nodeUrl,this.props.relatives.nodeType);
+  }
+
+  if (this.props.relatives.nodeRelatives && this.props.relatives.nodeRelatives.length > 0) {
+    relationships = this.props.relatives.nodeRelatives.sort(function(a, b) {
+                                                   var compareA = (a['node-type'] + (a.url).split(a['node-type']+'\/').pop()).toLowerCase();
+                                                   var compareB = (b['node-type'] + (b.url).split(a['node-type']+'\/').pop()).toLowerCase();
+                                                   if(compareA < compareB) return -1;
+                                                   if(compareA > compareB) return 1;
+                                                   return 0;
+                                                  }).map((relative, idx) => {
+                                                  if (relativesArray.includes(relative['node-type']) === false) relativesArray.push(relative['node-type']);
+      return (
+        <div>
+          <Link
+            key={idx}
+            to={{
+              pathname: '/model/' + relative['node-type'] + '/' + relative.id + '/'+  this.props.relatives.enableRealTime,
+              uri: relative.url,
+              historyStackString: this.props.historyStackString
+            }}>
+            {relative['node-type']}: {(decodeURI((relative.url).split(relative['node-type']+'\/').pop())).replace(/%2F/g,'/')}</Link> <Label bsStyle='default'>{relative['relationship-label'].slice(33)}</Label>
+        </div>
+      );
+    });
+  }
+    relativesArray = relativesArray.join('&');
+    var propKey = '';
+    var requiredParams = buildAttrList(this.props.relatives.nodeType,[],'mandatory');
+    var aliasColumnFilters = (this.props.relatives.aliasColumnList && this.props.relatives.aliasColumnList[this.props.relatives.nodeType])?this.props.relatives.aliasColumnList[this.props.relatives.nodeType][0]:[];
+    console.log('requiredParams>>>>>>>>>>>>',requiredParams);
+    Object.keys(this.props.relatives.nodeProps).map((prop, idx) => {           
+      for(var a in requiredParams){        
+        let alias='';
+        if(aliasColumnFilters && aliasColumnFilters[requiredParams[a].value]){
+          alias=requiredParams[a].value;
+          requiredParams[a].value=aliasColumnFilters[requiredParams[a].value];          
+        }
+        if(requiredParams[a].value === prop){
+          let tag= (alias!='')? alias: prop;
+          if(propKey === ''){
+            propKey = tag + ':' + btoa('<pre>' + this.props.relatives.nodeProps[prop].toString() + '</pre>');
+          }else{
+            propKey = propKey + ';' + tag + ':' + btoa('<pre>' + this.props.relatives.nodeProps[prop].toString() + '</pre>');
+          }        
+        }
+      }
+    });
+    let pathNameStr = (relativesArray.length>0) ? '/customDsl/' + this.props.relatives.nodeType + '/' + propKey + '/' + relativesArray : '/customDsl/' + this.props.relatives.nodeType + '/' + propKey;
+    navigateByoq = <Link
+                    to={{
+                      pathname: pathNameStr
+                     }}>
+                     <button type='button' className='btn btn-primary pull-right'>>>BYOQ</button>
+                   </Link>;
+  if (this.props.relatives.nodeRelatives && this.props.relatives.nodeRelatives.length > 0) {
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Panel.Toggle>
+            <button type='button' className='btn btn-outline-primary'>
+              Relationships
+              </button>
+          </Panel.Toggle>
+            { INVLIST.isHistoryEnabled && (<button type='button' className='btn btn-outline-primary' onClick={this.historyClick}>
+              History
+            </button>)}
+            {navigateByoq}
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body className='cardwrap'>
+            {relationships}
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    );
+  } else {
+    return (
+      <div>
+        <button type='button' className='btn btn-outline-disabled'>
+          No relationships
+        </button>
+        { INVLIST.isHistoryEnabled && (<button type='button' className='btn btn-outline-primary' onClick={this.historyClick}>
+          History
+        </button>)}
+        {navigateByoq}
+      </div>
+    );
+  }
+}
+};
+
+export default ModelRelationships;