Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Start adding multi-select for profiles, filter for containers and ens…
…ure select all only affects visible containers
  • Loading branch information
gashcrumb committed May 24, 2013
1 parent f523c0d commit 96a123f
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 37 deletions.
73 changes: 41 additions & 32 deletions hawtio-web/src/main/webapp/app/fabric/html/fabricView.html
@@ -1,10 +1,9 @@
<div ng-controller="Fabric.FabricViewController">
<div class="row-fluid fabric-view gridStyle">

<div class="row-fluid fabric-view gridStyle">

<div class="columns">


<!-- containers -->
<div id="center" class="column">
<div class="section-header">
Expand All @@ -17,27 +16,35 @@
<i class="icon-circle clickable" title="Select All" ng-click="selectAllContainers()"></i>

</div>
<div class="section-filter">
<input type="text" class="search-query" placeholder="Filter..." ng-model="containerIdFilter">
<i class="icon-remove clickable" title="Clear Filter" ng-click="containerIdFilter = ''"></i>
</div>
</div>

<div class="canvas">
<div class="container-section">

<div ng-repeat="container in containers" ng-show="filterContainer(container)">
<div class="box" ng-class="isSelectedContainer(container)" id="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}">
<div class="canvas">

<div ng-repeat="container in containers" ng-show="filterContainer(container)">
<div class="box" ng-class="isSelectedContainer(container)" id="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}">

<div class="box-left">
<div class="box-left">

<input type="checkbox" ng-model="container.selected">
<i ng-show="!container.selected" class="icon-circle-blank clickable" title="Not Selected" ng-click="container.selected = true"></i>
<i ng-show="container.selected" class="icon-circle clickable" title="Selected" ng-click="container.selected = false"></i>

<div ng-click="setActiveContainer(container)">
{{container.id}}
<div ng-click="setActiveContainer(container)">
{{container.id}}
</div>
</div>
</div>

<div class="box-right">
<i class="icon1point5x icon-signin clickable" ng-show="container.jolokiaUrl && container.alive" title="Open a new window and connect to this container" ng-click="connect(container)"></i>
<i class="icon1point5x" title="{{getTitle(container)}}" ng-class='statusIcon(container)'></i>
</div>
<div class="box-right">
<i class="icon1point5x icon-signin clickable" ng-show="container.jolokiaUrl && container.alive" title="Open a new window and connect to this container" ng-click="connect(container)"></i>
<i class="icon1point5x" title="{{getTitle(container)}}" ng-class='statusIcon(container)'></i>
</div>

</div>
</div>
</div>
</div>
Expand All @@ -55,27 +62,27 @@
<i class="icon-circle-blank clickable" tytpe="Clear Selection" ng-click="setActiveVersionId('')"></i>

<i class="icon-plus clickable"
title="Create new Version"
ng-click="createVersionDialog = true"></i>
title="Create new Version"
ng-click="createVersionDialog = true"></i>

<!--
<a ng-href="#/wiki/branch/{{version.id}}/view/" ng-show="hasFabricWiki()"
title="View, edit or create configuration files for the profiles in this version">
<i class="icon-edit"></i>
</a>-->

<i class="icon-minus clickable"
ng-disabled="versionCanBeDeleted()"
ng-click="deleteVersionDialog = true"
title="Delete this Version"></i>
<i class="icon-minus clickable"
ng-disabled="versionCanBeDeleted()"
ng-click="deleteVersionDialog = true"
title="Delete this Version"></i>


</div>
</div>
<div class="version-section">
</div>
</div>
<div class="version-section">
<div class="canvas">
<div ng-repeat="version in versions">
<div class="box" ng-class="isSelectedVersion(version.id)" id="version#{{version.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}" ng-click="setActiveVersionId(version.id)">
<div class="box" ng-class="isSelectedVersion(version.id)" id="version#{{version.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', scroll: true, helper: 'clone'}" ng-click="setActiveVersionId(version.id)">

{{version.id}} {{containersForVersion(version.id)}}

Expand All @@ -88,31 +95,33 @@
Profiles
</div>
<div class="section-controls">

<i class="icon-circle-blank clickable" tytpe="Clear Selection" ng-click="setActiveProfileId('')"></i>

<i class="icon-plus clickable" title="Create new Profile" ng-click="createProfileDialog = true"></i>

<!--
<a ng-href="#/wiki/branch/{{version.id}}/view/{{selected[0].id}}" class="btn" ng-disabled="selected.length == 0" ng-show="hasFabricWiki()"
title="View, edit or create configuration files for the profiles in this version"><i class="icon-edit"></i>
</a>-->

<i class="icon-minus clickable" title="Delete selected Profiles" ng-disabled="selected.length == 0 || selectedHasContainers()" ng-click="deleteProfileDialog = true"></i>
<i class="icon-minus clickable" title="Delete selected Profiles" ng-disabled="selected.length == 0 || selectedHasContainers()" ng-click="deleteProfileDialog = true"></i>

