Merge lp:~makyo/juju-gui/ambiguous-relations into lp:juju-gui/experimental

[Madison Scott-Clary]

Implement ambiguous relation menu for adding rels

Displays a menu of choices when adding a relation between two services would result in ambiguity, otherwise simply adds a relation. Also, a bit of minor test clean-up in charm config, due to floating point inequality.

https://codereview.appspot.com/6736051/

[Madison Scott-Clary (makyo)]

Reviewers: mp+130616_code.launchpad.net,

Message:
Please take a look.

Description:
Implement ambiguous relation menu for adding rels

Displays a menu of choices when adding a relation between two services
would result in ambiguity, otherwise simply adds a relation. Also, a
bit of minor test clean-up in charm config, due to floating point
inequality.

https://code.launchpad.net/~makyo/juju-gui/ambiguous-relations/+merge/130616

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/6736051/

Affected files:
   A [revision details]
   M app/templates/overview.handlebars
   M app/views/environment.js
   M lib/views/stylesheet.less
   M test/test_application_notifications.js
   M test/test_charm_configuration.js
   M test/test_environment_view.js

[Thiago Veronezi (tveronezi)]

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1449
app/views/environment.js:1449: var menu =
container.one('#ambiguous-relation-menu'),
If you are using ids you could simply use Y.one, right? Or you could use
a class instead.

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1463
app/views/environment.js:1463:
endpoints[m.id].forEach(function(endpoint) {
You could use handlebars to build the list for you. For example:

//remove old list, if any
menu.all('ul').remove();
.
.
.
//create new <ul><li></li>...<ul> list
var list = Templates.overviewRelationMenuList({
   endPoints: endpoints
});

list.all('li').on('click', ...

menu.append(list);
.
.
.

This way you remove some html elements from this js file. wdyt?

https://codereview.appspot.com/6736051/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6736051/diff/1/lib/views/stylesheet.less#newcode145
lib/views/stylesheet.less:145: #service-menu, #ambiguous-relation-menu {
You could remove the id and use both classes in your menu. Like...

<div class="service-menu ambiguous-relation-menu">
   <div class="triangle">&nbsp;</div>
     <ul/>
   </div>
</div>

So you can remove this new css declaration and do something like...

var menu = container.one('.ambiguous-relation-menu')

...in environment.js

https://codereview.appspot.com/6736051/

[Madison Scott-Clary (makyo)]

Thanks for the review, Thiago. See below for notes.

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1449
app/views/environment.js:1449: var menu =
container.one('#ambiguous-relation-menu'),
On 2012/10/19 18:09:29, thiago wrote:
> If you are using ids you could simply use Y.one, right? Or you could
use a class
> instead.

I don't think that using a class would buy me anything here. The
ambiguous relation menu is unique, and referred to by a unique id.
Convention in the past has been to access nodes through container.

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1463
app/views/environment.js:1463:
endpoints[m.id].forEach(function(endpoint) {
On 2012/10/19 18:09:29, thiago wrote:
> You could use handlebars to build the list for you. For example:

> //remove old list, if any
> menu.all('ul').remove();
> .
> .
> .
> //create new <ul><li></li>...<ul> list
> var list = Templates.overviewRelationMenuList({
> endPoints: endpoints
> });

> list.all('li').on('click', ...

> menu.append(list);
> .
> .
> .

> This way you remove some html elements from this js file. wdyt?

Done. I initially couldn't figure out how I'd do it with Handlebars
given that the click action references each individual endpoint set, but
I did it with node data.

https://codereview.appspot.com/6736051/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6736051/diff/1/lib/views/stylesheet.less#newcode145
lib/views/stylesheet.less:145: #service-menu, #ambiguous-relation-menu {
On 2012/10/19 18:09:29, thiago wrote:
> You could remove the id and use both classes in your menu. Like...

> <div class="service-menu ambiguous-relation-menu">
> <div class="triangle">&nbsp;</div>
> <ul/>
> </div>
> </div>

> So you can remove this new css declaration and do something like...

> var menu = container.one('.ambiguous-relation-menu')

> ...in environment.js

Done. Both #service-menu and #ambiguous-relation-menu are unique and
must be referred to that way because of the way they're controlled in
the view. However, I have added a 'environment-menu' class to each, and
then used that as the selector here.

https://codereview.appspot.com/6736051/

[lp:~makyo/juju-gui/ambiguous-relations]

198. By Madison Scott-Clary on 2012-10-19

Implement ambiguous relation menu for adding relations

199. By Madison Scott-Clary on 2012-10-19

Implement ambiguous relation menu for adding relations

200. By Madison Scott-Clary on 2012-10-19

Implement ambiguous relation menu for adding relations

[Madison Scott-Clary (makyo)]

Please take a look.

https://codereview.appspot.com/6736051/

[Benjamin Saller (bcsaller)]

Thanks for this. A number of things, some of which will be good talks
for next week. For now I think updating the HTML generation is a good
start and cards for the ux cases mentioned below.

One, we've chosen different paths for self.state and self.set('state',
...). We
should agree to a pattern and stick with it. My feeling is that instance
vars
were fine as we didn't depend on change events from Attribute
manipulation. We
now have enough state on the env graph that I'd like to create
ViewModels
around various operations and bind them to a Scene object. We're
scribbling
scale/zoom/transform, click actions, current actions etc. If we don't
contain
this better its only going to keep getting harder to develop.

UX:

I'd title the menu, it may not be clear to users what is happening w/o
some
'Add Relation...' menu entry as they may not be familiar with ambiguous
relations and their drag action just turned into something else.

Its now possible to have two relation between the same services. These
will
draw in the same visual space and remove relation will need a way to
control
the selection of which relation is being addressed. It would be a very
special
case to detect if there is more than one relation sharing the same
visual
space, I think a better solution is to develop a way that we can show
both
relations exist which is not possible now. We need a card around
addressing
this. The layout changes we plan to make must take this into account.
Additionally w/o the label disambiguation this case still won't be clear
in
many cases.

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1463
app/views/environment.js:1463:
endpoints[m.id].forEach(function(endpoint) {
On 2012/10/19 18:09:29, thiago wrote:
> You could use handlebars to build the list for you. For example:

> //remove old list, if any
> menu.all('ul').remove();
> .
> .
> .
> //create new <ul><li></li>...<ul> list
> var list = Templates.overviewRelationMenuList({
> endPoints: endpoints
> });

> list.all('li').on('click', ...

> menu.append(list);
> .
> .
> .

> This way you remove some html elements from this js file. wdyt?

Feeding the data to a template is the correct thing to do here. Single
element DOM node creation is ok, but we avoid generating structures
like this.

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1488
app/views/environment.js:1488: menu.addClass('active');
setStyles can do these in one call. It does seem like we should be
adding support for scale/translate to Box and be using that for
calculations like this. Even though this is an HTML element we should
still be able to wrap it in a box

box.scaledPosition(scale, translate) -> {x, y, w, h} as with .pos today

https://codereview.appspot.com/6736051/diff/1/app/views/environment.js#newcode1495
app/views/environment.js:1495: role: 'server' }],
I think you're right and we sort the endpoints, but we need to document
were taking advantage of this here, we shouldn't get client/server
wrong.

https://codereview.appspot.com/6736051/diff/1/app/views/envi...

[Kapil Thangavelu (hazmat)]

Looks pretty good. some minors below. could you a new card for the menu
scroll and positioning (ie. if too close to an edge, display on opposite
side).

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1076
app/views/environment.js:1076: .ambiguousAddRelationTest(endpoint, self,
rect);
i'd suggest renaming this method, just to avoid the test parlance
outside of unit testing. maybe... addRelationEndpointCheck

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1476
app/views/environment.js:1476: // Add a cancel item.
The cancel item is better at the end, preferably styled as a dialog
cancel button or with red/differentiating text.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1477
app/views/environment.js:1477: menu.one('.cancel').on('click',
function(evt) {
The menu should also cancel on click outside, the same way the invalid
target fadeout works.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1483
app/views/environment.js:1483: var tr = view.zoom.translate(),
like the service menu this should also track roughly with the service
container on zoom/pan (the menu shouldn't resize though on zoom).

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1489
app/views/environment.js:1489: // Create a relation with the only
available endpoint.
i think this is better structured with the second clause upfront with a
return at the end of the block, and then the first block can become
dedented.

https://codereview.appspot.com/6736051/diff/3002/test/test_environment_view.js
File test/test_environment_view.js (right):

https://codereview.appspot.com/6736051/diff/3002/test/test_environment_view.js#newcode309
test/test_environment_view.js:309: add_rel =
container.one('#service-menu .add-relation'),
indent looks a little off here.

https://codereview.appspot.com/6736051/

[Madison Scott-Clary (makyo)]

Cards created in FrontPage.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1076
app/views/environment.js:1076: .ambiguousAddRelationTest(endpoint, self,
rect);
On 2012/10/19 21:48:58, hazmat wrote:
> i'd suggest renaming this method, just to avoid the test parlance
outside of
> unit testing. maybe... addRelationEndpointCheck

Done.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1476
app/views/environment.js:1476: // Add a cancel item.
On 2012/10/19 21:48:58, hazmat wrote:
> The cancel item is better at the end, preferably styled as a dialog
cancel
> button or with red/differentiating text.

Done.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1477
app/views/environment.js:1477: menu.one('.cancel').on('click',
function(evt) {
On 2012/10/19 21:48:58, hazmat wrote:
> The menu should also cancel on click outside, the same way the invalid
target
> fadeout works.

Done.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1483
app/views/environment.js:1483: var tr = view.zoom.translate(),
On 2012/10/19 21:48:58, hazmat wrote:
> like the service menu this should also track roughly with the service
container
> on zoom/pan (the menu shouldn't resize though on zoom).

Done.

https://codereview.appspot.com/6736051/diff/3002/app/views/environment.js#newcode1489
app/views/environment.js:1489: // Create a relation with the only
available endpoint.
On 2012/10/19 21:48:58, hazmat wrote:
> i think this is better structured with the second clause upfront with
a return
> at the end of the block, and then the first block can become dedented.

Done.

https://codereview.appspot.com/6736051/

[Madison Scott-Clary (makyo)]

*** Submitted:

Implement ambiguous relation menu for adding rels

Displays a menu of choices when adding a relation between two services
would result in ambiguity, otherwise simply adds a relation. Also, a
bit of minor test clean-up in charm config, due to floating point
inequality.

R=thiago, benjamin.saller, hazmat
CC=
https://codereview.appspot.com/6736051

https://codereview.appspot.com/6736051/

[Kapil Thangavelu (hazmat)]

There's still some minors in the this branch fwiw.. Relation cancel text
should read 'Cancel' not 'None'. The pending relation line should continue
to be displayed while the pending display menu is active. The relation
pairs shoulds shown should be sorted (deterministic order), and there's no
need to indent the pairs.

-k

On Sat, Oct 20, 2012 at 8:21 PM, Matthew Scott
<email address hidden>wrote:

> *** Submitted:
>
> Implement ambiguous relation menu for adding rels
>
> Displays a menu of choices when adding a relation between two services
> would result in ambiguity, otherwise simply adds a relation. Also, a
> bit of minor test clean-up in charm config, due to floating point
> inequality.
>
> R=thiago, benjamin.saller, hazmat
> CC=
> https://codereview.appspot.com/6736051
>
>
> https://codereview.appspot.com/6736051/
>
> --
>
> https://code.launchpad.net/~makyo/juju-gui/ambiguous-relations/+merge/130616
> Your team Juju GUI Hackers is requested to review the proposed merge of
> lp:~makyo/juju-gui/ambiguous-relations into lp:juju-gui.
>

[Madison Scott-Clary (makyo)]

These should be separate cards if they did not make it into the review. I'm shut down for the night, I'll see about making them tomorrow prior to travel.

~Matthew Scott

PGP key: http://drab-makyo.com/pgp/

(Sent from my phone, responses may be delayed; forgive any typing errors)

On Oct 21, 2012, at 6:13 PM, Kapil Thangavelu <email address hidden> wrote:

> There's still some minors in the this branch fwiw.. Relation cancel text
> should read 'Cancel' not 'None'. The pending relation line should continue
> to be displayed while the pending display menu is active. The relation
> pairs shoulds shown should be sorted (deterministic order), and there's no
> need to indent the pairs.
>
> -k
>
>
> On Sat, Oct 20, 2012 at 8:21 PM, Matthew Scott
> <email address hidden>wrote:
>
>> *** Submitted:
>>
>> Implement ambiguous relation menu for adding rels
>>
>> Displays a menu of choices when adding a relation between two services
>> would result in ambiguity, otherwise simply adds a relation. Also, a
>> bit of minor test clean-up in charm config, due to floating point
>> inequality.
>>
>> R=thiago, benjamin.saller, hazmat
>> CC=
>> https://codereview.appspot.com/6736051
>>
>>
>> https://codereview.appspot.com/6736051/
>>
>> --
>>
>> https://code.launchpad.net/~makyo/juju-gui/ambiguous-relations/+merge/130616
>> Your team Juju GUI Hackers is requested to review the proposed merge of
>> lp:~makyo/juju-gui/ambiguous-relations into lp:juju-gui.
>
> --
> https://code.launchpad.net/~makyo/juju-gui/ambiguous-relations/+merge/130616
> You are the owner of lp:~makyo/juju-gui/ambiguous-relations.

=== added file 'app/templates/ambiguousRelationList.handlebars'
--- app/templates/ambiguousRelationList.handlebars	1970-01-01 00:00:00 +0000
+++ app/templates/ambiguousRelationList.handlebars	2012-10-19 19:19:23 +0000
@@ -0,0 +1,12 @@
+<ul>
+    <li class="cancel">None</li>
+    {{#relationslist endpoints}}
+    <li
+        data-startservice="{{start.service}}"
+        data-startname="{{start.name}}"
+        data-endservice="{{end.service}}"
+        data-endname="{{end.name}}">
+        {{start.service}}:{{start.name}} &rarr; {{end.service}}:{{end.name}}
+    </li>
+    {{/relationslist}}
+</ul>

=== modified file 'app/templates/overview.handlebars'
--- app/templates/overview.handlebars	2012-10-11 10:49:21 +0000
+++ app/templates/overview.handlebars	2012-10-19 19:19:23 +0000
@@ -1,7 +1,7 @@
 <div id="overview">
     <div id="canvas" class="crosshatch-background">
-        <div id="service-menu">
-            <div id="service-menu-triangle">&nbsp;</div>
+        <div class="environment-menu" id="service-menu">
+            <div class="triangle">&nbsp;</div>
             <ul>
                 <li class="view-service">View</li>
                 <li class="add-relation">Build Relation</li>
@@ -9,6 +9,10 @@
                 <li class="destroy-service">Destroy</li>
             </ul>
         </div>
+        <div class="environment-menu" id="ambiguous-relation-menu">
+            <div class="triangle">&nbsp;</div>
+            <ul/>
+        </div>
     </div>
     <div id="overview-tasks">
         <div class="controls yui3-skin-sam">

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-18 17:52:44 +0000
+++ app/views/environment.js	2012-10-19 19:19:23 +0000
@@ -1016,7 +1016,7 @@
           if (curr_action === 'show_service') {
             this.set('currentServiceClickAction', 'addRelationStart');
           } else if (curr_action === 'addRelationStart' ||
-              curr_action === 'addRelationEnd') {
+              curr_action === 'ambiguousAddRelationTest') {
             this.set('currentServiceClickAction', 'toggleControlPanel');
           } // Otherwise do nothing.
         },
@@ -1073,7 +1073,7 @@
           // If we landed on a rect, add relation, otherwise, cancel.
           if (rect) {
             self.service_click_actions
-            .addRelationEnd(endpoint, self, rect);
+            .ambiguousAddRelationTest(endpoint, self, rect);
           } else {
             // TODO clean up, abstract
             self.cancelRelationBuild();
@@ -1395,15 +1395,16 @@
             var db = view.get('db'),
                 app = view.get('app'),
                 service = view.serviceForBox(m),
+                endpoints = models.getEndpoints(
+                    service, app.serviceEndpoints, db),
 
                 /* Transform endpoints into a list of
                  * relatable services (to the service in m)
                  */
                 possible_relations = Y.Array.map(
                     Y.Array.flatten(Y.Object.values(
-                        models.getEndpoints(
-                            service, app.serviceEndpoints, db))),
-                            function(ep) {return ep.service;}),
+                        endpoints)),
+                    function(ep) {return ep.service;}),
                 invalidRelationTargets = {};
 
             // Iterate services and invert the possibles list.
@@ -1430,15 +1431,86 @@
 
             // Store start service in attrs.
             view.set('addRelationStart_service', m);
+            // Store possible endpoints.
+            view.set('addRelationStart_possibleEndpoints', endpoints);
             // Set click action.
-            view.set('currentServiceClickAction', 'addRelationEnd');
+            view.set('currentServiceClickAction', 'ambiguousAddRelationTest');
+          },
+
+          /*
+           * Test if the pending relation is ambiguous.  Display a menu if so,
+           * create the relation if not.
+           */
+          ambiguousAddRelationTest: function(m, view, context) {
+            var endpoints = view.get('addRelationStart_possibleEndpoints'),
+                container = view.get('container');
+            if (endpoints[m.id].length > 1) {
+              // Display menu with available endpoints.
+              var menu = container.one('#ambiguous-relation-menu'),
+                  list = menu.one('ul');
+              list.empty();
+              menu.one('ul').remove(true);
+
+              menu.append(Templates
+                  .ambiguousRelationList({endpoints: endpoints[m.id]}));
+
+              // For each endpoint choice, bind an an event to 'click' to
+              // add the specified relation.
+              menu.all('li').on('click', function(evt) {
+                if (evt.currentTarget.hasClass('cancel')) {
+                  return;
+                }
+                var el = evt.currentTarget,
+                    endpoints_item = [
+                      [el.getData('startservice'), {
+                        name: el.getData('startname'),
+                        role: 'server' }],
+                      [el.getData('endservice'), {
+                        name: el.getData('endname'),
+                        role: 'client' }]];
+                menu.removeClass('active');
+                view.service_click_actions
+                  .addRelationEnd(endpoints_item, view, context);
+              });
+
+              // Add a cancel item.
+              menu.one('.cancel').on('click', function(evt) {
+                menu.removeClass('active');
+                view.cancelRelationBuild();
+              });
+
+              // Display the menu at the service endpoint.
+              var tr = view.zoom.translate(),
+                  z = view.zoom.scale();
+              menu.setStyle('top', m.y * z + tr[1]);
+              menu.setStyle('left', m.x * z + m.w * z + tr[0]);
+              menu.addClass('active');
+            } else {
+              // Create a relation with the only available endpoint.
+              var ep = endpoints[m.id][0],
+                  endpoints_item = [
+                    [ep[0].service, {
+                      name: ep[0].name,
+                      role: 'server' }],
+                    [ep[1].service, {
+                      name: ep[1].name,
+                      role: 'client' }]];
+              view.service_click_actions
+                .addRelationEnd(endpoints_item, view, context);
+            }
           },
 
           /*
            * Fired when clicking the second service is clicked in the
            * add relation flow.
+           *
+           * :param endpoints: array of two endpoints, each in the form
+           *   ['service name', {
+           *     name: 'endpoint type',
+           *     role: 'client or server'
+           *   }]
            */
-          addRelationEnd: function(m, view, context) {
+          addRelationEnd: function(endpoints, view, context) {
             // Redisplay all services
             view.cancelRelationBuild();
 
@@ -1447,9 +1519,9 @@
                 env = view.get('env'),
                 db = view.get('db'),
                 source = view.get('addRelationStart_service'),
-                relation_id = 'pending:' + source.id + m.id;
+                relation_id = 'pending:' + endpoints[0][0] + endpoints[1][0];
 
-            if (m.id === source.id) {
+            if (endpoints[0][0] === endpoints[1][0]) {
               view.set('currentServiceClickAction', 'toggleControlPanel');
               return;
             }
@@ -1459,10 +1531,7 @@
             db.relations.create({
               relation_id: relation_id,
               display_name: 'pending',
-              endpoints: [
-                [source.id, {name: 'pending', role: 'server'}],
-                [m.id, {name: 'pending', role: 'client'}]
-              ],
+              endpoints: endpoints,
               pending: true
             });
 
@@ -1473,8 +1542,8 @@
             // Fire event to add relation in juju.
             // This needs to specify interface in the future.
             env.add_relation(
-                source.id,
-                m.id,
+                endpoints[0][0] + ':' + endpoints[0][1].name,
+                endpoints[1][0] + ':' + endpoints[1][1].name,
                 Y.bind(this._addRelationCallback, this, view, relation_id)
             );
             view.set('currentServiceClickAction', 'toggleControlPanel');

=== modified file 'app/views/utils.js'
--- app/views/utils.js	2012-10-18 20:19:26 +0000
+++ app/views/utils.js	2012-10-19 19:19:23 +0000
@@ -852,6 +852,17 @@
         Y.Markdown.toHTML(text));
   });
 
+  /*
+   * Build a list of relation types given a list of endpoints.
+   */
+  Y.Handlebars.registerHelper('relationslist', function(endpoints, options) {
+    var out = '';
+    endpoints.forEach(function(ep) {
+      out += options.fn({start: ep[0], end: ep[1]});
+    });
+    return out;
+  });
+
 }, '0.1.0', {
   requires: ['base-build',
     'handlebars',

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-18 17:50:22 +0000
+++ lib/views/stylesheet.less	2012-10-19 19:19:23 +0000
@@ -142,7 +142,7 @@
 }
 
 
-#service-menu {
+.environment-menu {
     @border_radius: 20px;
     @background_color: #282421;
 
@@ -166,7 +166,7 @@
         display: block;
     }
 
-    #service-menu-triangle {
+    .triangle {
         position: absolute;
         top: 62px;
         left: -12px;

=== modified file 'test/test_application_notifications.js'
--- test/test_application_notifications.js	2012-10-15 18:18:52 +0000
+++ test/test_application_notifications.js	2012-10-19 19:19:23 +0000
@@ -310,7 +310,11 @@
              };
 
        views.environment.prototype.service_click_actions.addRelationEnd
-           .apply(view, [{id: 1}, view]);
+           .apply(view, [
+         [
+          ['s1', {name: 'n', role: 'client'}],
+          ['s2', {name: 'n', role: 'server'}]],
+         view]);
 
        assertNotificationNumber('1');
 

=== modified file 'test/test_charm_configuration.js'
--- test/test_charm_configuration.js	2012-10-18 00:27:33 +0000
+++ test/test_charm_configuration.js	2012-10-19 19:19:23 +0000
@@ -232,7 +232,8 @@
     // The simulate module does not support firing scroll events so we call
     // the associated method directly.
     view._moveTooltip();
-    tooltip.get('boundingBox').getY().should.equal(originalY - 10);
+    Math.floor(tooltip.get('boundingBox').getY())
+      .should.equal(Math.floor(originalY - 10));
   });
 
   it('must hide the tooltip when its field scrolls away', function() {

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2012-10-15 10:07:49 +0000
+++ test/test_environment_view.js	2012-10-19 19:19:23 +0000
@@ -299,28 +299,46 @@
 
     it('must be able to add a relation from the control panel',
        function() {
+         var view = new views.environment({
+           container: container,
+           app: {serviceEndpoints: {}},
+           db: db,
+           env: env
+         }).render();
+         var service = container.one('.service'),
+         add_rel = container.one('#service-menu .add-relation'),
+         after_evt;
+
          // Mock endpoints
          var existing = models.getEndpoints;
          models.getEndpoints = function() {
-           return {requires: [],
-             provides: []};
+           var endpoints = {},
+               serviceName = service.one('.name')
+                 .getDOMNode().firstChild.nodeValue,
+               nextServiceName = service.next().one('.name')
+                 .getDOMNode().firstChild.nodeValue;
+           endpoints[nextServiceName] = [
+             [
+              {
+                service: serviceName,
+                name: 'relName',
+                type: 'relType'
+              },
+              {
+                service: nextServiceName,
+                name: 'relName',
+                type: 'relType'
+              }
+             ]
+           ];
+           return endpoints;
          };
 
-         var view = new views.environment({
-           container: container,
-           app: {serviceEndpoints: {}},
-           db: db,
-           env: env
-         }).render();
-         var service = container.one('.service'),
-         add_rel = container.one('#service-menu .add-relation'),
-         after_evt;
-
          service.simulate('click');
          add_rel.simulate('click');
          container.all('.selectable-service')
                .size()
-               .should.equal(1);
+               .should.equal(2);
          service.next().simulate('click');
          container.all('.selectable-service').size()
             .should.equal(0);