Update Manifest query to handle both schema versions

The Manifest API will return information about the image or tag. This information
is stored in a schema, that schema has two versions. For older Docker clients/
registries the v1 schema is returned by default; however, newer registries
can return either v1 or v2. The API requires that you set a header to tell
it which schema version you want.

PR kwk#101 added the use of the Manifest API so we can show the Dockerfile, and
size, and labels, etc. It is setting the header of the request so that we
get the v2 version of the schema however it is parsing/expecting the V1
version of the schema. If we are using an older registry (i.e. 2.1.1) then
this works because the header is ignored and only the V1 is returned; however,
if using a newer version (i.e. 2.6.2) the v2 schema would be returned and
not parsed correctly.

PR kwk#168 modifies the use of the Manifest API so that it _does_ parse/expect
the V2 schema; however, that means that the app will no longer work in
older registries (or for images pushed by older clients) as it no longer
supportes the V1 schema.

This change set merged these two PRs together by checking the content type
header in the response to figure out which version the registry returned.
It then parses the payload depending on the schema version. With this change
the user gets a very similar experance regardless of the manifest schema version
being returned.

Note: There is likly room for performance improvments here, I plan on a larger
refactor and will like to address the ineffeciencies their

Author: Brad van der Laan

app/image/image-controller.js

@@ -13,24 +13,41 @@ angular.module('image-controller', ['registry-services', 'app-mode-services'])
 
 
     $scope.appMode = AppMode.query();
-    $scope.totalImageSize = 0;
-    $scope.imageDetails = Manifest.query({repository: $scope.repository, tagName: $scope.tagName});
+    Manifest.query({repository: $scope.repository, tagName: $scope.tagName})
+      .$promise.then(function(data) {
+        $scope.imageDetails = angular.copy(data);
+
+        return !data.isSchemaV2
+          ? undefined
+          : Blob.query({repository: $scope.repository, digest: 'sha256:'+data.id})
+            .$promise.then(function(config) {
+              $scope.imageDetails.created = config.created;
+              $scope.imageDetails.docker_version = config.docker_version;
+              $scope.imageDetails.os = config.os;
+              $scope.imageDetails.architecture = config.architecture;
+              $scope.imageDetails.labels = config.container_config && config.container_config.Labels;
+              $scope.imageDetails.dockerfile = config.dockerfile;
+              $scope.imageDetails.layers = config.dockerfile.length;
+
+              $scope.totalImageSize = $scope.imageDetails.size;
+            });
+      });
 
 
 
     /**
      * Calculates the total download size for the image based on
      * it's layers.
      */
-    $scope.totalImageSize = null;
     $scope.calculateTotalImageSize = function() {
       $scope.totalImageSize = 0;
       angular.forEach($scope.imageDetails.fsLayers, function (id, key) {
-        Blob.query({repository: $scope.repository, digest: id.blobSum}).$promise.then(function(data){
-          if(!isNaN(data.contentLength-0)){
-            $scope.totalImageSize += data.contentLength;
-          }
-        });
+        Blob.querySize({repository: $scope.repository, digest: id.blobSum})
+          .$promise.then(function(data){
+            if(!isNaN(data.contentLength-0)){
+              $scope.totalImageSize += data.contentLength;
+            }
+          });
       });
     };
   }]);

app/image/image-details-directive.html

@@ -14,21 +14,21 @@ <h2>
       General information
     </tab-heading>
     <form class="form-horizontal"  role="form">
-      <div class="form-group">
+      <div class="form-group" ng-show="imageDetails.labels.maintainer || imageDetails.author">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-user"></span> Author</label>
         <div class="col-sm-10">
           <p class="form-control-static">{{imageDetails.labels.maintainer || imageDetails.author}}</p>
         </div>
       </div>
-      <div class="form-group" ng-if="imageDetails.comment">
+      <div class="form-group" ng-show="imageDetails.comment">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-comment"></span> Comment</label>
         <div class="col-sm-10">
           <p class="form-control-static">
             <pre>{{imageDetails.comment}}</pre>
           </p>
         </div>
       </div>
-      <div class="form-group" >
+      <div class="form-group" ng-show="imageDetails.created" >
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-calendar"></span> Created</label>
         <div class="col-sm-10">
           <p class="form-control-static">
@@ -37,25 +37,25 @@ <h2>
           </p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="form-group" ng-show="imageDetails.layers">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-align-justify"></span> Layers</label>
         <div class="col-sm-10">
           <p class="form-control-static">{{imageDetails.layers}}</p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="form-group" ng-show="imageDetails.docker_version">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-eye-open"></span> Docker version</label>
         <div class="col-sm-10">
           <p class="form-control-static">{{imageDetails.docker_version}}</p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="form-group" ng-show="imageDetails.os || imageDetails.architecture">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-cog"></span> OS</label>
         <div class="col-sm-10">
           <p class="form-control-static">{{imageDetails.os}}/{{imageDetails.architecture}}</p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="form-group" ng-show="imageDetails.id">
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-qrcode"></span> ID</label>
         <div class="col-sm-10">
           <p class="form-control-static">
@@ -75,10 +75,10 @@ <h2>
         <label class="col-sm-2 control-label"><span class="glyphicon glyphicon-compressed"></span> Size <small>(including base image sizes)</small></label>
         <div class="col-sm-10">
           <p class="form-control-static">
-            <span ng-show="totalImageSize!==null">
+            <span ng-show="totalImageSize!==undefined">
               {{totalImageSize/1024/1024 | number: 2}} <b>MB</b>
             </span>
-            <button type="submit" class="btn btn-info" ng-click="calculateTotalImageSize()" ng-show="totalImageSize===null">
+            <button type="submit" class="btn btn-info" ng-click="calculateTotalImageSize()" ng-show="totalImageSize===undefined">
               <span class="glyphicon glyphicon-stats"></span> Calculate
             </button>
           </p>