Merge pull request #184 from kitematic/fix-rename

Change iframes to use webviews instead

src/ContainerHomePreview.react.js

@@ -1,5 +1,4 @@
 var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
 var exec = require('exec');
 var ContainerStore = require('./ContainerStore');
@@ -19,15 +18,21 @@ var ContainerHomePreview = React.createClass({
   },
   componentDidMount: function() {
     this.init();
-    this.timer = setInterval(this.tick, 2000);
   },
-  tick: function () {
+  componentDidUpdate: function () {
-    if (document.getElementById('web-preview-frame')) {
+    var webview = document.getElementById('webview');
-      var frameContent = document.getElementById('web-preview-frame').contentDocument;
+    if (webview) {
-      var $body = $(frameContent.body);
+      webview.addEventListener('did-finish-load', () => {
-      if ($body.is(':empty')) {
+        //HACK: if the title is the host:port the page probably hasn't loaded yet
-        document.getElementById('web-preview-frame').contentDocument.location.reload(true);
+        if (this.state.ports[this.state.defaultPort].url.replace('http://', '') === webview.getTitle()) {
-      }
+          setTimeout(function () {
+            try {
+              webview.reload();
+            } catch (err) {
+            }
+          }, 1000);
+        }
+      });
     }
   },
   componentWillUnmount: function() {
@@ -60,12 +65,13 @@ var ContainerHomePreview = React.createClass({
   render: function () {
     var preview;
     if (this.state.defaultPort) {
+      var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.state.ports[this.state.defaultPort].url, autosize: 'on'});
       preview = (
         <div className="web-preview wrapper">
           <h4>Web Preview</h4>
           <div className="widget">
-            <iframe id="web-preview-frame" name="disable-x-frame-options" sandbox="allow-same-origin allow-scripts" src={this.state.ports[this.state.defaultPort].url} scrolling="no"></iframe>
+            {frame}
-            <div className="iframe-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
+            <div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
           </div>
           <div className="subtext" onClick={this.handleClickNotShowingCorrectly}>Not showing correctly?</div>
         </div>

src/ContainerSettingsGeneral.react.js

@@ -89,22 +89,27 @@ var ContainerSettingsGeneral = React.createClass({
       });
       return;
     }
-    var oldPath = path.join(process.env.HOME, 'Kitematic', oldName);
+    ContainerStore.rename(oldName, newName, err => {
-    var newPath = path.join(process.env.HOME, 'Kitematic', newName);
+      if (err) {
-    rimraf(newPath, () => {
-      if (fs.existsSync(oldPath)) {
-        fs.renameSync(oldPath, newPath);
-      }
-      var binds = _.pairs(this.props.container.Volumes).map(function (pair) {
-        return pair[1] + ':' + pair[0];
-      });
-      var newBinds = binds.map(b => {
-        return b.replace(path.join(process.env.HOME, 'Kitematic', oldName), path.join(process.env.HOME, 'Kitematic', newName));
-      });
-      ContainerStore.updateContainer(oldName, {Binds: newBinds, name: newName}, err => {
-        this.transitionTo('containerSettingsGeneral', {name: newName});
-        rimraf(oldPath, () => {});
         console.log(err);
+      }
+      this.transitionTo('containerSettingsGeneral', {name: newName});
+      var oldPath = path.join(process.env.HOME, 'Kitematic', oldName);
+      var newPath = path.join(process.env.HOME, 'Kitematic', newName);
+      rimraf(newPath, () => {
+        if (fs.existsSync(oldPath)) {
+          fs.renameSync(oldPath, newPath);
+        }
+        var binds = _.pairs(this.props.container.Volumes).map(function (pair) {
+          return pair[1] + ':' + pair[0];
+        });
+        var newBinds = binds.map(b => {
+          return b.replace(path.join(process.env.HOME, 'Kitematic', oldName), path.join(process.env.HOME, 'Kitematic', newName));
+        });
+        ContainerStore.updateContainer(newName, {Binds: newBinds}, err => {
+          rimraf(oldPath, () => {});
+          console.log(err);
+        });
       });
     });
   },

src/ContainerStore.js

@@ -291,22 +291,33 @@ var ContainerStore = assign(Object.create(EventEmitter.prototype), {
     callback(null, containerName);
   },
   updateContainer: function (name, data, callback) {
+    _muted[name] = true;
     if (!data.name) {
       data.name = data.Name;
     }
-    _muted[name] = true;
-    _muted[data.name] = true;
     if (name !== data.name) {
       LogStore.rename(name, data.name);
     }
     var fullData = assign(_containers[name], data);
     this._createContainer(name, fullData, function (err) {
       _muted[name] = false;
-      _muted[data.name] = false;
       this.emit(this.CLIENT_CONTAINER_EVENT, name);
       callback(err);
     }.bind(this));
   },
+  rename: function (name, newName, callback) {
+    LogStore.rename(name, newName);
+    docker.client().getContainer(name).rename({name: newName}, err => {
+      if (err && err.statusCode !== 204) {
+        callback(err);
+        return;
+      }
+      this.fetchAllContainers(err => {
+        this.emit(this.CLIENT_CONTAINER_EVENT);
+        callback(err);
+      });
+    });
+  },
   restart: function (name, callback) {
     var container = docker.client().getContainer(name);
     container.restart(function (err) {

styles/containers.less

@@ -763,6 +763,8 @@
                 border-radius: 4px;
                 border: 1px solid @gray-lightest;
                 position: relative;
+                display: flex;
+                overflow: hidden;
                 p {
                   font-size: 13px;
                   color: @gray-normal;
@@ -776,17 +778,17 @@
                   font-family: Menlo;
                   -webkit-user-select: text;
                 }
-                iframe {
+                .frame {
+                  flex: 1 auto;
                   border: 0;
-                  border-radius: 4px;
                   position: absolute;
-                  top: -50%;
+                  left: -100%;
-                  left: -50%;
+                  top: -100%;
-                  width: 200%;
+                  height: 400%;
-                  height: 200%;
+                  width: 401%;
                   transform: scale(0.5);
                 }
-                .iframe-overlay {
+                .frame-overlay {
                   position: absolute;
                   top: 0;
                   left: 0;