diff options
Diffstat (limited to 'ui-react/src')
-rw-r--r-- | ui-react/src/LoopUI.js | 14 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js | 4 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/LoopProperties.js | 107 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/UserInfo.js | 2 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/status/LoopStatus.css | 19 | ||||
-rw-r--r-- | ui-react/src/components/menu/MenuBar.js | 68 | ||||
-rw-r--r-- | ui-react/src/index.js | 2 | ||||
-rw-r--r-- | ui-react/src/theme/globalStyle.js | 5 |
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', }; |