aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/dialogs')
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.js35
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js9
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap68
3 files changed, 73 insertions, 39 deletions
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 34304d61..9c9a16fe 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -26,6 +26,8 @@ import LoopService from '../../../api/LoopService';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
import styled from 'styled-components';
const ModalStyled = styled(Modal)`
@@ -55,6 +57,14 @@ export default class DeployLoopModal extends React.Component {
show: true
});
}
+ componentDidMount() {
+ const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+ Object.keys(deployJsonList)
+ .filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
+ .map(obj =>
+ this.setState({key: obj})
+ );
+ }
handleClose(){
this.props.history.push('/');
}
@@ -89,34 +99,43 @@ export default class DeployLoopModal extends React.Component {
}
handleChange(event) {
let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
- deploymentParam[event.target.name] = event.target.value;
+ deploymentParam[this.state.key][event.target.name] = event.target.value;
this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
}
- renderDeployParam() {
+ renderDeployParamTabs() {
if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
return "";
}
- const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+ const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+ var indents = [];
+ Object.keys(deployJsonList).map((item,key) =>
+ indents.push(<Tab eventKey={item} title={item}>
+ {this.renderDeployParam(deployJsonList[item])}
+ </Tab>)
+ );
+ return indents;
+ }
+
+ renderDeployParam(deployJson) {
var indents = [];
Object.keys(deployJson).map((item,key) =>
indents.push(<FormStyled>
<Form.Label>{item}</Form.Label>
<Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
</FormStyled>));
-
- return indents;
+ return indents;
}
-
-
render() {
return (
<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
<Modal.Header closeButton>
<Modal.Title>Deployment parameters</Modal.Title>
</Modal.Header>
- {this.renderDeployParam()}
+ <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
+ {this.renderDeployParamTabs()}
+ </Tabs>
<Modal.Footer>
<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
<Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
index 2ebb8c06..5f1dcd5f 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
@@ -32,8 +32,10 @@ describe('Verify DeployLoopModal', () => {
"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
"globalPropertiesJson": {
"dcaeDeployParameters": {
- "location_id": "",
- "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+ "testMs": {
+ "location_id": "",
+ "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+ }
}
}
});
@@ -101,10 +103,9 @@ describe('Verify DeployLoopModal', () => {
it('Onchange event', () => {
const event = { target: { name: "location_id", value: "testLocation"} };
const component = shallow(<DeployLoopModal loopCache={loopCache}/>);
- const forms = component.find('StateManager');
component.find('[name="location_id"]').simulate('change', event);
component.update();
- expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
+ expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
});
}); \ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
index bf06965b..0f86aa34 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
@@ -14,34 +14,48 @@ exports[`Verify DeployLoopModal Test the render method 1`] = `
Deployment parameters
</ModalTitle>
</ModalHeader>
- <Styled(FormGroup)>
- <FormLabel
- column={false}
- srOnly={false}
- >
- location_id
- </FormLabel>
- <FormControl
- defaultValue=""
- name="location_id"
- onChange={[Function]}
- type="text"
- />
- </Styled(FormGroup)>
- <Styled(FormGroup)>
- <FormLabel
- column={false}
- srOnly={false}
+ <Tabs
+ activeKey="testMs"
+ id="controlled-tab-example"
+ mountOnEnter={false}
+ onSelect={[Function]}
+ unmountOnExit={false}
+ variant="tabs"
+ >
+ <Tab
+ eventKey="testMs"
+ title="testMs"
>
- policy_id
- </FormLabel>
- <FormControl
- defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
- name="policy_id"
- onChange={[Function]}
- type="text"
- />
- </Styled(FormGroup)>
+ <Styled(FormGroup)>
+ <FormLabel
+ column={false}
+ srOnly={false}
+ >
+ location_id
+ </FormLabel>
+ <FormControl
+ defaultValue=""
+ name="location_id"
+ onChange={[Function]}
+ type="text"
+ />
+ </Styled(FormGroup)>
+ <Styled(FormGroup)>
+ <FormLabel
+ column={false}
+ srOnly={false}
+ >
+ policy_id
+ </FormLabel>
+ <FormControl
+ defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+ name="policy_id"
+ onChange={[Function]}
+ type="text"
+ />
+ </Styled(FormGroup)>
+ </Tab>
+ </Tabs>
<ModalFooter>
<Button
active={false}