How do i embed Azure data explorer dashboards on a web page

Domnic Christy Bakkianathan 5 Microsoft Employee

Hi All, I had followed the article at https://learn.microsoft.com/en-us/azure/data-explorer/kusto/api/monaco/host-web-ux-in-iframe#related-content to try embedding an Azure data explorer dashboard on a web page (ASP.NET web app with aspx page). I am able to get the access token and was able to follow the instructions, The WEB UI for Azure data explorer loads on the iframe in the page, but however the dashboard does not load. It throws an unknown error. Am i missing anything here. Can you please help here.

 string dashboardId = "<my dashboardid>";
            string cluster = "<my cluster>";
            IConfidentialClientApplication app = ConfidentialClientApplicationBuilder
                .Create(_appid)
                .WithClientSecret(_secretvalue)
                .WithAuthority(new Uri(String.Concat("https://login.microsoftonline.com/", _TenantId)))
                .Build();
            string[] scopes = new string[] { $"https://api.kusto.windows.net/.default" };
            var result = app.AcquireTokenForClient(scopes).ExecuteAsync().Result;
            
            string accessToken = result.AccessToken;
          
            return $"https://dataexplorer.azure.com/dashboards/{dashboardId}?accessToken={accessToken}&f-IFrameAuth=true&f-UseMeControl=false";

Please find the error am seeing below. Any pointers would be greatly appreciated. Thanks for the help Screenshot 2024-01-22 180132

ShaikMaheer-MSFT 38,126 Reputation points Microsoft Employee

2024-01-24T10:36:44.0066667+00:00

Hi Domnic Christy Bakkianathan, Thank you for posting query in Microsoft Q&A Platform.

As per this document, to embed dashboard, we need to follow steps in Web Client (JavaScript) authentication and authorization.

Could you recheck once with examples there and see ?
Dominic Bonar 5 Reputation points Microsoft Employee

2024-01-24T21:43:40.43+00:00
I am also in the middle of this search and have arrived at the same point as you but with SPA authentication, also using MSAL. The only example I can find is a repo here https://github.com/Azure/azure-kusto-webexplorer-embedding. Try cloning the repo.

In auth.js replace appId, tenantId. In return statement, update "class" to "className"

in app.js replace the iframe config with your own dashboard details

And even in this case it is not the dashboard getting embedded, it's the ADX web UI with the ability to navigate to dashboards tab, which is not the goal here. The "Embed dashboards" section in the link you posted is what I followed at first as well, but step 11 requires adding a service principal ID (that ID is RTD Metadata Service in Entra), which requires I think either global admin or application admin privileges to execute. This is a permission that neither I nor anyone I know has. Confusing why this is a step in the doc. It does not seem required to get the dashboard into an iframe.

In the meantime try removing "/{dashboardId}" from your return string, which may get you to the general dashboards page, still needing to choose which one to view.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Share via

How do i embed Azure data explorer dashboards on a web page