Merge lp:~bcsaller/juju-gui/export-ui into lp:juju-gui/experimental

[Benjamin Saller]

Drag out to export

Dragging the environment icon in the nav to another supporting
GUI app will create DnD export/import chain.

DnD export is very limited now and only supports dragging from one
GUI instance to another. Because of this its hidden behind a feature
flag. /:flags:/dndexport/

https://codereview.appspot.com/9252043/

[Benjamin Saller (bcsaller)]

Reviewers: mp+162691_code.launchpad.net,

Message:
Please take a look.

Description:
Drag out to export

Dragging the environment icon in the nav to another supporting
GUI app will create DnD export/import chain.

https://code.launchpad.net/~bcsaller/juju-gui/export-ui/+merge/162691

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/index.html
   M app/views/topology/importexport.js

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/index.html
=== modified file 'app/index.html'
--- app/index.html 2013-05-04 20:11:20 +0000
+++ app/index.html 2013-05-06 20:31:34 +0000
@@ -83,8 +83,8 @@
                  </span>
                  <span class="nav-container">
                    <span class="nav-section">
- <i class="sprite environment_icon"></i>
- <span id="environment-name"></span>
+ <i class="sprite environment_icon"> </i>
+ <span id="environment-name" draggable="true"></span>
                      <span id="provider-type" class="provider-type"></span>
                    </span>
                  </span>

Index: app/views/topology/importexport.js
=== modified file 'app/views/topology/importexport.js'
--- app/views/topology/importexport.js 2013-05-02 20:13:10 +0000
+++ app/views/topology/importexport.js 2013-05-07 00:32:53 +0000
@@ -55,24 +55,52 @@
                notifications = topo.get('db').notifications,
                env = topo.get('env'),
                fileSources = evt._event.dataTransfer.files;
-
- Y.Array.each(fileSources, function(file) {
- var reader = new FileReader();
- reader.onload = (function(fileData) {
- return function(e) {
- // Import each into the environment
- env.importEnvironment(e.target.result);
- notifications.add({
- title: 'Imported Environment',
- message: 'Import from "' + file.name + '" successful',
- level: 'important'
- });
- };
- })(file);
- reader.readAsText(file);
- });
+ if (fileSources.length) {
+ Y.Array.each(fileSources, function(file) {
+ var reader = new FileReader();
+ reader.onload = (function(fileData) {
+ return function(e) {
+ // Import each into the environment
+ env.importEnvironment(e.target.result);
+ notifications.add({
+ title: 'Imported Environment',
+ message: 'Import from "' + file.name + '" successful',
+ level: 'important'
+ });
+ };
+ })(file);
+ reader.readAsText(file);
+ });
+ } e...

[lp:~bcsaller/juju-gui/export-ui]

654. By Benjamin Saller on 2013-05-14

restore hotkey with a skip jshint on the ugly library code

655. By Benjamin Saller on 2013-05-14

FileSave w/hotkey passing tests again

656. By Benjamin Saller on 2013-05-14

missing file

657. By Benjamin Saller on 2013-05-14

lint

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/9252043/

[Gary Poster (gary)]

LGTM, with protecting the drag story (which surprised me in QA, as we
discussed, because I thought I could drag to the desktop) behind a
feature flag. If you change the feature flag rules, please doc the
intent of the new rules, like in the blog or something.

Thank you!

Gary

https://codereview.appspot.com/9252043/

[lp:~bcsaller/juju-gui/export-ui]

658. By Benjamin Saller on 2013-05-14

hide dndexport behind feature flag

659. By Benjamin Saller on 2013-05-14

lint

660. By Benjamin Saller on 2013-05-14

taking the easy way out with lint

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/9252043/

[lp:~bcsaller/juju-gui/export-ui]

661. By Benjamin Saller on 2013-05-15

move the feature flag to only guard the dnd export, not import as well

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/9252043/

[Nicola Larosa (teknico)]

LGTM. I did not review FileSaver.js, I don't know how it's supposed to
work and the wide indentation makes it unreadable anyway.

https://codereview.appspot.com/9252043/

