Работа с инструментом контроля производительности WebSphere DataPower

Чтобы быстро измерить производительность программно-аппаратного комплекса DataPower, нужно выполнять команды из командной строки. Эта статья демонстрирует, как вместо этого построить инструмент графического мониторинга, основанный на HTML и Dojo. Этот инструмент работает в браузере и извлекает информацию о производительности, обращаясь к программно-аппаратному комплексу DataPower с SOAP-запросами.

Ив Дебир, ИТ-специалист, IBM

Фото автораИв Дебир (Yves Debeer) более пяти лет работает с клиентами из всех отраслей экономики в составе группы WebSphere Client Technical Professional в IBM Бельгия. Он пришел в IBM в качестве системного инженера в 2001 году, а в 2007 году стал техническим специалистом по WebSphere. Сейчас занимается методами корпоративной связи с помощью WebSphere DataPower и интеграции облачных приложений с WebSphere Cast Iron. Сертифицированный специалист IBM и магистр электроники.



30.07.2013

Введение

Эта статья демонстрирует, как построить графический инструмент мониторинга реального времени для программно-аппаратного комплекса WebSphere DataPower (см. рисунок 1). Этот инструмент отображает два графика, отражающих степень общей загрузки системных ресурсов и загрузки памяти. Сам мониторинг основан на запросах Soma, направляемых к интерфейсу управления XML DataPower.

Рисунок 1. Инструмент контроля производительности в действии
Инструмент контроля производительности в действии

В следующих разделах мы опишем, как построить этот инструмент.


Шаг 1. Создание графического интерфейса пользователя

Графический интерфейс можно построить с помощью статического HTML-кода, но чтобы сделать этот инструмент более динамичным, нужно использовать набор инструментов Dojo. Для этого возьмите бесплатный HTML-редактор WYSIWYG Maqetta, предназначенный для редактирования документов и Web-приложений HTML5. Пример дизайна страницы приведен на рисунке 2.

Рисунок 2. Дизайн Web-страницы с использованием Maqetta
Дизайн Web-страницы с использованием Maqetta

HTML-код для этого примера страницы показан в листинге 1.

Листинг 1. Пример 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>

Теперь, когда страница SystemUsage.html готова, легко создать страницу MemoryUsage.html на основе того же макета. Обе страницы можно включить в одну глобальную HTML-страницу DPMonitor.html, воспользовавшись инструментом iFrames (см. листинг 2), который позволяет воспроизводить страницы одновременно.

Листинг 2. Пример 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>

Шаг 2. Разработка кода

После создания HTML-страниц их можно экспортировать вместе с библиотеками Dojo (см. рисунок 3).

Рисунок 3. Экспорт HTML-страниц
Экспорт HTML-страниц

Шаг 3. Добавление кода JavaScript для кнопок

Дальнейшую разработку HTML-страниц можно вести локально, например, с помощью Eclipse или даже простого текстового редактора.

Добавим различные функции JavaScript (см. листинг 3) для запуска и остановки монитора и для отображения графика, построенного по данным производительности, полученным от программно-аппаратного комплекса DataPower. Конечно, код должен размещаться на реальном физическом или виртуальном программно-аппаратном комплексе DataPower.

  • startMon: эта функция вызывается при нажатии кнопки Start Monitor и вызывает функцию makeSeries.
  • makeSeries: вызывает функцию SystemUsage и рекурсивно обрабатывает график.
  • SystemUsage: готовит сообщение запроса SOAP и отправляет его в интерфейс управления DataPower SOAP по следующему URI: /service/mgmt/current.
  • stopMon: эта функция вызывается при нажатии кнопки Stop Monitor.
  • initChart: эта функция вызывается, когда страница загружена, и инициализирует график на странице.
Листинг 3. Пример 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;
//Вызов асинхронного xhrPost

var deferred = dojo.xhrPost(xhrArgs);
};
var stopMon = function() {
// Эта функция запускается при нажатии кнопки stop monitor

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;
// Обновление seriesA выполняется только при значениях счетчика <HScale

 
// Во избежание обновления при нажатии пользователем кнопки stop monitor 


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");
// Создание экранной лупы

//var mag = new dojox.charting.action2d.Magnify(chart,"default");
chart.render();
if (count < HScale) {
setTimeout("makeSeries()", SampleRate*1000);
} else {
stopMon();
}
};

