Merge pull request #2917 from coreos-inc/joseph.schorr/QS-64/timezone-stamp

Locale-aware time and duration display

static/css/directives/ui/tag-info-sidebar.css

@@ -1,5 +0,0 @@
-.tag-info-sidebar .control-bar {
-  padding-top: 10px;
-  margin-top: 10px;
-  border-top: 1px solid #eee;
-}

static/directives/build-info-bar.html

@@ -9,7 +9,7 @@
 
     <!-- Timing -->
     <div class="timing" ng-if="showTime">
-      <i class="fa fa-clock-o"></i><span am-time-ago="build.started || 0"></span>
+      <i class="fa fa-clock-o"></i><time-ago datetime="build.started"></time-ago>
     </div>
   </div>
 

static/directives/build-mini-status.html

@@ -5,7 +5,7 @@
     <div>
      <span class="build-state-icon" build="build"></span>
      <span class="timing">
-       <i class="fa fa-clock-o"></i><span am-time-ago="build.started || 0"></span>
+       <i class="fa fa-clock-o"></i><time-ago datetime="build.started"></time-ago>
      </span>
 
      <div class="build-description triggered-build-description" build="build"></div>

static/directives/build-status.html

@@ -6,7 +6,7 @@
   </div>
   <div class="timing">
     <i class="fa fa-clock-o"></i>
-    Started: <span am-time-ago="build.started || 0"></span>
+    Started: <time-ago datetime="build.started"></time-ago>
   </div>
   <div class="build-progress" build="build"></div>
 </div>

static/directives/config/config-license-field.html

@@ -20,7 +20,7 @@
        <td>{{ status.requirement.count }}</td>
        <td>{{ status.entitlement.product_name }}</td>
        <td>{{ status.entitlement.count }}</td>
-       <td><span am-time-ago="status.entitlement.expiration.expiration_date" data-title="{{ status.entitlement.expiration.expiration_date }}" bs-tooltip></span></td>
+       <td><time-ago datetime="status.entitlement.expiration.expiration_date"></time-ago></td>
       </tr>
     </table>
   </div>

static/directives/logs-view.html

@@ -62,7 +62,7 @@
             <span class="circle" style="{{ 'background: ' + getColor(log.kind, chart) }}"></span>
             <span class="log-description" bo-html="getDescription(log)"></span>
           </td>
-          <td><span bo-text="log.datetime"></span></td>
+          <td><time-display datetime="log.datetime"></time-display></td>
           <td>
             <span class="log-performer" bo-if="log.metadata.oauth_token_application">
               <div>

static/directives/quay-service-status-bar.html

@@ -10,7 +10,7 @@
      <i class="fa fa-calendar" style="margin-right: 6px;"></i>
      <span ng-switch on="scheduled.status" style="vertical-align: middle">
        <span ng-switch-when="scheduled">
-         Scheduled for {{ scheduled.scheduled_for | amDateFormat:'dddd, MMMM Do YYYY, h:mm A' }}:
+         Scheduled for <time-display datetime="scheduled.scheduled_for"></time-display>:
        </span>
        <b ng-switch-when="in_progress" style="color: #FDFFB9;">
          In progress:

static/directives/repo-tag-history.html

@@ -26,7 +26,7 @@
             </td>
 
             <td class="history-row" ng-if="entry.date_break" colspan="2">
-              {{ entry.date | amDateFormat:'dddd, MMMM Do YYYY' }}
+              <time-display datetime="entry.date" date-only="true"></time-display>
             </td>
 
             <td ng-if="!entry.date_break" class="icon-col">
@@ -73,10 +73,14 @@
                   </span>
                 </span>
               </div>
