diff --git a/x-pack/solutions/observability/packages/kbn-streams-schema/src/helpers/hierarchy.ts b/x-pack/solutions/observability/packages/kbn-streams-schema/src/helpers/hierarchy.ts
index 3b47ec90507d1..2f00716b583a4 100644
--- a/x-pack/solutions/observability/packages/kbn-streams-schema/src/helpers/hierarchy.ts
+++ b/x-pack/solutions/observability/packages/kbn-streams-schema/src/helpers/hierarchy.ts
@@ -34,3 +34,11 @@ export function getAncestors(id: string) {
   const parts = id.split('.');
   return parts.slice(0, parts.length - 1).map((_, index) => parts.slice(0, index + 1).join('.'));
 }
+
+export function getAncestorsAndSelf(id: string) {
+  return getAncestors(id).concat(id);
+}
+
+export function getSegments(id: string) {
+  return id.split('.');
+}
diff --git a/x-pack/solutions/observability/plugins/streams/server/lib/streams/index_templates/generate_index_template.ts b/x-pack/solutions/observability/plugins/streams/server/lib/streams/index_templates/generate_index_template.ts
index ec4aa4464eeac..56cf48bcece4b 100644
--- a/x-pack/solutions/observability/plugins/streams/server/lib/streams/index_templates/generate_index_template.ts
+++ b/x-pack/solutions/observability/plugins/streams/server/lib/streams/index_templates/generate_index_template.ts
@@ -5,14 +5,14 @@
  * 2.0.
  */
 
+import { getAncestorsAndSelf } from '@kbn/streams-schema';
 import { ASSET_VERSION } from '../../../../common/constants';
 import { getProcessingPipelineName } from '../ingest_pipelines/name';
 import { getIndexTemplateName } from './name';
 
 export function generateIndexTemplate(id: string, isServerless: boolean) {
-  const composedOf = id.split('.').reduce((acc, _, index, array) => {
-    const parent = array.slice(0, index + 1).join('.');
-    return [...acc, `${parent}@stream.layer`];
+  const composedOf = getAncestorsAndSelf(id).reduce((acc, ancestorId) => {
+    return [...acc, `${ancestorId}@stream.layer`];
   }, [] as string[]);
 
   return {
diff --git a/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx b/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
index d47e44b171287..9fe6442eb2d81 100644
--- a/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
+++ b/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
@@ -41,6 +41,7 @@ import {
   isDescendantOf,
   RoutingDefinition,
   IngestUpsertRequest,
+  getAncestorsAndSelf,
 } from '@kbn/streams-schema';
 import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
 import { AbortableAsyncState } from '@kbn/observability-utils-browser/hooks/use_abortable_async';
@@ -818,8 +819,7 @@ function ChildStreamList({
 
 function CurrentStreamEntry({ definition }: { definition: ReadStreamDefinition }) {
   const router = useStreamsAppRouter();
-  const breadcrumbs: EuiBreadcrumb[] = definition.name.split('.').map((_part, pos, parts) => {
-    const parentId = parts.slice(0, pos + 1).join('.');
+  const breadcrumbs: EuiBreadcrumb[] = getAncestorsAndSelf(definition.name).map((parentId) => {
     const isBreadcrumbsTail = parentId === definition.name;
 
     return {
diff --git a/x-pack/solutions/observability/plugins/streams_app/public/components/streams_list/index.tsx b/x-pack/solutions/observability/plugins/streams_app/public/components/streams_list/index.tsx
index 4edb5172cd816..dc35e6a47895c 100644
--- a/x-pack/solutions/observability/plugins/streams_app/public/components/streams_list/index.tsx
+++ b/x-pack/solutions/observability/plugins/streams_app/public/components/streams_list/index.tsx
@@ -22,6 +22,7 @@ import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/css';
 import {
   StreamDefinition,
+  getSegments,
   isDescendantOf,
   isUnwiredStreamDefinition,
   isWiredStreamDefinition,
@@ -41,12 +42,12 @@ export interface StreamTree {
 function asTrees(definitions: StreamDefinition[]) {
   const trees: StreamTree[] = [];
   const wiredDefinitions = definitions.filter((definition) => isWiredStreamDefinition(definition));
-  wiredDefinitions.sort((a, b) => a.name.split('.').length - b.name.split('.').length);
+  wiredDefinitions.sort((a, b) => getSegments(a.name).length - getSegments(b.name).length);
 
   wiredDefinitions.forEach((definition) => {
     let currentTree = trees;
     let existingNode: StreamTree | undefined;
-    const segments = definition.name.split('.');
+    const segments = getSegments(definition.name);
     // traverse the tree following the prefix of the current id.
     // once we reach the leaf, the current id is added as child - this works because the ids are sorted by depth
     while (