From 09e9b5cb53d2a3838dddf8e0402bd548a08d5407 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 23 Jun 2017 16:00:22 -0400
Subject: [PATCH] Add support for multi-step phase delimitation in build logs
 view

---
 .../css/directives/ui/build-log-command.css   | 16 ++++++++++++
 static/css/directives/ui/build-logs-view.css  | 11 +++-----
 static/directives/build-log-command.html      |  5 +++-
 static/js/directives/ui/build-log-command.js  | 25 ++++++++++++++++++-
 4 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 static/css/directives/ui/build-log-command.css

diff --git a/static/css/directives/ui/build-log-command.css b/static/css/directives/ui/build-log-command.css
new file mode 100644
index 000000000..ebb5abd4c
--- /dev/null
+++ b/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;
+}
diff --git a/static/css/directives/ui/build-logs-view.css b/static/css/directives/ui/build-logs-view.css
index e4da34a65..92c352872 100644
--- a/static/css/directives/ui/build-logs-view.css
+++ b/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;
-  top: 4px;
-  left: 24px;
+  position: relative;
 }
 
 .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;
 }
diff --git a/static/directives/build-log-command.html b/static/directives/build-log-command.html
index 678fea6ab..fda7c9ee8 100644
--- a/static/directives/build-log-command.html
+++ b/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>
diff --git a/static/js/directives/ui/build-log-command.js b/static/js/directives/ui/build-log-command.js
index 68300cda8..acc219b05 100644
--- a/static/js/directives/ui/build-log-command.js
+++ b/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;