Changed components to be service-centric

Moved endpoints to ControlLoopService.js
Refactored components and tests

Issue-ID: POLICY-3424
Change-Id: I70d48750250eecd651b845ef0c726617983f75f5
Signed-off-by: saul.gill <saul.gill@est.tech>

2 files changed, 75 insertions, 71 deletions

diff --git a/gui-clamp/ui-react/src/components/menu/MenuBar.js b/gui-clamp/ui-react/src/components/menu/MenuBar.js
index d7784ef..4574a2a 100644
--- a/gui-clamp/ui-react/src/components/menu/MenuBar.js
+++ b/gui-clamp/ui-react/src/components/menu/MenuBar.js
@@ -87,10 +87,6 @@ export default class MenuBar extends React.Component {
   render() {
     return (
       <Navbar.Collapse>
-        <StyledNavDropdown title="Tosca">
-          <NavDropdown.Item as={ StyledLink } to="/readToscaTemplate">View Tosca Template</NavDropdown.Item>
-          <NavDropdown.Item as={ StyledLink } to="/uploadToscaFile">Upload Tosca to Commissioning</NavDropdown.Item>
-        </StyledNavDropdown>
         <StyledNavDropdown title="POLICY Framework">
           <NavDropdown.Item as={ StyledLink } to="/viewAllPolicies">View All Policies</NavDropdown.Item>
         </StyledNavDropdown>
@@ -119,6 +115,10 @@ export default class MenuBar extends React.Component {
         </StyledNavDropdown>
         <StyledNavDropdown title="TOSCA Control Loop">
           <NavDropdown.Item as={ StyledLink } to="/monitoring">Monitoring Control Loop</NavDropdown.Item>
+          <NavDropdown.Divider />
+          <NavDropdown.Header>Commissioning</NavDropdown.Header>
+          <NavDropdown.Item as={ StyledLink } to="/readToscaTemplate">View Tosca Template</NavDropdown.Item>
+          <NavDropdown.Item as={ StyledLink } to="/uploadToscaFile">Upload Tosca to Commissioning</NavDropdown.Item>
         </StyledNavDropdown>
         <StyledNavDropdown title="Help">
           <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
diff --git a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 416d62e..8bdfb09 100644
--- a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/gui-clamp/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="Tosca"
+    title="POLICY Framework"
   >
     <DropdownItem
       as={
@@ -66,10 +66,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/readToscaTemplate"
+      to="/viewAllPolicies"
     >
-      View Tosca Template
+      View All Policies
     </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="CLAMP Options"
+  >
     <DropdownItem
       as={
         Object {
@@ -131,14 +135,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/uploadToscaFile"
+      to="/manageDictionaries"
     >
-      Upload Tosca to Commissioning
+      Tosca Metadata Dictionaries
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="POLICY Framework"
-  >
+    <DropdownDivider
+      role="separator"
+    />
     <DropdownItem
       as={
         Object {
@@ -200,13 +203,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewAllPolicies"
+      to="/viewLoopTemplatesModal"
     >
-      View All Policies
+      View All Loop Templates
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)
-    title="CLAMP Options"
+    title="LOOP Instance"
   >
     <DropdownItem
       as={
@@ -269,13 +272,10 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/manageDictionaries"
+      to="/createLoop"
     >
-      Tosca Metadata Dictionaries
+      Create
     </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
     <DropdownItem
       as={
         Object {
@@ -337,14 +337,10 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewLoopTemplatesModal"
+      to="/openLoop"
     >
-      View All Loop Templates
+      Open
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="LOOP Instance"
-  >
     <DropdownItem
       as={
         Object {
@@ -405,10 +401,10 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "withComponent": [Function],
         }
       }
-      disabled={false}
-      to="/createLoop"
+      disabled={true}
+      to="/closeLoop"
     >
-      Create
+      Close
     </DropdownItem>
     <DropdownItem
       as={
@@ -470,11 +466,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "withComponent": [Function],
         }
       }
-      disabled={false}
-      to="/openLoop"
+      disabled={true}
+      to="/modifyLoop"
     >
-      Open
+      Modify
     </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
     <DropdownItem
       as={
         Object {
@@ -536,9 +535,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/closeLoop"
+      to="/loopProperties"
     >
-      Close
+      Properties
     </DropdownItem>
     <DropdownItem
       as={
@@ -601,13 +600,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/modifyLoop"
+      to="/refreshStatus"
     >
-      Modify
+      Refresh Status
     </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="LOOP Operations"
+  >
     <DropdownItem
       as={
         Object {
@@ -669,9 +669,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/loopProperties"
+      to="/submit"
     >
-      Properties
+      Create and deploy to Policy Framework (SUBMIT)
     </DropdownItem>
     <DropdownItem
       as={
@@ -734,14 +734,10 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/refreshStatus"
+      to="/stop"
     >
-      Refresh Status
+      Undeploy from Policy Framework (STOP)
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="LOOP Operations"
-  >
     <DropdownItem
       as={
         Object {
@@ -803,9 +799,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/submit"
+      to="/restart"
     >
-      Create and deploy to Policy Framework (SUBMIT)
+      ReDeploy to Policy Framework (RESTART)
     </DropdownItem>
     <DropdownItem
       as={
@@ -868,10 +864,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/stop"
+      to="/delete"
     >
-      Undeploy from Policy Framework (STOP)
+      Delete loop instance (DELETE)
     </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
     <DropdownItem
       as={
         Object {
@@ -933,9 +932,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/restart"
+      to="/deploy"
     >
-      ReDeploy to Policy Framework (RESTART)
+      Deploy to DCAE (DEPLOY)
     </DropdownItem>
     <DropdownItem
       as={
@@ -998,13 +997,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={true}
-      to="/delete"
+      to="/undeploy"
     >
-      Delete loop instance (DELETE)
+      UnDeploy to DCAE (UNDEPLOY)
     </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="TOSCA Control Loop"
+  >
     <DropdownItem
       as={
         Object {
@@ -1065,11 +1065,19 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "withComponent": [Function],
         }
       }
-      disabled={true}
-      to="/deploy"
+      disabled={false}
+      to="/monitoring"
     >
-      Deploy to DCAE (DEPLOY)
+      Monitoring Control Loop
     </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
+    <DropdownHeader
+      role="heading"
+    >
+      Commissioning
+    </DropdownHeader>
     <DropdownItem
       as={
         Object {
@@ -1130,15 +1138,11 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "withComponent": [Function],
         }
       }
-      disabled={true}
-      to="/undeploy"
+      disabled={false}
+      to="/readToscaTemplate"
     >
-      UnDeploy to DCAE (UNDEPLOY)
+      View Tosca Template
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="TOSCA Control Loop"
-  >
     <DropdownItem
       as={
         Object {
@@ -1200,9 +1204,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/monitoring"
+      to="/uploadToscaFile"
     >
-      Monitoring Control Loop
+      Upload Tosca to Commissioning
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)