Вступление
Talend ESB включает в себя SAM (Service Activity Monitoring) — функцию сбора и хранения сообщений веб-служб по некоторым метаданным. Для отображения сохраненных данных о событиях Talend предлагает пользовательский интерфейс мониторинга как часть своего коммерческого предложения (подписка).
В комплект поставки SAM входит служба REST, обеспечивающая простой доступ к сохраненным событиям. Для реального мониторинга производства нужно гораздо больше (поиск, фильтры, просмотры, …). Поэтому для интенсивного использования клиенты должны использовать Talend Administration или полнофункциональные решения для мониторинга (Hyperic HQ, Nagios, LEK (LogStash / ElasticSearch / Kibana) и т. Д.). Я обнаружил, что эти базовые сервисы SAM особенно полезны для простой регистрации и мониторинга во время разработки или производства на ранней стадии.
Я считаю себя экспертом на стороне сервера. Очень компетентен в области системной интеграции, а также в разработке на стороне сервера. При создании пользовательского интерфейса я полагаюсь в основном на JSF (Icefaces). Поэтому, как часть нашего интеграционного решения, я создал хорошее веб-приложение JSF с разбитой на страницы таблицей и представлениями, отображающими подробности событий.
И у меня появилась идея. Однако в HTML5 и клиентских приложениях много шума — я испытал недоверие ко всему, что основано на JavaScript. Несколько лет назад нужно было протестировать любую функциональность JS во всех браузерах без гарантии, что она все равно будет работать через несколько недель. Но — может быть, пришло время дать мне еще один шанс.
Давайте попробуем построить простой клиент поверх сервисов, предоставляющих зарегистрированные данные. Это будет хорошее упражнение, а также возможность узнать что-то новое. Другое преимущество состоит в том, что более легкое приложение может запускаться из самого ESB без необходимости использования внешнего веб-сервера (в реальных сценариях сервер веб-приложений / приложений все равно присутствует).
Клиентское приложение
Давайте начнем с простого. Моя идея заключалась в том, чтобы иметь таблицу с нумерацией страниц на стороне сервера.
Очевидно — многие люди начинают изучать новые технологии пользовательского интерфейса на таком примере, который кажется очень практичным и полезным. Однако — это не так просто, как кажется. Чтобы иметь разбитую на страницы таблицу, нам нужно, чтобы несколько компонентов играли вместе. Это упражнение далеко не хорошее пошаговое упражнение. И я предполагаю, что читатель знает много вещей, поэтому я пропускаю то, что считаю очевидным и понятным. Поскольку я иногда могу быть довольно упрямым, я продолжу эту идею.
Итак — мы будем
- создать таблицу
- загрузить данные из внешнего сервиса
- разбивать данные на стороне сервера
Еще один момент — я действительно не эксперт в области JS / HTML5 / CSS. Если вы найдете какой-либо способ улучшить его, дайте конструктивный совет, вам действительно рады. Я воспринял это задание как возможность учиться, и если вы захотите поделиться им, я буду очень признателен.
Клиентские услуги
Этот блог не о Talend ESB и не о самом SAM, но если вы хотите начать его использовать, я дам вам небольшой
совет : — загрузите и установите Talend ESB
— установите функции tesb-sam- *
Что мне особенно нравится в этом решении, так это то, что агент мониторинга реализован в виде функции CXF. Это означает, что для включения мониторинга существующих служб почти не требуется усилий и это не касается библиотек фреймворка.
Чтобы получить данные SAM, пользователь может вызвать службу REST list:
http: // server: port / services / sam / list с необязательными параметрами offset и limit.
For simplified testing, I’ve stored a sample output from the service
https://bitbucket.org/gusto2_/sam-ui2/src/15074b814e0a2b904b463daf959696e60f3281b0/src/main/webapp/data.json?at=master so we can play locally too.
YUI Library
YUI is a free, open source JavaScript and CSS library for building rich interactive web applications. http://yuilibrary.com/
Now – many of you may ask why did I choose the YUI Library. People use other frameworks too (jQuery, AngularJS, ..). Well, there is no apparent reason. Simply – I like the default skin design. Now it reminds me how I felt, when my mother chose her car based on its color. Simply – I chose one of many options. But the principles stay more or less the same.
Resources:
http://yuilibrary.com/
http://stlsmiths.github.io/blunderalong/index.html
Client application
YUI implementation
for start we will do only the main activity table, we won’t go to master / detail views, etc.
This is the whole implementation with comments
<html>
<head>
<title>YUI test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
<link rel="stylesheet" href="apogado-css.css" />
</head>
<body>
<div>
<div id="messages"></div>
<div id="mainTable"></div>
<div id="mainTablePaginator"></div>
<script type="text/javascript">
YUI().use(
// modules to work with datatable,
// data source and json datasource
'datatable-base', 'datatype-date',
'datasource-io', 'datasource-jsonschema',
'datatable-datasource',
// gallery paginator
'gallery-datatable-paginator', 'gallery-paginator-view',
// node for displaying messages
'node',
function(Y) {
// function to display response status messages
function displayMessage(msg)
{
var msgElement = Y.one('#messages');
msgElement.setHTML(msg);
}
var mainTable = new Y.DataTable(
{
columns: [
{
key: "flowID",
formatter: function(o) {
return '<img src="./arrow-next.gif"/>'
},
allowHTML: true
},
{ // convert long to readable
// datetime format
key: "timestamp",
formatter: function(o) {
return Y.Date.format(new Date(o.value), {format: '%Y-%m-%d %H:%M:%S'});
}
},
'operation', 'port', 'elapsed', 'types',
'providerIP', 'providerHost'],
paginator: new Y.PaginatorView({
model: new Y.PaginatorModel(
{page: 1, itemsPerPage: 10}),
container: '#mainTablePaginator',
// display only reasonable amount
// of links
maxPageLinks: 5
}),
// use server side pagination
paginationSource: 'remote',
// request template for each page
requestStringTemplate: '?page={page}&limit={itemsPerPage}',
}
);
// define datasource
var dataSource = new Y.DataSource.IO({
source: './camel/sam/list',
});
// event handler, in this case we display
// status code and status message
dataSource.on('response', function(e) {
displayMessage(e.data.status + ' '+e.data.statusText);
});
// datasource produces JSON data
// we need to map the result to columns
dataSource.plug(Y.Plugin.DataSourceJSONSchema,
{
schema: {
resultListLocator: 'aggregated',
resultFields: [
'timestamp', 'operation', 'port',
'elapsed', 'types', 'flowID',
'providerIP', 'providerHost'
],
// necessary the server-side
// pagination to work
// NOTE: It is ESSENTIAL that your response includes meta data
// for totalItems, otherwise the paginator won't render.
//http://yuilibrary.com/gallery/show/datatable-paginator
metaFields: {
// the ‘count’ parameter reflects the count element in the
// returned data
totalItems: 'count'
}
}
});
// tell the table to use the datasource
mainTable.plug(Y.Plugin.DataTableDataSource,
{
datasource: dataSource,
// if initialRequest defined,
// a request is issued as soon
// as the TableDataSource is initialized
initialRequest: ''
});
mainTable.render('#mainTable');
});
</script>
</div>
</body>
</html>
Parameter consideration
The SAM resource REST service URL looks as follows
http://server:port/services/sam/list?offset=…&[limit=…]]
and the paginated DataTable sends request in the format
http://server:port/…?page=…&limit=..
so we need to create means to transform page to the offset. [offset=(page-1)*limit]
Я не нашел разумного способа сделать это на уровне пользовательского интерфейса. Когда я вернусь назад, paginator работает на страницах, а не на смещениях, поэтому мы не будем использовать инструмент там, где это не подходит. В результате я создал маршрут Camel, преобразовав параметр страницы в смещение. Есть два преимущества этого подхода. Первое — я могу сделать это быстро. Второе — мы можем рассматривать (защищать) конечную точку службы как часть приложения.
Следовать за
Я создал клиентское приложение с подробными видами, смотрите
https://bitbucket.org/gusto2_/sam-ui2
есть два профиля сборки — run-on-karaf и run-on-tomcat. Я надеюсь, что они говорят сами за себя. Для запуска на karaf необходимо также установить функции camel-cxf и spring-web.
Вывод
У нас есть легкое и быстрое клиентское приложение, которое даже выглядит красиво. Это не заняло много времени, и в основном — это не повредило .. много 🙂