Add saving + rework

Rework of the async calls to the backend + add saving of the properties
to backend + rework of the loop loading

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

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 9956e3c..643b32d 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -40,6 +40,7 @@ import OperationalPolicyModal from './components/dialogs/OperationalPolicy/Opera
 import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
 import LoopProperties from './components/dialogs/LoopProperties';
 import UserInfo from './components/dialogs/UserInfo';
+import LoopService from './api/LoopService';
 
 const ProjectNameStyled = styled.a`
        vertical-align: middle;
@@ -72,12 +73,6 @@ const LoopViewBodyDivStyled = styled.div`
        height: 95%;
 `
 
-const LoopViewLoopNameSpanStyled = styled.span`
-       font-weight: bold;
-       color: ${props => (props.theme.loopViewerHeaderFontColor)};
-       background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
-`
-
 export default class LoopUI extends React.Component {
 
        static defaultLoopName="Empty (NO loop loaded yet)";
@@ -92,6 +87,7 @@ export default class LoopUI extends React.Component {
                super();
                this.getUser = this.getUser.bind(this);
                this.updateLoopCache = this.updateLoopCache.bind(this);
+               this.loadLoop = this.loadLoop.bind(this);
        }
 
        componentWillMount() {
@@ -171,16 +167,24 @@ export default class LoopUI extends React.Component {
        updateLoopCache(loopJson) {
                this.setState({ loopCache: new LoopCache(loopJson) });
                this.setState({ loopName: this.state.loopCache.getLoopName() });
+               console.info(this.state.loopName+" loop loaded successfully");
+       }
+       
+       loadLoop(loopName) {
+               LoopService.getLoop(loopName).then(loop => {
+                       console.debug("Updating loopCache");
+                       this.updateLoopCache(loop);
+               });
        }
 
        render() {
                return (
                                <div id="main_div">
                                <Route path="/operationalPolicyModal"
-                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} />)} />
-                               <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} />)} />
-                               <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
-                               <Route path="/loopProperties" render={(routeProps) => (<LoopProperties {...routeProps} loopCache={this.getLoopCache()} />)} />
+                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+                               <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+                               <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
+                               <Route path="/loopProperties" render={(routeProps) => (<LoopProperties {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
                                <Route path="/userInfo" render={(routeProps) => (<UserInfo {...routeProps} />)} />
                                <Route path="/closeLoop" render={(routeProps) => (<Redirect to='/'/>)} />
                                        <GlobalClampStyle />

diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index b3b7383..4fbb783 100644 (file)
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -46,25 +46,26 @@ export default class ConfigurationPolicyModal extends React.Component {
                this.handleClose = this.handleClose.bind(this);
                this.handleSave = this.handleSave.bind(this);
                this.renderJsonEditor = this.renderJsonEditor.bind(this);
-               //this.state.componentName = props.match.params.componentName;
        }
 
        handleSave() {
-
                var errors = this.state.jsonEditor.validate();
                var editorData = this.state.jsonEditor.getValue();
 
                if (errors.length !== 0) {
                        console.error("Errors detected during config policy data validation ", errors);
+                       this.setState({ show: false });
+                       this.props.history.push('/');
                }
                else {
                        console.info("NO validation errors found in config policy data");
                        this.state.loopCache.updateMicroServiceProperties(this.state.componentName, editorData[0]);
-                       LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.componentName));
+                       LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.componentName)).then(resp => {
+                               this.setState({ show: false });
+                               this.props.history.push('/');
+                               this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+                       });
                }
-
-               this.setState({ show: false });
-               this.props.history.push('/');
        }
 
        handleClose() {

diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 1c0d015..dac7765 100644 (file)
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -36,6 +36,7 @@ export default class LoopProperties extends React.Component {
        state = {
                show: true,
                loopCache: this.props.loopCache,
+               temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())),
        };
 
        constructor(props, context) {
@@ -43,6 +44,8 @@ export default class LoopProperties extends React.Component {
 
                this.handleClose = this.handleClose.bind(this);
                this.handleSave = this.handleSave.bind(this);
+               this.handleChange = this.handleChange.bind(this);
+               
                this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
                this.renderAllParameters = this.renderAllParameters.bind(this);
                this.getDcaeParameters = this.getDcaeParameters.bind(this);
@@ -51,6 +54,8 @@ export default class LoopProperties extends React.Component {
        componentWillReceiveProps(newProps) {
                this.setState({
                        loopCache: newProps.loopCache,
+                       temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())),
+                       
                });
        }
 
@@ -59,12 +64,15 @@ export default class LoopProperties extends React.Component {
        }
 
        handleSave(event) {
-               // translate the deploymentParameter into jsonFormat at submit time
-
+               LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
+                       this.setState({ show: false });
+                       this.props.history.push('/');
+                       this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+               });
        }
 
-       saveAllProperties() {
-
+       handleChange(event) {
+               this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
        }
 
        renderAllParameters() {
@@ -77,8 +85,8 @@ export default class LoopProperties extends React.Component {
        }
 
        getDcaeParameters() {
-               if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") {
-                       return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]);
+               if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+                       return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
                } else {
                        return "";
                }
@@ -89,7 +97,7 @@ export default class LoopProperties extends React.Component {
                return (
                        <Form.Group >
                                <Form.Label>Deploy Parameters</Form.Label>
-                               <Form.Control as="textarea" rows="3" name="dcaeDeployParameters">{this.getDcaeParameters()}</Form.Control>
+                               <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
                        </Form.Group>
                );
        }

diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 0bf7158..fbfc727 100644 (file)
--- a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -44,7 +44,6 @@ export default class OpenLoopModal extends React.Component {
 
                this.getLoopNames = this.getLoopNames.bind(this);
                this.handleOpen = this.handleOpen.bind(this);
-               this.getModel = this.getModel.bind(this);
                this.handleClose = this.handleClose.bind(this);
                this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
                this.state = {
@@ -74,18 +73,11 @@ export default class OpenLoopModal extends React.Component {
                });
        }
 
-       getModel() {
-               LoopService.getLoop(this.state.chosenLoopName).then(loop => {
-                       console.debug("Settingloop cache with json");
-                       this.props.updateLoopCacheFunction(loop);
-               });
-       }
-
        handleOpen() {
                console.info("Loop " + this.state.chosenLoopName + " is chosen");
                this.setState({ show: false });
                this.props.history.push('/');
-               this.getModel();
+               this.props.loadLoopFunction(this.state.chosenLoopName);
        }
 
        render() {