diff options
author | Pavel Paroulek <pavel.paroulek@orange.com> | 2019-05-24 15:39:49 +0200 |
---|---|---|
committer | Pavel Paroulek <pavel.paroulek@orange.com> | 2019-05-24 17:02:53 +0200 |
commit | e22629636b27a473f7950d7b684c7017d01f6298 (patch) | |
tree | a0403231ec49553758c6a5e66987ac89cc8bdd9d /graphgraph-fe/src/GraphInfoMenu.js | |
parent | 2dd4055f8fcfd3b003907645d44ee2f0e2d2803e (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/src/GraphInfoMenu.js')
-rw-r--r-- | graphgraph-fe/src/GraphInfoMenu.js | 56 |
1 files changed, 36 insertions, 20 deletions
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> ) |