CLAMP GUI Integration and New Functionality

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.

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".