DEV Community

Cover image for How to embed an API debug dashboard in your developer portal
K for moesif

Posted on • Originally published at moesif.com

How to embed an API debug dashboard in your developer portal

Cover image by Stephen Dawson on Unsplash.

You've created dashboards and reports. Maybe you collaborated on them with your coworkers, too. Now you want your customers to have the same visibility into your APIs that your internal team members have. By embedding an API log in your developer portal, you are providing an easy onboarding experience to your customers and easily debug tools that enable them to integrate your API as fast as possible without issues.

What are Moesif workspaces?

The Moesif platform has the concept of public workspaces. These are dashboards created in the Moesif platform just like the ones you created for your internal team members. The largest difference is that public workspaces have automatic constraints to sandbox your data. Data can be sandboxed by fields like the customer's user id or API key. In addition, a user accessing a public workspace does not need to log into Moesif. Instead, they can access the data using the workspace access token or share link.

Moesif supports a variety of workspace types including API event logs, segmentation, time series, heatmaps and more.

Creating a workspace token

Usually, we can create a public workspace from your API data just by logging in, but for this exercise, we want to generate the workspace programmatically via the Management API. This enables you to embed the workspace data right inside customer-facing portals and websites.

First, we need to retrieve a management API token. This key has to be sent via the Authorization header alongside every request.

For this, we need to go to the management API page on the Moesif site.

api-keys.png

On that page, we have to select a scope and click on Generate Token.

In our case of creating workspaces, we only need to select the create:workspaces scope.

Now we will prepare the details to create a public workspace filtered by a specific userId.

# Prepare Request body to create the workspace of all the API calls since last 1 week for the user my_user_id.

# Relative date range lookup
# RELATIVE_RANGES_LOOKUP = {
#   '-1h': { 'label': 'Last hour' },
#   '-24h': { 'label': 'Last 24 hours' },
#   '-1w': { 'label': 'Last 7 days' },
#   '-4w': { 'label': 'Last 28 days' },
#   '-12w': { 'label': 'Last 12 weeks' },
#   '-52w': { 'label': 'Last year' },
# }

body={
    "name" : "Live API Log for an User", # Name of the workspace
    "chart" : {
        "args" : "",
        "url_query" : "?userIdFilter%5B0%5D%5Bkey%5D=my_user_id&userIdFilter%5B0%5D%5Bflag%5D=or", # Encoded URL Query Param, replace my_user_id the with specific user id.
        "view" : "events", # type of chart - events, time, map, segment, table.
        "es_query" : { # Elastic search query to filter data
          "size": 50,
          "from": 0,
          "sort": [
            {
              "request.time": "desc"
            }
          ]
        },
        "from" : "-1w", # Relative start date, refer to relative ranges lookup
        "to" : "now" # Relative end date, refer to relative ranges lookup
    },
    "policy" : { # Restriction on the data to share
        "resource" : {"must":[{"range":{"request.time":{"gte":"now-1w","lte":"now"}}},{"terms":{"user_id.raw":["my_user_id"]}}]}, # Query to restrict search, replace my_user_id with the specific user id.
        "acl" : [ # Access Control List
            {
                "grantee" : "org|<org_id>", # Grant access to the team, Replace <org_id> with your Moesif org_id
                "permission" : "admin" # Assign admin permission to the team
            },
            {
                "grantee" : "public", # Grant access to the public
                "permission" : "read" # Assign read permission to the public
            }
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Now we will create a public workspace and fetch the shareable link.

import requests

# Prepare request headers
headers = {'Accept': 'application/json',
           'Authorization': 'Replace Management token retrieved from the previous step'}

# Create public workspace
def create_public_workspace(body):

  # Request to create a public workspace
  workspace = requests.post('https://api.moesif.com/replay/<org_id>/workspaces',
                          params={ 'app_id': '<app_id>' },
                          headers = headers, 
                          json=body).json()

  # Return public workspace url
  return 'https://www.moesif.com/public/' + workspace['access_token']

# Fetch the shareable link
shareable_link = create_public_workspace(body)
print('Shareable Link - ' + shareable_link)

Enter fullscreen mode Exit fullscreen mode

Note: You could modify the request body based on the filter you require to restrict the data to share.

Embed the workspace in your customer portal

You could embed workspaces in portals or web sites where your users expect to see them. Embed works with any portal or web site that supports embedding content using a URL or an iFrame.


This article was written by Keyur Doshi for the Moesif Blog


Interested in White-labeled workspaces, reach out to Moesif Team to learn more.

Moesif is the most advanced API Analytics platform, supporting REST, GraphQL and more. Over 2000 organizations use Moesif to track what their most loyal customers do with their APIs. Learn More

Top comments (0)