PluginDisplayOptions context:

Parameter Name	Parameter Type	Description
displayName	String	The name to show for this plugin in the context area.
displayRoles	List of string	The user roles for which this plugin will be shown. Supported roles are : ADMIN, DESIGNER, TESTER, OPS, GOVERNOR.
displayContext	List of string	A list of contexts in which the plugin will be shown: VFC, VL, CP, VF, PNF, SERVICE.

...

Response Sample

Info

icon	false
title	Response Sample

...

[ { "pluginId": "DCAE",

"pluginDiscoveryUrl": "http://<ip>:8702/openoui/vnfmarket/#!/marketplace",

"pluginSourceUrl": "http:// <ip>:8702/openoui/vnfmarket/#!/marketplace",

"pluginStateUrl": "dcae",

"pluginDisplayOptions": {

"tab": {

"displayName": "DCAE",

"displayRoles": [ "TESTER" ]

},

"context": {

"displayName": "Monitor",

"displayContext": [ "VF", "SERVICE" ],

"displayRoles": ["DESIGNER" ]

}

}, {

"pluginId": "WORKFLOW",

"pluginDiscoveryUrl": "http://<ip>:9527/",

"pluginSourceUrl": "http:// <ip>:9527/",

"pluginStateUrl": "workflowDesigner",

"pluginDisplayOptions": {

"tab": {

"displayName": "WORKFLOW",

"displayRoles": ["DESIGNER","TESTER" ]

},

"context": {

"displayName": "Workflow Designer",

"displayContext": ["VF"],

"displayRoles": ["DESIGNER", "TESTER" ]

}

}]

...

HTTP response codes

Response code	Service/Policy

Exception	Reason /Description
200	n/a	plugin information is returned.

...

Fe server configuration definition

The plugin configuration is used to define the location where the plugin Front-end server is located.

Based on the defined configuration SDC will execute a discovery of the available plugins and provide their information to the SDC UI.

...

The designer configuration is located under {app base}/config/catalog-fe/plugin-configuration.yaml

Field	Type	Description
connectionTimeout	Integer	This is the number of milliseconds, for the head request to wait for a response from the plugin.
pluginsList	List of objects	A list of plugins’s configurations.
pluginId	String	The name of the plugin.
pluginHost	String	The host where the designer is located.
pluginSourceUrl	String	The plugin URL passed to the UI to retrieve the page.
pluginDiscoveryUrl	String	The plugin URL used for the availability check.
pluginStateUrl	String	The plugin state for UI router.
pluginerDisplayOptions	String	We currently support two work modes for plugins: tab – opens the designer as a tab, for this type we need to set displayName field to define what the tab text and the display roles which define what roles will see the plugin. example: tab: displayName: "Workflow Designer" displayRole: [“TESTER”] context – opens the designer as a context, for this type we need to set displayName field, displayRole and define the displayContext in which the plugin will open, options VF/SERVICE/CP/VL/VFC. example: context: displayName: "monitor" displayRole: [“TESTER”] displayContext: ["VF", "SERVICE"]

...

Example

Info

icon	false
title	Example

pluginsList:

- pluginId: DCAE

pluginDiscoveryUrl: <%= @dcae_discovery_url %>

pluginSourceUrl: <%= @dcae_source_url %>

pluginStateUrl: "dcae"

pluginDisplayOptions:

tab:

displayName: "DCAE"

displayRoles: ["TESTER"]

context:

displayName: "Monitor"

displayContext: ["VF", "SERVICE"]

displayRoles: ["DESIGNER"]

- pluginId: WORKFLOW

pluginDiscoveryUrl: <%= @workflow_discovery_url %>

pluginSourceUrl: <%= @workflow_source_url %>

pluginStateUrl: "workflowDesigner"

pluginDisplayOptions:

tab:

displayName: "WORKFLOW"

displayRoles: ["DESIGNER", "TESTER"]

context:

displayName: "Workflow Designer"

displayContext: ["VF"]

displayRoles: ["DESIGNER", "TESTER"]

connectionTimeout: 1000

...

Health Check Integration - TBD

UI Integration

Jira

server	ONAP JIRA
columns	key,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverId	425b2b0a-557c-3c0c-b515-579789cceedb
key	SDC-1568

UI Integration

SDC need to onboard plugins in SDC need to onboard plugins in a way that will be decoupled from the SDC UI implication.

...

The solution chosen was to use IFrame to host the plugins. The iFrame provides a decupled decoupled window that can load any UI content as a separate window. The window contains the Html JS and CSS in such a way that they will not interfere with the hosting and hosted application.

...

Iframe initiation

When the iframe Iframe is initiated SDC pass initial information to the Iframe so that the correct plugin screen will be presented. The information will assist the iframe to define the context in which it is currently being opened.

...

In case of a TAB mode, SDC will pass the logged in user.

Param	Description
userId	The id of the user logged into SDC
userRole	The role of the connected user, options ADMIN, DESIGNER, TESTER, OPS, GOVERNOR.
displayType	The type of view the plugin is opened in tab/context.
parentUrl	The URL of the SDC the plugin is opened in. used to subscribe to the event bus in SDC.
eventsClientId	The name with which the plugin needs to register with to the event bus.

Info

icon	false
title	Example

http://<IP>:<PORT>/designer?userId=cs0008&userRole=DESIGNER&displayType=tab&parentUrl=http://localhost:9000/&eventsClientId=plugin

Plugin context mod

In case of context mod SDC will pass the following info:

Parm

Param	Description
userId	The id of the user logged into SDC.
userRole	The role of the connected user, options ADMIN, DESIGNER, TESTER, OPS, GOVERNOR.
displayType	The type of view the plugin is opened in tab/context.
contextType	The type of the context where the plugin is opened: VF/CP/VL/VFC/SERVICE
uuid	Unique id of the context the designer is opened in.
lifecycleState	The state the context /resource or service are currently in: READY_FOR_CERTIFICATION/ CERTIFICATION_IN_PROGRESS/ CERTIFIED/ NOT_CERTIFIED_CHECKIN/ NOT_CERTIFIED_CHECKOUT;
isOwner	A Boolean value describing if the logged user is the owner/lastUpdator of the resource/service.
version	The version of the item displayed.
parentUrl	The URL of the SDC the plugin is opened in. used to subscribe to the event bus in SDC.
eventsClientId	The name with which the plugin needs to register with to the event bus.

Info

icon	false
title	Example

http://<IP>:<PORT>/designer?userId=cs0008&userRole=DESIGNER&displayType=context&contextType=VF&uuid= a21af8a1daa948f78e30f9b269a253ba&lifecycleState= NOT_CERTIFIED_CHECKOUT&isOwner=true&version=1.0&&parentUrl=http://localhost:9000/&eventsClientId=plugin

UI communication

UI communication is based on event processing. SDC creates an event bus, any plugin in the system and SDC itself will subscribe to this event bus. Events will be generated according to pre-defined events in the system. Any plugin can subscribe to events that are relevant to them.

...

SDC provides a mechanism to define if there is a need to wait for a response from a plugin or not.

SDC-pubsub library

befor before you can integrate with SDC you will need to add our pubsub librery intop

...

in

...

to your aplication.

SDC

The class will define a set of method that will allow the communication with SDC.

Plugin registration

SDC will expose a base class in JS as part of the SDC UI project. Any plugin will be able to communicate with SDC after they instantiate this class.

The class will define a set of method that will allow the communication with SDC.

3.5.1 BasePubSub API

Base class holding all the basic operations needed for using the event hub.

NPM Repository:

https://www.npmjs.com/package/sdc-pubsub

Info

icon	false
title	Using the librery

Loading It Up

CommonJS

import {PluginPubSub} from 'sdc-pubsub'

Global Variable

<!-- index.html -->
<script src="./node_Modules/sdc-pubsub/dist/sdc-pubsub.js"></script>

// script.js
var pubsub = window.sdcPubSub.PluginPubSub;

Plugin registration

SDC will expose a base class in JS as part of the SDC UI project. Any plugin will be able to communicate with SDC after they instantiate this class.

The class will define a set of method that will allow the communication with SDC.

BasePubSub API

Base class holding all the basic operations needed for using the event hub.

API	Description
constractor(pluginId)	Defines the name of the plugin in the event bus.
register(subscriberId,subscriberWindow,subscriberUrl)	adds the subscriber to the subscriber list.
unregister(subscriberId)	remove the subscriber from the subscriber
API	Description
constractor(pluginId)	Defines the name of the plugin in the event bus.
register(subscriberId,subscriberWindow,subscriberUrl)	adds the subscriber to the subscriber list.
unregister(subscriberId)	remove the subscriber from the subscriber list.
notify(eventType, eventData)	send with post message the data to all the subscriber after creating the data structure(type, actualData, originId). Returns an object with a subscribe function that receives a callback. This call back will be executed when all subscribers completed their actions regarding the event.
on(eventCallback)	add the callback to the eventsCallbacks map.
off(eventCallback)	removes the callback from the eventsCallback map.
onMessage(event)	Protected method, check if the origin is present in the clients list. Executes all the callbacks from the eventsCallback map.

...

map.

Call back definition

Each callback function that will be added to the eventsCallbacks map should have the following signature – callback(eventData, event).

...

event – The JavaScript event object that was received in the onMessage function.

...

PluginPubSub API

the client class for communicating with the hub.

API

Description

constructor(pluginId, perentUrl,eventsToWait)

Defines the communication with the hub.

PluginId: defines the id of the plugin with which it will be recognized this must

corelate

correlate to the id defined in the SDC configuration.

parentUrl: this is the URL of the parent pub sub hub. This is populated based on the input received in the query param.

eventsToWait: this parameter is optional. This defines the events that the plugin wants SDC to wait on before continuing the flow. The regular flow only waits for the call back execution, if the event is defined here sdc will wait for the plugin to respond before continuing the flow.

subscribe(eventsToWait)

The method allows to subscribe again after unsubscribing.
the subscriber method is called automatically during the constructor.

eventsToWait: this parameter is optional. The method is called automatically by executing the contractor. This defines the events that the plugin wants SDC to wait on before continuing the flow. The regular flow only waits for the call back execution if the event is defined here SDC will wait for the plugin to respond before continuing the flow.

unsubscribe()

The method is used to unsubscribe from the hub.

...

EventBusService API

API	Description
constructor()	Defines the name of the hub in the event bus.
handlePluginRegistration(eventData, event)	Protected method, handles registration of plugins to the HUB and their un registration.
unregister(pluginId)	Notifies that a plugin is being closed before unregistering it.
onMessage(event)	Protected method, calls the handlePluginRegistration in case of a plugin register or unregister event while passing the event to its subscribers

3.6 Plugin API Usage examples

This is an example of how plugin should use the API’s defined in SDC event bus.

3.6.1 PluginPubSub class consumption.

The class is part of the SDC-UI. To consume it you will need to add the SDC-UI to your ui package.json so that NPM will be able to pull the package.

Consider refining the import if you do not need all the SDC-UI and just add this class.

...

is being closed before preregistering it.
onMessage(event)	Protected method, calls the handlePluginRegistration in case of a plugin register or unregister event while passing the event to its subscribers

Plugin API Usage examples

This is an example of how plugin should use the API’s defined in SDC event bus.

Plugin initialization

As part of the request SDC does to the plugin to retrieve the index.html we pass query prams.

From the query prams you will need to use eventsClientId this is the id defined which will be passed to the contractor of the class for registration, this allows SDC to understand what plugin is sending the events and parentUrl which is the URL of SDC which is needed to send massages to SDC in a system working cross site.

The seconed second example shows hoe how to set the event the plugin wants sdc to wait for a response.

In this case SDC will continue the flow only after the ACTION_COMPLETED event is recivedreceived.

Code Block

language	js
title	Example

...

eventsClientId=<received from query params>

...


parentUrl=<received from query params>

...


PluginPubSub client = new PluginPubSub(eventsClientId, parentUrl)

Code Block

language	js
title	Example with events to wait for

...

eventsClientId=<received from query params>

...


parentUrl=<received from query params>

...


eventsToWaitFor = [ “CHECK_IN” ]

...


PluginPubSub client = new PluginPubSub(eventsClientId, parentUrl, eventsToWaitFor)

3.6.3 Send ready event

As part of the plugin flow, the plugin will need to send the ready event to SDC so that SDC will know the plugin has loaded successfully.For example:

Code Block

language	js
title	Example

client.notify(“READY”)

...

Listen to events

The plugin will need to define a call back that will be called when an event is triggered in SDC.

The plugin call back can decide using the event type what and if any logic needs to be executed.

For example:

Code Block

language	js
title	Example

client.on((eventData,event) =>

...

 {
      if(eventData.type == ”WINDOW_OUT”)

...

 {
            //do

...

}

)

...

 logic
       }
   }
)

