Update deploymentParameters

Update deploymentParameters to allow a map of <msName, deploymentParams>
instead of a single deploymentParam

Issue-ID: CLAMP-569, CLAMP-570
Change-Id: I6abc4fe193157644bd6abe1c893a1416cadec988
Signed-off-by: xuegao <xg353y@intl.att.com>

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}