[Infra Monitoring UI] Change infrastructure pages titles to use breadcrumbs #135874 (#140824)

* Use breadcrumbs to set page title intead of DocumentTitle

* Remove document title component and use breadcrumbs - Logs Page

* Remove no longer needed document title translations

* Use docTitle.change in error page and remove document title component

* Add document title check to the functional tests

* Move test to check title after load

* test: Title change

* Remove unnecessary docTitle type

* Add error page tests

* Update snapshot

* Functional tests: Wait for loading the header before checking the title

* Change test to use react testing library

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/infra/public/apps/metrics_app.tsx

@@ -45,6 +45,7 @@ export const renderApp = (
   );
 
   return () => {
+    core.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
     plugins.data.search.session.clear();
   };

x-pack/plugins/infra/public/components/document_title.tsx

@@ -1,72 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-type TitleProp = string | ((previousTitle: string) => string);
-
-interface DocumentTitleProps {
-  title: TitleProp;
-}
-
-interface DocumentTitleState {
-  index: number;
-}
-
-const wrapWithSharedState = () => {
-  const titles: string[] = [];
-  const TITLE_SUFFIX = ' - Kibana';
-
-  return class extends React.Component<DocumentTitleProps, DocumentTitleState> {
-    public componentDidMount() {
-      this.setState(
-        () => {
-          return { index: titles.push('') - 1 };
-        },
-        () => {
-          this.pushTitle(this.getTitle(this.props.title));
-          this.updateDocumentTitle();
-        }
-      );
-    }
-
-    public componentDidUpdate() {
-      this.pushTitle(this.getTitle(this.props.title));
-      this.updateDocumentTitle();
-    }
-
-    public componentWillUnmount() {
-      this.removeTitle();
-      this.updateDocumentTitle();
-    }
-
-    public render() {
-      return null;
-    }
-
-    public getTitle(title: TitleProp) {
-      return typeof title === 'function' ? title(titles[this.state.index - 1]) : title;
-    }
-
-    public pushTitle(title: string) {
-      titles[this.state.index] = title;
-    }
-
-    public removeTitle() {
-      titles.pop();
-    }
-
-    public updateDocumentTitle() {
-      const title = (titles[titles.length - 1] || '') + TITLE_SUFFIX;
-      if (title !== document.title) {
-        document.title = title;
-      }
-    }
-  };
-};
-
-export const DocumentTitle = wrapWithSharedState();

x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts

@@ -22,7 +22,7 @@ export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: Chrome
   const appLinkProps = useLinkProps({ app });
 
   useEffect(() => {
-    chrome?.setBreadcrumbs?.([
+    const breadcrumbs = [
       {
         ...observabilityLinkProps,
         text: observabilityTitle,
@@ -32,6 +32,11 @@ export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: Chrome
         text: appTitle,
       },
       ...extraCrumbs,
-    ]);
+    ];
+
+    const docTitle = [...breadcrumbs].reverse().map((breadcrumb) => breadcrumb.text as string);
+
+    chrome.docTitle.change(docTitle);
+    chrome.setBreadcrumbs(breadcrumbs);
   }, [appLinkProps, appTitle, chrome, extraCrumbs, observabilityLinkProps]);
 };

x-pack/plugins/infra/public/hooks/use_document_title.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ChromeBreadcrumb } from '@kbn/core/public';
+import { useEffect } from 'react';
+import { observabilityTitle } from '../translations';
+import { useKibanaContextForPlugin } from './use_kibana';
+
+export const useDocumentTitle = (extraTitles: ChromeBreadcrumb[]) => {
+  const {
+    services: { chrome },
+  } = useKibanaContextForPlugin();
+
+  useEffect(() => {
+    const docTitle = [{ text: observabilityTitle }, ...extraTitles]
+      .reverse()
+      .map((breadcrumb) => breadcrumb.text as string);
+
+    chrome.docTitle.change(docTitle);
+  }, [chrome, extraTitles]);
+};

x-pack/plugins/infra/public/pages/logs/page_content.tsx

@@ -12,7 +12,6 @@ import { Route, Switch } from 'react-router-dom';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-plugin/public';
 import { AlertDropdown } from '../../alerting/log_threshold';
