Merge branch 'master' into federation

static/js/app.js

@@ -103,9 +103,51 @@ 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('UtilService', ['$sanitize', function($sanitize) {
+      var utilService = {};
+
+      utilService.textToSafeHtml = function(text) {
+        var adjusted = text.replace(/&/g, "&")
+         .replace(/</g, "&lt;")
+         .replace(/>/g, "&gt;")
+         .replace(/"/g, "&quot;")
+         .replace(/'/g, "&#039;");
+
+        return $sanitize(adjusted);
+      };
+
+      return utilService;
+    }]);
+
+    $provide.factory('ImageMetadataService', ['UtilService', function(UtilService) {
+      var metadataService = {};
+      metadataService.getFormattedCommand = function(image) {
+        if (!image || !image.command || !image.command.length) {
+          return '';
+        }
+
+        var getCommandStr = function(command) {
+          // Handle /bin/sh commands specially.
+          if (command.length > 2 && command[0] == '/bin/sh' && command[1] == '-c') {
+            return command[2];
+          }
+          
+          return command.join(' ');
+        };
+
+        return getCommandStr(image.command);
+      };
+
+      metadataService.getEscapedFormattedCommand = function(image) {
+        return UtilService.textToSafeHtml(metadataService.getFormattedCommand(image));
+      };
+
+      return metadataService;
+    }]);
+
     $provide.factory('ApiService', ['Restangular', function(Restangular) {
       var apiService = {};
 

static/js/controllers.js

@@ -48,7 +48,7 @@ function GuideCtrl($scope) {
 function SecurityCtrl($scope) {
 }
 
-function RepoListCtrl($scope, Restangular, UserService, ApiService) {
+function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
   $scope.namespace = null;
   $scope.page = 1;
   $scope.publicPageCount = null;
@@ -157,7 +157,7 @@ function LandingCtrl($scope, UserService, ApiService) {
   browserchrome.update();
 }
 
-function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
+function RepoCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout) {
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
 
@@ -192,6 +192,13 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
 
   // Start scope methods //////////////////////////////////////////
 
+  $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand;
+
+  $scope.getTooltipCommand = function(image) {
+    var sanitized = ImageMetadataService.getEscapedFormattedCommand(image);
+    return '<span class=\'codetooltip\'>' + sanitized + '</span>';
+  };
+
   $scope.updateForDescription = function(content) {
     $scope.repo.description = content;
     $scope.repo.put();
@@ -563,7 +570,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, ImageMetadataService.getEscapedFormattedCommand);
 
       $scope.tree.draw('image-history-container');
 
@@ -983,11 +990,13 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
   };
 }
 
-function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService) {  
+function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {  
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
   var imageid = $routeParams.image;
 
+  $scope.getFormattedCommand = ImageMetadataService.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) + '</span>';
+            }
+            html += '<span class="created info-line"><i class="fa fa-calendar"></i>' + formatTime(d.image.created) + '</span>';           
             return html;
         })