[Logs Explorer] Update breadcrumbs content for Log Explorer app (#172612

) Resolves #172283 ## Summary Fixes breadcrumbs and document title for Log Explorer app. ## Screenshot <img width="970" alt="Screenshot 2023-12-05 at 17 29 53" src="https://github.com/elastic/kibana/assets/190132/d80fc9de-fbad-4c84-a61d-8ff8c5ad7271">
elastic · Dec 7, 2023 · fd5256a · fd5256a
1 parent 71ed936
commit fd5256a
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 31 deletions.
diff --git a/packages/deeplinks/observability/index.ts b/packages/deeplinks/observability/index.ts
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-export { OBSERVABILITY_ONBOARDING_APP_ID } from './constants';
+export {
+  OBSERVABILITY_ONBOARDING_APP_ID,
+  LOGS_APP_ID,
+  OBSERVABILITY_LOG_EXPLORER,
+  OBSERVABILITY_OVERVIEW_APP_ID,
+} from './constants';
 
 export type { AppId, DeepLinkId } from './deep_links';
 

diff --git a/x-pack/plugins/observability_log_explorer/common/constants.ts b/x-pack/plugins/observability_log_explorer/common/constants.ts
diff --git a/x-pack/plugins/observability_log_explorer/common/locators/locators.test.ts b/x-pack/plugins/observability_log_explorer/common/locators/locators.test.ts
@@ -11,7 +11,7 @@ import {
   AllDatasetsLocatorParams,
   SingleDatasetLocatorParams,
 } from '@kbn/deeplinks-observability/locators';
-import { OBSERVABILITY_LOG_EXPLORER_APP_ID } from '../constants';
+import { OBSERVABILITY_LOG_EXPLORER } from '@kbn/deeplinks-observability';
 import { AllDatasetsLocatorDefinition } from './all_datasets/all_datasets_locator';
 import { SingleDatasetLocatorDefinition } from './single_dataset';
 import { DatasetLocatorDependencies } from './types';
@@ -38,7 +38,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await allDatasetsLocator.getLocation({});
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: '/?_a=(index:BQZwpgNmDGAuCWB7AdgFQJ4AcwC4CGEEAlEA)',
         state: {},
       });
@@ -53,7 +53,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await allDatasetsLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: '/?_g=(time:(from:now-30m,to:now))&_a=(index:BQZwpgNmDGAuCWB7AdgFQJ4AcwC4CGEEAlEA)',
         state: {},
       });
@@ -70,7 +70,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await allDatasetsLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: '/?_a=(index:BQZwpgNmDGAuCWB7AdgFQJ4AcwC4CGEEAlEA,query:(language:kuery,query:foo))',
         state: {},
       });
@@ -88,7 +88,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await allDatasetsLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: '/?_g=(refreshInterval:(pause:!f,value:666))&_a=(index:BQZwpgNmDGAuCWB7AdgFQJ4AcwC4CGEEAlEA)',
         state: {},
       });
@@ -104,7 +104,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await allDatasetsLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_a=(columns:!(_source),index:BQZwpgNmDGAuCWB7AdgFQJ4AcwC4CGEEAlEA,sort:!(!('timestamp,%20asc')))`,
         state: {},
       });
@@ -184,7 +184,7 @@ describe('Observability Logs Explorer Locators', () => {
       });
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_a=(index:BQZwpgNmDGAuCWB7AdgLmAEwIay%2BW6yWAtmKgOQSIDmIAtLGCLHQFRvkA0CsUqjzAJScipVABUmsYeChwkycQE8ADmQCuyAE5NEEAG5gMgoA)`,
         state: {},
       });
@@ -201,7 +201,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await singleDatasetLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_g=(time:(from:now-30m,to:now))&_a=(index:BQZwpgNmDGAuCWB7AdgLmAEwIay%2BW6yWAtmKgOQSIDmIAtLGCLHQFRvkA0CsUqjzAJScipVABUmsYeChwkycQE8ADmQCuyAE5NEEAG5gMgoA)`,
         state: {},
       });
@@ -221,7 +221,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await singleDatasetLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_a=(index:BQZwpgNmDGAuCWB7AdgLmAEwIay%2BW6yWAtmKgOQSIDmIAtLGCLHQFRvkA0CsUqjzAJScipVABUmsYeChwkycQE8ADmQCuyAE5NEEAG5gMgoA,query:(language:kuery,query:foo))`,
         state: {},
       });
