Rename image-link into manifest-link, and change to typescript, in prep for the UI changes to link to manifests

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

@@ -1,47 +0,0 @@
-/**
- * An element which displays a link to a repository image.
- */
-angular.module('quay').directive('imageLink', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/image-link.html',
-    replace: false,
-    transclude: true,
-    restrict: 'C',
-    scope: {
-      'repository': '=repository',
-      'imageId': '=imageId',
-      'manifestDigest': '=?manifestDigest'
-    },
-    controller: function($scope, $element, $timeout) {
-      $scope.showingCopyBox = false;
-
-      $scope.hasSHA256 = function(digest) {
-        return digest && digest.indexOf('sha256:') == 0;
-      };
-
-      $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;
-});

static/js/directives/ui/manifest-link/manifest-link.component.html

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

static/js/directives/ui/manifest-link/manifest-link.component.ts

@@ -0,0 +1,48 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import { Repository } from '../../../types/common.types';
+
+
+/**
+ * A component that links to a manifest view.
+ */
+@Component({
+  selector: 'manifest-link',
+  templateUrl: '/static/js/directives/ui/manifest-link/manifest-link.component.html'
+})
+export class ManifestLinkComponent {
+
+  @Input('<') public repository: Repository;
+  @Input('<') public manifestDigest: string;
+  @Input('<') public imageId: string;
+
+  private showingCopyBox: boolean = false;
+
+  constructor(@Inject('$timeout') private $timeout, @Inject('$element') private $element) {
+  }
+
+  private hasSHA256(digest: string) {
+    return digest && digest.indexOf('sha256:') == 0;
+  }
+
+  private getShortDigest(digest: string) {
+    return digest.substr('sha256:'.length).substr(0, 12);
+  }
+
+  private showCopyBox() {
+    this.showingCopyBox = true;
+
+    // Necessary to wait for digest cycle to complete.
+    this.$timeout(() => {
+      this.$element.find('.modal').modal('show');
+    }, 10);
+  };
+
+  private hideCopyBox() {
+    this.$element.find('.modal').modal('hide');
+
+    // Wait for the modal to hide before removing from the DOM.
+    this.$timeout(() => {
+      this.showingCopyBox = false;
+    }, 10);
+  };
+}

static/js/quay.module.ts

@@ -40,6 +40,7 @@ import { TriggerDescriptionComponent } from './directives/ui/trigger-description
 import { TimeAgoComponent } from './directives/ui/time-ago/time-ago.component';
 import { TimeDisplayComponent } from './directives/ui/time-display/time-display.component';
 import { AppSpecificTokenManagerComponent } from './directives/ui/app-specific-token-manager/app-specific-token-manager.component';
+import { ManifestLinkComponent } from './directives/ui/manifest-link/manifest-link.component';
 import { MarkdownModule } from './directives/ui/markdown/markdown.module';
 import * as Clipboard from 'clipboard';
 
@@ -85,6 +86,7 @@ import * as Clipboard from 'clipboard';
     TimeAgoComponent,
     TimeDisplayComponent,
     AppSpecificTokenManagerComponent,
+    ManifestLinkComponent,
   ],
   providers: [
     ViewArrayImpl,