From eeb4ffa5df2443a7b1ab9d9259249b8bbef16e6a Mon Sep 17 00:00:00 2001
From: Jessica Forrester <jforrest@redhat.com>
Date: Mon, 5 Dec 2016 15:36:04 -0500
Subject: [PATCH] Show build status message when it exists

Implements https://trello.com/c/Of6LXNUi
---
 app/scripts/filters/date.js          |  8 ++++++--
 app/views/browse/_build-details.html |  3 ++-
 app/views/browse/build-config.html   | 10 ++++++++--
 app/views/browse/build.html          |  1 -
 app/views/builds.html                | 10 +++++++++-
 dist/scripts/scripts.js              |  8 +++++---
 dist/scripts/templates.js            | 24 +++++++++++++++++++-----
 7 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/app/scripts/filters/date.js b/app/scripts/filters/date.js
index 28b5b00a94..7a3bb08c68 100644
--- a/app/scripts/filters/date.js
+++ b/app/scripts/filters/date.js
@@ -10,6 +10,10 @@ angular.module('openshiftConsole')
       timestampRhs = timestampRhs || new Date(); // moment expects either an ISO format string or a Date object
 
       var ms = moment(timestampRhs).diff(timestampLhs);
+      if (ms < 0) {
+        // Don't show negative durations
+        ms = 0;
+      }
       var duration = moment.duration(ms);
       // the out of the box humanize in moment.js rounds to the nearest time unit
       // but we need more details
@@ -30,7 +34,7 @@ angular.module('openshiftConsole')
           if (omitSingle) {
             humanizedDuration.push(singularText);
           } else {
-            humanizedDuration.push("one " + singularText);
+            humanizedDuration.push("1 " + singularText);
           }
 
           return;
@@ -54,7 +58,7 @@ angular.module('openshiftConsole')
           return "minute";
         }
 
