Skip to content

Commit

Permalink
#790 - show the destinations and consumers for each active and master…
Browse files Browse the repository at this point in the history 
… broker in the diagram. needs CSS lurve; but getting there
  • Loading branch information
@jstrachan
jstrachan committed Nov 28, 2013
1 parent ccf0d33 commit ff2dd17
Show file tree
Hide file tree
Showing 2 changed files with 244 additions and 30 deletions.
117 changes: 116 additions & 1 deletion hawtio-web/src/main/webapp/app/fabric/html/brokerDiagram.html
View file
Expand Up @@ -21,20 +21,26 @@
}

rect.graphbox {
fill: #DDD;
fill: #FFF;
}

rect.graphbox.frame {
stroke: #222;
stroke-width: 2px
}


/*

/*
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
*/

/*
path.link.group {
}

Expand All @@ -45,7 +51,9 @@
path.link.container {
stroke-dasharray: 0,2 1;
}
*/

/*
circle {
fill: #black;
}
Expand All @@ -72,7 +80,114 @@
stroke-width: 3px;
stroke-opacity: .8;
}
*/





/* only things directly related to the network graph should be here */

path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}

marker#brokerMaster {
stroke: red;
fill: red;
stroke-width: 1.5px;
}

circle.brokerMaster {
fill: #0c0;
}
circle.notActive {
fill: #c00;
}


path.link.group {
stroke: #ccc;
}
marker#group {
stroke: #ccc;
fill: #ccc;
}
circle.group {
fill: #eee;
stroke: #ccc;
}

circle.destination {
fill: #bbb;
stroke: #ccc;
}

circle.pinned {
stroke-width: 4.5px;
}

path.link.profile {
stroke-dasharray: 0,2 1;
stroke: #888;
}


marker#container {
}
circle.container {
stroke-dasharray: 0,2 1;
stroke: #888;
}
path.link.container {
stroke-dasharray: 0,2 1;
stroke: #888;
}


circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
cursor: pointer;
}

circle.closeMode {
cursor: crosshair;
}

path.link.destination {
stroke: #ccc;
}

path.link.producer {
stroke: #ccc;
}

path.link.consumer {
stroke: #ccc;
}


circle.hilited {
stroke-width: 3px;
}
.hilited {
stroke-width: 3px;
}

text {
font: 10px sans-serif;
pointer-events: none;
}

text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
</style>


