Merge pull request #281 from allen-servedio/click-repo-open-hub-sitepage

Altering the repo name to be a link that takes you to the Docker Hub page

src/ImageCard.react.js

@@ -5,6 +5,7 @@ var ContainerStore = require('./ContainerStore');
 var metrics = require('./Metrics');
 var OverlayTrigger = require('react-bootstrap').OverlayTrigger;
 var Tooltip = require('react-bootstrap').Tooltip;
+var util = require('./Util');
 
 var ImageCard = React.createClass({
   getInitialState: function () {
@@ -40,6 +41,15 @@ var ImageCard = React.createClass({
     var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
     $tagOverlay.fadeOut(300);
   },
+  handleRepoClick: function () {
+    var $repoUri = 'https://registry.hub.docker.com/';
+    if (this.props.image.is_official) {
+      $repoUri = $repoUri + "_/";
+    } else {
+      $repoUri = $repoUri + "u/";
+    }
+    util.exec(['open', $repoUri + this.props.image.name]);
+  },
   render: function () {
     var self = this;
     var name;
@@ -57,8 +67,8 @@ var ImageCard = React.createClass({
       name = (
         <div>
           <div className="namespace official">{namespace}</div>
-          <OverlayTrigger placement="bottom" overlay={<Tooltip>{this.props.image.name}</Tooltip>}>
-            <span className="repo">{repo}</span>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip>View on DockerHub</Tooltip>}>
+            <span className="repo" onClick={this.handleRepoClick}>{repo}</span>
           </OverlayTrigger>
         </div>
       );
@@ -67,7 +77,7 @@ var ImageCard = React.createClass({
         <div>
           <div className="namespace">{namespace}</div>
           <OverlayTrigger placement="bottom" overlay={<Tooltip>{this.props.image.name}</Tooltip>}>
-            <span className="repo">{repo}</span>
+            <span className="repo" onClick={this.handleRepoClick}>{repo}</span>
           </OverlayTrigger>
         </div>
       );

styles/new-container.less

@@ -186,6 +186,7 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          text-decoration: underline;
         }
       }
       .description {