initial import for Open Source 🎉

static/js/directives/ui/dockerfile-command/dockerfile-command.component.css

@@ -0,0 +1,60 @@
+.label.FROM {
+  border-color: #5bc0de !important;
+}
+
+.label.ARG {
+  border-color: #eaef4d !important;
+}
+
+.label.ONBUILD {
+  border-color: #6813d8 !important;
+}
+
+.label.CMD, .label.EXPOSE, .label.ENTRYPOINT {
+  border-color: #428bca !important;
+}
+
+.label.RUN, .label.ADD, .label.COPY {
+  border-color: #5cb85c !important;
+}
+
+.label.ENV, .label.VOLUME, .label.USER, .label.WORKDIR, .label.HEALTHCHECK, .label.STOPSIGNAL, .label.SHELL {
+  border-color: #f0ad4e !important;
+}
+
+.label.MAINTAINER {
+  border-color: #aaa !important;
+}
+
+.dockerfile-command {
+  display: block;
+  position: relative;
+  padding-left: 96px;
+}
+
+.dockerfile-command .command-title {
+  font-family: Consolas, "Lucida Console", Monaco, monospace !important;
+  display: inline-block;
+}
+
+.dockerfile-command .command-title a {
+  color: #5bc0de;
+  font-size: 15px;
+}
+
+.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: 2px;
+  left: 0px;
+}

static/js/directives/ui/dockerfile-command/dockerfile-command.component.html

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

static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts

@@ -0,0 +1,75 @@
+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 {
+    command = command.trim();
+    if (!command) { return ''; }
+
+    var space = command.indexOf(' ');
+    return command.substring(0, space);
+  }
+
+  private getCommandTitleHtml(command: string): string {
+    command = command.trim();
+    if (!command) { return ''; }
+
+    var kindHandlers = {
+      'FROM': (command) => {
+        var parts = command.split(' ');
+        var pieces = parts[0].split('/');
+        var registry = pieces.length < 3 ? '' : pieces[0];
+        if (!this.registryHandlers[registry]) {
+          return command;
+        }
+
+        return '<a href="' + this.registryHandlers[registry](pieces) + '" target="_blank">' + parts[0] + '</a> ' + (parts.splice(1).join(' '));
+      }
+    };
+
+    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;
+    }
+  }
+}