summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui-react/src/LoopUI.js14
-rw-r--r--ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js4
-rw-r--r--ui-react/src/components/dialogs/LoopProperties.js107
-rw-r--r--ui-react/src/components/dialogs/UserInfo.js2
-rw-r--r--ui-react/src/components/loop_viewer/status/LoopStatus.css19
-rw-r--r--ui-react/src/components/menu/MenuBar.js68
-rw-r--r--ui-react/src/index.js2
-rw-r--r--ui-react/src/theme/globalStyle.js5
8 files changed, 113 insertions, 108 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 7d8fcb5cf..9956e3c98 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -175,18 +175,18 @@ export default class LoopUI extends React.Component {
render() {
return (
- <div id="main_div">
- <GlobalClampStyle />
- {this.renderNavBar()}
- {this.renderLoopViewer()}
+ <div id="main_div">
<Route path="/operationalPolicyModal"
- render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
- <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+ 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()} />)} />
<Route path="/userInfo" render={(routeProps) => (<UserInfo {...routeProps} />)} />
<Route path="/closeLoop" render={(routeProps) => (<Redirect to='/'/>)} />
- </div>
+ <GlobalClampStyle />
+ {this.renderNavBar()}
+ {this.renderLoopViewer()}
+ </div>
);
}
}
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 8178bf47f..b3b7383ea 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -38,7 +38,7 @@ export default class ConfigurationPolicyModal extends React.Component {
show: true,
loopCache: this.props.loopCache,
jsonEditor: null,
- componentName: "",
+ componentName: this.props.match.params.componentName,
};
constructor(props, context) {
@@ -46,7 +46,7 @@ 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;
+ //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 2cde8d46b..1c0d015af 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -33,78 +33,77 @@ const ModalStyled = styled(Modal)`
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);
}
- 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 });
+
+ componentWillReceiveProps(newProps) {
+ this.setState({
+ loopCache: newProps.loopCache,
});
}
+
handleClose() {
- this.props.history.push('/');
+ this.props.history.push('/');
}
- handleChange(e) {
- const formUpdated = this.state.form;
- formUpdated[e.target.name] = e.target.value;
- this.setState({ form: formUpdated });
- };
- saveProperties(event) {
+
+ handleSave(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.");
- }
- }
- });
+
}
+
+ saveAllProperties() {
+
+ }
+
+ renderAllParameters() {
+ return (<Modal.Body>
+ <Form>
+ {this.renderDcaeParameters()}
+ </Form>
+ </Modal.Body>
+ );
+ }
+
+ 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 a8ef717b3..b8d68b849 100644
--- a/ui-react/src/components/dialogs/UserInfo.js
+++ b/ui-react/src/components/dialogs/UserInfo.js
@@ -153,7 +153,7 @@ export default class UserInfo extends React.Component {
</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 14add0f53..000000000
--- 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 491cc675d..811a48ba0 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -25,41 +25,61 @@ import Navbar from 'react-bootstrap/Navbar';
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 as={StyledLink} to="/userInfo">User Info</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>
- );
- }
+ </Navbar.Collapse>
+ );
+ }
}
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
index 8a62b5a2c..39df36427 100644
--- a/ui-react/src/index.js
+++ b/ui-react/src/index.js
@@ -27,7 +27,7 @@ import { Route, BrowserRouter } from 'react-router-dom'
const routing = (
- <BrowserRouter >
+ <BrowserRouter forceRefresh={false}>
<Route path="/" component={OnapClamp}/>
</BrowserRouter>
);
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 08630cbd9..cbd86b199 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -83,4 +83,9 @@ export const DefaultClampTheme = {
loopViewerFontColor: 'yellow',
loopViewerHeaderBackgroundColor: '#337ab7',
loopViewerHeaderFontColor: 'white',
+
+ menuBackgroundColor: 'white',
+ menuFontColor: 'black',
+ menuHighlightedBackgroundColor: '#337ab7',
+ menuHighlightedFontColor: 'white',
};