How to connect Azure Media Player statistic info to Power BI embed

Architect

This User Story requires the following steps:

1. Get video playback data.
2. Submit the data to global Azure AI service via JavaScript.
3. Verify that we can see the video playback data in the Azure portal.
4. Get the data from global Azure AI service to Power BI.
5. Use Power BI Embed to display the data in our web page.
6. Add a filter to your embed dashboard to only display current tenant data.

KPI for video paly (per video, per user) Reporting (Application Insights + Power BI)

Document about Application insights custom events upload: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-usage-overview#custom-events

Document about the AMP Application Insights plugin is here: http://amp.azure.net/libs/amp/latest/docs/PLUGINS.html https://github.com/Azure-Samples/media-services-javascript-azure-media-player-application-insights-plugin

Document about how to connect Application Insights to Power BI is here: https://docs.microsoft.com/en-us/power-bi/service-connect-to-application-insights

Document about how to config Power BI embed is here: https://docs.microsoft.com/en-US/power-bi/developer/embed-sample-for-customers https://github.com/Microsoft/PowerBI-JavaScript

Document about how to add a filter to data is here: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Filters

Setp 1: Get video playback data

Add this code to the user site:.

protected string GetTenantCode()
{
    return HttpContext.Request.Host.ToString().Split('.')[0];
}

And add the tenant code to view model.

Step 2: Submit the data to Azure Application Insights

Make sure you have application insights JavaScript SDK avaliable.

Create a new Application Insights in Azure global. You can get the following code from Azure.

var appInsights = window.appInsights || function (a) {
    function b(a) { c[a] = function () { var b = arguments; c.queue.push(function () { c[a].apply(c, b) }) } } var c = { config: a }, d = document, e = window; setTimeout(function ()

    .......

     b("_" + f); var g = e[f]; e[f] = function (a, b, d, e, h) { var i = g && g(a, b, d, e, h); return !0 !== i && c["_" + f](a, b, d, e, h), i } } return c
}({
    instrumentationKey: "xxxxxxxxxxxxxxxxxxxxxx"
});
window.appInsights = appInsights, appInsights.queue && 0 === appInsights.queue.length && appInsights.trackPageView();

Add the following code to view to submit your event to Azure Application Insights.

appInsights.trackEvent("LivePage", {
    Tenant : '@Model.Host',
    PanelId : '@Model.Panel.CodeName',
    PanelTitle : '@Html.Raw(Model.Panel.Title)'
});

Step 3 Sync the data from Application Insights to Azure Blob Storage

Application Insights Connector

The Application Insights Connector for Power BI is a convenient way to connect and show your basic application usage data. At the time of writing this guide, only basic events get plumbed through to Power BI thought his connector. For some users, this may have value and provide a basic overview of the content that is not playback specific.

1. Log into Power BI
2. In the bottom left corner, select GET DATA. If the left pane menu is not expanded, you will see the arrow, which is the button for GET DATA.
3. Under CONTENT PACK SERVICES, select GET under the SERVICES tab.
4. Select APPLICATION INSIGHTS > CONNECT
5. Follow the on-screen wizard to enter your Application Insights resource details. You can find all details about your Application Insights resource from the Azure Portal

30 days of data is retained in Power BI through this connector.

Long term retention dashboards

For longer term retention, and media central dashboards, its important to pull the data source from somewhere that allows for long term retention of data. Application Insights has a feature to continuously export your data into Azure Storage in blobs. Power BI has the ability to use Azure Storage as an input location for a dataset; which can be scheduled to refresh. Power BI can refresh datasets up to 8 time per day for Pro and once per day for free.

Azure Blob Storage

1. Go to your Application Insights resource in the Azure Portal
2. Select SETTINGS > CONTINUOUS EXPORT > ADD
3. Select CONFIGURED to select the data types you want to export. You should at least have CUSTOM EVENTS and METRIC on.
4. Select DESTINATION STORAGE CONTAINER to select or create a new storage container.
5. Select the storage account and add a container with Access Type as blob.
6. Click OK

Note it may take some time for the first export to complete - you will see "awaiting telemetry" as the status. You must wait until the first export is complete to continue.

After doing this step, you will get the json data in Azure blob. An example of the data is here. You need to download the TenantDashboardDataSource.json.

Step 4: Get the data from Azure Blob to Power BI

In order to connect blob storage with Power BI, you will need to use the Power BI Desktop which is available which you can download it here.