-              <div class="history-datetime-small">{{ entry.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
+              <div class="history-datetime-small">
+                <time-display datetime="entry.time"></time-display>
+              </div>
             </td>
             <td ng-if="!entry.date_break" class="datetime-col hidden-sm hidden-xs">
-              <div class="history-datetime">{{ entry.time | amDateFormat:'MMM Do YYYY, h:mm:ss a' }}</div>
+              <div class="history-datetime">
+                <time-display datetime="entry.time"></time-display>
+              </div>
             </td>
             <td class="revert-col hidden-xs hidden-sm">
               <div ng-if="!entry.date_break && repository.can_write" class="history-revert">

static/directives/repo-view/repo-panel-tags.html

@@ -147,10 +147,7 @@
 
       <!-- Last Modified -->
       <td class="hidden-xs">
-        <span bo-if="tag.last_modified" data-title="{{ tag.last_modified | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
-          <span am-time-ago="tag.last_modified"></span>
-        </span>
-        <span bo-if="!tag.last_modified">Unknown</span>
+        <time-ago datetime="tag.last_modified"></time-ago>
       </td>
 
       <!-- Security scanning -->

static/directives/service-keys-manager.html

@@ -110,12 +110,12 @@
           </td>
           <td><span class="max-text" bo-text="key.service"></span></td>
           <td>
-            <span am-time-ago="key.created_date"></span>
+            <time-ago datetime="key.created_date"></time-ago>
           </td>
           <td>
             <span class="rotation" bo-if="key.expiration_date && willRotate(key)">
                 <i class="fa" ng-class="getExpirationInfo(key).icon"></i>
-                Automatically rotated <span am-time-ago="getRotationDate(key)"></span>
+                Automatically rotated <time-ago datetime="getRotationDate(key)"></time-ago>
             </span>
             <span bo-if="!willRotate(key)">
               <a ng-click="showChangeExpiration(key)">

static/directives/tag-info-sidebar.html

@@ -1,42 +0,0 @@
-<div class="tag-info-sidebar-element">
-  <dl class="dl-normal">
-    <dt>Last Modified</dt>
-    <dd am-time-ago="parseDate(tagImage.created)"></dd>
-
-    <dt>Total Compressed Size</dt>
-    <dd>
-      <span class="context-tooltip"
-            data-title="The amount of data sent between Docker and the registry when pushing/pulling"
-            data-container="body"
-            bs-tooltip>
-            {{ tracker.getTotalSize(tag) | bytes }}
-      </span>
-    </dd>
-  </dl>
-
-  <div class="tag-image-sizes">
-    <div class="tag-image-size" ng-repeat="image in tracker.getImagesForTagBySize(tag) | limitTo: 10">
-      <span class="size-limiter">
-        <span class="size-bar"
-              ng-style="{'width': (image.size / tracker.getTotalSize(tag)) * 100 + '%'}"
-              data-title="{{ image.size | bytes }}"
-              bs-tooltip>
-        </span>
-      </span>
-      <span class="size-title">
-        <a class="image-size-link"
-          
-           ng-click="imageSelected({'image': image.id})"
-           data-image="{{ image.id.substr(0, 12) }}">
-          {{ image.id.substr(0, 12) }}
-        </a>
-      </span>
-    </div>
-  </div>
-
-  <div class="control-bar" ng-show="tracker.repository.can_admin">
-    <button class="btn btn-default" ng-click="deleteTagRequested({'tag': tag})">
-      <i class="fa fa-times" style="margin-right: 6px;"></i>Delete Tag
-    </button>
-  </div>
-</div>

static/directives/triggered-build-description.html

@@ -40,7 +40,7 @@
       <div class="commit-information">
         <span class="commit-who-when">
           Authored
-          <span am-time-ago="build.trigger_metadata.commit_info.date"></span>
+          <time-ago datetime="build.trigger_metadata.commit_info.date"></time-ago>
           <span class="anchor commit-who"
                 href="{{ build.trigger_metadata.commit_info.author.url }}"
                 is-only-text="!build.trigger_metadata.commit_info.author.url"

static/js/directives/ui/app-public-view/last-modified.html

@@ -1,3 +1 @@
-<span data-title="{{ item.last_modified | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
-    <span am-time-ago="item.last_modified"></span>
-</span>
+<time-ago datetime="item.last_modified"></time-ago>

static/js/directives/ui/expiration-status-view/expiration-status-view.component.html

@@ -1,7 +1,7 @@
 <span class="expiration-status-view-element">
-  <span ng-if="::$ctrl.expirationDate" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).className" data-title="{{ $ctrl.expirationDate | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
+  <span ng-if="::$ctrl.expirationDate" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).className">
       <i class="fa" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).icon"></i>
-      <span am-time-ago="$ctrl.expirationDate"></span>
+      <time-ago="$ctrl.expirationDate"></time-ago>
     </a>
   </span>
   <span class="no-expiration" ng-if="::!$ctrl.expirationDate">

static/js/directives/ui/manage-trigger/manage-trigger.component.html

@@ -130,7 +130,7 @@
                          datafield="last_updated_datetime"
                          templateurl="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
             <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
-              <span am-time-ago="item.last_updated_datetime"></span>
+              <time-ago datetime="item.last_updated_datetime"></time-ago>
             </script>
           </cor-table-col>
           <cor-table-col title="Description"

static/js/directives/ui/tag-info-sidebar.js

@@ -1,28 +0,0 @@
-/**
- * An element which displays sidebar information for a tag. Primarily used in the repo view.
- */
-angular.module('quay').directive('tagInfoSidebar', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/tag-info-sidebar.html',
-    replace: false,
-    transclude: true,
-    restrict: 'C',
-    scope: {
-      'tracker': '=tracker',
-      'tag': '=tag',
-
-      'imageSelected': '&imageSelected',
-      'deleteTagRequested': '&deleteTagRequested'
-    },
-    controller: function($scope, $element) {
-      $scope.$watch('tag', function(tag) {
-        if (!tag || !$scope.tracker) { return; }
-
-        $scope.tagImage = $scope.tracker.getImageForTag(tag);
-        $scope.tagData = $scope.tracker.lookupTag(tag);
-      });
-    }
-  };
-  return directiveDefinitionObject;
-});