Event Types

The events used in the communication will have the same structure to allow easy use.

...

In this way, new events can be easily added to the system and the event originator can be tracked.

...

Event structure

Info

icon	false

{

type:XXX

originId:YYY

data:{}

}

...

SDC generated events

Name	Type	When	Data	UI state	Description
Window out	WINDOW_OUT	Before SDC closes plugin, The event is sent on all events below except VERSION_CHANGE and check out	none	Moves out of the plugin scope	The event is posted by SDC once the plugin window is going to be closed because of user action.
Version change	VERSION_CHANGE	After SDC retrieves item	New item version and UUID	The plugin is displayed on screen.	The event is posted by SDC once context version is changed by the user.
Check in	CHECK_IN	Before SDC closes plugin	none	SDC opens the catalog.	The event is posted by SDC once the context is being checked by the user.
Check out	CHECK_OUT	After SDC successful checkout the item	New item version and UUID	The plugin is displayed on screen.	The event is posted by SDC once the context is being check out by the user.
Submit for testing	SUBMIT_FOR_TESTING	Before submitting for testing is executed	none	SDC opens the catalog.	The event is posted by SDC once the context is being submitted for testing by the user.
Undo check out	UNDO_CHECK_OUT	After SDC executed the undo check out.	item version and UUID	SDC opens the catalog.	The event is posted by SDC once the context is being undone by the user.

