Cleanup display of image commands to be better shared
Also moves the work into a TS component
This commit is contained in:
parent
7f436bb54a
commit
1d60414a23
10 changed files with 41 additions and 51 deletions
|
@ -164,9 +164,7 @@
|
|||
</td>
|
||||
<td class="double-col image-col hidden-xs hidden-sm hidden-md">
|
||||
<span bo-if="feature.imageCommand">
|
||||
<span data-title="{{ feature.imageCommand }}" data-container="body" bs-tooltip>
|
||||
<dockerfile-command command="feature.imageCommand"></dockerfile-command>
|
||||
</span>
|
||||
<image-command command="feature.imageCommand"></image-command>
|
||||
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ feature.imageId }}"><i class="fa fa-archive"></i></a>
|
||||
</span>
|
||||
<span bo-if="!feature.imageCommand">
|
||||
|
|
|
@ -5,9 +5,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="image-command">
|
||||
<div class="nondocker-command" ng-if="!getDockerfileCommand(image.command)">{{ image.command.join(' ') }}</div>
|
||||
<dockerfile-command command="getDockerfileCommand(image.command)"
|
||||
ng-if="getDockerfileCommand(image.command)"></dockerfile-command>
|
||||
<image-command command="image.command"></image-command>
|
||||
</div>
|
||||
<div class="image-layer-dot"></div>
|
||||
<div class="image-layer-line"></div>
|
||||
|
|
|
@ -152,9 +152,7 @@
|
|||
</td>
|
||||
<td class="double-col image-col hidden-xs hidden-sm hidden-md">
|
||||
<span bo-if="vuln.imageCommand">
|
||||
<span data-title="{{ vuln.imageCommand }}" data-container="body" bs-tooltip>
|
||||
<dockerfile-command command="vuln.imageCommand"></dockerfile-command>
|
||||
</span>
|
||||
<image-command command="vuln.imageCommand"></image-command>
|
||||
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ vuln.imageId }}"><i class="fa fa-archive"></i></a>
|
||||
</span>
|
||||
<span bo-if="!vuln.imageCommand">
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
<div class="image-command-element">
|
||||
<div class="nondocker-command" ng-if="!$ctrl.getDockerfileCommand($ctrl.command)">{{ ::$ctrl.command.join(' ') }}</div>
|
||||
<dockerfile-command command="::$ctrl.getDockerfileCommand($ctrl.command)"
|
||||
ng-if="$ctrl.getDockerfileCommand($ctrl.command)"></dockerfile-command>
|
||||
</div>
|
|
@ -0,0 +1,26 @@
|
|||
import { Input, Component, Inject } from 'ng-metadata/core';
|
||||
|
||||
/**
|
||||
* A component which displays an image's command, nicely formatted.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'image-command',
|
||||
templateUrl: '/static/js/directives/ui/image-command/image-command.component.html',
|
||||
})
|
||||
export class ImageCommandComponent {
|
||||
@Input('<') public command: string;
|
||||
|
||||
private getDockerfileCommand(command: string[]): string {
|
||||
if (!command || !command.length) { return ''; }
|
||||
command = command.join(' ').split(' ');
|
||||
|
||||
// ["/bin/sh", "-c", "#(nop)", "RUN", "foo"]
|
||||
if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
|
||||
|
||||
if (command[2].trim() != '#(nop)') {
|
||||
return 'RUN ' + command.slice(2).join(' ');
|
||||
}
|
||||
|
||||
return command.slice(3).join(' ');
|
||||
};
|
||||
}
|
|
@ -13,7 +13,7 @@ angular.module('quay').directive('imageFeatureView', function () {
|
|||
'image': '=image',
|
||||
'isEnabled': '=isEnabled'
|
||||
},
|
||||
controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
|
||||
controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
|
||||
$scope.options = {
|
||||
'filter': null,
|
||||
'predicate': 'fixableScore',
|
||||
|
|
|
@ -13,9 +13,7 @@ angular.module('quay').directive('imageViewLayer', function () {
|
|||
'image': '=image',
|
||||
'images': '=images'
|
||||
},
|
||||
controller: function($scope, $element, ImageMetadataService) {
|
||||
$scope.getDockerfileCommand = ImageMetadataService.getDockerfileCommand;
|
||||
|
||||
controller: function($scope, $element) {
|
||||
$scope.getClass = function() {
|
||||
var index = $.inArray($scope.image, $scope.images);
|
||||
if (index < 0) {
|
||||
|
|
|
@ -13,7 +13,7 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
|
|||
'image': '=image',
|
||||
'isEnabled': '=isEnabled'
|
||||
},
|
||||
controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
|
||||
controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
|
||||
$scope.options = {
|
||||
'filter': null,
|
||||
'fixableVulns': $routeParams['fixable'] == 'true',
|
||||
|
|
|
@ -29,6 +29,7 @@ import { MarkdownViewComponent } from './directives/ui/markdown/markdown-view.co
|
|||
import { MarkdownToolbarComponent } from './directives/ui/markdown/markdown-toolbar.component';
|
||||
import { MarkdownEditorComponent } from './directives/ui/markdown/markdown-editor.component';
|
||||
import { DockerfileCommandComponent } from './directives/ui/dockerfile-command/dockerfile-command.component';
|
||||
import { ImageCommandComponent } from './directives/ui/image-command/image-command.component';
|
||||
import { BrowserPlatform, browserPlatform } from './constants/platform.constant';
|
||||
import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-trigger.component';
|
||||
import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
|
||||
|
@ -68,6 +69,7 @@ import * as Clipboard from 'clipboard';
|
|||
MarkdownEditorComponent,
|
||||
SearchBoxComponent,
|
||||
DockerfileCommandComponent,
|
||||
ImageCommandComponent,
|
||||
TypeaheadDirective,
|
||||
ManageTriggerComponent,
|
||||
ClipboardCopyDirective,
|
||||
|
|
|
@ -1,28 +1,8 @@
|
|||
/**
|
||||
* Helper service for returning information extracted from repository image metadata.
|
||||
*/
|
||||
angular.module('quay').factory('ImageMetadataService', ['UtilService', function(UtilService) {
|
||||
angular.module('quay').factory('ImageMetadataService', [function() {
|
||||
var metadataService = {};
|
||||
metadataService.getFormattedCommand = function(image) {
|
||||
if (!image || !image.command || !image.command.length) {
|
||||
return '';
|
||||
}
|
||||
|
||||
var getCommandStr = function(command) {
|
||||
// Handle /bin/sh commands specially.
|
||||
if (command.length > 2 && command[0] == '/bin/sh' && command[1] == '-c') {
|
||||
return command[2];
|
||||
}
|
||||
|
||||
return command.join(' ');
|
||||
};
|
||||
|
||||
return getCommandStr(image.command);
|
||||
};
|
||||
|
||||
metadataService.getEscapedFormattedCommand = function(image) {
|
||||
return UtilService.textToSafeHtml(metadataService.getFormattedCommand(image));
|
||||
};
|
||||
|
||||
metadataService.getImageCommand = function(image, imageId) {
|
||||
if (!image) {
|
||||
|
@ -44,22 +24,7 @@ angular.module('quay').factory('ImageMetadataService', ['UtilService', function(
|
|||
return null;
|
||||
}
|
||||
|
||||
return metadataService.getDockerfileCommand(found.command);
|
||||
};
|
||||
|
||||
metadataService.getDockerfileCommand = function(command) {
|
||||
if (!command) { return ''; }
|
||||
command = command.join(' ').split(' ');
|
||||
|
||||
// ["/bin/sh", "-c", "#(nop)", "RUN", "foo"]
|
||||
if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
|
||||
|
||||
var commandPrefix = '#(nop)';
|
||||
if (command[2] != commandPrefix) {
|
||||
return 'RUN ' + command.slice(2).join(' ');
|
||||
}
|
||||
|
||||
return command.slice(3).join(' ');
|
||||
return found.command;
|
||||
};
|
||||
|
||||
return metadataService;
|
||||
|
|
Reference in a new issue