=== modified file '.jshintignore'
--- .jshintignore	2013-05-08 23:25:07 +0000
+++ .jshintignore	2013-05-15 05:17:23 +0000
@@ -1,2 +1,3 @@
 app/assets/javascripts/prettify.js
+app/assets/javascripts/FileSaver.js
 app/assets/javascripts/unscaled-pack-layout.js

=== modified file '.jshintrc'
--- .jshintrc	2013-03-11 20:46:31 +0000
+++ .jshintrc	2013-05-15 05:17:23 +0000
@@ -124,7 +124,8 @@
     "jsyaml",
     "consoleManager",
     "it",
-    "YUI"
+    "YUI",
+    "saveAs"
   ],
   // "indent"        : 2,        // Specify indentation spacing
   "quotmark": "single"

=== modified file 'Makefile'
--- Makefile	2013-05-02 20:28:08 +0000
+++ Makefile	2013-05-15 05:17:23 +0000
@@ -35,7 +35,7 @@
 		-e '^app/assets/javascripts/gallery-.*\.js$$' \
 		-e '^server.js$$')
 THIRD_PARTY_JS=app/assets/javascripts/reconnecting-websocket.js
-LINT_IGNORE='app/assets/javascripts/prettify.js'
+LINT_IGNORE='app/assets/javascripts/prettify.js, app/assets/javascripts/FileSaver.js'
 NODE_TARGETS=node_modules/chai node_modules/cryptojs node_modules/d3 \
     node_modules/expect.js node_modules/express \
     node_modules/graceful-fs node_modules/grunt node_modules/jshint \

=== modified file 'app/app.js'
--- app/app.js	2013-05-14 15:09:07 +0000
+++ app/app.js	2013-05-15 05:17:23 +0000
@@ -149,6 +149,18 @@
         focus: true,
         help: 'Select the charm Search'
       },
+      'S-d': {
+        callback: function(evt) {
+          /* global saveAs: false */
+          this.env.exportEnvironment(function(r) {
+            var exportData = JSON.stringify(r.result, undefined, 2);
+            var exportBlob = new Blob([exportData],
+                                      {type: 'application/json;charset=utf-8'});
+            saveAs(exportBlob, 'export.json');
+          });
+        },
+        help: 'Export the environment'
+      },
       'S-/': {
         target: '#shortcut-help',
         toggle: true,
@@ -935,7 +947,7 @@
             nsRouter: this.nsRouter,
             landscape: this.landscape,
             endpointsController: this.endpointsController,
-            useDragDropImport: this.get('sandbox') || false,
+            useDragDropImport: this.get('sandbox'),
             db: this.db,
             env: this.env};
 
@@ -974,6 +986,17 @@
       > The name looks like dotted python identifiers, with the form
       > APP.FEATURE.EFFECT. The value is a Unicode string.
 
+    A shortened version of key can be used if they follow this pattern:
+    - The feature flag applies to the gui.
+    - The presence of the flag indicates Boolean enablement
+    - The (default) absence of the flag indicates the feature will be
+    unavailable.
+
+   If those conditions are met then you may simply use the descriptive name of
+   the feature taking care it uniquely defines the feature. An example is
+   rather than specifying gui.dndexport.enable you can specify dndexport as a
+   flag.
+
       @method featureFlags
       @param {object} req The request object.
       @param {object} res The response object.
@@ -1195,5 +1218,7 @@
     'subapp-browser',
     'event-key',
     'event-touch',
-    'model-controller']
+    'model-controller',
+    'FileSaver'
+  ]
 });

