1 files changed, 81 insertions, 0 deletions
diff --git a/graphgraph-fe/src/graph_info_menu.js b/graphgraph-fe/src/graph_info_menu.js
new file mode 100644
index 0000000..66ffbba
--- /dev/null
+++ b/graphgraph-fe/src/graph_info_menu.js
@@ -0,0 +1,81 @@
+/*
+ *  ============LICENSE_START=======================================================
+ * org.onap.aai
+ *  ================================================================================
+ *  Copyright © 2019-2020 Orange 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 './graph_info_menu.css';
+import PathBreadcrumb from './path_breadcrumb.js';
+import _ from 'underscore';
+import ReactTable from "react-table";
+import "react-table/react-table.css";
+
+class GraphInfoMenu extends React.Component {
+    render () {
+        var paths = this.props.paths;
+        var callback = this.props.pathCallback;
+        var showPaths = _.isArray(paths) && !_.isEmpty(paths);
+        var breadcrumbs = _.map(
+            paths, (path, i) => <PathBreadcrumb key={i} index={i} pathCallback={callback} path={path}/>);
+        return (
+                <div className="node-property-list">
+                <div className="fixed-height-container" style={{ display: showPaths ? 'block' : 'none' }}><p className='path-heading'>Paths</p>{breadcrumbs}</div>
+                <div className="kv-table datatable">
+                <ReactTable pageSizeOptions={[4, 25]} data={this.props.nodeProperties} columns={[
+                    {
+                        Header: "Attribute",
+                        accessor: "propertyName",
+                        minWidth: 40
+                    },
+                    {
+                        Header: "Type",
+                        accessor: "type",
+                        minWidth: 70
+                    },
+                    {
+                        Header: "Description",
+                        accessor: "description",
+                        minWidth: 260
+                    },
+                    {
+                        id: "Key",
+                        Header: "Key",
+                        accessor: p => p.key ? "yes" : "",
+                        minWidth: 20
+                    },
+                    {
+                        id: "Index",
+                        Header: "Index",
+                        accessor: p => p.index ? "yes" : "",
+                        minWidth: 20
+                    },
+                    {
+                        id: "Required",
+                        Header: "Required",
+                        accessor: p => p.required ? "yes" : "",
+                        minWidth: 20
+                    }
+                ]} defaultPageSize={4} className="-striped -highlight"
+                />
+                </div>
+                </div>
+        );
+    }
+}
+
+export default GraphInfoMenu;