Adding property table and layout

Adding a new property table, reading new entity
properties, improving layout, distribution configuration changes

Change-Id: I59d5ce7f2facd12c23103c275a921ad25c77ed38
Issue-ID: AAI-531
Signed-off-by: Pavel Paroulek <pavel.paroulek@orange.com>

6 files changed, 63 insertions, 32 deletions

diff --git a/graphgraph-fe/package.json b/graphgraph-fe/package.json
index 103d0b8..eaae97a 100644
--- a/graphgraph-fe/package.json
+++ b/graphgraph-fe/package.json
@@ -7,7 +7,7 @@
     "d3": "5.7.0",
     "eslint-config-react-app": "3.0.6",
     "react": "^16.8.6",
-    "react-basic-table": "1.0.14",
+    "react-table": "6.10.0",
     "react-bootstrap": "0.32.4",
     "react-dom": "^16.8.6",
     "react-numeric-input": "2.2.3",
diff --git a/graphgraph-fe/src/GraphInfoMenu.js b/graphgraph-fe/src/GraphInfoMenu.js
index c22a504..3f21194 100644
--- a/graphgraph-fe/src/GraphInfoMenu.js
+++ b/graphgraph-fe/src/GraphInfoMenu.js
@@ -2,29 +2,12 @@ import React from 'react'
 import './GraphInfoMenu.css'
 import PathBreadCrumb from './PathBreadCrumb'
 import _ from 'underscore'
