Fix commands that have HTML characters in them

static/js/app.js

@@ -106,6 +106,48 @@ function getMarkedDown(string) {
 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

@@ -1,14 +1,3 @@
-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' });  
 
@@ -168,7 +157,7 @@ function LandingCtrl($scope, UserService, ApiService) {
   browserchrome.update();
 }
 
-function RepoCtrl($scope, $sanitize, 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;
 
@@ -203,11 +192,10 @@ function RepoCtrl($scope, $sanitize, Restangular, ApiService, $routeParams, $roo
 
   // Start scope methods //////////////////////////////////////////
 
-  $scope.getFormattedCommand = getFormattedCommand;
+  $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand;
 
-  $scope.getTooltipCommand = function(command) {
-    var formatted = getFormattedCommand(command);
-    var sanitized = $sanitize(formatted);
+  $scope.getTooltipCommand = function(image) {
+    var sanitized = ImageMetadataService.getEscapedFormattedCommand(image);
     return '<span class=\'codetooltip\'>' + sanitized + '</span>';
   };
 
@@ -562,11 +550,6 @@ function RepoCtrl($scope, $sanitize, Restangular, ApiService, $routeParams, $roo
     });
   };
 
-  var getSanitizedCommand = function(command) {
-    var formatted = getFormattedCommand(command);
-    return $sanitize(formatted);
-  };
-
   var listImages = function() {
     var params = {'repository': namespace + '/' + name};    
     $scope.imageHistory = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
@@ -587,7 +570,7 @@ function RepoCtrl($scope, $sanitize, Restangular, ApiService, $routeParams, $roo
 
       // Create the new tree.
       $scope.tree = new ImageHistoryTree(namespace, name, resp.images,
-          getFirstTextLine, $scope.getTimeSince, getSanitizedCommand);
+          getFirstTextLine, $scope.getTimeSince, ImageMetadataService.getEscapedFormattedCommand);
 
       $scope.tree.draw('image-history-container');
 
@@ -998,12 +981,12 @@ 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 = getFormattedCommand;
+  $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand;
 
   $scope.parseDate = function(dateString) {
     return Date.parse(dateString);

static/js/graphing.js

@@ -220,7 +220,7 @@ ImageHistoryTree.prototype.draw = function(container) {
                 html += '<span class="comment">' + formatComment(d.image.comment) + '</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="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;

static/partials/image-view.html

@@ -46,7 +46,7 @@
 
       <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>
+        <pre class="formatted-command">{{ getFormattedCommand(image.value) }}</pre>
       </dd>
     </dl>
 

static/partials/view-repo.html

@@ -170,8 +170,8 @@ sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
                     <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>
+                           bs-tooltip="getTooltipCommand(currentImage)"
+                           data-placement="top">{{ getFormattedCommand(currentImage) }}</pre>
                     </dd>
                   </dl>