Skip to content

Commit

Permalink
first spike of a diagram layout of the MQ brokers; needs @gashcrumb's…
Browse files Browse the repository at this point in the history 
… CSS lurve though! :)
  • Loading branch information
@jstrachan
jstrachan committed Oct 4, 2013
1 parent 2f6eaee commit 902b016
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 3 deletions.
121 changes: 118 additions & 3 deletions hawtio-web/src/main/webapp/app/fabric/html/brokers.html
View file
@@ -1,4 +1,113 @@
<div ng-controller="Fabric.FabricBrokersController">
<div class="tabbable hawtio-form-tabs">
<div class="tab-pane" title="Diagram">
<div>
<div class="mq-titles section-header">
<div class="mq-filter">
<div class="section-filter">
<input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
<i class="icon-remove clickable" title="Clear Filter" ng-click="searchFilter = ''"></i>
</div>
</div>

<div class="section-controls">
<a href="" title="Create a new container" ng-click="createContainer()">
<i class="icon-plus"></i> Create Container
</a>
<a href="" ng-click="editRequirements.dialogOpen(null)"
title="Configure the minimum number of required instances for each profile. If you are on OpenShift or using an Auto Scaler they are then created automatically; otherwise click on the count button to manually provision required containers">
<i class="icon-resize-vertical"></i>
Scale
</a>
</div>
</div>


<div class="mq-group-rectangle" ng-repeat="group in groups" ng-show="groupMatchesFilter(profile)"
title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">

<div class="mq-group-rectangle-label">
<span class="title mq-group-icon">
<i class="icon-group"></i>
</span>
<span class="title mq-group-name">
{{group.id}}
</span>
</div>

<div class="mq-profile-rectangle" ng-repeat="profile in group.profiles"
title="Profile for running one or more logical brokers" ng-show="profileMatchesFilter(profile)">

<div class="mq-profile-rectangle-label">
<span class="title mq-profile-expander">
<i class="expandable-indicator" ng-show="profile.brokers.length"></i>
</span>
<span class="title mq-profile-icon">
<i class="icon-book"></i>
</span>
<span class="title mq-profile-name">
<a href="" ng-click="showProfile(profile)">{{profile.id}}</a> / {{profile.version}}
</span>
</div>

<div class="mq-broker-rectangle" ng-repeat="broker in profile.brokers"
ng-show="brokerMatchesFilter(broker)"
title="Logical broker inside this profile">

<div class="mq-broker-rectangle-label">
<span class="title mq-broker-expander">
<i class="expandable-indicator" ng-show="broker.containers.length"></i>
</span>
<span class="title mq-broker-icon">
<img title="Apache ActiveMQ" src="app/fabric/img/message_broker.png">
</span>
<span class="title mq-broker-name">
<a href="" ng-click="showBroker(broker)">{{broker.id}}</a>
</span>
</div>

<div class="mq-container-rectangle" ng-class="{master : container.master}"
ng-repeat="container in broker.containers"
ng-show="containerMatchesFilter(container)"
title="A container (JVM) which implements one or more logical brokers within this profile">
<div class="mq-container-rectangle-label" ng-class="{master : container.master}">
<i ng-show="!container.selected && showSelect" class="icon-circle-blank clickable"
title="Not Selected"
ng-click="container.selected = true"></i>
<i ng-show="container.selected && showSelect" class="icon-circle clickable"
title="Status of the container" ng-click="container.selected = false"></i>

<i class="clickable" title="{{getStatusTitle(container)}}"
ng-class='statusIcon(container)'
ng-click="container.selected = !container.selected"></i>

<span ng-click="container.selected = !container.selected">
<a ng-click="showContainer(container)">{{container.id}}</a> /
{{container.version}}
</span>

<i class="icon-cloud clickable" title="Ensemble member"
ng-click="showContainer(container)"
ng-show="isEnsembleContainer(container.id)"></i>

<i class="icon-plus clickable" ng-show="container.root && container.alive"
title="Create a new child container"
ng-click="createChildContainer(container)"></i>

<i class="icon-signin clickable" ng-show="container.jolokiaUrl && container.alive"
title="Open a new window and connect to this broker"
ng-click="doConnect(container)"></i>

<i class="icon-star mq-master" title="Master broker" ng-show="container.master"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="tab-pane" title="Tree">
<div>
<div class="mq-titles section-header">
<div class="mq-filter">
Expand All @@ -21,7 +130,8 @@
</div>
<div class="mq-group-list" ng-repeat="group in groups" ng-show="groupMatchesFilter(profile)">
<div class="expandable" model="group">
<div class="mq-group-row" title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">
<div class="mq-group-row"
title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">
<span class="title mq-group-expander">
<i class="expandable-indicator" ng-show="group.profiles.length"></i>
</span>
Expand Down Expand Up @@ -66,7 +176,8 @@
<ul>
<li class="no-list" ng-repeat="container in broker.containers"
ng-show="containerMatchesFilter(container)">
<div class="mq-container-row" title="A container (JVM) which implements one or more logical brokers within this profile">
<div class="mq-container-row"
title="A container (JVM) which implements one or more logical brokers within this profile">
<i ng-show="!container.selected && showSelect" class="icon-circle-blank clickable"
title="Not Selected"
ng-click="container.selected = true"></i>
Expand Down Expand Up @@ -108,5 +219,9 @@
</div>
</div>
</div>
<div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
</div>


</div>
<div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
</div>
93 changes: 93 additions & 0 deletions hawtio-web/src/main/webapp/css/site-base.css
View file
Expand Up @@ -1931,6 +1931,99 @@ i.mq-master {
color: orange;
}

.mq-group-rectangle, .mq-profile-rectangle, .mq-broker-rectangle, .mq-container-rectangle {
position: relative;

display: inline-block;
*display: inline;
/* IE7 inline-block hack */


margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;

border-left-width: 10px;
border-right-width: 10px;
border-top-width: 10px;

*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
*line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
*border: 0;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

.mq-group-rectangle {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
margin-top: 10px;
}

.mq-broker-rectangle {
}

.mq-container-rectangle .master {
background-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
border-color: #f89406 #f89406 #ad6704;
*background-color: #f89406;
}

.mq-broker-rectangle {
background-color: #bbddff;
background-image: -moz-linear-gradient(top, #bbddff, #88bbdd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbddff), to(#88bbdd));
background-image: -webkit-linear-gradient(top, #bbddff, #88bbdd);
background-image: -o-linear-gradient(top, #bbddff, #88bbdd);
background-image: linear-gradient(to bottom, #bbddff, #88bbdd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff88bbdd', GradientType=0);
border-color: #88bbdd #88bbdd #002a80;
*background-color: #88bbdd;
}

.mq-group-rectangle-label, .mq-profile-rectangle-label, .mq-broker-rectangle-label, .mq-container-rectangle-label {
}

/** dashboard */
.dashboard-link-row {
width: 100%;
Expand Down

0 comments on commit 902b016

Please sign in to comment.