Add support for multi-step phase delimitation in build logs view

static/css/directives/ui/build-log-command.css

@@ -0,0 +1,16 @@
+.build-log-command-element.multistep-seperator {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #666;
+}
+
+.build-log-command-element .from-name {
+    position: absolute;
+    top: 3px;
+    left: 22px;
+    background-color: #263945;
+    display: inline-block;
+    color: #aaa;
+    font-size: 12px;
+    padding-right: 10px;
+}

static/css/directives/ui/build-logs-view.css

@@ -87,16 +87,15 @@
 .build-logs-view .container-header .label {
   padding-top: 4px;
   text-align: right;
-  margin-right: 4px;
+  margin-left: 2px;
+  margin-right: 10px;
   width: 86px;
   display: inline-block;
 
   border-right: 4px solid #aaa;
   background-color: #717171;
 
-  position: absolute;
+  position: relative;
-  top: 4px;
-  left: 24px;
 }
 
 .build-logs-view .dockerfile-command {
@@ -112,10 +111,6 @@
   padding-left: 20px;
 }
 
-.build-logs-view .container-header .container-content.build-log-command {
-  padding-left: 120px;
-}
-
 .build-logs-view .log-entry {
   position: relative;
 }

static/directives/build-log-command.html

@@ -1 +1,4 @@
-<dockerfile-command class="command" command="getWithoutStep(command.message)"></dockerfile-command>
+<div class="build-log-command-element" ng-class="::{'multistep-seperator': !!isSecondaryFrom(command.message) || fromName(command.message)}">
+    <span class="from-name" ng-if="::!!fromName(command.message)">{{ ::fromName(command.message) }}</span>
+    <dockerfile-command class="command" command="getWithoutStep(command.message)"></dockerfile-command>
+</div>

static/js/directives/ui/build-log-command.js

@@ -9,7 +9,7 @@ angular.module('quay').directive('buildLogCommand', function () {
     transclude: false,
     restrict: 'C',
     scope: {
-      'command': '=command'
+      'command': '<command'
     },
     controller: function($scope, $element) {
       $scope.getWithoutStep = function(fullTitle) {
@@ -20,6 +20,29 @@ angular.module('quay').directive('buildLogCommand', function () {
 
         return $.trim(fullTitle.substring(colon + 1));
       };
+
+      $scope.isSecondaryFrom = function(fullTitle) {
+        if (!fullTitle) { return false; }
+
+        var command = $scope.getWithoutStep(fullTitle);
+        return command.indexOf('FROM ') == 0 && fullTitle.indexOf('Step 1 ') < 0;
+      };
+
+      $scope.fromName = function(fullTitle) {
+        var command = $scope.getWithoutStep(fullTitle);
+        if (command.indexOf('FROM ') != 0) {
+          return null;
+        }
+
+        var parts = command.split(' ');
+        for (var i = 0; i < parts.length - 1; i++) {
+          var part = parts[i];
+          if ($.trim(part) == 'as') {
+            return parts[i + 1];
+          }
+        }
+        return null;
+      }
     }
   };
   return directiveDefinitionObject;