Merge lp:~gary/juju-gui/env-help-text into lp:juju-gui/experimental

[Gary Poster]

Help on empty canvas

The env view should show some help text when the canvas is empty.

Landing work from bcsaller that I modified.

https://codereview.appspot.com/8961049/

[Gary Poster (gary)]

Reviewers: mp+161418_code.launchpad.net,

Message:
Please take a look.

Description:
Help on empty canvas

The env view should show some help text when the canvas is empty.

Landing work from bcsaller that I modified.

https://code.launchpad.net/~gary/juju-gui/env-help-text/+merge/161418

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   A app/assets/images/empty_canvas.png
   M app/assets/javascripts/d3-components.js
   M app/store/endpoints.js
   M app/templates/overview.handlebars
   M app/views/environment.js
   M app/widgets/overlay-indicator.js
   M lib/views/stylesheet.less
   M test/test_environment_view.js
   M test/test_panzoom.js
   M test/test_service_module.js
   M test/utils.js

[Richard Harding (rharding)]

LGTM Thanks for updating.

https://codereview.appspot.com/8961049/

[Gary Poster (gary)]

*** Submitted:

Help on empty canvas

The env view should show some help text when the canvas is empty.

Landing work from bcsaller that I modified.

R=rharding
CC=
https://codereview.appspot.com/8961049

https://codereview.appspot.com/8961049/

=== added file 'app/assets/images/empty_canvas.png'
Binary files app/assets/images/empty_canvas.png	1970-01-01 00:00:00 +0000 and app/assets/images/empty_canvas.png	2013-04-29 12:42:28 +0000 differ
=== modified file 'app/assets/javascripts/d3-components.js'
--- app/assets/javascripts/d3-components.js	2013-03-25 15:39:48 +0000
+++ app/assets/javascripts/d3-components.js	2013-04-29 12:42:28 +0000
@@ -346,6 +346,9 @@
      * @chainable
      **/
     recordSubscription: function(module, subscription) {
+      if (typeof module === 'string') {
+        module = this.modules[module];
+      }
       if (!(module.name in this.events)) {
         throw 'Unable able to recordSubscription, module not added.';
       }

=== modified file 'app/store/endpoints.js'
--- app/store/endpoints.js	2013-04-24 14:39:32 +0000
+++ app/store/endpoints.js	2013-04-29 12:42:28 +0000
@@ -143,8 +143,12 @@
             }
 
             if (!charm) {
-              charm = db.charms.add({id: charm_id})
-                .load(env,
+              // XXX: temp hack to work around failures here;
+              charm = db.charms.add({id: charm_id});
+              if (!charm) {
+                charm = db.charms.getById(charm_id);
+              }
+              charm.load(env,
                   // If views are bound to the charm model, firing "update" is
                   // unnecessary, and potentially even mildly harmful.
                   function(err, result) { db.fire('update'); });

=== modified file 'app/templates/overview.handlebars'
--- app/templates/overview.handlebars	2013-02-26 21:34:28 +0000
+++ app/templates/overview.handlebars	2013-04-29 12:42:28 +0000
@@ -1,5 +1,16 @@
 <div class="topology">
     <div class="crosshatch-background topology-canvas">
+        <div id="environment-help" style="display: none;">
+            <div class="vertical-center-floater"></div>
+            <div class="content">
+                <h1>Add your first charm here!</h1>
+                <i class="sprite empty_canvas"></i>
+                <p>
+                Click on a charm on the left to view its details. Select the
+                Add button to add it to this canvas.
+                </p>
+            </div>
+        </div>
         <div class="environment-menu" id="service-menu">
             <div class="triangle">&nbsp;</div>
             <ul>

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2013-04-09 20:22:01 +0000
+++ app/views/environment.js	2013-04-29 12:42:28 +0000
@@ -52,7 +52,9 @@
          */
         render: function() {
           var container = this.get('container'),
-              topo = this.topo;
+              topo = this.topo,
+              db = this.get('db'),
+              self = this;
 
           // If we need the initial HTML template, take care of that.
           if (!this._rendered) {
@@ -83,11 +85,37 @@
             this.topo = topo;
           }
 
+          topo.recordSubscription(
+              'ServiceModule',
+              db.services.after('remove', Y.bind(this.updateIndicator, this)));
+
+          topo.recordSubscription(
+              'ServiceModule',
+              db.services.after('add', Y.bind(this.updateIndicator, this)));
+
           topo.render();
+          topo.once('rendered', Y.bind(this.updateIndicator, this));
           return this;
         },
 
         /**
+         * Support for canvas help function (when canvas is empty).
+         *
+         * @method updateIndicator
+         */
+        updateIndicator: function(evt) {
+          var helpText = this.get('container').one('#environment-help'),
+              db = this.get('db'),
+              services = db.services;
+          if (helpText) {
+            if (services.size() === 0) {
+              helpText.show(true);
+            } else {
+              helpText.hide(true);
+            }
+          }
+        },
+        /**
          * Render callback handler, triggered from app when the view renders.
          *
          * @method render.rendered

=== modified file 'app/widgets/overlay-indicator.js'
--- app/widgets/overlay-indicator.js	2013-04-08 18:30:20 +0000
+++ app/widgets/overlay-indicator.js	2013-04-29 12:42:28 +0000
@@ -52,10 +52,9 @@
      * @method renderUI
      */
     renderUI: function() {
-      var node_html = '<img src={src}>';
+      var node_html = '<img src="{src}">';
       var img = Y.Node.create(
           sub(node_html, {src: this.get('loading_image')}));
-      img.set('src', '/juju-ui/assets/images/non-sprites/loading-spinner.gif');
       this.get('contentBox').append(img);
     },
 
@@ -155,7 +154,7 @@
        * @type {string}
        */
       loading_image: {
-        value: '/juju-ui/assets/images/loading-spinner.gif'
+        value: '/juju-ui/assets/images/non-sprites/loading-spinner.gif'
       }
     }
   });

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-04-25 17:03:09 +0000
+++ lib/views/stylesheet.less	2013-04-29 12:42:28 +0000
@@ -278,6 +278,41 @@
   cursor: move;
 }
 
