Merge pull request #2898 from coreos-inc/joseph.schorr/QS-43/sha-copy

Fetch and copy manifest SHA

static/directives/image-link.html

@@ -1,17 +1,37 @@
 <span>
-    <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
-       class="image-link-element" bindonce>
   <span class="id-label" ng-if="!hasSHA256(manifestDigest)"
         data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
         data-container="body"
+        ng-click="showCopyBox()"
         bs-tooltip>V1ID</span>
 
   <span class="id-label cas" ng-if="hasSHA256(manifestDigest)"
         data-title="The content-addressable SHA256 hash of this tag."
         data-container="body"
+        ng-click="showCopyBox()"
         bs-tooltip>SHA256</span>
 
+  <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
+     class="image-link-element" bindonce>
     <span ng-if="!hasSHA256(manifestDigest)">{{ imageId.substr(0, 12) }}</span>
     <span ng-if="hasSHA256(manifestDigest)">{{ getShortDigest(manifestDigest) }}</span>
   </a>
+
+  <div class="modal fade co-dialog" ng-if="showingCopyBox">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" ng-click="hideCopyBox()"
+                  aria-hidden="true">&times;</button>
+          <h4 class="modal-title"><span ng-if="hasSHA256(manifestDigest)">Manifest SHA256</span><span ng-if="!hasSHA256(manifestDigest)">V1 ID</span></h4>
+        </div>
+        <div class="modal-body">
+          <div class="copy-box" hovering-message="true" value="hasSHA256(manifestDigest) ? manifestDigest : imageId"></div>            
+        </div>
+        <div class="modal-footer" ng-show="!working">
+          <button type="button" class="btn btn-default" ng-click="hideCopyBox()">Close</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
 </span>

static/js/directives/ui/fetch-tag-dialog.js

@@ -25,6 +25,20 @@ angular.module('quay').directive('fetchTagDialog', function () {
       var updateFormats = function() {
         $scope.formats = [];
 
+        $scope.formats.push({
+          'title': 'Docker Pull (by tag)',
+          'icon': 'docker-icon',
+          'command': 'docker pull {hostname}/{namespace}/{name}:{tag}'
+        });
+
+        if ($scope.currentTag && $scope.currentTag.manifest_digest) {          
+          $scope.formats.push({
+            'title': 'Docker Pull (by digest)',
+            'icon': 'docker-icon',
+            'command': 'docker pull {hostname}/{namespace}/{name}@{manifest_digest}'
+          });
+        }
+
         if ($scope.repository) {
           $scope.formats.push({
             'title': 'Squashed Docker Image',
@@ -37,17 +51,11 @@ angular.module('quay').directive('fetchTagDialog', function () {
 
         if (Features.ACI_CONVERSION) {
           $scope.formats.push({
-            'title': 'Rocket Fetch',
+            'title': 'rkt Fetch',
             'icon': 'rocket-icon',
             'command': 'rkt fetch {hostname}/{namespace}/{name}:{tag}'
           });
         }
-
-        $scope.formats.push({
-          'title': 'Basic Docker Pull',
-          'icon': 'docker-icon',
-          'command': 'docker pull {hostname}/{namespace}/{name}:{tag}'
-        });
       };
 
       $scope.$watch('currentEntity', function(entity) {
@@ -97,7 +105,8 @@ angular.module('quay').directive('fetchTagDialog', function () {
           'http': Config.getHttp(),
           'namespace': $scope.repository.namespace,
           'name': $scope.repository.name,
-          'tag': $scope.currentTag.name
+          'tag': $scope.currentTag.name,
+          'manifest_digest': $scope.currentTag.manifest_digest
         };
 
         var value = format.command;

static/js/directives/ui/image-link.js

@@ -13,7 +13,9 @@ angular.module('quay').directive('imageLink', function () {
       'imageId': '=imageId',
       'manifestDigest': '=?manifestDigest'
     },
-    controller: function($scope, $element) {
+    controller: function($scope, $element, $timeout) {
+      $scope.showingCopyBox = false;
+
       $scope.hasSHA256 = function(digest) {
         return digest && digest.indexOf('sha256:') == 0;
       };
@@ -21,6 +23,24 @@ angular.module('quay').directive('imageLink', function () {
       $scope.getShortDigest = function(digest) {
         return digest.substr('sha256:'.length).substr(0, 12);
       };
+
+      $scope.showCopyBox = function() {
+        $scope.showingCopyBox = true;
+
+        // Necessary to wait for digest cycle to complete.
+        $timeout(function() {
+          $element.find('.modal').modal('show');
+        }, 10);        
+      };
+
+      $scope.hideCopyBox = function() {
+        $element.find('.modal').modal('hide');
+
+        // Wait for the modal to hide before removing from the DOM.
+        $timeout(function() {
+          $scope.showingCopyBox = false;
+        }, 10);
+      };
     }
   };
   return directiveDefinitionObject;