Getting Started with Google Cloud Monitoring

Introduction

This document demonstrates a client-side approach to retrieving monitoring data using the Google JavaScript client library to help you get started with the basics of using the Google Cloud Monitoring API. The OAuth flow used in the examples is a client-side flow that a user grants access to retrieve monitoring data from their project. In your app, you might want to use a service account from a server-side or backend app to aggregate data rather than using JavaScript to perform client-side retrieval or to authorize individual users.

Enable the API

Before you can begin monitoring a project, you must enable the Google Cloud Monitoring API in the Google Developers Console and create a client ID to allow your sample app to connect to the Google APIs. This document assumes you are testing the sample on http://localhost:8080.

1. If you don't already have one, sign up for a Google Account.
2. Enable the Google Cloud Monitoring API in the Developers Console. You can choose an existing Compute Engine or App Engine project, or you can create a new project.
3. On the credentials page in the APIs & Auth section, click Create new client ID. Choose Web application. In the Authorized JavaScript origins enter the host where you will serve this example, for example, http://localhost:8080 . Click Create Client ID.
4. Note the following information in the project that you will need to input in later steps:
   • The client ID (xxxxxx.apps.googleusercontent.com).
   • The project ID that you wish to monitor. You can find the ID at the top of the project's Overview page in the Google Developers Console. You could also ask your user to provide the project ID that they want to monitor in your app.

Now that the API is enabled for your project, you will configure your app to access the REST API on behalf of a user.

Authorize the requests

To access monitoring data for your project, you must use OAuth 2.0 to authorize your application. These examples demonstrate a simple OAuth 2.0 flow using JavaScript that requests authorization on behalf of a user. The user must have owner, editor, or viewer access to the project in the team area of the Google Developers Console. The OAuth 2.0 scope https://www.googleapis.com/auth/monitoring.readonly grants your app access to the Cloud Monitoring API data.

In a real-world app, you might choose to use a service account and backend code to request monitoring data.

Request authorization from the user and get an access token.

The following example demonstrates a simple JavaScript flow using the Google JavaScript Client API to request authorization from the user and get an access token.

<button id="authButton">Authorize</button>
<script type="text/javascript">
var authParams = {
  'response_type' : 'token', // Retrieves an access token only
  'client_id' : 'xxxxxxx.apps.googleusercontent.com', // Client ID from Developers Console
  'immediate' : false, // For the demo, force the auth window every time
  'scope' : ['https://www.googleapis.com/auth/monitoring.readonly']  // Array of scopes
};

function myCallback(authResult){
  if (authResult && authResult['access_token']) {
    // User granted authorization
    // Set the token for later API calls
    gapi.auth.setToken(authResult);
    ... // Next step, load API and query API
  } else {
    // Authorization failed or user declined
  }
}

// Attach a click even to an authorization button. Use clicks to trigger
// the flow so that the pop-up window succeeds.
document.getElementById('authButton').onclick = function(){
  gapi.auth.authorize(authParams, myCallback)
};
</script>

Now that your app has an access token, you are ready to query the Cloud Monitoring API to retrieve time series data.

Get time series data points

Now that your app has an access token, it can retrieve monitoring data for a project. You will want to decide which types of metrics you want to monitor. This quick example looks for time series directly rather than discovering available resources by using the timeseriesDescriptor.list method.

<script type="text/javascript">
gapi.client.load('cloudmonitoring', 'v2beta1', function() {
  getTimeSeriesDataPoints();
}

function getTimeSeriesDataPoints() {
  // Configure a request to the Timeseries.list API method and pass the
  // required and optional parameters
  var request = gapi.client.cloudmonitoring.timeseries.list({
    'project' : 'YOUR_PROJECT_NAME'
    ,'metric' : 'compute.googleapis.com/instance/uptime'
    //,'timespan' : '2w'  // Add and adjust if you get timeouts, default is 4hr
  });

  // Execute the request and provide a callback function
  request.execute(function(resp) {
    // Insert the response into a div for viewing.
    document.getElementById('response-payload').innerText =
      JSON.stringify(resp);
  });
}

</script>
<div id="response-payload"></div>

Next steps

The simple examples in this document demonstrate how to get started quickly with the Cloud Monitoring API. Your app will likely need to perform more complex queries, store results, and possibly parse the data on your own backend. Get more information about the following topics:

• Authenticating requests: client-side, server-side or service accounts
• REST API documentation
• Try the sample dashboard with visualizations