diff --git a/src/ContainerHomePreview.react.js b/src/ContainerHomePreview.react.js
index dfb12d584e..5d26329422 100644
--- a/src/ContainerHomePreview.react.js
+++ b/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 () {
- if (document.getElementById('web-preview-frame')) {
- var frameContent = document.getElementById('web-preview-frame').contentDocument;
- var $body = $(frameContent.body);
- if ($body.is(':empty')) {
- document.getElementById('web-preview-frame').contentDocument.location.reload(true);
- }
+ componentDidUpdate: function () {
+ var webview = document.getElementById('webview');
+ if (webview) {
+ webview.addEventListener('did-finish-load', () => {
+ //HACK: if the title is the host:port the page probably hasn't loaded yet
+ 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 = (
Web Preview
Not showing correctly?
diff --git a/src/ContainerSettingsGeneral.react.js b/src/ContainerSettingsGeneral.react.js
index 56654428f7..15ba2aa84e 100644
--- a/src/ContainerSettingsGeneral.react.js
+++ b/src/ContainerSettingsGeneral.react.js
@@ -89,22 +89,27 @@ var ContainerSettingsGeneral = React.createClass({
});
return;
}
- 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(oldName, {Binds: newBinds, name: newName}, err => {
- this.transitionTo('containerSettingsGeneral', {name: newName});
- rimraf(oldPath, () => {});
+ ContainerStore.rename(oldName, newName, err => {
+ if (err) {
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);
+ });
});
});
},
diff --git a/src/ContainerStore.js b/src/ContainerStore.js
index 200df9b35d..23f1f7b178 100644
--- a/src/ContainerStore.js
+++ b/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) {
diff --git a/styles/containers.less b/styles/containers.less
index 752d703116..a86ed7b63f 100644
--- a/styles/containers.less
+++ b/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: -50%;
- width: 200%;
- height: 200%;
+ left: -100%;
+ top: -100%;
+ height: 400%;
+ width: 401%;
transform: scale(0.5);
}
- .iframe-overlay {
+ .frame-overlay {
position: absolute;
top: 0;
left: 0;