1. Open "TenantDashboard.pbix" in the Power BI Desktop tool. It is normal to see "X Something is wrong on one or more fields" for each graph as the data has not yet been added.
2. Select EDIT QUERIES in the HOME menu on the top bar. AMP_data should be selected.
3. Select ADVANCED EDITOR and replace the entire query with the text from "TenantDashboardQueryFromBlob.dax".
   • Make sure to replace AZURESTORAGENAME from the query line Source = AzureStorage.Blobs("AZURESTORAGENAME")to the name of your blob storage
   • Make sure to replace CONTAINERNAME from the query line ampdata = Source{[Name="CONTAINERNAME"]}[Data]to the name of your container in the blob storage

4. Select the SOURCE under APPLIED STEPS and then select EDIT CREDENTIALS

5. Enter your account key which can be obtained from the Azure Portal. Go to your storage account resource, select the keys icon, and then copy the key into Power BI.

6. Select CLOSE AND APPLY in the query editor
7. Click PUBLISH and select destination

You can now view your live report in Power BI where you can modify and share.

Step 5: Embed the data to your own web page

With Power BI Embedded in Azure, you can embed reports, dashboards, or tiles into an application using app owns data. App owns data is about having an application that uses Power BI as its embedded analytics platform. Using app owns data is typically an ISV developer scenario. As an ISV developer, you can create Power BI content that displays reports, dashboards, or tiles in an application that is fully integrated and interactive, without requiring users of the application to have a Power BI license. This tutorial demonstrates how to integrate a report into an application using the Power BI .NET SDK along with the Power BI JavaScript API when using Power BI Embedded in Azure for your customers using app owns data.

Prerequisites

To get started, you need a Power BI Pro account (this account is your master account) and a Microsoft Azure subscription.

1. If you're not signed up for Power BI Pro, sign up for a free trial before you begin.
2. If you don’t have an Azure subscription, create a free account before you begin.
3. You need to have your own Azure Active Directory tenant setup.
4. You need Visual Studio installed (version 2013 or later).

Register an application in Azure Active Directory (Azure AD)

You register your application with Azure Active Directory to allow your application access to the Power BI REST APIs. This allows you to establish an identity for your application and specify permissions to Power BI REST resources.

1. Accept the Microsoft Power BI API Terms.

2. Sign into the Azure portal.

   

3. In the left-hand navigation pane, choose All Services, select App Registrations, and then select New application registration.

   

4. Follow the prompts and create a new application. For apps owns data you need to use Native for the application type. You also need to provide a Redirect URI, which Azure AD uses to return token responses. Enter a value specific to your application (for example: http://localhost:13526/Redirect).

   

Apply permissions to your application within Azure Active Directory

You need to enable additional permissions for your application in addition to what was provided on the app registration page. You need to be logged in with the master account, used for embedding, which needs to be a global admin account.

Use the Azure Active Directory portal

1. Browse to App registrations within the Azure portal and select the app that you are using for embedding.

   

2. Select Settings, then under API Access select Required permissions.

   

3. Select Windows Azure Active Directory and then make sure Access the directory as the signed-in user is selected. Select Save.

   

4. Select Add.

   

5. Select Select an API.

   

6. Select Power BI Service, then select Select.

   

7. Select all permissions under Delegated Permissions. You need to select them one by one to save the selections. Select Save when done.

   

8. Within Required permissions, select Grant Permissions.

   The Grant Permissions action needs the master account to avoid being prompted for consent by Azure AD. If the account performing this action is a Global Admin, you need to grant permissions to all users within your organization for this application. If the account performing this action is the master account and is not a Global Admin, you need to grant permissions only to the master account for this application.

   

Create an app workspace

If you are embedding reports, dashboards, or tiles for your customers, then you have to place your content within an app workspace. The master account must be an admin of the app workspace.

1. Start by creating the workspace. Select workspaces > Create app workspace. This is where you place the content that your application needs to access.

   

2. Give the workspace a name. If the corresponding Workspace ID isn't available, edit it to come up with a unique ID. This needs to be the name of the app, too.

   

3. You have a few options to set. If you choose Public, anyone in your organization can see what’s in the workspace. Private, on the other hand, means only members of the workspace can see its contents.

   

   You can't change the Public/Private setting after you've created the group.

4. You can also choose if members can edit or have view-only access.

   

5. Add email addresses of people you want to have access to the workspace, and select Add. You can’t add group aliases, just individuals.

6. Decide whether each person is a member or an admin. Admins can edit the workspace itself, including adding other members. Members can edit the content in the workspace unless they have view-only access. Both admins and members can publish the app.

   Now you can view the new workspace. Power BI creates the workspace and opens it. It appears in the list of workspaces in which you’re a member. Because you’re an admin, you can select the ellipsis (…) to go back and make changes to it, adding new members or changing their permissions.

   

Embed your content using your application

Follow these steps to start embedding your content to an application.

1. Open up the Web.config file in your application. There are 5 fields you need to fill in to run the application successfully. The clientId, the groupId, the reportId, the pbiUsername and the pbiPassword.

   

   Fill in the clientId information with the Application ID from Azure. The clientId is used by the application to identify itself to the users from which you're requesting permissions. To get the clientId, follow these steps:

   Sign into the Azure portal.

   

   In the left-hand navigation pane, choose All Services and select App Registrations.

   Select the application that you want to get the clientId for.

   

   You should see an Application ID that is listed as a GUID. Use this Application ID as the clientId for the application.

   

   Fill in the groupId information with the app workspace GUID from Power BI.

   

   Fill in the reportId information with the report GUID from Power BI.

   

   Fill in the pbiUsername with the Power BI master user account. Fill in the pbiPassword with the password for the Power BI master user account.

2. Run the application!

   First select Run in Visual Studio.

   

   

Embed your content within your application

Even though the steps to embed your content can be done with the Power BI REST APIs, the example codes described in this article are made with the .NET SDK.

Embedding for your customers within your application requires you to get an access token for your master account from Azure AD. It is required to get an Azure AD access token for your Power BI application using app owns data before you make calls to the Power BI REST APIs.

To create the Power BI Client with your access token, you want to create your Power BI client object which allows you to interact with the Power BI REST APIs. This is done by wrapping the AccessToken with a Microsoft.Rest.TokenCredentials object.

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Microsoft.Rest;
using Microsoft.PowerBI.Api.V2;

var tokenCredentials = new TokenCredentials(authenticationResult.AccessToken, "Bearer");

// Create a Power BI Client object. It is used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
    // Your code to embed items.
}

