Add ability to see a build's build pack, including browsing and downloading of the contents if it is a zip

static/css/quay.css

@@ -2263,23 +2263,10 @@ p.editable:hover i {
   overflow: hidden;
 }
 
-#changes-tree-container .node rect {
-  cursor: pointer;
-  fill: #fff;
- fill-opacity: 1;
-  stroke: #fff;
-  stroke-width: 1.5px;
-}
-
 #changes-tree-container .node .change-icon {
   font-size: 14px;
 }
 
-#changes-tree-container .node text {
-  font: 12px sans-serif;
-  pointer-events: none;
-}
-
 #changes-tree-container .node.changed text {
   fill: rgb(73, 100, 209);
 }
@@ -2293,7 +2280,20 @@ p.editable:hover i {
   fill: rgb(209, 73, 73);
 }
 
-#changes-tree-container path.link {
+.file-tree-base .node rect {
+  cursor: pointer;
+  fill: #fff;
+  fill-opacity: 1;
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+
+.file-tree-base .node text {
+  font: 12px sans-serif;
+  pointer-events: none;
+}
+
+.file-tree-base path.link {
   fill: none;
   stroke: #9ecae1;
   stroke-width: 1.5px;

static/js/app.js

@@ -791,6 +791,7 @@ quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'angu
       when('/repository/:namespace/:name/image/:image', {templateUrl: '/static/partials/image-view.html', controller: ImageViewCtrl, reloadOnSearch: false}).
       when('/repository/:namespace/:name/admin', {templateUrl: '/static/partials/repo-admin.html', controller:RepoAdminCtrl, reloadOnSearch: false}).
       when('/repository/:namespace/:name/build', {templateUrl: '/static/partials/repo-build.html', controller:RepoBuildCtrl, reloadOnSearch: false}).
+      when('/repository/:namespace/:name/build/:buildid/buildpack', {templateUrl: '/static/partials/build-package.html', controller:BuildPackageCtrl, reloadOnSearch: false}).
       when('/repository/', {title: 'Repositories', description: 'Public and private docker repositories list',
                             templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
       when('/user/', {title: 'Account Settings', description:'Account settings for Quay.io', templateUrl: '/static/partials/user-admin.html',

static/js/controllers.js

@@ -774,6 +774,128 @@ function RepoCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiServi
   loadViewInfo();
 }
 
+function BuildPackageCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
+  var namespace = $routeParams.namespace;
+  var name = $routeParams.name;
+  var buildid = $routeParams.buildid;
+
+  var params = {
+    'repository': namespace + '/' + name,
+    'build_uuid': buildid
+  };
+
+  $scope.initializeTree = function() {
+    if ($scope.drawn) { return; }
+
+    $scope.drawn = true;
+    $timeout(function() {
+      $scope.tree.draw('file-tree-container');
+    }, 10);
+  };
+
+  var processBuildPack = function(response) {
+    // Try to load as a zip file.
+    var zipFiles = null;
+    var zip = null;
+    try {      
+      var zip = new JSZip(response);
+      zipFiles = zip.files;
+    } catch (e) {
+    }
+    
+    // Find the Dockerfile in the zip file. If there isn't any zip file, then the response
+    // itself (should) be the Dockerfile.
+    if (zipFiles && Object.keys(zipFiles).length) {
+      // Load the dockerfile contents.
+      var dockerfile = zip.file('Dockerfile');
+      if (dockerfile) {
+        $scope.dockerFileContents = dockerfile.asText();
+      }
+
+      // Build the zip file tree.
+      $scope.tree = new FileTree(Object.keys(zipFiles));
+      $($scope.tree).bind('fileClicked', function(e) {
+        var file = zip.file(e.path);
+        if (file) {
+          var blob = new Blob([file.asArrayBuffer()]);
+          saveAs(blob, file.name);
+        }
+      });      
+    } else {
+      $scope.dockerFileContents = response;
+    }
+
+    $scope.loaded = true;
+  };
+  
+  var downloadBuildPack = function() {
+    $scope.downloadProgress = 0;
+    $scope.downloading = true;
+
+    ApiService.getRepoBuildArchiveUrl(null, params).then(function(resp) {
+      startDownload(resp['url']);
+    }, function() {
+      $scope.downloading = false;
+      $scope.downloadError = true;
+    });
+  };
+
+  var startDownload = function(url) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url, true);
+    if (request.overrideMimeType) {
+      request.overrideMimeType('text/plain; charset=x-user-defined');
+    }
+    request.onprogress = function(e) {
+      $scope.$apply(function() {
+        var percentLoaded;
+        if (e.lengthComputable) {
+          $scope.downloadProgress = (e.loaded / e.total) * 100;
+        }
+      });
+    };
+    request.onerror = function() {
+      $scope.$apply(function() {
+        $scope.downloading = false;
+        $scope.downloadError = true;
+      });
+    };
+    request.onreadystatechange = function() {
+      var state = request.readyState;
+      if (state == 4) {
+        $scope.$apply(function() {
+          $scope.downloading = false;
+          processBuildPack(request.responseText);
+        });
+        return;
+      }
+    };
+    request.send();
+  };
+
+  var getBuildInfo = function() {
+    $scope.repository_build = ApiService.getRepoBuildStatus(null, params, true).then(function(resp) {
+      if (!resp['is_writer']) {
+        $rootScope.title = 'Unknown build';
+        $scope.accessDenied = true;
+        return;
+      }
+      
+      $rootScope.title = 'Repository Build Pack - ' + resp['display_name'];
+      $scope.repobuild = resp;
+      $scope.repo = {
+        'namespace': namespace,
+        'name': name
+      };
+
+      downloadBuildPack();
+      return resp;
+    });
+  };
+
+  getBuildInfo();
+}
+
 function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $interval, $sanitize, ansi2html) {
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
@@ -805,7 +927,7 @@ function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope
   };
 
   $scope.adjustLogHeight = function() {
-    $('.build-logs').height($(window).height() - 385);
+    $('.build-logs').height($(window).height() - 415);
   };
 
   $scope.askRestartBuild = function(build) {

static/partials/build-package.html

@@ -0,0 +1,45 @@
+<div class="resource-view" resource="repository_build" error-message="'No matching repository build found'"></div>
+<div class="container repo repo-build" ng-show="accessDenied">
+  You do not have permission to view this page
+</div>
+<div class="container repo repo-build repo-build-pack" ng-show="repobuild">
+  <div class="header row">
+    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/build' }}" class="back"><i class="fa fa-chevron-left"></i></a>
+    <h3>
+      <span class="repo-circle no-background" repo="repo"></span>
+      <span class="repo-breadcrumb" repo="repo" subsection-icon="'fa-tasks'" subsection="repobuild.display_name"></span>
+    </h3>
+  </div>
+
+  <div class="row" ng-show="downloading">
+    Downloading build pack:
+    <div class="progress" class="active progress-striped">
+      <div class="progress-bar" role="progressbar" aria-valuenow="{{ downloadProgress }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + downloadProgress + '%' }}">
+      </div>
+    </div>
+  </div>
+
+  <div class="row" ng-show="downloadError">
+    Error: Could not download the build pack
+  </div>
+
+  <div class="row" ng-show="loaded">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#dockerfile">Dockerfile</a></li>
+      <li><a href="javascript:void(0)" data-toggle="tab" data-target="#tree" ng-click="initializeTree()" ng-show="tree">All Files</a></li>
+    </ul>
+
+    <div class="tab-content">
+      <!-- Dockerfile view -->
+      <div class="tab-pane active" id="dockerfile">
+        <pre ng-show="dockerFileContents">{{ dockerFileContents }}</pre>
+        <span ng-show="!dockerFileContents">No Dockerfile found in the build pack</span>
+      </div>
+
+      <!-- File tree -->
+      <div class="tab-pane" id="tree">
+        <div id="file-tree-container" class="tree-container" onresize="tree && drawn && tree.notifyResized()"></div>
+      </div>
+    </div>
+  </div>
+</div>

static/partials/repo-build.html

@@ -43,6 +43,12 @@
             <div class="timing">
               <i class="fa fa-clock-o"></i>
               Started: <span am-time-ago="build.started || 0"></span>
+              <span style="display: inline-block; margin-left: 20px" ng-show="currentBuild.resource_key">
+                <i class="fa fa-archive"></i>
+                <a href="/repository/{{ repo.namespace }}/{{ repo.name }}/build/{{ currentBuild.id }}/buildpack"
+                   style="display: inline-block; margin-left: 6px" bs-tooltip="tooltip.title"
+                   title="View the uploaded build package for this build">Build Package</a>
+              </span>
             </div>
             <span class="phase-icon" ng-class="build.phase"></span>
             <span class="build-message" phase="build.phase"></span>