[Logs Explorer] Add "Add data" button

x-pack/plugins/observability_log_explorer/common/translations.ts

@@ -28,3 +28,10 @@ export const discoverLinkTitle = i18n.translate(
     defaultMessage: 'Discover',
   }
 );
+
+export const onboardingLinkTitle = i18n.translate(
+  'xpack.observabilityLogExplorer.onboardingLinkTitle',
+  {
+    defaultMessage: 'Add data',
+  }
+);

x-pack/plugins/observability_log_explorer/kibana.jsonc

@@ -15,11 +15,12 @@
       "data",
       "discover",
       "logExplorer",
-      "observabilityShared"
+      "observabilityShared",
+      "share"
     ],
     "optionalPlugins": [
       "serverless"
     ],
-    "requiredBundles": ["kibanaReact"]
+    "requiredBundles": ["kibanaReact", "observabilityOnboarding"]
   }
 }

x-pack/plugins/observability_log_explorer/public/applications/observability_log_explorer.tsx

@@ -52,7 +52,6 @@ export const ObservabilityLogExplorerApp = ({
   plugins,
   pluginStart,
 }: ObservabilityLogExplorerAppProps) => {
-  const { logExplorer, observabilityShared, serverless } = plugins;
   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(
     core,
     plugins,
@@ -67,15 +66,7 @@ export const ObservabilityLogExplorerApp = ({
             <Route
               path="/"
               exact={true}
-              render={() => (
-                <ObservablityLogExplorerMainRoute
-                  appParams={appParams}
-                  core={core}
-                  logExplorer={logExplorer}
-                  observabilityShared={observabilityShared}
-                  serverless={serverless}
-                />
-              )}
+              render={() => <ObservablityLogExplorerMainRoute appParams={appParams} core={core} />}
             />
           </Routes>
         </Router>

x-pack/plugins/observability_log_explorer/public/components/log_explorer_top_nav_menu.tsx

@@ -5,67 +5,155 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import deepEqual from 'fast-deep-equal';
 import useObservable from 'react-use/lib/useObservable';
 import { type BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { AppMountParameters } from '@kbn/core-application-browser';
 import {
   EuiBetaBadge,
+  EuiButton,
+  EuiHeader,
   EuiHeaderLink,
   EuiHeaderLinks,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   useEuiTheme,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import { LogExplorerStateContainer } from '@kbn/log-explorer-plugin/public';
-import { useKibanaContextForPlugin } from '../utils/use_kibana';
-import { betaBadgeDescription, betaBadgeTitle, discoverLinkTitle } from '../../common/translations';
+import {
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+  ObservabilityOnboardingLocatorParams,
+} from '@kbn/observability-onboarding-plugin/public';
+import { KibanaReactContextValue } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { css } from '@emotion/react';
+import { PluginKibanaContextValue } from '../utils/use_kibana';
+import {
+  betaBadgeDescription,
+  betaBadgeTitle,
+  discoverLinkTitle,
+  onboardingLinkTitle,
+} from '../../common/translations';
 
 interface LogExplorerTopNavMenuProps {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  services: KibanaReactContextValue<PluginKibanaContextValue>['services'];
   state$: BehaviorSubject<LogExplorerStateContainer>;
   theme$: AppMountParameters['theme$'];
 }
 
 export const LogExplorerTopNavMenu = ({
   setHeaderActionMenu,
+  services,
   state$,
   theme$,
 }: LogExplorerTopNavMenuProps) => {
+  const { serverless } = services;
+
+  return Boolean(serverless) ? (
+    <ServerlessTopNav services={services} state$={state$} />
+  ) : (
+    <StatefulTopNav
+      services={services}
+      setHeaderActionMenu={setHeaderActionMenu}
+      state$={state$}
+      theme$={theme$}
+    />
+  );
+};
+
+const ServerlessTopNav = ({
+  services,
+  state$,
+}: Pick<LogExplorerTopNavMenuProps, 'services' | 'state$'>) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+    <EuiHeader data-test-subj="logExplorerHeaderMenu">
+      <EuiHeaderSection>
+        <EuiHeaderSectionItem>
+          <EuiHeaderLinks gutterSize="xs">
+            <DiscoverLink services={services} state$={state$} />
+          </EuiHeaderLinks>
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
       <EuiHeaderSection
-        data-test-subj="logExplorerHeaderMenu"
+        side="right"
         css={css`
           gap: ${euiTheme.size.m};
         `}
       >
         <EuiHeaderSectionItem>
           <EuiBetaBadge
+            size="s"
+            iconType="beta"
             label={betaBadgeTitle}
             tooltipContent={betaBadgeDescription}
             alignment="middle"
           />
         </EuiHeaderSectionItem>
-        <EuiHeaderLinks gutterSize="xs">
-          <DiscoverLink state$={state$} />
-        </EuiHeaderLinks>
+        <EuiHeaderSectionItem>
+          <OnboardingLink services={services} />
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
+    </EuiHeader>
+  );
+};
+
+const StatefulTopNav = ({
+  setHeaderActionMenu,
+  services,
+  state$,
+  theme$,
+}: LogExplorerTopNavMenuProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  useEffect(() => {
+    const { chrome, i18n, theme } = services;
+
+    if (chrome) {
+      chrome.setBreadcrumbsAppendExtension({
+        content: toMountPoint(
+          <EuiHeaderSection
+            data-test-subj="logExplorerHeaderMenu"
+            css={css`
+              margin-left: ${euiTheme.size.m};
+            `}
+          >
+            <EuiHeaderSectionItem>
+              <EuiBetaBadge
+                size="s"
+                iconType="beta"
+                label={betaBadgeTitle}
+                tooltipContent={betaBadgeDescription}
+                alignment="middle"
+              />
+            </EuiHeaderSectionItem>
+          </EuiHeaderSection>,
+          { theme, i18n }
+        ),
+      });
+    }
+  }, [euiTheme, services]);
+
+  return (
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+      <EuiHeaderSection data-test-subj="logExplorerHeaderMenu">
+        <EuiHeaderSectionItem>
+          <EuiHeaderLinks gutterSize="xs">
+            <DiscoverLink services={services} state$={state$} />
+            <OnboardingLink services={services} />
+          </EuiHeaderLinks>
+        </EuiHeaderSectionItem>
       </EuiHeaderSection>
     </HeaderMenuPortal>
   );
 };
 
 const DiscoverLink = React.memo(
-  ({ state$ }: { state$: BehaviorSubject<LogExplorerStateContainer> }) => {
-    const {
-      services: { discover },
-    } = useKibanaContextForPlugin();
-
+  ({ services, state$ }: Pick<LogExplorerTopNavMenuProps, 'services' | 'state$'>) => {
     const { appState, logExplorerState } = useObservable<LogExplorerStateContainer>(
       state$.pipe(
         distinctUntilChanged<LogExplorerStateContainer>((prev, curr) => {
@@ -91,9 +179,13 @@ const DiscoverLink = React.memo(
       dataViewSpec: logExplorerState?.datasetSelection?.selection.dataset.toDataviewSpec(),
     };
 
+    const navigateToDiscover = () => {
+      services.discover.locator?.navigate(discoverLinkParams);
+    };
+
     return (
       <EuiHeaderLink
-        onClick={() => discover.locator?.navigate(discoverLinkParams)}
+        onClick={navigateToDiscover}
         color="primary"
         iconType="discoverApp"
         data-test-subj="logExplorerDiscoverFallbackLink"
@@ -103,3 +195,25 @@ const DiscoverLink = React.memo(
     );
   }
 );
+
+const OnboardingLink = React.memo(({ services }: Pick<LogExplorerTopNavMenuProps, 'services'>) => {
+  const locator = services.share.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+
+  const navigateToOnboarding = () => {
+    locator?.navigate({});
+  };
+
+  return (
+    <EuiButton
+      onClick={navigateToOnboarding}
+      fill
+      size="s"
+      iconType="indexOpen"
+      data-test-subj="logExplorerOnboardingLink"
+    >
+      {onboardingLinkTitle}
+    </EuiButton>
+  );
+});

x-pack/plugins/observability_log_explorer/public/routes/main/main_route.tsx

@@ -6,38 +6,35 @@
  */
 
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { LogExplorerPluginStart } from '@kbn/log-explorer-plugin/public';
-import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
-import { ServerlessPluginStart } from '@kbn/serverless/public';
 import React, { useState } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { LogExplorerTopNavMenu } from '../../components/log_explorer_top_nav_menu';
 import { ObservabilityLogExplorerPageTemplate } from '../../components/page_template';
 import { noBreadcrumbs, useBreadcrumbs } from '../../utils/breadcrumbs';
+import { useKibanaContextForPlugin } from '../../utils/use_kibana';
 
 export interface ObservablityLogExplorerMainRouteProps {
   appParams: AppMountParameters;
   core: CoreStart;
-  logExplorer: LogExplorerPluginStart;
-  observabilityShared: ObservabilitySharedPluginStart;
-  serverless?: ServerlessPluginStart;
 }
 
 export const ObservablityLogExplorerMainRoute = ({
-  appParams: { history, setHeaderActionMenu, theme$ },
+  appParams,
   core,
-  logExplorer,
-  observabilityShared,
-  serverless,
 }: ObservablityLogExplorerMainRouteProps) => {
+  const { services } = useKibanaContextForPlugin();
+  const { logExplorer, observabilityShared, serverless } = services;
   useBreadcrumbs(noBreadcrumbs, core.chrome, serverless);
 
+  const { history, setHeaderActionMenu, theme$ } = appParams;
+
   const [state$] = useState(() => new BehaviorSubject({}));
 
   return (
     <>
       <LogExplorerTopNavMenu
         setHeaderActionMenu={setHeaderActionMenu}
+        services={services}
         state$={state$}
         theme$={theme$}
       />

x-pack/plugins/observability_log_explorer/public/types.ts

@@ -10,6 +10,7 @@ import { DiscoverStart } from '@kbn/discover-plugin/public';
 import { LogExplorerPluginStart } from '@kbn/log-explorer-plugin/public';
 import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
 import { ServerlessPluginStart } from '@kbn/serverless/public';
+import { SharePluginStart } from '@kbn/share-plugin/public';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ObservabilityLogExplorerPluginSetup {}
@@ -27,4 +28,5 @@ export interface ObservabilityLogExplorerStartDeps {
   logExplorer: LogExplorerPluginStart;
   observabilityShared: ObservabilitySharedPluginStart;
   serverless?: ServerlessPluginStart;
+  share: SharePluginStart;
 }

x-pack/plugins/observability_log_explorer/tsconfig.json

@@ -24,6 +24,9 @@
     "@kbn/config-schema",
     "@kbn/core-application-browser",
     "@kbn/discover-plugin",
+    "@kbn/observability-onboarding-plugin",
+    "@kbn/react-kibana-mount",
+    "@kbn/share-plugin",
   ],
   "exclude": [
     "target/**/*"

x-pack/plugins/observability_onboarding/public/index.ts

@@ -18,6 +18,7 @@ import {
 } from './plugin';
 
 export { OBSERVABILITY_ONBOARDING_LOCATOR } from './locators/onboarding_locator/locator_definition';
+export type { ObservabilityOnboardingLocatorParams } from './locators/onboarding_locator/types';
 
 export interface ConfigSchema {
   ui: {

x-pack/test/functional/apps/observability_log_explorer/header_menu.ts

@@ -8,6 +8,7 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const browser = getService('browser');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const retry = getService('retry');
@@ -35,6 +36,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     describe('Discover fallback link', () => {
+      before(async () => {
+        await PageObjects.observabilityLogExplorer.navigateTo();
+      });
+
       it('should render a button link ', async () => {
         const discoverLink = await PageObjects.observabilityLogExplorer.getDiscoverFallbackLink();
         expect(await discoverLink.isDisplayed()).to.be(true);
@@ -72,5 +77,26 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         });
       });
     });
+
+    describe('Add data link', () => {
+      before(async () => {
+        await PageObjects.observabilityLogExplorer.navigateTo();
+      });
+
+      it('should render a button link ', async () => {
+        const onboardingLink = await PageObjects.observabilityLogExplorer.getOnboardingLink();
+        expect(await onboardingLink.isDisplayed()).to.be(true);
+      });
+
+      it('should navigate to the observability onboarding overview page', async () => {
+        const onboardingLink = await PageObjects.observabilityLogExplorer.getOnboardingLink();
+        onboardingLink.click();
+
+        await retry.try(async () => {
+          const url = await browser.getCurrentUrl();
+          expect(url).to.contain(`/app/observabilityOnboarding`);
+        });
+      });
+    });
   });
 }

x-pack/test/functional/page_objects/observability_log_explorer.ts

@@ -323,6 +323,10 @@ export function ObservabilityLogExplorerPageObject({
       return testSubjects.find('logExplorerDiscoverFallbackLink');
     },
 
+    getOnboardingLink() {
+      return testSubjects.find('logExplorerOnboardingLink');
+    },
+
     // Query Bar
     getQueryBar() {
       return testSubjects.find('queryInput');