Merged with master

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,11 @@
+### Expected behavior
+
+### Actual behavior
+
+### Information about the Issue
+
+
+### Steps to reproduce the behavior
+
+  1. ...
+  2. ...

Gruntfile.js

@@ -91,7 +91,7 @@ module.exports = function (grunt) {
             'FileDescription': WINDOWS_APPNAME,
             'InternalName': BASENAME + '.exe',
             'OriginalFilename': BASENAME + '.exe',
-            'LegalCopyright': 'Copyright 2015 Docker Inc. All rights reserved.'
+            'LegalCopyright': 'Copyright 2015-2016 Docker Inc. All rights reserved.'
           }
         }
       }

LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2014-2015 Docker, Inc.
+   Copyright 2014-2016 Docker, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

Makefile

@@ -5,6 +5,11 @@ run:
 	npm install
 	npm run
 
+# Get the IP ADDRESS
+DOCKER_IP=$(shell python -c "import urlparse ; print urlparse.urlparse('$(DOCKER_HOST)').hostname or ''")
+HUGO_BASE_URL=$(shell test -z "$(DOCKER_IP)" && echo localhost || echo "$(DOCKER_IP)")
+HUGO_BIND_IP=0.0.0.0
+
 # import the existing docs build cmds from docker/docker
 DOCS_MOUNT := $(if $(DOCSDIR),-v $(CURDIR)/$(DOCSDIR):/$(DOCSDIR))
 DOCSPORT := 8000
@@ -13,7 +18,9 @@ DOCKER_DOCS_IMAGE := kitematic-docs$(if $(GIT_BRANCH),:$(GIT_BRANCH))
 DOCKER_RUN_DOCS := docker run --rm -it $(DOCS_MOUNT)
 
 docs: docs-build
