Skip to content

Commit

Permalink
A simpler gridster directive that thinly wraps it, needs to inline it…
Browse files Browse the repository at this point in the history 
…'s css though rather than sticking it in the <head></head>, also some commented out usage in the broker page
  • Loading branch information
@gashcrumb
gashcrumb committed Oct 4, 2013
1 parent 902b016 commit 00e5f05
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 2 deletions.
111 changes: 110 additions & 1 deletion hawtio-web/src/main/webapp/app/fabric/html/brokers.html
View file
@@ -1,5 +1,107 @@
<div ng-controller="Fabric.FabricBrokersController">

<script type="text/ng-template" id="widgetTemplate">
<div style="height: 100%">
<div class="widget-area mq-group" style="height: 100%; position: relative;">

<div class="widget-title" title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">
<div class="row-fluid">
<span class="title mq-group-icon">
<i class="icon-group"></i>
</span>
<span class="title mq-group-name">
Broker Group "{{group.id}}"
</span>
</div>
</div>

<div class="widget-body" style="position: absolute; top: 20px; bottom: 0; right: 0; left: 0; padding: 0;">
<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-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>

<ul>
<li ng-repeat="container in broker.containers">
<i title="{{getStatusTitle(container)}}"
ng-class='statusIcon(container)'></i>
<img ng-show="container.master" title="Apache ActiveMQ" src="app/fabric/img/message_broker.png">
<a href="" ng-click="showContainer(container)">{{container.id}}</a> / {{container.version}}
<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>
</li>
</ul>
<!--
<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>

</script>

<div class="tabbable hawtio-form-tabs">

<div class="tab-pane" title="Diagram">
<div>
<div class="mq-titles section-header">
Expand Down Expand Up @@ -107,6 +209,13 @@
</div>
</div>

<!--
<div class="tab-pane gridster" title="Gridster">
<div gridster grid-size="300" dimensions="300"></div>
</div>
-->


<div class="tab-pane" title="Tree">
<div>
<div class="mq-titles section-header">
Expand Down Expand Up @@ -224,4 +333,4 @@

</div>
<div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
</div>
</div>
38 changes: 37 additions & 1 deletion hawtio-web/src/main/webapp/app/fabric/js/brokers.ts
View file
@@ -1,6 +1,6 @@
module Fabric {

export function FabricBrokersController($scope, localStorage, $routeParams, $location, jolokia, workspace) {
export function FabricBrokersController($scope, localStorage, $routeParams, $location, jolokia, workspace, $compile, $templateCache) {

Fabric.initScope($scope, $location, jolokia, workspace);

Expand Down Expand Up @@ -43,7 +43,16 @@ module Fabric {
}

function onBrokerData(response) {

if (response) {

var responseJson = angular.toJson(response.value);
if ($scope.responseJson === responseJson) {
return;
}

$scope.responseJson = responseJson;

var brokers = response.value;

function findByIdOrCreate(collection, id, map, fn) {
Expand Down Expand Up @@ -95,6 +104,33 @@ module Fabric {
});
}
});


// add a new gridster rectangle if we don't already have one
/*
if (!$scope.widgets) {
$scope.widgets = [];
}
$scope.groups.forEach((group) => {
if (!$scope.widgets.any((g) => { return g.id === group.id })) {
var outer = $('<li style="list-style-type: none; position: absolute"></li>');
var child = $scope.$new();
child.group = group;
outer.html($compile($templateCache.get("widgetTemplate"))(child));
$scope.widgets.push({
id: group.id,
scope: child,
group: group,
widget: $scope.gridster.add_widget(outer, 2, 2)
});
}
});
*/

Core.$apply($scope);
}
}
Expand Down
65 changes: 65 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/gridster.ts
View file
@@ -0,0 +1,65 @@
module UI {

export class GridsterDirective {

public restrict = 'A';
public replace = true;

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

};

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

var widgetMargins = [6, 6];
var widgetBaseDimensions = [150, 150];
var gridSize = [150, 150];
var extraRows = 10;
var extraCols = 6;

/*
if (angular.isDefined($attrs['dimensions'])) {
var dimension = $attrs['dimensions'].toNumber();
widgetBaseDimensions = [dimension, dimension];
}
if (angular.isDefined($attrs['margins'])) {
var margins = $attrs['margins'].toNumber();
widgetMargins = [margins, margins];
}
if (angular.isDefined($attrs['gridSize'])) {
var size = $attrs['gridSize'].toNumber();
gridSize = [size, size];
}
*/

if (angular.isDefined($attrs['extraRows'])) {
extraRows = $attrs['extraRows'].toNumber();
}

if (angular.isDefined($attrs['extraCols'])) {
extraCols = $attrs['extraCols'].toNumber();
}

var grid =$('<ul style="margin: 0"></ul>');

var styleStr = '<style type="text/css">';

var styleStr = styleStr + '</style>';

$element.append($(styleStr));
$element.append(grid);

$scope.gridster = grid.gridster({
widget_margins: widgetMargins,
grid_size: gridSize,
extra_rows: extraRows,
extra_cols: extraCols
}).data('gridster');

};
}

}
2 changes: 2 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
View file
Expand Up @@ -26,6 +26,8 @@ module UI {
return new UI.FileUpload();
}).directive('expandable', () => {
return new UI.Expandable();
}).directive('gridster', () => {
return new UI.GridsterDirective();
}).directive('editableProperty', ($parse) => {
return new UI.EditableProperty($parse);
}).directive('hawtioViewport', () => {
Expand Down

0 comments on commit 00e5f05

Please sign in to comment.