Using the WebSphere DataPower performance monitoring tool

To get a quick view of the performance of a DataPower appliance, you need to execute CLI commands. This article shows you how to build a graphical monitoring tool based on HTML and Dojo. The tool runs in a browser and retrieves performance information by issuing SOAP calls to the DataPower appliance.

Yves Debeer (yves_debeer@be.ibm.com), IT Specialist, IBM

Photo of Yves DebeerYves Debeer is a member of the WebSphere Client Technical Professional Team in IBM Belgium for more than 5 years, working with clients from all industries. He joined IBM as an IBM Systems Engineer in 2001, and became a WebSphere Technical Professional in 2007. His current focus is on enterprise connectivity with WebSphere DataPower and Cloud application integration with WebSphere Cast Iron. He is an IBM Certified IT Specialist and holds a Master's degree in Electronics.



29 May 2013

Also available in Russian

Introduction

This article shows how to build a graphical real-time monitoring tool for WebSphere DataPower appliances (see Figure 1). The tool provides two graphs showing the overall system usage and memory usage. The monitoring itself is based on "Soma" requests that are sent to the DataPower XML management interface.

Figure 1. Performance monitoring tool in action
Performance monitoring tool in action

In the following sections, we will describe how to build this tool.


Step 1: Building the GUI

You can build a graphical interface by using static HTML code, but in order to make the tool more dynamic, you will use the Dojo toolkit. To do this, you will use a tool called Maqetta, a free and open-source WYSIWYG HTML editor designed to edit HTML5 documents and web applications. An example of the design page is shown in Figure 2.

Figure 2. Web page design using Maqetta
Web page design using Maqetta

The HTML code for this example page is shown in Listing 1.

Listing 1. Example of SystemUsage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Untitled</title>
<style>@import "themes/claro/claro.css";@import "app.css";@import 
 "lib/dojo/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="maqetta/maqetta.js"></script>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" 
 djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dijit.form.Select');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.ComboBox');
dojo.require('dijit.form.Button');</script>
<script type="text/javascript" src="maqetta/States.js"></script>
</head>
<body class="claro" dvFlowLayout="true" data-davinci-ws="collapse" 
 id="myapp">
 <h1 style="left: 110px; top: 20px; position: absolute;">
   System Usage</h1>
 <div dojoType="dijit.layout.ContentPane" title="Pane" doLayout="false" 
  style="left: 50px; position: absolute; width: 959px; height: 250px; top: 
  72px;">
  <label style="left: 80px; position: absolute; top: 17px;">
    Duration (Seconds)</label>
  <label style="left: 80px; position: absolute; top: 46px;">
Sample Rate</label>
  <select dojoType="dijit.form.ComboBox" id="XAxis" value="60" disabled="false" 
  readOnly="false" intermediateChanges="false" trim="false" uppercase="false" 
  lowercase="false" propercase="false" required="false" style="width: 60px; 
  left: 10px; position: absolute; top: 13px;">
<option dvwidget="html.option" value="60" selected="true">
      60</option>
    <option dvwidget="html.option" value="600" selected="false">
      600</option>
    <option dvwidget="html.option" value="1800" selected="false">
      1800</option>
    <option dvwidget="html.option" value="3600" selected="false">
      3600</option>
    <option dvwidget="html.option" value="14400" selected="false">
      14400</option>
  </select>
  <select dojoType="dijit.form.ComboBox" id="SRate" value="1" disabled="false" 
readOnly="false" intermediateChanges="false" trim="false" uppercase="false" 
 lowercase="false" propercase="false" required="false" style="width: 60px; 
 position: absolute; left: 10px; top: 43px;" 
 dvStates="{'undefined':{'style':{'position':'absolute','left':'10px',
 'top':'43px','width':'50px'}}}">
<option dvwidget="html.option" value="1" selected="true">
      1</option>
    <option dvwidget="html.option" value="2" selected="false">
      2</option>
    <option dvwidget="html.option" value="3" selected="false">
      3</option>
    <option dvwidget="html.option" value="4" selected="false">
      4</option>
    <option dvwidget="html.option" value="5" selected="false">
      5</option>
    <option dvwidget="html.option" value="10" selected="false">
      10</option>
    <option dvwidget="html.option" value="20" selected="false">
      20</option>
    <option dvwidget="html.option" value="40" selected="false">
      40</option>
    <option dvwidget="html.option" value="60" selected="false">
      60</option>
  </select>
  <div id="StartMon" dojoType="dijit.form.Button" intermediateChanges="false" 
   label="Start Monitor" iconClass="dijitNoIcon" style="left: 10px; position: absolute; 
   top: 77px;" onclick="startMon()"></div>
  <div id="StopMon" dojoType="dijit.form.Button" disabled="disabled" 
   intermediateChanges="false" label="Stop Monitor" iconClass="dijitNoIcon" 
   style="left: 10px; position: absolute; top: 115px;" onclick="stopMon()"></div>
  <div id="Message" style="left: 12px; position: absolute; top: 158px; width: 171px; 
   height: 19px;"></div>
  <div id="LogMessage" style="left: 12px; position: absolute; top: 170px; 
   width: 171px; height: 19px;"></div>
  <div id="SystemUsage" style="position: absolute; width: 758px; height: 232px; 
   left: 202px; top: 14px;" title="SystemUsage"></div>
