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

- -
Open in Browser
+ {frame} +
Open in Browser
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;