diff --git a/static/js/app.js b/static/js/app.js index e1f6a235f..76b05e2df 100644 --- a/static/js/app.js +++ b/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, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + + 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 = {}; diff --git a/static/js/controllers.js b/static/js/controllers.js index caadff1fb..5112fad6c 100644 --- a/static/js/controllers.js +++ b/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 '' + sanitized + ''; }; @@ -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); diff --git a/static/js/graphing.js b/static/js/graphing.js index c9f3ef24b..396228ab0 100644 --- a/static/js/graphing.js +++ b/static/js/graphing.js @@ -220,7 +220,7 @@ ImageHistoryTree.prototype.draw = function(container) { html += '' + formatComment(d.image.comment) + ''; } if (d.image.command && d.image.command.length) { - html += '' + formatCommand(d.image.command) + ''; + html += '' + formatCommand(d.image) + ''; } html += '' + formatTime(d.image.created) + ''; return html; diff --git a/static/partials/image-view.html b/static/partials/image-view.html index 102ac9bb8..45c9c7a74 100644 --- a/static/partials/image-view.html +++ b/static/partials/image-view.html @@ -46,7 +46,7 @@
{{ getFormattedCommand(image.value.command) }}+
{{ getFormattedCommand(image.value) }}
{{ getFormattedCommand(currentImage.command) }}+ bs-tooltip="getTooltipCommand(currentImage)" + data-placement="top">{{ getFormattedCommand(currentImage) }}