Merge pull request #161 from kitematic/jmorgan_add_tags

Add tag dropdown for creating containers with a specific image tag

app/ContainerDetails.react.js

@@ -161,23 +161,42 @@ var ContainerDetails = React.createClass({
       }
     }
 
+    var name = this.props.container.Name;
+    var image = this.props.container.Config.Image;
+    var disabledClass = '';
+    if (!this.props.container.State.Running) {
+      disabledClass = 'disabled';
+    }
+
+    var buttonClass = React.addons.classSet({
+      btn: true, 'btn-action': true,
+      'with-icon': true,
+      disabled: !this.props.container.State.Running
+    });
+    var dropdownButtonClass = React.addons.classSet({
+      btn: true,
+      'btn-action': true,
+      'with-icon': true,
+      'dropdown-toggle': true,
+      disabled: !this.props.container.State.Running
+    });
+
     var textButtonClasses = React.addons.classSet({
       'btn': true,
       'btn-action': true,
       'only-icon': true,
-      'active': this.state.page === this.PAGE_LOGS
+      'active': this.state.page === this.PAGE_LOGS,
+      disabled: !this.props.container.State.Running
     });
 
     var gearButtonClass = React.addons.classSet({
       'btn': true,
       'btn-action': true,
       'only-icon': true,
-      'active': this.state.page === this.PAGE_SETTINGS
+      'active': this.state.page === this.PAGE_SETTINGS,
+      disabled: !this.props.container.State.Running
     });
 
