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:
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.
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.
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:
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
iFrames Schematic
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.
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.
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 “*”.
Also needed to set the Access-Control-Allow-Credentials header to True.
Note: For APM and DX Operational Intelligence (both SaaS and on-premises deployments), these steps are implemented by default.
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.
To address security risks associated with iFrames, follow these best practices.
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 Application Performance Management GarbageCollector (GC) Monitor