feature: add toolbar refresher component (#1088)

addons/core/addon/components/relative-datetime-live/index.js

@@ -95,6 +95,9 @@ export default class RelativeDatetimeLiveComponent extends Component {
    * @type {string}
    */
   get formatted() {
-    return this.intl.formatRelative(this.scaledDelta, { unit: this.unit });
+    return this.intl.formatRelative(this.scaledDelta, {
+      unit: this.unit,
+      numeric: 'auto',
+    });
   }
 }

ui/desktop/app/components/toolbar-refresher/index.hbs

@@ -0,0 +1,9 @@
+{{#if this.lastRefreshed}}
+  <Rose::Toolbar::Info>
+    <RelativeDatetimeLive @date={{this.lastRefreshed}} />
+  </Rose::Toolbar::Info>
+{{/if}}
+
+<LoadingButton @onClick={{this.onClick}}>
+  {{t 'actions.refresh'}}
+</LoadingButton>

ui/desktop/app/components/toolbar-refresher/index.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ToolbarRefresherComponent extends Component {
+  // =properties
+
+  @tracked lastRefreshed = null;
+
+  // =methods
+
+  /**
+   * Executes the click handler argument and trackes the time it completed.
+   */
+  @action
+  async onClick() {
+    await this.args.onClick();
+    this.lastRefreshed = new Date();
+  }
+}

ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs

@@ -112,9 +112,9 @@
               >{{t 'actions.clear-all-filters'}}
               </Rose::Button>
             {{/if}}
-            <LoadingButton @onClick={{route-action 'refreshSessions'}}>
-              {{t 'actions.refresh'}}
-            </LoadingButton>
+
+            <ToolbarRefresher @onClick={{route-action 'refreshSessions'}} />
+
           </Rose::Form>
         </Rose::Toolbar>
       {{/if}}