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:
- DXI_ALLOWED_ORIGINS should have the parent origin (such as APM/DX Operational Intelligence) whitelisted
- 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
-
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.
APM/DX Operational Intelligence homepage
- Need to send the correct headers in request including "credentials": "include"
- 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 Application Performance Management GarbageCollector (GC) Monitor
Amber Khare
Amber Khare is a Software Architect at Broadcom. He has a deep, diverse background in designing and developing enterprise software solutions while contributing to the open-source software community. Over his 17 year journey, he has worked with companies such as ADP, Headstrong, OpenText and Tech Mahindra.
Other resources you might be interested in
What's Really Happening in Your Branch Office Network?
Fragmented monitoring tools create critical visibility gaps in branch networks. Find out why you need network observability to pinpoint the cause of issues.
Observability and Monitoring Governance (Part 1 of 4)
Find out how strong monitoring governance can help IT teams cut through the noise, see what truly matters, and act with precision.
Observability and Monitoring Governance (Part 2 of 4)
Read this post and discover some of the top downstream benefits of establishing strong monitoring governance. Gain best practices on how and where to start.
DX UIM Hub Interconnectivity and the Benefits of Static Hubs
Find out how using static hubs is a powerful way to enhance observability. Discover when and how to use static hubs, and the benefits they can provide.
Broadcom Recognized as a Leader: Engineering the Future of Service Orchestration
Read this post and see why Broadcom was named a Leader in the 2025 Gartner® Magic Quadrant™ for Service Orchestration and Automation Platforms.
Customer Spotlight: Global Bank MUFG Saves Millions of Dollars
MUFG’s Bruce Frank discusses how the global bank invokes Broadcom's Automated Analytics & Intelligence (AAI) to manage SLAs and ensure regulatory compliance, saving millions of dollars annually.
The "Lighthouse" of Strategy: Guiding Your Organization Through Decision Chaos
Strategic clarity is key. See how strategic portfolio management (SPM) helps align resources and decisions for better business outcomes and ROI.
4 Ways AppNeta Enhances Cost-Focused Cloud Planning
See how AppNeta delivers insights that enable cloud architects to correlate wasted spending with performance degradation and proactively relocate resources.
Automic Automation Cloud Integrations: Azure Functions Agent Integration
Broadcom's Azure Functions Automation Agent lets you easily execute Azure Functions, monitor and manage them with your existing enterprise workload automation, as well as other cloud-native...