From 8a02dd771961cc36b4436f9124657766674b5b76 Mon Sep 17 00:00:00 2001 From: sebdet Date: Wed, 31 Jul 2019 17:11:11 +0200 Subject: Fix loop prop window Fix the loop Properties windows Issue-ID: CLAMP-447 Change-Id: I0d4002267feab57457067df345f6b56542926e35 Signed-off-by: sebdet --- ui-react/src/LoopUI.js | 14 +-- .../ConfigurationPolicyModal.js | 4 +- ui-react/src/components/dialogs/LoopProperties.js | 107 ++++++++++----------- ui-react/src/components/dialogs/UserInfo.js | 2 +- .../components/loop_viewer/status/LoopStatus.css | 19 ---- ui-react/src/components/menu/MenuBar.js | 68 ++++++++----- ui-react/src/index.js | 2 +- ui-react/src/theme/globalStyle.js | 5 + 8 files changed, 113 insertions(+), 108 deletions(-) delete mode 100644 ui-react/src/components/loop_viewer/status/LoopStatus.css (limited to 'ui-react') 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 ( -
- - {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 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 ( +
+ {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 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 { - + ); 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 ( - - - 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 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 = ( - + ); 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', }; -- cgit 1.2.3-korg