...

Window out event example

Info

icon	false

{

type:WINDOW_OUT

origion:sdc-hub

data:

}

...

Version change even example

Info

icon	false

{

type: VERSION_CHANGE

origion:sdc-hub

data:{

uuid: a21af8a1daa948f78e30f9b269a253ba ,

version:1.1

}

...

Check in even example

Info

icon	false

{

type: CHECK_IN

origion:sdc-hub

data:

}

...

Submit for testing even example

Info

icon	false

{

type: SUBMIT_FOR_TESTING

origion:sdc-hub

data:

}

...

Undo check out even example

Info

icon	false

{

type: SUBMIT_FOR_TESTING

origion:sdc-hub

data: {

uuid: a21af8a1daa948f78e30f9b269a253ba ,

version:1.1

}

3.7.3 Designer events

...

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 3

New Version 4

Key

Response Sample

HTTP response codes

Fe server configuration definition

Example

Health Check Integration - TBD

UI Integration

UI Integration

Iframe initiation

Plugin context mod

UI communication

SDC-pubsub library

Plugin registration

3.5.1 BasePubSub API

NPM Repository:

Loading It Up

CommonJS

Global Variable

Plugin registration

BasePubSub API

Call back definition

PluginPubSub API

EventBusService API

3.6 Plugin API Usage examples

3.6.1 PluginPubSub class consumption.

Plugin API Usage examples

Plugin initialization

3.6.3 Send ready event

Listen to events

Event Types

Event structure

SDC generated events

Window out event example

Version change even example

Check in even example

Submit for testing even example

Undo check out even example

3.7.3 Designer events