diff --git a/addons/core/addon/helpers/indexed-display-name.js b/addons/core/addon/helpers/indexed-display-name.js index 858880472..71eafbcfc 100644 --- a/addons/core/addon/helpers/indexed-display-name.js +++ b/addons/core/addon/helpers/indexed-display-name.js @@ -1,7 +1,14 @@ import Helper from '@ember/component/helper'; import { inject as service } from '@ember/service'; -export default class extends Helper { +export function indexedDisplayName(intl, translation, array, item) { + let index = array.indexOf(item) + 1; + if (index === 0) index = null; + + return intl.t(translation, { index }); +} + +export default class IndexedDisplayName extends Helper { // =services @service intl; @@ -15,10 +22,6 @@ export default class extends Helper { * @returns localized name for resource with indexed position. For example, "Channel 1" for first item in a list. */ compute([translation, array, item]) { - let index = array.indexOf(item) + 1; - if (index === 0) { - index = null; - } - return this.intl.t(translation, { index }); + return indexedDisplayName(this.intl, translation, array, item); } } diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml index ce6d8dc69..deb15d17b 100644 --- a/addons/core/translations/resources/en-us.yaml +++ b/addons/core/translations/resources/en-us.yaml @@ -230,6 +230,7 @@ session-recording: title: Channels by connection channel: title: Channel + title_index: Channel {index} title_plural: Channels details: Channel details messages: diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js index 941c9f3a0..9d06e0ba8 100644 --- a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js +++ b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js @@ -1,5 +1,6 @@ import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; +import { indexedDisplayName } from 'core/helpers/indexed-display-name'; export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelController extends Controller { // =services @@ -10,6 +11,12 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne * Session recording channel breadcrumb */ get breadCrumb() { - return this.model.channelRecording.id; + return indexedDisplayName( + this.intl, + 'resources.session-recording.channel.title_index', + this.model.channelRecording.connection_recording + .sortedChannelsByStartTimeDesc, + this.model.channelRecording + ); } } diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs index eefef0468..cc3831041 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs @@ -6,7 +6,13 @@ -

{{t 'resources.session-recording.channel.title'}}

+

+ {{indexed-display-name + 'resources.session-recording.channel.title_index' + @model.channelRecording.connection_recording.sortedChannelsByStartTimeDesc + @model.channelRecording + }} +

- {{B.data.id}} + + {{indexed-display-name + 'resources.session-recording.channel.title_index' + connection.sortedChannelsByStartTimeDesc + B.data + }} +