-    var name = this.props.container.Name;
-    var image = this.props.container.Config.Image;
-
     return (
       <div className="details">
         <div className="details-header">
@@ -186,16 +205,16 @@ var ContainerDetails = React.createClass({
           </div>
           <div className="details-header-actions">
             <div className="action btn-group">
-              <a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-preview-2"></span><span className="content">View</span></a><a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
+              <a className={buttonClass} onClick={this.handleClick}><span className="icon icon-preview-2"></span><span className="content">View</span></a><a className={dropdownButtonClass}><span className="icon-dropdown icon icon-arrow-37"></span></a>
             </div>
             <div className="action">
-              <a className="btn btn-action with-icon dropdown-toggle" onClick={this.handleClick}><span className="icon icon-folder-1"></span> <span className="content">Volumes</span> <span className="icon-dropdown icon icon-arrow-37"></span></a>
+              <a className={dropdownButtonClass} onClick={this.handleClick}><span className="icon icon-folder-1"></span> <span className="content">Volumes</span> <span className="icon-dropdown icon icon-arrow-37"></span></a>
             </div>
             <div className="action">
-              <a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-refresh"></span> <span className="content">Restart</span></a>
+              <a className={buttonClass} onClick={this.handleClick}><span className="icon icon-refresh"></span> <span className="content">Restart</span></a>
             </div>
             <div className="action">
-              <a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-window-code-3"></span> <span className="content">Terminal</span></a>
+              <a className={buttonClass} onClick={this.handleClick}><span className="icon icon-window-code-3"></span> <span className="content">Terminal</span></a>
             </div>
             <div className="details-header-actions-rhs tabs btn-group">
               <a className={textButtonClasses} onClick={this.showLogs}><span className="icon icon-text-wrapping-2"></span></a>

app/ContainerModal.react.js

@@ -1,7 +1,13 @@
 var async = require('async');
 var $ = require('jquery');
+var assign = require('object-assign');
 var React = require('react/addons');
-var Modal = require('react-bootstrap/Modal');
+var Modal = require('react-bootstrap').Modal;
+var OverlayTrigger = require('react-bootstrap');
+var Popover = require('react-bootstrap/Popover');
+var SplitButton = require('react-bootstrap/SplitButton');
+var MenuItem = require('react-bootstrap/MenuItem');
+
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
 
@@ -12,6 +18,8 @@ var ContainerModal = React.createClass({
       query: '',
       results: ContainerStore.recommended(),
       loading: false,
+      tags: {},
+      active: null,
     };
   },
   componentDidMount: function () {
@@ -67,11 +75,52 @@ var ContainerModal = React.createClass({
       }, 200);
     }
   },
-  handleClick: function (event) {
+  handleClick: function (name, event) {
-    var name = event.target.getAttribute('name');
-    var self = this;
     ContainerStore.create(name, 'latest', function (err, containerName) {
-      self.props.onRequestHide();
+      this.props.onRequestHide();
+    }.bind(this));
+  },
+  handleTagClick: function (tag, name, event) {
+    ContainerStore.create(name, tag, function (err, containerName) {
+      this.props.onRequestHide();
+    }.bind(this));
+  },
+  handleDropdownClick: function (name, event) {
+    this.setState({
+      active: name
+    });
+    if (this.state.tags[name]) {
+      return;
+    }
+    $.get('https://registry.hub.docker.com/v1/repositories/' + name + '/tags', function (result) {
+      var res = {};
+      res[name] = result;
+      console.log(assign(this.state.tags, res));
+      this.setState({
+        tags: assign(this.state.tags, res)
+      });
+    }.bind(this));
+  },
+  handleModalClick: function (event) {
+    if (!this.state.active) {
+      return;
+    }
+    if (!$('.popover').is(event.target)) {
+      this.setState({
+        active: null
+      });
+    }
+  },
+  componentDidUpdate: function () {
+    if (!this.state.active) {
+      return;
+    }
+    var $dropdown = $(this.getDOMNode()).find('[data-name="' + this.state.active + '"]');
+    var $popover = $(this.getDOMNode()).find('.popover');
+
+    $popover.offset({
+      top: $dropdown.offset().top + 32,
+      left: $dropdown.offset().left - $popover.width() / 2 + 11
     });
   },
   render: function () {
@@ -87,6 +136,7 @@ var ContainerModal = React.createClass({
         } else {
           name = <span>{r.name}</span>;
         }
+
         return (
           <li key={r.name}>
             <div className="info">
@@ -100,8 +150,11 @@ var ContainerModal = React.createClass({
             </div>
             <div className="action">
               <div className="btn-group">
-                <a className="btn btn-action" name={r.name} onClick={self.handleClick}>Create</a>
+                <button type="button" className="btn btn-primary" onClick={self.handleClick.bind(self, r.name)}>Create</button>
-                <a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-58"></span></a>
+                <button type="button" className="btn btn-primary dropdown-toggle" onClick={self.handleDropdownClick.bind(self, r.name)} data-name={r.name}>
+                  <span className="caret"></span>
+                  <span className="sr-only">Toggle Dropdown</span>
+                </button>
               </div>
             </div>
           </li>
@@ -137,26 +190,50 @@ var ContainerModal = React.createClass({
       'search-icon': true
     });
 
+    var question = (
+      <div className="question">
+        <OverlayTrigger trigger="hover" placement="bottom" overlay={<Popover>An image is a template for a container.</Popover>}>
+          <span>What&#39;s an image?</span>
+        </OverlayTrigger>
+      </div>
+    );
+
+    var tagData = self.state.tags[this.state.active];
+    if (tagData) {
+      var list = tagData.map(function (t) {
+        return <li key={t.name} onClick={self.handleTagClick.bind(self, t.name, self.state.active)}>{t.name}</li>;
+      });
+      tags = (
+        <ul>
+          {list}
+        </ul>
+      );
+    } else {
+      tags = <RetinaImage className="tags-loading" src="loading.png"/>;
+    }
+
+    var popoverClasses = React.addons.classSet({
+      popover: true,
+      hidden: !this.state.active
+    });
+
     return (
       <Modal {...this.props} animation={false} className="create-modal">
-        <div className="modal-body">
+        <div className="modal-body" onClick={this.handleModalClick}>
           <section className="search">
             <div className="search-bar">
               <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
               <div className={magnifierClasses}></div>
               <RetinaImage className={loadingClasses} src="loading.png"/>
             </div>
-            <div className="question">
-              <a href="#"><span>What&#39;s an image?</span></a>
-            </div>
             <div className="results">
               <div className="title">{title}</div>
               {results}
             </div>
           </section>
-          <aside className="custom">
+          <Popover placement="bottom" className={popoverClasses}>
-            <h4 className="title">Create a Custom Container</h4>
+            {tags}
-          </aside>
+          </Popover>
         </div>
       </Modal>
     );

app/ContainerStore.js

@@ -269,12 +269,13 @@ var ContainerStore = assign(EventEmitter.prototype, {
         async.map(recommended, function (repository, callback) {
           $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
             var results = data.results;
+            console.log(repository, data);
             callback(null, _.find(results, function (r) {
               return r.name === repository;
             }));
           });
         }, function (err, results) {
-          _recommended = results;
+          _recommended = results.filter(function(r) { return !!r; });
           callback();
         });
       },

app/Containers.react.js

@@ -1,6 +1,5 @@
 var React = require('react/addons');
 var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
 var RetinaImage = require('react-retina-image');
 var ModalTrigger = require('react-bootstrap/ModalTrigger');
 var ContainerModal = require('./ContainerModal.react');

app/styles/container-modal.less

@@ -0,0 +1,217 @@
+.create-modal {
+  @modal-padding: 32px;
+  @search-width: 372px;
+  @custom-width: 270px;
+  .modal-dialog {
+    margin-top: 80px;
+    width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width);
+  }
+  .modal-content {
+    //box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
+    border: none; //1px solid #ccc;
+    height: 650px;
+    display: flex;
+
+  }
+  .modal-body {
+    flex: 1 auto;
+    display: flex;
+    flex-direction: row;
+    padding: 32px 32px;
+
+    aside.custom {
+      flex: 0 auto;
+      padding-left: 32px;
+      min-width: 270px;
+    }
+
+    .popover {
+      width: 180px;
+      text-align: center;
+
+      .popover-content {
+        max-height: 300px;
+        padding: 0;
+        overflow: auto;
+      }
+      ul {
+        padding: 0;
+        list-style: none;
+        margin: 0;
+        li {
+          padding: 8px 0;
+          border-bottom: 1px solid #eee;
+
+          &:hover {
+            color: white;
+            background: @brand-primary;
+          }
+        }
+      }
+      .tags-loading {
+        text-align: center;
+        margin: 14px auto;
+        text-align: center;
+        -webkit-animation-name: spin;
+        -webkit-animation-duration: 1.8s;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: linear;
+      }
+    }
+
+    section.search {
+      min-width: 404px;
+      padding-right: 32px;
+      border-right: 1px solid #eee;
+
+      .question {
+        color: @gray-lightest;
+        font-size: 10px;
+        text-align: right;
+      }
+
+      .search-bar {
+        position: relative;
+        .loading {
+          position: absolute;
+          left: 13px;
+          top: 10px;
+          width: 20px;
+          height: 20px;
+          -webkit-animation-name: spin;
+          -webkit-animation-duration: 1.8s;
+          -webkit-animation-iteration-count: infinite;
+          -webkit-animation-timing-function: linear;
+        }
+        .search-icon {
+          font-size: 20px;
+          color: @gray-lighter;
+          position: absolute;
+          top: 9px;
+          left: 14px;
+        }
+        input {
+          border-radius: 20px;
+          font-size: 13px;
+          height: 38px;
+          padding: 8px 16px 8px 40px;
+          color: @gray-darkest;
+          margin-bottom: 3px;
+          border-color: @gray-lightest;
+          box-shadow: none;
+
+          &:focus {
+            box-shadow: none;
+            border-color: @gray-lighter;
+          }
+
+          &::-webkit-input-placeholder {
+            color: #ddd;
+            font-weight: 300;
+          }
+        }
+      }
+
+      .results {
+        overflow: auto;
+        padding-bottom: 80px;
+
+        .no-results {
+          text-align: center;
+          h3 {
+            color: #ABC0C0;
+            font-size: 16px;
+            margin-top: 160px;
+          }
+        }
+
+        .title {
+          flex: 0 auto;
+          margin-top: 16px;
+        }
+
+        ul {
+          margin-top: 10px;
+          list-style: none;
+          padding: 0;
+
+          li {
+            &:hover {
+              background-color: lighten(@gray-lightest, 17.5%);
+            }
+            display: flex;
+            flex-direction: row;
+            padding: 8px 14px 5px 14px;
+            //margin: 12px;
+            border-bottom: 1px solid #eee;
+            &:last-child {
+              border-bottom: 0;
+            }
+            .info {
+              .name {
+                color: @gray-darkest;
+                max-width: 278px;
+                img {
+                  margin-right: 6px;
+                  margin-left: 2px;
+                }
+                font-size: 16px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .properties {
+                color: @gray-lighter;
+                margin-top: 2px;
+
+                .star-count {
+                  font-size: 10px;
+                  display: inline-block;
+                  position: relative;
+                  top: -3px;
+                  left: 1px;
+                  height: 17px;
+                }
+
+                .icon {
+                  overflow: hidden;
+                  display: inline-block;
+                  font-size: 15px;
+                  height: 15px;
+                }
+              }
+              flex: 0 auto;
+            }
+            .action {
+              position: relative;
+              top: 5px;
+              text-align: right;
+              flex: 1 auto;
+              ul {
+                text-align: center;
+                ul {
+                  overflow: auto;
+                  max-height: 300px;
+                }
+              }
+
+
+              .icon {
+                position: relative;
+                top: 2px;
+                font-size: 11px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.modal-backdrop.in {
+  background: rgba(227,230,230,0.95);
+  opacity: 1;
+  height: 100%;
+}

app/styles/main.less

@@ -1,12 +1,15 @@
 @import "bootstrap/bootstrap.less";
+@import "variables.less";
 @import "clearsans.less";
 @import "theme.less";
 @import "icons.less";
+@import "icons-filled.less";
 @import "retina.less";
 @import "setup.less";
 @import "radial.less";
 @import "header.less";
 @import "containers.less";
+@import "container-modal.less";
 
 html, body {
   height: 100%;
@@ -41,177 +44,14 @@ html, body {
   background-color: rgba(0,0,0,0.2);
 }
 
-.create-modal {
+.popover {
-  @modal-padding: 32px;
+  font-family: 'Clear Sans', sans-serif;
-  @search-width: 372px;
-  @custom-width: 270px;
-  .modal-dialog {
-    margin-top: 8%;
-    width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width);
-  }
-  .modal-content {
-    //box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
-    border: none; //1px solid #ccc;
-    height: 610px;
-    display: flex;
-  }
-  .modal-body {
-    flex: 1 auto;
-    display: flex;
-    flex-direction: row;
-    padding: 32px 32px;
 
-    aside.custom {
+  color: @gray-normal;
-      flex: 0 auto;
+  font-weight: 400;
-      padding-left: 32px;
+  font-size: 13px;
-      min-width: 270px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
-    }
+  border: 1px solid #ddd;
-
-    section.search {
-      min-width: 404px;
-      padding-right: 32px;
-      border-right: 1px solid #eee;
-
-      .question {
-        a {
-          color: @gray-lightest;
-          &:hover {
-            color: darken(@gray-lightest, 10%);
-          }
-        }
-        font-size: 10px;
-        text-align: right;
-      }
-
-      .search-bar {
-        position: relative;
-        .loading {
-          position: absolute;
-          left: 13px;
-          top: 10px;
-          width: 20px;
-          height: 20px;
-          -webkit-animation-name: spin;
-          -webkit-animation-duration: 1.8s;
-          -webkit-animation-iteration-count: infinite;
-          -webkit-animation-timing-function: linear;
-        }
-        .search-icon {
-          font-size: 20px;
-          color: @gray-lighter;
-          position: absolute;
-          top: 9px;
-          left: 14px;
-        }
-        input {
-          border-radius: 20px;
-          font-size: 13px;
-          height: 38px;
-          padding: 8px 16px 8px 40px;
-          color: @gray-darkest;
-          margin-bottom: 3px;
-          border-color: @gray-lightest;
-          box-shadow: none;
-
-          &:focus {
-            box-shadow: none;
-            border-color: @gray-lighter;
-          }
-
-          &::-webkit-input-placeholder {
-            color: #ddd;
-            font-weight: 300;
-          }
-        }
-      }
-
-      .results {
-        overflow: auto;
-
-        .no-results {
-          text-align: center;
-          h3 {
-            color: #ABC0C0;
-            font-size: 16px;
-            margin-top: 160px;
-          }
-        }
-
-        .title {
-          flex: 0 auto;
-          margin-top: 16px;
-        }
-
-        ul {
-          margin-top: 10px;
-          list-style: none;
-          padding: 0;
-
-          li {
-            &:hover {
-              background-color: lighten(@gray-lightest, 17.5%);
-            }
-            display: flex;
-            flex-direction: row;
-            padding: 8px 14px 5px 14px;
-            //margin: 12px;
-            border-bottom: 1px solid #eee;
-            &:last-child {
-              border-bottom: 0;
-            }
-            .info {
-              .name {
-                color: @gray-darkest;
-                max-width: 278px;
-                img {
-                  margin-right: 6px;
-                  margin-left: 2px;
-                }
-                font-size: 16px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-              .properties {
-                color: @gray-lighter;
-                margin-top: 2px;
-
-                .star-count {
-                  font-size: 10px;
-                  display: inline-block;
-                  position: relative;
-                  top: -3px;
-                  left: 1px;
-                  height: 17px;
-                }
-
-                .icon {
-                  overflow: hidden;
-                  display: inline-block;
-                  font-size: 15px;
-                  height: 15px;
-                }
-              }
-              flex: 0 auto;
-            }
-            .action {
-              position: relative;
-              top: 5px;
-              text-align: right;
-              flex: 1 auto;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.modal-backdrop.in {
-  background: rgba(227,230,230,0.95);
-  opacity: 1;
-  height: 100%;
 }
 
 @-webkit-keyframes spin {

app/styles/theme.less

@@ -39,6 +39,7 @@ h4 {
     color: darken(@btn-color, 10%);
     cursor: default;
     box-shadow: none;
+    background: none;
   }
 
   &:active {