AMBARI-7125. Config History: modify SCV box to show date/time using 'ago' format (and show the absolute date/time in the popover).(XI WANG)

ambari-web/app/models/service_config_version.js

@@ -51,11 +51,11 @@ App.ServiceConfigVersion = DS.Model.extend({
   makeCurrentButtonText: function() {
     return Em.I18n.t('dashboard.configHistory.info-bar.revert.versionButton').format(this.get('versionText'));
   }.property('versionText'),
-  modifiedDate: function () {
+  createdDate: function () {
     return dateUtil.dateFormat(this.get('createTime'));
   }.property('createTime'),
-  shortModifiedDate: function () {
-    return dateUtil.dateFormat(this.get('createTime'), 'MMM DD, YYYY');
+  timeSinceCreated: function () {
+    return $.timeago(this.get('createTime'));
   }.property('createTime'),
   /**
    * determine whether ServiceConfigVersion is requested from server

ambari-web/app/styles/application.less

@@ -4982,11 +4982,9 @@ ul.inline li {
         .top-label {
           min-width: 20px;
           padding: 5px;
-          padding-bottom: 1px;
         }
         .content {
           padding: 0 5px;
-          line-height: 19px;
           text-align: center;
           color: #555555;
         }
@@ -5016,6 +5014,11 @@ ul.inline li {
           .notes{
             word-wrap: break-word;
           }
+          .date{
+            color: #808080;
+            font-size: 11px;
+            word-wrap: break-word;
+          }
         }
         .btn {
           font-size: 13px;
@@ -5159,6 +5162,11 @@ ul.inline li {
       cursor: default;
       .content {
         padding: 1px 5px 15px 5px;
+        .date{
+          color: #808080;
+          font-size: 11px;
+          word-wrap: break-word;
+        }
         .notes{
           word-wrap: break-word;
         }

ambari-web/app/templates/common/configs/config_history_flow.hbs

@@ -36,12 +36,13 @@
               {{/if}}
             </div>
               <div class="content">{{serviceVersion.author}}</div>
-              <div class="content">{{serviceVersion.modifiedDate}}</div>
+              <div class="content">{{serviceVersion.timeSinceCreated}}</div>
           </div>
 
           <div class="version-popover">
             <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
               <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
+              <div class="date">{{serviceVersion.createdDate}}</div>
               <div class="notes">{{serviceVersion.briefNotes}}</div>
             </div>
             <div class="version-operations-buttons">
@@ -72,7 +73,7 @@
                     <span class="label label-success">{{t common.current}}</span>
                 {{/if}}
                   <strong>{{view.compareServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}
-                  &nbsp;<strong>{{view.compareServiceVersion.modifiedDate}}</strong>
+                  &nbsp;<strong>{{view.compareServiceVersion.createdDate}}</strong>
               </div>
               <div class="pull-right operations-button">
                   <button class="btn btn-success"  {{action revert view.serviceVersionsReferences.compare target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.compareServiceVersion.isCurrent:hidden"}}>{{view.compareServiceVersion.makeCurrentButtonText}}</button>
@@ -91,13 +92,14 @@
                         <li {{bindAttr class=":pointer :dropdown-submenu serviceVersion.isDisplayed:not-allowed"}}>
                             <div class="row-fluid version-in-dropdown " {{action switchVersion serviceVersion target="view"}}>
                                 <div class="span2">{{serviceVersion.versionText}}</div>
-                                <div class="span6">{{serviceVersion.modifiedDate}}</div>
+                                <div class="span6">{{serviceVersion.createdDate}}</div>
                                 <div class="span3">{{serviceVersion.author}}</div>
                                 <div class="pull-right"><i class="icon-caret-right"></i></div>
                             </div>
                             <ul class="dropdown-menu version-info-operations">
                                 <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
                                     <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
+                                    <div class="date">{{serviceVersion.createdDate}}</div>
                                     <div class="notes">{{serviceVersion.briefNotes}}</div>
                                 </div>
                                 <div class="version-operations-buttons">
@@ -123,7 +125,7 @@
                 {{#if view.displayedServiceVersion.isCurrent}}
                     <span class="label label-success">{{t common.current}}</span>
                 {{/if}}
-                  <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.modifiedDate}}</strong>
+                  <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
               </div>
               <div class="pull-right operations-button">
                   <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>

ambari-web/app/templates/main/dashboard/config_history.hbs

@@ -55,7 +55,7 @@
                 </span>
               {{/if}}
             </td>
-            <td>{{item.modifiedDate}}</td>
+            <td>{{item.createdDate}}</td>
             <td>{{item.author}}</td>
             <td>{{item.briefNotes}}</td>
           {{/view}}

ambari-web/vendor/scripts/jquery.timeago.js

@@ -36,12 +36,12 @@
         prefixFromNow: null,
         suffixAgo: "ago",
         suffixFromNow: "from now",
-        seconds: "less than a minute",
+        seconds: "a moment",
         minute: "about a minute",
         minutes: "%d minutes",
         hour: "about an hour",
-        hours: "about %d hours",
-        day: "a day",
+        hours: "%d hours",
+        day: "about a day",
         days: "%d days",
         month: "about a month",
         months: "%d months",