Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix #518
  • Loading branch information
gashcrumb committed Sep 18, 2013
1 parent 6bed089 commit 60b1110
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 38 deletions.
4 changes: 2 additions & 2 deletions hawtio-web/src/main/webapp/app/fabric/html/container.html
Expand Up @@ -152,7 +152,7 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
</div>
</dl>
<dl class="dl-horizontal">
<div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true"></div>
<div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true" expanded="true"></div>
</dl>
</div>
</div>
Expand Down Expand Up @@ -232,7 +232,7 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
<button class="btn" ng-click="deleteProfileDialog.open()" ng-disabled="selectedProfiles.length == 0"
title="Removes the selected profiles from this container"><i class="icon-minus"></i></button>
</div>
<div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true"></div>
<div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true" expanded="true"></div>
</div>
</div>
</div>
Expand Down
71 changes: 37 additions & 34 deletions hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html
@@ -1,39 +1,42 @@
<div class="ng-cloak">
<div class="profile-list">
<table class="table table-striped">
<thead ng-show="showFilter">
<tr>
<th><input id="selector" type="checkbox" ng-model="selectedAll"></th>
<th>
<!--
<div class="control-group pull-left no-bottom-margin">
<label class="control-label no-bottom-margin"><strong>Name</strong></label>
</div>
-->
<div class="control-group pull-right">
<div class="controls">
<input type="text" class="search-query" ng-model="filterText" placeholder="Filter...">
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="profile in profiles" ng-show="showProfile(profile)">
<td>
<input ng-hide="useCircles" type="checkbox" ng-model="profile.selected">
<div ng-show="useCircles">
<i ng-show="!profile.selected" class="icon-circle-blank clickable" title="Not Selected" ng-click="profile.selected = true"></i>
<i ng-show="profile.selected" class="icon-circle clickable" title="Selected" ng-click="profile.selected = false"></i>
</div>
<div class="profile-selector-item" ng-show="showFilter">
<div class="profile-selector-checkbox">
<input id="selector" type="checkbox" ng-model="selectedAll">
</div>
<div class="profile-selector-name">
<input type="text" class="search-query" ng-model="filterText" placeholder="Filter...">
</div>
</div>
<ul>
<li class="no-list profile-selector-folder" ng-repeat="branch in tree" ng-show="showBranch(branch)">
<div class="expandable" ng-class="isOpen(branch)">
<div title="{{branch.path}}" class="title">
<i class="expandable-indicator folder"></i> <span ng-show="branch.path">{{branch.path.capitalize(true)}}</span><span ng-hide="branch.path">Unsorted</span>
</div>
<div class="expandable-body">
<ul>
<li class="no-list profile" ng-repeat="profile in branch.profiles" ng-show="showProfile(profile)">
<div class="profile-selector-item">

</td>
<td ng-class="getSelectedClass(profile)">
<a ng-click="goto(profile)">{{profile.id}}</a>
<a href="" ng-show="showLinks" ng-click="goto(profile)"><i class="icon-info-sign clickable pull-right" title="Details for {{profile.id}}"></i></a>
</td>
</tr>
</tbody>
</table>
<div class="inline-block profile-selector-checkbox">
<input ng-hide="useCircles" type="checkbox" ng-model="profile.selected">
<div ng-show="useCircles">
<i ng-show="!profile.selected" class="icon-circle-blank clickable" title="Not Selected" ng-click="profile.selected = true"></i>
<i ng-show="profile.selected" class="icon-circle clickable" title="Selected" ng-click="profile.selected = false"></i>
</div>
</div>

<div class="inline-block profile-selector-name" ng-class="getSelectedClass(profile)">
<a href="" ng-click="goto(profile)" title="Details for {{profile.id}}"><i class="icon-book green"></i> {{profile.name}}</a>
<a href="" class="profile-info" ng-show="showLinks" ng-click="goto(profile)"><i class="icon-info-sign clickable" title="Details for {{profile.id}}"></i></a>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
Expand Up @@ -15,6 +15,7 @@ module Fabric {
showLinks: '@',
showHeader: '@',
useCircles: '@',
expanded: '@',
excludedProfiles: '=',
includedProfiles: '='
};
Expand All @@ -29,12 +30,17 @@ module Fabric {
$scope.indeterminate = false;
$scope.showFilter = true;
$scope.useCircles = false;

$scope.expanded = false;
$scope.tree = [];

$scope.showProfile = (profile) => {
return $scope.filterText.isBlank() || profile.id.has($scope.filterText);
};

$scope.showBranch = (branch) => {
return $scope.filterText.isBlank() || branch.profiles.some((profile) => { return profile.id.has($scope.filterText) });
};

$scope.goto = (profile) => {
Fabric.gotoProfile(workspace, jolokia, localStorage, $location, $scope.versionId, profile);
};
Expand All @@ -61,10 +67,51 @@ module Fabric {
$scope.profiles = $scope.profiles.exclude((p) => { return $scope.includedProfiles.none((e) => { return e === p.id; })});
}

var paths = [];

$scope.profiles.each((profile) => {
var path = profile.id.split('-');
profile.name = path.last();
profile.path = path.exclude(profile.name).join(' / ');
paths.push(profile.path);
});

paths = paths.unique().sortBy('length').sortBy((n) => { return n; });
var tree = [];
paths.forEach((path) => {
var branch = {
expanded: $scope.expanded,
path: path,
profiles: $scope.profiles.filter((profile) => { return profile.path === path; })
};
tree.push(branch);
});
$scope.tree = tree;

Core.$apply($scope);
}
};


$scope.isOpen = (branch) => {
if ($scope.filterText !== '') {
return "opened";
}
if (branch.expanded) {
return "opened";
}
return "closed";
};


$scope.isOpenIcon = (branch) => {
if (branch.expanded) {
return "icon-folder-open";
}
return "icon-folder-closed";
};


$scope.$watch('includedProfiles', (newValue, oldValue) => {
if (newValue !== oldValue) {
$scope.init();
Expand Down
43 changes: 42 additions & 1 deletion hawtio-web/src/main/webapp/css/site-base.css
Expand Up @@ -135,12 +135,21 @@ i.expandable-indicator {
}
.expandable.opened i.expandable-indicator:before {
font-family: FontAwesome;
content: "\f078";
content: "\f078" !important;
}
.expandable.closed i.expandable-indicator:before {
font-family: FontAwesome;
content: "\f054";
}
.expandable.opened i.expandable-indicator.folder:before {
font-family: FontAwesome;
content: "\F07C" !important;
}
.expandable.closed i.expandable-indicator.folder:before {
font-family: FontAwesome;
content: "\F07B";
}

.expandable.opened .expandable-body {
display: inline-block;
margin-bottom: 3px;
Expand Down Expand Up @@ -1704,3 +1713,35 @@ dd.file-list {
opacity: 1.0;
}

.no-list {
list-style-type: none;
}

.profile-selector-item {
display: table;
}

.profile-selector-checkbox {
display: table-cell;
padding-right: 5px;
}

.profile-selector-name {
display: table-cell;
position: relative;
width: 100%;
}

.profile-info {
position: absolute;
right: 3px;
}

.profile-list ul {
margin-left: 0;
margin-bottom: 0;
}

.profile-list ul li .expandable .expandable-body {
margin-left: 16px;
}

0 comments on commit 60b1110

Please sign in to comment.