Merge lp:~hatch/juju-gui/import-bundle-btn into lp:juju-gui/experimental

[Jeff Pihach]

Adds support for bundle import button

https://codereview.appspot.com/22850043/

[Jeff Pihach (hatch)]

Reviewers: mp+194371_code.launchpad.net,

Message:
Please take a look.

Description:
Adds support for bundle import button

To QA:
Click on the import button in the header, select
a yaml file, and then import. It should deploy
the bundle.

https://code.launchpad.net/~hatch/juju-gui/import-bundle-btn/+merge/194371

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/22850043/
Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: app/app.js
=== modified file 'app/app.js'
--- app/app.js 2013-11-06 17:12:26 +0000
+++ app/app.js 2013-11-07 15:49:57 +0000
@@ -51,7 +51,8 @@

Y.juju.SubAppRegistration,
                                                    Y.juju.NSRouter,
                                                    Y.juju.Cookies,
- Y.juju.GhostDeployer], {
+ Y.juju.GhostDeployer,
+ Y.juju.BundleImport], {

      /*
        Extension properties
@@ -567,6 +568,22 @@
          }, this);
        }

+ var importNode = Y.one('#import-trigger');
+ var importFileInput = Y.one('.import-export input[type=file]');
+ // Tests won't have this node.
+ if (importNode && importFileInput) {
+ importNode.on('click', function(e) {
+ e.halt();
+ e.currentTarget.siblings('input[type=file]')
+ .item(0).getDOMNode().click();
+ });
+
+ importFileInput.on('change', function(e) {
+ this.sendToDeployer(this.env, this.db,
+ e.currentTarget.get('files')._nodes);
+ }, this);
+ }
+
        // Attach SubApplications. The subapps should share the same db.
        cfg.db = this.db;

@@ -1345,6 +1362,7 @@
      'juju-inspector-widget',
      'juju-ghost-inspector',
      'juju-view-bundle',
- 'viewmode-controls'
+ 'viewmode-controls',
+ 'bundle-import-extension'
    ]
  });

Index: app/index.html
=== modified file 'app/index.html'
--- app/index.html 2013-10-31 03:28:32 +0000
+++ app/index.html 2013-11-07 15:49:57 +0000
@@ -140,6 +140,7 @@
                  <i class="sprite icon-import-normal normal"></i>
                  <i class="sprite icon-import-hover hover"></i>
                </a>
+ <input type="file" />
                <a href="" id="export-trigger">
                  <i class="sprite icon-export-normal normal"></i>
                  <i class="sprite icon-export-hover hover"></i>

Index: app/modules-debug.js
=== modified file 'app/modules-debug.js'
--- app/modules-debug.js 2013-11-04 02:17:54 +0000
+++ app/modules-debug.js 2013-11-07 15:49:57 +0000
@@ -181,6 +181,10 @@
            fullpath: '/juju-ui/assets/javascripts/app-cookies-extension.js'
          },

+ 'bundle-import-extensi...

[Richard Harding (rharding)]

code looks ok. Looks like some movement. You said there were tests, but
it seems like it'd be a good idea to create a test file for the new
extension module created out of the code revamp. Will QA next.

https://codereview.appspot.com/22850043/diff/1/app/index.html
File app/index.html (right):

https://codereview.appspot.com/22850043/diff/1/app/index.html#newcode143
app/index.html:143:
should we #id this since we only expect one?

https://codereview.appspot.com/22850043/diff/1/bin/merge-files
File bin/merge-files (right):

https://codereview.appspot.com/22850043/diff/1/bin/merge-files#newcode91
bin/merge-files:91:
is it not picked up by the deps on app.js?

https://codereview.appspot.com/22850043/

[Richard Harding (rharding)]

QA:

We should have a title="" on the buttons to give hints that they're
import/export controls.

QA ok

LGTM

https://codereview.appspot.com/22850043/

[Jeff Pihach (hatch)]

Thanks for the review! Changes made

https://codereview.appspot.com/22850043/

[Jeff Pihach (hatch)]

*** Submitted:

Adds support for bundle import button

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

https://codereview.appspot.com/22850043/

=== modified file 'app/app.js'
--- app/app.js	2013-11-06 17:12:26 +0000
+++ app/app.js	2013-11-07 16:02:07 +0000
@@ -51,7 +51,8 @@
                                                   Y.juju.SubAppRegistration,
                                                   Y.juju.NSRouter,
                                                   Y.juju.Cookies,
-                                                  Y.juju.GhostDeployer], {
+                                                  Y.juju.GhostDeployer,
+                                                  Y.juju.BundleImport], {
 
     /*
       Extension properties
@@ -567,6 +568,22 @@
         }, this);
       }
 
+      var importNode = Y.one('#import-trigger');
+      var importFileInput = Y.one('.import-export input[type=file]');
+      // Tests won't have this node.
+      if (importNode && importFileInput) {
+        importNode.on('click', function(e) {
+          e.halt();
+          e.currentTarget.siblings('input[type=file]')
+                                  .item(0).getDOMNode().click();
+        });
+
+        importFileInput.on('change', function(e) {
+          this.sendToDeployer(this.env, this.db,
+                              e.currentTarget.get('files')._nodes);
+        }, this);
+      }
+
       // Attach SubApplications. The subapps should share the same db.
       cfg.db = this.db;
 
@@ -1345,6 +1362,7 @@
     'juju-inspector-widget',
     'juju-ghost-inspector',
     'juju-view-bundle',
-    'viewmode-controls'
+    'viewmode-controls',
+    'bundle-import-extension'
   ]
 });

=== added file 'app/assets/javascripts/bundle-import-extension.js'
--- app/assets/javascripts/bundle-import-extension.js	1970-01-01 00:00:00 +0000
+++ app/assets/javascripts/bundle-import-extension.js	2013-11-07 16:02:07 +0000
@@ -0,0 +1,73 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+YUI.add('bundle-import-extension', function(Y) {
+
+  function BundleImport() {}
+
+  BundleImport.prototype = {
+
+    sendToDeployer: function(env, db, fileSources) {
+      var notifications = db.notifications;
+      if (!Y.Lang.isFunction(env.deployerImport)) {
+        // Notify the user that their environment is too old and return.
+        notifications.add({
+          title: 'Deployer Import Unsupported',
+          message: 'Your environment is too old to support deployer file' +
+              ' imports directly. Please consider upgrading to use' +
+              ' this feature.',
+          level: 'important'
+        });
+        return;
+      }
+      // Handle dropping Deployer files on the canvas.
+      Y.Array.each(fileSources, function(file) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+          // Import each into the environment
+          env.deployerImport(e.target.result, null, function(result) {
+            if (!result.err) {
+              notifications.add({
+                title: 'Imported Deployer file',
+                message: 'Import from "' + file.name + '" successful. This ' +
+                    'can take some time to complete.',
+                level: 'important'
+              });
+            } else {
+              console.warn('import failed', file, result);
+              notifications.add({
+                title: 'Import Environment Failed',
+                message: 'Import from "' + file.name +
+                    '" failed.<br/>' + result.err,
+                level: 'error'
+              });
+            }
+          });
+        };
+        reader.readAsText(file);
+      });
+    }
+  };
+
+  Y.namespace('juju').BundleImport = BundleImport;
+
+
+});
+

=== modified file 'app/index.html'
--- app/index.html	2013-10-31 03:28:32 +0000
+++ app/index.html	2013-11-07 16:02:07 +0000
@@ -140,6 +140,7 @@
                 <i class="sprite icon-import-normal normal"></i>
                 <i class="sprite icon-import-hover hover"></i>
               </a>
+              <input type="file" />
               <a href="" id="export-trigger">
                 <i class="sprite icon-export-normal normal"></i>
                 <i class="sprite icon-export-hover hover"></i>

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-11-04 02:17:54 +0000
+++ app/modules-debug.js	2013-11-07 16:02:07 +0000
@@ -181,6 +181,10 @@
           fullpath: '/juju-ui/assets/javascripts/app-cookies-extension.js'
         },
 
+        'bundle-import-extension': {
+          fullpath: '/juju-ui/assets/javascripts/bundle-import-extension.js'
+        },
+
         'sub-app': {
           fullpath: '/juju-ui/assets/javascripts/sub-app.js'
         },
@@ -210,10 +214,6 @@
           fullpath: '/juju-ui/views/topology/service.js'
         },
 
-        'juju-topology-importexport': {
-          fullpath: '/juju-ui/views/topology/importexport.js'
-        },
-
         'juju-topology-utils': {
           fullpath: '/juju-ui/views/topology/utils.js'
         },

=== removed file 'app/views/topology/importexport.js'
--- app/views/topology/importexport.js	2013-08-08 22:36:30 +0000
+++ app/views/topology/importexport.js	1970-01-01 00:00:00 +0000
@@ -1,151 +0,0 @@
-/*
-This file is part of the Juju GUI, which lets users view and manage Juju
-environments within a graphical interface (https://launchpad.net/juju-gui).
-Copyright (C) 2012-2013 Canonical Ltd.
-
-This program is free software: you can redistribute it and/or modify it under
-the terms of the GNU Affero General Public License version 3, as published by
-the Free Software Foundation.
-
-This program is distributed in the hope that it will be useful, but WITHOUT
-ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
-SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
-General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License along
-with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-'use strict';
-
-/**
- * Provide the ImportExportModule  class.
- *
- * @module topology
- * @submodule topology.importexport
- */
-
-YUI.add('juju-topology-importexport', function(Y) {
-  var views = Y.namespace('juju.views'),
-      models = Y.namespace('juju.models'),
-      d3ns = Y.namespace('d3');
-
-  /**
-   * Handle ImportExport from the Topology.
-   *
-   * @class ImportExportModule
-   */
-  var ImportExportModule = Y.Base.create('ImportExportModule',
-                                         d3ns.Module, [], {
-        events: {
-          scene: {
-            '.zoom-plane': {
-              drop: '_handleFileDrop'
-            }
-          }
-        },
-
-        /**
-         * Handle file drops with HTML5 reader api
-         *
-         * @method _handleFileDrop
-         */
-        _handleFileDrop: function(box, self) {
-          // This handler uses the HTML5 File
-          // API for DnD support. This event
-          // doesn't properly appear in the YUI
-          // event wrrapper so we extract it directly
-          // from the DOM event.
-          var evt = d3.event,
-              topo = self.get('component'),
-              notifications = topo.get('db').notifications,
-              env = topo.get('env'),
-              fileSources = evt._event.dataTransfer.files;
-          if (fileSources.length) {
-            Y.Array.each(fileSources, function(file) {
-              var reader = new FileReader();
-              reader.onload = function(e) {
-                // Import each into the environment
-                env.importEnvironment(e.target.result, function(result) {
-                  if (!result.error) {
-                    notifications.add({
-                      title: 'Imported Environment',
-                      message: 'Import from "' + file.name + '" successful',
-                      level: 'important'
-                    });
-                  } else {
-                    notifications.add({
-                      title: 'Import Environment Failed',
-                      message: 'Import from "' + file.name +
-                          '" failed.<br/>' + result.error,
-                      level: 'error'
-                    });
-                  }
-                });
-              };
-              reader.readAsText(file);
-            });
-          } else {
-            // If this is not a drop event generated by the application (all
-            // of which have a dataType), then it was caused by dropping
-            // something external to the app, in which case it might be an
-            // environment configuration, so process it as such.
-
-            // dataType is an invalid argument in IE10 so in order to maintain
-            // this functionality for other browsers we need to do a UA check.
-            if (!Y.UA.ie) {
-              var dataType = evt._event.dataTransfer.getData('dataType');
-              if (dataType === undefined) {
-                env.importEnvironment(evt._event.dataTransfer.getData('Text'));
-              }
-            }
-          }
-          evt.preventDefault();
-          evt.stopPropagation();
-        },
-
-        /**
-         * Update lifecycle phase
-         * @method update
-         */
-        update: function() {
-          // Check the feature flag
-          if (!this._dragHandle && window.flags.dndexport) {
-            var env = this.get('component').get('env');
-            this._dragHandle = Y.one('#environment-name')
-                                .on('dragstart', function(evt) {
-                  env.exportEnvironment(function(r) {
-                    var ev = evt._event;
-                    ev.dataTransfer.dragEffect = 'copy';
-                    var json = JSON.stringify(r.result);
-                    ev.dataTransfer.setData('Text', json);
-                  });
-                  evt.stopPropagation();
-                }, this);
-
-            this.get('component')
-                .recordSubscription(this, this._dragHandle);
-
-          }
-          ImportExportModule.superclass.update.call(this);
-        }
-      }, {
-        ATTRS: {
-          /**
-            @property {d3ns.Component} component
-           */
-          component: {}
-        }
-
-      });
-  views.ImportExportModule = ImportExportModule;
-}, '0.1.0', {
-  requires: [
-    'node',
-    'event',
-    'd3-components',
-    'juju-models',
-    'juju-env',
-    'juju-view-utils'
-  ]
-});

=== modified file 'app/views/topology/service.js'
--- app/views/topology/service.js	2013-10-18 16:47:34 +0000
+++ app/views/topology/service.js	2013-11-07 16:02:07 +0000
@@ -285,7 +285,8 @@
     @class ServiceModule
    */
   var ServiceModule = Y.Base.create('ServiceModule', d3ns.Module, [
-    ServiceModuleCommon], {
+    ServiceModuleCommon,
+    Y.juju.BundleImport], {
     events: {
       scene: {
         '.service': {
@@ -621,7 +622,8 @@
     },
 
     /**
-     * Handle deploying a services by dropping a charm onto the canvas.
+     * Handle deploying services by dropping a charm onto the canvas or
+     * dropping a yaml bundle deployer file from your file system.
      *
      * @method canvasDropHandler
      * @param {Y.EventFacade} e the drop event object.
@@ -639,43 +641,8 @@
       var db = topo.get('db');
       var notifications = db.notifications;
       if (fileSources && fileSources.length) {
-        if (!Y.Lang.isFunction(env.deployerImport)) {
-          // Notify the user that their environment is too old and return.
-          notifications.add({
-            title: 'Deployer Import Unsupported',
-            message: 'Your environment is too old to support deployer file' +
-                ' imports directly. Please consider upgrading to use' +
-                ' this feature.',
-            level: 'important'
-          });
-          return;
-        }
-        // Handle dropping Deployer files on the canvas.
-        Y.Array.each(fileSources, function(file) {
-          var reader = new FileReader();
-          reader.onload = function(e) {
-            // Import each into the environment
-            env.deployerImport(e.target.result, null, function(result) {
-              if (!result.err) {
-                notifications.add({
-                  title: 'Imported Deployer file',
-                  message: 'Import from "' + file.name + '" successful. This ' +
-                      'can take some time to complete.',
-                  level: 'important'
-                });
-              } else {
-                console.warn('import failed', file, result);
-                notifications.add({
-                  title: 'Import Environment Failed',
-                  message: 'Import from "' + file.name +
-                      '" failed.<br/>' + result.err,
-                  level: 'error'
-                });
-              }
-            });
-          };
-          reader.readAsText(file);
-        });
+        // provided by bundle-import-extension.js
+        this.sendToDeployer(env, db, fileSources);
       } else {
         // Handle dropping charm/bundle tokens from the left side bar.
         var dragData = JSON.parse(dataTransfer.getData('Text'));
@@ -1326,6 +1293,7 @@
     'juju-templates',
     'juju-models',
     'juju-env',
-    'unscaled-pack-layout'
+    'unscaled-pack-layout',
+    'bundle-import-extension'
   ]
 });

=== modified file 'app/views/topology/topology.js'
--- app/views/topology/topology.js	2013-10-23 19:57:12 +0000
+++ app/views/topology/topology.js	2013-11-07 16:02:07 +0000
@@ -302,7 +302,6 @@
     'juju-topology-relation',
     'juju-topology-panzoom',
     'juju-topology-viewport',
-    'juju-topology-importexport',
     'juju-topology-utils'
   ]
 });

=== modified file 'bin/merge-files'
--- bin/merge-files	2013-11-04 02:17:54 +0000
+++ bin/merge-files	2013-11-07 16:02:07 +0000
@@ -88,6 +88,7 @@
   filesToLoad.js.push.apply(filesToLoad.js, [
     'app/assets/javascripts/app-subapp-extension.js',
     'app/assets/javascripts/app-cookies-extension.js',
+    'app/assets/javascripts/bundle-import-extension.js',
     'app/assets/javascripts/d3-components.js',
     'app/assets/javascripts/d3.min.js',
     'app/assets/javascripts/d3.status.js',

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-10-31 03:28:32 +0000
+++ lib/views/stylesheet.less	2013-11-07 16:02:07 +0000
@@ -271,14 +271,9 @@
                         }
                     }
                 }
-                #import-trigger {
-                    /* XXX bac: remove the hiding when import is implemented. */
+                input[type=file] {
                     display: none;
                 }
-                #export-trigger {
-                    /* XXX huwshimi: remove the following line when import is implemented. */
-                    border: none;
-                }
             }
             &.notifications-nav {
                 position: relative;