static/js/directives/ui/time-ago/time-ago.component.html

@@ -0,0 +1,6 @@
+<span>
+  <span ng-if="::$ctrl.datetime" data-title="{{ ::$ctrl.datetime | amDateFormat:'llll' }}" bs-tooltip>
+    <span am-time-ago="::$ctrl.datetime"></span>
+  </span>
+  <span ng-if="::!$ctrl.datetime">Unknown</span>
+</span>

static/js/directives/ui/time-ago/time-ago.component.ts

@@ -0,0 +1,13 @@
+import { Input, Component } from 'ng-metadata/core';
+
+/**
+ * A component that displays how long ago an event occurred, with associated
+ * tooltip showing the actual time.
+ */
+@Component({
+  selector: 'timeAgo',
+  templateUrl: '/static/js/directives/ui/time-ago/time-ago.component.html'
+})
+export class TimeAgoComponent {
+  @Input('<') public datetime: any;
+}

static/js/directives/ui/time-display/time-display.component.html

@@ -0,0 +1 @@
+<span>{{ ::$ctrl.datetime | amDateFormat:$ctrl.getFormat($ctrl.dateOnly) }}</span>

static/js/directives/ui/time-display/time-display.component.ts

@@ -0,0 +1,21 @@
+import { Input, Component } from 'ng-metadata/core';
+
+/**
+ * A component that displays when an event occurred.
+ */
+@Component({
+  selector: 'timeDisplay',
+  templateUrl: '/static/js/directives/ui/time-display/time-display.component.html'
+})
+export class TimeDisplayComponent {
+  @Input('<') public datetime: any;
+  @Input('<') public dateOnly: boolean;
+
+  private getFormat(dateOnly: boolean): string {
+    if (dateOnly) {
+      return 'll';
+    }
+
+    return 'llll';
+  }
+}

static/js/quay.module.ts

@@ -37,6 +37,8 @@ import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-tr
 import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
 import { CorTabsModule } from './directives/ui/cor-tabs/cor-tabs.module';
 import { TriggerDescriptionComponent } from './directives/ui/trigger-description/trigger-description.component';
+import { TimeAgoComponent } from './directives/ui/time-ago/time-ago.component';
+import { TimeDisplayComponent } from './directives/ui/time-display/time-display.component';
 import { MarkdownModule } from './directives/ui/markdown/markdown.module';
 import * as Clipboard from 'clipboard';
 
@@ -79,6 +81,8 @@ import * as Clipboard from 'clipboard';
     ExpirationStatusViewComponent,
     ClipboardCopyDirective,
     TriggerDescriptionComponent,
+    TimeAgoComponent,
+    TimeDisplayComponent,
   ],
   providers: [
     ViewArrayImpl,

static/partials/build-view.html

@@ -49,7 +49,7 @@
           <div class="timing">
             <i class="fa fa-clock-o"></i>
             Build started
-            <span am-time-ago="build.started || 0"></span>
+            <time-ago datetime="build.started"></time-ago>
           </div>
         </div>
 

static/partials/search.html

@@ -29,7 +29,7 @@
                                  first-line-only="true"></markdown-view>
                 </p>
                 <p class="result-info-bar">
-                  <span class="info-span">Last Modified:  <span am-time-ago="result.last_modified * 1000"></span></span>
+                  <span class="info-span">Last Modified: <time-ago datetime="result.last_modified * 1000"></time-ago></span>
                   <span class="info-span activity">
                     activity
                     <span class="strength-indicator" value="::result.popularity"

static/partials/team-view.html

@@ -46,7 +46,7 @@
           </tr>
           <tr>
             <td>Last Updated:</td>
-            <td ng-if="syncInfo.last_updated"><span am-time-ago="syncInfo.last_updated"></span> at {{ syncInfo.last_updated | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</td>
+            <td ng-if="syncInfo.last_updated"><time-ago datetime="syncInfo.last_updated"></time-ago></td>
             <td ng-if="!syncInfo.last_updated" style="color: #aaa;">Never</td>
           </tr>
           </table>