-import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
@@ -62,8 +61,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
   return (
     <>
-      <DocumentTitle title={pageTitle} />
-
       <HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
 
       {setHeaderActionMenu && theme$ && (

x-pack/plugins/infra/public/pages/logs/stream/page.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { StreamPageContent } from './page_content';
-import { StreamPageHeader } from './page_header';
 import { LogsPageProviders } from './page_providers';
 import { streamTitle } from '../../../translations';
 
@@ -26,7 +25,6 @@ export const StreamPage = () => {
   return (
     <EuiErrorBoundary>
       <LogsPageProviders>
-        <StreamPageHeader />
         <StreamPageContent />
       </LogsPageProviders>
     </EuiErrorBoundary>

x-pack/plugins/infra/public/pages/logs/stream/page_header.tsx

@@ -1,28 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-
-import { DocumentTitle } from '../../../components/document_title';
-
-export const StreamPageHeader = () => {
-  return (
-    <>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.logs.streamPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Stream',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
-    </>
-  );
-};

x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx

@@ -6,13 +6,10 @@
  */
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 
-import { DocumentTitle } from '../../../components/document_title';
-
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
@@ -42,16 +39,6 @@ export const HostsPage = () => {
   ]);
   return (
     <EuiErrorBoundary>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.infrastructureHostsPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Hosts',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {isLoading && !source ? (
         <SourceLoadingPage />
       ) : metricIndicesExist && source ? (

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -15,7 +15,6 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal } from '@kbn/observability-plugin/public';
 import { useLinkProps } from '@kbn/observability-plugin/public';
 import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources';
-import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import {
@@ -73,12 +72,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
             <WaffleTimeProvider>
               <WaffleFiltersProvider>
                 <InfraMLCapabilitiesProvider>
-                  <DocumentTitle
-                    title={i18n.translate('xpack.infra.homePage.documentTitle', {
-                      defaultMessage: 'Metrics',
-                    })}
-                  />
-
                   <HelpCenterContent
                     feedbackLink="https://discuss.elastic.co/c/metrics"
                     appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {

x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx

@@ -6,14 +6,10 @@
  */
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { FilterBar } from './components/filter_bar';
-
-import { DocumentTitle } from '../../../components/document_title';
-
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
@@ -49,16 +45,6 @@ export const SnapshotPage = () => {
 
   return (
     <EuiErrorBoundary>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.infrastructureSnapshotPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Inventory',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {isLoading && !source ? (
         <SourceLoadingPage />
       ) : metricIndicesExist ? (

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/page_error.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { PageError } from './page_error';
+import { errorTitle } from '../../../../translations';
+import { InfraHttpError } from '../../../../types';
+import { useDocumentTitle } from '../../../../hooks/use_document_title';
+import { I18nProvider } from '@kbn/i18n-react';
+
+jest.mock('../../../../hooks/use_document_title', () => ({
+  useDocumentTitle: jest.fn(),
+}));
+
+const renderErrorPage = () =>
+  render(
+    <I18nProvider>
+      <PageError
+        name={'test'}
+        error={
+          {
+            body: {
+              statusCode: 500,
+              message: 'Error Message',
+            },
+            message: 'Error Message',
+          } as InfraHttpError
+        }
+      />
+    </I18nProvider>
+  );
+
+describe('PageError component', () => {
+  it('renders correctly and set title', () => {
+    const { getByText } = renderErrorPage();
+    expect(useDocumentTitle).toHaveBeenCalledWith([{ text: `${errorTitle}` }]);
+
+    expect(getByText('Error Message')).toBeInTheDocument();
+    expect(getByText('Please click the back button and try again.')).toBeInTheDocument();
+  });
+});

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/page_error.tsx

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import { i18n } from '@kbn/i18n';
+import { useDocumentTitle } from '../../../../hooks/use_document_title';
 import { InvalidNodeError } from './invalid_node';
-import { DocumentTitle } from '../../../../components/document_title';
 import { ErrorPageBody } from '../../../error';
 import { InfraHttpError } from '../../../../types';
+import { errorTitle } from '../../../../translations';
 
 interface Props {
   name: string;
@@ -18,18 +18,10 @@ interface Props {
 }
 
 export const PageError = ({ error, name }: Props) => {
+  useDocumentTitle([{ text: errorTitle }]);
+
   return (
     <>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.metricDetailPage.documentTitleError', {
-            defaultMessage: '{previousTitle} | Uh oh',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {error.body?.statusCode === 404 ? (
         <InvalidNodeError nodeName={name} />
       ) : (

x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
 import { useLinkProps } from '@kbn/observability-plugin/public';
-import { DocumentTitle } from '../../../components/document_title';
 import { withMetricPageProviders } from './page_providers';
 import { useMetadata } from './hooks/use_metadata';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
@@ -100,14 +99,6 @@ export const MetricDetail = withMetricPageProviders(
 
     return (
       <>
-        <DocumentTitle
-          title={i18n.translate('xpack.infra.metricDetailPage.documentTitle', {
-            defaultMessage: 'Infrastructure | Metrics | {name}',
-            values: {
-              name,
-            },
-          })}
-        />
         {metadata ? (
           <NodeDetailsPage
             name={name}

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx

@@ -11,7 +11,6 @@ import React, { useEffect } from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { MetricsSourceConfigurationProperties } from '../../../../common/metrics_sources';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
-import { DocumentTitle } from '../../../components/document_title';
 import { NoData } from '../../../components/empty_states';
 import { MetricsExplorerCharts } from './components/charts';
 import { MetricsExplorerToolbar } from './components/toolbar';
@@ -74,16 +73,6 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
 
   return (
     <EuiErrorBoundary>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.infrastructureMetricsExplorerPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Metrics Explorer',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       <MetricsPageTemplate
         hasData={metricIndicesExist}
         pageHeader={{

x-pack/plugins/infra/public/translations.ts

@@ -49,3 +49,7 @@ export const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsE
 export const hostsTitle = i18n.translate('xpack.infra.metrics.hostsTitle', {
   defaultMessage: 'Hosts',
 });
+
+export const errorTitle = i18n.translate('xpack.infra.metricDetailPage.documentTitleError', {
+  defaultMessage: 'Uh oh',
+});

x-pack/plugins/translations/translations/fr-FR.json

@@ -15485,8 +15485,6 @@
     "xpack.infra.deprecations.tiebreakerAdjustIndexing": "Ajustez votre indexation pour utiliser \"{field}\" comme moyen de départager.",
     "xpack.infra.deprecations.timestampAdjustIndexing": "Ajustez votre indexation pour utiliser \"{field}\" comme horodatage.",
     "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "Dernières {duration} de données pour l'heure sélectionnée",
-    "xpack.infra.infrastructureMetricsExplorerPage.documentTitle": "{previousTitle} | Metrics Explorer",
-    "xpack.infra.infrastructureSnapshotPage.documentTitle": "{previousTitle} | Inventory",
     "xpack.infra.inventoryTimeline.header": "{metricLabel} moyen",
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "Le modèle de {metricId} nécessite un cloudId, mais aucun n'a été attribué à {nodeId}.",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} n'est pas une valeur inframétrique valide",
@@ -15526,7 +15524,6 @@
     "xpack.infra.logs.searchResultTooltip": "{bucketCount, plural, one {# entrée mise en surbrillance} other {# entrées mises en surbrillance}}",
     "xpack.infra.logs.showingEntriesFromTimestamp": "Affichage des entrées à partir de {timestamp}",
     "xpack.infra.logs.showingEntriesUntilTimestamp": "Affichage des entrées jusqu'à {timestamp}",
-    "xpack.infra.logs.streamPage.documentTitle": "{previousTitle} | Flux",
     "xpack.infra.logs.viewInContext.logsFromContainerTitle": "Les logs affichés proviennent du conteneur {container}",
     "xpack.infra.logs.viewInContext.logsFromFileTitle": "Les logs affichés proviennent du fichier {file} et de l'hôte {host}",
     "xpack.infra.logSourceConfiguration.invalidMessageFieldTypeErrorMessage": "Le champ {messageField} doit être un champ textuel.",
@@ -15535,8 +15532,7 @@
     "xpack.infra.logSourceConfiguration.missingDataViewsLabel": "Vue de données {indexPatternId} manquante",
     "xpack.infra.logSourceConfiguration.missingMessageFieldErrorMessage": "La vue de données doit contenir un champ {messageField}.",
     "xpack.infra.logSourceErrorPage.savedObjectNotFoundErrorMessage": "Impossible de localiser ce {savedObjectType} : {savedObjectId}",
-    "xpack.infra.metricDetailPage.documentTitle": "Infrastructure | Indicateurs | {name}",
-    "xpack.infra.metricDetailPage.documentTitleError": "{previousTitle} | Oups",
+    "xpack.infra.metricDetailPage.documentTitleError": "Oups",
     "xpack.infra.metrics.alertFlyout.alertPerRedundantFilterError": "Il est possible que cette règle signale {matchedGroups} moins que prévu, car la requête de filtre comporte une correspondance pour {groupCount, plural, one {ce champ} other {ces champs}}. Pour en savoir plus, veuillez consulter {filteringAndGroupingLink}.",
     "xpack.infra.metrics.alertFlyout.ofExpression.helpTextDetail": "Vous ne trouvez pas d'indicateur ? {documentationLink}.",
     "xpack.infra.metrics.alerting.anomaly.summaryHigher": "{differential} x plus élevé",
@@ -15690,7 +15686,6 @@
     "xpack.infra.header.logsTitle": "Logs",
     "xpack.infra.header.observabilityTitle": "Observability",
     "xpack.infra.hideHistory": "Masquer l'historique",
-    "xpack.infra.homePage.documentTitle": "Indicateurs",
     "xpack.infra.homePage.inventoryTabTitle": "Inventory",
     "xpack.infra.homePage.metricsExplorerTabTitle": "Metrics Explorer",
     "xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel": "Voir les instructions de configuration",

x-pack/plugins/translations/translations/ja-JP.json

@@ -15471,8 +15471,6 @@
     "xpack.infra.deprecations.tiebreakerAdjustIndexing": "インデックスを調整し、\"{field}\"をタイブレーカーとして使用します。",
     "xpack.infra.deprecations.timestampAdjustIndexing": "インデックスを調整し、\"{field}\"をタイムスタンプとして使用します。",
     "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "指定期間のデータの最後の{duration}",
-    "xpack.infra.infrastructureMetricsExplorerPage.documentTitle": "{previousTitle} | メトリックエクスプローラー",
-    "xpack.infra.infrastructureSnapshotPage.documentTitle": "{previousTitle} | インベントリ",
     "xpack.infra.inventoryTimeline.header": "平均{metricLabel}",
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} のモデルには cloudId が必要ですが、{nodeId} に cloudId が指定されていません。",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} は有効な InfraMetric ではありません",
@@ -15512,7 +15510,6 @@
     "xpack.infra.logs.searchResultTooltip": "{bucketCount, plural, other  {# 件のハイライトされたエントリー}}",
     "xpack.infra.logs.showingEntriesFromTimestamp": "{timestamp} 以降のエントリーを表示中",
     "xpack.infra.logs.showingEntriesUntilTimestamp": "{timestamp} までのエントリーを表示中",
-    "xpack.infra.logs.streamPage.documentTitle": "{previousTitle} | Stream",
     "xpack.infra.logs.viewInContext.logsFromContainerTitle": "表示されたログはコンテナー{container}から取得されました",
     "xpack.infra.logs.viewInContext.logsFromFileTitle": "表示されたログは、ファイル{file}およびホスト{host}から取得されました",
     "xpack.infra.logSourceConfiguration.invalidMessageFieldTypeErrorMessage": "{messageField}フィールドはテキストフィールドでなければなりません。",
@@ -15520,8 +15517,7 @@
     "xpack.infra.logSourceConfiguration.missingDataViewsLabel": "データビュー{indexPatternId}が見つかりません",
     "xpack.infra.logSourceConfiguration.missingMessageFieldErrorMessage": "データビューには{messageField}フィールドが必要です。",
     "xpack.infra.logSourceErrorPage.savedObjectNotFoundErrorMessage": "{savedObjectType}：{savedObjectId}が見つかりませんでした",
-    "xpack.infra.metricDetailPage.documentTitle": "インフラストラクチャ | メトリック | {name}",
-    "xpack.infra.metricDetailPage.documentTitleError": "{previousTitle} | おっと",
+    "xpack.infra.metricDetailPage.documentTitleError": "おっと",
     "xpack.infra.metrics.alertFlyout.alertPerRedundantFilterError": "このルールは想定未満の{matchedGroups}に対してアラートを通知できます。フィルタークエリには{groupCount, plural, one {このフィールド} other {これらのフィールド}}の完全一致が含まれるためです。詳細については、{filteringAndGroupingLink}を参照してください。",
     "xpack.infra.metrics.alertFlyout.ofExpression.helpTextDetail": "メトリックが見つからない場合は、{documentationLink}。",
     "xpack.infra.metrics.alerting.anomaly.summaryHigher": "{differential}x高い",
@@ -15675,7 +15671,6 @@
     "xpack.infra.header.logsTitle": "ログ",
     "xpack.infra.header.observabilityTitle": "Observability",
     "xpack.infra.hideHistory": "履歴を表示しない",
-    "xpack.infra.homePage.documentTitle": "メトリック",
     "xpack.infra.homePage.inventoryTabTitle": "インベントリ",
     "xpack.infra.homePage.metricsExplorerTabTitle": "メトリックエクスプローラー",
     "xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel": "セットアップの手順を表示",

x-pack/plugins/translations/translations/zh-CN.json

@@ -15491,8 +15491,6 @@
     "xpack.infra.deprecations.tiebreakerAdjustIndexing": "调整索引以将“{field}”用作决胜属性。",
     "xpack.infra.deprecations.timestampAdjustIndexing": "调整索引以将“{field}”用作时间戳。",
     "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "选定时间过去 {duration}的数据",
-    "xpack.infra.infrastructureMetricsExplorerPage.documentTitle": "{previousTitle} | 指标浏览器",
-    "xpack.infra.infrastructureSnapshotPage.documentTitle": "{previousTitle} | 库存",
     "xpack.infra.inventoryTimeline.header": "平均值 {metricLabel}",
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} 的模型需要云 ID，但没有为 {nodeId} 提供。",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} 不是有效的 InfraMetric",
@@ -15532,7 +15530,6 @@
     "xpack.infra.logs.searchResultTooltip": "{bucketCount, plural, other {# 个高亮条目}}",
     "xpack.infra.logs.showingEntriesFromTimestamp": "正在显示自 {timestamp} 起的条目",
     "xpack.infra.logs.showingEntriesUntilTimestamp": "正在显示截止于 {timestamp} 的条目",
-    "xpack.infra.logs.streamPage.documentTitle": "{previousTitle} | 流式传输",
     "xpack.infra.logs.viewInContext.logsFromContainerTitle": "显示的日志来自容器 {container}",
     "xpack.infra.logs.viewInContext.logsFromFileTitle": "显示的日志来自文件 {file} 和主机 {host}",
     "xpack.infra.logSourceConfiguration.invalidMessageFieldTypeErrorMessage": "{messageField} 字段必须是文本字段。",
@@ -15541,8 +15538,7 @@
     "xpack.infra.logSourceConfiguration.missingDataViewsLabel": "缺少数据视图 {indexPatternId}",
     "xpack.infra.logSourceConfiguration.missingMessageFieldErrorMessage": "数据视图必须包含 {messageField} 字段。",
     "xpack.infra.logSourceErrorPage.savedObjectNotFoundErrorMessage": "无法找到该{savedObjectType}：{savedObjectId}",
-    "xpack.infra.metricDetailPage.documentTitle": "Infrastructure | 指标 | {name}",
-    "xpack.infra.metricDetailPage.documentTitleError": "{previousTitle} | 啊哦",
+    "xpack.infra.metricDetailPage.documentTitleError": "啊哦",
     "xpack.infra.metrics.alertFlyout.alertPerRedundantFilterError": "此规则可能针对低于预期的 {matchedGroups} 告警，因为筛选查询包含{groupCount, plural, one {此字段} other {这些字段}}的匹配项。有关更多信息，请参阅 {filteringAndGroupingLink}。",
     "xpack.infra.metrics.alertFlyout.ofExpression.helpTextDetail": "找不到指标？{documentationLink}。",
     "xpack.infra.metrics.alerting.anomaly.summaryHigher": "高 {differential} 倍",
@@ -15696,7 +15692,6 @@
     "xpack.infra.header.logsTitle": "日志",
     "xpack.infra.header.observabilityTitle": "Observability",
     "xpack.infra.hideHistory": "隐藏历史记录",
-    "xpack.infra.homePage.documentTitle": "指标",
     "xpack.infra.homePage.inventoryTabTitle": "库存",
     "xpack.infra.homePage.metricsExplorerTabTitle": "指标浏览器",
     "xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel": "查看设置说明",

x-pack/test/functional/apps/infra/home_page.ts

@@ -14,8 +14,9 @@ const DATE_WITHOUT_DATA = DATES.metricsAndLogs.hosts.withoutData;
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const esArchiver = getService('esArchiver');
+  const browser = getService('browser');
   const retry = getService('retry');
-  const pageObjects = getPageObjects(['common', 'infraHome', 'infraSavedViews']);
+  const pageObjects = getPageObjects(['common', 'header', 'infraHome', 'infraSavedViews']);
   const kibanaServer = getService('kibanaServer');
 
   describe('Home page', function () {
@@ -34,6 +35,22 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.common.navigateToApp('infraOps');
         await pageObjects.infraHome.getNoMetricsIndicesPrompt();
       });
+
+      it('renders the correct error page title', async () => {
+        await pageObjects.common.navigateToUrlWithBrowserHistory(
+          'infraOps',
+          '/detail/host/test',
+          '',
+          {
+            ensureCurrentUrl: false,
+          }
+        );
+        await pageObjects.infraHome.waitForLoading();
+        await pageObjects.header.waitUntilLoadingHasFinished();
+
+        const documentTitle = await browser.getTitle();
+        expect(documentTitle).to.contain('Uh oh - Observability - Elastic');
+      });
     });
 
     describe('with metrics present', () => {
@@ -47,6 +64,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs')
       );
 
+      it('renders the correct page title', async () => {
+        await pageObjects.header.waitUntilLoadingHasFinished();
+
+        const documentTitle = await browser.getTitle();
+        expect(documentTitle).to.contain('Inventory - Infrastructure - Observability - Elastic');
+      });
+
       it('renders an empty data prompt for dates with no data', async () => {
         await pageObjects.infraHome.goToTime(DATE_WITHOUT_DATA);
         await pageObjects.infraHome.getNoMetricsDataPrompt();

x-pack/test/functional/apps/infra/link_to.ts

@@ -42,6 +42,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await retry.tryForTime(5000, async () => {
         const currentUrl = await browser.getCurrentUrl();
         const parsedUrl = new URL(currentUrl);
+        const documentTitle = await browser.getTitle();
 
         expect(parsedUrl.pathname).to.be('/app/logs/stream');
         expect(parsedUrl.searchParams.get('logFilter')).to.be(
@@ -51,6 +52,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           `(end:'${endDate}',position:(tiebreaker:0,time:${timestamp}),start:'${startDate}',streamLive:!f)`
         );
         expect(parsedUrl.searchParams.get('sourceId')).to.be('default');
+        expect(documentTitle).to.contain('Stream - Logs - Observability - Elastic');
       });
     });
   });

x-pack/test/functional/apps/infra/logs_source_configuration.ts

@@ -16,6 +16,7 @@ const COMMON_REQUEST_HEADERS = {
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const esArchiver = getService('esArchiver');
+  const browser = getService('browser');
   const logsUi = getService('logsUi');
   const infraSourceConfigurationForm = getService('infraSourceConfigurationForm');
   const pageObjects = getPageObjects(['common', 'header', 'infraLogs']);
@@ -49,6 +50,15 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
       });
 
+      it('renders the correct page title', async () => {
+        await pageObjects.infraLogs.navigateToTab('settings');
+
+        await pageObjects.header.waitUntilLoadingHasFinished();
+        const documentTitle = await browser.getTitle();
+
+        expect(documentTitle).to.contain('Settings - Logs - Observability - Elastic');
+      });
+
       it('can change the log indices to a pattern that matches nothing', async () => {
         await pageObjects.infraLogs.navigateToTab('settings');
 

x-pack/test/functional/apps/infra/metrics_explorer.ts

@@ -16,6 +16,7 @@ const timepickerFormat = 'MMM D, YYYY @ HH:mm:ss.SSS';
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
+  const browser = getService('browser');
   const pageObjects = getPageObjects([
     'common',
     'infraHome',
@@ -42,6 +43,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
       after(() => esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs'));
 
+      it('should render the correct page title', async () => {
+        const documentTitle = await browser.getTitle();
+        expect(documentTitle).to.contain(
+          'Metrics Explorer - Infrastructure - Observability - Elastic'
+        );
+      });
+
       it('should have three metrics by default', async () => {
         const metrics = await pageObjects.infraMetricsExplorer.getMetrics();
         expect(metrics.length).to.equal(3);