Configuring The Dashboard

The Dashboard of the Moesif Developer Portal is powered by Moesif Embedded Templates. This allows charts in Moesif to be displayed within the developer portal. The Developer Comes with some default embedded templates that you will need to set up. Alternatively, you can also change or add more charts as you see applicable for the users of your portal.

Creating and Adding Embedded Templates to the Dashboard

On the Dashboard page of the Developer Portal, users are able to see two charts that are sourced from Moesif: a Live Event log and a Time Series Chart. Both of these help the user to see how their usage is trending and individual details for each call. These charts are actually Moesif Embedded Templates, a feature that you can use to embed Moesif charts into your applications.

We will need to create each of the required charts in Moesif and plug the details into our .env file for the my-dev-portal-api. Let’s look at each step required below.

Create the Live Event Log

In Moesif, click the New button in the top corner of the left-side menu and select Live Event Log. Once the Live Event Log is showing, click the Embed/API button in the top-right corner of the screen. In the Embed/API Access modal, under Select Integration Type select Embed Template. Then, in the Template Name field, give the template a name like “Live Event Log” and click the Dynamic User Id button in the Sandbox Policy section.

After everything is filled out, click Get Embed Code. You’ll then be presented with some embed code that you will need to plug into the .env file.

In the my-dev-portal-api/.env file, you’ll need to add values for MOESIF_MANAGEMENT_TOKEN and MOESIF_TEMPLATE_WORKSPACE_ID_LIVE_EVENT_LOG. The MOESIF_MANAGEMENT_TOKEN comes from the large token highlighted in the example above. The MOESIF_TEMPLATE_WORKSPACE_ID_LIVE_EVENT_LOG value is the shorter string, the workspace id, highlighted at the top of the above image.

MOESIF_MANAGEMENT_TOKEN="your Moesif management token"
MOESIF_TEMPLATE_WORKSPACE_ID_LIVE_EVENT_LOG="workspace ID"

Once the values are plugged in, save the .env file.

Create the Time Series Chart

In Moesif, click the New button again and select Time Series. Once the Time Series is showing, click the Embed/API button in the top-right corner of the screen. In the Embed/API Access modal, under Select Integration Type select Embed Template. Then, in the Template Name field, give the template a name like “Time Series” and click the Dynamic User Id button in the Sandbox Policy section. After everything is filled out, click Get Embed Code. You’ll then be presented with some embed code that you will need to plug into the .env file.

In the my-dev-portal-api/.env file, replace the value for MOESIF_TEMPLATE_WORKSPACE_ID_TIME_SERIES with the workspace id displayed in the Embed Code displayed for the Time Series:

MOESIF_TEMPLATE_WORKSPACE_ID_TIME_SERIES="workspace ID"