Draft of Config policy

Initial code of the config policy window using the Json Editor version
from NPM

Issue-ID: CLAMP-426
Change-Id: I4ff3e63c463320706031c703afa22417b321faa3
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index a1aff3d..4271f10 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -34,7 +34,7 @@ import LoopStatus from './components/loop_viewer/status/LoopStatus';
 import UserService from './api/UserService';
 import LoopCache from './api/LoopCache';
 
-import { Route } from 'react-router-dom'
+import { Route, Redirect } from 'react-router-dom'
 import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
 import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
 import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
@@ -78,9 +78,11 @@ const LoopViewLoopNameSpanStyled = styled.span`
 
 export default class LoopUI extends React.Component {
 
+       static defaultLoopName="Empty (NO loop loaded yet)";
+
        state = {
                userName: null,
-               loopName: "Empty (NO loop loaded yet)",
+               loopName: LoopUI.defaultLoopName,
                loopCache: new LoopCache({}),
        };
 
@@ -90,7 +92,7 @@ export default class LoopUI extends React.Component {
                this.updateLoopCache = this.updateLoopCache.bind(this);
        }
 
-       componentDidMount() {
+       componentWillMount() {
                this.getUser();
        }
 
@@ -162,6 +164,7 @@ export default class LoopUI extends React.Component {
 
        updateLoopCache(loopJson) {
                this.setState({ loopCache: new LoopCache(loopJson) });
+               this.setState({ loopName: this.state.loopCache.getLoopName() });
        }
 
        render() {
@@ -174,6 +177,7 @@ export default class LoopUI extends React.Component {
                                        render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
                                <Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
                                <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
+                               <Route path="/closeLoop" render={(routeProps) => (<Redirect to='/'/>)} />
                        </div>
                );
        }

diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js
index 2813a7c..fa7cd2e 100644 (file)
--- a/ui-react/src/api/LoopService.js
+++ b/ui-react/src/api/LoopService.js
@@ -22,7 +22,7 @@
 
 export default class LoopService {
        static getLoopNames() {
-               return fetch('/restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'include', })
+               return fetch('/restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin', })
                        .then(function (response) {
                                console.debug("GetLoopNames response received: ", response.status);
                                if (response.ok) {
@@ -44,7 +44,7 @@ export default class LoopService {
                        headers: {
                                "Content-Type": "application/json"
                        },
-                       credentials: 'include',
+                       credentials: 'same-origin',
                })
                        .then(function (response) {
                                console.debug("GetLoop response received: ", response.status);
@@ -64,7 +64,7 @@ export default class LoopService {
        static getSvg(loopName) {
                return fetch('/restservices/clds/v2/loop/svgRepresentation/' + loopName, {
                        method: 'GET',
-                       credentials: 'include',
+                       credentials: 'same-origin',                     
                })
                        .then(function (response) {
                                console.debug("svgRepresentation response received: ", response.status);

diff --git a/ui-react/src/api/UserService.js b/ui-react/src/api/UserService.js
index 8f53d7b..22168d4 100644 (file)
--- a/ui-react/src/api/UserService.js
+++ b/ui-react/src/api/UserService.js
@@ -26,7 +26,7 @@ export default class UserService {
        static login() {
                return fetch('/restservices/clds/v1/user/getUser', {
                                method: 'GET',
-                               credentials: 'include',
+                               credentials: 'same-origin',
                        })
                .then(function (response) {
                        console.debug("getUser response received, status code:", response.status);

diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 1a8b6e2..453ca6b 100644 (file)
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -24,24 +24,26 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { LOOP_CACHE } from '../../../api/LoopCache'
 import styled from 'styled-components';
 
+import JSONEditor from '@json-editor/json-editor';
+
 const ModalStyled = styled(Modal)`
        background-color: transparent;
 `
 
 export default class ConfigurationPolicyModal extends React.Component {
 
+       state = {
+               show: true,
+               loopCache: this.props.loopCache,
+               jsonEditor: null,
+       };
+
        constructor(props, context) {
                super(props, context);
-
                this.handleClose = this.handleClose.bind(this);
-
-               this.state = {
-                       show: true,
-               };
-
+               this.renderJsonEditor = this.renderJsonEditor.bind(this);
        }
 
        handleClose() {
@@ -49,7 +51,31 @@ export default class ConfigurationPolicyModal extends React.Component {
                this.props.history.push('/')
        }
 
+       componentDidMount() {
+               this.renderJsonEditor();
+       }
+
+       renderJsonEditor() {
+               var toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForType("TCA_Jbv1z_v1_0_ResourceInstanceName1_tca");
+               if (toscaModel == null) {
+                       return;
+               }
+               var editorData = this.state.loopCache.getMicroServiceProperties("TCA_Jbv1z_v1_0_ResourceInstanceName1_tca");
+
+               JSONEditor.defaults.options.theme = 'bootstrap4';
+               //JSONEditor.defaults.options.iconlib = 'bootstrap2';
+               JSONEditor.defaults.options.object_layout = 'grid';
+               JSONEditor.defaults.options.disable_properties = true;
+               JSONEditor.defaults.options.disable_edit_json = false;
+               JSONEditor.defaults.options.disable_array_reorder = true;
+               JSONEditor.defaults.options.disable_array_delete_last_row = true;
+               JSONEditor.defaults.options.disable_array_delete_all_rows = false;
+               JSONEditor.defaults.options.show_errors = 'always';
+
+               this.state.jsonEditor = new JSONEditor(document.getElementById("editor"),
+                       { schema: toscaModel.schema, startval: editorData });
 
+       }
 
        render() {
                return (
@@ -58,8 +84,7 @@ export default class ConfigurationPolicyModal extends React.Component {
                                        <Modal.Title>Configuration policies</Modal.Title>
                                </Modal.Header>
                                <Modal.Body>
-
-
+                                       <div id="editor" />
 
                                </Modal.Body>
                                <Modal.Footer>

diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 6986209..f3bdeb6 100644 (file)
--- a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -54,7 +54,7 @@ export default class OpenLoopModal extends React.Component {
                };
        }
 
-       componentDidMount() {
+       componentWillMount() {
                this.getLoopNames();
        }
 

diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 2858ccd..44356c1 100644 (file)
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -61,10 +61,6 @@ class LoopViewSvg extends React.Component {
                this.getSvg();
        }
 
-       componentDidMount() {
-               this.getSvg();
-       }
-
        getSvg() {
                LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
                        if (svgXml.length != 0) {

diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 1a7c5d4..64aa6bc 100644 (file)
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -42,7 +42,7 @@ export default class MenuBar extends React.Component {
                      <NavDropdown title="Closed Loop" id="basic-nav-dropdown">
                        <StyledNavDropdownItem href="/openLoop">Open CL</StyledNavDropdownItem>
                        <StyledNavDropdownItem href="#action/3.2">Properties CL</StyledNavDropdownItem>
-                       <StyledNavDropdownItem href="#action/3.3">Close Model</StyledNavDropdownItem>
+                       <StyledNavDropdownItem href="/closeLoop">Close Model</StyledNavDropdownItem>
                      </NavDropdown>
                                        <NavDropdown title="Manage" id="basic-nav-dropdown">
                                                <StyledNavDropdownItem href="/operationalPolicyModal">Submit</StyledNavDropdownItem>