English (US) Français 日本語 한국어 Português
Login/Register
 
 
Back to top
 
Other links
 
  1. Persistent Support
  2. CloudPortal Business Manager 2.5
  3. Extending and Customizing CloudPortal Business Manager
 
 

Contributing Custom UI for Configuring a Subscription for Provisioning

When a resource type includes custom properties, CloudPortal Business Manager will automatically generate a UI to collect values for these custom fields. However, because of its generic nature, this UI cannot be anything more than simple text fields. In order to support richer configuration, CloudPortal Business Manager allows connectors to define custom editors for these custom fields.

These editors will be embedded into CloudPortal Business Manager (they are not external windows or IFrames).

Each property defined in Service/ResourceMetadata/ResourceType/Properties is collected from the user at the time of provisioning. This default UI can be overridden by specifying a Service/ResourceMetadata/ResourceType Editor attribute which will be a reference to a jsp which will replace the default editor. The relative path of jsp is given as a tile definition defined in the fragment of the connector and this tile name is given in the service definition of the connector. This editor can be as simple or as sophisticated, depending on how the implementer wants it to be.

It can also interact with the back-end cloud service to provide a more interactive experience. The only requirement from CPBM is that it updates the set of html input fields with their names matching those of the property names specified in the metadata (and trigger the change event afterwards which will indicate to CPBM to refresh bundles based on selection as well as the selection summary shown in CPBM generic UI). CPBM will also extract data from this set of input fields and add them to the subscription configuration for provisioning. . 
<Service name="CloudStack">  <ResourceMetadata>    <ResourceType name="VirtualMachine" constraint="NONE" componentSelector="apachecloudstack.fragment.resource.virtual.machine.components.selection">  <Properties editor="apachecloudstack.fragment.resource.virtual.machine.properties.selection" />  <Property id="hostName" type="String" validation='{"required":false}'/>  <Property id="displayName" type="String" validation='{"required":false}'/>    </Properties>    </ResourceType>  ...    <ResourceType name="Volume" constraint="NONE">    <Properties>    <Property id="size" type="Number" validation='{"required":true}'/>  <Property id="tag" type="String" validation='{"required":false}'/>    </Properties>    </ResourceType>    </ResourceMetaData>    </Service>
Introduction
  • Provisioning Resource is a 2 step process (with both steps with their own views, namely 'component selector' and 'editor'):
    • First step allows the user to filter bundles based on selection of resource components and pick one.
    • In the second step (view) (appears after the user has picked a bundle from step 1), the user gets to configure properties of the resource.
  • CloudPortal Business Manager provides a default UI to the user for both steps, based on the resource types, filters and resource components defined in the service definition.
  • Custom UI can be provided by the connector for any or both steps. The UIs provided will override the respective default ones.
    • Resource Component Selection (Step 1):
      • width: 650px
      • height: auto (the CloudPortal Business Manager UI will adapt depending on the height of the custom UI)
    • Resource Properties Selection (Step 2):
      • width: 650px
      • height: auto (the CloudPortal Business Manager UI will adapt depending on the height of the custom UI)
