diff --git a/static/css/directives/ui/image-link.css b/static/css/directives/ui/manifest-link.css similarity index 82% rename from static/css/directives/ui/image-link.css rename to static/css/directives/ui/manifest-link.css index 9e9b38913..6996642c1 100644 --- a/static/css/directives/ui/image-link.css +++ b/static/css/directives/ui/manifest-link.css @@ -1,16 +1,16 @@ -.image-link { +.manifest-link { display: inline-block; white-space: nowrap; width: 120px; } -.image-link a { +.manifest-link a { font-family: Consolas, "Lucida Console", Monaco, monospace; font-size: 12px; text-decoration: none; } -.image-link .id-label { +.manifest-link .id-label { font-size: 10px; cursor: pointer; padding: 2px; @@ -24,6 +24,6 @@ display: inline-block; } -.image-link .id-label.cas { +.manifest-link .id-label.cas { background-color: #e8f1f6; } \ No newline at end of file diff --git a/static/css/directives/ui/repo-tag-history.css b/static/css/directives/ui/repo-tag-history.css index 6731f6af1..68357eb47 100644 --- a/static/css/directives/ui/repo-tag-history.css +++ b/static/css/directives/ui/repo-tag-history.css @@ -252,7 +252,7 @@ background: #F6FCFF; } -.repo-tag-history-element .history-entry .image-link { +.repo-tag-history-element .history-entry .manifest-link { margin-left: 6px; } diff --git a/static/directives/image-feature-view.html b/static/directives/image-feature-view.html index 3ae932275..b4faae903 100644 --- a/static/directives/image-feature-view.html +++ b/static/directives/image-feature-view.html @@ -159,17 +159,14 @@ + log-base="2"> - - - - + (No Command) diff --git a/static/directives/image-link.html b/static/directives/image-link.html deleted file mode 100644 index 88d66add0..000000000 --- a/static/directives/image-link.html +++ /dev/null @@ -1,37 +0,0 @@ - - V1ID - - SHA256 - - - {{ imageId.substr(0, 12) }} - {{ getShortDigest(manifestDigest) }} - - -
-
-
-
- -

Manifest SHA256V1 ID

-
-
-
-
-
- -
-
-
-
- diff --git a/static/directives/image-vulnerability-view.html b/static/directives/image-vulnerability-view.html index 3f127b3cf..1e1977cfa 100644 --- a/static/directives/image-vulnerability-view.html +++ b/static/directives/image-vulnerability-view.html @@ -152,12 +152,9 @@ - - - - - + + (No Command) @@ -181,8 +178,8 @@ - Introduced in Image: - + Introduced in Layer: + {{ ::vuln.imageId }} diff --git a/static/directives/repo-tag-history.html b/static/directives/repo-tag-history.html index 7b4c677d0..7e7d8fa31 100644 --- a/static/directives/repo-tag-history.html +++ b/static/directives/repo-tag-history.html @@ -38,38 +38,38 @@ was recreated pointing to - + manifest-digest="entry.manifest_digest"> was created pointing to - + manifest-digest="entry.manifest_digest"> was deleted was moved to - + manifest-digest="entry.manifest_digest"> from - + manifest-digest="entry.old_manifest_digest"> was reverted to - + manifest-digest="entry.manifest_digest"> from - + manifest-digest="entry.old_manifest_digest"> @@ -87,21 +87,21 @@ Restore {{ entry.tag_name }} to - + manifest-digest="entry.manifest_digest"> Revert {{ entry.tag_name }} to - + manifest-digest="entry.old_manifest_digest"> Restore {{ entry.tag_name }} to - + manifest-digest="entry.old_manifest_digest"> diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html index 450b4f802..32c485386 100644 --- a/static/directives/repo-view/repo-panel-tags.html +++ b/static/directives/repo-view/repo-panel-tags.html @@ -237,9 +237,9 @@ - + - + @@ -293,7 +293,7 @@
- +
diff --git a/static/directives/tag-operations-dialog.html b/static/directives/tag-operations-dialog.html index 12e1b7d21..40a1c6555 100644 --- a/static/directives/tag-operations-dialog.html +++ b/static/directives/tag-operations-dialog.html @@ -162,9 +162,9 @@ Are you sure you want to restore tag {{ restoreTagInfo.tag.name }} to image - ? + ? diff --git a/static/js/directives/ui/image-link.js b/static/js/directives/ui/image-link.js deleted file mode 100644 index 9f8d9fb53..000000000 --- a/static/js/directives/ui/image-link.js +++ /dev/null @@ -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; -}); \ No newline at end of file diff --git a/static/js/directives/ui/manifest-link/manifest-link.component.html b/static/js/directives/ui/manifest-link/manifest-link.component.html new file mode 100644 index 000000000..1b9425aee --- /dev/null +++ b/static/js/directives/ui/manifest-link/manifest-link.component.html @@ -0,0 +1,37 @@ + + V1ID + + SHA256 + + + {{ $ctrl.imageId.substr(0, 12) }} + {{ $ctrl.getShortDigest($ctrl.manifestDigest) }} + + +
+
+
+
+ +

Manifest SHA256V1 ID

+
+
+
+
+
+ +
+
+
+
+ diff --git a/static/js/directives/ui/manifest-link/manifest-link.component.ts b/static/js/directives/ui/manifest-link/manifest-link.component.ts new file mode 100644 index 000000000..fbdfc3b01 --- /dev/null +++ b/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); + }; +} diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index 682169e8a..d17c399bc 100644 --- a/static/js/quay.module.ts +++ b/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,