Developer Portal - App Analytics - Improved UX with HightCharts & Dashboard like view - A custom module

Google Cloud Apigee Knowledge Hub
1

Hello Apigeeks,

If you are using Developer Portal, You might have seen App Analytics page that looks like below out of the box.

4672-new-apigee-site-mockapp.png
4672-new-apigee-site-mockapp.png2608×1154 117 KB

It’s less intuitive when it comes to viewing different analytics using out of the box form & select box. I feel, A dashboard like UI similar to edge analytics will definitely help in improving the user experience. I have a built a custom module that showcases how you can extend out of the box analytics dashboard in Apigee Developer Portal & Improve the UX using highcharts.

Few improvements which i thought will help App Developer Experience,

  • Looks & Feel similar to Apigee Edge Analytics Dashboard
  • Ability to zoom in the time line
  • Dashboard like view with different widgets like Traffic, Errors, Total Response time
  • Simple UI with Ability to select historic dates.

4673-developer-portal-apptest-app-analytics.png
4673-developer-portal-apptest-app-analytics.png1930×1508 130 KB

You can find the module source code here, https://github.com/anil614sagar/apigee-devportal-analytics-ui

Installation Instructions :

  • Download above repository code
  • Copy folder “apigee_developer_app_analytics” into “sites/all/modules/custom”
  • Enable the module from “admin/modules” page in Developer Portal as administrator.

Please feel free to share your feedback / queries using comments below.

3 Likes
2

5149-analytics.jpg
5149-analytics.jpg937×513 26.8 KB

I am able to see only Total Response Time graph.Traffic and Errors graph are not visible after adding custom modules.Please help.

3

how to add new graph like Transaction per secound(tps) in php code shared?

1 Like
4

Hi i tried this but i see nothing.. it’s just blank

5

@Nitin_983650 ,

Above issue with missing Traffic and Errors graphs when you pick data has been fixed. Please take updated code from here.

Hope it helps.

6

@Nitin_983650 , Need some custom coding & extending the Apigee Management PHP SDK, Little bit of Drupal Expertise to achieve what you are looking for.

Some pointers, see .module code in above github. Also, You need to make sure it doesn’t raise invalid metric error from SDK. profiles/apigee/libraries/mgmt-api-php-sdk/Apigee/ManagementAPI/DeveloperAppAnalytics.php - getMetrics function. You need to override above getMetrics in custom module.

7

@Anvi , It should work, I have just tested. Make sure the env matches with traffic in App Setting screen & You got the traffic for app.

8

Hi @Anil Sagar

I checked the logs… this is what I see

Notice: Undefined variable: tabs in _devconnect_developer_app_analytics_detail() (line 78 of /var/www/html/sites/all/modules/custom/apigee_developer_app_analytics/apigee_developer_app_analytics.module).

any ideas?