Developer Guide - License Profile Editor

About License Profile Editor

  • License Profile Editor provides a UI editor to create license Profile and save / export in json format.
  • The editor can be used as
    • Web component inline to your web page
    • iframe document launched from your web page
  • For building and using as Web Component, refer license-manager/license-profile-editor/README.md.
  • This document discusses how to build and load license profile editor as iframe document.

Build Prerequisites

Build Instructions

  1. Browse to your preferred directory and run below commands:
git clone "https://gerrit.acumos.org/r/license-manager" cd license-profile-editor
  1. Install node modules
npm install
  1. Build via this command:

    npm run build

  2. Command to build docker image: docker build -t acumos/license-profile-editor:<<VERSION>> .

Portal UI Integration (docker-compose)

Following is the sample docker-compose yaml configuration to include when building/running Portal UI service.

  1. docker-compose yaml for license-profile-editor service
services:
license-profile-editor-service:
    image: ${LICENSE_PROFILE_EDITOR_IMAGE}
    ports:
    - "8089:80"
    restart: on-failure
  1. docker-compose yaml for portal-fe service

This is to link / declare dependency for starting containers locally and ensure that the license-profile-editor container has started before running the portal.

services:
    portal-fe-service:
        image: ${PORTAL_FE_IMAGE}
        ...
        links:
            - portal-be-service
            - license-profile-editor-service
        depends_on:
            - portal-be-service
            - license-profile-editor-service
    ...

License Profile Editor - iframe communication

  1. JavaScript code block to enable the Portal UI parent window to communicate with child License Profile Editor iframe window.
// add following code-block to Portal UI
var iframe;
// addEventListener and old browser support
function bindEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, eventHandler);
    }
}
function licenseProfileMsgListener(event) {
    // TODO check #3 below
}
// TODO - call this function onload of license-profile-editor-iframe
function initOnLoad() {
    iframe = document.getElementById('license-profile-editor-iframe');
    bindEvent(window, 'message', licenseProfileMsgListener);
}
  1. Protocol to send License Profile Template.
// add following code-block to Portal UI
function sendMessage(msgObj) {
    var val = // must be VALID JSON value

    // outgoing message object has key and value properties
    //   - "key": "input" - identifies input data
    //   - "value": val - must be VALID JSON value
    //              { } - empty JSON to clear editor selection
    var msgObj = {
        "key": "input",
        "value": val
    };
    iframe.contentWindow.postMessage(msgObj, '*');
}
  1. Protocol to receive License Profile JSON.
// add following code-block to Portal UI
function licenseProfileMsgListener(event) {
    // message listener
    if (event.data.key === 'output') {

        // incoming event.data object has key and value properties
        //   - "key": "output" - identifies output from license profile editor iframe
        //   - "value": JSON data value

    } else if (event.data.key === 'action') {

        // incoming event.data object has key and value properties
        //   - "key": "action" - identifies action request from license profile editor iframe
        //   - "value":
        //      - possible value(s) 'cancel'

        if (event.data.value === 'cancel') {
            // TODO decide what to do on CANCEL
        }
    }
}
  1. Sample HTML iframe code block.
<iframe id="license-profile-editor-iframe"
        src="http://<<HOST>>:8089/license-profile-editor/index.html?mode=iframe"
        frameborder="0" style="width: 100%; height: 100%;"
        onload="initOnLoad();"></iframe>