Tutorial: Creating Custom API Monitor Dashboards Using Javascript and JSON

API monitoring platforms like API Science provide the means for monitoring the APIs that are critical for your application. With the API Science platform, you can check APIs for uptime and performance each minute, define alerts that will be sent to your team based on the latest status of those APIs, review the performance history of those APIs in both tabular and graphical format, drill down to indiviual API checks, manage your team contacts, and more.

API Science also includes an API that lets you query the results of all of your API checks. This API enables you to create a custom console or dashboard that is tuned explicitly to present the information that is most important for your team — the information that will enable your team to address critical issues as quickly as possible, so that your customers experience as few complete outages, and as minimal incomplete outages, as possible.

API Science’s “Get a Specific Monitor” API Endpoint

In this post, the Get a Specific Monitor API endpoint is used to illustrate how you can build a custom API monitoring dashboard tuned to your team’s needs:

The AJAX Javascript to execute this request looks like this:

This returns JSON similar to this:

Javascript and Custom API Dashboards

Javascript provides the capability for a company whose product is based on APIs to create custom dashboards that show their team the current status of the APIs that are critical for their product. If certain APIs are down, then their product is either down or partially down from the point of view of their customers. Executing a Javascript test can determine the present state of the product.

If the testing is automated using the API Science platform, then a second dimension is added: an historical view of the uptime and availability of all APIs that affect the product’s performance. If you have configured automated API monitoring using your API Science account, and you’ve created an API Science API key, then you can access the historical data for any of your API monitors and create whatever view you require of the status of the APIs that affect your product’s viability.

Javascript provides the opportunity to query an Internet resource, receive a response, then produce an output as a web page or as a component of a web page. This capability provides companies with the ability to create customized web dashboards that provide an overall view of the status of their product as viewed by their customers. API Science adds the capability to view the status of company products as viewed by customers from different locations around the globe, because users can define the query location from which an Internet resource is accessed.

The effect of distance from the queried resource is often underestimated by start-up companies. A study of performance timings for a simple query to the World Bank’s Countries API revealed that a request for a small set of data from different locations around the globe produces very different results.

The effect of distance between the client and the server that is providing the response is far greater than a developer or start-up manager might think. For example, the response time for someone in Tokyo querying a Washington DC API is about 10 times the response time for someone in DC querying that same API. This is why the major Internet companies create data centers across the globe that replicate (though with some delay) what’s happening at their central Silicon Valley data centers.

Using Javascript, a company can attain data from the Internet that is needed for its product, and customize the presentation of that data for its customers.

The API Science API can be utilized, via Javascript, to provide a company’s quality assurance and developer teams the ability to better serve their customers by providing in-depth present-moment and historical API uptime and performance information in whatever format most benefits your company’s needs.

Using JavaScript and JQuery to Access API Monitor Data

The API Science API provides the capability for your custom software to access information about your API monitors. In this section, I describe how you can create a web page that utilizes JQuery and custom JavaScript to bring data pertaining to a specific API monitor into a browser’s Document Object Model (DOM).

Once the data has been drawn into the DOM, you have the capability to design your web page to present the data that suits your organization’s purpose, using AJAX and potentially other protocols.

First, we create an HTML page:

This is a web page that will provide the user with a blank page, since there is no HTML mark-up within the <body> element. But, much more is going on in this page due to the two <script> lines of code.

The “js/jquery-3.2.1.js” line brings the current JQuery JavaScript library into the web page. JQuery is:

a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

The second script utilizes the JQuery Javascript library to access your API Science account and retrieve the information for a specific API monitor.

Here’s the script (with an altered Authorization key, for security):

$.ajax({
  url: "https://api.apiscience.com/v1/monitors/1572022",
  headers: {
    "Authorization" : "Bearer NN_xxxxxxxxxxxx"
  }
}).done(function(data) {
  console.log(data);
});

Here, the script is invoking the JQuery JavaScript script (via $.ajax) to request the information for API Science monitor 1572022, and it’s stating that the returned information should be output on the browser’s console.log page.

