From 2dacb9bd185db2c05de435d2bd446865e158e483 Mon Sep 17 00:00:00 2001 From: sebdet Date: Wed, 17 Jul 2019 13:48:44 +0200 Subject: [PATCH] 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 --- ui-react/src/LoopUI.js | 10 +++-- ui-react/src/api/LoopService.js | 6 +-- ui-react/src/api/UserService.js | 2 +- .../ConfigurationPolicyModal.js | 43 +++++++++++++++++----- .../components/dialogs/OpenLoop/OpenLoopModal.js | 2 +- ui-react/src/components/loop_viewer/svg/LoopSvg.js | 4 -- 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 a1aff3d6..4271f103 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) => ()} /> ()} /> ()} /> + ()} /> ); } diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js index 2813a7c0..fa7cd2e4 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 8f53d7b8..22168d41 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 1a8b6e2c..453ca6bb 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 { Configuration policies - - +
diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js index 6986209d..f3bdeb68 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 2858ccd8..44356c1c 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 1a7c5d4e..64aa6bc8 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 { Open CL Properties CL - Close Model + Close Model Submit -- 2.16.6