Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bit of work on the MQ page
  • Loading branch information
gashcrumb committed Oct 7, 2013
1 parent 7c36208 commit fd9e59f
Show file tree
Hide file tree
Showing 7 changed files with 274 additions and 93 deletions.
163 changes: 87 additions & 76 deletions hawtio-web/src/main/webapp/app/fabric/html/brokers.html
@@ -1,4 +1,4 @@
<div class="row-fluid" ng-controller="Fabric.FabricBrokersController">
<div class="row-fluid mq-page" ng-controller="Fabric.FabricBrokersController">

<div class="span12 page-padded">
<div class="section-header">
Expand Down Expand Up @@ -31,91 +31,102 @@
<button class="btn btn-primary btn-large" ng-click="createBroker(null)">Create Broker Configuration</button>
</div>

<div class="mq-group-rectangle" ng-repeat="group in groups" ng-show="groupMatchesFilter(group)"
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>
<a ng-click="createBroker(group)" title="Create another broker configuration in this group">
<i class="icon-plus"></i>
</a>
</div>
<div class="mq-groups">

<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-group-rectangle" ng-repeat="group in groups" ng-show="groupMatchesFilter(group)"
title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers" >

<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>
<a href="" ng-click="createRequiredContainers(profile)">
<span class="badge {{profile.requireStyle}}">
{{profile.count}}
</span>
<i class="icon-plus" title="Create more containers of this profile"></i>

<div class="mq-group-rectangle-label">
<span class="mq-group-name" title="Group: {{group.id}}">
<i class="icon-group"></i> {{group.id}}
</span>
<a ng-click="createBroker(group)" title="Create another broker configuration in this group">
<i class="icon-plus"></i>
</a>
</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-profiles" hawtio-horizontal-viewport adjust-parent="true">
<div class="mq-profile-canvas" hawtio-row>
<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-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}}
<div class="mq-profile-rectangle-label">
<span class="mq-profile-name">
<i class="icon-book green"></i>
<a href="" ng-click="showProfile(profile)" title="{{profile.id}} / {{ profile.version}}">{{profile.id}}</a> / {{profile.version}}
</span>
<a class="mq-profile-create-container" href="" ng-click="createRequiredContainers(profile)" title="Create more containers of this profile">
<span class="badge {{profile.requireStyle}}">{{profile.count}}</span>
<i class="icon-plus"></i>
</a>
</div>

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

<i class="icon-plus clickable" ng-show="container.root && container.alive"
title="Create a new child container"
ng-click="createChildContainer(container)"></i>
<div class="mq-broker-rectangle" ng-repeat="broker in profile.brokers"
ng-show="brokerMatchesFilter(broker)"
title="Logical broker inside this profile">

<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 class="mq-broker-rectangle-label">
<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 ng-hide="broker.containers.length" class="mq-container-row">
<div class="mq-container-rectangle" title="No Containers, click to create some" ng-click="createRequiredContainers(profile)">
<div class="mq-container-rectangle-label">
<i class="icon-warning-sign red"></i>
</div>
</div>
</div>

<div ng-show="broker.containers.length" class="mq-container-row" hawtio-row>
<div class="mq-container-rectangle" ng-class="{master : container.master}"
ng-repeat="container in broker.containers"
ng-show="containerMatchesFilter(container)"
title="Container: {{container.id}}">

<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="showContainer(container)" title="Container: {{container.id}}"></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>
Expand Down
5 changes: 2 additions & 3 deletions hawtio-web/src/main/webapp/app/fabric/html/container.html
Expand Up @@ -50,9 +50,8 @@
<div ng-hide="loading">

<div class="fabric-page-header row-fluid">
<div class="span4">
<h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
</div>
<!-- TODO - rework this header in the css -->
<h2 style="display: inline-block; margin: 0"><i ng-class="statusIcon()"></i> Container: {{row.id}}</h2>
<div class="pull-right">
<button class="btn" ng-show="row.jolokiaUrl" ng-click="doConnect(container)"><i class="icon-signin"></i> Connect</button>
<button class="btn" ng-show="row.alive" ng-click="stop()"><i class="icon-off"></i> Stop</button>
Expand Down
15 changes: 15 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/helpers.ts
@@ -1,5 +1,7 @@
module UI {

export var scrollBarWidth:number = null;

/*
* Helper function to ensure a directive attribute has some default value
*/
Expand All @@ -16,4 +18,17 @@ module UI {
});
}

export function getScrollbarWidth() {
if (!angular.isDefined(UI.scrollBarWidth)) {
var div:any = document.createElement('div');
div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
div = div.firstChild;
document.body.appendChild(div);
UI.scrollBarWidth = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
}
return UI.scrollBarWidth;

}

}
27 changes: 27 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/row.ts
@@ -0,0 +1,27 @@
module UI {

// expand the element to accomodate a group of elements to prevent them from wrapping
export class DivRow {
public restrict = 'A';

public link = ($scope, $element, $attrs) => {

$element.get(0).addEventListener("DOMNodeInserted", () => {
var targets = $element.children();
var width = 0;
angular.forEach(targets, (target) => {
var el = (<any>angular).element(target);
switch(el.css('display')) {
case 'none':
break;
default:
width = width + el.outerWidth(true) + 5;
}
});
$element.width(width);
});

};
}

}
4 changes: 4 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
Expand Up @@ -32,6 +32,10 @@ module UI {
return new UI.EditableProperty($parse);
}).directive('hawtioViewport', () => {
return new UI.ViewportHeight();
}).directive('hawtioHorizontalViewport', () => {
return new UI.HorizontalViewport();
}).directive('hawtioRow', () => {
return new UI.DivRow();
}).run(function (helpRegistry) {
helpRegistry.addDevDoc("ui", 'app/ui/doc/developer.md');
});
Expand Down
26 changes: 17 additions & 9 deletions hawtio-web/src/main/webapp/app/ui/js/viewport.ts
Expand Up @@ -3,14 +3,6 @@ module UI {
export class ViewportHeight {
public restrict = 'A';

/*
public scope = {
targetId: '@hawtioViewport',
containingDiv: '@',
heightAdjust: '@'
};
*/

public link = ($scope, $element, $attrs) => {

var lastHeight = 0;
Expand Down Expand Up @@ -48,9 +40,25 @@ module UI {
Core.$apply($scope);
return false;
})
};
}

export class HorizontalViewport {
public restrict = 'A';

};
public link = ($scope, $element, $attrs) => {

var adjustParent = angular.isDefined($attrs['adjustParent']) && Core.parseBooleanValue($attrs['adjustParent']);

$element.get(0).addEventListener("DOMNodeInserted", () => {
var canvas = $element.children();
$element.height(canvas.outerHeight(true));
if (adjustParent) {
$element.parent().height($element.outerHeight(true) + UI.getScrollbarWidth());
}
});
};
}


}

0 comments on commit fd9e59f

Please sign in to comment.