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>
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 98c7bff..c1a7ac3 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -87,27 +87,28 @@
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 14030f0..a7e66ed 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,62 @@
exports[`Verify MenuBar Test the render method 1`] = `
<NavbarCollapse>
<Styled(NavDropdown)
- title="Template"
+ title="Loop Templates"
+ >
+ <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="/ViewLoopTemplatesModal"
+ >
+ View All Templates
+ </DropdownItem>
+ </Styled(NavDropdown)>
+ <Styled(NavDropdown)
+ title="Policy Models"
>
<DropdownItem
as={
@@ -54,7 +109,7 @@
disabled={false}
to="/uploadToscaPolicyModal"
>
- Upload Tosca Policy Model
+ Upload Tosca Model
</DropdownItem>
<DropdownItem
as={
@@ -105,62 +160,11 @@
disabled={false}
to="/viewToscaPolicyModal"
>
- View Tosca Policy Models
- </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="/ViewLoopTemplatesModal"
- >
- View Loop Templates
+ View Tosca Models
</DropdownItem>
</Styled(NavDropdown)>
<Styled(NavDropdown)
- title="Closed Loop"
+ title="Loop Instance"
>
<DropdownItem
as={
@@ -211,7 +215,7 @@
disabled={false}
to="/openLoop"
>
- Open CL
+ Open Loop
</DropdownItem>
<DropdownItem
as={
@@ -262,7 +266,7 @@
disabled={true}
to="/loopProperties"
>
- Properties CL
+ Properties
</DropdownItem>
<DropdownItem
as={
@@ -313,62 +317,7 @@
disabled={true}
to="/closeLoop"
>
- Close Model
- </DropdownItem>
- </Styled(NavDropdown)>
- <Styled(NavDropdown)
- title="Manage"
- >
- <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={true}
- to="/submit"
- >
- Submit
+ Close
</DropdownItem>
<DropdownItem
as={
@@ -416,10 +365,10 @@
"withComponent": [Function],
}
}
- disabled={true}
- to="/stop"
+ disabled={false}
+ to="/modifyLoop"
>
- Stop
+ Modify
</DropdownItem>
<DropdownItem
as={
@@ -468,220 +417,322 @@
}
}
disabled={true}
- to="/restart"
- >
- Restart
- </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={true}
- to="/delete"
- >
- Delete
- </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={true}
- to="/deploy"
- >
- Deploy
- </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={true}
- to="/undeploy"
- >
- UnDeploy
- </DropdownItem>
- </Styled(NavDropdown)>
- <Styled(NavDropdown)
- title="View"
- >
- <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={true}
to="/refreshStatus"
>
Refresh Status
</DropdownItem>
</Styled(NavDropdown)>
<Styled(NavDropdown)
+ title="Loop Operations"
+ >
+ <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={true}
+ to="/submit"
+ >
+ Create and deploy to Policy Engine(SUBMIT)
+ </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={true}
+ to="/stop"
+ >
+ Undeploy from Policy Engine (STOP)
+ </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={true}
+ to="/restart"
+ >
+ ReDeploy to Policy Engine (RESTART)
+ </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={true}
+ to="/delete"
+ >
+ Delete loop instance (DELETE)
+ </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={true}
+ to="/deploy"
+ >
+ Deploy to DCAE (DEPLOY)
+ </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={true}
+ to="/undeploy"
+ >
+ UnDeploy to DCAE (UNDEPLOY)
+ </DropdownItem>
+ </Styled(NavDropdown)>
+ <Styled(NavDropdown)
title="Help"
>
<Styled(NavLink)