Improve display of last failure (#31)

It will allow to hint user if task failure is recent (using red color to
indicate there might be something to do), a bit old (using yellow to
indicate it might the info they are looking for) or very old (using
green color to show it is likely ok despite being a failure).

Also precise some field naming

Change-Id: I66e827d1a3796de6af658c55a9231c8fdf659126

src/css/components/timestamp.less

@@ -0,0 +1,13 @@
+.timestamp-color {
+  &.veryold {
+    color: @timestamp-color-veryold;
+  }
+
+  &.old {
+    color: @timestamp-color-old;
+  }
+
+  &.recent {
+    color: @timestamp-color-recent;
+  }
+}

src/css/main.less

@@ -43,6 +43,7 @@
 @import "components/popover.less";
 @import "components/task-list.less";
 @import "components/task-file-list.less";
+@import "components/timestamp.less";
 @import "components/tooltip.less";
 @import "components/toggle.less";
 @import "components/volume-list.less";

src/css/variables.less

@@ -53,6 +53,10 @@
 @app-status-delayed-color: @alizarin-crimson;
 @app-status-suspended-color: @oslo-gray;
 
+@timestamp-color-veryold: @emerald;
+@timestamp-color-old: @mustard;
+@timestamp-color-recent: @alizarin-crimson;
+
 // Health is specific to tasks, and distinct from app status
 @health-bar-inner-color: @mirage;
 @task-health-healthy-color: @emerald;

src/js/components/AppDebugInfoComponent.jsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react/addons";
 import Moment from "moment";
 
@@ -70,23 +71,36 @@ var AppDebugInfoComponent = React.createClass({
     const timeStampText = new Date(timestamp) > new Date()
       ? "Just now"
       : new Moment(timestamp).fromNow();
+    const secondsSinceLastFailure = (new Date() - new Date(timestamp)) / 1000;
+    // adapt color based on information recency.
+    // Old timestamps means information is less relevant but many users
+    // don't see it. So we mark it anyway
+    var timestampTextColor = "recent";
+    if (secondsSinceLastFailure > 86400) {
+      timestampTextColor = "veryold";
+    } else if (secondsSinceLastFailure > 600) {
+      timestampTextColor = "old";
+    }
+
+    var timestampClassSet = classNames("timestamp-color", timestampTextColor);
     const version = lastTaskFailure.version;
 
     return (
       <dl className="dl-horizontal flush-bottom">
         <dt>Task id</dt>
         {invalidateValue(lastTaskFailure.taskId)}
-        <dt>State</dt>
+        <dt>Task State</dt>
         {invalidateValue(lastTaskFailure.state)}
         <dt>Message</dt>
         {invalidateValue(lastTaskFailure.message)}
         <dt>Host</dt>
         {invalidateValue(lastTaskFailure.host)}
-        <dt>Timestamp</dt>
+        <dt>Failure timestamp</dt>
         <dd>
-          <span>{timestamp}</span> ({timeStampText})
+          <span>{timestamp}</span>&nbsp;
+           (<span className={timestampClassSet}>{timeStampText}</span>)
         </dd>
-        <dt>Version</dt>
+        <dt>Configuration Version</dt>
         <dd>
           <span>{version}</span> ({new Moment(version).fromNow()})
         </dd>