From: sebdet Date: Wed, 31 Jul 2019 15:11:11 +0000 (+0200) Subject: Fix loop prop window X-Git-Tag: 4.1.1~27^2 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=8a02dd771961cc36b4436f9124657766674b5b76;p=clamp.git Fix loop prop window Fix the loop Properties windows Issue-ID: CLAMP-447 Change-Id: I0d4002267feab57457067df345f6b56542926e35 Signed-off-by: sebdet --- diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 7d8fcb5c..9956e3c9 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 ( -
- - {this.renderNavBar()} - {this.renderLoopViewer()} +
()} /> - ()} /> + render={(routeProps) => ()} /> + ()} /> ()} /> ()} /> ()} /> ()} /> -
+ + {this.renderNavBar()} + {this.renderLoopViewer()} +
); } } diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js index 8178bf47..b3b7383e 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 2cde8d46..1c0d015a 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 ( +
+ {this.renderDcaeParameters()} +
+ + ); + } + + getDcaeParameters() { + if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") { + return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]); + } else { + return ""; + } + + } + + renderDcaeParameters() { + return ( + + Deploy Parameters + {this.getDcaeParameters()} + + ); + } + render() { return ( - + Model Properties - - - Deploy Parameters - - - + {this.renderAllParameters()} - - + + ); diff --git a/ui-react/src/components/dialogs/UserInfo.js b/ui-react/src/components/dialogs/UserInfo.js index a8ef717b..b8d68b84 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 { - + ); 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 14add0f5..00000000 --- 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 491cc675..811a48ba 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 ( - - - Open CL - Properties CL - Close Model - + return ( + + + Open CL + Properties CL + Close Model + - Submit - Stop - Restart - Delete - Deploy - UnDeploy + Submit + Stop + Restart + Delete + Deploy + UnDeploy - Refresh Status + Refresh Status + + + Wiki + Contact Us + User Info - - Wiki - Contact Us - User Info - - - ); - } + + ); + } } diff --git a/ui-react/src/index.js b/ui-react/src/index.js index 8a62b5a2..39df3642 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 = ( - + ); diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js index 08630cbd..cbd86b19 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', };