diff options
-rw-r--r-- | ui-react/src/LoopUI.js | 10 | ||||
-rw-r--r-- | ui-react/src/api/LoopService.js | 6 | ||||
-rw-r--r-- | ui-react/src/api/UserService.js | 2 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js | 43 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js | 2 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/svg/LoopSvg.js | 4 | ||||
-rw-r--r-- | ui-react/src/components/menu/MenuBar.js | 2 |
7 files changed, 47 insertions, 22 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index a1aff3d61..4271f1037 100644 --- 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 2813a7c08..fa7cd2e48 100644 --- 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 8f53d7b8a..22168d41b 100644 --- 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 1a8b6e2c5..453ca6bb4 100644 --- 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 6986209d4..f3bdeb683 100644 --- 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 2858ccd8a..44356c1c0 100644 --- 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 1a7c5d4e4..64aa6bc83 100644 --- 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> |