=== added file 'app/assets/javascripts/FileSaver.js'
--- app/assets/javascripts/FileSaver.js	1970-01-01 00:00:00 +0000
+++ app/assets/javascripts/FileSaver.js	2013-05-15 05:17:23 +0000
@@ -0,0 +1,216 @@
+/* FileSaver.js
+ * A saveAs() FileSaver implementation.
+ * 2013-01-23
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+var saveAs = saveAs
+  || (navigator.msSaveBlob && navigator.msSaveBlob.bind(navigator))
+  || (function(view) {
+	"use strict";
+	var
+		  doc = view.document
+		  // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
+		, get_URL = function() {
+			return view.URL || view.webkitURL || view;
+		}
+		, URL = view.URL || view.webkitURL || view
+		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+		, can_use_save_link = "download" in save_link
+		, click = function(node) {
+			var event = doc.createEvent("MouseEvents");
+			event.initMouseEvent(
+				"click", true, false, view, 0, 0, 0, 0, 0
+				, false, false, false, false, 0, null
+			);
+			node.dispatchEvent(event);
+		}
+		, webkit_req_fs = view.webkitRequestFileSystem
+		, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
+		, throw_outside = function (ex) {
+			(view.setImmediate || view.setTimeout)(function() {
+				throw ex;
+			}, 0);
+		}
+		, force_saveable_type = "application/octet-stream"
+		, fs_min_size = 0
+		, deletion_queue = []
+		, process_deletion_queue = function() {
+			var i = deletion_queue.length;
+			while (i--) {
+				var file = deletion_queue[i];
+				if (typeof file === "string") { // file is an object URL
+					URL.revokeObjectURL(file);
+				} else { // file is a File
+					file.remove();
+				}
+			}
+			deletion_queue.length = 0; // clear queue
+		}
+		, dispatch = function(filesaver, event_types, event) {
+			event_types = [].concat(event_types);
+			var i = event_types.length;
+			while (i--) {
+				var listener = filesaver["on" + event_types[i]];
+				if (typeof listener === "function") {
+					try {
+						listener.call(filesaver, event || filesaver);
+					} catch (ex) {
+						throw_outside(ex);
+					}
+				}
+			}
+		}
+		, FileSaver = function(blob, name) {
+			// First try a.download, then web filesystem, then object URLs
+			var
+				  filesaver = this
+				, type = blob.type
+				, blob_changed = false
+				, object_url
+				, target_view
+				, get_object_url = function() {
+					var object_url = get_URL().createObjectURL(blob);
+					deletion_queue.push(object_url);
+					return object_url;
+				}
+				, dispatch_all = function() {
+					dispatch(filesaver, "writestart progress write writeend".split(" "));
+				}
+				// on any filesys errors revert to saving with object URLs
+				, fs_error = function() {
+					// don't create more object URLs than needed
+					if (blob_changed || !object_url) {
+						object_url = get_object_url(blob);
+					}
+					if (target_view) {
+						target_view.location.href = object_url;
+					}
+					filesaver.readyState = filesaver.DONE;
+					dispatch_all();
+				}
+				, abortable = function(func) {
+					return function() {
+						if (filesaver.readyState !== filesaver.DONE) {
+							return func.apply(this, arguments);
+						}
+					};
+				}
+				, create_if_not_found = {create: true, exclusive: false}
+				, slice
+			;
+			filesaver.readyState = filesaver.INIT;
+			if (!name) {
+				name = "download";
+			}
+			if (can_use_save_link) {
+				object_url = get_object_url(blob);
+				save_link.href = object_url;
+				save_link.download = name;
+				click(save_link);
+				filesaver.readyState = filesaver.DONE;
+				dispatch_all();
+				return;
+			}
+			// Object and web filesystem URLs have a problem saving in Google Chrome when
+			// viewed in a tab, so I force save with application/octet-stream
+			// http://code.google.com/p/chromium/issues/detail?id=91158
+			if (view.chrome && type && type !== force_saveable_type) {
+				slice = blob.slice || blob.webkitSlice;
+				blob = slice.call(blob, 0, blob.size, force_saveable_type);
+				blob_changed = true;
+			}
+			// Since I can't be sure that the guessed media type will trigger a download
+			// in WebKit, I append .download to the filename.
+			// https://bugs.webkit.org/show_bug.cgi?id=65440
+			if (webkit_req_fs && name !== "download") {
+				name += ".download";
+			}
+			if (type === force_saveable_type || webkit_req_fs) {
+				target_view = view;
+			} else {
+				target_view = view.open();
+			}
+			if (!req_fs) {
+				fs_error();
+				return;
+			}
+			fs_min_size += blob.size;
+			req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
+				fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
+					var save = function() {
+						dir.getFile(name, create_if_not_found, abortable(function(file) {
+							file.createWriter(abortable(function(writer) {
+								writer.onwriteend = function(event) {
+									target_view.location.href = file.toURL();
+									deletion_queue.push(file);
+									filesaver.readyState = filesaver.DONE;
+									dispatch(filesaver, "writeend", event);
+								};
+								writer.onerror = function() {
+									var error = writer.error;
+									if (error.code !== error.ABORT_ERR) {
+										fs_error();
+									}
+								};
+								"writestart progress write abort".split(" ").forEach(function(event) {
+									writer["on" + event] = filesaver["on" + event];
+								});
+								writer.write(blob);
+								filesaver.abort = function() {
+									writer.abort();
+									filesaver.readyState = filesaver.DONE;
+								};
+								filesaver.readyState = filesaver.WRITING;
+							}), fs_error);
+						}), fs_error);
+					};
+					dir.getFile(name, {create: false}, abortable(function(file) {
+						// delete file if it already exists
+						file.remove();
+						save();
+					}), abortable(function(ex) {
+						if (ex.code === ex.NOT_FOUND_ERR) {
+							save();
+						} else {
+							fs_error();
+						}
+					}));
+				}), fs_error);
+			}), fs_error);
+		}
+		, FS_proto = FileSaver.prototype
+		, saveAs = function(blob, name) {
+			return new FileSaver(blob, name);
+		}
+	;
+	FS_proto.abort = function() {
+		var filesaver = this;
+		filesaver.readyState = filesaver.DONE;
+		dispatch(filesaver, "abort");
+	};
+	FS_proto.readyState = FS_proto.INIT = 0;
+	FS_proto.WRITING = 1;
+	FS_proto.DONE = 2;
+
+	FS_proto.error =
+	FS_proto.onwritestart =
+	FS_proto.onprogress =
+	FS_proto.onwrite =
+	FS_proto.onabort =
+	FS_proto.onerror =
+	FS_proto.onwriteend =
+		null;
+
+	view.addEventListener("unload", process_deletion_queue, false);
+	return saveAs;
+}(self));

=== modified file 'app/index.html'
--- app/index.html	2013-05-13 16:58:10 +0000
+++ app/index.html	2013-05-15 05:17:23 +0000
@@ -83,8 +83,8 @@
                 </span>
                 <span class="nav-container">
                   <span class="nav-section">
-                    <i class="sprite environment_icon"></i>
-                    <span id="environment-name"></span>
+                    <i class="sprite environment_icon"> </i>
+                      <span id="environment-name" draggable="true"></span>
                     <span id="provider-type" class="provider-type"></span>
                   </span>
                 </span>

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-05-14 14:46:24 +0000
+++ app/modules-debug.js	2013-05-15 05:17:23 +0000
@@ -76,6 +76,15 @@
         }
       }
     },
+
+    filesaver: {
+      modules: {
+        'FileSaver': {
+          fullpath: '/juju-ui/assets/javascripts/FileSaver.js'
+        }
+      }
+    },
+
     juju: {
       modules: {
         // Primitives

=== modified file 'app/views/topology/importexport.js'
--- app/views/topology/importexport.js	2013-05-07 17:52:05 +0000
+++ app/views/topology/importexport.js	2013-05-15 05:17:23 +0000
@@ -55,36 +55,61 @@
               notifications = topo.get('db').notifications,
               env = topo.get('env'),
               fileSources = evt._event.dataTransfer.files;
-
-          Y.Array.each(fileSources, function(file) {
-            var reader = new FileReader();
-            reader.onload = function(e) {
-              // Import each into the environment
-              console.log('Importing ' + file.name);
-              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.onerror = function(err) {
-              console.warn(err);
-            };
-            reader.readAsText(file);
-          });
+          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 {
+            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: {}

=== modified file 'bin/merge-files'
--- bin/merge-files	2013-05-08 22:00:24 +0000
+++ bin/merge-files	2013-05-15 05:17:23 +0000
@@ -81,6 +81,7 @@
     'app/assets/javascripts/prettify.js',
     'app/assets/javascripts/reconnecting-websocket.js',
     'app/assets/javascripts/resizing_textarea.js',
+    'app/assets/javascripts/FileSaver.js',
     'app/assets/javascripts/sub-app.js',
     'app/assets/javascripts/unscaled-pack-layout.js'
   ]);