Have the docker file view in the build pack tab use a nice formatter

static/css/quay.css

@@ -9,6 +9,47 @@
   }
 }
 
+.dockerfile-view {
+  margin: 20px;
+  padding: 20px;
+  background: #F7F6F6;
+  border: 1px solid #ddd;
+}
+
+.dockerfile-view .entry {
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+}
+
+.dockerfile-view .entry.comment {
+  color: rgb(82, 172, 82);
+}
+
+.dockerfile-command {
+  position: relative;
+}
+
+.dockerfile-command .command-title {
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  padding-left: 90px;
+}
+
+.dockerfile-command .label {
+  color: white;
+
+  padding-top: 4px;
+  text-align: right;
+  margin-right: 4px;
+  width: 86px;
+  display: inline-block;
+
+  border-right: 4px solid #aaa;
+  background-color: #333;
+
+  position: absolute;
+  top: 0px;
+  left: -4px;
+}
+
 .codetooltipcontainer .tooltip-inner {
     white-space:pre;
     max-width:none;
@@ -1819,6 +1860,14 @@ p.editable:hover i {
   left: 24px;
 }
 
+.repo-build .build-pane .build-logs .dockerfile-command {
+  position: inherit;
+}
+
+.repo-build .build-pane .build-logs .dockerfile-command .command-title {
+  padding-left: 0px;
+}
+
 .repo-build .build-pane .build-logs .container-header .container-content {
   display: block;
   padding-left: 20px;
@@ -1828,26 +1877,6 @@ p.editable:hover i {
   padding-left: 120px;
 }
 
-.label.FROM {
-  border-color: #5bc0de !important;
-}
-
-.label.CMD, .label.EXPOSE, .label.ENTRYPOINT {
-  border-color: #428bca !important;
-}
-
-.label.RUN, .label.ADD {
-  border-color: #5cb85c !important;
-}
-
-.label.ENV, .label.VOLUME, .label.USER, .label.WORKDIR {
-  border-color: #f0ad4e !important;
-}
-
-.label.MAINTAINER {
-  border-color: #aaa !important;
-}
-
 .repo-build .build-pane .build-logs .log-entry {
   position: relative;
 }
@@ -3191,4 +3220,24 @@ pre.command:before {
 .file-drop {
   padding: 10px;
   margin: 10px;
+}
+
+.label.FROM {
+  border-color: #5bc0de !important;
+}
+
+.label.CMD, .label.EXPOSE, .label.ENTRYPOINT {
+  border-color: #428bca !important;
+}
+
+.label.RUN, .label.ADD {
+  border-color: #5cb85c !important;
+}
+
+.label.ENV, .label.VOLUME, .label.USER, .label.WORKDIR {
+  border-color: #f0ad4e !important;
+}
+
+.label.MAINTAINER {
+  border-color: #aaa !important;
 }

static/directives/build-log-command.html

@@ -1,6 +1 @@
-<span class="command" bindonce>
-  <span class="label" bo-class="getCommandKind(command.message)" bo-show="getCommandKind(command.message)"
-        bo-text="getCommandKind(command.message)">
-  </span>
-  <span class="command-title" bo-html="getCommandTitleHtml(command.message)"></span>
-</span>
+<span class="dockerfile-command command" command="getWithoutStep(command.message)"></span>

static/directives/dockerfile-command.html

@@ -0,0 +1,6 @@
+<span class="dockerfile-command-element" bindonce>
+  <span class="label" bo-class="getCommandKind(command)" bo-show="getCommandKind(command)"
+        bo-text="getCommandKind(command)">
+  </span>
+  <span class="command-title" bo-html="getCommandTitleHtml(command)"></span>
+</span>

static/directives/dockerfile-view.html

@@ -0,0 +1,15 @@
+<div class="dockerfile-view-element">
+  <div class="dockerfile-line" ng-repeat="line in lines">
+    <div ng-switch on="line.kind">
+      <div class="command entry" ng-switch-when="command">
+        <div class="dockerfile-command" command="line.text"></div>
+      </div>
+      <div class="comment entry" ng-switch-when="comment">
+        {{ line.text || ' ' }}
+      </div>
+      <div class="text entry" ng-switch-default>
+        {{ line.text || '&nbsp;' }}
+      </div>
+    </div>
+  </div>
+</div>

static/js/app.js

@@ -2537,17 +2537,42 @@ quayApp.directive('buildLogCommand', function () {
     scope: {
       'command': '=command'
     },
+    controller: function($scope, $element) {
+      $scope.getWithoutStep = function(fullTitle) {
+        var colon = fullTitle.indexOf(':');
+        if (colon <= 0) {
+          return '';
+        }
+        
+        return $.trim(fullTitle.substring(colon + 1));
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
+quayApp.directive('dockerfileCommand', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/dockerfile-command.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'command': '=command'
+    },
     controller: function($scope, $element, $sanitize) {
       var registryHandlers = {
         'quay.io': function(pieces) {
           var rnamespace =  pieces[pieces.length - 2];
-          var rname = pieces[pieces.length - 1];
+          var rname = pieces[pieces.length - 1].split(':')[0];
           return '/repository/' + rnamespace + '/' + rname + '/'; 
         },
 
         '': function(pieces) {
           var rnamespace = pieces.length == 1 ? '_' : pieces[0];
-          var rname = pieces[pieces.length - 1];
+          var rname = pieces[pieces.length - 1].split(':')[0];
           return 'https://index.docker.io/u/' + rnamespace + '/' + rname + '/';
         }
       };
@@ -2564,25 +2589,18 @@ quayApp.directive('buildLogCommand', function () {
         }
       };
      
-      $scope.getCommandKind = function(fullTitle) {
-        var colon = fullTitle.indexOf(':');
-        var title = getTitleWithoutStep(fullTitle);
-        if (!title) {
-          return null;
-        }
-
+      $scope.getCommandKind = function(title) {
         var space = title.indexOf(' ');
         return title.substring(0, space);
       };
 
-      $scope.getCommandTitleHtml = function(fullTitle) {
-        var title = getTitleWithoutStep(fullTitle) || fullTitle;
+      $scope.getCommandTitleHtml = function(title) {
         var space = title.indexOf(' ');
         if (space <= 0) {
           return $sanitize(title);
         }
         
-        var kind = $scope.getCommandKind(fullTitle);
+        var kind = $scope.getCommandKind(title);
         var sanitized = $sanitize(title.substring(space + 1));
         
         var handler = kindHandlers[kind || ''];
@@ -2591,21 +2609,50 @@ quayApp.directive('buildLogCommand', function () {
         } else {
           return sanitized;
         }
-      };
-
-      var getTitleWithoutStep = function(fullTitle) {
-        var colon = fullTitle.indexOf(':');
-        if (colon <= 0) {
-          return null;
-        }
-        
-        return $.trim(fullTitle.substring(colon + 1));
-      };
+      };      
     }
   };
   return directiveDefinitionObject;
 });
 
+
+quayApp.directive('dockerfileView', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/dockerfile-view.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'contents': '=contents'
+    },
+    controller: function($scope, $element, $sanitize) {
+      $scope.$watch('contents', function(contents) {
+        $scope.lines = [];
+
+        var lines = contents ? contents.split('\n') : [];
+        for (var i = 0; i < lines.length; ++i) {
+          var line = $.trim(lines[i]);
+          var kind = 'text';
+          if (line && line[0] == '#') {
+            kind = 'comment';
+          } else if (line.match(/^([A-Z]+\s)/)) {
+            kind = 'command';
+          }
+
+          var lineInfo = {
+            'text': $sanitize(line),
+            'kind': kind
+          };
+          $scope.lines.push(lineInfo);
+        }
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('buildStatus', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/partials/build-package.html

@@ -10,8 +10,8 @@
       <span class="repo-breadcrumb" repo="repo" subsection-icon="'fa-tasks'" subsection="repobuild.display_name"></span>
     </h3>
     <div class="repo-controls">
-      <a href="javascript:void(0)" title="Download Buildpack" bs-tooltip="tooltip.title" ng-show="zip" ng-click="downloadForUser()">
-        <i class="fa fa-download toggle-icon"></i>
+      <a href="javascript:void(0)" ng-show="zip" ng-click="downloadForUser()">
+        <i class="fa fa-download toggle-icon" title="Download Build Package" bs-tooltip="tooltip.title" data-container="body"></i>
       </a>
     </div>
   </div>
@@ -37,7 +37,7 @@
     <div class="tab-content">
       <!-- Dockerfile view -->
       <div class="tab-pane active" id="dockerfile">
-        <pre ng-show="dockerFileContents">{{ dockerFileContents }}</pre>
+        <div class="dockerfile-view" contents="dockerFileContents"></div>
         <span ng-show="!dockerFileContents">No Dockerfile found in the build pack</span>
       </div>