Modify the Ui

Modify the Ui to have a modify option in the menu so that the user can tune the loop instance

Issue-ID: CLAMP-648

Change-Id: I57523bc1c3afaf5ca5a2acf5c59823df06fd4cd9
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

2 files changed, 103 insertions, 51 deletions

diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 98c7bffcf..c1a7ac3bb 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -87,27 +87,28 @@ export default class MenuBar extends React.Component {
 		return (
 
 				<Navbar.Collapse>
-					<StyledNavDropdown title="Template">
-					<NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Policy Model</NavDropdown.Item>
-					<NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Policy Models</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View Loop Templates</NavDropdown.Item>
+					<StyledNavDropdown title="Loop Templates">
+							<NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View All Templates</NavDropdown.Item>
 					</StyledNavDropdown>
-					<StyledNavDropdown title="Closed Loop">
-							<NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties CL</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close Model</NavDropdown.Item>
-					</StyledNavDropdown>
-					<StyledNavDropdown title="Manage">
-							<NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Submit</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Stop</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>Restart</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy</NavDropdown.Item>
-					</StyledNavDropdown>
-					<StyledNavDropdown title="View">
+					<StyledNavDropdown title="Policy Models">
+                    	    <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
+                    		<NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+                    </StyledNavDropdown>
+					<StyledNavDropdown title="Loop Instance">
+							<NavDropdown.Item as={StyledLink} to="/openLoop">Open Loop</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/modifyLoop" >Modify</NavDropdown.Item>
 							<NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
 					</StyledNavDropdown>
+					<StyledNavDropdown title="Loop Operations">
+							<NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
+					</StyledNavDropdown>
 					<StyledNavDropdown title="Help">
 							<StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
 							<StyledNavLink 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</StyledNavLink>
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 14030f012..a7e66eddd 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Verify MenuBar Test the render method 1`] = `
 <NavbarCollapse>
   <Styled(NavDropdown)
-    title="Template"
+    title="Loop Templates"
   >
     <DropdownItem
       as={
@@ -52,10 +52,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/uploadToscaPolicyModal"
+      to="/ViewLoopTemplatesModal"
     >
-      Upload Tosca Policy Model
+      View All Templates
     </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Policy Models"
+  >
     <DropdownItem
       as={
         Object {
@@ -103,9 +107,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewToscaPolicyModal"
+      to="/uploadToscaPolicyModal"
     >
-      View Tosca Policy Models
+      Upload Tosca Model
     </DropdownItem>
     <DropdownItem
       as={
@@ -154,13 +158,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/ViewLoopTemplatesModal"
+      to="/viewToscaPolicyModal"
     >
-      View Loop Templates
+      View Tosca Models
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)
-    title="Closed Loop"
+    title="Loop Instance"
   >
     <DropdownItem
       as={
@@ -211,7 +215,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={false}
       to="/openLoop"
     >
-      Open CL
+      Open Loop
     </DropdownItem>
     <DropdownItem
       as={
@@ -262,7 +266,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={true}
       to="/loopProperties"
     >
-      Properties CL
+      Properties
     </DropdownItem>
     <DropdownItem
       as={
@@ -313,12 +317,59 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={true}
       to="/closeLoop"
     >
-      Close Model
+      Close
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	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: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/modifyLoop"
+    >
+      Modify
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="Manage"
-  >
     <DropdownItem
       as={
         Object {
@@ -366,10 +417,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/submit"
+      to="/refreshStatus"
     >
-      Submit
+      Refresh Status
     </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Loop Operations"
+  >
     <DropdownItem
       as={
         Object {
@@ -417,9 +472,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/stop"
+      to="/submit"
     >
-      Stop
+      Create and deploy to Policy Engine(SUBMIT)
     </DropdownItem>
     <DropdownItem
       as={
@@ -468,9 +523,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/restart"
+      to="/stop"
     >
-      Restart
+      Undeploy from Policy Engine (STOP)
     </DropdownItem>
     <DropdownItem
       as={
@@ -519,9 +574,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/delete"
+      to="/restart"
     >
-      Delete
+      ReDeploy to Policy Engine (RESTART)
     </DropdownItem>
     <DropdownItem
       as={
@@ -570,9 +625,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/deploy"
+      to="/delete"
     >
-      Deploy
+      Delete loop instance (DELETE)
     </DropdownItem>
     <DropdownItem
       as={
@@ -621,14 +676,10 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/undeploy"
+      to="/deploy"
     >
-      UnDeploy
+      Deploy to DCAE (DEPLOY)
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="View"
-  >
     <DropdownItem
       as={
         Object {
@@ -676,9 +727,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/refreshStatus"
+      to="/undeploy"
     >
-      Refresh Status
+      UnDeploy to DCAE (UNDEPLOY)
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)