Add the command view to the tooltips in the tree, the image side bar and the image view page

static/css/quay.css

@@ -9,6 +9,16 @@
   }
 }
 
+.codetooltipcontainer .tooltip-inner {
+    white-space:pre;
+    max-width:none;
+}
+
+.codetooltip {
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  display: block;
+}
+
 .resource-view-element {
   position: relative;
 }
@@ -1655,6 +1665,18 @@ p.editable:hover i {
   padding-top: 4px;
 }
 
+.repo .formatted-command {
+  margin-top: 4px;
+  padding: 4px;
+  font-size: 12px;
+}
+
+.repo .formatted-command.trimmed {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .repo .changes-count-container {
   text-align: center;
 }
@@ -2499,16 +2521,37 @@ p.editable:hover i {
   display: block;
 }
 
-.d3-tip .created {
+.d3-tip .command {
   font-size: 12px;
   color: white;
   display: block;
-  margin-bottom: 6px;
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+}
+
+.d3-tip .info-line {
+  display: block;
+  margin-top: 6px;
+  padding-top: 6px;
+}
+
+.d3-tip .info-line i {
+  margin-right: 10px;
+  font-size: 14px;
+  color: #888;
 }
 
 .d3-tip .comment {
   display: block;
   font-size: 14px;
+  padding-bottom: 4px;
+  margin-bottom: 10px;
+  border-bottom: 1px dotted #ccc;
+}
+
+.d3-tip .created {
+  font-size: 12px;
+  color: white;
+  display: block;
   margin-bottom: 6px;
 }
 

static/js/app.js

@@ -103,7 +103,7 @@ function getMarkedDown(string) {
 }
 
 // Start the application code itself.
-quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies'], function($provide, cfpLoadingBarProvider) {
+quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies', 'ngSanitize'], function($provide, cfpLoadingBarProvider) {
     cfpLoadingBarProvider.includeSpinner = false;
 
     $provide.factory('ApiService', ['Restangular', function(Restangular) {

static/js/controllers.js

@@ -1,3 +1,14 @@
+function getFormattedCommand(command) {
+  if (!command || !command.length) { return ''; }
+
+  // Handle /bin/sh commands specially.
+  if (command.length > 2 && command[0] == '/bin/sh' && command[1] == '-c') {
+    return command[2];
+  }
+
+  return command.join(' ');
+}
+
 $.fn.clipboardCopy = function() { 
   var clip = new ZeroClipboard($(this),  { 'moviePath': 'static/lib/ZeroClipboard.swf' });  
 
@@ -157,7 +168,7 @@ function LandingCtrl($scope, UserService, ApiService) {
   browserchrome.update();
 }
 
-function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
+function RepoCtrl($scope, $sanitize, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
 
@@ -192,6 +203,14 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
 
   // Start scope methods //////////////////////////////////////////
 
+  $scope.getFormattedCommand = getFormattedCommand;
+
+  $scope.getTooltipCommand = function(command) {
+    var formatted = getFormattedCommand(command);
+    var sanitized = $sanitize(formatted);
+    return '<span class=\'codetooltip\'>' + sanitized + '</span>';
+  };
+
   $scope.updateForDescription = function(content) {
     $scope.repo.description = content;
     $scope.repo.put();
@@ -563,7 +582,7 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
 
       // Create the new tree.
       $scope.tree = new ImageHistoryTree(namespace, name, resp.images,
-          getFirstTextLine, $scope.getTimeSince);
+          getFirstTextLine, $scope.getTimeSince, $scope.getFormattedCommand);
 
       $scope.tree.draw('image-history-container');
 
@@ -979,6 +998,8 @@ function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService) {
   var name = $routeParams.name;
   var imageid = $routeParams.image;
 
+  $scope.getFormattedCommand = getFormattedCommand;
+
   $scope.parseDate = function(dateString) {
     return Date.parse(dateString);
   };

static/js/graphing.js

@@ -31,7 +31,7 @@ var DEPTH_WIDTH = 132;
 /**
  * Based off of http://mbostock.github.io/d3/talk/20111018/tree.html by Mike Bostock (@mbostock)
  */
-function ImageHistoryTree(namespace, name, images, formatComment, formatTime) {
+function ImageHistoryTree(namespace, name, images, formatComment, formatTime, formatCommand) {
     /**
      * The namespace of the repo.
      */
@@ -57,6 +57,11 @@ function ImageHistoryTree(namespace, name, images, formatComment, formatTime) {
      */
     this.formatTime_ = formatTime;
 
+    /**
+     * Method to invoke to format the command for an image.
+     */
+    this.formatCommand_ = formatCommand;
+
     /**
      * The current tag (if any).
      */
@@ -187,6 +192,8 @@ ImageHistoryTree.prototype.draw = function(container) {
 
     var formatComment = this.formatComment_;
     var formatTime = this.formatTime_;
+    var formatCommand = this.formatCommand_;
+
     var tip = d3.tip()
         .attr('class', 'd3-tip')
         .offset([-1, 24])
@@ -212,8 +219,10 @@ ImageHistoryTree.prototype.draw = function(container) {
             if (d.image.comment) {
                 html += '<span class="comment">' + formatComment(d.image.comment) + '</span>';
             }
-            html += '<span class="created">' + formatTime(d.image.created) + '</span>';
-            html += '<span class="full-id">' + d.image.id + '</span>';
+            if (d.image.command && d.image.command.length) {
+                html += '<span class="command info-line"><i class="fa fa-terminal"></i>' + formatCommand(d.image.command) + '</span>';
+            }
+            html += '<span class="created info-line"><i class="fa fa-calendar"></i>' + formatTime(d.image.created) + '</span>';           
             return html;
         })
 

static/partials/image-view.html

@@ -43,6 +43,11 @@
                 title="The amount of data sent between Docker and Quay.io when pushing/pulling"
                 bs-tooltip="tooltip.title" data-container="body">{{ image.value.size | bytes }}</span>
       </dd>
+
+      <dt ng-show="image.value.command && image.value.command.length">Command</dt>
+      <dd ng-show="image.value.command && image.value.command.length">
+        <pre class="formatted-command">{{ getFormattedCommand(image.value.command) }}</pre>
+      </dd>
     </dl>
 
     <!-- Changes tabs -->

static/partials/view-repo.html

@@ -167,6 +167,12 @@ sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
                               title="The amount of data sent between Docker and Quay.io when pushing/pulling"
                               bs-tooltip="tooltip.title" data-container="body">{{ currentImage.size | bytes }}</span>
                     </dd>
+                    <dt ng-show="currentImage.command && currentImage.command.length">Command</dt>
+                    <dd ng-show="currentImage.command && currentImage.command.length" class="codetooltipcontainer">
+                      <pre class="formatted-command trimmed"
+                           bs-tooltip="getTooltipCommand(currentImage.command)"
+                           data-placement="top">{{ getFormattedCommand(currentImage.command) }}</pre>
+                    </dd>
                   </dl>
 
                   <!-- Image changes loading -->

templates/base.html

@@ -42,6 +42,7 @@
 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
 
     <script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
     <script src="//cdn.jsdelivr.net/restangular/1.2.0/restangular.min.js"></script>