vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Move DockerfileCommand component into TS

Browse source
This commit is contained in:
Joseph Schorr 2017-06-23 14:22:28 -04:00
parent 255bebcc92
commit 62d7cb234c
11 changed files with 113 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
static/css/quay.css
View file

@ -222,33 +222,6 @@
font-size: 18px;
}
.dockerfile-command {
position: relative;
}
.dockerfile-command .command-title {
font-family: Consolas, "Lucida Console", Monaco, monospace;
padding-left: 90px;
display: inline-block;
}
.dockerfile-command .label {
color: white;
padding-top: 4px;
text-align: right;
margin-right: 4px;
width: 86px;
display: inline-block;
border-right: 4px solid #aaa;
background-color: #333;
position: absolute;
top: 0px;
left: -4px;
}
.codetooltipcontainer .tooltip-inner {
white-space:pre;
max-width:none;

2
static/directives/build-log-command.html
View file

@ -1 +1 @@
<span class="dockerfile-command command" command="getWithoutStep(command.message)"></span>
<dockerfile-command class="command" command="getWithoutStep(command.message)"></dockerfile-command>

6
static/directives/dockerfile-command.html
View file

@ -1,6 +0,0 @@
<span class="dockerfile-command-element" bindonce>
<span class="label" bo-class="getCommandKind(command)" bo-show="getCommandKind(command)"
bo-text="getCommandKind(command)">
</span>
<span class="command-title" bo-html="getCommandTitleHtml(command)"></span>
</span>

2
static/directives/image-feature-view.html
View file

@ -165,7 +165,7 @@
<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>
<span class="dockerfile-command" command="feature.imageCommand"></span>
<dockerfile-command command="feature.imageCommand"></dockerfile-command>
</span>
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ feature.imageId }}"><i class="fa fa-archive"></i></a>
</span>

4
static/directives/image-view-layer.html
View file

@ -6,8 +6,8 @@
</div>
<div class="image-command">
<div class="nondocker-command" ng-if="!getDockerfileCommand(image.command)">{{ image.command.join(' ') }}</div>
<div class="dockerfile-command" command="getDockerfileCommand(image.command)"
ng-if="getDockerfileCommand(image.command)"></div>
<dockerfile-command command="getDockerfileCommand(image.command)"
ng-if="getDockerfileCommand(image.command)"></dockerfile-command>
</div>
<div class="image-layer-dot"></div>
<div class="image-layer-line"></div>

2
static/directives/image-vulnerability-view.html
View file

@ -153,7 +153,7 @@
<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>
<span class="dockerfile-command" command="vuln.imageCommand"></span>
<dockerfile-command command="vuln.imageCommand"></dockerfile-command>
</span>
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ vuln.imageId }}"><i class="fa fa-archive"></i></a>
</span>

68
static/js/directives/ui/dockerfile-command.js
View file

@ -1,68 +0,0 @@
/**
* An element which displays a Dockerfile command nicely formatted, with optional link to the
* image (for FROM commands that link to us or to the DockerHub).
*/
angular.module('quay').directive('dockerfileCommand', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/dockerfile-command.html',
replace: false,
transclude: false,
restrict: 'C',
scope: {
'command': '=command'
},
controller: function($scope, $element, UtilService, Config) {
var registryHandlers = {
'quay.io': function(pieces) {
var rnamespace = pieces[pieces.length - 2];
var rname = pieces[pieces.length - 1].split(':')[0];
return '/repository/' + rnamespace + '/' + rname + '/';
},
'': function(pieces) {
var rnamespace = pieces.length == 1 ? '_' : 'u/' + pieces[0];
var rname = pieces[pieces.length - 1].split(':')[0];
return 'https://registry.hub.docker.com/' + rnamespace + '/' + rname + '/';
}
};
registryHandlers[Config.getDomain()] = registryHandlers['quay.io'];
var kindHandlers = {
'FROM': function(title) {
var pieces = title.split('/');
var registry = pieces.length < 3 ? '' : pieces[0];
if (!registryHandlers[registry]) {
return title;
}
return '<i class="fa fa-hdd-o"></i> <a href="' + registryHandlers[registry](pieces) + '" target="_blank">' + title + '</a>';
}
};
$scope.getCommandKind = function(title) {
var space = title.indexOf(' ');
return title.substring(0, space);
};
$scope.getCommandTitleHtml = function(title) {
var space = title.indexOf(' ');
if (space <= 0) {
return UtilService.textToSafeHtml(title);
}
var kind = $scope.getCommandKind(title);
var sanitized = UtilService.textToSafeHtml(title.substring(space + 1));
var handler = kindHandlers[kind || ''];
if (handler) {
return handler(sanitized);
} else {
return sanitized;
}
};
}
};
return directiveDefinitionObject;
});