Fields made available by CloudPortal Business Manager
  • tenantParam : The uuid of the tenant to which current user belongs
  • serviceInstanceUuid : The uuid of the currently selected service instance
  • Following parameters are only available in case the user has opted to reconfigure or reprovision an existing subscription:
    • subscriptionId : This parameter is available
    • isReconfigure: If available, means that the user has chosen reconfigure and not reprovision
    • subscriptionConfJson : The json representation of the configuration data of the given subscription (Used for prefilling the selectors and properties for custom UI
Functions expected by CloudPortal Business Manager for initialization
  • For resource selection custom UI:
    // loadValuesForSelectedBundleOnly : It tell whether to load all resource components available or ask CPBM to list only those available for a selected bundle (used when user has moved to step 2 of provision resource by selecting a specific bundle)   // currentPage : This tells the current page out of the 2 pages mentioned in the introduction for resource provision.  // selectedResourceComponentsForStep2 : In step1, when group is ambiguous based on the resource components selected, then CPBM asks the user to choose a group out of all. The resource components that belong to the chosen group are passed in this argument  void initializeComponentSelector(boolean loadValuesForSelectedBundleOnly, int currentPage, String[] selectedResourceComponentsForStep2) {  // initialize resource components  }
  • For editor custom UI: 
    1void initializeEditor() {   // initialize resource type properties editor  }
Functions provided by CloudPortal Business Manager
/**   * If the user is on second page, that means, a bundle is selected. So, custom resource selection UI does not need to list all possible values for components.   * This method should be used instead to get only allowed list of values for the given component name (as provided in the service definition).  **/   List<ResourceComponent> getValuesForComponent(String componentName);  
/**   * enable tells whether to enable or disable the provision button on page 2. This can be disabled by custom UI if the selections made are invalid.   * ‘msg' is the info or warning message to be shown when the provision button is disabled  **/   void enableProvisionButton(boolean enable, String msg);
Working with hidden input fields

CloudPortal Business Manager needs a way to be aware of the selections made by user inside the custom UI (to generate selection summary, check bundle compatibility, and so on. If the user has opted to re-provision or reconfigure an existing subscription, CloudPortal Business Manager needs to provide the selections made while creating subscription to the custom UI (for custom UI to pre-fill fields based on previous selections).

For solving both the above purposes, CloudPortal Business Manager uses hidden input fields. The whole UI for resource provision (resource selection as well as properties editor) is driven by these hidden input fields in the background. For each of the following (defined in service definition), CloudPortal Business Manager auto generates a hidden input field:
  • Filters
  • Resource Components
  • Resource Properties
The values of the hidden fields are preset in case the user has opted for reconfiguring or reprovisioning an existing subscription. Other specific details about the hidden input DOM element are as follows:
Property Description Set by
attr("id") The id of the hidden input is set by CloudPortal Business Manager as "conf_prop_" + name of the filters, components and properties as given in the service definition. CloudPortal Business Manager
attr("name") The name of the hidden input is set by CloudPortal Business Manager same as the name of the filters, components and properties as given in the service definition. CloudPortal Business Manager
val() The value of the filter, resource component or property that will finally be used for the resource provision. CloudPortal Business Manager (for reprovision and reconfigure) and Custom UI
data("valueDisplayName") The display name for the selected value for filter, component or property to be displayed in the selection summary. Custom UI
data("fieldDisplayName") The title for the selected filter, component or property to be displayed in the selection summary Custom UI
data("effectiveValue") Required for resource components only, this value signifies if charging of a component is based on a different value than the one used for resource provisioning. For all other resource components this value is to be set same as the value of the input field. Custom UI

Irrespective of the fields and options in the custom UI, custom UI needs to call the .change() method on the hidden input field after updating the above mentioned properties of the input field. This is applicable for resource components as well as for the resource properties.

Use Cases

Upgrading custom UI written for CloudPortal Business Manager 2.0 release
  1. Create a new connector fragment by following the steps given in the Connector Fragment section.
  2. Move the jsp into fragment in src/main/resources/WEB-INF/jsp/${artifactId}/ folder.
  3. Spring messaging can be used after including appropriate JSTL tags which are specified in example.jsp in the fragment.
  4. Script from inside the custom UI can be moved out to another file in the fragment in src/main/resources/js/${artifactId}/ folder.
  5. The jsp needs to be declared in src/main/resources/WEB-INF/default/${artifactId}-tiles-defs.xml of the fragment.
  6. Mention the tile definition name in the service definition of connector instead the jsp path.
  7. Custom UIs no more need to declare the input fields themselves as they are now auto generated by CloudPortal Business Manager.

Earlier for properties, CloudPortal Business Manager read input fields with "pp_" appended to property name in the 'id' of the field. Now it uses the name of the field and expects it to be same as the property name mentioned in the service definition file. The ids of the fields are "conf_prop_" + name of field in service definition. This is applicable for filters, resource components as well as resource properties.

 
Created By : Pankaj Paliwal -

Comments