From e0a1e05c52edd3722e77f38b15fa090b4d1efeb3 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 23 Jun 2017 16:04:05 -0400
Subject: [PATCH] Fix Dockerfile command view for `FROM` with `as` clause

---
 .../ui/dockerfile-command/dockerfile-command.component.css | 7 ++++++-
 .../ui/dockerfile-command/dockerfile-command.component.ts  | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/js/directives/ui/dockerfile-command/dockerfile-command.component.css b/static/js/directives/ui/dockerfile-command/dockerfile-command.component.css
index 9532320dd..89ce18853 100644
--- a/static/js/directives/ui/dockerfile-command/dockerfile-command.component.css
+++ b/static/js/directives/ui/dockerfile-command/dockerfile-command.component.css
@@ -31,11 +31,16 @@
 }
 
 .dockerfile-command .command-title {
-  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  font-family: Consolas, "Lucida Console", Monaco, monospace !important;
   padding-left: 90px;
   display: inline-block;
 }
 
+.dockerfile-command .command-title a {
+  color: #5bc0de;
+  font-size: 15px;
+}
+
 .dockerfile-command .label {
   color: white;
 
diff --git a/static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts b/static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts
index 2e10bade7..5a77f60d0 100644
--- a/static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts
+++ b/static/js/directives/ui/dockerfile-command/dockerfile-command.component.ts
@@ -44,13 +44,14 @@ export class DockerfileCommandComponent {
 
     var kindHandlers = {
       'FROM': (command) => {
-        var pieces = command.split('/');
+        var parts = command.split(' ');
+        var pieces = parts[0].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>';
+        return '<a href="' + this.registryHandlers[registry](pieces) + '" target="_blank">' + parts[0] + '</a> ' + (parts.splice(1).join(' '));
       }
     };