Adding schema validation base

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

5 files changed, 105 insertions, 3 deletions

diff --git a/graphgraph-fe/src/GraphSettings.css b/graphgraph-fe/src/GraphSettings.css
index 4790e9b..6fb4550 100644
--- a/graphgraph-fe/src/GraphSettings.css
+++ b/graphgraph-fe/src/GraphSettings.css
@@ -27,3 +27,10 @@
     display: flex;
     width: 80px !important;
 }
+
+
+.modal-button 
+{
+    padding-top: 20px;
+    margin: 0;
+}
diff --git a/graphgraph-fe/src/GraphSettings.js b/graphgraph-fe/src/GraphSettings.js
index 1e80da9..4d44aef 100644
--- a/graphgraph-fe/src/GraphSettings.js
+++ b/graphgraph-fe/src/GraphSettings.js
@@ -3,9 +3,11 @@ import _ from 'underscore'
 import { DropdownButton, MenuItem, Label } from 'react-bootstrap'
 import './GraphSettings.css'
 import Popup from './PopupSettings'
-import { pathGraph, basicGraph, schemas, nodeNames } from './requests'
+import ValidationModal from './ValidationModal'
+import { validateSchema, pathGraph, basicGraph, schemas, nodeNames } from './requests'
 
 var emptyState = {
+  schemaProblems: [],
   nodeNames: [],
   fromNode: '',
   graph: {
@@ -94,6 +96,12 @@ class GraphSettings extends React.Component {
         s['nodeNames'] = nodeNames
         this.setState(s)
       })
+    fetch(validateSchema(schema))
+      .then(response => response.json())
+      .then(p => {
+        s['schemaProblems'] = p.problems
+        this.setState(s)
+      })
   }
 
   changeEdgeFilter (edgeFilter) {
@@ -211,8 +219,11 @@ class GraphSettings extends React.Component {
             </div>
 
             <Popup isDisabled={!this.state.showHops} edgeFilter={this.state.edgeFilter} parentHops={this.state.hops.parents} childHops={this.state.hops.child} cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/>
+        <div className="modal-button">
+        <ValidationModal schemaProblems={this.state.schemaProblems}/>
+        </div>
           </div>
-
+           
         </div>
       </div>
     )
diff --git a/graphgraph-fe/src/ValidationModal.css b/graphgraph-fe/src/ValidationModal.css
new file mode 100644
index 0000000..56b4567
--- /dev/null
+++ b/graphgraph-fe/src/ValidationModal.css
@@ -0,0 +1,31 @@
+.modal-content
+{
+height: 100%;
+width: 100%;
+}
+
+.modal-validator
+{
+    position: 'fixed';
+    width: 1024;
+    height: 768;
+    zIndex: 1040;
+    top: '5%';
+    left: '5%';
+    border: '1px solid #e5e5e5';
+    backgroundColor: 'white';
+    boxShadow: '0 5px 15px rgba(0,0,0,.5)';
+    padding: 0;
+}  
+
+.modal-backdrop 
+{
+    position: 'fixed';
+    zIndex: 1040;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    backgroundColor: '#000';
+    opacity: 0.5;
+}
diff --git a/graphgraph-fe/src/ValidationModal.js b/graphgraph-fe/src/ValidationModal.js
new file mode 100644
index 0000000..8bf1989
--- /dev/null
+++ b/graphgraph-fe/src/ValidationModal.js
@@ -0,0 +1,49 @@
+import _ from 'underscore'
+import React from 'react'
+import './ValidationModal.css'
+import { Button, Modal, ListGroup, ListGroupItem } from 'react-bootstrap'
+
+
+class ValidationModal extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = { showModal: false };
+
+    this.close = () => {
+      this.setState({ showModal: false });
+    };
+
+    this.open = () => {
+      this.setState({ showModal: true });
+    };
+  }
+
+  renderBackdrop(props) {
+    return <div {...props} className="modal-backdrop" />;
+  }
+
+  render() {
+    var problems = this.props.schemaProblems
+    var items = _.map(problems, (problem, i) => <ListGroupItem key={i}> {problem} </ListGroupItem>)
+      return (
+      <div>
+        <Button onClick={this.open}>Validate schema</Button>
+        <Modal
+          onHide={this.close}
+          className="modal-validator"
+          aria-labelledby="modal-label"
+          show={this.state.showModal}
+          renderBackdrop={this.renderBackdrop}
+        >
+        <div className="modal-list">
+        <ListGroup>
+          {items}
+        </ListGroup>
+        </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ValidationModal
diff --git a/graphgraph-fe/src/requests.js b/graphgraph-fe/src/requests.js
index 39c4b03..2494ba1 100644
--- a/graphgraph-fe/src/requests.js
+++ b/graphgraph-fe/src/requests.js
@@ -5,6 +5,10 @@ export function schemas () {
   return `http://${host}:${port}/schemas`
 }
 
+export function validateSchema (schema) {
+  return `http://${host}:${port}/schemas/${schema}/validation`
+}
+
 export function nodeNames (schema, edgeFilter) {
   return `http://${host}:${port}/schemas/${schema}/nodes?edgeFilter=${edgeFilter}`
 }
@@ -23,4 +27,4 @@ export function nodeProperty (schema, node) {
 
 export function edgeProperty (schema, fromNode, toNode) {
   return `http://${host}:${port}/schemas/${schema}/edges?fromNode=${fromNode}&toNode=${toNode}`
-}
\ No newline at end of file
+}