Overriding Universal Topology Graphs

Learn how to override Oracle Communications Unified Assurance Universal Topology graphs.

You can override the data itself, for example, to apply custom styling, or the actions that occur when you interact with nodes or vertices on the Universal Topology graph. You can also create custom functions that you can call from topology tools in the UI.

Before overriding Universal Topology, you must be familiar with the following:

The overrides described in this section are specific to Universal Topology. They do not apply to other Unified Assurance UIs.

The class path for controlling the Universal Topology graph view is Graph.graphs.crud.controller.GraphsPanelViewController. The controller file is located in the $A1BASEDIR/www/packages/graph/src/graphs/crud/controller directory.

Overriding Data

To override the data, you can add overrides in the following GraphsPanelViewController methods, which are called at different stages of processing:

You can apply overrides to any of the methods, as relevant to your implementation.

The sample GraphsPanelViewControllerOverride.js available in the sdk-lib package illustrates all three data override types.

Overriding UI Interactions

To override the actions that occur when you interact with nodes or vertices on the Universal Topology graph, you can add overrides in a subset of the Ogma events defined in GraphsPanelViewController. You can add overrides in the following event handlers:

You can use one or more of the handlers as needed to achieve your goals. For example, you could override onKeydown to initiate the Ogma lasso selection tool when a user presses the Ctrl key, onKeyup to end lasso selection, and onBeforeKeydown to prevent the lasso selection from initiating if the mouse is hovering over a node.

In the default GraphsPanelViewController, the click event handlers are structured as follows:

  view.ogma.events.on('click', function(event) {
    if (me.onBeforeClick(event) !== false) {
        me.onClick(event);
        me.onAfterClick(event);
    }
  }, me);

The sample GraphsPanelViewControllerOverride.js available in the sdk-lib package illustrates several UI interaction overrides.

Supported Ogma Event Overrides

You can override the following Ogma events in GraphsPanelViewController:

See Events in the Ogma documentation for more information about these events.

Implementing Custom Functions with Topology Tools

You can create custom functions as overrides and call them from topology tools in context menus in Universal Topology graphs.

  1. Create a custom function in the override file. You can use the following parameters in the function:

    • Vertex:

      • Name

      • VertexID

      • VertexClass

      • Any properties set for the vertex

    • Edge

      • id

      • EdgeClass

      • Any properties set for the vertex

    For example, the sample GraphsPanelViewControllerOverride.js contains overrides that create a pulse effect. To create a tool that clears the pulse effect when selected from the context menu, you would add the following function to the override file:

    clearPulse: function(menuItem) {
    var me         = this,
        view       = this.getView(),
        name       = menuItem.Name,
        id         = menuItem.VertexID;

    if (this.intervalHandlers) {
        let handler = this.intervalHandlers[id];

        if (handler) {
            clearInterval(handler);
            delete this.intervalHandlers[id];

            a1.AN5.toastSuccess(tr('Device') + ' (' + name + ') ' + tr('alarm is reset'));
        }
    }
}

    The example uses the Name and VertexID properties of the selected vertex.

  2. Apply the override as described in Overriding a User Interface

  3. Create a custom topology tool. See Tools in Unified Assurance User's Guide for information about the UI for creating topology tools.

    Set Path Type to Function and specify the custom function name in Path.

    To call the function created in the example, you would set Path to clearPulse.

  4. Add the custom tool to the topology menu. See Menus in Unified Assurance User's Guide for information about the UI for creating topology menus.

Example Universal Topology Overrides

The sdk-lib package includes an example of a Universal Topology override. To review it, after installing the sdk-lib package, open the following file:

$A1BASEDIR/www/ui/customExampleOverrides/controller/GraphsPanelViewControllerOverride.js

The example includes overrides in:

You can deploy this override in your test environment to verify the behavior in the UI. See Overriding a User Interface.