Skip to content

Commit

Permalink
migrated the browse endpoint to use ng-grid and a dialog for the deta…
Browse files Browse the repository at this point in the history 
…il of the message
  • Loading branch information
@jstrachan
jstrachan committed Apr 26, 2013
1 parent f28793f commit 5bbbc1d
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 66 deletions.
2 changes: 1 addition & 1 deletion hawtio-web/src/main/webapp/app/activemq/js/browse.ts
View file
Expand Up @@ -106,7 +106,7 @@ module ActiveMQ {
});
}
$scope.moveDialog.close();
}
};

$scope.deleteMessagesAndCloseDeleteDialog = () => {
var jolokia = workspace.jolokia;
Expand Down
73 changes: 63 additions & 10 deletions hawtio-web/src/main/webapp/app/camel/html/browseEndpoint.html
View file
@@ -1,14 +1,67 @@
<ng-include src="'app/camel/html/browseMessageTemplate.html'"></ng-include>

<div ng-controller="Camel.BrowseEndpointController">
<table cellpadding="0" cellspacing="0" border="0"
class="table table-condensed table-striped table-bordered table-hover"
id="grid" style="table-layout: auto;">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</table>
<div class="row-fluid">
<div class="span6">
<input class="search-query span12" type="text" ng-model="gridOptions.filterOptions.filterText"
placeholder="Filter messages">
</div>
<div class="span6">
<div class="pull-right">
<form class="form-inline">
<!--
<button class="btn" ng-disabled="!selectedItems.length" ng-click="moveDialog.open()"
title="Move the selected messages to another destination" data-placement="bottom">
<i class="icon-move"></i> Move
</button>
<button type="submit" class="btn" ng-disabled="!selectedItems.length"
ng-click="deleteDialog.open()"
title="Delete the selected messages">
<i class="icon-remove"></i> Delete
</button>
-->
</form>
</div>
</div>
</div>

<div class="row-fluid">
<div class="gridStyle" ng-grid="gridOptions"></div>
<!--
<div class="gridStyle" hawtio-datatable="gridOptions"></div>
-->
</div>

<div modal="messageDialog.show" close="messageDialog.close()" options="messageDialog.options">
<form class="form-horizontal no-bottom-margin" ng-submit="messageDialog.close()">
<div class="modal-header"><h4>Message {{row.id}}</h4></div>
<div class="modal-body">
<div class="expandable closed">
<div title="Headers" class="title">
<i class="expandable-indicator"></i> Headers
</div>
<div class="expandable-body well">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Header</th>
<th>Value</th>
</tr>
</thead>
<tbody ng-bind-html-unsafe="row.headerHtml">
</tbody>
</table>
</div>
</div>

<div ng-controller="Core.EditorController">
<textarea readonly class="messageDetail" class="input-xlarge" codeMirror="true" rows="{{lineCount(row.body)}}"
ng-model="row.body"></textarea>
</div>
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" ng-click="messageDialog.close()" value="Close">
</div>
</form>
</div>
</div>
159 changes: 104 additions & 55 deletions hawtio-web/src/main/webapp/app/camel/js/browse.ts
View file
@@ -1,63 +1,112 @@
module Camel {

export function BrowseEndpointController($scope, workspace:Workspace) {
$scope.workspace = workspace;
$scope.widget = new TableWidget($scope, workspace, [
export function BrowseEndpointController($scope, workspace:Workspace, jolokia) {
$scope.workspace = workspace;

$scope.messageDialog = new Core.Dialog();

$scope.gridOptions = {
selectedItems: $scope.selectedItems,
data: 'messages',
displayFooter: false,
showFilter: false,
showColumnMenu: true,
enableColumnResize: true,
enableColumnReordering: true,
filterOptions: {
filterText: ''
},
selectWithCheckboxOnly: true,
maintainColumnRatios: false,
columnDefs: [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<i class="icon-plus"></i>'
}
], {
rowDetailTemplateId: 'camelMessageTemplate',
ignoreColumns: ["headerTypes", "body"],
flattenColumns: ["headers"]
});

var populateTable = function (response) {
var data = [];
if (angular.isString(response)) {
// lets parse the XML DOM here...
var doc = $.parseXML(response);
var allMessages = $(doc).find("message");

allMessages.each((idx, message) => {
var messageData = {
headers: {},
headerTypes: {}
};
var headers = $(message).find("header");
headers.each((idx, header) => {
var key = header.getAttribute("key");
var typeName = header.getAttribute("type");
var value = header.textContent;
if (key) {
if (value) messageData.headers[key] = value;
if (typeName) messageData.headerTypes[key] = typeName;
}
});
var body = $(message).children("body")[0];
if (body) {
var bodyText = body.textContent;
var bodyType = body.getAttribute("type");
messageData["body"] = bodyText;
messageData["bodyType"] = bodyType;
}
data.push(messageData);
});
field: 'id',
displayName: 'ID',
// for ng-grid
//width: '50%',
// for hawtio-datatable
// width: "22em",
cellTemplate: '<div class="ngCellText"><a ng-click="openMessageDialog(row)">{{row.entity.id}}</a></div>'
}
$scope.widget.populateTable(data);
};
]
};

$scope.$watch('workspace.selection', function () {
if (workspace.moveIfViewInvalid()) return;
$scope.$watch('workspace.selection', function () {
if (workspace.moveIfViewInvalid()) return;
loadData();
});

var mbean = workspace.getSelectedMBeanName();
if (mbean) {
var jolokia = workspace.jolokia;
var options = onSuccess(populateTable);
jolokia.execute(mbean, 'browseAllMessagesAsXml(java.lang.Boolean)', true, options);
}
});
$scope.openMessageDialog = (message) => {
$scope.row = Core.pathGet(message, ["entity"]);
if ($scope.row) {
$scope.messageDialog.open();
}
};


function loadData() {
var mbean = workspace.getSelectedMBeanName();
if (mbean) {
var options = onSuccess(populateTable);
jolokia.execute(mbean, 'browseAllMessagesAsXml(java.lang.Boolean)', true, options);
}
}

function populateTable(response) {
var data = [];
if (angular.isString(response)) {
// lets parse the XML DOM here...
var doc = $.parseXML(response);
var allMessages = $(doc).find("message");

allMessages.each((idx, message) => {
var messageData = {
headers: {},
headerTypes: {},
id: null,
headerHtml: ""
};
var headers = $(message).find("header");
var headerHtml = "";
headers.each((idx, header) => {
var key = header.getAttribute("key");
var typeName = header.getAttribute("type");
var value = header.textContent;
if (key) {
if (value) messageData.headers[key] = value;
if (typeName) messageData.headerTypes[key] = typeName;

headerHtml += "<tr><td class='property-name'>" + key + "</td>" +
"<td class='property-value'>" + (value || "") + "</td></tr>";
}
});
messageData.headerHtml = headerHtml;
var id = messageData.headers["breadcrumbId"];
if (!id) {
// lets find the first header with a name or Path in it
angular.forEach(messageData.headers, (value, key) => {
if (!id && (key.endsWith("Name") || key.endsWith("Path"))) {
id = value;
}
});
// if still no value, lets use the first :)
angular.forEach(messageData.headers, (value, key) => {
if (!id) id = value;
});
}
messageData.id = id;
var body = $(message).children("body")[0];
if (body) {
var bodyText = body.textContent;
var bodyType = body.getAttribute("type");
messageData["body"] = bodyText;
messageData["bodyType"] = bodyType;
}
data.push(messageData);
});
}
$scope.messages = data;
Core.$apply($scope);
}
}
}

0 comments on commit 5bbbc1d

Please sign in to comment.