Embedding DX Dashboards in APM and DX Operational Intelligence

As connected as the world is today, it can feel quite disconnected, especially in IT. Individual teams use various tools, each with specialized interfaces and dedicated dashboards, to present or interpret data each the specific functional team needs.

For AIOps and Observability from Broadcom (spanning application, infrastructure, network, customer experience and other functional domains), there’s a simple solution to ‘develop once – use many times’ and build interactive and intuitive customized interfaces and dashboards that benefit many groups.

Have you ever wanted to expose re-usable visualization elements, custom functionality or menu options from DX Dashboards to make them available to users of DX Application Performance Management, DX Operational Intelligence?

Now you can –using simple but powerful widgets exposed from DX Dashboards and embedded in DX Application Performance Management (APM), DX Operational Intelligence or other applications used by IT operations, by application or digital service teams or even by business stakeholders.

Example of iFrames Embedded in an Internal Use Dashboards

The capability to embed DX Dashboards for APM and DX Operational Intelligence uses iFrames (inline frames) which are simple to create, share and maintain. A common use case for iFrame widgets is to embed custom functionality from internal systems to provide functionality that is not available directly. A few candidate items to embed include:

• Menu options
• Data dashboards
• Timesheets and scheduling

With the iFrame widget, the possibilities are endless.

In the example covered below, I take DX Dashboards as a reference but the same approach can be applied to other applications as well.

What and how

Within DX Dashboards, you can write custom queries against data –aggregated from multiple data stores across IT operations, in the AIOps solution from Broadcom. For example, you may want to write a complex query against application-, infrastructure or network monitoring data or some complex combination of them. You can then display the query results as graphs, charts, tables etc. The iFrames widget supports both out-of-the-box (OOTB) or customized visualizations and will display the results in APM or DX Operational Intelligence with thresholds and transformations already applied.

Where to start

As a result of code changes implemented  in DXD to support embedding, two configuration settings must be updated to consume or embed DX Dashboards. These DXD environment variables should be set as follows:

1. DXI_ALLOWED_ORIGINS should have the parent origin (such as APM/DX Operational Intelligence) whitelisted
2. GF_SECURITY_ALLOW_EMBEDDING should be set to True

Note: These changes to embed DXD in DX Operational Intelligence and APM are implemented by default for SaaS and on-premises deployments.

Why: benefits for IT

• Reusability of visualization framework across products, thereby decreasing the development work
• Turnaround time to build new UI requirements
• Easily embed the dashboards in context of the user, for both APM and DX Operational Intelligence

iFrames Schematic

Primary steps for embedding DX Dashboards

Allow iFrames

iFrames should be used only when both parent and child applications are known. In order to allow an application to open in an iFrame, "X-Frame-Options" need to be allowed.

An environment variable, allow_embedding set to True, addresses this requirement in DXD.

Authentication requirements to be met

For authentication purposes, both parent and child applications must use (or honor) the same session cookie for authentication.

DX Dashboard supports platform-level authentication. To embed iFrames within DX Dashboard, both the source application and DXD must support the same session cookie authentication so that session cookie authentication can be embedded in applications which also support authentication using the session cookie.

Whitelist origins

1. For cross-origin communication, browsers throw a Cross Origin Resource Sharing (CORS) error until origins are whitelisted and added in header 'Access-Control-Allow-Origin'.

   Using wildcards (*) for 'Access-Control-Allow-Origin would allow access for all domains and would fail to provide necessary restrictions. To grant access for specific, internal domains, add the header. Access-Control-Allow-Origin, and use middleware with the proper list of whitelisted origins.

   The wildcard “*” is not supported for whitelisting for both security reasons and because credentials cannot be passed if the value of this header includes “*”.

2. Also needed to set the Access-Control-Allow-Credentials header to True.

APM/DX Operational Intelligence homepage

1. Need to send the correct headers in request including "credentials": "include"
2. A session cookie with the same domain must be present.

Note: For APM and DX Operational Intelligence (both SaaS and on-premises deployments), these steps are implemented by default.

Additional benefits

• Improves user experience by reusing DX Dashboards capabilities and maintaining context of the user while displaying the data/information in different visualizations

• Quick turnaround - considerably reduces the development cycle efforts

• Ease of Maintenance - Common frameworks be selected and used across all products, since selection of library for a huge list of third party packages available in itself is a challenging task. Also new changes will be reflected automatically.

• These capabilities can also be used to persist the embedded dashboards view at user level or at tenant level.

• Vulnerabilities and upgrades can be managed at a centralized location.

Security best practices

To address security risks associated with iFrames, follow these best practices.

• Authentication and authorization approaches used by the parent must also be used by DX Dashboards.
• Adhere to whitelisting instructions (noted above). DX Dashboards is configured by default to allow consumption only of whitelisted origins for the iFrame widget.
• The hosted site must use HTTPS – Interact. Browsers will therefore require any sites hosted in an iFrame to also be served over HTTPS.

Summary

Using iFrames to embed DX Dashboards within APM and DX Operational Intelligences extends the value of the solution to your users, and provides a convenient bridge between IT teams and with business stakeholders.

Following the steps outlined above, the parent application will load the embedded DX Dashboard application and display the relevant information, with the relevant context, so it appears as part of the parent application.

Below are two DX Dashboard screenshots. The first shows an embedded iFrame for service details dashboard within DX Operational Intelligence.  The second shows the service overview dashboard embedded iFrame, with service overview context, within the Metric Viewer of APM.

For more information, view these Technical Documentation articles.

• DX Dashboards
• Embed DX Dashboards
• Embedding DX Dashboards in APM - Metric View

DX Application Performance Management GarbageCollector (GC) Monitor