Page Comparison

This page will document the on-going work into the integration of the CLAMP UI with the code from the Angular monitoring UI. It will also detail new functionality, observations and design choices made in the CLAMP UI.

Setting Parameters for CL Instantiation

Observations

• The current CLAMP UI uses a JSON-schema-based editor to create forms that can be filled in by the user automatically. Policy types are periodically downloaded by the UI through the CLAMP backend. This gives the user a list of policy types to choose from - the chosen policy type is then used to create a policy, which is associated with a control loop instance.
• Once the policy type is chosen, a call is made to the CLAMP backend. The CLAMP backend then processes the policy type to create a JSON-schema of the policy type. This is then returned to the UI.
• The UI then uses the JSON-schema editor library to render this form that can be filled in by the user to specify the configuration of the resultant policy.
• This method is very useful for generating forms of arbitrary complexity for the user.
• A note here on jest testing and the generation of snapshots to testing. When making changes to LoopUI.js and some other files, I got test failures when running "mvn clean install". This ended up being a little bit awkward to fix.
  • I am working out of "src/ui-react" in the repo. In the CLAMP videos, it is recommended to work out of "target/ui-react" but if I do this, I have to copy changes back into the "src/ui-react " folder so that I can push to version control.
  • Working in "src/ui-react" creates an issue. Due to the configuration in "package.json" npm is told to use "target/ui-react" as a base directory for running tests. So, when running "mvn clean install", the jest snapshots do not automatically update.
  • I must manually update the jest snapshots using the "npm test -- u" command. This only runs in "src/ui-react" if I change the "rootDir" in package.json to point at "src/ui-react". Usually it points at "target/ui-react".
  • So, the procedure to avoid issues is:
    1. Make changes to ui code whose tests are snapshot dependent....
    2. Verify that your code works as desired with npm start.
    3. Change "package.json" rootDir to point to "src/react-ui".
    4. Run "npm test – u" to update existing snapshots.
    5. If the above was successful, change back the "package.json" to what it was.
    6. Then, run "mvn clean install".

Considerations

• This method could be used to parameterise the Tosca Service Template.
• However, we are still investigating whether the CLAMP backend only supports this for policies (policy types) or if it can be used for other elements like data_types.
• Then, we must consider whether the changes required to generate the schema we want should be made in the CLAMP backend or in the frontend.

Preliminary Work

• An endpoint has been added to the comissioning API that returns the Tosca Service Template.
• An initial 2 components have been added to the React UI. Where the existing CLAMP UI components use class-based syntax, we use more modern functional components. There is no issue with having a mix of class-based and funcional components in the project.
• One component is responsible for the call to the Runtime Controlloop comissioning API.
• The other component is responsible for creating a pop-up modal that is currently responsible for displaying the retrieved template.
• The template is passed from the first component to the second. The template is saved in the second components state using new React state-management hooks.
• The current CLAMP UI is configured to pass all calls that are not present in its routes list to the CLAMP backend using a proxy setting in the package.json.
• This is good but it becomes an issue when the UI needs to call to a different backend (i.e. the Runtime Rest API).
• For this reason, we are using a method that supports proxying to multiple backends. This is shown below

const createProxyMiddleware = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/restservices/',
    createProxyMiddleware({
      target: 'https://localhost:8443',
      secure: false,
      changeOrigin: true
    })
  );
  app.use(
    '/onap/',
    createProxyMiddleware({
      target: 'http://localhost:6969',
      secure: false,
      changeOrigin: true
    })
  );
};

• The calls made from the UI with "/restservices/" in the URI will go to the CLAMP backend.
• Calls with "/onap/" in the URI will go to the Runtime Rest API.
• This is easily configurable and runs together with the React UI on "npm start".