</div>
 <img src="header_icon_status.gif" style="left: 60px; top: 29px; position: 
  absolute;"></img>
</body>
</html>

Now that you have designed the "SystemUsage.html" page, you can easily create a "MemoryUsage.html" based on the same layout. You can include both pages into one global HTML page, "DPMonitor.html", by using iFrames (see Listing 2), which allows the pages to run simultaneously.

Listing 2. Example of DPMonitor.html
<!DOCTYPE html>
<html>
<head>
<title>DataPower Monitor</title>
<style type="text/css">
@import "themes/claro/claro.css";
@import "app.css";

</style>

<script src="maqetta/States.js"></script>
<script src="maqetta/maqetta.js"></script>
</head>
<body class="claro" dvFlowLayout="true" data-davinci-ws="collapse" id="myapp">
 <img src="./websphere-logo.gif" style="left: 19px; position: absolute; 
  top: 15px;"></img>
 <h1 style="left: 120px; top: 4px; position: absolute;">
   DataPower Monitor</h1>
 <img src="./banner-swoosh.gif"></img>
        <iframe style="width: 1082px; height: 348px;" src="SystemUsage.html" 
         hspace="0" vspace="0" marginHeight="0" scrolling="no" ></iframe>
        <iframe style="width: 1082px; height: 348px;" src="Memory.html" hspace="0" 
         vspace="0" marginHeight="0" scrolling="no" ></iframe>
</body>
</html>

Step 2: Developing the code

Once the HTML pages are designed, you can export the pages, including the Dojo Libraries (see Figure 3).

Figure 3. Export HTML pages
Export HTML pages

Step 3: Adding the JavaScript code to the buttons

Further development of the HTML pages can now be done locally, for example, using Eclipse or even a basic text editor.

Different JavaScript functions are added (see Listing 3) to start and stop the monitor and to render the chart based on performance data gathered from the DataPower appliance. Of course, the code needs to be hosted on a real physical or virtual DataPower appliance.

  • startMon: This function gets called when the "Start Monitor" button is clicked and calls the "makeSeries"function.
  • makeSeries: This calls the "SystemUsage" function and renders the chart recursively.
  • SystemUsage: This function prepares the SOAP request message and sends it to the DataPower SOAP management interface at the URI : /service/mgmt/current.
  • stopMon: This function gets called when the "Stop Monitor" button is clicked.
  • initChart: This function is called when the page is loaded and initializes the chart on the page.
Listing 3. Example of SystemUsage.html
<!DOCTYPE html>
<html>
<head>
<title>SystemUsage</title>
<style type="text/css">
@import "./themes/claro/claro.css";
@import "./app.css";

</style>
<script type="text/javascript" djConfig="parseOnLoad: true" 
 src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.ComboBox');
dojo.require('dijit.form.Button');
dojo.require("dojox.charting.Chart2D");
//dojo.require("dojox.charting.themes.Claro");
dojo.require("dijit.Dialog");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.action2d.Magnify");
var chart, count , status, SystemLoad = 0, HScale, SampleRate, seriesA = [];

var SystemUsage = function(){var soapmessage = 
 '<?xml version="1.0" encoding="utf-8"?>\r' +
'<env:Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/">\r' +
'<env:Body>\r' +
'<dp:request domain="default" xmlns:dp="http://www.datapower.com/schemas/management">\r' +
'<dp:get-status class="SystemUsage"/>\r' +
'</dp:request>\r' +
'</env:Body>\r' +
'</env:Envelope>\r';
var xhrArgs = {
url: "/service/mgmt/current",
postData: soapmessage,
headers: { "Content-Type": "application/x-www-form-urlencoded" },
handleAs: "xml",
load: function(response) {
myXML= response.getElementsByTagName("*");
SystemLoad=parseInt(myXML[7].textContent);
},
error: function(error) {
dojo.byId("LogMessage").innerHTML = "Message error.";
}
};

//dojo.byId("LogMessage").innerHTML = "SystemLoad = " + SystemLoad;
//Call the asynchronous xhrPost
var deferred = dojo.xhrPost(xhrArgs);
};
var stopMon = function() {
// This function is launched when the stop monitor button is pressed
dojo.attr('Message',{name:"nameAtt", innerHTML: ""});
count=HScale;
dojo.attr(dijit.byId('StartMon'),{disabled: ""});
dojo.attr(dijit.byId('StopMon'),{disabled: "disabled"});
status="Stopped";
};