-import ReactBasicTable from 'react-basic-table'
-
-var getRows = function (nodeProps) {
-  return _.map(nodeProps, path => {
-    return (
-      [
-        <span>{path.propertyName}</span>,
-        <span>{path.propertyValue}</span>
-      ]
-    )
-  })
-}
+import ReactTable from "react-table";
+import "react-table/react-table.css";
 
 class GraphInfoMenu extends React.Component {
   constructor (props) {
     super(props)
-    this.basicTable = React.createRef()
-  }
-
-  // ReactBasicTable does not reset pagination after
-  // changing data, we need to do it manually
-  componentDidUpdate (prevProps) {
-    this.basicTable.current.setPage(1)
   }
 
   render () {
@@ -39,7 +22,40 @@ class GraphInfoMenu extends React.Component {
           {breadcrumbs}
         </div>
         <div className="kv-table datatable">
-          <ReactBasicTable ref={this.basicTable} pageSize={3} rows={getRows(this.props.nodeProperties)} columns={['Property Name', 'Value']} />
+          <ReactTable pageSizeOptions={[4, 25]} data={this.props.nodeProperties} 
+		columns={[
+            {
+              Header: "Attribute",
+              accessor: "propertyName",
+              minWidth: 50
+            },
+            {
+              Header: "Description",
+              accessor: "description",
+              minWidth: 300
+            },
+            {
+              id: "Key",
+              Header: "Key",
+              accessor: p => p.key ? "yes" : "",
+              minWidth: 30
+            },
+            {
+              id: "Index",
+              Header: "Index",
+              accessor: p => p.index ? "yes" : "",
+              minWidth: 30
+            },
+            {
+              id: "Required",
+              Header: "Required",
+              accessor: p => p.required ? "yes" : "",
+              minWidth: 30
+            }
+          ]}
+          defaultPageSize={4}
+          className="-striped -highlight"
+        />
         </div>
       </div>
     )
diff --git a/graphgraph-fe/src/GraphSettings.js b/graphgraph-fe/src/GraphSettings.js
index 54e2f4c..0c036db 100644
--- a/graphgraph-fe/src/GraphSettings.js
+++ b/graphgraph-fe/src/GraphSettings.js
@@ -44,6 +44,9 @@ class GraphSettings extends React.Component {
 
   loadInitialGraph (startNode, endNode, parentHops, cousinHops, childHops, edgeFilter) {
     if (this.state.selectedSchema === '' || startNode === 'none') {
+      var s = this.state
+      s['edgeFilter'] = edgeFilter
+      this.setState(s)
       return
     }
     if (startNode === 'all') {
@@ -71,7 +74,7 @@ class GraphSettings extends React.Component {
         s['toNode'] = endNode
         s['graph'] = g
         s['edgeFilter'] = edgeFilter
-        s['showHops'] = endNode === 'none' && startNode !== 'none' && startNode !== 'all'
+        s['showHops'] = endNode === 'none' && startNode !== 'none' && startNode !== 'all' && edgeFilter !== 'Edgerules'
         s['enableDestinationNode'] = startNode !== 'none' && startNode !== 'all'
         this.setState(s)
 
@@ -84,7 +87,7 @@ class GraphSettings extends React.Component {
   selectSchema (schema) {
     var s = this.state
     s['selectedSchema'] = schema
-    fetch(nodeNames(schema))
+    fetch(nodeNames(schema, s['edgeFilter']))
       .then(response => response.json())
       .then(nodeNames => {
         s['fromNode'] = s['toNode'] = 'none'
@@ -94,6 +97,15 @@ class GraphSettings extends React.Component {
   }
 
   changeEdgeFilter (edgeFilter) {
+    fetch(nodeNames(this.state.selectedSchema, edgeFilter))
+      .then(response => response.json())
+      .then(nodeNames => {
+        let s = this.state
+        s['edgeFilter'] = edgeFilter
+        s['fromNode'] = s['toNode'] = 'none'
+        s['nodeNames'] = nodeNames
+        this.setState(s)
+      })
     this.loadInitialGraph(
       this.state.fromNode,
       this.state.toNode,
diff --git a/graphgraph-fe/src/GraphSettingsMenu.css b/graphgraph-fe/src/GraphSettingsMenu.css
index 3288e62..466d07d 100644
--- a/graphgraph-fe/src/GraphSettingsMenu.css
+++ b/graphgraph-fe/src/GraphSettingsMenu.css
@@ -3,4 +3,10 @@
 margin-bottom: 0px;
 }
 
+.navbar-adjust .container {
+margin-left: 0;    
+}
 
+.navbar-adjust .container .navbar-header {
+margin-right: 250px;
+}
diff --git a/graphgraph-fe/src/GraphSettingsMenu.js b/graphgraph-fe/src/GraphSettingsMenu.js
index d1b31ba..819537d 100644
--- a/graphgraph-fe/src/GraphSettingsMenu.js
+++ b/graphgraph-fe/src/GraphSettingsMenu.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import GraphSettings from './GraphSettings'
-import { Navbar, FormGroup } from 'react-bootstrap'
+import { Navbar, FormGroup, Nav } from 'react-bootstrap'
 import './GraphSettingsMenu.css'
 
 class GraphSettingsMenu extends React.Component {
@@ -11,15 +11,12 @@ class GraphSettingsMenu extends React.Component {
           <Navbar.Brand>
             <a href="https://gerrit.onap.org/r/gitweb?p=aai/graphgraph.git">GraphGraph</a>
           </Navbar.Brand>
-          <Navbar.Toggle />
         </Navbar.Header>
-        <Navbar.Collapse>
-          <Navbar.Form pullLeft>
-            <FormGroup>
+ <Nav className="mr-auto">
+        <Navbar.Collapse className='mr-sm-2'>
               <GraphSettings selectedNode={this.props.selectedNode} graphData={this.props.graphData} nodePropsLoader={this.props.nodePropsLoader} />
-            </FormGroup>{' '}
-          </Navbar.Form>
         </Navbar.Collapse>
+</Nav>
       </Navbar>)
   }
 }
diff --git a/graphgraph-fe/src/requests.js b/graphgraph-fe/src/requests.js
index a468d35..7155ea7 100644
--- a/graphgraph-fe/src/requests.js
+++ b/graphgraph-fe/src/requests.js
@@ -3,8 +3,8 @@ export function schemas () {
   return 'http://localhost:8080/schemas'
 }
 
-export function nodeNames (schema) {
-  return `http://localhost:8080/schemas/${schema}/nodes`
+export function nodeNames (schema, edgeFilter) {
+  return `http://localhost:8080/schemas/${schema}/nodes?edgeFilter=${edgeFilter}`
 }
 
 export function basicGraph (schema, node, parentHops, cousinHops, childHops, edgeFilter) {