Refactored the age tooltip (kubernetes#2467)

bio170 · Oct 13, 2017 · f630031 · f630031
1 parent 241faa4
commit f630031
Show file tree

Hide file tree

Showing 60 changed files with 135 additions and 604 deletions.
diff --git a/i18n/messages-en.xtb b/i18n/messages-en.xtb
diff --git a/i18n/messages-ja.xtb b/i18n/messages-ja.xtb
diff --git a/i18n/messages-zh-tw.xtb b/i18n/messages-zh-tw.xtb
diff --git a/i18n/messages-zh.xtb b/i18n/messages-zh.xtb
diff --git a/src/app/frontend/common/filters/date.js b/src/app/frontend/common/filters/date.js
@@ -32,12 +32,16 @@ export default function dateFilter($delegate) {
    * @return {string}
    */
   let filterFunction = function(date, format, timezone) {
-    if (!format) {
-      format = defaultFormat;
-    }
     if (!timezone) {
       timezone = defaultTZ;
     }
+    if (!format) {
+      if (timezone === defaultTZ) {
+        format = `${defaultFormat} UTC`;
+      } else {
+        format = defaultFormat;
+      }
+    }
     return original(date, format, timezone);
   };
 

diff --git a/src/app/frontend/configmap/list/card.html b/src/app/frontend/configmap/list/card.html
@@ -39,7 +39,7 @@
       {{::$ctrl.configMap.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip($ctrl.configMap.objectMeta.creationTimestamp)}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.configMap.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
     <kd-resource-card-column class="kd-row-layout-column kd-icon-column">

diff --git a/src/app/frontend/configmap/list/card_component.js b/src/app/frontend/configmap/list/card_component.js
@@ -23,11 +23,10 @@ import {stateName} from '../../configmap/detail/state';
 class ConfigMapCardController {
   /**
    * @param {!ui.router.$state} $state
-   * @param {!angular.$interpolate} $interpolate
    * @param {!../../common/namespace/service.NamespaceService} kdNamespaceService
    * @ngInject
    */
-  constructor($state, $interpolate, kdNamespaceService) {
+  constructor($state, kdNamespaceService) {
     /**
      * Initialized from the scope.
      * @export {!backendApi.ConfigMap}
@@ -37,9 +36,6 @@ class ConfigMapCardController {
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
-    /** @private */
-    this.interpolate_ = $interpolate;
-
     /** @private {!../../common/namespace/service.NamespaceService} */
     this.kdNamespaceService_ = kdNamespaceService;
   }
@@ -61,22 +57,6 @@ class ConfigMapCardController {
         stateName,
         new StateParams(this.configMap.objectMeta.namespace, this.configMap.objectMeta.name));
   }
-
-  /**
-   * @export
-   * @param  {string} creationDate - creation date of the config map
-   * @return {string} localized tooltip with the formated creation date
-   */
-  getCreatedAtTooltip(creationDate) {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Created at [some date]' showing the exact creation time of
-     * config map.
-     */
-    let MSG_CONFIG_MAP_LIST_CREATED_AT_TOOLTIP =
-        goog.getMsg('Created at {$creationDate}', {'creationDate': filter({'date': creationDate})});
-    return MSG_CONFIG_MAP_LIST_CREATED_AT_TOOLTIP;
-  }
 }
 
 /**

diff --git a/src/app/frontend/daemonset/list/card.html b/src/app/frontend/daemonset/list/card.html
@@ -66,7 +66,7 @@
       {{::$ctrl.daemonSet.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip()}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.daemonSet.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
     <kd-resource-card-column>

diff --git a/src/app/frontend/daemonset/list/card_component.js b/src/app/frontend/daemonset/list/card_component.js
@@ -23,20 +23,16 @@ import {stateName} from '../../daemonset/detail/state';
 export class DaemonSetCardController {
   /**
    * @param {!ui.router.$state} $state
-   * @param {!angular.$interpolate} $interpolate
    * @param {!../../common/namespace/service.NamespaceService} kdNamespaceService
    * @ngInject
    */
-  constructor($state, $interpolate, kdNamespaceService) {
+  constructor($state, kdNamespaceService) {
     /** @export {!backendApi.DaemonSet} - Initialized from binding. */
     this.daemonSet;
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
-    /** @private {!angular.$interpolate} */
-    this.interpolate_ = $interpolate;
-
     /** @private {!../../common/namespace/service.NamespaceService} */
     this.kdNamespaceService_ = kdNamespaceService;
   }
@@ -85,22 +81,6 @@ export class DaemonSetCardController {
   isSuccess() {
     return !this.isPending() && !this.hasWarnings();
   }
-
-  /**
-   * @export
-   * @return {string} localized tooltip with the formatted creation date
-   */
-  getCreatedAtTooltip() {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Created at [some date]' showing the exact creation time of
-     * the daemon set.
-     */
-    let MSG_DAEMON_SET_LIST_CREATED_AT_TOOLTIP = goog.getMsg(
-        'Created at {$creationDate}',
-        {'creationDate': filter({'date': this.daemonSet.objectMeta.creationTimestamp})});
-    return MSG_DAEMON_SET_LIST_CREATED_AT_TOOLTIP;
-  }
 }
 
 /**

diff --git a/src/app/frontend/deployment/list/card.html b/src/app/frontend/deployment/list/card.html
@@ -67,7 +67,7 @@
       {{::$ctrl.deployment.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip($ctrl.deployment.objectMeta.creationTimestamp)}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.deployment.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
     <kd-resource-card-column>

diff --git a/src/app/frontend/deployment/list/card_component.js b/src/app/frontend/deployment/list/card_component.js
@@ -23,11 +23,10 @@ import {stateName} from '../../deployment/detail/state';
 class DeploymentCardController {
   /**
    * @param {!ui.router.$state} $state
-   * @param {!angular.$interpolate} $interpolate
    * @param {!../../common/namespace/service.NamespaceService} kdNamespaceService
    * @ngInject
    */
-  constructor($state, $interpolate, kdNamespaceService) {
+  constructor($state, kdNamespaceService) {
     /**
      * Initialized from the scope.
      * @export {!backendApi.Deployment}
@@ -37,9 +36,6 @@ class DeploymentCardController {
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
-    /** @private {!angular.$interpolate} */
-    this.interpolate_ = $interpolate;
-
     /** @private {!../../common/namespace/service.NamespaceService} */
     this.kdNamespaceService_ = kdNamespaceService;
   }
@@ -88,22 +84,6 @@ class DeploymentCardController {
   isSuccess() {
     return !this.isPending() && !this.hasWarnings();
   }
-
-  /**
-   * @export
-   * @param  {string} creationDate - creation date of the deployment
-   * @return {string} localized tooltip with the formatted creation date
-   */
-  getCreatedAtTooltip(creationDate) {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Created at [some date]' showing the exact creation time of
-     * a deployment.
-     */
-    let MSG_DEPLOYMENT_LIST_CREATED_AT_TOOLTIP =
-        goog.getMsg('Created at {$creationDate}', {'creationDate': filter({'date': creationDate})});
-    return MSG_DEPLOYMENT_LIST_CREATED_AT_TOOLTIP;
-  }
 }
 
 /**

diff --git a/src/app/frontend/horizontalpodautoscaler/list/card.html b/src/app/frontend/horizontalpodautoscaler/list/card.html
@@ -61,7 +61,7 @@
       {{::$ctrl.horizontalPodAutoscaler.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip()}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.horizontalPodAutoscaler.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
     <kd-resource-card-column class="kd-row-layout-column kd-icon-column">

diff --git a/src/app/frontend/horizontalpodautoscaler/list/card_component.js b/src/app/frontend/horizontalpodautoscaler/list/card_component.js
@@ -32,20 +32,16 @@ const referenceKindToDetailStateName = {
 export class HorizontalPodAutoscalerCardController {
   /**
    * @param {!ui.router.$state} $state
-   * @param {!angular.$interpolate} $interpolate
    * @param {!../../common/namespace/service.NamespaceService} kdNamespaceService
    * @ngInject
    */
-  constructor($state, $interpolate, kdNamespaceService) {
+  constructor($state, kdNamespaceService) {
     /** @export {!backendApi.HorizontalPodAutoscaler} - Initialized from binding. */
     this.horizontalPodAutoscaler;
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
-    /** @private {!angular.$interpolate} */
-    this.interpolate_ = $interpolate;
-
     /** @private {!../../common/namespace/service.NamespaceService} */
     this.kdNamespaceService_ = kdNamespaceService;
   }
@@ -81,24 +77,6 @@ export class HorizontalPodAutoscalerCardController {
             this.horizontalPodAutoscaler.objectMeta.namespace,
             this.horizontalPodAutoscaler.scaleTargetRef.name));
   }
-
-  /**
-   * @export
-   * @return {string} localized tooltip with the formatted creation date
-   */
-  getCreatedAtTooltip() {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Created at [some date]' showing the exact creation time of
-     * the horizontal pod autoscaler.
-     */
-    let MSG_HORIZONTAL_POD_AUTOSCALER_LIST_CREATED_AT_TOOLTIP =
-        goog.getMsg('Created at {$creationDate}', {
-          'creationDate':
-              filter({'date': this.horizontalPodAutoscaler.objectMeta.creationTimestamp}),
-        });
-    return MSG_HORIZONTAL_POD_AUTOSCALER_LIST_CREATED_AT_TOOLTIP;
-  }
 }
 
 /**

diff --git a/src/app/frontend/ingress/list/card.html b/src/app/frontend/ingress/list/card.html
@@ -42,7 +42,7 @@
         {{::$ctrl.ingress.objectMeta.creationTimestamp | relativeTime}}
         <md-tooltip md-delay="500"
                     md-autohide>
-          {{::$ctrl.getStartedAtTooltip($ctrl.ingress.objectMeta.creationTimestamp)}}
+          [[Created at| Tooltip for the age column ]] {{::$ctrl.ingress.objectMeta.creationTimestamp | date}}
         </md-tooltip>
       </div>
       <div ng-if="::!$ctrl.ingress.objectMeta.creationTimestamp">-</div>

diff --git a/src/app/frontend/ingress/list/card_component.js b/src/app/frontend/ingress/list/card_component.js
@@ -18,16 +18,13 @@ import {stateName} from '../../ingress/detail/state';
 class IngressCardController {
   /**
    * @param {!../../common/namespace/service.NamespaceService} kdNamespaceService
-   * @param {!angular.$interpolate} $interpolate
    * @param {!ui.router.$state} $state
    * @ngInject
    */
-  constructor($interpolate, $state, kdNamespaceService) {
+  constructor($state, kdNamespaceService) {
     /** @export {!backendApi.Ingress} Ingress initialised from a bindig. */
     this.ingress;
 
-    /** @private {!angular.$interpolate} */
-    this.interpolate_ = $interpolate;
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
@@ -36,22 +33,6 @@ class IngressCardController {
     this.kdNamespaceService_ = kdNamespaceService;
   }
 
-  /**
-   * @export
-   * @param  {string} startDate - start date of the ingress
-   * @return {string} localized tooltip with the formated start date
-   */
-  getStartedAtTooltip(startDate) {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Started at [some date]' showing the exact start time of
-     * the ingress.
-     */
-    let MSG_INGRESS_LIST_STARTED_AT_TOOLTIP =
-        goog.getMsg('Created at {$startDate} UTC', {'startDate': filter({'date': startDate})});
-    return MSG_INGRESS_LIST_STARTED_AT_TOOLTIP;
-  }
-
   /**
    * @return {string}
    * @export

diff --git a/src/app/frontend/job/list/card.html b/src/app/frontend/job/list/card.html
@@ -73,7 +73,7 @@
       {{::$ctrl.job.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        Created at {{::$ctrl.job.objectMeta.creationTimestamp | date}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.job.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
     <kd-resource-card-column>

diff --git a/src/app/frontend/job/list/card_component.js b/src/app/frontend/job/list/card_component.js
@@ -36,6 +36,7 @@ class JobCardController {
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
+
     /** @private {!../../common/namespace/service.NamespaceService} */
     this.kdNamespaceService_ = kdNamespaceService;
   }

diff --git a/src/app/frontend/namespace/list/card.html b/src/app/frontend/namespace/list/card.html
@@ -46,7 +46,7 @@
       {{::$ctrl.namespace.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip($ctrl.namespace.objectMeta.creationTimestamp)}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.namespace.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
   </kd-resource-card-columns>

diff --git a/src/app/frontend/namespace/list/card_component.js b/src/app/frontend/namespace/list/card_component.js
@@ -23,10 +23,9 @@ import {stateName} from '../../namespace/detail/state';
 class NamespaceCardController {
   /**
    * @param {!ui.router.$state} $state
-   * @param {!angular.$interpolate} $interpolate
    * @ngInject
    */
-  constructor($state, $interpolate) {
+  constructor($state) {
     /**
      * Initialized from the scope.
      * @export {!backendApi.Namespace}
@@ -35,9 +34,6 @@ class NamespaceCardController {
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
-
-    /** @private */
-    this.interpolate_ = $interpolate;
   }
 
   /**
@@ -65,22 +61,6 @@ class NamespaceCardController {
   getNamespaceDetailHref() {
     return this.state_.href(stateName, new GlobalStateParams(this.namespace.objectMeta.name));
   }
-
-  /**
-   * @export
-   * @param  {string} creationDate - creation date of the namespace
-   * @return {string} localized tooltip with the formated creation date
-   */
-  getCreatedAtTooltip(creationDate) {
-    let filter = this.interpolate_(`{{date | date}}`);
-    /**
-     * @type {string} @desc Tooltip 'Created at [some date]' showing the exact creation time of
-     * namespace.
-     */
-    let MSG_NAMESPACE_LIST_CREATED_AT_TOOLTIP =
-        goog.getMsg('Created at {$creationDate}', {'creationDate': filter({'date': creationDate})});
-    return MSG_NAMESPACE_LIST_CREATED_AT_TOOLTIP;
-  }
 }
 
 /**

diff --git a/src/app/frontend/node/list/card.html b/src/app/frontend/node/list/card.html
@@ -74,7 +74,7 @@
       {{::$ctrl.node.objectMeta.creationTimestamp | relativeTime}}
       <md-tooltip md-delay="500"
                   md-autohide>
-        {{::$ctrl.getCreatedAtTooltip($ctrl.node.objectMeta.creationTimestamp)}}
+        [[Created at| Tooltip for the age column ]] {{::$ctrl.node.objectMeta.creationTimestamp | date}}
       </md-tooltip>
     </kd-resource-card-column>
   </kd-resource-card-columns>