Get the content item you want to embed

You can use the Power BI client object to retrieve a reference to the item you want to embed.

Here is a code sample of how to retrieve the first report from a given workspace.

A sample of getting a content item whether it is a report, dashboard, or tile that you want to embed is available within the Controllers\HomeController.cs file in the sample application.

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// You need to provide the GroupID where the dashboard resides.
ODataResponseListReport reports = client.Reports.GetReportsInGroupAsync(GroupId);

// Get the first report in the group.
Report report = reports.Value.FirstOrDefault();

Create the embed token

An embed token needs to be generated which can be used from the JavaScript API. The embed token is specific to the item you are embedding. So at any time you embed a piece of Power BI content, you need to create a new embed token for it. For more information, including which accessLevel to use, see GenerateToken API.

Here is a sample of adding an embed token for a report to your application.

A sample of creating an embed token for a report, dashboard, or tile is available within the Controllers\HomeController.cs file in the sample application.

using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
EmbedToken tokenResponse = client.Reports.GenerateTokenInGroup(GroupId, report.Id, generateTokenRequestParameters);

// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
    EmbedToken = tokenResponse,
    EmbedUrl = report.EmbedUrl,
    Id = report.Id
};

This assumes a class is created for EmbedConfig and TileEmbedConfig. A sample of these are available within the Models\EmbedConfig.cs file and the Models\TileEmbedConfig.cs file.

Load an item using JavaScript

You can use JavaScript to load a report into a div element on your web page.

For a full sample of using the JavaScript API, you can use the Playground tool. This is a quick way to play with different types of Power BI Embedded samples. You can also get more Information about the JavaScript API by visiting the PowerBI-JavaScript wiki page.

Here is a sample that uses an EmbedConfig model and a TileEmbedConfig model along with views for a report.

A sample of adding a view for a report, dashboard, or tile is available within the Views\Home\EmbedReport.cshtml, Views\Home\EmbedDashboard.cshtml, or the Views\Home\Embedtile.cshtml files in the sample application.

<script src="~/scripts/powerbi.js"></script>
<div id="reportContainer"></div>
<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";

    // Read report Id from Model
    var embedReportId = "@Model.Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);
</script>

Step 6: Add a filter to your embed Power BI page

Pass the current tenant name to your web page.

Add the following code to your web page.

var filter = {
    target: {
        table: "aicontainer",
        column: "Tenant"
    },
    operator: "In",
    values: ['@Model.TenantName.ToLower()']
};

Add activate your filter:

var config = {
    type: 'report',

    ...

    ...

    filters:[filter]
};
var report = powerbi.embed(reportContainer, config);

You're done. Those steps took me about 16 hours to finish.