27
static/css/directives/ui/dockerfile-command.css → static/js/directives/ui/dockerfile-command/dockerfile-command.component.css
View file

@ -25,3 +25,30 @@
.label.MAINTAINER {
border-color: #aaa !important;
}
.dockerfile-command {
position: relative;
}
.dockerfile-command .command-title {
font-family: Consolas, "Lucida Console", Monaco, monospace;
padding-left: 90px;
display: inline-block;
}
.dockerfile-command .label {
color: white;
padding-top: 4px;
text-align: right;
margin-right: 4px;
width: 86px;
display: inline-block;
border-right: 4px solid #aaa;
background-color: #333;
position: absolute;
top: 0px;
left: -4px;
}

7
static/js/directives/ui/dockerfile-command/dockerfile-command.component.html Normal file
View file

@ -0,0 +1,7 @@
<span class="dockerfile-command dockerfile-command-element">
<span class="label" ng-class="::$ctrl.getCommandKind($ctrl.command)"
ng-if="::$ctrl.getCommandKind($ctrl.command)">
{{ ::$ctrl.getCommandKind($ctrl.command) }}
</span>
<span class="command-title" ng-bind-html="::$ctrl.getCommandTitleHtml($ctrl.command)"></span>
</span>

72
static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts Normal file
View file

@ -0,0 +1,72 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import './dockerfile-command.component.css';
/**
* A component which displays a Dockerfile command, nicely formatted.
*/
@Component({
selector: 'dockerfile-command',
templateUrl: '/static/js/directives/ui/dockerfile-command/dockerfile-command.component.html',
})
export class DockerfileCommandComponent {
@Input('<') public command: string;
private registryHandlers: {[domain: string]: Function};
constructor (@Inject('Config') Config: any, @Inject('UtilService') private utilService: any) {
var registryHandlers = {
'quay.io': function(pieces) {
var rnamespace = pieces[pieces.length - 2];
var rname = pieces[pieces.length - 1].split(':')[0];
return '/repository/' + rnamespace + '/' + rname + '/';
},
'': function(pieces) {
var rnamespace = pieces.length == 1 ? '_' : 'u/' + pieces[0];
var rname = pieces[pieces.length - 1].split(':')[0];
return 'https://registry.hub.docker.com/' + rnamespace + '/' + rname + '/';
}
};
registryHandlers[Config.getDomain()] = registryHandlers['quay.io'];
this.registryHandlers = registryHandlers;
}
private getCommandKind(command: string): string {
if (!command) { return ''; }
var space = command.indexOf(' ');
return command.substring(0, space);
}
private getCommandTitleHtml(command: string): string {
if (!command) { return ''; }
var kindHandlers = {
'FROM': (command) => {
var pieces = command.split('/');
var registry = pieces.length < 3 ? '' : pieces[0];
if (!this.registryHandlers[registry]) {
return command;
}
return '<i class="fa fa-hdd-o"></i> <a href="' + this.registryHandlers[registry](pieces) + '" target="_blank">' + command + '</a>';
}
};
var space = command.indexOf(' ');
if (space <= 0) {
return this.utilService.textToSafeHtml(command);
}
var kind = this.getCommandKind(command);
var sanitized = this.utilService.textToSafeHtml(command.substring(space + 1));
var handler = kindHandlers[kind || ''];
if (handler) {
return handler(sanitized);
} else {
return sanitized;
}
}
}

2
static/js/quay.module.ts
View file

@ -28,6 +28,7 @@ import { MarkdownInputComponent } from './directives/ui/markdown/markdown-input.
import { MarkdownViewComponent } from './directives/ui/markdown/markdown-view.component';
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 { 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';
@ -66,6 +67,7 @@ import * as Clipboard from 'clipboard';
MarkdownToolbarComponent,
MarkdownEditorComponent,
SearchBoxComponent,
DockerfileCommandComponent,
TypeaheadDirective,
ManageTriggerComponent,
ClipboardCopyDirective,