var startMon = function() {
// Эта функция запускается при нажатии кнопки start monitor

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>

Шаг 4. Настройка DataPower для запуска кода

В этом разделе описывается, как работает инструмент контроля. Он основан на HTML и использует Dojo XHR для отправки Soma-вызовов к DataPower XML Management Interface. Весь код размещается в программно-аппаратном комплексе, за исключением Dojo Toolkit, который извлекается браузером из Content Distribution Network (CDN) Google®. Кроме того, можно рассмотреть возможность размещения Dojo Toolkit в локальной файловой системе DataPower.

Инструменту требуется только браузер, и он проверен с Firefox®, Chrome и Safari. Когда HTML-код извлечен из программно-аппаратного комплекса, он работает автономно. Различные значения интервалов времени и частоты дискретизации для контроля можно задавать динамически. Инструмент отслеживает использование системы DataPower и памяти, причем обе величины измеряются в процентах.

Инструмент легко приспособить для измерения различных системных параметров с использованием разных классов в рамках вызовов Soma. Дополнительные сведения о DataPower Soma приведены в документе IBM Redbook: WebSphere DataPower SOA Appliance: The XML Management Interface.

Рисунок 4. Конфигурация DataPower
Конфигурация DataPower

Как показано на рисунке 4, весь HTML-код доступен через многопротокольный шлюз. Это позволяет направлять трафик, согласно URI, либо в службу HTTP, где размещается HTML-код, либо во второй многопротокольный шлюз, который взаимодействует со службой XML Management Interface.

В следующем разделе приведены инструкции по установке инструмента.

  1. Войдите в систему с именем пользователя Admin в домене Default.
  2. С панели управления импортируйте файл конфигурации, который содержится в разделе Загрузки статьи, DPMon_IntReq.zip. См. рисунки 5 и 6.
    Рисунок 5. Импорт конфигурации (шаг 1)
    Импорт конфигурации (шаг 1)
    Рисунок 6. Импорт конфигурации (шаг 2)
    Импорт конфигурации (шаг 2)

    Это приводит к созданию домена приложения DPMon, где настраивается инструмент.

  3. Перейдите в домен DPMon.
  4. Загрузите ключ и сертификат SSLForwarder в хранилище cert (рисунок 7). Они используются многопротокольным шлюзом и требуются для связи через SSL с XML Management Interface.
    Рисунок 7. Загрузка ключа и сертификата SSL
    Загрузка ключа и сертификата SSL
  5. Иначе, можно создать свои собственные ключ и сертификат, используя DataPower Crypto Tools.
  6. Добавьте в многопротокольный шлюз правильный HTTP-заголовок, который требуется для проверки подлинности в XML Management Interface, как показано на рисунке 8.
    Рисунок 8. Настройка HTTP-заголовка для проверки подлинности
    Настройка HTTP-заголовка для проверки подлинности

    Например, если ваш пароль администратора ― password, то значением заголовка — будет YWRtaW46cGFzc3dvcmQ=, как показано на рисунке 9. Это значение admin:password в коде Base64.

    Для кодирования и декодирования кода Base64 можно использовать любой онлайновый инструмент, например, Base64.

    Рисунок 9. Добавление HTTP-заголовка
    Добавление HTTP-заголовка
  7. Выберите Control Panel >Status > Object Status, чтобы убедиться, что все объекты в домене DPMon находятся в состоянии Up. Перезапустить домен проще простого, но не забудьте сначала сохранить свою конфигурацию.
  8. Когда инструмент контроля DataPower установлен и настроен, к нему можно обращаться через http://>DataPowerIP>:9190/DPMonitor/DPMonitor.html.

    Если требуется дополнительная защита для управления доступом к инструменту, можно добавить политику AAA в Processing Policy многопротокольного шлюза. Например, можно выполнять проверку подлинности пользователей через заголовок аутентификации HTTP и использовать файл с информацией AAA, хранящийся в программно-аппаратном комплексе. Наконец, убедитесь, что XML Management Interface разрешено прослушивание порта 5550.


Заключение

В этой статье показано, как быстро просмотреть основные системные ресурсы программно-аппаратного комплекса DataPower, измеряя степень загрузки ЦП и использования оперативной памяти. Инструмент контроля полностью работает внутри браузера с применением динамического HTML и DOJO и мало влияет на общую производительность программно-аппаратного комплекса. Он основан на таких службах, как Multi-Protocol Gateway и HTTP Service и может работать на программно-аппаратных комплексах DataPower всех видов.


Загрузка

ОписаниеИмяРазмер
Файл конфигурации code_sample.zip911 КБ

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=WebSphere
ArticleID=939228
ArticleTitle=Работа с инструментом контроля производительности WebSphere DataPower
publish-date=07302013