Fix loop prop window
Fix the loop Properties windows
Issue-ID: CLAMP-447
Change-Id: I0d4002267feab57457067df345f6b56542926e35
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 8178bf4..b3b7383 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -38,7 +38,7 @@
show: true,
loopCache: this.props.loopCache,
jsonEditor: null,
- componentName: "",
+ componentName: this.props.match.params.componentName,
};
constructor(props, context) {
@@ -46,7 +46,7 @@
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;
+ //this.state.componentName = props.match.params.componentName;
}
handleSave() {
diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 2cde8d4..1c0d015 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -33,78 +33,77 @@
export default class LoopProperties extends React.Component {
- formProps = {dcaeDeployParameters: {
- "location_id": "",
- "service_id": "",
- "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
- }};
+ state = {
+ show: true,
+ loopCache: this.props.loopCache,
+ };
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.bind(this);
- this.handleChange = this.handleChange.bind(this);
- this.saveProperties = this.saveProperties.bind(this);
- this.initialValues = this.initialValues.bind(this);
- this.state = {
- show: true,
- loopName: 'LOOP_h2NMX_v1_0_ResourceInstanceName1_tca',
- form: this.formProps
- };
+ this.handleSave = this.handleSave.bind(this);
+ this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+ this.renderAllParameters = this.renderAllParameters.bind(this);
+ this.getDcaeParameters = this.getDcaeParameters.bind(this);
+ }
+
+ componentWillReceiveProps(newProps) {
+ this.setState({
+ loopCache: newProps.loopCache,
+ });
+ }
+
+ handleClose() {
+ this.props.history.push('/');
+ }
+
+ handleSave(event) {
+ // translate the deploymentParameter into jsonFormat at submit time
}
- initialValues() {
- const updatedForm = this.state.form;
- Object.keys(updatedForm).forEach((key) => {
- if (key === 'dcaeDeployParameters') {
- updatedForm[key] = JSON.stringify(this.state.form[key]);
- } else {
- updatedForm[key] = this.state.form[key];
- }
- this.setState({ form: updatedForm });
- });
+
+ saveAllProperties() {
+
}
- handleClose() {
- this.props.history.push('/');
+
+ renderAllParameters() {
+ return (<Modal.Body>
+ <Form>
+ {this.renderDcaeParameters()}
+ </Form>
+ </Modal.Body>
+ );
}
- handleChange(e) {
- const formUpdated = this.state.form;
- formUpdated[e.target.name] = e.target.value;
- this.setState({ form: formUpdated });
- };
- saveProperties(event) {
- // translate the deploymentParameter into jsonFormat at submit time
- const updatedForm = this.state.form;
- Object.keys(updatedForm).forEach((key) => {
- if (key === 'dcaeDeployParameters') {
- try {
- let value = JSON.parse(updatedForm[key]);
- updatedForm[key] = value;
- // save Properties
- this.setState( {form: updatedForm} );
- LoopService.updateGlobalProperties(this.state.loopName, this.state.form);
- this.props.history.push('/');
- } catch (error) {
- alert("Deployment Parameters is not in good Json format. Please correct it.");
- }
- }
- });
+
+ getDcaeParameters() {
+ if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") {
+ return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]);
+ } else {
+ return "";
+ }
+
}
+
+ renderDcaeParameters() {
+ return (
+ <Form.Group >
+ <Form.Label>Deploy Parameters</Form.Label>
+ <Form.Control as="textarea" rows="3" name="dcaeDeployParameters">{this.getDcaeParameters()}</Form.Control>
+ </Form.Group>
+ );
+ }
+
render() {
return (
- <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
+ <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
<Modal.Header closeButton>
<Modal.Title>Model Properties</Modal.Title>
</Modal.Header>
- <Modal.Body>
- <Form.Group controlId="exampleForm.ControlTextarea1">
- <Form.Label>Deploy Parameters</Form.Label>
- <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.state.form["dcaeDeployParameters"]}/>
- </Form.Group>
- </Modal.Body>
+ {this.renderAllParameters()}
<Modal.Footer>
- <Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
- <Button variant="primary" type="submit" onClick={this.saveProperties}>Save</Button>
+ <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+ <Button variant="primary" type="submit" onClick={this.handleSave}>Save Changes</Button>
</Modal.Footer>
</ModalStyled>
);
diff --git a/ui-react/src/components/dialogs/UserInfo.js b/ui-react/src/components/dialogs/UserInfo.js
index a8ef717..b8d68b8 100644
--- a/ui-react/src/components/dialogs/UserInfo.js
+++ b/ui-react/src/components/dialogs/UserInfo.js
@@ -153,7 +153,7 @@
</Form.Group>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
+ <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
</Modal.Footer>
</ModalStyled>
);
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.css b/ui-react/src/components/loop_viewer/status/LoopStatus.css
deleted file mode 100644
index 14add0f..0000000
--- a/ui-react/src/components/loop_viewer/status/LoopStatus.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-.status_title{
- position: absolute;
- left: 61%;
- top: 151px;
- font-size:20px;
-}
-.status{
- background-color: gray;
- -moz-border-radius: 50px;
- -webkit-border-radius: 50px;
- border-radius: 50px;
-}
-.status_table {
- position: absolute;
- left: 61%;
- top: 191px;
- font-size:10px;
-}
\ No newline at end of file
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 491cc67..811a48b 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -25,41 +25,61 @@
import NavDropdown from 'react-bootstrap/NavDropdown';
import 'bootstrap-css-only/css/bootstrap.min.css';
import styled from 'styled-components';
+import { Link } from 'react-router-dom'
const StyledNavDropdownItem = styled(NavDropdown.Item)`
- color: ${props => props.theme.fontNormal};
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
:hover {
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
+ }
+`;
+
+const StyledLink = styled(Link)`
+ color: ${props => props.theme.menuColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- color: ${props => props.theme.loopViewerHeaderFontColor}
+ color: ${props => props.theme.loopViewerHeaderFontColor};
}
`;
export default class MenuBar extends React.Component {
render () {
- return (
- <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
- <NavDropdown title="Closed Loop" id="basic-nav-dropdown">
- <StyledNavDropdownItem href="/openLoop">Open CL</StyledNavDropdownItem>
- <StyledNavDropdownItem href="/loopProperties">Properties CL</StyledNavDropdownItem>
- <StyledNavDropdownItem href="/closeLoop">Close Model</StyledNavDropdownItem>
- </NavDropdown>
+ return (
+ <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
+ <NavDropdown title="Closed Loop" id="basic-nav-dropdown">
+ <StyledNavDropdownItem as={StyledLink} to="/openLoop">Open CL</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="/loopProperties">Properties CL</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="/closeLoop">Close Model</StyledNavDropdownItem>
+ </NavDropdown>
<NavDropdown title="Manage" id="basic-nav-dropdown">
- <StyledNavDropdownItem href="/operationalPolicyModal">Submit</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.2">Stop</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.3">Restart</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.3">Delete</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.3">Deploy</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.3">UnDeploy</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="/operationalPolicyModal">Submit</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.2">Stop</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Restart</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Delete</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Deploy</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.3">UnDeploy</StyledNavDropdownItem>
</NavDropdown>
<NavDropdown title="View" id="basic-nav-dropdown">
- <StyledNavDropdownItem href="#action/3.1">Refresh Status</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="#action/3.1">Refresh Status</StyledNavDropdownItem>
</NavDropdown>
- <NavDropdown title="Help" id="basic-nav-dropdown">
- <StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem>
- <StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem>
- <StyledNavDropdownItem href="#action/3.3">User Info</StyledNavDropdownItem>
- </NavDropdown>
- </Navbar.Collapse>
- );
- }
+ <NavDropdown title="Help" id="basic-nav-dropdown">
+ <StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem>
+ <StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem>
+ <StyledNavDropdownItem as={StyledLink} to="/userInfo">User Info</StyledNavDropdownItem>
+ </NavDropdown>
+ </Navbar.Collapse>
+ );
+ }
}