Added support for creating containers from local images

Signed-off-by: FrenchBen <me+git@frenchben.com>

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.fetchAllImages();
+  }
+
+  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/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/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,6 +84,11 @@ var ImageCard = React.createClass({
     var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
     $tagOverlay.fadeOut(300);
   },
+  handleDeleteImgClick: function (image) {
+    if (this.state.chosenTag) {
+      imageActions.destroy(image.RepoTags[0].split(':')[0] + ':' + this.state.chosenTag);
+    }
+  },
   handleRepoClick: function () {
     var repoUri = 'https://hub.docker.com/';
     if (this.props.image.namespace === 'library') {
@@ -108,10 +122,9 @@ var ImageCard = React.createClass({
     } 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;
@@ -150,10 +163,59 @@ var ImageCard = React.createClass({
         <span className="icon icon-badge-private"></span>
       );
     }
+
+    let create;
+    let 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"><span className="icon icon-delete"></span>Delete Tag</span>
+          </div>
+          <p className="small">Prior to delete, stop all containers<br/>using the above tag</p>
+          <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>
@@ -165,6 +227,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}
@@ -187,20 +254,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 () {
@@ -79,7 +91,8 @@ module.exports = React.createClass({
       currentPage: page,
       previousPage: previousPage,
       nextPage: nextPage,
-      totalPage: totalPage
+      totalPage: totalPage,
+      error: null
     });
 
     _searchPromise = Promise.delay(200).cancellable().then(() => {
@@ -101,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();
     }
@@ -187,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;
@@ -268,6 +293,32 @@ module.exports = React.createClass({
           {otherResults}
         </div>
       );
+    } 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>
+          <h4>My Images</h4>
+          <div className="result-grid">
+            {userImageItems}
+          </div>
+        </div>
+      ) : null;
+      results = (
+        <div className="result-grids">
+          {userImageResults}
+        </div>
+      );
     } else {
       if (this.state.query.length) {
         results = (
@@ -316,6 +367,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/stores/ImageStore.js

@@ -0,0 +1,56 @@
+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);
+        } 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/DockerUtil.js

@@ -8,6 +8,8 @@ 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';
@@ -15,13 +17,14 @@ import Promise from 'bluebird';
 
 
 
-export default {
+var DockerUtil = {
   host: null,
   client: null,
   placeholders: {},
   stream: null,
   eventStream: null,
   activeContainerName: null,
+  localImages: null,
 
   setup (ip, name) {
     if (!ip && !name) {
@@ -77,6 +80,7 @@ export default {
   init () {
     this.placeholders = JSON.parse(localStorage.getItem('placeholders')) || {};
     this.fetchAllContainers();
+    this.fetchAllImages();
     this.listen();
 
     // Resume pulling containers that were previously being pulled
@@ -170,6 +174,7 @@ export default {
         });
       });
     });
+    this.fetchAllImages();
   },
 
   fetchContainer (id) {
@@ -210,7 +215,36 @@ export default {
     });
   },
 
-  run (name, repository, tag) {
+  fetchAllImages () {
+    this.client.listImages((err, list) => {
+      if (err) {
+        imageServerActions.error(err);
+      } else {
+        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);
+            }
+          });
+          return true;
+        }
+      });
+    });
+  },
+
+  run (name, repository, tag, local = false) {
     tag = tag || 'latest';
     let imageName = repository + ':' + tag;
 
@@ -231,7 +265,9 @@ 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});
@@ -255,6 +291,7 @@ export default {
       () => {
         containerServerActions.waiting({name, waiting: true});
       });
+    }
   },
 
   updateContainer (name, data) {
@@ -474,9 +511,11 @@ 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.fetchAllImages();
         }
 
         if (data.status === 'destroy') {
@@ -519,6 +558,7 @@ export default {
 
     this.client.pull(repository + ':' + tag, opts, (err, stream) => {
       if (err) {
+        console.log('Err: %o', err);
         callback(err);
         return;
       }
@@ -563,7 +603,7 @@ export default {
               if (i < leftOverLayers) {
                 layerAmount += 1;
               }
-              columns.progress[i] = {layerIDs: [], nbLayers:0 , maxLayers: layerAmount, value: 0.0};
+              columns.progress[i] = {layerIDs: [], nbLayers: 0, maxLayers: layerAmount, value: 0.0};
             }
           }
 
@@ -617,3 +657,5 @@ export default {
     });
   }
 };
+
+module.exports = DockerUtil;

styles/new-container.less

@@ -67,6 +67,10 @@
       justify-content: center;
       flex-shrink: 0;
 
+      .error {
+        color: red;
+      }
+
       img {
         width: 380px;
       }
@@ -160,6 +164,10 @@
         font-weight: 500;
         margin-right: 0.7rem;
       }
+      .results-userimages {
+        border-left: 1px solid @gray-lighter;
+        padding-left: 1.2rem;
+      }
     }
   }
 }
@@ -227,6 +235,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;