</div>
<div class="section-filter">
</div>
<div class="section-filter">
<input type="text" class="search-query" placeholder="Filter..." ng-model="profileIdFilter">
<i class="icon-remove clickable" title="Clear Filter" ng-click="profileIdFilter = ''"></i>
</div>
</div>
<div class="profile-section">
<div class="canvas">
<div ng-repeat="profile in profiles" ng-show="profile.id.startsWith(profileIdFilter, 0, false)">
<div class="box" ng-class="isSelectedProfile(profile.id)" id="profile#{{profile.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}">
<div class="box" ng-class="isSelectedProfile(profile.id)" id="profile#{{profile.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', scroll: true, helper: 'clone'}">

<div class="box-left">
<div class="profile-select" ng-click="setActiveProfileId(profile.id)">

<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 class="profile-select" title="{{profile.id}} {{containersForProfile(profile.id)}}" ng-click="setActiveProfileId(profile.id)">
{{profile.id}} {{containersForProfile(profile.id)}}
</div>
</div>
Expand Down Expand Up @@ -171,7 +180,7 @@
<div class="dialog-body">
<p>Are you sure you want to delete the selected profiles:</p>
<ol>
<li ng-repeat="profile in selected">{{profile.id}}</li>
<li ng-repeat="profile in selectedProfiles">{{profile.id}}</li>
</ol>
</div>
</div>
Expand Down
42 changes: 39 additions & 3 deletions hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts
Expand Up @@ -15,11 +15,13 @@ module Fabric {
$scope.versions = [];
$scope.containers = [];
$scope.selectedContainers = [];
$scope.selectedProfiles = [];
$scope.profiles = [];
$scope.dialogProfiles = [];
$scope.activeProfiles = [];

$scope.profileIdFilter = '';
$scope.containerIdFilter = '';


$scope.deleteVersionDialog = false;
Expand Down Expand Up @@ -95,10 +97,24 @@ module Fabric {
}
});

$scope.$watch('profiles', (oldValue, newValue) => {
if (oldValue !== newValue) {
if ($scope.profiles.length === 0) {
$scope.selectedProfiles = [];
} else {
$scope.selectedProfiles = $scope.profiles.filter((p) => { return p.selected; });
if ($scope.selectedProfiles.length > 0) {
$scope.activeProfileId = '';
}
}

}
}, true);

$scope.$watch('containers', (oldValue, newValue) => {
if (oldValue !== newValue) {
$scope.selectedContainers = $scope.containers.filter((c) => { return c.selected; });
console.log("$scope.selectedContainers", $scope.selectedContainers);

if ($scope.selectedContainers.length > 0) {
$scope.activeContainerId = '';
//$scope.activeVersionId = '';
Expand Down Expand Up @@ -270,6 +286,11 @@ module Fabric {


$scope.filterContainer = (container) => {

if (!container.id.startsWith($scope.containerIdFilter, 0, false)) {
return false;
}

if ($scope.activeVersionId &&
$scope.activeVersionId !== '' &&
container.versionId !== $scope.activeVersionId) {
Expand Down Expand Up @@ -335,12 +356,23 @@ module Fabric {
var answer = [];

version.profiles.each((p) => {

var profile = $scope.profiles.find((prof) => { return p === prof.id });

var selected = false;
if (profile && profile.version === version.id) {
selected = profile.selected;
}

answer.push({
id: p,
versionId: version.id
versionId: version.id,
selected: selected
});
});



return answer;
};

Expand Down Expand Up @@ -498,7 +530,11 @@ module Fabric {
};

$scope.selectAllContainers = () => {
$scope.containers.each((container) => { container.selected = true });
$scope.containers.each((container) => {
if ($scope.filterContainer(container)) {
container.selected = true;
}
});
}


Expand Down
27 changes: 25 additions & 2 deletions hawtio-web/src/main/webapp/css/site-base.less
Expand Up @@ -1422,6 +1422,12 @@ li.stacktrace {

}

.container-section {
height: 90%;
overflow-x: hidden;
overflow-y: auto;
}

.version-section {
height: 25%;
overflow-x: hidden;
Expand Down Expand Up @@ -1465,8 +1471,9 @@ li.stacktrace {
}

.box .box-left .profile-select {
top: -36px;
left: 0px;
top: -8px;
left: 12px;
text-overflow: ellipsis;
}

.box input[type='checkbox'] {
Expand All @@ -1491,6 +1498,11 @@ li.stacktrace {
right: 0px;
}

.box [class^='icon-circle'] {
position: relative;
top: -3px;
}

.box .box-left {
display: inline-block;
position: absolute;
Expand All @@ -1507,3 +1519,14 @@ li.stacktrace {
bottom: 14%;
}

.section-title {
display: inline-block;
}

.section-controls {
display: inline-block;
}

.section_filter {
display: inline-block;
}

0 comments on commit 96a123f

Please sign in to comment.