aboutsummaryrefslogtreecommitdiffstats
path: root/graphgraph-fe
diff options
context:
space:
mode:
authorPavel Paroulek <pavel.paroulek@orange.com>2019-05-24 15:39:49 +0200
committerPavel Paroulek <pavel.paroulek@orange.com>2019-05-24 17:02:53 +0200
commite22629636b27a473f7950d7b684c7017d01f6298 (patch)
treea0403231ec49553758c6a5e66987ac89cc8bdd9d /graphgraph-fe
parent2dd4055f8fcfd3b003907645d44ee2f0e2d2803e (diff)
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>
Diffstat (limited to 'graphgraph-fe')
-rw-r--r--graphgraph-fe/package.json2
-rw-r--r--graphgraph-fe/src/GraphInfoMenu.js56
-rw-r--r--graphgraph-fe/src/GraphSettings.js16
-rw-r--r--graphgraph-fe/src/GraphSettingsMenu.css6
-rw-r--r--graphgraph-fe/src/GraphSettingsMenu.js11
-rw-r--r--graphgraph-fe/src/requests.js4
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) {