diff --git a/package.json b/package.json index eb6f6d2f5c..2fc733d444 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "^((?!-test).)*$" ], "unmockedModulePathPatterns": [ + "alt", "stream", "tty", "net", @@ -56,6 +57,7 @@ "virtualbox-checksum": "668f61c95efe37f8fc65cafe95b866fba64e37f2492dfc1e2b44a7ac3dcafa3b", "virtualbox-checksum-win": "9cb265babf307d825f5178693af95ffca077f80ae22cf43868c3538c159123ff", "dependencies": { + "alt": "^0.16.2", "ansi-to-html": "0.3.0", "any-promise": "^0.1.0", "async": "^0.9.0", @@ -63,11 +65,15 @@ "bugsnag-js": "^2.4.7", "classnames": "^1.2.0", "coveralls": "^2.11.2", + "deep-extend": "^0.4.0", "dockerode": "^2.1.1", "exec": "0.2.0", + "install": "^0.1.8", "jquery": "^2.1.3", "mixpanel": "0.2.0", + "mkdirp": "^0.5.0", "node-uuid": "^1.4.3", + "npm": "^2.9.1", "object-assign": "^2.0.0", "parseUri": "^1.2.3-2", "react": "^0.13.1", diff --git a/src/actions/ContainerActions.js b/src/actions/ContainerActions.js new file mode 100644 index 0000000000..e5fd4e1dae --- /dev/null +++ b/src/actions/ContainerActions.js @@ -0,0 +1,39 @@ +import alt from '../alt'; +import dockerUtil from '../utils/DockerUtil'; + +class ContainerActions { + start (name) { + this.dispatch({name}); + dockerUtil.start(name); + } + + destroy (name) { + this.dispatch({name}); + dockerUtil.destroy(name); + } + + rename (name, newName) { + this.dispatch({name, newName}); + dockerUtil.rename(name, newName); + } + + stop (name) { + this.dispatch({name}); + dockerUtil.stop(name); + } + + update (name, container) { + this.dispatch({name, container}); + dockerUtil.updateContainer(name, container); + } + + clearPending () { + this.dispatch(); + } + + run (name, repo, tag) { + dockerUtil.run(name, repo, tag); + } +} + +export default alt.createActions(ContainerActions); diff --git a/src/actions/ContainerServerActions.js b/src/actions/ContainerServerActions.js new file mode 100644 index 0000000000..bbbf9c82ff --- /dev/null +++ b/src/actions/ContainerServerActions.js @@ -0,0 +1,21 @@ +import alt from '../alt'; + +class ContainerServerActions { + constructor () { + this.generateActions( + 'added', + 'allUpdated', + 'destroyed', + 'error', + 'muted', + 'pending', + 'progress', + 'started', + 'unmuted', + 'updated', + 'waiting' + ); + } +} + +export default alt.createActions(ContainerServerActions); diff --git a/src/alt.js b/src/alt.js new file mode 100644 index 0000000000..bd2bdab360 --- /dev/null +++ b/src/alt.js @@ -0,0 +1,2 @@ +import Alt from 'alt'; +export default new Alt(); diff --git a/src/app.js b/src/app.js index 5fdac16168..3ef7360b02 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,8 @@ require.main.paths.splice(0, 0, process.env.NODE_PATH); var remote = require('remote'); -var ContainerStore = require('./stores/ContainerStore'); var Menu = remote.require('menu'); var React = require('react'); var SetupStore = require('./stores/SetupStore'); -var bugsnag = require('bugsnag-js'); var ipc = require('ipc'); var machine = require('./utils/DockerMachineUtil'); var metrics = require('./utils/MetricsUtil'); @@ -14,6 +12,7 @@ var webUtil = require('./utils/WebUtil'); var urlUtil = require ('./utils/URLUtil'); var app = remote.require('app'); var request = require('request'); +var docker = require('./utils/DockerUtil'); webUtil.addWindowSizeSaving(); webUtil.addLiveReload(); @@ -31,23 +30,15 @@ setInterval(function () { router.run(Handler => React.render(, document.body)); SetupStore.setup().then(() => { - if (ContainerStore.pending()) { - router.transitionTo('pull'); - } else { - router.transitionTo('new'); - } Menu.setApplicationMenu(Menu.buildFromTemplate(template())); - ContainerStore.on(ContainerStore.SERVER_ERROR_EVENT, (err) => { - bugsnag.notify(err); - }); - ContainerStore.init(function () {}); + docker.init(); + router.transitionTo('search'); }).catch(err => { metrics.track('Setup Failed', { step: 'catch', message: err.message }); - console.log(err); - bugsnag.notify(err); + throw err; }); ipc.on('application:quitting', () => { diff --git a/src/components/ContainerDetails.react.js b/src/components/ContainerDetails.react.js index b18d69819b..793de1cbd2 100644 --- a/src/components/ContainerDetails.react.js +++ b/src/components/ContainerDetails.react.js @@ -1,39 +1,34 @@ -var _ = require('underscore'); var React = require('react/addons'); +var Router = require('react-router'); var ContainerDetailsHeader = require('./ContainerDetailsHeader.react'); var ContainerDetailsSubheader = require('./ContainerDetailsSubheader.react'); -var Router = require('react-router'); +var containerUtil = require('../utils/ContainerUtil'); +var util = require('../utils/Util'); +var _ = require('underscore'); -var ContainerDetail = React.createClass({ +var ContainerDetails = React.createClass({ contextTypes: { router: React.PropTypes.func }, - getInitialState: function () { - return { - currentRoute: null - }; - }, - componentWillReceiveProps: function () { - this.init(); - }, - componentDidMount: function () { - this.init(); - }, - init: function () { - var currentRoute = _.last(this.context.router.getCurrentRoutes()).name; - if (currentRoute === 'containerDetails') { - this.context.router.transitionTo('containerHome', {name: this.context.router.getCurrentParams().name}); - } - }, + render: function () { + if (!this.props.container) { + return false; + } + + let ports = containerUtil.ports(this.props.container); + let defaultPort = _.find(_.keys(ports), port => { + return util.webPorts.indexOf(port) !== -1; + }); + return (
- - - + + +
); } }); -module.exports = ContainerDetail; +module.exports = ContainerDetails; diff --git a/src/components/ContainerDetailsHeader.react.js b/src/components/ContainerDetailsHeader.react.js index 016bb01287..adbf2d2326 100644 --- a/src/components/ContainerDetailsHeader.react.js +++ b/src/components/ContainerDetailsHeader.react.js @@ -6,12 +6,17 @@ var ContainerDetailsHeader = React.createClass({ if (!this.props.container) { return false; } - if (this.props.container.State.Running && !this.props.container.State.Paused && !this.props.container.State.ExitCode && !this.props.container.State.Restarting) { + + if (this.props.container.State.Updating) { + state = UPDATING; + } else if (this.props.container.State.Running && !this.props.container.State.Paused && !this.props.container.State.ExitCode && !this.props.container.State.Restarting) { state = RUNNING; } else if (this.props.container.State.Restarting) { state = RESTARTING; } else if (this.props.container.State.Paused) { state = PAUSED; + } else if (this.props.container.State.Starting) { + state = STARTING; } else if (this.props.container.State.Downloading) { state = DOWNLOADING; } else { diff --git a/src/components/ContainerDetailsSubheader.react.js b/src/components/ContainerDetailsSubheader.react.js index 6129de5c01..9b4cda575f 100644 --- a/src/components/ContainerDetailsSubheader.react.js +++ b/src/components/ContainerDetailsSubheader.react.js @@ -1,77 +1,50 @@ -var _ = require('underscore'); var $ = require('jquery'); +var _ = require('underscore'); var React = require('react'); var exec = require('exec'); var shell = require('shell'); var metrics = require('../utils/MetricsUtil'); -var ContainerStore = require('../stores/ContainerStore'); var ContainerUtil = require('../utils/ContainerUtil'); var machine = require('../utils/DockerMachineUtil'); var RetinaImage = require('react-retina-image'); -var webPorts = require('../utils/Util').webPorts; var classNames = require('classnames'); var resources = require('../utils/ResourcesUtil'); +var dockerUtil = require('../utils/DockerUtil'); +var containerActions = require('../actions/ContainerActions'); var ContainerDetailsSubheader = React.createClass({ contextTypes: { router: React.PropTypes.func }, - getInitialState: function () { - return { - defaultPort: null - }; - }, - componentWillReceiveProps: function () { - this.init(); - }, - componentDidMount: function () { - this.init(); - }, - init: function () { - this.setState({ - currentRoute: _.last(this.context.router.getCurrentRoutes()).name - }); - var container = ContainerStore.container(this.context.router.getCurrentParams().name); - if (!container) { - return; - } - var ports = ContainerUtil.ports(container); - this.setState({ - ports: ports, - defaultPort: _.find(_.keys(ports), function (port) { - return webPorts.indexOf(port) !== -1; - }) - }); - }, disableRun: function () { if (!this.props.container) { return false; } - return (!this.props.container.State.Running || !this.state.defaultPort); + return (!this.props.container.State.Running || !this.props.defaultPort || this.props.container.State.Updating); }, disableRestart: function () { if (!this.props.container) { return false; } - return (this.props.container.State.Downloading || this.props.container.State.Restarting); + return (this.props.container.State.Downloading || this.props.container.State.Restarting || this.props.container.State.Updating); }, disableStop: function () { if (!this.props.container) { return false; } - return (this.props.container.State.Downloading || this.props.container.State.ExitCode || !this.props.container.State.Running); + return (this.props.container.State.Downloading || this.props.container.State.ExitCode || !this.props.container.State.Running || this.props.container.State.Updating); }, disableStart: function () { if (!this.props.container) { return false; } - return (this.props.container.State.Downloading || this.props.container.State.Running); + return (this.props.container.State.Downloading || this.props.container.State.Running || this.props.container.State.Updating); }, disableTerminal: function () { if (!this.props.container) { return false; } - return (!this.props.container.State.Running); + return (!this.props.container.State.Running || this.props.container.State.Updating); }, disableTab: function () { if (!this.props.container) { @@ -100,32 +73,29 @@ var ContainerDetailsSubheader = React.createClass({ } }, handleRun: function () { - if (this.state.defaultPort && !this.disableRun()) { + if (this.props.defaultPort && !this.disableRun()) { metrics.track('Opened In Browser', { from: 'header' }); - shell.openExternal(this.state.ports[this.state.defaultPort].url); + shell.openExternal(this.props.ports[this.props.defaultPort].url); } }, handleRestart: function () { if (!this.disableRestart()) { metrics.track('Restarted Container'); - ContainerStore.restart(this.props.container.Name, function () { - }); + dockerUtil.restart(this.props.container.Name); } }, handleStop: function () { if (!this.disableStop()) { metrics.track('Stopped Container'); - ContainerStore.stop(this.props.container.Name, function () { - }); + containerActions.stop(this.props.container.Name); } }, handleStart: function () { if (!this.disableStart()) { metrics.track('Started Container'); - ContainerStore.start(this.props.container.Name, function () { - }); + containerActions.start(this.props.container.Name); } }, handleTerminal: function () { @@ -207,19 +177,23 @@ var ContainerDetailsSubheader = React.createClass({ action: true, disabled: this.disableTerminal() }); + + var currentRoutes = _.map(this.context.router.getCurrentRoutes(), r => r.name); + var currentRoute = _.last(currentRoutes); + var tabHomeClasses = classNames({ 'tab': true, - 'active': this.state.currentRoute === 'containerHome', + 'active': currentRoute === 'containerHome', disabled: this.disableTab() }); var tabLogsClasses = classNames({ 'tab': true, - 'active': this.state.currentRoute === 'containerLogs', + 'active': currentRoute === 'containerLogs', disabled: this.disableTab() }); var tabSettingsClasses = classNames({ 'tab': true, - 'active': this.state.currentRoute && (this.state.currentRoute.indexOf('containerSettings') >= 0), + 'active': currentRoutes && (currentRoutes.indexOf('containerSettings') >= 0), disabled: this.disableTab() }); var startStopToggle; diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js index d760bc5bd4..08016322d1 100644 --- a/src/components/ContainerHome.react.js +++ b/src/components/ContainerHome.react.js @@ -1,94 +1,61 @@ var _ = require('underscore'); var $ = require('jquery'); var React = require('react/addons'); -var ContainerStore = require('../stores/ContainerStore'); var Radial = require('./Radial.react'); var ContainerHomePreview = require('./ContainerHomePreview.react'); var ContainerHomeLogs = require('./ContainerHomeLogs.react'); var ContainerHomeFolders = require('./ContainerHomeFolders.react'); var shell = require('shell'); -var ContainerUtil = require('../utils/ContainerUtil'); -var util = require('../utils/Util'); - -var resizeWindow = function () { - $('.left .wrapper').height(window.innerHeight - 240); - $('.right .wrapper').height(window.innerHeight / 2 - 100); -}; var ContainerHome = React.createClass({ contextTypes: { router: React.PropTypes.func }, - getInitialState: function () { - return { - ports: {}, - defaultPort: null, - progress: 0 - }; + + componentDidMount: function() { + this.handleResize(); + window.addEventListener('resize', this.handleResize); }, + + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, + + componentDidUpdate: function () { + this.handleResize(); + }, + handleResize: function () { - resizeWindow(); + $('.left .wrapper').height(window.innerHeight - 240); + $('.right .wrapper').height(window.innerHeight / 2 - 100); }, + handleErrorClick: function () { shell.openExternal('https://github.com/kitematic/kitematic/issues/new'); }, - componentWillReceiveProps: function () { - this.init(); - }, - componentDidMount: function() { - this.init(); - ContainerStore.on(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress); - resizeWindow(); - window.addEventListener('resize', this.handleResize); - }, - componentWillUnmount: function() { - ContainerStore.removeListener(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress); - window.removeEventListener('resize', this.handleResize); - }, - componentDidUpdate: function () { - resizeWindow(); - }, - init: function () { - var container = ContainerStore.container(this.context.router.getCurrentParams().name); - if (!container) { + + render: function () { + if (!this.props.container) { return; } - var ports = ContainerUtil.ports(container); - this.setState({ - ports: ports, - defaultPort: _.find(_.keys(ports), function (port) { - return util.webPorts.indexOf(port) !== -1; - }), - progress: ContainerStore.progress(this.context.router.getCurrentParams().name), - blocked: ContainerStore.blocked(this.context.router.getCurrentParams().name) - }); - }, - updateProgress: function (name) { - if (name === this.context.router.getCurrentParams().name) { - this.setState({ - blocked: ContainerStore.blocked(name), - progress: ContainerStore.progress(name) - }); - } - }, - render: function () { - var body; - if (this.props.error) { + + let body; + if (this.props.container.Error) { body = (

An error occurred:

-

{this.props.error.statusCode} {this.props.error.reason} - {this.props.error.json}

+

{this.props.container.Error.message}

If you feel that this error is invalid, please file a ticket on our GitHub repo.

); } else if (this.props.container && this.props.container.State.Downloading) { - if (this.state.progress !== undefined) { - if (this.state.progress > 0) { + if (this.props.container.Progress !== undefined) { + if (this.props.container.Progress > 0) { body = (

Downloading Image

- +
); } else { @@ -100,7 +67,7 @@ var ContainerHome = React.createClass({ ); } - } else if (this.state.blocked) { + } else if (this.props.container.State.Waiting) { body = (

Waiting For Another Download

@@ -116,12 +83,12 @@ var ContainerHome = React.createClass({ ); } } else { - if (this.state.defaultPort) { + if (this.props.defaultPort) { body = (
- +
@@ -132,10 +99,10 @@ var ContainerHome = React.createClass({ ); } else { var right; - if (_.keys(this.state.ports) > 0) { + if (_.keys(this.props.ports) > 0) { right = (
- +
); diff --git a/src/components/ContainerHomeFolders.react.js b/src/components/ContainerHomeFolders.react.js index db5095f23e..4f769ce766 100644 --- a/src/components/ContainerHomeFolders.react.js +++ b/src/components/ContainerHomeFolders.react.js @@ -5,8 +5,9 @@ var path = require('path'); var shell = require('shell'); var util = require('../utils/Util'); var metrics = require('../utils/MetricsUtil'); -var ContainerStore = require('../stores/ContainerStore'); +var containerActions = require('../actions/ContainerActions'); var dialog = require('remote').require('dialog'); +var mkdirp = require('mkdirp'); var ContainerHomeFolder = React.createClass({ contextTypes: { @@ -37,15 +38,14 @@ var ContainerHomeFolder = React.createClass({ } return pair[1] + ':' + pair[0]; }); - ContainerStore.updateContainer(this.props.container.Name, { - Binds: binds - }, (err) => { - if (err) { - console.log(err); - return; + mkdirp(newHostVolume, function (err) { + console.log(err); + if (!err) { + shell.showItemInFolder(newHostVolume); } - shell.showItemInFolder(newHostVolume); }); + + containerActions.update(this.props.container.Name, {Binds: binds}); } }); } else { diff --git a/src/components/ContainerHomeLogs.react.js b/src/components/ContainerHomeLogs.react.js index 40d3fede58..f8d7ac4570 100644 --- a/src/components/ContainerHomeLogs.react.js +++ b/src/components/ContainerHomeLogs.react.js @@ -22,6 +22,14 @@ module.exports = React.createClass({ LogStore.on(LogStore.SERVER_LOGS_EVENT, this.update); LogStore.fetch(this.props.container.Name); }, + + componentWillReceiveProps: function (nextProps) { + if (this.props.container && nextProps.container && this.props.container.Name !== nextProps.container.Name) { + LogStore.detach(this.props.container.Name); + LogStore.fetch(nextProps.container.Name); + } + }, + componentWillUnmount: function() { if (!this.props.container) { return; diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js index 1d1ac925a8..69bba09568 100644 --- a/src/components/ContainerHomePreview.react.js +++ b/src/components/ContainerHomePreview.react.js @@ -1,28 +1,14 @@ var _ = require('underscore'); var React = require('react/addons'); -var ContainerStore = require('../stores/ContainerStore'); -var ContainerUtil = require('../utils/ContainerUtil'); var request = require('request'); var shell = require('shell'); var metrics = require('../utils/MetricsUtil'); -var webPorts = require('../utils/Util').webPorts; var ContainerHomePreview = React.createClass({ contextTypes: { router: React.PropTypes.func }, - getInitialState: function () { - return { - ports: {}, - defaultPort: null - }; - }, - componentWillReceiveProps: function () { - this.init(); - }, - componentDidMount: function() { - this.init(); - }, + reload: function () { var webview = document.getElementById('webview'); if (webview) { @@ -38,40 +24,31 @@ var ContainerHomePreview = React.createClass({ }); } }, + componentWillUnmount: function() { clearInterval(this.timer); }, - init: function () { - var container = ContainerStore.container(this.context.router.getCurrentParams().name); - if (!container) { - return; - } - var ports = ContainerUtil.ports(container); - this.setState({ - ports: ports, - defaultPort: _.find(_.keys(ports), function (port) { - return webPorts.indexOf(port) !== -1; - }) - }); - }, + handleClickPreview: function () { - if (this.state.defaultPort) { + if (this.props.defaultPort) { metrics.track('Opened In Browser', { from: 'preview' }); - shell.openExternal(this.state.ports[this.state.defaultPort].url); + shell.openExternal(this.props.ports[this.props.defaultPort].url); } }, + handleClickNotShowingCorrectly: function () { metrics.track('Viewed Port Settings', { from: 'preview' }); this.context.router.transitionTo('containerSettingsPorts', {name: this.context.router.getCurrentParams().name}); }, + 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'}); + if (this.props.defaultPort) { + var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'}); preview = (

Web Preview

@@ -83,7 +60,7 @@ var ContainerHomePreview = React.createClass({
); } else { - var ports = _.map(_.pairs(this.state.ports), function (pair) { + var ports = _.map(_.pairs(this.props.ports), function (pair) { var key = pair[0]; var val = pair[1]; return ( @@ -93,6 +70,7 @@ var ContainerHomePreview = React.createClass({
); }); + preview = (

IP & Ports

diff --git a/src/components/ContainerList.react.js b/src/components/ContainerList.react.js index 1e6f358d6d..7ff8504b3f 100644 --- a/src/components/ContainerList.react.js +++ b/src/components/ContainerList.react.js @@ -4,19 +4,12 @@ var ContainerListNewItem = require('./ContainerListNewItem.react'); var ContainerList = React.createClass({ componentWillMount: function () { - this._start = Date.now(); + this.start = Date.now(); }, render: function () { - var self = this; - var containers = this.props.containers.map(function (container) { - var containerId = container.Id; - if (!containerId && container.State.Downloading) { - // Fall back to the container image name when there is no id. (when the - // image is downloading). - containerId = container.Image; - } + var containers = this.props.containers.map(container => { return ( - + ); }); return ( diff --git a/src/components/ContainerListItem.react.js b/src/components/ContainerListItem.react.js index 827a1abb9c..b8c07387af 100644 --- a/src/components/ContainerListItem.react.js +++ b/src/components/ContainerListItem.react.js @@ -4,9 +4,9 @@ var Router = require('react-router'); var remote = require('remote'); var dialog = remote.require('dialog'); var metrics = require('../utils/MetricsUtil'); -var ContainerStore = require('../stores/ContainerStore'); var OverlayTrigger = require('react-bootstrap').OverlayTrigger; var Tooltip = require('react-bootstrap').Tooltip; +var containerActions = require('../actions/ContainerActions'); var ContainerListItem = React.createClass({ handleItemMouseEnter: function () { @@ -29,12 +29,7 @@ var ContainerListItem = React.createClass({ from: 'list', type: 'existing' }); - ContainerStore.remove(this.props.container.Name, () => { - var containers = ContainerStore.sorted(); - if (containers.length === 0) { - $(document.body).find('.new-container-item').parent().fadeIn(); - } - }); + containerActions.destroy(this.props.container.Name); } }.bind(this)); }, @@ -56,7 +51,7 @@ var ContainerListItem = React.createClass({ // Synchronize all animations var style = { - WebkitAnimationDelay: (self.props.start - Date.now()) + 'ms' + WebkitAnimationDelay: 0 + 'ms' }; var state; @@ -101,7 +96,7 @@ var ContainerListItem = React.createClass({ } return ( - +
  • {state}
    diff --git a/src/components/ContainerListNewItem.react.js b/src/components/ContainerListNewItem.react.js index ab64e5792e..237e620c4a 100644 --- a/src/components/ContainerListNewItem.react.js +++ b/src/components/ContainerListNewItem.react.js @@ -1,13 +1,10 @@ var $ = require('jquery'); -var React = require('react/addons'); +var React = require('react'); var Router = require('react-router'); -var ContainerStore = require('../stores/ContainerStore'); var metrics = require('../utils/MetricsUtil'); var ContainerListNewItem = React.createClass({ - contextTypes: { - router: React.PropTypes.func - }, + mixins: [Router.Navigation, Router.State], handleItemMouseEnter: function () { var $action = $(this.getDOMNode()).find('.action'); $action.show(); @@ -16,22 +13,20 @@ var ContainerListNewItem = React.createClass({ var $action = $(this.getDOMNode()).find('.action'); $action.hide(); }, - handleDelete: function () { - var self = this; + handleDelete: function (event) { metrics.track('Deleted Container', { from: 'list', type: 'new' }); - var containers = ContainerStore.sorted(); - $(self.getDOMNode()).fadeOut(300, () => { - if (containers.length > 0) { - var name = containers[0].Name; - this.context.router.transitionTo('containerHome', {name: name}); - } - }); + + if (this.props.containers.length > 0 && this.getRoutes()[this.getRoutes().length - 2].name === 'new') { + var name = this.props.containers[0].Name; + this.transitionTo('containerHome', {name}); + } + $(this.getDOMNode()).fadeOut(300); + event.preventDefault(); }, render: function () { - var self = this; var action; if (this.props.containers.length > 0) { action = ( @@ -42,7 +37,7 @@ var ContainerListNewItem = React.createClass({ } return ( -
  • +
  • diff --git a/src/components/ContainerSettings.react.js b/src/components/ContainerSettings.react.js index 7a25dd73ae..856b1fccc9 100644 --- a/src/components/ContainerSettings.react.js +++ b/src/components/ContainerSettings.react.js @@ -45,7 +45,7 @@ var ContainerSettings = React.createClass({
    - +
    • ); diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js index 4fad44b149..f07439bfbb 100644 --- a/src/components/ContainerSettingsGeneral.react.js +++ b/src/components/ContainerSettingsGeneral.react.js @@ -1,80 +1,66 @@ var _ = require('underscore'); -var $ = require('jquery'); var React = require('react/addons'); -var path = require('path'); var remote = require('remote'); -var rimraf = require('rimraf'); -var fs = require('fs'); var metrics = require('../utils/MetricsUtil'); var dialog = remote.require('dialog'); -var ContainerStore = require('../stores/ContainerStore'); var ContainerUtil = require('../utils/ContainerUtil'); - -var containerNameSlugify = function (text) { - text = text.replace(/^\s+|\s+$/g, ''); // Trim - text = text.toLowerCase(); - // Remove Accents - var from = "àáäâèéëêìíïîòóöôùúüûñç·/,:;"; - var to = "aaaaeeeeiiiioooouuuunc-----"; - for (var i=0, l=from.length ; i { - if (err) { - this.setState({ - nameError: err.message - }); - return; - } - metrics.track('Changed Container Name'); - this.context.router.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, () => {}); - if (err) { - console.log(err); - } - }); - }); - }); + + containerActions.rename(this.props.container.Name, newName); + this.context.router.transitionTo('containerSettingsGeneral', {name: newName}); + metrics.track('Changed Container Name'); }, - handleSaveEnvVar: function () { - var $rows = $('.env-vars .keyval-row'); - var envVarList = []; - $rows.each(function () { - var key = $(this).find('.key').val(); - var val = $(this).find('.val').val(); - if (!key.length || !val.length) { - return; - } - envVarList.push(key + '=' + val); - }); - var self = this; + + handleSaveEnvVars: function () { metrics.track('Saved Environment Variables'); - ContainerStore.updateContainer(self.props.container.Name, { - Env: envVarList - }, function (err) { - if (err) { - console.error(err); - } else { - self.setState({ - pendingEnv: {} - }); - $('#new-env-key').val(''); - $('#new-env-val').val(''); + let list = []; + _.each(this.state.env, kvp => { + let [key, value] = kvp; + if ((key && key.length) || (value && value.length)) { + list.push(key + '=' + value); } }); + containerActions.update(this.props.container.Name, {Env: list}); }, - handleAddPendingEnvVar: function () { - var newKey = $('#new-env-key').val(); - var newVal = $('#new-env-val').val(); - var newEnv = {}; - newEnv[newKey] = newVal; + + handleChangeEnvKey: function (index, event) { + let env = _.map(this.state.env, _.clone); + env[index][0] = event.target.value; this.setState({ - pendingEnv: _.extend(this.state.pendingEnv, newEnv) + env: env + }); + }, + + handleChangeEnvVal: function (index, event) { + let env = _.map(this.state.env, _.clone); + env[index][1] = event.target.value; + this.setState({ + env: env + }); + }, + + handleAddEnvVar: function () { + let env = _.map(this.state.env, _.clone); + env.push(['', '']); + this.setState({ + env: env }); - $('#new-env-key').val(''); - $('#new-env-val').val(''); metrics.track('Added Pending Environment Variable'); }, - handleRemoveEnvVar: function (key) { - var newEnv = _.omit(this.state.env, key); + + handleRemoveEnvVar: function (index) { + let env = _.map(this.state.env, _.clone); + env.splice(index, 1); + if (env.length === 0) { + env.push(['', '']); + } + this.setState({ - env: newEnv + env: env }); + metrics.track('Removed Environment Variable'); }, - handleRemovePendingEnvVar: function (key) { - var newEnv = _.omit(this.state.pendingEnv, key); - this.setState({ - pendingEnv: newEnv - }); - metrics.track('Removed Pending Environment Variable'); - }, + handleDeleteContainer: function () { dialog.showMessageBox({ message: 'Are you sure you want to delete this container?', buttons: ['Delete', 'Cancel'] - }, function (index) { - var volumePath = path.join(process.env.HOME, 'Kitematic', this.props.container.Name); - if (fs.existsSync(volumePath)) { - rimraf(volumePath, function (err) { - console.log(err); - }); - } + }, index => { if (index === 0) { metrics.track('Deleted Container', { from: 'settings', type: 'existing' }); - ContainerStore.remove(this.props.container.Name, function (err) { - console.error(err); - }); + containerActions.destroy(this.props.container.Name); } - }.bind(this)); + }); }, + render: function () { if (!this.props.container) { - return (
    ); + return false; } + var willBeRenamedAs; var btnSaveName = ( Save @@ -216,7 +170,8 @@ var ContainerSettingsGeneral = React.createClass({

    {this.state.nameError}

    ); } - var rename = ( + + let rename = (

    Container Name

    @@ -226,25 +181,25 @@ var ContainerSettingsGeneral = React.createClass({ {btnSaveName}
    ); - var self = this; - var envVars = _.map(this.state.env, function (val, key) { + + let vars = _.map(this.state.env, (kvp, index) => { + let [key, val] = kvp; + let icon; + if (index === this.state.env.length - 1) { + icon = ; + } else { + icon = ; + } + return ( -
    - - - -
    - ); - }); - var pendingEnvVars = _.map(this.state.pendingEnv, function (val, key) { - return ( -
    - - - +
    + + + {icon}
    ); }); + return (
    {rename} @@ -255,15 +210,9 @@ var ContainerSettingsGeneral = React.createClass({
    VALUE
    - {envVars} - {pendingEnvVars} -
    - - - -
    + {vars}
    - Save + Save

    Delete Container

    diff --git a/src/components/ContainerSettingsPorts.react.js b/src/components/ContainerSettingsPorts.react.js index 1992763a4f..c266384d94 100644 --- a/src/components/ContainerSettingsPorts.react.js +++ b/src/components/ContainerSettingsPorts.react.js @@ -1,7 +1,6 @@ var _ = require('underscore'); var React = require('react/addons'); var shell = require('shell'); -var ContainerStore = require('../stores/ContainerStore'); var ContainerUtil = require('../utils/ContainerUtil'); var metrics = require('../utils/MetricsUtil'); var webPorts = require('../utils/Util').webPorts; @@ -16,18 +15,11 @@ var ContainerSettingsPorts = React.createClass({ defaultPort: null }; }, - componentWillReceiveProps: function () { - this.init(); - }, componentDidMount: function() { - this.init(); - }, - init: function () { - var container = ContainerStore.container(this.context.router.getCurrentParams().name); - if (!container) { + if (!this.props.container) { return; } - var ports = ContainerUtil.ports(container); + var ports = ContainerUtil.ports(this.props.container); this.setState({ ports: ports, defaultPort: _.find(_.keys(ports), function (port) { diff --git a/src/components/ContainerSettingsVolumes.react.js b/src/components/ContainerSettingsVolumes.react.js index 73c8ef95c0..5ccd5e4f32 100644 --- a/src/components/ContainerSettingsVolumes.react.js +++ b/src/components/ContainerSettingsVolumes.react.js @@ -4,12 +4,12 @@ var remote = require('remote'); var dialog = remote.require('dialog'); var shell = require('shell'); var metrics = require('../utils/MetricsUtil'); -var ContainerStore = require('../stores/ContainerStore'); +var containerActions = require('../actions/ContainerActions'); var ContainerSettingsVolumes = React.createClass({ handleChooseVolumeClick: function (dockerVol) { var self = this; - dialog.showOpenDialog({properties: ['openDirectory', 'createDirectory']}, function (filenames) { + dialog.showOpenDialog({properties: ['openDirectory', 'createDirectory']}, (filenames) => { if (!filenames) { return; } @@ -21,11 +21,8 @@ var ContainerSettingsVolumes = React.createClass({ var binds = _.pairs(volumes).map(function (pair) { return pair[1] + ':' + pair[0]; }); - ContainerStore.updateContainer(self.props.container.Name, { - Binds: binds - }, function (err) { - if (err) { console.log(err); } - }); + + containerActions.update(this.props.container.Name, {Binds: binds, Volumes: volumes}); } }); }, @@ -38,11 +35,7 @@ var ContainerSettingsVolumes = React.createClass({ var binds = _.pairs(volumes).map(function (pair) { return pair[1] + ':' + pair[0]; }); - ContainerStore.updateContainer(this.props.container.Name, { - Binds: binds - }, function (err) { - if (err) { console.log(err); } - }); + containerActions.update(this.props.container.Name, {Binds: binds, Volumes: volumes}); }, handleOpenVolumeClick: function (path) { metrics.track('Opened Volume Directory', { @@ -52,24 +45,24 @@ var ContainerSettingsVolumes = React.createClass({ }, render: function () { if (!this.props.container) { - return (
    ); + return false; } - var self = this; - var volumes = _.map(self.props.container.Volumes, function (val, key) { + + var volumes = _.map(this.props.container.Volumes, (val, key) => { if (!val || val.indexOf(process.env.HOME) === -1) { val = ( No Folder - Change - Remove + Change + Remove ); } else { val = ( - {val.replace(process.env.HOME, '~')} - Change - Remove + {val.replace(process.env.HOME, '~')} + Change + Remove ); } diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js index 97a48806e5..03319d7d20 100644 --- a/src/components/Containers.react.js +++ b/src/components/Containers.react.js @@ -1,7 +1,8 @@ var $ = require('jquery'); -var React = require('react/addons'); +var _ = require('underscore'); +var React = require('react'); var Router = require('react-router'); -var ContainerStore = require('../stores/ContainerStore'); +var containerStore = require('../stores/ContainerStore'); var ContainerList = require('./ContainerList.react'); var Header = require('./Header.react'); var ipc = require('ipc'); @@ -16,22 +17,19 @@ var Containers = React.createClass({ contextTypes: { router: React.PropTypes.func }, + getInitialState: function () { return { sidebarOffset: 0, - containers: ContainerStore.containers(), - sorted: ContainerStore.sorted(), + containers: {}, + sorted: [], updateAvailable: false, - currentButtonLabel: '', - error: ContainerStore.error(), - downloading: ContainerStore.downloading() + currentButtonLabel: '' }; }, + componentDidMount: function () { - this.update(); - ContainerStore.on(ContainerStore.SERVER_ERROR_EVENT, this.updateError); - ContainerStore.on(ContainerStore.SERVER_CONTAINER_EVENT, this.update); - ContainerStore.on(ContainerStore.CLIENT_CONTAINER_EVENT, this.updateFromClient); + containerStore.listen(this.update); ipc.on('application:update-available', () => { this.setState({ @@ -40,39 +38,47 @@ var Containers = React.createClass({ }); autoUpdater.checkForUpdates(); }, + componentDidUnmount: function () { - ContainerStore.removeListener(ContainerStore.SERVER_CONTAINER_EVENT, this.update); - ContainerStore.removeListener(ContainerStore.CLIENT_CONTAINER_EVENT, this.updateFromClient); + containerStore.unlisten(this.update); }, - updateError: function (err) { - this.setState({ - error: err + + update: function () { + let containers = containerStore.getState().containers; + let sorted = _.values(containers).sort(function (a, b) { + if (a.State.Downloading && !b.State.Downloading) { + return -1; + } else if (!a.State.Downloading && b.State.Downloading) { + return 1; + } else { + if (a.State.Running && !b.State.Running) { + return -1; + } else if (!a.State.Running && b.State.Running) { + return 1; + } else { + return a.Name.localeCompare(b.Name); + } + } }); - }, - update: function (name, status) { - var sorted = ContainerStore.sorted(); - this.setState({ - containers: ContainerStore.containers(), - sorted: sorted, - pending: ContainerStore.pending(), - downloading: ContainerStore.downloading() - }); - if (status === 'destroy') { + + let name = this.context.router.getCurrentParams().name; + if (containerStore.getState().pending) { + this.context.router.transitionTo('pull'); + } else if (name && !containers[name]) { if (sorted.length) { this.context.router.transitionTo('containerHome', {name: sorted[0].Name}); } else { - this.context.router.transitionTo('containers'); + this.context.router.transitionTo('search'); } } + + this.setState({ + containers: containers, + sorted: sorted, + pending: containerStore.getState().pending + }); }, - updateFromClient: function (name, status) { - this.update(name, status); - if (status === 'create') { - this.context.router.transitionTo('containerHome', {name: name}); - } else if (status === 'pending' && ContainerStore.pending()) { - this.context.router.transitionTo('pull'); - } - }, + handleScroll: function (e) { if (e.target.scrollTop > 0 && !this.state.sidebarOffset) { this.setState({ @@ -84,63 +90,75 @@ var Containers = React.createClass({ }); } }, + handleNewContainer: function () { $(this.getDOMNode()).find('.new-container-item').parent().fadeIn(); this.context.router.transitionTo('new'); metrics.track('Pressed New Container'); }, + handleAutoUpdateClick: function () { metrics.track('Restarted to Update'); ipc.send('application:quit-install'); }, + handleClickPreferences: function () { metrics.track('Opened Preferences', { from: 'app' }); this.context.router.transitionTo('preferences'); }, + handleClickDockerTerminal: function () { metrics.track('Opened Docker Terminal', { from: 'app' }); machine.dockerTerminal(); }, + handleClickReportIssue: function () { metrics.track('Opened Issue Reporter', { from: 'app' }); shell.openExternal('https://github.com/kitematic/kitematic/issues/new'); }, + handleMouseEnterDockerTerminal: function () { this.setState({ currentButtonLabel: 'Open terminal to use Docker command line.' }); }, + handleMouseLeaveDockerTerminal: function () { this.setState({ currentButtonLabel: '' }); }, + handleMouseEnterReportIssue: function () { this.setState({ currentButtonLabel: 'Report an issue or suggest feedback.' }); }, + handleMouseLeaveReportIssue: function () { this.setState({ currentButtonLabel: '' }); }, + handleMouseEnterPreferences: function () { this.setState({ currentButtonLabel: 'Change app preferences.' }); }, + handleMouseLeavePreferences: function () { this.setState({ currentButtonLabel: '' }); }, + render: function () { var sidebarHeaderClass = 'sidebar-header'; if (this.state.sidebarOffset) { @@ -166,7 +184,7 @@ var Containers = React.createClass({
    - +
    {this.state.currentButtonLabel}
    @@ -177,7 +195,7 @@ var Containers = React.createClass({
    - +
    ); diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js index 6be5466a3c..67a0a0a229 100644 --- a/src/components/ImageCard.react.js +++ b/src/components/ImageCard.react.js @@ -1,13 +1,16 @@ var $ = require('jquery'); var React = require('react/addons'); +var Router = require('react-router'); var RetinaImage = require('react-retina-image'); -var ContainerStore = require('../stores/ContainerStore'); var metrics = require('../utils/MetricsUtil'); var OverlayTrigger = require('react-bootstrap').OverlayTrigger; var Tooltip = require('react-bootstrap').Tooltip; var util = require('../utils/Util'); +var containerActions = require('../actions/ContainerActions'); +var containerStore = require('../stores/ContainerStore'); var ImageCard = React.createClass({ + mixins: [Router.Navigation], getInitialState: function () { return { tags: [], @@ -22,13 +25,13 @@ var ImageCard = React.createClass({ $tagOverlay.fadeOut(300); metrics.track('Selected Image Tag'); }, - handleClick: function (name) { + handleClick: function (repository) { metrics.track('Created Container', { from: 'search' }); - ContainerStore.create(name, this.state.chosenTag, function () { - $(document.body).find('.new-container-item').parent().fadeOut(); - }.bind(this)); + let name = containerStore.generateName(repository); + containerActions.run(name, repository, this.state.chosenTag); + this.transitionTo('containerHome', {name}); }, handleTagOverlayClick: function (name) { var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay'); diff --git a/src/components/NewContainerPull.react.js b/src/components/NewContainerPull.react.js index 3327b399f5..24dbc63a13 100644 --- a/src/components/NewContainerPull.react.js +++ b/src/components/NewContainerPull.react.js @@ -1,30 +1,33 @@ var React = require('react/addons'); var Router = require('react-router'); var shell = require('shell'); -var ContainerStore = require('../stores/ContainerStore'); +var containerActions = require('../actions/ContainerActions'); +var containerStore = require('../stores/ContainerStore'); var metrics = require('../utils/MetricsUtil'); module.exports = React.createClass({ mixins: [Router.Navigation], handleOpenClick: function () { - var repo = this.props.pending.repository; + var repo = this.props.pending.repo; if (repo.indexOf('/') === -1) { - shell.openExternal(`https://registry.hub.docker.com/_/${this.props.pending.repository}`); + shell.openExternal(`https://registry.hub.docker.com/_/${this.props.pending.repo}`); } else { - shell.openExternal(`https://registry.hub.docker.com/u/${this.props.pending.repository}`); + shell.openExternal(`https://registry.hub.docker.com/u/${this.props.pending.repo}`); } }, handleCancelClick: function () { metrics.track('Canceled Click-To-Pull'); - ContainerStore.clearPending(); - this.context.router.transitionTo('new'); + containerActions.clearPending(); + this.transitionTo('new'); }, handleConfirmClick: function () { metrics.track('Created Container', { from: 'click-to-pull' }); - ContainerStore.clearPending(); - ContainerStore.create(this.props.pending.repository, this.props.pending.tag, function () {}); + containerActions.clearPending(); + let name = containerStore.generateName(this.props.pending.repo); + containerActions.run(name, this.props.pending.repo, this.props.pending.tag); + this.transitionTo('containerHome', {name}); }, render: function () { if (!this.props.pending) { @@ -34,7 +37,7 @@ module.exports = React.createClass({
    -

    You're about to download and run {this.props.pending.repository}:{this.props.pending.tag}.

    +

    You're about to download and run {this.props.pending.repo}:{this.props.pending.tag}.

    Please confirm to create the container.

    Cancel Confirm diff --git a/src/menutemplate.js b/src/menutemplate.js index 6f3d3fa1fd..f673f8d265 100644 --- a/src/menutemplate.js +++ b/src/menutemplate.js @@ -5,7 +5,7 @@ var router = require('./router'); var util = require('./utils/Util'); var metrics = require('./utils/MetricsUtil'); var machine = require('./utils/DockerMachineUtil'); -var docker = require('./utils/DockerUtil'); +import docker from './utils/DockerUtil'; // main.js var MenuTemplate = function () { @@ -23,7 +23,7 @@ var MenuTemplate = function () { { label: 'Preferences', accelerator: util.CommandOrCtrl() + '+,', - enabled: !!docker.host(), + enabled: !!docker.host, click: function () { metrics.track('Opened Preferences', { from: 'menu' @@ -76,7 +76,7 @@ var MenuTemplate = function () { { label: 'Open Docker Command Line Terminal', accelerator: util.CommandOrCtrl() + '+Shift+T', - enabled: !!docker.host(), + enabled: !!docker.host, click: function() { metrics.track('Opened Docker Terminal', { from: 'menu' diff --git a/src/routes.js b/src/routes.js index a65d0e8395..63bdda0f0b 100644 --- a/src/routes.js +++ b/src/routes.js @@ -29,8 +29,8 @@ var App = React.createClass({ var routes = ( - - + + @@ -43,9 +43,9 @@ var routes = ( - + ); diff --git a/src/stores/ContainerStore.js b/src/stores/ContainerStore.js index 552858aa9b..d3b63099a0 100644 --- a/src/stores/ContainerStore.js +++ b/src/stores/ContainerStore.js @@ -1,520 +1,163 @@ -var _ = require('underscore'); -var EventEmitter = require('events').EventEmitter; -var async = require('async'); -var assign = require('object-assign'); -var docker = require('../utils/DockerUtil'); -var metrics = require('../utils/MetricsUtil'); -var registry = require('../utils/RegistryUtil'); -var logStore = require('../stores/LogStore'); -var bugsnag = require('bugsnag-js'); +import _ from 'underscore'; +import deepExtend from 'deep-extend'; +import alt from '../alt'; +import containerServerActions from '../actions/ContainerServerActions'; +import containerActions from '../actions/ContainerActions'; -var _placeholders = {}; -var _containers = {}; -var _progress = {}; -var _muted = {}; -var _blocked = {}; -var _error = null; -var _pending = null; +class ContainerStore { + constructor () { + this.bindActions(containerActions); + this.bindActions(containerServerActions); + this.containers = {}; -var ContainerStore = assign(Object.create(EventEmitter.prototype), { - CLIENT_CONTAINER_EVENT: 'client_container_event', - SERVER_CONTAINER_EVENT: 'server_container_event', - SERVER_PROGRESS_EVENT: 'server_progress_event', - SERVER_ERROR_EVENT: 'server_error_event', - _pullImage: function (repository, tag, callback, progressCallback, blockedCallback) { - registry.layers(repository, tag, (err, layerSizes) => { + // Pending container to create + this.pending = null; + } - // TODO: Support v2 registry API - // TODO: clean this up- It's messy to work with pulls from both the v1 and v2 registry APIs - // Use the per-layer pull progress % to update the total progress. - docker.client().listImages({all: 1}, (err, images) => { - images = images || []; - var existingIds = new Set(images.map(function (image) { - return image.Id.slice(0, 12); - })); - var layersToDownload = layerSizes.filter(function (layerSize) { - return !existingIds.has(layerSize.Id) && !isNaN(layerSize.size); - }); + error ({name, error}) { + let containers = this.containers; + if (containers[name]) { + containers[name].Error = error; + } + this.setState({containers}); + } - var totalBytes = layersToDownload.map(function (s) { return s.size; }).reduce(function (pv, sv) { return pv + sv; }, 0); - docker.client().pull(repository + ':' + tag, (err, stream) => { - if (err) { - callback(err); - return; - } - stream.setEncoding('utf8'); + start ({name}) { + let containers = this.containers; + if (containers[name]) { + containers[name].State.Starting = true; + this.setState({containers}); + } + } - var layerProgress = layersToDownload.reduce(function (r, layer) { - if (_.findWhere(images, {Id: layer.Id})) { - r[layer.Id] = 100; - } else { - r[layer.Id] = 0; - } - return r; - }, {}); + started ({name}) { + let containers = this.containers; + if (containers[name]) { + containers[name].State.Starting = false; + containers[name].State.Updating = false; + this.setState({containers}); + } + } - stream.on('data', str => { - var data = JSON.parse(str); + stop ({name}) { + let containers = this.containers; + if (containers[name]) { + containers[name].State.Running = false; + this.setState({containers}); + } + } - if (data.error) { - _error = data.error; - callback(data.error); - return; - } + rename ({name, newName}) { + let containers = this.containers; + let data = containers[name]; + data.Name = newName; - if (data.status && (data.status === 'Pulling dependent layers' || data.status.indexOf('already being pulled by another client') !== -1)) { - blockedCallback(); - return; - } + if (data.State) { + data.State.Updating = true; + } - if (data.status === 'Already exists') { - layerProgress[data.id] = 1; - } else if (data.status === 'Downloading') { - var current = data.progressDetail.current; - var total = data.progressDetail.total; - if (total <= 0) { - progressCallback(0); - return; - } else { - layerProgress[data.id] = current / total; - } + containers[newName] = data; + delete containers[name]; + this.setState({containers}); + } - var chunks = layersToDownload.map(function (s) { - var progress = layerProgress[s.Id] || 0; - return progress * s.size; - }); + added ({container}) { + let containers = this.containers; + containers[container.Name] = container; + this.setState({containers}); + } - var totalReceived = chunks.reduce(function (pv, sv) { - return pv + sv; - }, 0); + update ({name, container}) { + let containers = this.containers; + if (containers[name] && containers[name].State && containers[name].State.Updating) { + return; + } - var totalProgress = totalReceived / totalBytes; - progressCallback(totalProgress); - } - }); - stream.on('end', function () { - callback(_error); - _error = null; - }); - }); - }); + deepExtend(containers[name], container); + + if (containers[name].State) { + containers[name].State.Updating = true; + } + + this.setState({containers}); + } + + updated ({container}) { + let containers = this.containers; + if (!containers[container.Name] || containers[container.Name].State.Updating) { + return; + } + + containers[container.Name] = container; + + this.setState({containers}); + } + + allUpdated ({containers}) { + this.setState({containers}); + } + + progress ({name, progress}) { + let containers = this.containers; + if (containers[name]) { + containers[name].Progress = progress; + } + this.setState({containers}); + } + + destroy ({name}) { + let containers = this.containers; + delete containers[name]; + this.setState({containers}); + } + + destroyed ({name}) { + let containers = this.containers; + let container = _.find(_.values(this.containers), container => { + return container.Id === name || container.Name === name; }); - }, - _startContainer: function (name, containerData, callback) { - var self = this; - var binds = containerData.Binds || []; - var startopts = { - Binds: binds - }; - if (containerData.NetworkSettings && containerData.NetworkSettings.Ports) { - startopts.PortBindings = containerData.NetworkSettings.Ports; - } else{ - startopts.PublishAllPorts = true; + + if (container && container.State && container.State.Updating) { + return; } - var container = docker.client().getContainer(name); - container.start(startopts, function (err) { - if (err) { - callback(err); - return; - } - self.fetchContainer(name, callback); - logStore.fetch(name); - }); - }, - _createContainer: function (name, containerData, callback) { - var existing = docker.client().getContainer(name); - var self = this; - if (!containerData.name && containerData.Name) { - containerData.name = containerData.Name; - } else if (!containerData.name) { - containerData.name = name; + + if (container) { + delete containers[container.Name]; + this.setState({containers}); } - if (containerData.Config && containerData.Config.Image) { - containerData.Image = containerData.Config.Image; + } + + waiting({name, waiting}) { + let containers = this.containers; + if (containers[name]) { + containers[name].State.Waiting = waiting; } - if (!containerData.Env && containerData.Config && containerData.Config.Env) { - containerData.Env = containerData.Config.Env; - } - existing.kill(function () { - existing.remove(function () { - docker.client().createContainer(containerData, function (err) { - if (err) { - callback(err, null); - return; - } - self._startContainer(name, containerData, callback); - }); - }); - }); - }, - _generateName: function (repository) { - var base = _.last(repository.split('/')); + this.setState({containers}); + } + + pending ({repo, tag}) { + let pending = {repo, tag}; + this.setState({pending}); + } + + clearPending () { + this.setState({pending: null}); + } + + static generateName (repo) { + const base = _.last(repo.split('/')); + const names = _.keys(this.getState().containers); var count = 1; var name = base; while (true) { - if (!this.containers()[name]) { + if (names.indexOf(name) === -1) { return name; } else { count++; name = base + '-' + count; } } - }, - _resumePulling: function (callback) { - var downloading = _.filter(_.values(this.containers()), function (container) { - return container.State.Downloading; - }); - - // Recover any pulls that were happening - var self = this; - downloading.forEach(function (container) { - _progress[container.Name] = 99; - docker.client().pull(container.Config.Image, function (err, stream) { - if (err) { - callback(err); - return; - } - stream.setEncoding('utf8'); - stream.on('data', function () {}); - stream.on('end', function () { - delete _placeholders[container.Name]; - delete _progress[container.Name]; - localStorage.setItem('store.placeholders', JSON.stringify(_placeholders)); - self._createContainer(container.Name, {Image: container.Config.Image}, err => { - if (err) { - callback(err); - return; - } - self.emit(self.SERVER_PROGRESS_EVENT, container.Name); - self.emit(self.CLIENT_CONTAINER_EVENT, container.Name); - }); - }); - }); - }); - }, - _startListeningToEvents: function (callback) { - docker.client().getEvents((err, stream) => { - if (err) { - callback(err); - return; - } - if (stream) { - stream.setEncoding('utf8'); - stream.on('data', this._dockerEvent.bind(this)); - } - }); - }, - _dockerEvent: function (json) { - var data = JSON.parse(json); - console.log(data); - - if (data.status === 'pull' || data.status === 'untag' || data.status === 'delete') { - return; - } - - // If the event is delete, remove the container - if (data.status === 'destroy') { - var container = _.findWhere(_.values(_containers), {Id: data.id}); - if (container) { - delete _containers[container.Name]; - if (!_muted[container.Name]) { - this.emit(this.SERVER_CONTAINER_EVENT, container.Name, data.status); - } - } else { - this.emit(this.SERVER_CONTAINER_EVENT, data.status); - } - } else { - this.fetchContainer(data.id, err => { - if (err) { - return; - } - var container = _.findWhere(_.values(_containers), {Id: data.id}); - if (!container || _muted[container.Name]) { - return; - } - this.emit(this.SERVER_CONTAINER_EVENT, container ? container.Name : null, data.status); - }); - } - }, - init: function (callback) { - this.fetchAllContainers(err => { - if (err) { - _error = err; - this.emit(this.SERVER_ERROR_EVENT, err); - bugsnag.notify(err, 'Container Store failed to init', err); - callback(err); - return; - } else { - callback(); - } - var placeholderData = JSON.parse(localStorage.getItem('store.placeholders')); - if (placeholderData) { - _placeholders = _.omit(placeholderData, _.keys(_containers)); - localStorage.setItem('store.placeholders', JSON.stringify(_placeholders)); - } - this.emit(this.CLIENT_CONTAINER_EVENT); - this._resumePulling(err => { - _error = err; - this.emit(this.SERVER_ERROR_EVENT, err); - bugsnag.notify(err, 'Container Store failed to resume pulling', err); - }); - this._startListeningToEvents(err => { - _error = err; - this.emit(this.SERVER_ERROR_EVENT, err); - bugsnag.notify(err, 'Container Store failed to listen to events', err); - }); - }); - }, - fetchContainer: function (id, callback) { - docker.client().getContainer(id).inspect((err, container) => { - if (err) { - callback(err); - } else { - if (container.Config.Image === container.Image.slice(0, 12) || container.Config.Image === container.Image) { - callback(); - return; - } - // Fix leading slash in container names - container.Name = container.Name.replace('/', ''); - _containers[container.Name] = container; - callback(null, container); - } - }); - }, - fetchAllContainers: function (callback) { - docker.client().listContainers({all: true}, (err, containers) => { - if (err) { - callback(err); - return; - } - var names = new Set(_.map(containers, container => container.Names[0].replace('/', ''))); - _.each(_.keys(_containers), name => { - if (!names.has(name)) { - delete _containers[name]; - } - }); - async.each(containers, (container, callback) => { - this.fetchContainer(container.Id, function (err) { - callback(err); - }); - }, function (err) { - callback(err); - }); - }); - }, - create: function (repository, tag, callback) { - tag = tag || 'latest'; - var imageName = repository + ':' + tag; - var containerName = this._generateName(repository); - - _placeholders[containerName] = { - Id: require('crypto').randomBytes(32).toString('hex'), - Name: containerName, - Image: imageName, - Config: { - Image: imageName, - }, - State: { - Downloading: true - } - }; - localStorage.setItem('store.placeholders', JSON.stringify(_placeholders)); - this.emit(this.CLIENT_CONTAINER_EVENT, containerName, 'create'); - - _muted[containerName] = true; - this._pullImage(repository, tag, err => { - if (err) { - _error = err; - this.emit(this.SERVER_ERROR_EVENT, err); - bugsnag.notify(err, 'Container Store failed to create container', err); - return; - } - _error = null; - _blocked[containerName] = false; - if (!_placeholders[containerName]) { - return; - } - delete _placeholders[containerName]; - localStorage.setItem('store.placeholders', JSON.stringify(_placeholders)); - this._createContainer(containerName, {Image: imageName}, err => { - if (err) { - console.log(err); - _error = err; - this.emit(this.SERVER_ERROR_EVENT, err); - return; - } - _error = null; - metrics.track('Container Finished Creating'); - delete _progress[containerName]; - _muted[containerName] = false; - this.emit(this.CLIENT_CONTAINER_EVENT, containerName); - }); - }, progress => { - _blocked[containerName] = false; - _progress[containerName] = progress; - this.emit(this.SERVER_PROGRESS_EVENT, containerName); - }, () => { - _blocked[containerName] = true; - this.emit(this.SERVER_PROGRESS_EVENT, containerName); - }); - callback(null, containerName); - }, - updateContainer: function (name, data, callback) { - _muted[name] = true; - if (!data.name) { - data.name = data.Name; - } - var fullData = assign(_containers[name], data); - this._createContainer(name, fullData, function () { - _muted[name] = false; - this.emit(this.CLIENT_CONTAINER_EVENT, name); - callback(); - }.bind(this)); - }, - rename: function (name, newName, callback) { - 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); - _muted[name] = true; - container.stop(err => { - if (err && err.statusCode !== 304) { - _muted[name] = false; - callback(err); - } else { - var data = _containers[name]; - this._startContainer(name, data, err => { - _muted[name] = false; - this.emit(this.CLIENT_CONTAINER_EVENT, name, 'start'); - callback(err); - }); - } - }); - }, - stop: function (name, callback) { - var container = docker.client().getContainer(name); - _muted[name] = true; - container.stop(err => { - if (err && err.statusCode !== 304) { - _muted[name] = false; - callback(err); - } else { - _muted[name] = false; - this.fetchContainer(name, callback); - } - }); - }, - start: function (name, callback) { - var container = docker.client().getContainer(name); - container.start(err => { - if (err && err.statusCode !== 304) { - callback(err); - } else { - this.fetchContainer(name, callback); - } - }); - }, - remove: function (name, callback) { - if (_placeholders[name]) { - delete _placeholders[name]; - localStorage.setItem('store.placeholders', JSON.stringify(_placeholders)); - this.emit(this.CLIENT_CONTAINER_EVENT, name, 'destroy'); - callback(); - return; - } - var container = docker.client().getContainer(name); - if (_containers[name] && _containers[name].State.Paused) { - container.unpause(function (err) { - if (err) { - callback(err); - return; - } else { - container.kill(function (err) { - if (err) { - callback(err); - return; - } else { - container.remove(function (err) { - if (err) { - callback(err); - return; - } - }); - } - }); - } - }); - } else { - container.kill(function (err) { - if (err) { - callback(err); - return; - } else { - container.remove(function (err) { - callback(err); - }); - } - }); - } - }, - containers: function() { - return _.extend(_.clone(_containers), _placeholders); - }, - container: function (name) { - return this.containers()[name]; - }, - sorted: function () { - return _.values(this.containers()).sort(function (a, b) { - if (a.State.Downloading && !b.State.Downloading) { - return -1; - } else if (!a.State.Downloading && b.State.Downloading) { - return 1; - } else { - if (a.State.Running && !b.State.Running) { - return -1; - } else if (!a.State.Running && b.State.Running) { - return 1; - } else { - return a.Name.localeCompare(b.Name); - } - } - }); - }, - progress: function (name) { - return _progress[name]; - }, - blocked: function (name) { - return !!_blocked[name]; - }, - error: function () { - return _error; - }, - downloading: function () { - return !!_.keys(_placeholders).length; - }, - pending: function () { - return _pending; - }, - setPending: function (repository, tag) { - _pending = { - repository: repository, - tag: tag - }; - this.emit(this.CLIENT_CONTAINER_EVENT, null, 'pending'); - }, - clearPending: function () { - _pending = null; - this.emit(this.CLIENT_CONTAINER_EVENT, null, 'pending'); } -}); +} -module.exports = ContainerStore; +export default alt.createStore(ContainerStore); diff --git a/src/stores/LogStore.js b/src/stores/LogStore.js index 7a886ee497..5f81580d78 100644 --- a/src/stores/LogStore.js +++ b/src/stores/LogStore.js @@ -19,10 +19,10 @@ module.exports = assign(Object.create(EventEmitter.prototype), { return div.innerHTML; }, fetch: function (name) { - if (!name || !docker.client()) { + if (!name || !docker.client) { return; } - docker.client().getContainer(name).logs({ + docker.client.getContainer(name).logs({ stdout: true, stderr: true, timestamps: false, @@ -34,7 +34,7 @@ module.exports = assign(Object.create(EventEmitter.prototype), { } var logs = []; var outstream = new stream.PassThrough(); - docker.client().modem.demuxStream(logStream, outstream, outstream); + docker.client.modem.demuxStream(logStream, outstream, outstream); outstream.on('data', (chunk) => { logs.push(_convert.toHtml(this._escape(chunk))); }); @@ -46,10 +46,10 @@ module.exports = assign(Object.create(EventEmitter.prototype), { }); }, attach: function (name) { - if (!name || !docker.client() || _streams[name]) { + if (!name || !docker.client || _streams[name]) { return; } - docker.client().getContainer(name).attach({ + docker.client.getContainer(name).attach({ stdout: true, stderr: true, logs: false, @@ -60,7 +60,7 @@ module.exports = assign(Object.create(EventEmitter.prototype), { } _streams[name] = logStream; var outstream = new stream.PassThrough(); - docker.client().modem.demuxStream(logStream, outstream, outstream); + docker.client.modem.demuxStream(logStream, outstream, outstream); outstream.on('data', (chunk) => { _logs[name].push(_convert.toHtml(this._escape(chunk))); if (_logs[name].length > MAX_LOG_SIZE) { diff --git a/src/utils/ContainerUtil.js b/src/utils/ContainerUtil.js index 2f895ad4c1..4d6016ce6e 100644 --- a/src/utils/ContainerUtil.js +++ b/src/utils/ContainerUtil.js @@ -4,21 +4,22 @@ var docker = require('../utils/DockerUtil'); var ContainerUtil = { env: function (container) { if (!container || !container.Config || !container.Config.Env) { - return {}; + return []; } - return _.object(container.Config.Env.map(function (env) { + return _.map(container.Config.Env, env => { var i = env.indexOf('='); var splits = [env.slice(0, i), env.slice(i + 1)]; return splits; - })); + }); }, - // TODO (jeffdm): inject host here instead of requiring Docker + + // TODO: inject host here instead of requiring Docker ports: function (container) { - if (!container.NetworkSettings) { + if (!container || !container.NetworkSettings) { return {}; } var res = {}; - var ip = docker.host(); + var ip = docker.host; _.each(container.NetworkSettings.Ports, function (value, key) { var dockerPort = key.split('/')[0]; var localUrl = null; diff --git a/src/utils/DockerUtil.js b/src/utils/DockerUtil.js index 8c7d3c2404..a2f107d619 100644 --- a/src/utils/DockerUtil.js +++ b/src/utils/DockerUtil.js @@ -1,19 +1,32 @@ -var fs = require('fs'); -var path = require('path'); -var dockerode = require('dockerode'); -var Promise = require('bluebird'); -var util = require('./Util'); +import async from 'async'; +import fs from 'fs'; +import path from 'path'; +import dockerode from 'dockerode'; +import _ from 'underscore'; +import util from './Util'; +import registry from '../utils/RegistryUtil'; +import metrics from '../utils/MetricsUtil'; +import containerServerActions from '../actions/ContainerServerActions'; +import Promise from 'bluebird'; +import rimraf from 'rimraf'; -var Docker = { - _host: null, - _client: null, - setup: function(ip, name) { - var certDir = path.join(util.home(), '.docker/machine/machines', name); - if (!fs.existsSync(certDir)) { - return; +export default { + host: null, + client: null, + placeholders: {}, + + setup (ip, name) { + if (!ip || !name) { + throw new Error('Falsy ip or machine name passed to init'); } - this._host = ip; - this._client = new dockerode({ + + let certDir = path.join(util.home(), '.docker/machine/machines/', name); + if (!fs.existsSync(certDir)) { + throw new Error('Certificate directory does not exist'); + } + + this.host = ip; + this.client = new dockerode({ protocol: 'https', host: ip, port: 2376, @@ -22,38 +35,401 @@ var Docker = { key: fs.readFileSync(path.join(certDir, 'key.pem')) }); }, - client: function () { - return this._client; + + init () { + this.placeholders = JSON.parse(localStorage.getItem('placeholders')) || {}; + this.fetchAllContainers(); + this.listen(); + + // Resume pulling containers that were previously being pulled + _.each(_.values(this.placeholders), container => { + containerServerActions.added({container}); + + this.client.pull(container.Config.Image, (error, stream) => { + if (error) { + containerServerActions.error({name: container.Name, error}); + return; + } + + stream.setEncoding('utf8'); + stream.on('data', function () {}); + stream.on('end', () => { + delete this.placeholders[container.Name]; + localStorage.setItem('placeholders', JSON.stringify(this.placeholders)); + this.createContainer(container.Name, {Image: container.Config.Image}); + }); + }); + }); }, - host: function () { - return this._host; + + startContainer (name, containerData) { + let startopts = { + Binds: containerData.Binds || [] + }; + + if (containerData.NetworkSettings && containerData.NetworkSettings.Ports) { + startopts.PortBindings = containerData.NetworkSettings.Ports; + } else { + startopts.PublishAllPorts = true; + } + + let container = this.client.getContainer(name); + container.start(startopts, (error) => { + if (error) { + containerServerActions.error({name, error}); + return; + } + containerServerActions.started({name, error}); + this.fetchContainer(name); + }); }, - waitForConnection: Promise.coroutine(function * (tries, delay) { - tries = tries || 10; - delay = delay || 1000; - var tryCount = 1; - while (true) { - try { - yield new Promise((resolve, reject) => { - this._client.listContainers((err) => { - if (err) { - reject(err); + + createContainer (name, containerData) { + containerData.name = containerData.Name || name; + + if (containerData.Config && containerData.Config.Image) { + containerData.Image = containerData.Config.Image; + } + + if (!containerData.Env && containerData.Config && containerData.Config.Env) { + containerData.Env = containerData.Config.Env; + } + + let existing = this.client.getContainer(name); + existing.kill(() => { + existing.remove(() => { + this.client.createContainer(containerData, (error) => { + if (error) { + containerServerActions.error({name, error}); + return; + } + metrics.track('Container Finished Creating'); + this.startContainer(name, containerData); + }); + }); + }); + }, + + fetchContainer (id) { + this.client.getContainer(id).inspect((error, container) => { + if (error) { + containerServerActions.error({name: id, error}); + } else { + container.Name = container.Name.replace('/', ''); + containerServerActions.updated({container}); + } + }); + }, + + fetchAllContainers () { + this.client.listContainers({all: true}, (err, containers) => { + if (err) { + return; + } + async.map(containers, (container, callback) => { + this.client.getContainer(container.Id).inspect((error, container) => { + container.Name = container.Name.replace('/', ''); + callback(null, container); + }); + }, (err, containers) => { + if (err) { + // TODO: add a global error handler for this + return; + } + containerServerActions.allUpdated({containers: _.indexBy(containers.concat(_.values(this.placeholders)), 'Name')}); + }); + }); + }, + + run (name, repository, tag) { + tag = tag || 'latest'; + let imageName = repository + ':' + tag; + + let placeholderData = { + Id: require('crypto').randomBytes(32).toString('hex'), + Name: name, + Image: imageName, + Config: { + Image: imageName, + }, + State: { + Downloading: true + } + }; + containerServerActions.added({container: placeholderData}); + + this.placeholders[name] = placeholderData; + localStorage.setItem('placeholders', JSON.stringify(this.placeholders)); + + this.pullImage(repository, tag, error => { + if (error) { + containerServerActions.error({name, error}); + return; + } + + if (!this.placeholders[name]) { + return; + } + + delete this.placeholders[name]; + localStorage.setItem('placeholders', JSON.stringify(this.placeholders)); + this.createContainer(name, {Image: imageName}); + }, progress => { + containerServerActions.progress({name, progress}); + }, () => { + containerServerActions.waiting({name, waiting: true}); + }); + }, + + updateContainer (name, data) { + let existing = this.client.getContainer(name); + existing.inspect((error, existingData) => { + if (error) { + containerServerActions.error({name, error}); + return; + } + existingData.name = existingData.Name || name; + + if (existingData.Config && existingData.Config.Image) { + existingData.Image = existingData.Config.Image; + } + + if (!existingData.Env && existingData.Config && existingData.Config.Env) { + existingData.Env = existingData.Config.Env; + } + + var fullData = _.extend(existingData, data); + this.createContainer(name, fullData); + }); + }, + + rename (name, newName) { + this.client.getContainer(name).rename({name: newName}, error => { + if (error && error.statusCode !== 204) { + containerServerActions.error({name, error}); + return; + } + var oldPath = path.join(util.home(), 'Kitematic', name); + var newPath = path.join(util.home(), 'Kitematic', newName); + + this.client.getContainer(newName).inspect((error, container) => { + if (error) { + // TODO: handle error + containerServerActions.error({newName, error}); + } + rimraf(newPath, () => { + if (fs.existsSync(oldPath)) { + fs.renameSync(oldPath, newPath); + } + var binds = _.pairs(container.Volumes).map(function (pair) { + return pair[1] + ':' + pair[0]; + }); + var newBinds = binds.map(b => { + return b.replace(path.join(util.home(), 'Kitematic', name), path.join(util.home(), 'Kitematic', newName)); + }); + this.updateContainer(newName, {Binds: newBinds}); + rimraf(oldPath, () => {}); + }); + }); + }); + }, + + restart (name) { + let container = this.client.getContainer(name); + container.stop(error => { + if (error && error.statusCode !== 304) { + containerServerActions.error({name, error}); + return; + } + container.inspect((error, data) => { + if (error) { + containerServerActions.error({name, error}); + } + this.startContainer(name, data); + }); + }); + }, + + stop (name) { + this.client.getContainer(name).stop(error => { + if (error && error.statusCode !== 304) { + containerServerActions.error({name, error}); + return; + } + this.fetchContainer(name); + }); + }, + + start (name) { + this.client.getContainer(name).start(error => { + if (error && error.statusCode !== 304) { + containerServerActions.error({name, error}); + return; + } + this.fetchContainer(name); + }); + }, + + destroy (name) { + if (this.placeholders[name]) { + containerServerActions.destroyed({id: name}); + delete this.placeholders[name]; + localStorage.setItem('placeholders', JSON.stringify(this.placeholders)); + return; + } + + let container = this.client.getContainer(name); + container.unpause(function () { + container.kill(function (error) { + if (error) { + containerServerActions.error({name, error}); + return; + } + container.remove(function () { + containerServerActions.destroyed({id: name}); + var volumePath = path.join(util.home(), 'Kitematic', name); + if (fs.existsSync(volumePath)) { + rimraf(volumePath, () => {}); + } + }); + }); + }); + }, + + listen () { + this.client.getEvents((error, stream) => { + if (error || !stream) { + // TODO: Add app-wide error handler + return; + } + + stream.setEncoding('utf8'); + stream.on('data', json => { + let data = JSON.parse(json); + console.log(data); + + if (data.status === 'pull' || data.status === 'untag' || data.status === 'delete') { + return; + } + + if (data.status === 'destroy') { + containerServerActions.destroyed({name: data.id}); + } else if (data.status === 'create') { + this.fetchAllContainers(); + } else { + this.fetchContainer(data.id); + } + }); + }); + }, + + pullImage (repository, tag, callback, progressCallback, blockedCallback) { + registry.layers(repository, tag, (err, layerSizes) => { + + // TODO: Support v2 registry API + // TODO: clean this up- It's messy to work with pulls from both the v1 and v2 registry APIs + // Use the per-layer pull progress % to update the total progress. + this.client.listImages({all: 1}, (err, images) => { + images = images || []; + + let existingIds = new Set(images.map(function (image) { + return image.Id.slice(0, 12); + })); + + let layersToDownload = layerSizes.filter(function (layerSize) { + return !existingIds.has(layerSize.Id); + }); + + this.client.pull(repository + ':' + tag, (err, stream) => { + if (err) { + callback(err); + return; + } + stream.setEncoding('utf8'); + + let layerProgress = layersToDownload.reduce(function (r, layer) { + if (_.findWhere(images, {Id: layer.Id})) { + r[layer.Id] = 1; } else { - resolve(); + r[layer.Id] = 0; + } + return r; + }, {}); + + let timeout = null; + stream.on('data', str => { + var data = JSON.parse(str); + + if (data.error) { + return; + } + + if (data.status && (data.status === 'Pulling dependent layers' || data.status.indexOf('already being pulled by another client') !== -1)) { + blockedCallback(); + return; + } + + if (data.status === 'Already exists') { + layerProgress[data.id] = 1; + } else if (data.status === 'Downloading') { + let current = data.progressDetail.current; + let total = data.progressDetail.total; + + if (total <= 0) { + progressCallback(0); + return; + } else { + layerProgress[data.id] = current / total; + } + + let sum = _.values(layerProgress).reduce((pv, sv) => pv + sv, 0); + let numlayers = _.keys(layerProgress).length; + + var totalProgress = sum / numlayers * 100; + + if (!timeout) { + progressCallback(totalProgress); + timeout = setTimeout(() => { + timeout = null; + }, 100); + } } }); + stream.on('end', function () { + callback(); + }); }); - break; - } catch (err) { - tryCount += 1; - yield Promise.delay(delay); - if (tryCount > tries) { - throw new Error('Cannot connect to the Docker Engine. Either the VM is not responding or the connection may be blocked (VPN or Proxy): ' + err.message); - } - continue; - } - } - }), -}; + }); + }); + }, -module.exports = Docker; + // TODO: move this to machine health checks + waitForConnection (tries, delay) { + tries = tries || 10; + delay = delay || 1000; + let tryCount = 1, connected = false; + return new Promise((resolve, reject) => { + async.until(() => connected, callback => { + this.client.listContainers(error => { + if (error) { + if (tryCount > tries) { + callback(Error('Cannot connect to the Docker Engine. Either the VM is not responding or the connection may be blocked (VPN or Proxy): ' + error.message)); + } else { + tryCount += 1; + setTimeout(callback, delay); + } + } else { + connected = true; + callback(); + } + }); + }, error => { + if (error) { + reject(error); + } else { + resolve(); + } + }); + }); + } +}; diff --git a/src/utils/URLUtil.js b/src/utils/URLUtil.js index 9f195ffdb4..2b4e8a8933 100644 --- a/src/utils/URLUtil.js +++ b/src/utils/URLUtil.js @@ -1,6 +1,6 @@ var util = require('./Util'); var parseUri = require('parseUri'); -var containerStore = require('../stores/ContainerStore'); +var containerServerActions = require('../actions/ContainerServerActions'); module.exports = { TYPE_WHITELIST: ['repository'], @@ -52,7 +52,7 @@ module.exports = { } if (type === 'repository' && method === 'run') { - containerStore.setPending(repo, 'latest'); + containerServerActions.pending({repo, tag: 'latest'}); return true; } return false; diff --git a/styles/left-panel.less b/styles/left-panel.less index 2aa98270fc..769fe64b4b 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -1,7 +1,6 @@ /* Sidebar */ .sidebar { - .fade-in(); padding-top: 28px; background-color: white; margin: 0; diff --git a/styles/right-panel.less b/styles/right-panel.less index 167d0c66b4..a72f14a9d0 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -1,5 +1,4 @@ .details { - .fade-in(); background-color: @color-background; margin: 0; padding: 0; diff --git a/styles/setup.less b/styles/setup.less index d09abdfd4f..af842c24e0 100644 --- a/styles/setup.less +++ b/styles/setup.less @@ -1,5 +1,4 @@ .setup { - .fade-in(); display: flex; height: 100%; width: 100%;