+#environment-help {
+  color: #757575;
+  text-align: center;
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  /* pointer-events does not work in IE 10 except in SVG, so this is just a
+     way to slightly improve the experience during transitions. */
+  pointer-events: none;
+  div.vertical-center-floater {
+    height: 50%;
+    margin-bottom: -225px;
+    margin-top: 0;
+    min-height: 225px;
+  }
+  div.content {
+    height: 450px;
+  }
+  h1 {
+    line-height: normal;
+    margin-bottom: 1ex;
+    font-weight: normal;
+    font-size: 26px;
+  }
+  p {
+    line-height: normal;
+    font-size: 18px;
+    width: 301px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2ex;
+  }
+}
 
 .environment-menu {
     @border_radius: 20px;

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2013-04-19 18:28:51 +0000
+++ test/test_environment_view.js	2013-04-29 12:42:28 +0000
@@ -104,8 +104,7 @@
     });
 
     beforeEach(function() {
-      container = Y.Node.create('<div />').setStyle('visibility', 'hidden');
-      Y.one('body').prepend(container);
+      container = testUtils.makeContainer();
       db = new models.Database();
       // Use a clone to avoid any mutation
       // to the input set (as happens with processed
@@ -121,6 +120,35 @@
       done();
     });
 
+
+    it('should display help text when canvas is empty', function() {
+      // Use a db w/o the delta loaded
+      db = new models.Database();
+      var view = new views.environment({container: container, db: db}),
+          topo,
+          beforeResizeEventFired = false;
+      view.render().rendered();
+      topo = view.topo;
+
+      // Verify we have help text.
+      var help = Y.one('#environment-help');
+      assert.strictEqual(help.getStyle('display'), 'block');
+    });
+
+
+    it('should not display help text when canvas is populated', function() {
+      var view = new views.environment({container: container, db: db}),
+          topo,
+          beforeResizeEventFired = false;
+      view.render().rendered();
+      topo = view.topo;
+
+      // Verify we do not have help text.
+      var help = Y.one('#environment-help');
+      assert.strictEqual(help.getStyle('display'), 'none');
+    });
+
+
     it('must handle the window resize event', function(done) {
       var view = new views.environment({container: container, db: db}),
           topo,

=== modified file 'test/test_panzoom.js'
--- test/test_panzoom.js	2013-03-07 22:22:10 +0000
+++ test/test_panzoom.js	2013-04-29 12:42:28 +0000
@@ -1,7 +1,7 @@
 'use strict';
 
 describe('pan zoom module', function() {
-  var db, juju, models, viewContainer, views, Y, pz, topo, vis;
+  var db, juju, models, utils, viewContainer, views, Y, pz, topo, vis;
 
   before(function(done) {
     Y = YUI(GlobalConfig).use(['node',
@@ -15,14 +15,13 @@
       juju = Y.namespace('juju');
       models = Y.namespace('juju.models');
       views = Y.namespace('juju.views');
+      utils = Y.namespace('juju-tests.utils');
       done();
     });
   });
 
   beforeEach(function() {
-    viewContainer = Y.Node.create('<div />');
-    viewContainer.appendTo(Y.one('body'));
-    viewContainer.hide();
+    viewContainer = utils.makeContainer();
     db = new models.Database();
     var view = new views.environment({container: viewContainer, db: db});
     view.render();

=== modified file 'test/test_service_module.js'
--- test/test_service_module.js	2013-04-17 15:45:59 +0000
+++ test/test_service_module.js	2013-04-29 12:42:28 +0000
@@ -1,10 +1,11 @@
 'use strict';
 
 describe('service module annotations', function() {
-  var db, juju, models, viewContainer, views, Y, serviceModule;
+  var db, juju, models, utils, viewContainer, views, Y, serviceModule;
   var called, location;
   before(function(done) {
     Y = YUI(GlobalConfig).use(['node',
+      'juju-tests-utils',
       'juju-models',
       'juju-views',
       'juju-gui',
@@ -12,15 +13,14 @@
     function(Y) {
       juju = Y.namespace('juju');
       models = Y.namespace('juju.models');
+      utils = Y.namespace('juju-tests.utils');
       views = Y.namespace('juju.views');
       done();
     });
   });
 
   beforeEach(function() {
-    viewContainer = Y.Node.create('<div />');
-    viewContainer.appendTo(Y.one('body'));
-    viewContainer.hide();
+    viewContainer = utils.makeContainer(),
     db = new models.Database();
     called = false;
     location =
@@ -77,10 +77,11 @@
 });
 
 describe('service module events', function() {
-  var db, juju, models, serviceModule, topo,
+  var db, juju, models, serviceModule, topo, utils,
       view, viewContainer, views, Y;
   before(function(done) {
     Y = YUI(GlobalConfig).use(['node',
+      'juju-tests-utils',
       'juju-landscape',
       'juju-models',
       'juju-views',
@@ -91,13 +92,13 @@
       juju = Y.namespace('juju');
       models = Y.namespace('juju.models');
       views = Y.namespace('juju.views');
+      utils = Y.namespace('juju-tests.utils');
       done();
     });
   });
 
   beforeEach(function() {
-    viewContainer = Y.Node.create('<div />');
-    viewContainer.appendTo(Y.one('body'));
+    viewContainer = utils.makeContainer();
     db = new models.Database();
     db.services.add({id: 'haproxy'});
     view = new views.environment({

=== modified file 'test/utils.js'
--- test/utils.js	2013-04-17 01:08:13 +0000
+++ test/utils.js	2013-04-29 12:42:28 +0000
@@ -5,6 +5,14 @@
   var jujuTests = Y.namespace('juju-tests');
 
   jujuTests.utils = {
+    makeContainer: function() {
+      var container = Y.Node.create('<div>');
+      container.appendTo(document.body);
+      container.setStyle('position', 'absolute');
+      container.setStyle('top', '-10000px');
+      container.setStyle('left', '-10000px');
+      return container;
+    },
 
     SocketStub: function() {
       this.messages = [];
@@ -102,6 +110,7 @@
 }, '0.1.0', {
   requires: [
     'io',
+    'node',
     'datasource-local',
     'juju-charm-store',
     'juju-env-fakebackend'