-	$(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 "$(DOCKER_DOCS_IMAGE)" mkdocs serve
+	$(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 "$(DOCKER_DOCS_IMAGE)"  \
+		hugo server \
+			--port=$(DOCSPORT) --baseUrl=$(HUGO_BASE_URL) --bind=$(HUGO_BIND_IP)
 
 docs-shell: docs-build
 	$(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 "$(DOCKER_DOCS_IMAGE)" bash

docs/Dockerfile

@@ -5,9 +5,10 @@ RUN svn checkout https://github.com/docker/compose/trunk/docs /docs/content/comp
 RUN svn checkout https://github.com/docker/docker/trunk/docs /docs/content/docker
 RUN svn checkout https://github.com/docker/swarm/trunk/docs /docs/content/swarm
 RUN svn checkout https://github.com/docker/distribution/trunk/docs /docs/content/registry
-RUN svn checkout https://github.com/docker/tutorials/trunk/docs /docs/content
+RUN svn checkout https://github.com/docker/notary/trunk/docs /docs/content/notary
 RUN svn checkout https://github.com/docker/opensource/trunk/docs /docs/content/opensource
 RUN svn checkout https://github.com/docker/machine/trunk/docs /docs/content/machine
+RUN svn checkout https://github.com/docker/toolbox/trunk/docs /docs/content/toolbox
 
 ENV PROJECT=kitematic
 # To get the git info for this repo

docs/faq.md

@@ -4,7 +4,7 @@ title = "Frequently Asked Questions"
 description = "Documentation covering common questions users have about Kitematic"
 keywords = ["docker, documentation, about, technology, kitematic,  gui"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 weight=5
 +++
 <![end-metadata]-->

docs/index.md

@@ -4,7 +4,8 @@ title = "Kitematic"
 description = "Documentation that provides an overview of Kitematic and installation instructions"
 keywords = ["docker, documentation, about, technology, kitematic,  gui"]
 [menu.main]
-parent="mn_install"
+identifier="toolbox_kitematic"
+parent="workw_toolbox"
 weight=2
 +++
 <![end-metadata]-->

docs/known-issues.md

@@ -4,7 +4,7 @@ title = "Known Issues"
 description = "Information about known issues in Kitematic"
 keywords = ["docker, documentation, about, technology, kitematic,  gui"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 weight=5
 +++
 <![end-metadata]-->

docs/minecraft-server.md

@@ -4,7 +4,7 @@ title = "Set up a Minecraft Server"
 description = "Tutorial demonstrating the setup of a Minecraft server using Docker and Kitematic"
 keywords = ["docker, documentation, about, technology, kitematic, gui, minecraft,  tutorial"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 weight=2
 +++
 <![end-metadata]-->

docs/nginx-web-server.md

@@ -4,7 +4,7 @@ title = "Set up an Nginx web server"
 description = "Tutorial demonstrating the setup of an Nginx web server using Docker and Kitematic"
 keywords = ["docker, documentation, about, technology, kitematic, gui, nginx,  tutorial"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 weight=1
 +++
 <![end-metadata]-->

docs/rethinkdb-dev-database.md

@@ -4,7 +4,7 @@ title = "Creating a Local RethinkDB Database for Development"
 description = "Tutorial demonstrating the setup of an RethinkDB database for development"
 keywords = ["docker, documentation, about, technology, kitematic, gui, rethink,  tutorial"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 weight=3
 +++
 <![end-metadata]-->

docs/userguide.md

@@ -4,7 +4,7 @@ title = "Kitematic User Guide: Intro & Overview"
 description = "Documentation that provides an overview of Kitematic and installation instructions"
 keywords = ["docker, documentation, about, technology, kitematic, gui"]
 [menu.main]
-parent="smn_workw_kitematic"
+parent="toolbox_kitematic"
 +++
 <![end-metadata]-->
 

jest-unit.json

@@ -13,6 +13,7 @@
     "object-assign",
     "underscore",
     "source-map-support",
-    "<rootDir>/node_modules/.*JSONStream"
+    "<rootDir>/node_modules/.*JSONStream",
+    "<rootDir>/node_modules/core-js"
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Kitematic",
-  "version": "0.9.6",
+  "version": "0.10.0",
   "author": "Kitematic",
   "description": "Simple Docker Container management for Mac OS X.",
   "homepage": "https://kitematic.com/",
@@ -16,13 +16,11 @@
     "test": "jest -c jest-unit.json",
     "integration": "jest -c jest-integration.json",
     "release": "grunt release",
-    "release-mac": "grunt release-mac",
     "lint": "jsxhint src"
   },
   "license": "Apache-2.0",
   "electron-version": "0.35.4",
   "dependencies": {
-    "JSONStream": "^1.0.7",
     "alt": "^0.16.2",
     "ansi-to-html": "0.3.0",
     "any-promise": "^0.1.0",
@@ -35,6 +33,7 @@
     "dockerode": "^2.2.7",
     "install": "^0.1.8",
     "jquery": "^2.1.3",
+    "JSONStream": "^1.0.7",
     "mixpanel": "kitematic/mixpanel-node",
     "mkdirp": "^0.5.0",
     "node-uuid": "^1.4.3",

resources/terminal

@@ -15,7 +15,16 @@ EOF`
 function open_iterm () {
   osascript > /dev/null <<EOF
   tell application "iTerm"
+    if version < 2.9 then
       activate
+      try
+      	tell current window
+          create tab with default profile
+    	    tell the current session of current window
+            write text "bash -c \"$CMD\""
+          end tell
+      	end tell
+      on error
     	  try
           tell the first terminal
             launch session "Default Session"
@@ -31,6 +40,24 @@ function open_iterm () {
             end tell
           end tell
         end try
+      end try
+    end if
+  end tell
+EOF
+}
+
+function open_iterm2point9 () {
+  osascript > /dev/null <<EOF
+  tell application "iTerm"
+  	if version ≥ 2.9 then
+      activate
+  		tell current window
+  			create tab with default profile
+  			tell first session of current tab
+  				write text "bash -c \"$CMD\""
+  			end tell
+  		end tell
+  	end if
   end tell
 EOF
 }
@@ -47,7 +74,7 @@ EOF
 }
 
 if [ "$ITERM_EXISTS" == "true" ]; then
-  open_iterm "$@" || open_terminal "$@"
+  open_iterm2point9 "$@" || open_iterm "$@" || open_terminal "$@"
 else
   open_terminal "$@"
 fi

src/actions/ContainerActions.js

@@ -35,8 +35,8 @@ class ContainerActions {
     this.dispatch();
   }
 
-  run (name, repo, tag) {
+  run (name, repo, tag, local=false) {
-    dockerUtil.run(name, repo, tag);
+    dockerUtil.run(name, repo, tag, local);
   }
 
   active (name) {

src/actions/ImageActions.js

@@ -0,0 +1,16 @@
+import alt from '../alt';
+import dockerUtil from '../utils/DockerUtil';
+
+class ImageActions {
+
+  all () {
+    this.dispatch({});
+    dockerUtil.refresh();
+  }
+
+  destroy (image) {
+    dockerUtil.removeImage(image);
+  }
+}
+
+export default alt.createActions(ImageActions);

src/actions/ImageServerActions.js

@@ -0,0 +1,14 @@
+import alt from '../alt';
+
+class ImageServerActions {
+  constructor () {
+    this.generateActions(
+      'added',
+      'updated',
+      'destroyed',
+      'error'
+    );
+  }
+}
+
+export default alt.createActions(ImageServerActions);

src/actions/SetupActions.js

@@ -6,6 +6,11 @@ class SetupActions {
     this.dispatch({removeVM});
     setupUtil.retry(removeVM);
   }
+
+  useVbox () {
+    this.dispatch({});
+    setupUtil.useVbox();
+  }
 }
 
 export default alt.createActions(SetupActions);

src/actions/TagActions.js

@@ -6,6 +6,10 @@ class TagActions {
     this.dispatch({repo});
     regHubUtil.tags(repo);
   }
+  
+  localTags (repo, tags) {
+    this.dispatch({repo, tags});
+  }
 }
 
 export default alt.createActions(TagActions);

src/app.js

@@ -1,4 +1,5 @@
 require.main.paths.splice(0, 0, process.env.NODE_PATH);
+
 import electron from 'electron';
 const remote = electron.remote;
 const Menu = remote.Menu;
@@ -65,8 +66,14 @@ setupUtil.setup().then(() => {
   throw err;
 });
 
+
 ipcRenderer.on('application:quitting', () => {
+  docker.detachEvent();
   if (localStorage.getItem('settings.closeVMOnQuit') === 'true') {
     machine.stop();
   }
 });
+
+window.onbeforeunload = function () {
+  docker.detachEvent();
+};

src/browser.js

@@ -4,18 +4,20 @@ const BrowserWindow = electron.BrowserWindow;
 
 import fs from 'fs';
 import os from 'os';
-
 import path from 'path';
 import child_process from 'child_process';
 
 process.env.NODE_PATH = path.join(__dirname, 'node_modules');
 process.env.RESOURCES_PATH = path.join(__dirname, '/../resources');
+if (process.platform !== 'win32') {
   process.env.PATH = '/usr/local/bin:' + process.env.PATH;
+}
 
 var size = {}, settingsjson = {};
 try {
-  size = JSON.parse(fs.readFileSync(path.join(process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'], 'Library', 'Application\ Support', 'Kitematic', 'size')));
+  size = JSON.parse(fs.readFileSync(path.join(app.getPath('userData'), 'size')));
 } catch (err) {}
+
 try {
   settingsjson = JSON.parse(fs.readFileSync(path.join(__dirname, 'settings.json'), 'utf8'));
 } catch (err) {}
@@ -45,6 +47,7 @@ app.on('ready', function () {
     return false;
   });
 
+
   if (os.platform() === 'win32') {
     mainWindow.on('close', function () {
       mainWindow.webContents.send('application:quitting');

src/components/ContainerHome.react.js

@@ -32,6 +32,7 @@ var ContainerHome = React.createClass({
   },
 
   handleErrorClick: function () {
+    // Display wiki for proxy: https://github.com/docker/kitematic/wiki/Common-Proxy-Issues-&-Fixes
     shell.openExternal('https://github.com/kitematic/kitematic/issues/new');
   },
 
@@ -52,7 +53,7 @@ var ContainerHome = React.createClass({
     if (this.props.container.Error) {
       body = (
         <div className="details-progress error">
-          <h2>We&#39;re sorry. There seem to be an error:</h2>
+          <h2>We&#39;re sorry. There seems to be an error:</h2>
           <p className="error-message">{this.props.container.Error}</p>
           <p>If this error is invalid, please file a ticket on our Github repo.</p>
           <a className="btn btn-action" onClick={this.handleErrorClick}>File Ticket</a>

src/components/ContainerHomeFolders.react.js

@@ -32,6 +32,7 @@ var ContainerHomeFolder = React.createClass({
           mounts.forEach(m => {
             if (m.Destination === destination) {
               m.Source = util.windowsToLinuxPath(newSource);
+              m.Driver = null;
             }
           });
 

src/components/ContainerListItem.react.js

@@ -97,7 +97,7 @@ var ContainerListItem = React.createClass({
 
     return (
       <Router.Link to="container" params={{name: container.Name}}>
-        <li onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave} onClick={self.handleClick}>
+        <li onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave} onClick={self.handleClick} id={this.props.key}>
           {state}
           <div className="info">
             <div className="name">

src/components/ContainerSettingsVolumes.react.js

@@ -28,7 +28,7 @@ var ContainerSettingsVolumes = React.createClass({
 
       metrics.track('Choose Directory for Volume');
 
-      var mounts = _.clone(this.props.container.Mounts);
+      let mounts = _.clone(this.props.container.Mounts);
       _.each(mounts, m => {
         if (m.Destination === dockerVol) {
           m.Source = util.windowsToLinuxPath(directory);
@@ -36,7 +36,7 @@ var ContainerSettingsVolumes = React.createClass({
         }
       });
 
-      var binds = mounts.map(m => {
+      let binds = mounts.map(m => {
         return m.Source + ':' + m.Destination;
       });
 
@@ -50,7 +50,7 @@ var ContainerSettingsVolumes = React.createClass({
       from: 'settings'
     });
 
-    var mounts = _.clone(this.props.container.Mounts);
+    let mounts = _.clone(this.props.container.Mounts);
     _.each(mounts, m => {
       if (m.Destination === dockerVol) {
         m.Source = null;

src/components/Containers.react.js

@@ -26,7 +26,7 @@ var Containers = React.createClass({
     containerStore.listen(this.update);
   },
 
-  componentDidUnmount: function () {
+  componentWillUnmount: function () {
     containerStore.unlisten(this.update);
   },
 
@@ -106,43 +106,7 @@ var Containers = React.createClass({
     metrics.track('Opened Issue Reporter', {
       from: 'app'
     });
-    shell.openExternal('https://github.com/kitematic/kitematic/issues/new');
+    shell.openExternal('https://github.com/docker/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 () {
@@ -169,9 +133,9 @@ var Containers = React.createClass({
               <ContainerList containers={this.state.sorted} newContainer={this.state.newContainer} />
             </section>
             <section className="sidebar-buttons">
-              <span className="btn-sidebar btn-terminal" onClick={this.handleClickDockerTerminal} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-docker-cli"></span><span className="text">DOCKER CLI</span></span>
+              <span className="btn-sidebar btn-terminal" onClick={this.handleClickDockerTerminal} ><span className="icon icon-docker-cli"></span><span className="text">DOCKER CLI</span></span>
-              <span className="btn-sidebar btn-feedback" onClick={this.handleClickReportIssue} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-feedback"></span></span>
+              <span className="btn-sidebar btn-feedback" onClick={this.handleClickReportIssue} ><span className="icon icon-feedback"></span></span>
-              <span className="btn-sidebar btn-preferences" onClick={this.handleClickPreferences} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-preferences"></span></span>
+              <span className="btn-sidebar btn-preferences" onClick={this.handleClickPreferences} ><span className="icon icon-preferences"></span></span>
             </section>
           </div>
           <Router.RouteHandler pending={this.state.pending} containers={this.state.containers} container={container}/>

src/components/ImageCard.react.js

@@ -5,6 +5,7 @@ import shell from 'shell';
 import RetinaImage from 'react-retina-image';
 import metrics from '../utils/MetricsUtil';
 import containerActions from '../actions/ContainerActions';
+import imageActions from '../actions/ImageActions';
 import containerStore from '../stores/ContainerStore';
 import tagStore from '../stores/TagStore';
 import tagActions from '../actions/TagActions';
@@ -14,8 +15,8 @@ var ImageCard = React.createClass({
   mixins: [Router.Navigation],
   getInitialState: function () {
     return {
-      tags: [],
+      tags: this.props.tags || [],
-      chosenTag: 'latest'
+      chosenTag: this.props.chosenTag || 'latest'
     };
   },
   componentDidMount: function () {
@@ -49,11 +50,14 @@ var ImageCard = React.createClass({
       private: this.props.image.is_private,
       official: this.props.image.namespace === 'library',
       userowned: this.props.image.is_user_repo,
-      recommended: this.props.image.is_recommended
+      recommended: this.props.image.is_recommended,
+      local: this.props.image.is_local || false
     });
     let name = containerStore.generateName(this.props.image.name);
-    let repo = this.props.image.namespace === 'library' ? this.props.image.name : this.props.image.namespace + '/' + this.props.image.name;
+    let localImage = this.props.image.is_local || false;
-    containerActions.run(name, repo, this.state.chosenTag);
+    let repo = (this.props.image.namespace === 'library' || this.props.image.namespace === 'local') ? this.props.image.name : this.props.image.namespace + '/' + this.props.image.name;
+
+    containerActions.run(name, repo, this.state.chosenTag, localImage);
     this.transitionTo('containerHome', {name});
   },
   handleMenuOverlayClick: function () {
@@ -67,7 +71,12 @@ var ImageCard = React.createClass({
   handleTagOverlayClick: function () {
     let $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
     $tagOverlay.fadeIn(300);
+    let localImage = this.props.image.is_local || false;
+    if (localImage) {
+      tagActions.localTags(this.props.image.namespace + '/' + this.props.image.name, this.props.tags);
+    } else {
       tagActions.tags(this.props.image.namespace + '/' + this.props.image.name);
+    }
   },
   handleCloseTagOverlay: function () {
     let $menuOverlay = $(this.getDOMNode()).find('.menu-overlay');
@@ -75,12 +84,17 @@ var ImageCard = React.createClass({
     var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
     $tagOverlay.fadeOut(300);
   },
+  handleDeleteImgClick: function (image) {
+    if (this.state.chosenTag && !this.props.image.inUse) {
+      imageActions.destroy(image.RepoTags[0].split(':')[0] + ':' + this.state.chosenTag);
+    }
+  },
   handleRepoClick: function () {
-    var repoUri = 'https://registry.hub.docker.com/';
+    var repoUri = 'https://hub.docker.com/';
     if (this.props.image.namespace === 'library') {
       repoUri = repoUri + '_/' + this.props.image.name;
     } else {
-      repoUri = repoUri + 'u/' + this.props.image.namespace + '/' + this.props.image.name;
+      repoUri = repoUri + 'r/' + this.props.image.namespace + '/' + this.props.image.name;
     }
     shell.openExternal(repoUri);
   },
@@ -105,11 +119,12 @@ var ImageCard = React.createClass({
     var description;
     if (this.props.image.description) {
       description = this.props.image.description;
+    } else if(this.props.image.short_description){
+      description = this.props.image.short_description;
     } else {
-      description = "No description.";
+      description = 'No description.';
     }
     var logoStyle = {
-      //backgroundImage: `linear-gradient(-180deg, ${this.props.image.gradient_start} 4%, ${this.props.image.gradient_end}  100%)`
       backgroundColor: this.props.image.gradient_start
     };
     var imgsrc;
@@ -148,10 +163,58 @@ var ImageCard = React.createClass({
         <span className="icon icon-badge-private"></span>
       );
     }
+
+    let create, overlay;
+    if (this.props.image.is_local) {
+      create = (
+        <div className="actions">
+          <div className="favorites">
+            <span className="icon icon-tag"> {this.state.chosenTag}</span>
+            <span className="text"></span>
+          </div>
+          <div className="more-menu" onClick={self.handleMenuOverlayClick}>
+            <span className="icon icon-more"></span>
+          </div>
+          <div className="action" onClick={self.handleClick}>
+            CREATE
+          </div>
+        </div>
+      );
+      overlay = (
+        <div className="overlay menu-overlay">
+          <div className="menu-item" onClick={this.handleTagOverlayClick.bind(this, this.props.image.name)}>
+            <span className="icon icon-tag"></span><span className="text">SELECTED TAG: <span className="selected-tag">{this.state.chosenTag}</span></span>
+          </div>
+          <div className="remove" onClick={this.handleDeleteImgClick.bind(this, this.props.image)}>
+            <span className="btn btn-delete btn-action has-icon btn-hollow" disabled={this.props.image.inUse ? 'disabled' : null}><span className="icon icon-delete"></span>Delete Tag</span>
+          </div>
+          {this.props.image.inUse ? <p className="small">To delete, remove all containers<br/>using the above image</p> : null }
+          <div className="close-overlay">
+            <a className="btn btn-action circular" onClick={self.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
+          </div>
+        </div>
+      );
+    } else {
       let favCount = (this.props.image.star_count < 1000) ? numeral(this.props.image.star_count).value() : numeral(this.props.image.star_count).format('0.0a').toUpperCase();
       let pullCount = (this.props.image.pull_count < 1000) ? numeral(this.props.image.pull_count).value() : numeral(this.props.image.pull_count).format('0a').toUpperCase();
-    return (
+      create = (
-      <div className="image-item">
+        <div className="actions">
+          <div className="favorites">
+            <span className="icon icon-favorite"></span>
+            <span className="text">{favCount}</span>
+            <span className="icon icon-download"></span>
+            <span className="text">{pullCount}</span>
+          </div>
+          <div className="more-menu" onClick={self.handleMenuOverlayClick}>
+            <span className="icon icon-more"></span>
+          </div>
+          <div className="action" onClick={self.handleClick}>
+            CREATE
+          </div>
+        </div>
+      );
+
+      overlay = (
           <div className="overlay menu-overlay">
             <div className="menu-item" onClick={this.handleTagOverlayClick.bind(this, this.props.image.name)}>
               <span className="icon icon-tag"></span><span className="text">SELECTED TAG: <span className="selected-tag">{this.state.chosenTag}</span></span>
@@ -163,6 +226,11 @@ var ImageCard = React.createClass({
               <a className="btn btn-action circular" onClick={self.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
             </div>
           </div>
+      );
+    }
+    return (
+      <div className="image-item">
+        {overlay}
         <div className="overlay tag-overlay">
           <p>Please select an image tag.</p>
           {tags}
@@ -185,20 +253,7 @@ var ImageCard = React.createClass({
               {description}
             </div>
           </div>
-          <div className="actions">
+          {create}
-            <div className="favorites">
-              <span className="icon icon-favorite"></span>
-              <span className="text">{favCount}</span>
-              <span className="icon icon-download"></span>
-              <span className="text">{pullCount}</span>
-            </div>
-            <div className="more-menu" onClick={self.handleMenuOverlayClick}>
-              <span className="icon icon-more"></span>
-            </div>
-            <div className="action" onClick={self.handleClick}>
-              CREATE
-            </div>
-          </div>
         </div>
       </div>
     );

src/components/NewContainerSearch.react.js

@@ -10,6 +10,8 @@ import repositoryActions from '../actions/RepositoryActions';
 import repositoryStore from '../stores/RepositoryStore';
 import accountStore from '../stores/AccountStore';
 import accountActions from '../actions/AccountActions';
+import imageActions from '../actions/ImageActions';
+import imageStore from '../stores/ImageStore';
 
 var _searchPromise = null;
 
@@ -20,6 +22,8 @@ module.exports = React.createClass({
       query: '',
       loading: repositoryStore.loading(),
       repos: repositoryStore.all(),
+      images: imageStore.all(),
+      imagesErr: imageStore.error,
       username: accountStore.getState().username,
       verified: accountStore.getState().verified,
       accountLoading: accountStore.getState().loading,
@@ -34,6 +38,7 @@ module.exports = React.createClass({
     this.refs.searchInput.getDOMNode().focus();
     repositoryStore.listen(this.update);
     accountStore.listen(this.updateAccount);
+    imageStore.listen(this.updateImage);
     repositoryActions.search();
   },
   componentWillUnmount: function () {
@@ -51,7 +56,14 @@ module.exports = React.createClass({
       currentPage: repositoryStore.getState().currentPage,
       totalPage: repositoryStore.getState().totalPage,
       previousPage: repositoryStore.getState().previousPage,
-      nextPage: repositoryStore.getState().nextPage
+      nextPage: repositoryStore.getState().nextPage,
+      error: repositoryStore.getState().error
+    });
+  },
+  updateImage: function (imgStore) {
+    this.setState({
+      images: imgStore.images,
+      error: imgStore.error
     });
   },
   updateAccount: function () {
@@ -73,14 +85,14 @@ module.exports = React.createClass({
       nextPage = (page + 1 > this.state.totalPage) ? this.state.totalPage : page + 1;
       totalPage = this.state.totalPage;
     }
-
     this.setState({
       query: query,
       loading: true,
       currentPage: page,
       previousPage: previousPage,
       nextPage: nextPage,
-      totalPage: totalPage
+      totalPage: totalPage,
+      error: null
     });
 
     _searchPromise = Promise.delay(200).cancellable().then(() => {
@@ -102,11 +114,17 @@ module.exports = React.createClass({
   },
   handleFilter: function (filter) {
 
+    this.setState({error: null});
+
     // If we're clicking on the filter again - refresh
     if (filter === 'userrepos' && this.getQuery().filter === 'userrepos') {
       repositoryActions.repos();
     }
 
+    if (filter === 'userimages' && this.getQuery().filter === 'userimages') {
+      imageActions.all();
+    }
+
     if (filter === 'recommended' && this.getQuery().filter === 'recommended') {
       repositoryActions.recommended();
     }
@@ -188,10 +206,16 @@ module.exports = React.createClass({
         </ul>
       </nav>
     ) : null;
+    let errorMsg = null;
+    if (this.state.error === null || this.state.error.message.indexOf('getaddrinfo ENOTFOUND') !== -1) {
+      errorMsg = 'There was an error contacting Docker Hub.';
+    } else {
+      errorMsg = this.state.error.message.replace('HTTP code is 409 which indicates error: conflict - ', '');
+    }
     if (this.state.error) {
       results = (
         <div className="no-results">
-          <h2>There was an error contacting Docker Hub.</h2>
+          <h2 className="error">{errorMsg}</h2>
         </div>
       );
       paginateResults = null;
@@ -215,6 +239,34 @@ module.exports = React.createClass({
         </div>
       );
       paginateResults = null;
+    } else if (filter === 'userimages') {
+      let userImageItems = this.state.images.map(image => {
+        let repo = image.RepoTags[0].split(':')[0];
+        if (repo.indexOf('/') === -1) {
+          repo = 'local/' + repo;
+        }
+        [image.namespace, image.name] = repo.split('/');
+        image.description = null;
+        let tags = image.tags.join('-');
+        image.star_count = 0;
+        image.is_local = true;
+        return (<ImageCard key={image.namespace + '/' + image.name + ':' + tags} image={image} chosenTag={image.tags[0]} tags={image.tags} />);
+      });
+      let userImageResults = userImageItems.length ? (
+        <div className="result-grids">
+          <div>
+            <h4>My Images</h4>
+            <div className="result-grid">
+              {userImageItems}
+            </div>
+          </div>
+        </div>
+      ) : <div className="no-results">
+        <h2>Cannot find any local image.</h2>
+      </div>;
+      results = (
+          {userImageResults}
+      );
     } else if (this.state.loading) {
       results = (
         <div className="no-results">
@@ -300,13 +352,19 @@ module.exports = React.createClass({
       'icon-search': true,
       'search-icon': true
     });
+    let searchClasses = classNames('search-bar');
+    if (filter === 'userimages') {
+      searchClasses = classNames('search-bar', {
+        hidden: true
+      });
+    }
 
     return (
       <div className="details">
         <div className="new-container">
           <div className="new-container-header">
             <div className="search">
-              <div className="search-bar">
+            <div className={searchClasses}>
               <input type="search" ref="searchInput" className="form-control" placeholder="Search for Docker images from Docker Hub" onChange={this.handleChange}/>
               <div className={magnifierClasses}></div>
               <div className={loadingClasses}><div></div></div>
@@ -317,6 +375,7 @@ module.exports = React.createClass({
               <span className={`results-filter results-all tab ${filter === 'all' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'all')}>All</span>
               <span className={`results-filter results-recommended tab ${filter === 'recommended' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'recommended')}>Recommended</span>
               <span className={`results-filter results-userrepos tab ${filter === 'userrepos' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'userrepos')}>My Repos</span>
+              <span className={`results-filter results-userimages tab ${filter === 'userimages' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'userimages')}>My Images</span>
             </div>
           </div>
           <div className="results">

src/components/Setup.react.js

@@ -3,12 +3,13 @@ import Router from 'react-router';
 import Radial from './Radial.react.js';
 import RetinaImage from 'react-retina-image';
 import Header from './Header.react';
-import Util from '../utils/Util';
+import util from '../utils/Util';
 import metrics from '../utils/MetricsUtil';
 import setupStore from '../stores/SetupStore';
 import setupActions from '../actions/SetupActions';
 import shell from 'shell';
 
+
 var Setup = React.createClass({
   mixins: [Router.Navigation],
 
@@ -20,7 +21,7 @@ var Setup = React.createClass({
     setupStore.listen(this.update);
   },
 
-  componentDidUnmount: function () {
+  componentWillUnmount: function () {
     setupStore.unlisten(this.update);
   },
 
@@ -32,6 +33,10 @@ var Setup = React.createClass({
     setupActions.retry(false);
   },
 
+  handleUseVbox: function () {
+    setupActions.useVbox();
+  },
+
   handleErrorRemoveRetry: function () {
     console.log('Deleting VM and trying again.' );
     setupActions.retry(true);
@@ -63,6 +68,12 @@ var Setup = React.createClass({
   },
 
   renderProgress: function () {
+    let title = 'Starting Docker VM';
+    let descr = 'To run Docker containers on your computer, Kitematic is starting a Linux virtual machine. This may take a minute...';
+    if (util.isNative()) {
+      title = 'Checking Docker';
+      descr = 'To run Docker containers on your computer, Kitematic is checking the Docker connection.';
+    }
     return (
       <div className="setup">
         <Header hideLogin={true}/>
@@ -72,8 +83,8 @@ var Setup = React.createClass({
           </div>
           <div className="desc">
             <div className="content">
-              <h1>Starting Docker VM</h1>
+              <h1>{title}</h1>
-              <p>To run Docker containers on your computer, Kitematic is starting a Linux virtual machine. This may take a minute...</p>
+              <p>{descr}</p>
             </div>
           </div>
         </div>
@@ -84,14 +95,17 @@ var Setup = React.createClass({
   renderError: function () {
     let deleteVmAndRetry;
 
-    if (Util.isLinux()) {
+    if (util.isLinux()) {
       if (!this.state.started) {
         deleteVmAndRetry = (
           <button className="btn btn-action" onClick={this.handleLinuxDockerInstall}>Install Docker</button>
         );
       }
-    } else {
+    } else if (util.isNative()) {
-      if (this.state.started) {
+      deleteVmAndRetry = (
+        <button className="btn btn-action" onClick={this.handleUseVbox}>Use VirtualBox</button>
+      );
+    } else if (this.state.started) {
       deleteVmAndRetry = (
         <button className="btn btn-action" onClick={this.handleErrorRemoveRetry}>Delete VM &amp; Retry Setup</button>
       );
@@ -100,7 +114,6 @@ var Setup = React.createClass({
         <button className="btn btn-action" onClick={this.handleToolBox}>Get Toolbox</button>
       );
     }
-    }
     return (
       <div className="setup">
         <Header hideLogin={true}/>

src/stores/ImageStore.js

@@ -0,0 +1,59 @@
+import alt from '../alt';
+import imageActions from '../actions/ImageActions';
+import imageServerActions from '../actions/ImageServerActions';
+
+class ImageStore {
+  constructor () {
+    this.bindActions(imageActions);
+    this.bindActions(imageServerActions);
+    this.results = [];
+    this.images = [];
+    this.imagesLoading = false;
+    this.resultsLoading = false;
+    this.error = null;
+  }
+
+  error (error) {
+    this.setState({error: error, imagesLoading: false, resultsLoading: false});
+  }
+
+  clearError () {
+    this.setState({error: null});
+  }
+
+  destroyed (data) {
+    let images = this.images;
+    if ((data && data[1] && data[1].Deleted)) {
+      delete images[data[1].Deleted];
+    }
+    this.setState({error: null});
+  }
+
+  updated (images) {
+    let tags = {};
+    let finalImages = [];
+    images.map((image) => {
+      image.RepoTags.map(repoTags => {
+        let [name, tag] = repoTags.split(':');
+        if (typeof tags[name] !== 'undefined') {
+          finalImages[tags[name]].tags.push(tag);
+          if (image.inUse) {
+            finalImages[tags[name]].inUse = image.inUse;
+          }
+        } else {
+          image.tags = [tag];
+          tags[name] = finalImages.length;
+          finalImages.push(image);
+        }
+      });
+    });
+    this.setState({error: null, images: finalImages, imagesLoading: false});
+  }
+
+  static all () {
+    let state = this.getState();
+    return state.images;
+  }
+}
+
+export default alt.createStore(ImageStore);

src/stores/TagStore.js

@@ -21,6 +21,15 @@ class TagStore {
     this.emitChange();
   }
 
+  localTags ({repo, tags}) {
+    let data = [];
+    tags.map((value) => {
+      data.push({'name': value});
+    });
+    this.loading[repo] = true;
+    this.tagsUpdated({repo, tags: data || []});
+  }
+
   tagsUpdated ({repo, tags}) {
     this.tags[repo] = tags;
     this.loading[repo] = false;

src/utils/ContainerUtil.js

@@ -33,7 +33,6 @@ var ContainerUtil = {
       var [dockerPort, portType] = key.split('/');
       var localUrl = null;
       var port = null;
-
       if (value && value.length) {
         port = value[0].HostPort;
       }

src/utils/DockerMachineUtil.js

@@ -158,11 +158,13 @@ var DockerMachine = {
           }
         });
       });
-    } else if (util.isLinux()) {
+    } else if (util.isNative()) {
       cmd = cmd || process.env.SHELL;
-      var terminal = util.linuxTerminal();
+      var terminal = util.isLinux() ? util.linuxTerminal() : [path.join(process.env.RESOURCES_PATH, 'terminal')];
-      if (terminal)
+      terminal.push(cmd);
-        util.execFile(terminal.concat([cmd])).then(() => {});
+      if (terminal) {
+        util.execFile(terminal).then(() => {});
+      }
     } else {
       cmd = cmd || process.env.SHELL;
       this.url(machineName).then(machineUrl => {

src/utils/DockerUtil.js

@@ -8,32 +8,42 @@ import util from './Util';
 import hubUtil from './HubUtil';
 import metrics from '../utils/MetricsUtil';
 import containerServerActions from '../actions/ContainerServerActions';
+import imageServerActions from '../actions/ImageServerActions';
+import Promise from 'bluebird';
 import rimraf from 'rimraf';
 import stream from 'stream';
 import JSONStream from 'JSONStream';
 
-export default {
+
+
+var DockerUtil = {
   host: null,
   client: null,
   placeholders: {},
-  streams: {},
+  stream: null,
+  eventStream: null,
   activeContainerName: null,
+  localImages: null,
+  imagesUsed: [],
 
   setup (ip, name) {
-    if (!ip || !name) {
+    if (!ip && !name) {
       throw new Error('Falsy ip or name passed to docker client setup');
     }
+    this.host = ip;
 
-    if (util.isLinux()) {
+    if (ip.indexOf('local') !== -1) {
-      this.host = 'localhost';
+      try {
         this.client = new dockerode({socketPath: '/var/run/docker.sock'});
+      } catch (error) {
+        throw new Error('Cannot connect to the Docker daemon. Is the daemon running?');
+      }
     } else {
       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,
@@ -45,9 +55,31 @@ export default {
     }
   },
 
+  async version () {
+    let version = null;
+    let maxRetries = 10;
+    let retries = 0;
+    let error_message = "";
+    while (version == null && retries < maxRetries) {
+      this.client.version((error,data) => {
+        if (!error) {
+          version = data.Version;
+        } else {
+          error_message = error;
+        }
+        retries++;
+      });
+      await Promise.delay(1000);
+    }
+    if (version == null) {
+       throw new Error(error_message);
+    }
+    return version;
+  },
+
   init () {
     this.placeholders = JSON.parse(localStorage.getItem('placeholders')) || {};
-    this.fetchAllContainers();
+    this.refresh();
     this.listen();
 
     // Resume pulling containers that were previously being pulled
@@ -88,6 +120,7 @@ export default {
     container.start((error) => {
       if (error) {
         containerServerActions.error({name, error});
+        console.log('error starting: %o - %o', name, error);
         return;
       }
       containerServerActions.started({name, error});
@@ -121,7 +154,7 @@ export default {
       if (image.Config.Cmd) {
         containerData.Cmd = image.Config.Cmd;
       } else if (!image.Config.Entrypoint) {
-        containerData.Cmd = 'bash';
+        containerData.Cmd = 'sh';
       }
 
       let existing = this.client.getContainer(name);
@@ -136,6 +169,7 @@ export default {
             this.startContainer(name);
             delete this.placeholders[name];
             localStorage.setItem('placeholders', JSON.stringify(this.placeholders));
+            this.refresh();
           });
         });
       });
@@ -156,14 +190,20 @@ export default {
   fetchAllContainers () {
     this.client.listContainers({all: true}, (err, containers) => {
       if (err) {
+        console.error(err);
         return;
       }
+      this.imagesUsed = [];
       async.map(containers, (container, callback) => {
         this.client.getContainer(container.Id).inspect((error, container) => {
           if (error) {
             callback(null, null);
             return;
           }
+          let imgSha = container.Image.replace('sha256:', '');
+          if (_.indexOf(this.imagesUsed, imgSha) === -1) {
+            this.imagesUsed.push(imgSha);
+          }
           container.Name = container.Name.replace('/', '');
           callback(null, container);
         });
@@ -171,15 +211,55 @@ export default {
         containers = containers.filter(c => c !== null);
         if (err) {
           // TODO: add a global error handler for this
+          console.error(err);
           return;
         }
         containerServerActions.allUpdated({containers: _.indexBy(containers.concat(_.values(this.placeholders)), 'Name')});
         this.logs();
+        this.fetchAllImages();
       });
     });
   },
 
-  run (name, repository, tag) {
+  fetchAllImages () {
+    this.client.listImages((err, list) => {
+      if (err) {
+        imageServerActions.error(err);
+      } else {
+        list.map((image, idx) => {
+          let imgSha = image.Id.replace('sha256:', '');
+          if (_.indexOf(this.imagesUsed, imgSha) !== -1) {
+            list[idx].inUse = true;
+          } else {
+            list[idx].inUse = false;
+          }
+        });
+        this.localImages = list;
+        imageServerActions.updated(list);
+      }
+    });
+  },
+
+  removeImage (selectedRepoTag) {
+    this.localImages.some((image) => {
+      image.RepoTags.map(repoTag => {
+        if (repoTag === selectedRepoTag) {
+          this.client.getImage(selectedRepoTag).remove({'force': true}, (err, data) => {
+            if (err) {
+              console.error(err);
+              imageServerActions.error(err);
+            } else {
+              imageServerActions.destroyed(data);
+              this.refresh();
+            }
+          });
+          return true;
+        }
+      });
+    });
+  },
+
+  run (name, repository, tag, local = false) {
     tag = tag || 'latest';
     let imageName = repository + ':' + tag;
 
@@ -200,10 +280,13 @@ export default {
 
     this.placeholders[name] = placeholderData;
     localStorage.setItem('placeholders', JSON.stringify(this.placeholders));
-
+    if (local) {
+      this.createContainer(name, {Image: imageName, Tty: true, OpenStdin: true});
+    } else {
       this.pullImage(repository, tag, error => {
         if (error) {
           containerServerActions.error({name, error});
+          this.refresh();
           return;
         }
 
@@ -224,6 +307,7 @@ export default {
       () => {
         containerServerActions.waiting({name, waiting: true});
       });
+    }
   },
 
   updateContainer (name, data) {
@@ -231,6 +315,7 @@ export default {
     existing.inspect((error, existingData) => {
       if (error) {
         containerServerActions.error({name, error});
+        this.refresh();
         return;
       }
 
@@ -267,6 +352,7 @@ export default {
         if (error) {
           // TODO: handle error
           containerServerActions.error({newName, error});
+          this.refresh();
         }
         rimraf(newPath, () => {
           if (fs.existsSync(oldPath)) {
@@ -288,11 +374,13 @@ export default {
     this.client.getContainer(name).stop({t: 5}, stopError => {
       if (stopError && stopError.statusCode !== 304) {
         containerServerActions.error({name, stopError});
+        this.refresh();
         return;
       }
       this.client.getContainer(name).start(startError => {
         if (startError && startError.statusCode !== 304) {
           containerServerActions.error({name, startError});
+          this.refresh();
           return;
         }
         this.fetchContainer(name);
@@ -304,6 +392,7 @@ export default {
     this.client.getContainer(name).stop({t: 5}, error => {
       if (error && error.statusCode !== 304) {
         containerServerActions.error({name, error});
+        this.refresh();
         return;
       }
       this.fetchContainer(name);
@@ -314,6 +403,7 @@ export default {
     this.client.getContainer(name).start(error => {
       if (error && error.statusCode !== 304) {
         containerServerActions.error({name, error});
+        this.refresh();
         return;
       }
       this.fetchContainer(name);
@@ -325,15 +415,17 @@ export default {
       containerServerActions.destroyed({id: name});
       delete this.placeholders[name];
       localStorage.setItem('placeholders', JSON.stringify(this.placeholders));
+      this.refresh();
       return;
     }
 
     let container = this.client.getContainer(name);
-    container.unpause(function () {
+    container.unpause( () => {
-      container.kill(function () {
+      container.kill( () => {
-        container.remove(function (error) {
+        container.remove( (error) => {
           if (error) {
             containerServerActions.error({name, error});
+            this.refresh();
             return;
           }
           containerServerActions.destroyed({id: name});
@@ -341,13 +433,14 @@ export default {
           if (fs.existsSync(volumePath)) {
             rimraf(volumePath, () => {});
           }
+          this.refresh();
         });
       });
     });
   },
 
   active (name) {
-    this.detach();
+    this.detachLog();
     this.activeContainerName = name;
 
     if (name) {
@@ -368,6 +461,8 @@ export default {
       timestamps: 1
     }, (err, logStream) => {
       if (err) {
+        // socket hang up can be captured
+        console.error(err);
         return;
       }
 
@@ -394,12 +489,12 @@ export default {
       timestamps: 1
     }, (err, logStream) => {
       if (err) {
+        // Socket hang up also can be found here
+        console.error(err);
         return;
       }
 
-      if (this.stream) {
+      this.detachLog()
-        this.detach();
-      }
       this.stream = logStream;
 
       let timeout = null;
@@ -418,14 +513,22 @@ export default {
     });
   },
 
-  detach () {
+  detachLog() {
     if (this.stream) {
       this.stream.destroy();
       this.stream = null;
     }
   },
+  detachEvent() {
+    if (this.eventStream) {
+      this.eventStream.destroy();
+      this.eventStream = null;
+    }
+  },
+
 
   listen () {
+    this.detachEvent()
     this.client.getEvents((error, stream) => {
       if (error || !stream) {
         // TODO: Add app-wide error handler
@@ -433,20 +536,22 @@ export default {
       }
 
       stream.setEncoding('utf8');
-      stream.pipe(JSONStream.parse()).on('data', data => {
+      stream.on('data', json => {
+        let data = JSON.parse(json);
+
         if (data.status === 'pull' || data.status === 'untag' || data.status === 'delete' || data.status === 'attach') {
-          return;
+          this.refresh();
         }
 
         if (data.status === 'destroy') {
           containerServerActions.destroyed({id: data.id});
-          this.detach(data.id);
+          this.detachLog()
         } else if (data.status === 'kill') {
           containerServerActions.kill({id: data.id});
-          this.detach(data.id);
+          this.detachLog()
         } else if (data.status === 'stop') {
           containerServerActions.stopped({id: data.id});
-          this.detach(data.id);
+          this.detachLog()
         } else if (data.status === 'create') {
           this.logs();
           this.fetchContainer(data.id);
@@ -457,6 +562,7 @@ export default {
           this.fetchContainer(data.id);
         }
       });
+      this.eventStream = stream;
     });
   },
 
@@ -477,6 +583,7 @@ export default {
 
     this.client.pull(repository + ':' + tag, opts, (err, stream) => {
       if (err) {
+        console.log('Err: %o', err);
         callback(err);
         return;
       }
@@ -573,5 +680,11 @@ export default {
         callback(error);
       });
     });
+  },
+
+  refresh () {
+    this.fetchAllContainers();
   }
 };
+
+module.exports = DockerUtil;

src/utils/SetupUtil.js

@@ -11,8 +11,14 @@ import machine from './DockerMachineUtil';
 import docker from './DockerUtil';
 import router from '../router';
 
+// Docker Machine exits with 3 to differentiate pre-create check failures (e.g.
+// virtualization isn't enabled) from normal errors during create (exit code
+// 1).
+const precreateCheckExitCode = 3;
+
 let _retryPromise = null;
 let _timers = [];
+let useNative = util.isNative() ? util.isNative() : true;
 
 export default {
   simulateProgress (estimateSeconds) {
@@ -31,12 +37,20 @@ export default {
     _timers = [];
   },
 
+  async useVbox () {
+    metrics.track('Retried Setup with VBox');
+    router.get().transitionTo('loading');
+    setupServerActions.error({ error: { message: null }});
+    _retryPromise.resolve();
+  },
+
   retry (removeVM) {
     metrics.track('Retried Setup', {
       removeVM
     });
 
     router.get().transitionTo('loading');
+    setupServerActions.error({ error: { message: null }});
     if (removeVM) {
       machine.rm().finally(() => {
         _retryPromise.resolve();
@@ -51,30 +65,43 @@ export default {
     return _retryPromise.promise;
   },
 
-  setup() {
+  async setup () {
-    return util.isLinux() ? this.nativeSetup() : this.nonNativeSetup();
+    while (true) {
+      try {
+        if (util.isNative()) {
+          let stats = fs.statSync('/var/run/docker.sock');
+          if (stats.isSocket()) {
+            await this.nativeSetup();
+          } else {
+            throw new Error('File found is not a socket');
+          }
+        } else {
+          await this.nonNativeSetup();
+        }
+        return;
+      } catch (error) {
+        metrics.track('Native Setup Failed');
+        setupServerActions.error({error});
+
+        bugsnag.notify('Native Setup Failed', error.message, {
+          'Docker Error': error.message
+        }, 'info');
+        this.clearTimers();
+        await this.pause();
+      }
+    }
   },
 
   async nativeSetup () {
     while (true) {
       try {
-        docker.setup('localhost', machine.name());
-        docker.isDockerRunning();
-
-        break;
-      } catch (error) {
         router.get().transitionTo('setup');
-        metrics.track('Native Setup Failed');
+        docker.setup(util.isLinux() ? 'localhost':'docker.local');
-        setupServerActions.error({error});
+        setupServerActions.started({started: true});
-
+        this.simulateProgress(20);
-        let message = error.message.split('\n');
+        return docker.version();
-        let lastLine = message.length > 1 ? message[message.length - 2] : 'Docker Machine encountered an error.';
+      } catch (error) {
-        bugsnag.notify('Native Setup Failed', lastLine, {
+        throw new Error(error);
-          'Docker Machine Logs': error.message
-        }, 'info');
-
-        this.clearTimers();
-        await this.pause();
       }
     }
   },
@@ -86,7 +113,7 @@ export default {
       try {
         setupServerActions.started({started: false});
 
-        // Make sure virtulBox and docker-machine are installed
+        // Make sure virtualBox and docker-machine are installed
         let virtualBoxInstalled = virtualBox.installed();
         let machineInstalled = machine.installed();
         if (!virtualBoxInstalled || !machineInstalled) {
@@ -122,13 +149,16 @@ export default {
         } else {
           let state = await machine.status();
           if (state !== 'Running') {
-            if (state === 'Saved') {
             router.get().transitionTo('setup');
+            setupServerActions.started({started: true});
+            if (state === 'Saved') {
               this.simulateProgress(10);
             } else if (state === 'Stopped') {
-              router.get().transitionTo('setup');
               this.simulateProgress(25);
+            } else {
+              this.simulateProgress(40);
             }
+
             await machine.start();
           }
         }
@@ -146,6 +176,7 @@ export default {
 
         if (ip) {
           docker.setup(ip, machine.name());
+          await docker.version();
         } else {
           throw new Error('Could not determine IP from docker-machine.');
         }
@@ -154,11 +185,17 @@ export default {
       } catch (error) {
         router.get().transitionTo('setup');
 
-        let novtx = error.message.indexOf('This computer doesn\'t have VT-X/AMD-v enabled') !== -1;
+        if (error.code === precreateCheckExitCode) {
-        metrics.track(novtx ? 'Setup Halted' : 'Setup Failed', {
+          metrics.track('Setup Halted', {
             virtualBoxVersion,
             machineVersion
           });
+        } else {
+          metrics.track('Setup Failed', {
+            virtualBoxVersion,
+            machineVersion
+          });
+        }
 
         let message = error.message.split('\n');
         let lastLine = message.length > 1 ? message[message.length - 2] : 'Docker Machine encountered an error.';

src/utils/Util.js

@@ -13,7 +13,7 @@ module.exports = {
     return new Promise((resolve, reject) => {
       child_process.execFile(args[0], args.slice(1), options, (error, stdout) => {
         if (error) {
-          reject(new Error('Encountered an error: ' + error));
+          reject(error);
         } else {
           resolve(stdout);
         }
@@ -37,6 +37,23 @@ module.exports = {
   isLinux: function () {
     return process.platform === 'linux';
   },
+  isNative: function () {
+    let native = null;
+    if (native === null) {
+      try {
+        // Check if file exists
+        fs.statSync('/var/run/docker.sock');
+        native = true;
+      } catch (e) {
+        if (this.isLinux()) {
+          native = true;
+        } else {
+          native = false;
+        }
+      }
+    }
+    return native;
+  },
   binsPath: function () {
     return this.isWindows() ? path.join(this.home(), 'Kitematic-bins') : path.join('/usr/local/bin');
   },
@@ -62,9 +79,6 @@ module.exports = {
     // TODO: fix me for windows 7
     return 'Documents';
   },
-  supportDir: function () {
-    return app.getPath('userData');
-  },
   CommandOrCtrl: function () {
     return this.isWindows() ? 'Ctrl' : 'Command';
   },
@@ -95,7 +109,7 @@ module.exports = {
     // An official repo is alphanumeric characters separated by dashes or
     // underscores.
     // Examples: myrepo, my-docker-repo, my_docker_repo
-    // Non-exapmles: mynamespace/myrepo, my%!repo
+    // Non-examples: mynamespace/myrepo, my%!repo
     var repoRegexp = /^[a-z0-9]+(?:[._-][a-z0-9]+)*$/;
     return repoRegexp.test(name);
   },
@@ -166,9 +180,9 @@ module.exports = {
       dialog.showMessageBox({
         type: 'warning',
         buttons: ['OK'],
-        message: 'The terminal emulator symbolic link doesn\'t exists. Please read the Wiki at https://github.com/kitematic/kitematic/wiki/Common-Issues-and-Fixes#early-linux-support-from-zedtux.'
+        message: 'The terminal emulator symbolic link doesn\'t exists. Please read the Wiki at https://github.com/docker/kitematic/wiki/Early-Linux-Support.'
       });
-      return;
+      return false;
     }
   },
   webPorts: ['80', '8000', '8080', '8888', '3000', '5000', '2368', '9200', '8983']

src/utils/WebUtil.js

@@ -10,7 +10,7 @@ import metrics from './MetricsUtil';
 var WebUtil = {
   addWindowSizeSaving: function () {
     window.addEventListener('resize', function () {
-      fs.writeFileSync(path.join(util.supportDir(), 'size'), JSON.stringify({
+      fs.writeFileSync(path.join(app.getPath('userData'), 'size'), JSON.stringify({
         width: window.outerWidth,
         height: window.outerHeight
       }));

styles/new-container.less

@@ -67,6 +67,10 @@
       justify-content: center;
       flex-shrink: 0;
 
+      .error {
+        color: red;
+      }
+
       img {
         width: 380px;
       }
@@ -160,6 +164,11 @@
         font-weight: 500;
         margin-right: 0.7rem;
       }
+      .results-userimages {
+        border-left: 1px solid @gray-lighter;
+        padding-left: 1.2rem;
+        padding-right: 1.2rem;
+      }
     }
   }
 }
@@ -227,6 +236,31 @@
           bottom: 1rem;
           right: 1rem;
         }
+        .remove {
+          display: flex;
+          flex: 1 auto;
+          justify-content: center;
+          margin: 0.8rem 0 0 0;
+          a {
+            display: block;
+            text-decoration: none;
+            cursor: default;
+            &:focus {
+              outline: 0;
+            }
+            &.active {
+              .btn-delete {
+                opacity: 0.3;
+              }
+            }
+          }
+        }
+        .small {
+          color: red;
+          text-align: center;
+          padding-top: 5px;
+          font-size: 75%;
+        }
       }
       .tag-overlay {
         z-index: 1000;