Skip to content

Commit

Permalink
#790 add the ability to show/hide different things on the diagram (e.…
Browse files Browse the repository at this point in the history 
…g. show/hide topics/queues/producers/consumers
  • Loading branch information
@jstrachan
jstrachan committed Nov 29, 2013
1 parent 43eb012 commit 3075624
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 155 deletions.
158 changes: 102 additions & 56 deletions hawtio-web/src/main/webapp/app/fabric/html/brokerDiagram.html
View file
@@ -1,43 +1,43 @@
<style type="text/css">

div#pop-up {
display: none;
position:absolute;
color: white;
font-size: 14px;
background: rgba(0,0,0,0.6);
padding: 5px 10px 5px 10px;
-moz-border-radius: 8px 8px;
border-radius: 8px 8px;
}
div#pop-up {
display: none;
position: absolute;
color: white;
font-size: 14px;
background: rgba(0, 0, 0, 0.6);
padding: 5px 10px 5px 10px;
-moz-border-radius: 8px 8px;
border-radius: 8px 8px;
}

div#pop-up-title {
font-size: 15px;
margin-bottom: 4px;
font-weight: bolder;
}
div#pop-up-content {
font-size: 12px;
}
div#pop-up-title {
font-size: 15px;
margin-bottom: 4px;
font-weight: bolder;
}

rect.graphbox {
fill: #FFF;
}
div#pop-up-content {
font-size: 12px;
}

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

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

/*
/*

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

/*
Expand Down Expand Up @@ -82,10 +82,6 @@
}
*/





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

path.link {
Expand All @@ -101,20 +97,22 @@
}

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

circle.notActive {
fill: #c00;
fill: #c00;
}


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

marker#group {
stroke: #ccc;
fill: #ccc;
}

circle.group {
fill: #eee;
stroke: #ccc;
Expand All @@ -130,32 +128,32 @@
}

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


marker#container {
}

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

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


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

circle.closeMode {
cursor: crosshair;
cursor: crosshair;
}

path.link.destination {
Expand Down Expand Up @@ -186,10 +184,10 @@
stroke: #ccc;
}


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

.hilited {
stroke-width: 3px;
}
Expand Down Expand Up @@ -218,15 +216,62 @@
</div>

<div class="section-controls">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Show &nbsp;<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.consumer"> Consumers
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.producer"> Producers
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.queue"> Queues
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.topic"> Topics
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.group"> Broker Groups
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.profile"> Profiles
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.slave"> Brokers
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.slave"> Slave Brokers
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" ng-model="showFlags.container"> Containers
</label>
</li>
</ul>

<a ng-href="#/fabric/mq/brokers{{hash}}" title="View the broker and container diagram">
<i class="icon-edit"></i> Configuration
</a>
<a href="" title="Create a new broker configuration" ng-click="createBroker(null)">
<i class="icon-plus"></i> Broker
</a>
<a href="" title="Create a new container" ng-click="createContainer()">
<i class="icon-plus"></i> Container
</a>
</div>
</div>
</div>
Expand All @@ -239,7 +284,8 @@

<div class="row-fluid">
<div class="span12 canvas">
<div hawtio-force-graph graph="graph" link-distance="50" charge="-120" nodesize="10" style="min-height: 800px"></div>
<div hawtio-force-graph graph="graph" link-distance="50" charge="-120" nodesize="10"
style="min-height: 800px"></div>
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions hawtio-web/src/main/webapp/app/fabric/html/brokers.html
View file
Expand Up @@ -9,15 +9,15 @@
</div>

<div class="section-controls">
<a ng-href="#/fabric/mq/brokerDiagram{{hash}}" title="View the network diagram of the brokers and their clients" ng-show="groups.length > 1">
<i class="icon-picture"></i> Diagram
</a>
<a href="" title="Create a new broker configuration" ng-click="createBroker(null)">
<i class="icon-plus"></i> Broker
</a>
<a href="" title="Create a new container" ng-click="createContainer()">
<i class="icon-plus"></i> Container
</a>
<a ng-href="#/fabric/mq/brokerDiagram{{hash}}" title="View the network diagram of the brokers and their clients" ng-show="groups.length > 1">
<i class="icon-picture"></i> Diagram
</a>
</div>

</div>
Expand Down

0 comments on commit 3075624

Please sign in to comment.