Cleanup display of image commands to be better shared

Also moves the work into a TS component
This commit is contained in:
Joseph Schorr 2017-06-23 14:53:02 -04:00
parent 7f436bb54a
commit 1d60414a23
10 changed files with 41 additions and 51 deletions

View file

@ -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">

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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(' ');
};
}

View file

@ -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',

View file

@ -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) {

View file

@ -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',

View file

@ -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,

View file

@ -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;