<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1110556&amp;fmt=gif">
Skip to content
    September 18, 2023

    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.

    ESD_FY23_Academy-Blog.Embedding DX Dashboards in APM and DX Operational Intelligence.Figure 1

    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

    ESD_FY23_Academy-Blog.Embedding DX Dashboards in APM and DX Operational Intelligence.Figure 2

    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.

    ESD_FY23_Academy-Blog.Embedding DX Dashboards in APM and DX Operational Intelligence.Figure 3

    For more information, view these Technical Documentation articles.

    ESD_FY23_Academy-Blog.Embedding DX Dashboards in APM and DX Operational Intelligence.Figure 4 ESD_FY23_Academy-Blog.Embedding DX Dashboards in APM and DX Operational Intelligence.Figure 5

    DX Application Performance Management GarbageCollector (GC) Monitor

    Tag(s): AIOps , DX OI , DX APM

    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 posts you might be interested in

    Explore the Catalog
    May 20, 2024

    Monitoring vCenter with AIOps and Observability from Broadcom

    Read More
    May 3, 2024

    Infrastructure Observability Can Help Navigate Cloud Repatriation

    Read More
    April 29, 2024

    Universal Monitoring Agent: A Powerful, Flexible and Innovative Approach to Monitor Modern Apps

    Read More
    April 16, 2024

    DX UIM 23.4: Improved Zero-Touch Monitoring, Updated MCS Architecture

    Read More
    April 2, 2024

    Six Tips to Reduce Noise in IT Operations

    Read More
    January 11, 2024

    Upgrade to DX UIM 23.4 During Broadcom Support’s Designated Weekend Upgrade Program

    Read More
    January 9, 2024

    DX UIM 23.4 Sets a New Standard for Infrastructure Observability

    Read More
    December 29, 2023

    Leverage Discovery Server for DX UIM to Optimize Infrastructure Observability

    Read More
    December 29, 2023

    Installation and Upgrade Enhancements Delivered in DX Platform 23.3

    Read More