var makeSeries = function() {
SystemUsage();
i=0;
// Only update seriesA when count < HScale to avoid update when user pressed 
// stop monitor button
if (count < HScale) {
while (i<SampleRate)
{
index=count+i;
seriesA[index]=SystemLoad;
i++;
}
}
count+=SampleRate;
chart.updateSeries("Series A", seriesA);
//var tip = new dojox.charting.action2d.Tooltip(chart,"default");
// Create the magnifier
//var mag = new dojox.charting.action2d.Magnify(chart,"default");
chart.render();
if (count < HScale) {
setTimeout("makeSeries()", SampleRate*1000);
} else {
stopMon();
}
};

var startMon = function() {
// This function is launched when the start monitor button is pressed
if (status == "Active") {
stopMon();
} else {
status="Active";
dojo.byId("LogMessage").innerHTML = "";
dojo.attr('Message',{name:"nameAtt", innerHTML: "Running..."});
dojo.attr(dijit.byId('StopMon'),{disabled: ""});
dojo.attr(dijit.byId('StartMon'),{disabled: "disabled"});
HScale=parseInt(dijit.byId('XAxis').attr('value'));
SampleRate=parseInt(dijit.byId('SRate').attr('value'));
count=0;
seriesA=[];
seriesA.length=Math.round(HScale);
makeSeries();
}
};

var initChart = function() {
chart = new dojox.charting.Chart2D("SystemUsage");
chart.addPlot("default", {type: "Lines"});
chart.addAxis("x");
chart.addAxis("y", { min: 0, max: 100, vertical: true, fixLower: "major", 
 fixUpper: "major" });
chart.addSeries("Series A", seriesA, {stroke: {color:"blue"}});
chart.render();
};

dojo.addOnLoad(initChart);
</script>
<script src="maqetta/States.js"></script>
<script src="maqetta/maqetta.js"></script>
</head>
<body class="claro" dvFlowLayout="true" data-davinci-ws="collapse" id="myapp">
<h1 style="left: 110px; top: 20px; position: absolute;">
System Usage</h1>
<div dojoType="dijit.layout.ContentPane" title="Pane" doLayout="false" 
 style="left: 50px; position: absolute; width: 959px; height: 250px; top: 72px;">
<label style="left: 80px; position: absolute; top: 17px;">
Duration (Seconds)</label>
<label style="left: 80px; position: absolute; top: 46px;">
Sample Rate</label>
<select dojoType="dijit.form.ComboBox" id="XAxis" value="60" disabled="false" 
 readOnly="false" intermediateChanges="false" trim="false" uppercase="false" 
 lowercase="false" propercase="false" required="false" 
 style="width: 60px; left: 10px; position: absolute; top: 13px;">
<option dvwidget="html.option" value="60" selected="true">60</option>
<option dvwidget="html.option" value="600" selected="false">600</option>
<option dvwidget="html.option" value="1800" selected="false">1800</option>
<option dvwidget="html.option" value="3600" selected="false">3600</option>
<option dvwidget="html.option" value="14400" selected="false">14400</option>
</select>
<select dojoType="dijit.form.ComboBox" id="SRate" value="1" disabled="false" 
 readOnly="false" intermediateChanges="false" trim="false" uppercase="false" 
 lowercase="false" propercase="false" required="false" 
 style="width: 60px; position: absolute; left: 10px; top: 43px;" 
 dvStates="{'undefined':{'style':{'position':'absolute','left':'10px',
 'top':'43px','width':'50px'}}}">
<option dvwidget="html.option" value="1" selected="true">1</option>
<option dvwidget="html.option" value="2" selected="false">2</option>
<option dvwidget="html.option" value="3" selected="false">3</option>
<option dvwidget="html.option" value="4" selected="false">4</option>
<option dvwidget="html.option" value="5" selected="false">5</option>
<option dvwidget="html.option" value="10" selected="false">10</option>
<option dvwidget="html.option" value="20" selected="false">20</option>
<option dvwidget="html.option" value="40" selected="false">40</option>
<option dvwidget="html.option" value="60" selected="false">60</option>
</select>
<div id="StartMon" dojoType="dijit.form.Button" intermediateChanges="false" 
 label="Start Monitor" iconClass="dijitNoIcon" style="left: 10px; 
 position: absolute; top: 77px;" onclick="startMon()"></div>
