Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
#266 show nested objects as a list of properties and allow clicking o…
…n the values to open a detail dialog view
  • Loading branch information
jstrachan committed May 13, 2013
1 parent 3ba9e2d commit a5ccd29
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 32 deletions.
12 changes: 12 additions & 0 deletions hawtio-web/src/main/webapp/app/jmx/html/attributes.html
Expand Up @@ -3,4 +3,16 @@

<div id="attributesGrid" class="gridStyle" ng-grid="gridOptions">
</div>

<div modal="valueDetails.show" close="valueDetails.close()" options="valueDetails.options">
<form class="form-horizontal no-bottom-margin" ng-submit="valueDetails.close()">
<div class="modal-header"><h4>{{row.name}}</h4></div>
<div class="modal-body">
<div ng-bind-html-unsafe="row.detailHtml"></div>
</div>
<div class="modal-footer">
<input class="btn" ng-click="valueDetails.close()" value="Close">
</div>
</form>
</div>
</div>
87 changes: 56 additions & 31 deletions hawtio-web/src/main/webapp/app/jmx/js/attributes.ts
Expand Up @@ -2,7 +2,9 @@ module Jmx {

export var propertiesColumnDefs = [
{field: 'name', displayName: 'Property', width: "27%"},
{field: 'value', displayName: 'Value', width: "70%"}
{field: 'value', displayName: 'Value', width: "70%",
cellTemplate: '<div class="ngCellText" ng-click="openDetailView(row.entity)" ng-bind-html-unsafe="row.entity.summary"></div>'
}
];

export var foldersColumnDefs = [{
Expand All @@ -16,30 +18,7 @@ module Jmx {
$scope.selectedItems = [];
$scope.selectCheckBox = true;

/*
var SelectToggle = function(scope) {
var self = this;
self.scope = scope;
self.init = function(childScope, grid) {
self.grid = grid;
self.childScope = childScope;
};
self.setSelect = function(flag) {
if (angular.isDefined(self.grid)) {
if (flag !== self.grid.config.canSelectRows && flag !== self.grid.config.selectWithCheckboxonly) {
self.scope.canSelectRows = true;
self.scope.displaySelectionCheckbox = true;
self.grid.config.canSelectRows = flag;
self.grid.config.displaySelectionCheckbox = flag;
self.grid.rowFactory.rowConfig.canSelectRows = flag;
self.grid.rowFactory.filteredDataChanged();
}
}
}
};
$scope.selectToggle = new SelectToggle($scope);
*/
$scope.valueDetails = new Core.Dialog();

$scope.gridOptions = {
selectedItems: $scope.selectedItems,
Expand Down Expand Up @@ -72,10 +51,6 @@ module Jmx {
updateTableContents();
});

function operationComplete() {
updateTableContents();
}

/**
* Returns the toolBar template HTML to use for the current selection
*/
Expand Down Expand Up @@ -142,6 +117,21 @@ module Jmx {
return row.getProperty("objectName") ? "icon-cog" : "icon-folder-close";
};

$scope.openDetailView = (entity) => {
$scope.row = entity;
console.log("open detail view for key: " + entity.key);
var value = entity.value;
if (angular.isObject(value) && !angular.isArray(value)) {
console.log("Opening dialog");
$scope.valueDetails.open();
}
};


function operationComplete() {
updateTableContents();
}

function updateTableContents() {
// lets clear any previous queries just in case!
Core.unregister(jolokia, $scope);
Expand Down Expand Up @@ -277,7 +267,14 @@ module Jmx {
if (showAllAttributes || includePropertyValue(key, value)) {
// always skip keys which start with _
if (!key.startsWith("_")) {
properties.push({name: humanizeValue(key), value: value});
// lets format the ObjectName nicely
if (key === "ObjectName") {
value = unwrapObjectName(value);
}
var data = {key: key, name: humanizeValue(key), value: value};

generateSummaryAndDetail(data);
properties.push(data);
}
}
});
Expand All @@ -286,11 +283,39 @@ module Jmx {
data = properties;
}
$scope.gridData = data;

$scope.$apply();
}
}

function unwrapObjectName(value) {
var keys = Object.keys(value);
if (keys.length === 1 && keys[0] === "objectName") {
return value["objectName"];
}
return value;
}

function generateSummaryAndDetail(data) {
var value = data.value;
if (!angular.isArray(value) && angular.isObject(value)) {
var detailHtml = "<table class='table table-striped'>";
var summary = "";
var object = value;
var keys = Object.keys(value).sort();
angular.forEach(keys, (key) => {
var value = object[key];
detailHtml += "<tr><td>"
+ humanizeValue(key) + "</td><td>" + value + "</td></tr>";
summary += "" + humanizeValue(key) + ": " + value + " "
});
detailHtml += "</table>";
data.summary = summary;
data.detailHtml = detailHtml;
} else {
data.summary = value;
}
}

function includePropertyValue(key: string, value) {
return !angular.isObject(value);
}
Expand Down
2 changes: 1 addition & 1 deletion hawtio-web/src/main/webapp/app/jmx/js/jmxPlugin.ts
@@ -1,7 +1,7 @@
module Jmx {
var pluginName = 'jmx';

angular.module(pluginName, ['bootstrap', 'ngResource', 'ngGrid', 'hawtioCore']).config(($routeProvider) => {
angular.module(pluginName, ['bootstrap', 'ui.bootstrap', 'ui.bootstrap.modal', 'ngResource', 'ngGrid', 'hawtioCore']).config(($routeProvider) => {
$routeProvider.
when('/jmx/attributes', {templateUrl: 'app/jmx/html/attributes.html'}).
when('/jmx/operations', {templateUrl: 'app/jmx/html/operations.html'}).
Expand Down

0 comments on commit a5ccd29

Please sign in to comment.