@@ -241,7 +241,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await singleDatasetLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_g=(refreshInterval:(pause:!f,value:666))&_a=(index:BQZwpgNmDGAuCWB7AdgLmAEwIay%2BW6yWAtmKgOQSIDmIAtLGCLHQFRvkA0CsUqjzAJScipVABUmsYeChwkycQE8ADmQCuyAE5NEEAG5gMgoA)`,
         state: {},
       });
@@ -259,7 +259,7 @@ describe('Observability Logs Explorer Locators', () => {
       const location = await singleDatasetLocator.getLocation(params);
 
       expect(location).toMatchObject({
-        app: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+        app: OBSERVABILITY_LOG_EXPLORER,
         path: `/?_a=(columns:!(_source),index:BQZwpgNmDGAuCWB7AdgLmAEwIay%2BW6yWAtmKgOQSIDmIAtLGCLHQFRvkA0CsUqjzAJScipVABUmsYeChwkycQE8ADmQCuyAE5NEEAG5gMgoA,sort:!(!('timestamp,%20asc')))`,
         state: {},
       });

diff --git a/x-pack/plugins/observability_log_explorer/common/translations.ts b/x-pack/plugins/observability_log_explorer/common/translations.ts
@@ -11,6 +11,17 @@ export const logExplorerAppTitle = i18n.translate('xpack.observabilityLogExplore
   defaultMessage: 'Log Explorer',
 });
 
+export const logsAppTitle = i18n.translate('xpack.observabilityLogExplorer.logsAppTitle', {
+  defaultMessage: 'Logs',
+});
+
+export const observabilityAppTitle = i18n.translate(
+  'xpack.observabilityLogExplorer.observabilityAppTitle',
+  {
+    defaultMessage: 'Observability',
+  }
+);
+
 export const betaBadgeTitle = i18n.translate('xpack.observabilityLogExplorer.betaBadgeTitle', {
   defaultMessage: 'Beta',
 });

diff --git a/x-pack/plugins/observability_log_explorer/public/plugin.ts b/x-pack/plugins/observability_log_explorer/public/plugin.ts
@@ -13,13 +13,13 @@ import {
   Plugin,
   PluginInitializerContext,
 } from '@kbn/core/public';
+import { OBSERVABILITY_LOG_EXPLORER } from '@kbn/deeplinks-observability';
 import {
   ObservabilityLogExplorerLocators,
   SingleDatasetLocatorDefinition,
   AllDatasetsLocatorDefinition,
 } from '../common/locators';
 import { type ObservabilityLogExplorerConfig } from '../common/plugin_config';
-import { OBSERVABILITY_LOG_EXPLORER_APP_ID } from '../common/constants';
 import { logExplorerAppTitle } from '../common/translations';
 import { renderObservabilityLogExplorer } from './applications/observability_log_explorer';
 import type {
@@ -48,7 +48,7 @@ export class ObservabilityLogExplorerPlugin
     const useHash = core.uiSettings.get('state:storeInSessionStorage');
 
     core.application.register({
-      id: OBSERVABILITY_LOG_EXPLORER_APP_ID,
+      id: OBSERVABILITY_LOG_EXPLORER,
       title: logExplorerAppTitle,
       category: DEFAULT_APP_CATEGORIES.observability,
       euiIconType: 'logoLogging',

diff --git a/x-pack/plugins/observability_log_explorer/public/utils/breadcrumbs.tsx b/x-pack/plugins/observability_log_explorer/public/utils/breadcrumbs.tsx
@@ -9,33 +9,67 @@ import { EuiBreadcrumb } from '@elastic/eui';
 import type { ChromeStart } from '@kbn/core-chrome-browser';
 import type { ServerlessPluginStart } from '@kbn/serverless/public';
 import { useEffect } from 'react';
-import { logExplorerAppTitle } from '../../common/translations';
+import { useLinkProps } from '@kbn/observability-shared-plugin/public';
+import {
+  LOGS_APP_ID,
+  OBSERVABILITY_LOG_EXPLORER,
+  OBSERVABILITY_OVERVIEW_APP_ID,
+} from '@kbn/deeplinks-observability';
+import {
+  logExplorerAppTitle,
+  logsAppTitle,
+  observabilityAppTitle,
+} from '../../common/translations';
 
 export const useBreadcrumbs = (
   breadcrumbs: EuiBreadcrumb[],
   chromeService: ChromeStart,
   serverlessService?: ServerlessPluginStart
 ) => {
+  const observabilityLinkProps = useLinkProps({ app: OBSERVABILITY_OVERVIEW_APP_ID });
+  const logsLinkProps = useLinkProps({ app: LOGS_APP_ID });
+  const logExplorerLinkProps = useLinkProps({ app: OBSERVABILITY_LOG_EXPLORER });
+
   useEffect(() => {
-    setBreadcrumbs(breadcrumbs, chromeService, serverlessService);
-  }, [breadcrumbs, chromeService, serverlessService]);
+    setBreadcrumbs(
+      serverlessService
+        ? breadcrumbs
+        : [
+            {
+              text: observabilityAppTitle,
+              ...observabilityLinkProps,
+            },
+            {
+              text: logsAppTitle,
+              ...logsLinkProps,
+            },
+            {
+              text: logExplorerAppTitle,
+              ...logExplorerLinkProps,
+            },
+            ...breadcrumbs,
+          ],
+      chromeService,
+      serverlessService
+    );
+  }, [breadcrumbs, chromeService, serverlessService]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 export function setBreadcrumbs(
   breadcrumbs: EuiBreadcrumb[],
   chromeService: ChromeStart,
   serverlessService?: ServerlessPluginStart
 ) {
+  chromeService.docTitle.change(getDocTitle(breadcrumbs));
   if (serverlessService) {
     serverlessService.setBreadcrumbs(breadcrumbs);
   } else if (chromeService) {
-    chromeService.setBreadcrumbs([
-      {
-        text: logExplorerAppTitle,
-      },
-      ...breadcrumbs,
-    ]);
+    chromeService.setBreadcrumbs(breadcrumbs);
   }
 }
 
+export function getDocTitle(breadcrumbs: EuiBreadcrumb[]) {
+  return breadcrumbs.map(({ text }) => text as string).reverse();
+}
+
 export const noBreadcrumbs: EuiBreadcrumb[] = [];