-        return "one minute";
+        return "1 minute";
       }
 
       if (humanizedDuration.length === 0) {
diff --git a/app/views/browse/_build-details.html b/app/views/browse/_build-details.html
index 9a767e8e14..316c8d433c 100644
--- a/app/views/browse/_build-details.html
+++ b/app/views/browse/_build-details.html
@@ -6,7 +6,8 @@ <h3>Status</h3>
         <dt>Status:</dt>
         <dd>
           <status-icon status="build.status.phase"></status-icon>
-          {{build.status.phase}}
+          <span ng-if="!build.status.message || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
+          <span ng-if="build.status.message && build.status.phase !== 'Cancelled'">{{build.status.message}}</span>
           <span ng-if="build | jenkinsLogURL">
             <span class="text-muted">&ndash;</span>
             <a ng-href="{{build | jenkinsLogURL}}" target="_blank">View Log</a>
diff --git a/app/views/browse/build-config.html b/app/views/browse/build-config.html
index d8275a3e17..95f9b965c9 100644
--- a/app/views/browse/build-config.html
+++ b/app/views/browse/build-config.html
@@ -181,6 +181,7 @@ <h2>No builds.</h2>
                           <tr>
                             <th>Build</th>
                             <th>Status</th>
+                            <th>Duration</th>
                             <th>Created</th>
                           </tr>
                         </thead>
@@ -197,13 +198,18 @@ <h2>No builds.</h2>
                               <span ng-if="!(build | annotation : 'buildNumber')">
                                 <a ng-href="{{build | navigateResourceURL}}">{{build.metadata.name}}</a>
                               </span>
-                              <span ng-if="build.status.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{build.status.message}}"></span>
                             </td>
                             <td data-title="Status">
                               <div row class="status">
-                                <build-status build="build"></build-status>
+                                <status-icon status="build.status.phase" disable-animation fixed-width="true"></status-icon>
+                                <span ng-if="build.status.phase ==='Failed'">{{(build.status.reason || build.status.phase) | sentenceCase}}</span>
+                                <span ng-if="build.status.phase !== 'Failed'">{{build.status.phase | sentenceCase}}</span>
                               </div>
                             </td>
+                            <td data-title="Duration">
+                              <duration-until-now ng-if="build.status.startTimestamp && !build.status.completionTimestamp" timestamp="build.status.startTimestamp" time-only></duration-until-now>
+                              <span ng-if="build.status.startTimestamp && build.status.completionTimestamp">{{build.status.startTimestamp | duration : build.status.completionTimestamp}}</span>
+                            </td>
                             <td data-title="Created">
                               <span am-time-ago="build.metadata.creationTimestamp"></span>
                             </td>
diff --git a/app/views/browse/build.html b/app/views/browse/build.html
index a4d7833991..5e98ff5f1c 100644
--- a/app/views/browse/build.html
+++ b/app/views/browse/build.html
@@ -12,7 +12,6 @@
             <div ng-if="build">
               <h1>
                 {{build.metadata.name}}
-                <span ng-if="build.status.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{build.status.message}}"></span>
                 <span class="pficon pficon-warning-triangle-o"
                       ng-if="buildConfigPaused || buildConfigDeleted"
                       aria-hidden="true"
diff --git a/app/views/builds.html b/app/views/builds.html
index 25540fc301..e8e4fd2f42 100644
--- a/app/views/builds.html
+++ b/app/views/builds.html
@@ -27,6 +27,7 @@ <h1>Builds</h1>
                     <th>Name</th>
                     <th>Last Build</th>
                     <th>Status</th>
+                    <th>Duration</th>
                     <th>Created</th>
                     <th>Type</th>
                     <th>Source</th>
@@ -74,9 +75,16 @@ <h1>Builds</h1>
                     </td>
                     <td data-title="Status">
                       <div row class="status">
-                        <build-status build="latestBuild"></build-status>
+                        <!-- <build-status build="build"></build-status> -->
+                        <status-icon status="latestBuild.status.phase" disable-animation fixed-width="true"></status-icon>
+                        <span ng-if="latestBuild.status.phase ==='Failed'">{{(latestBuild.status.reason || latestBuild.status.phase) | sentenceCase}}</span>
+                        <span ng-if="latestBuild.status.phase !== 'Failed'">{{latestBuild.status.phase | sentenceCase}}</span>
                       </div>
                     </td>
+                    <td data-title="Duration">
+                      <duration-until-now ng-if="latestBuild.status.startTimestamp && !latestBuild.status.completionTimestamp" timestamp="latestBuild.status.startTimestamp" time-only></duration-until-now>
+                      <span ng-if="latestBuild.status.startTimestamp && latestBuild.status.completionTimestamp">{{latestBuild.status.startTimestamp | duration : latestBuild.status.completionTimestamp}}</span>
+                    </td>
                     <td data-title="Created">
                       <span am-time-ago="latestBuild.metadata.creationTimestamp"></span>
                     </td>
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index 3c5fed609c..e592c077de 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -12898,12 +12898,14 @@ return a;
 }), angular.module("openshiftConsole").filter("duration", function() {
 return function(a, b, c, d) {
 function e(a, b, d) {
-if (0 !== a) return 1 === a ? void (c ? h.push(b) :h.push("one " + b)) :void h.push(a + " " + d);
+if (0 !== a) return 1 === a ? void (c ? h.push(b) :h.push("1 " + b)) :void h.push(a + " " + d);
 }
 if (!a) return a;
 d = d || 2, b = b || new Date();
-var f = moment(b).diff(a), g = moment.duration(f), h = [], i = g.years(), j = g.months(), k = g.days(), l = g.hours(), m = g.minutes(), n = g.seconds();
-return e(i, "year", "years"), e(j, "month", "months"), e(k, "day", "days"), e(l, "hour", "hours"), e(m, "minute", "minutes"), e(n, "second", "seconds"), 1 === h.length && n && 1 === d ? c ? "minute" :"one minute" :(0 === h.length && h.push("0 seconds"), h.length > d && (h.length = d), h.join(", "));
+var f = moment(b).diff(a);
+f < 0 && (f = 0);
+var g = moment.duration(f), h = [], i = g.years(), j = g.months(), k = g.days(), l = g.hours(), m = g.minutes(), n = g.seconds();
+return e(i, "year", "years"), e(j, "month", "months"), e(k, "day", "days"), e(l, "hour", "hours"), e(m, "minute", "minutes"), e(n, "second", "seconds"), 1 === h.length && n && 1 === d ? c ? "minute" :"1 minute" :(0 === h.length && h.push("0 seconds"), h.length > d && (h.length = d), h.join(", "));
 };
 }).filter("ageLessThan", function() {
 return function(a, b, c) {
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 6fc4913862..88f34a20eb 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -1247,7 +1247,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<dt>Status:</dt>\n" +
     "<dd>\n" +
     "<status-icon status=\"build.status.phase\"></status-icon>\n" +
-    "{{build.status.phase}}\n" +
+    "<span ng-if=\"!build.status.message || build.status.phase === 'Cancelled'\">{{build.status.phase}}</span>\n" +
+    "<span ng-if=\"build.status.message && build.status.phase !== 'Cancelled'\">{{build.status.message}}</span>\n" +
     "<span ng-if=\"build | jenkinsLogURL\">\n" +
     "<span class=\"text-muted\">&ndash;</span>\n" +
     "<a ng-href=\"{{build | jenkinsLogURL}}\" target=\"_blank\">View Log</a>\n" +
@@ -1861,6 +1862,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<tr>\n" +
     "<th>Build</th>\n" +
     "<th>Status</th>\n" +
+    "<th>Duration</th>\n" +
     "<th>Created</th>\n" +
     "</tr>\n" +
     "</thead>\n" +
@@ -1877,13 +1879,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!(build | annotation : 'buildNumber')\">\n" +
     "<a ng-href=\"{{build | navigateResourceURL}}\">{{build.metadata.name}}</a>\n" +
     "</span>\n" +
-    "<span ng-if=\"build.status.message\" class=\"pficon pficon-warning-triangle-o\" style=\"cursor: help\" data-toggle=\"popover\" data-trigger=\"hover\" dynamic-content=\"{{build.status.message}}\"></span>\n" +
     "</td>\n" +
     "<td data-title=\"Status\">\n" +
     "<div row class=\"status\">\n" +
-    "<build-status build=\"build\"></build-status>\n" +
+    "<status-icon status=\"build.status.phase\" disable-animation fixed-width=\"true\"></status-icon>\n" +
+    "<span ng-if=\"build.status.phase ==='Failed'\">{{(build.status.reason || build.status.phase) | sentenceCase}}</span>\n" +
+    "<span ng-if=\"build.status.phase !== 'Failed'\">{{build.status.phase | sentenceCase}}</span>\n" +
     "</div>\n" +
     "</td>\n" +
+    "<td data-title=\"Duration\">\n" +
+    "<duration-until-now ng-if=\"build.status.startTimestamp && !build.status.completionTimestamp\" timestamp=\"build.status.startTimestamp\" time-only></duration-until-now>\n" +
+    "<span ng-if=\"build.status.startTimestamp && build.status.completionTimestamp\">{{build.status.startTimestamp | duration : build.status.completionTimestamp}}</span>\n" +
+    "</td>\n" +
     "<td data-title=\"Created\">\n" +
     "<span am-time-ago=\"build.metadata.creationTimestamp\"></span>\n" +
     "</td>\n" +
@@ -2136,7 +2143,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div ng-if=\"build\">\n" +
     "<h1>\n" +
     "{{build.metadata.name}}\n" +
-    "<span ng-if=\"build.status.message\" class=\"pficon pficon-warning-triangle-o\" style=\"cursor: help\" data-toggle=\"popover\" data-trigger=\"hover\" dynamic-content=\"{{build.status.message}}\"></span>\n" +
     "<span class=\"pficon pficon-warning-triangle-o\" ng-if=\"buildConfigPaused || buildConfigDeleted\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"{{buildConfigDeleted ? 'The build configuration for this build no longer exists.' : 'Building from build configuration ' + buildConfig.metadata.name + ' has been paused.'}}\">\n" +
     "</span>\n" +
     "<small class=\"meta\">created <span am-time-ago=\"build.metadata.creationTimestamp\"></span></small>\n" +
@@ -3930,6 +3936,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<th>Name</th>\n" +
     "<th>Last Build</th>\n" +
     "<th>Status</th>\n" +
+    "<th>Duration</th>\n" +
     "<th>Created</th>\n" +
     "<th>Type</th>\n" +
     "<th>Source</th>\n" +
@@ -3974,9 +3981,16 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</td>\n" +
     "<td data-title=\"Status\">\n" +
     "<div row class=\"status\">\n" +
-    "<build-status build=\"latestBuild\"></build-status>\n" +
+    "\n" +
+    "<status-icon status=\"latestBuild.status.phase\" disable-animation fixed-width=\"true\"></status-icon>\n" +
+    "<span ng-if=\"latestBuild.status.phase ==='Failed'\">{{(latestBuild.status.reason || latestBuild.status.phase) | sentenceCase}}</span>\n" +
+    "<span ng-if=\"latestBuild.status.phase !== 'Failed'\">{{latestBuild.status.phase | sentenceCase}}</span>\n" +
     "</div>\n" +
     "</td>\n" +
+    "<td data-title=\"Duration\">\n" +
+    "<duration-until-now ng-if=\"latestBuild.status.startTimestamp && !latestBuild.status.completionTimestamp\" timestamp=\"latestBuild.status.startTimestamp\" time-only></duration-until-now>\n" +
+    "<span ng-if=\"latestBuild.status.startTimestamp && latestBuild.status.completionTimestamp\">{{latestBuild.status.startTimestamp | duration : latestBuild.status.completionTimestamp}}</span>\n" +
+    "</td>\n" +
     "<td data-title=\"Created\">\n" +
     "<span am-time-ago=\"latestBuild.metadata.creationTimestamp\"></span>\n" +
     "</td>\n" +