<div id="StopMon" dojoType="dijit.form.Button" disabled="disabled" 
 intermediateChanges="false" label="Stop Monitor" iconClass="dijitNoIcon" 
 style="left: 10px; position: absolute; top: 115px;" 
 onclick="stopMon()"></div>
<div id="Message" style="left: 12px; position: absolute; top: 158px; 
 width: 171px; height: 19px;"></div>
<div id="LogMessage" style="left: 12px; position: absolute; top: 170px; 
 width: 171px; height: 19px;"></div>
<div id="SystemUsage" style="position: absolute; width: 758px; 
 height: 232px; left: 202px; top: 14px;" title="SystemUsage"></div>
</div>
<img src="header_icon_status.gif" style="left: 60px; top: 29px; 
 position: absolute;"></img>
</body>
</html>

Step 4: Configuring DataPower to run the code

This section describes how the monitoring tool works. The tool is HTML-based and uses Dojo XHR to post Soma calls to the DataPower XML Management Interface. All the code is hosted on the appliance except for the Dojo Toolkit, which is retrieved by the browser from the Content Distribution Network (CDN) of Google®. Alternatively, you can consider hosting the Dojo Toolkit on the DataPower's local filesystem. .

The tool only requires a browser that is tested on Firefox®, Chrome, and Safari. Once the HTML code is retrieved from the appliance, it runs autonomously. Different intervals and sample rates for monitoring can be set dynamically. The tool monitors the DataPower system usage and memory usage and both are measured as percentages.

You can easily adapt the tool to measure different system values using different classes within the Soma calls. For more information about DataPower Soma, see IBM Redbook: WebSphere DataPower SOA Appliance: The XML Management Interface.

Figure 4. DataPower configuration
DataPower configuration

As shown in Figure 4, all the HTML code is accessed through a "Multi-Protocol Gateway". This allows to route traffic, based on the URI, to either the HTTP service where the HTML code is hosted, or to a second Multi-Protocol Gateway that communicates with the XML Management Interface.

This next section provides the installation steps for the tool:

  1. Login with user "Admin" in the Default domain.
  2. From the Control Panel, import the configuration file that is provided in the Download section of the article,DPMon_IntReq.zip. See Figures 5 and 6.
    Figure 5. Import configuration (Step 1)
    Import configuration (Step 1)
    Figure 6. Import configuration (Step 2)
    Import configuration (Step 2)

    This creates the application domain “DPMon”, where the tool is configured.

  3. Switch to the DPMon domain.
  4. Load the SSLForwarder Key and Certificate to the “cert” store (Figure 7). These are used by the Multi-Protocol Gateway and are required to communicate over SSL with the XML Management Interface.
    Figure 7. Load SSL key and Certificate
    Load SSL key and Certificate
  5. Alternatively, you can generate your own key and certificate using the DataPower “Crypto Tools”.
  6. Modify the Multi-Protocol Gateway to include the correct HTTP-header that is required to authenticate to the XML Management Interface, as shown in Figure 8.
    Figure 8. Configure HTTP header for authentication
    Configure HTTP header for authentication

    For example, if your admin password is "password", the header value is YWRtaW46cGFzc3dvcmQ=, as shown in Figure 9. This is the Base64 value for "admin:password".

    You can use any online tool to encode or decode Base64, for example, the Base64 tool.

    Figure 9. Add HTTP Header
    Add HTTP Header
  7. Verify that all objects in the DPMon domain are in the "Up"-state by selecting Control Panel >Status > Object Status. Domain restart is the easiest, but do not forget to save your configuration first.
  8. Once installed and configured, you can access the DataPower monitoring tool via http://<DataPower IP>:9190/DPMonitor/DPMonitor.html.

    If additional security is required to control access to the tool, then you can add an AAA policy to the "Processing Policy" of the Multi-Protocol Gateway. For example, you can authenticate users via the HTTP authentication header and use an AAA info-file stored on the appliance. Finally, make sure you have enabled the XML Management Interface to listen on Port 5550.


Conclusion

This article showed how to get a quick view of the basic system resources of a DataPower appliance based on CPU load and memory usage. The monitoring tool runs completely within the browser using dynamic HTML and DOJO and has little impact on the overall performance of the appliance. As it is based on basic services, such as Multi-Protocol Gateway and HTTP Service, it can run on all types of DataPower appliances.


Download

DescriptionNameSize
Configuration filecode_sample.zip911KB

Resources

Learn

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=931689
ArticleTitle=Using the WebSphere DataPower performance monitoring tool
publish-date=05292013