Web browsers don’t necessarily have a console log page. For the Firefox browser, the Firebug plug-in provides this capability. With Firebug embedded into your Firefox browser, browsing to this HTML page produces the expected blank web page. But, when you use Firebug to navigate into the DOM, you see:

The user’s web browser DOM contains the data that was requested and retrieved from the API Science monitors API.

Since the information is contained in the browser’s DOM, now all you need to do is to add HTML that will make the information viewable in the manner that best suits your purpose.

Using JQuery and AJAX to Display API Data on a Web Page

I’ve demonstrated how JavaScript and JQuery can be used to make an API call and embed the response into a Document Object Model (DOM) instance. The API is called, the data is retrieved and loaded into the DOM, but in our example as it stands nothing is displayed on the web page.

The next step is to access the API response data and present it on our web page. The discussion in this section illustrates how the API Science API can be utilized to accomplish this, enabling you to develop custom consoles and other applications that address your particular needs.

The HTML

Here’s the HTML file:

It consists of four components:

  • a heading titled “Response Data”
  • a <div> element (which identifies a division or section within an HTML document)
  • a <script> element that integrates JQuery
  • a <script> element that integrates our custom JavaScript code

The <div> element provides an interface through which our custom JavaScript code can modify the web page that is ultimately displayed to the user. The HTML identifies this particular <div> as being the “monitor_data” <div> element. Our custom JavaScript code can interact with this HTML <div> element, and alter its content prior to the presentation of the web page.

Here’s display_monitor_1572022.js:

$.ajax({
  url: "https://api.apiscience.com/v1/monitors/1572022",
  headers: {
    "Authorization" : "Bearer NN_6xxxxx"
  }
}).done(function(data) {
  $('#monitor_data').append(JSON.stringify(data))
});

The “Authorization” data would be your own API Science API key.

This JavaScript calls the API Science API to access the information for monitor ID 1572022. The .done(function(data)) phrase tells the HTML page to turn the JSON response into a string (stringify) and append the result into the monitor_data div element.

Here is an example result returned by this web page and its JavaScript files:

This illustrates that JQuery and JavaScript can be utilized on a web page to query the API Science API, retrieve data, then display the data on a web page that is presented to a user (or customer).

However, the presentation of the data in this example is confusing, as it’s the raw JSON.

Creating Custom Consoles Using API Monitor Data

To make the API response data easily comprehensible, we need additional code that deciphers the raw JSON and creates a web page (or a web page component) that presents the data in a more understandable format.

Here’s how we can accomplish this.

The HTML

We start out with the same HTML used for displaying the raw JSON data, but we add an HTML div element named formatted_data; this will contain the formatted result of data extracted from the raw JSON. Here’s the updated HTML:

The JavaScript

The task of converting the raw JSON into a format that is easily readable by your API monitor team (and, possibly, your customers) is accomplished using JavaScript. Here is the revised JavaScript:

The variable resp contains the raw JSON response text, which is displayed beneath the Response Data HTML header, in the div element named monitor_data. But we want our users to be able to clearly see the specific information that enables them to accomplish their job requirements.

So, this JavaScript code creates variables that parse the JSON text returned by the API Science Monitors API into a set of JavaScript object properties that can be displayed as formatted HTML presented within a div element.

In the example case, we make a variable meta_obj that encapsulates the meta portion of the API response text. This provides knowledge of the status of the last API monitor check (success or failure).

The data_obj variable assignment provides access to all the data beneath the JSON response data header. Beneath this, we also extract the summary and templates JavaScript objects.

The templates object is an array. In the example, there is only one template, so we can safely hard-code templates_obj[0] in this case.

Next, we create the JavaScript variable formatted_html, applying simple titles for the data that was extracted from the JSON by the JavaScript.

Then, we append that HTML into the formatted_data div block.

Here’s an example result:

Conclusion

This tutorial illustrates how you can use the API Science API and JavaScript to create a customized console view of your API monitors for your team. Using the API Science API, you can create an internal site that your team can use to monitor the current status and global availability of your product. If your product suddenly seems unavailable to many of your customers due to any circumstance, your development team needs to know that, so they can respond appropriately. Developing a custom console using JavaScript and the API Science API can enhance your team’s ability to quickly respond to problems.

–Kevin Farnham