diff --git a/addons/core/addon/helpers/format-time-duration.js b/addons/core/addon/helpers/format-time-duration.js
new file mode 100644
index 000000000..5477b5b40
--- /dev/null
+++ b/addons/core/addon/helpers/format-time-duration.js
@@ -0,0 +1,25 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import DurationUnitFormat from 'intl-unofficial-duration-unit-format';
+
+export default class extends Helper {
+ // =services
+ @service intl;
+
+ // =methods
+ /**
+ *
+ * @param {number} durationInMs Duration in milliseconds
+ * @returns localized human-readable duration string. For example, in English "1 hr 23 min 20 sec"
+ */
+ compute([durationInMs]) {
+ const durationInSeconds = durationInMs / 1000;
+ const durationFormat = new DurationUnitFormat(this.intl.primaryLocale, {
+ style: 'narrow',
+ format: '{days} {hours} {minutes} {seconds}',
+ round: true,
+ });
+
+ return durationFormat.format(durationInSeconds);
+ }
+}
diff --git a/addons/core/app/helpers/format-time-duration.js b/addons/core/app/helpers/format-time-duration.js
new file mode 100644
index 000000000..fa028c296
--- /dev/null
+++ b/addons/core/app/helpers/format-time-duration.js
@@ -0,0 +1 @@
+export { default } from 'core/helpers/format-time-duration';
diff --git a/addons/core/package.json b/addons/core/package.json
index e5fb106b7..c3af48918 100644
--- a/addons/core/package.json
+++ b/addons/core/package.json
@@ -40,7 +40,8 @@
"ember-feature-flags": "^6.0.0",
"ember-intl": "^6.0.0-beta.4",
"ember-loading": "^2.0.0",
- "ember-truth-helpers": "^3.0.0"
+ "ember-truth-helpers": "^3.0.0",
+ "intl-unofficial-duration-unit-format": "^3.1.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.18.2",
diff --git a/addons/core/tests/integration/helpers/format-time-duration-test.js b/addons/core/tests/integration/helpers/format-time-duration-test.js
new file mode 100644
index 000000000..7efa7adb9
--- /dev/null
+++ b/addons/core/tests/integration/helpers/format-time-duration-test.js
@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Helper | format-time-duration', function (hooks) {
+ setupRenderingTest(hooks);
+ setupIntl(hooks);
+
+ test('It renders in human-readable duration strings given different durations in milliseconds', async function (assert) {
+ // Set mock input (in milliseconds) durations
+ this.set('inputDurationSeconds', 3000);
+ this.set('inputDurationMinutes', 2700000);
+ this.set('inputDurationHours', 5000000);
+ this.set('inputDurationDays', 177800000);
+
+ await render(hbs`{{format-time-duration this.inputDurationSeconds}}`);
+ assert.dom(this.element).hasText('3s');
+
+ await render(hbs`{{format-time-duration this.inputDurationMinutes}}`);
+ assert.dom(this.element).hasText('45m');
+
+ await render(hbs`{{format-time-duration this.inputDurationHours}}`);
+ assert.dom(this.element).hasText('1h 23m 20s');
+
+ await render(hbs`{{format-time-duration this.inputDurationDays}}`);
+ assert.dom(this.element).hasText('2d 1h 23m 20s');
+ });
+});
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
index 1ce0230e6..c0a36d055 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
@@ -10,5 +10,10 @@
>
{{@model.session_recording_id}}
+
+
{{format-time-duration 3000}}
+{{format-time-duration 2700000}}
+{{format-time-duration 5000000}}
+{{format-time-duration 177800000}}
\ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 094a5753d..aebf9d8ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10551,9 +10551,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001449: - version "1.0.30001458" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c" - integrity sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w== + version "1.0.30001466" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001466.tgz#c1e6197c540392e09709ecaa9e3e403428c53375" + integrity sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w== capture-exit@^2.0.0: version "2.0.0" @@ -11905,7 +11905,7 @@ debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.7: dependencies: ms "^2.1.1" -debuglog@^1.0.1: +debuglog@*, debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -17097,7 +17097,7 @@ import-local@^3.0.2: pkg-dir "^4.2.0" resolve-cwd "^3.0.0" -imurmurhash@^0.1.4: +imurmurhash@*, imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -17269,6 +17269,11 @@ intl-messageformat@10.2.1, intl-messageformat@^10.1.0: "@formatjs/icu-messageformat-parser" "2.1.10" tslib "2.4.0" +intl-unofficial-duration-unit-format@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/intl-unofficial-duration-unit-format/-/intl-unofficial-duration-unit-format-3.1.0.tgz#994feefc8d903d9e5044dc7e4e1d38ebad59394b" + integrity sha512-yjvUDwV63zSGkbeUqpDRJmOgMQoJA8OFhNeo+1KY20q+lFCtcvRWszJNsq/ssrUJRy8g+Mt3BYNfwFvRRSAkow== + invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" @@ -19228,6 +19233,11 @@ lodash._baseflatten@^3.0.0: lodash.isarguments "^3.0.0" lodash.isarray "^3.0.0" +lodash._baseindexof@*: + version "3.1.0" + resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" + integrity sha512-bSYo8Pc/f0qAkr8fPJydpJjtrHiSynYfYBjtANIgXv5xEf1WlTC63dIDlgu0s9dmTvzRu1+JJTxcIAHe+sH0FQ== + lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -19236,11 +19246,16 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@^3.0.0: +lodash._bindcallback@*, lodash._bindcallback@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" integrity sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ== +lodash._cacheindexof@*: + version "3.0.2" + resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" + integrity sha512-S8dUjWr7SUT/X6TBIQ/OYoCHo1Stu1ZRy6uMUSKqzFnZp5G5RyQizSm6kvxD2Ewyy6AVfMg4AToeZzKfF99T5w== + lodash._createassigner@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11" @@ -19250,12 +19265,19 @@ lodash._createassigner@^3.0.0: lodash._isiterateecall "^3.0.0" lodash.restparam "^3.0.0" +lodash._createcache@*: + version "3.1.2" + resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" + integrity sha512-ev5SP+iFpZOugyab/DEUQxUeZP5qyciVTlgQ1f4Vlw7VUcCD8fVnyIqVUEIaoFH9zjAqdgi69KiofzvVmda/ZQ== + dependencies: + lodash._getnative "^3.0.0" + lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA== -lodash._getnative@^3.0.0: +lodash._getnative@*, lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA== @@ -19468,7 +19490,7 @@ lodash.pick@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q== -lodash.restparam@^3.0.0: +lodash.restparam@*, lodash.restparam@^3.0.0: version "3.6.1" resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" integrity sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw== @@ -25706,9 +25728,9 @@ terser-webpack-plugin@^5.1.3: terser "^5.7.2" terser@^4.1.2, terser@^4.6.3, terser@^5.14.2, terser@^5.3.0, terser@^5.3.4, terser@^5.7.2: - version "5.16.5" - resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.5.tgz#1c285ca0655f467f92af1bbab46ab72d1cb08e5a" - integrity sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg== + version "5.16.6" + resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.6.tgz#f6c7a14a378ee0630fbe3ac8d1f41b4681109533" + integrity sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg== dependencies: "@jridgewell/source-map" "^0.3.2" acorn "^8.5.0"