Enhance Dashboard Visualization on the Platform by Embedding Grafana Dashboards

[caiolombello]

Integrate Grafana dashboards directly into the platform's entity pages to provide a seamless and integrated user experience. Currently, users need to click a link to view Grafana dashboards, which redirects them away from the platform. By embedding dashboards using an iframe, users can view the data directly on the platform page, eliminating the need for external navigation and enhancing usability.

Objective: Enable the embedding of Grafana dashboards within the platform using the Grafana plugin for Backstage. This will allow dashboards to be displayed as an "overview" on the entity's page, making it easier for users to access relevant metrics and data without leaving the platform.

Reference:

• Grafana Dashboard Embedding Guide: Embed Dashboards on a Component Page

Tasks:

1. Modify the Entity Page to Embed Grafana Dashboards:

   • Update the EntityPage.tsx file to include the EntityOverviewDashboardViewer component. This component will render the Grafana dashboard directly on the entity's page using an iframe.

   • Example modification:

     import {
     EntityGrafanaDashboardsCard,
     } from '@k-phoen/backstage-plugin-grafana';
     
     const overviewContent = (
     <Grid container spacing={3} alignItems="stretch">
      <Grid item md={6}>
        <EntityAboutCard variant="gridItem" />
      </Grid>
     
      <Grid item md={6}>
        {/* Grafana overview dashboard embed start */}
        <EntityOverviewDashboardViewer />
        {/* Grafana overview dashboard embed end */}
      </Grid>
     
      <Grid item md={4} xs={12}>
        <EntityLinksCard />
      </Grid>
      <Grid item md={8} xs={12}>
        <EntityHasSubcomponentsCard variant="gridItem" />
      </Grid>
     </Grid>
     );

2. Configure Grafana Dashboard URLs:

   • Ensure that each entity has an annotation defining the Grafana dashboard URL to be embedded. For example:

     apiVersion: backstage.io/v1alpha1
     kind: Component
     metadata:
     annotations:
      grafana/overview-dashboard: 'http://grafana/d/qSfS51a4z/some-dashboard?orgId=1&kiosk'
     name: my-entity
     namespace: default
     spec:
     # …

3. Configure Grafana to Allow Embedding:

   • Modify the grafana.ini configuration file to allow embedding by setting the following parameters:

     [security]
     allow_embedding = true
     cookie_samesite = none

   • Warning: Ensure you understand and accept the security implications of enabling these settings, as embedding dashboards can expose Grafana to potential risks.

4. Test the Integration:

   • Verify that the Grafana dashboards are correctly embedded on the entity pages.
   • Ensure that the dashboards display the expected data and are fully functional within the iframe.
   • Test the user experience to confirm the seamless integration and improved accessibility of metrics directly within the platform.

By implementing these changes, the platform will provide a more cohesive and user-friendly experience, allowing for efficient monitoring and analysis of key metrics without leaving the application.