1. Using Integration Insight in Oracle Integration Generation 2
  2. Embed Insight Dashboards in Other Applications
  3. Embed Insight Dashboards As Custom Web Components In External Applications

Embed Insight Dashboards As Custom Web Components In External Applications

In addition to viewing dashboards within Oracle Integration, you can embed Insight custom web components in other external applications to render real-time Insight dashboards at runtime.

Note:

Embedding Insight dashboards as custom web components in other applications has been deprecated and will no longer be supported in future releases. Instead, embed dashboards using the other supported methods:

Insight custom web components, built using Oracle JET Composite Component Architecture (CCA), can be bundled with native web applications and embedded as custom HTML elements.

One of the key advantages of this approach is that there is no need for Single Sign-On (SSO) synchronization between Oracle Integration and the web application. Custom web components use an OAuth token to access Insight dashboards.

To embed Insight dashboards in other applications as custom web components:

  1. Contact Oracle Support for the oic_ui_components.zip file containing the Insight custom web components. Unzip the file to oic-host/ic/home or a directory on your local drive.

  2. Create a trusted client application that represents the external application in OIC-IDCS to generate an OAuth token. Copy the client_id, client_secret, scope, and grant_type.

    For more information, see Configure a Trusted Application to Authenticate with OAuth (replacing the Oracle Integration instance with the external application) in REST API for Oracle Integration.

  3. In the external application, make a REST call to the IDCS API to fetch the OAuth token by passing the client_id, client_secret, scope, and grant_type. Make sure that client_id and client_secret are passed securely to the IDCS REST API.

    For more information, see Generate Access Token and Other OAuth Runtime Tokens to Access the Resource in REST API for Oracle Identity Cloud Service.

  4. Create the JavaScript (*.js) file that describes the custom web components.

    For example:

    let VERSION = '1.0';
let MINIFIED = true;
let RESOURCE_URL = 'OIC_URL/ic/home';
 