Expand Down
157 changes: 128 additions & 29 deletions hawtio-web/src/main/webapp/app/fabric/js/brokerDiagram.ts
View file
Expand Up @@ -23,40 +23,57 @@ module Fabric {

$scope.groups = [];

function getOrAddNode(kind:string, id, createFn) {
var nodeId = "";
if (id) {
nodeId = kind + "_" + id;
var node = graphBuilder.getNode(nodeId);
if (!node) {
node = createFn();
node['id'] = nodeId;
node['type'] = kind;
if (!node['name']) {
node['name'] = id;
}
if (node) {
graphBuilder.addNode(node);
var containersToDelete = $scope.activeContainers || {};
$scope.activeContainers = {};

angular.forEach(brokers, (brokerStatus) => {
// only query master brokers which are provisioned correctly
brokerStatus.validContainer = brokerStatus.alive && brokerStatus.master && brokerStatus.provisionStatus === "success";

log.info("Broker status: " + angular.toJson(brokerStatus, true));

function getOrAddNode(typeName:string, id, properties, createFn) {
var node = null;
if (id) {
var nodeId = typeName + ":" + id;
node = graphBuilder.getNode(nodeId);
if (!node) {
var nodeValues = createFn();
node = angular.copy(properties);
angular.forEach(nodeValues, (value, key) => node[key] = value);

node['id'] = nodeId;
if (!node['type']) {
node['type'] = typeName;
}
if (!node['name']) {
node['name'] = id;
}
if (node) {
graphBuilder.addNode(node);
}
}
}
return node;
}
return nodeId;
}

function addLink(id1, id2, linkType) {
if (id1 && id2) {
graphBuilder.addLink(id1, id2, linkType);
function addLink(object1, object2, linkType) {
if (object1 && object2) {
var id1 = object1.id;
var id2 = object2.id;
if (id1 && id2) {
graphBuilder.addLink(id1, id2, linkType);
}
}
}
}

angular.forEach(brokers, (brokerStatus) => {
var groupId = brokerStatus.group;
var profileId = brokerStatus.profile;
var brokerId = brokerStatus.brokerName;
var containerId = brokerStatus.container;
var versionId = brokerStatus.version || "1.0";

var groupNodeId = getOrAddNode("group", groupId, () => {
var group = getOrAddNode("group", groupId, brokerStatus, () => {
return {
/*
navUrl: ,
Expand All @@ -73,7 +90,7 @@ module Fabric {
};
});

var profileNodeId = getOrAddNode("profile", profileId, () => {
var profile = getOrAddNode("profile", profileId, brokerStatus, () => {
return {
popup: {
title: "Profile: " + profileId,
Expand All @@ -82,28 +99,110 @@ module Fabric {
};
});

var brokerNodeId = getOrAddNode("broker", brokerId, () => {
var broker = getOrAddNode("broker", brokerId, brokerStatus, () => {
var master = brokerStatus.master;
return {
type: master ? "brokerMaster" : "broker",
popup: {
title: "Broker: " + brokerId,
title: (master ? "Master" : "Slave") + " Broker: " + brokerId,
content: "<p>" + brokerId + "</p>"
}
};
});

var containerNodeId = getOrAddNode("container", containerId, () => {
// TODO do we need to create a physical broker node per container and logical broker maybe?
var container = getOrAddNode("container", containerId, brokerStatus, () => {
return {
containerId: containerId,
popup: {
title: "Container: " + containerId,
content: "<p>" + containerId + " version: " + versionId + "</p>"
}
};
});


if (container && container.validContainer) {
var key = container.containerId;
$scope.activeContainers[key] = container;
delete containersToDelete[key];
}

// add the links...
addLink(groupNodeId, profileNodeId, "group");
addLink(profileNodeId, brokerNodeId, "broker");
addLink(brokerNodeId, containerNodeId, "container");
addLink(group, profile, "group");
addLink(profile, broker, "broker");
addLink(broker, container, "container");

// TODO delete any nodes from dead containers in containersToDelete


angular.forEach($scope.activeContainers, (container, id) => {
function onContainerJolokia(containerJolokia) {
if (containerJolokia) {
container.jolokia = containerJolokia;

function configureDestinationProperties(properties) {
var destinationType = properties.destinationType || "Queue";
var typeName = destinationType.toLowerCase();
properties.isQueue = !typeName.startsWith("t");
properties['type'] = typeName;
}

function getOrAddDestination(properties) {
var typeName = properties['type'];
var destinationName = properties.destinationName;
return getOrAddNode(typeName, destinationName, properties, () => {
return {
popup: {
title: (properties.destinationType || "Queue") + ": " + destinationName,
content: "<p>" + destinationName + " broker: " + (properties.brokerName || "") + "</p>"
}
};
});
}


// now lets query all the connections/consumers etc
containerJolokia.search("org.apache.activemq:endpoint=Consumer,*", onSuccess((response) => {
angular.forEach(response, (objectName) => {
//log.info("Got consumer: " + objectName + " on container: " + id);
var details = Core.parseMBean(objectName);
if (details) {
var properties = details['attributes'];
if (properties) {
log.info("Got consumer properties: " + angular.toJson(properties, true) + " on container: " + id);

configureDestinationProperties(properties);
var consumerId = properties.consumerId;
if (consumerId) {
var destination = getOrAddDestination(properties);
addLink(container, destination, "destination");
var consumer = getOrAddNode("consumer", consumerId, properties, () => {
return {
popup: {
title: "Consumer: " + consumerId,
content: "<p>" + consumerId + " client: " + (properties.clientId || "") + " broker: " + (properties.brokerName || "") + "</p>"
}
};
});
addLink(destination, consumer, "consumer");
}
}
}
});
$scope.graph = graphBuilder.buildGraph();
Core.$apply($scope);
}));
}
}

var containerJolokia = container.jolokia;
if (containerJolokia) {
onContainerJolokia(containerJolokia);
} else {
Fabric.containerJolokia(jolokia, id, onContainerJolokia);
}
})
});

$scope.graph = graphBuilder.buildGraph();
Expand Down

0 comments on commit ff2dd17

Please sign in to comment.