require([RESOURCE_URL + '/cca-config.js'], function (config) {
    config.configPaths(RESOURCE_URL + '/resources/js', VERSION, MINIFIED);
 
    require(['integration.cca, 'manifest-integration.suite.home'],
        function (app) {
            let ko = app.libko();
            app.start(true, this, document.body);
        });
});

    where:

    • OIC_URL is the Oracle Integration host URL (where Oracle Integration is running).
    • RESOURCE_URL is a URL in the format OIC_URL/ic/home or the location where you have saved the Insight custom web components (contact Oracle Support for the oic_ui_components.zip file).
    • VERSION is the custom web component library version. By default, this value is 1.0.
    • MINIFIED is a Boolean value:
      • true loads the minified version of the custom web component library
      • false loads the debug version of the custom web component library

      By default, this value is true.

  5. Edit the HTML for the page where you want to embed the dashboards as follows:
    • Include the paths to the *.css and *.js files.
    • Enter the parameter values that describe the dashboards you want to embed.

    For example:

    <html>
<head>
    <link rel="stylesheet" href="OIC_URL/resources/js/node_modules/@oracle/oraclejet/dist/css/alta/oj-alta-min.css">
    <script data-main="main.js"" src=" OIC_URL/resources/js/node_modules/requirejs/require.js"></script>
</head>
 
<body>
    <oj-oic-insight-dashboard console="CONSOLE_ID" oicurl="OIC_URL" token="TOKEN" OTHER_PARAMS>      
    </oj-oic-insight-dashboard>
</body>
</html>

    where:

    • CONSOLE_ID is the ID of the associated console for the dashboard(s) you want to embed, as specified in the console manifest.
    • OIC_URL is the Oracle Integration host URL (where Oracle Integration is running).
    • TOKEN is the OAuth access token.
    • OTHER_PARAMS are described below.
  6. Host the application to render the Insight dashboards on the HTML page where they are defined.

Refer to the following sections for the parameters specific to each dashboard:

Preconfigured and Custom Dashboards

The following parameters can be used to describe the preconfigured and custom dashboards to be embedded in another application and the transactions to be shown in those dashboards.

Example: 
<oj-oic-insight-dashboard console="InsightAPIM_giqndguH" oicurl="OIC_URL" token="TOKEN" views="Milestone_Summary_Diagram"> </oj-oic-insight-dashboard>
Parameter Description Values/Syntax Example
console Required. The ID of the associated console for the dashboard(s), as specified in the console manifest. "console-id" console="InsightAPIM_giqndguH"
views Required. A comma-separated list of dashboard IDs, as specified in the console manifest. "dashboard-id1,dashboard-id2,… ,dashboard-idn" views="PieChart123,milestone_History_Bar"
header

Optional. When set to true, each embedded dashboard includes a header showing the name of the dashboard. For example, Milestones Summary.

Default: false

 true | false header=true
height Optional. The desired height of the dashboards, in pixels. Minimum value (default): 350 "integer" height="350"
layout

Optional. A comma-separated list of the number of dashboards to be rendered for each row.

Default: 1 (vertical single-column layout).

"number-dashboards-in-1st-row,number-dashboards-in-2nd row, …,number-dashboards-in-nth-row" layout="4" displays 4 dashboards in one row:
Embedded dashboards with layout="4"

layout="2,2" displays 2 rows with 2 dashboards per row:
Embedded dashboards with layout="2,2"

layout="1,3,2" displays 3 rows with 1 dashboard in the first row, 3 in the second row, and 2 in the third row:


Embedded dashboards with layout="1,3,2"
timezone

Optional. Time zone offset from Greenwich Mean Time (GMT) to be shown with the dashboards.

Default: Host computer time zone.

"GMT+|-xx:xx" timezone="GMT+05:30"
Filter Parameter Description Values/Syntax Example
fromStartDate

toStartDate

Optional. Dashboards show business transactions started during the specified date range.

Valid only if startTimeWindow is not specified.

filters: {fromStartDate="yyyy-MM-dd HH:mm:ss",toStartDate="yyyy-MM-dd HH:mm:ss"}

filters: {fromStartDate="2020-08-22 16:19:37",toStartDate="2020-08-17 16:19:37"}

startTimeWindow

Optional. Dashboards show business transactions started within the last x days, where a day is the current time minus 24 hours.

Default: 5

Valid only if fromStartDate and toStartDate are not specified.

filters: {startTimeWindow="integer"} filters: {startTimeWindow="4"}
fromEndDate

toEndDate

 Optional. Dashboards show business transactions completed during the range between fromEndDate and toEndDate. Specify the start and end dates of the range.

Valid only if endTimeWindow is not specified.

filters: {fromEndDate="yyyy-MM-dd HH:mm:ss",toEndDate="yyyy-MM-dd HH:mm:ss"} filters: {fromEndDate="2020-08-22 16:19:37",toEndDate="2020-08-17 16:19:37"}
endTimeWindow

Optional. Dashboards show business transactions ended within the last x days, where a day is the current time minus 24 hours.

Valid only if fromEndDate and toEndDate are not specified.

filters: {endTimeWindow="integer"} filters: {endTimeWindow="6"}
Duration:

MinInstExecDuration

MaxInstExecDuration

Time Unit:

InstExecDuration

Optional. Dashboards show business transactions that completed in the specified length of time.

Specify MinInstExecDuration and MaxInstExecDuration duration values as integers, and specify time unit values as a comma-separated list of two value where the first value is the time unit of the MinInstExecDuration (start) value and the second value is the time unit of the MaxInstExecDuration (end) value.

filters: {MinInstExecDuration="integer",MaxInstExecDuration="integer",InstExecDuration="startTimeUnit,endTimeUnit"}

where valid startTimeUnit and endTimeUnit values are: Seconds | Minutes | Hours | Days

filters: {MinInstExecDuration="1",MaxInstExecDuration="2",InstExecDuration="Minutes,Hours"}

filters those transactions that completed within the duration of 1 minute to 2 hours
status

Optional. Dashboards show business transactions that are in the specified status(es) at the time the dashboard is rendered.

Specify statuses as a comma-separated list of values.

Default: ALL

filters: {status="status1,status2, …, statusn" | "ALL"}

where valid status values are:

RUNNING | COMPLETED | RECOVERABLE | FAILED

 filters: {status="RUNNING,COMPLETED,RECOVERABLE"}
anyMilestones

lastMilestones

Optional. Dashboards show business transactions that have passed any of the milestones specified by anyMilestones, or most recently passed the milestones specified by lastMilestones.

Specify milestones as a comma-separated list of milestone IDs, as specified in the console manifest.

Default: ALL

 filters: {parameter="milestone-id1,milestone-id2, …, milestone-idn" | "ALL"}

filters: {anyMilestones="API_START_IthAGqTx,API_STANDAR_TbJajNFt"}

filters: {lastMilestones="API_START_IthAGqTx,API_STANDAR_TbJajNFt"}
For indicators of type string:

indicator-id

 Applies only to custom dashboards.

Optional. Dashboards show business transactions where the specified indicator has the specifed value.

filters: {indicator-id="value"}

where value is any valid string value | ALL

 filters: {City="Bangalore"}

In this example, the indicator is a dimension with ID City of string data type.

For indicators of type decimal, integer, or float:

minindicator-id

maxindicator-id

 Applies only to custom dashboards.

Optional. Dashboards show business transactions where the specified indicator is in the specified range.

filters: {minindicator-id="value",maxindicator-id="value"}

where value is any valid decimal, integer, or float value | ALL

 filters: {minOrderAmount="11",maxOrderAmount="11.4"}

In this example, the indicator is a measure with ID OrderAmount of float data type.

For indicators of type date:

fromindicator-id

toindicator-id

 Applies only to custom dashboards.

Optional. Dashboards show business transactions where the value of the specified indicator is in the specified date range.

filters: {fromindicator-id="yyyy-MM-dd HH:mm:ss",toindicator-id="yyyy-MM-dd HH:mm:ss"} filters: {fromOrderDate="2020-08-22 16:19:37",toOrderDate="2020-08-17 16:19:37"}

In this example, the indicator is a measure with ID OrderDate of date data type.

Business Transactions Dashboard

The following parameters can be used to describe the business transactions to include in the dashboard to be embedded in another application.

Example: 

<oj-oic-insight-transactions console="InsightAPIM_giqndguH" oicurl="OIC_URL"
            token="TOKEN"> </oj-oic-insight-transactions>
Parameter Description Values/Syntax Example
console Required. The ID of the associated console for the business transactions, as specified in the console manifest. "console-id" console="InsightAPIM_giqndguH"
header

Optional. When set to true, the embedded dashboard includes a header showing the number of business transactions, followed by the term defined as the Business Transactions Label when the model was created. For example, 523 Orders.

Default: false

 true | false header=true
Filter parameters See filter parameters for Preconfigured and Custom Dashboards.

Business Transaction Details Dashboard

The following parameters can be used to describe the business transaction details to be embedded in another application.

Example: 
<oj-oic-insight-transaction-dashboard console="InsightAPIM_giqndguH" oicurl="OIC_URL" token="TOKEN" type="details" transaction-id="1234"> </oj-oic-insight-transaction-dashboard>
Parameter Description Values/Syntax Example
console Required. The ID of the associated console for the business transaction, as specified in the console manifest. "console-id" console="InsightAPIM_giqndguH"
transaction-id Required. The ID of the business transaction.

You can find this ID in the row for the business transaction in the Business Transactions Dashboard.

"transaction-id" transaction-id="1224"
type Required. For a business Business Transaction Details dashboard, set this value to "details" "details" type="details"
header

Optional. When set to true, the embedded dashboard includes a header showing the unique instance identifier name and value for the business transaction. For example, Order Number 4566.

Default: false

Example

When header=true, the header shows the unique instance identifier name and value for the current business transaction:


Business Transaction Details dashboard for a completed (successful) business transaction showing default header
 true | false header=true

Progress Tracker Dashboard

The following parameters can be used to describe the progress tracker to be embedded in another application.

Example: 
<oj-oic-insight-transaction-dashboard console="InsightAPIM_giqndguH" oicurl="OIC_URL" token="TOKEN" type="progress" transaction-id="1234"> </oj-oic-insight-transaction-dashboard>
Parameter Description Values/Syntax Example
console Required. The ID of the associated console for the business transaction, as specified in the console manifest. "console-id" console="InsightAPIM_giqndguH"
transaction-id Required. The ID of the business transaction.

You can find this ID in the row for the business transaction in the Business Transactions Dashboard.

"transaction-id" transaction-id="1224"
type Required. For a progress tracker dashboard, set this value to "progress" "progress" type="progress"
header

Optional. When set to true, the progress tracker dashboard includes a header showing the name of the console and the ID of the business transaction.

Default: false

Example

When header=true, the header shows the name of the console and the transaction ID:


Progress tracker dashboard for a completed (successful) business transaction showing default header
 true | false header=true
showid

Optional. The ID of an indicator to teplace the default business transaction ID in the header with the indicator value. Exposed only if header=true.

Example

When showId="ShippingState", the header shows the value of indicator ShippingState:


Progress tracker dashboard for a completed (successful) business transaction showing custom header
 "indicator-id" showId="NewPlanType"

The value of the NewPlanType indicator is show in the header.

animate

Optional. Displays the progress tracker as a live animation that overlays each blue segment with a green segment to visualize passed milestones. Specify a value to control the speed of the overlay animation in milliseconds.

Default: 0 (no animation).

"integer" animate="500"