[Fleet] Fix links to Logs view to point to Discover in Serverless

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.test.tsx

@@ -63,6 +63,8 @@ describe('AgentLogsUI', () => {
     const state = {
       datasets: ['elastic_agent'],
       logLevels: ['info', 'error'],
+      start: '2023-20-04T14:00:00.340Z',
+      end: '2023-20-04T14:20:00.340Z',
       query: '',
     } as any;
     return render(<AgentLogsUI agent={agent} state={state} />);
@@ -97,7 +99,10 @@ describe('AgentLogsUI', () => {
   it('should render Open in Logs UI if capabilities not set', () => {
     mockStartServices();
     const result = renderComponent();
-    expect(result.getByTestId('viewInLogsBtn')).not.toBeNull();
+    expect(result.getByTestId('viewInLogsBtn')).toHaveAttribute(
+      'href',
+      `http://localhost:5620/app/logs/stream?logPosition=(end%3A'2023-20-04T14%3A20%3A00.340Z'%2Cstart%3A'2023-20-04T14%3A00%3A00.340Z'%2CstreamLive%3A!f)&logFilter=(expression%3A'elastic_agent.id%3Aagent1%20and%20(data_stream.dataset%3Aelastic_agent)%20and%20(log.level%3Ainfo%20or%20log.level%3Aerror)'%2Ckind%3Akuery)`
+    );
   });
 
   it('should render Open in Discover if serverless enabled', () => {
@@ -106,7 +111,7 @@ describe('AgentLogsUI', () => {
     const viewInDiscover = result.getByTestId('viewInDiscoverBtn');
     expect(viewInDiscover).toHaveAttribute(
       'href',
-      `http://localhost:5620/app/discover#/?_a=(index:'logs-*',query:(language:kuery,query:'data_stream.dataset:elastic_agent%20AND%20elastic_agent.id:agent1'))`
+      `http://localhost:5620/app/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2023-20-04T14:00:00.340Z',to:'2023-20-04T14:20:00.340Z'))&_a=(columns:!(event.dataset,message),index:'logs-*',query:(language:kuery,query:'elastic_agent.id:agent1 and (data_stream.dataset:elastic_agent) and (log.level:info or log.level:error)'))`
     );
   });
 });

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx

@@ -4,21 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import url from 'url';
-import { stringify } from 'querystring';
-
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
-import { encode } from '@kbn/rison';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSuperDatePicker,
   EuiFilterGroup,
   EuiPanel,
-  EuiButton,
-  EuiButtonEmpty,
   EuiCallOut,
   EuiLink,
 } from '@elastic/eui';
@@ -42,6 +35,7 @@ import { LogLevelFilter } from './filter_log_level';
 import { LogQueryBar } from './query_bar';
 import { buildQuery } from './build_query';
 import { SelectLogLevel } from './select_log_level';
+import { ViewLogsButton } from './view_logs_button';
 
 const WrapperFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
@@ -118,7 +112,7 @@ const AgentPolicyLogsNotEnabledCallout: React.FunctionComponent<{ agentPolicy: A
 
 export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(
   ({ agent, agentPolicy, state }) => {
-    const { data, application, http, cloud } = useStartServices();
+    const { data, application, cloud } = useStartServices();
     const { update: updateState } = AgentLogsUrlStateHelper.useTransitions();
     const isLogsUIAvailable = !cloud?.isServerlessEnabled;
 
@@ -218,37 +212,6 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(
       [agent.id, state.datasets, state.logLevels, state.query]
     );
 
-    // Generate URL to pass page state to Logs UI
-    const viewInLogsUrl = useMemo(
-      () =>
-        http.basePath.prepend(
-          url.format({
-            pathname: '/app/logs/stream',
-            search: stringify({
-              logPosition: encode({
-                start: state.start,
-                end: state.end,
-                streamLive: false,
-              }),
-              logFilter: encode({
-                expression: logStreamQuery,
-                kind: 'kuery',
-              }),
-            }),
-          })
-        ),
-      [http.basePath, state.start, state.end, logStreamQuery]
-    );
-
-    const viewInDiscoverUrl = useMemo(() => {
-      const index = 'logs-*';
-      const datasetQuery = 'data_stream.dataset:elastic_agent';
-      const agentIdQuery = `elastic_agent.id:${agent.id}`;
-      return http.basePath.prepend(
-        `/app/discover#/?_a=(index:'${index}',query:(language:kuery,query:'${datasetQuery}%20AND%20${agentIdQuery}'))`
-      );
-    }, [http.basePath, agent.id]);
-
     const agentVersion = agent.local_metadata?.elastic?.agent?.version;
     const isLogFeatureAvailable = useMemo(() => {
       if (!agentVersion) {
@@ -357,30 +320,12 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(
                   application,
                 }}
               >
-                {isLogsUIAvailable ? (
-                  <EuiButtonEmpty
-                    href={viewInLogsUrl}
-                    iconType="popout"
-                    flush="both"
-                    data-test-subj="viewInLogsBtn"
-                  >
-                    <FormattedMessage
-                      id="xpack.fleet.agentLogs.openInLogsUiLinkText"
-                      defaultMessage="Open in Logs"
-                    />
-                  </EuiButtonEmpty>
-                ) : (
-                  <EuiButton
-                    href={viewInDiscoverUrl}
-                    iconType="popout"
-                    data-test-subj="viewInDiscoverBtn"
-                  >
-                    <FormattedMessage
-                      id="xpack.fleet.agentLogs.openInDiscoverUiLinkText"
-                      defaultMessage="Open in Discover"
-                    />
-                  </EuiButton>
-                )}
+                <ViewLogsButton
+                  viewInLogs={isLogsUIAvailable}
+                  logStreamQuery={logStreamQuery}
+                  startTime={state.start}
+                  endTime={state.end}
+                />
               </RedirectAppLinks>
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/view_logs_button.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 url from 'url';
+import { stringify } from 'querystring';
+
+import React, { useMemo } from 'react';
+import { encode } from '@kbn/rison';
+import { EuiButton } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { useStartServices } from '../../../../../hooks';
+
+interface ViewLogsProps {
+  viewInLogs: boolean;
+  logStreamQuery: string;
+  startTime: string;
+  endTime: string;
+}
+
+/*
+  Button that takes to the Logs view Ui when that is available, otherwise fallback to the Discover UI
+  The urls are built using same logStreamQuery (provided by a prop), startTime and endTime, ensuring that they'll both will target same log lines
+*/
+export const ViewLogsButton: React.FunctionComponent<ViewLogsProps> = ({
+  viewInLogs,
+  logStreamQuery,
+  startTime,
+  endTime,
+}) => {
+  const { http } = useStartServices();
+
+  // Generate URL to pass page state to Logs UI
+  const viewInLogsUrl = useMemo(
+    () =>
+      http.basePath.prepend(
+        url.format({
+          pathname: '/app/logs/stream',
+          search: stringify({
+            logPosition: encode({
+              start: startTime,
+              end: endTime,
+              streamLive: false,
+            }),
+            logFilter: encode({
+              expression: logStreamQuery,
+              kind: 'kuery',
+            }),
+          }),
+        })
+      ),
+    [http.basePath, startTime, endTime, logStreamQuery]
+  );
+
+  const viewInDiscoverUrl = useMemo(() => {
+    const index = 'logs-*';
+    const query = encode({
+      query: logStreamQuery,
+      language: 'kuery',
+    });
+    return http.basePath.prepend(
+      `/app/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'${startTime}',to:'${endTime}'))&_a=(columns:!(event.dataset,message),index:'${index}',query:${query})`
+    );
+  }, [logStreamQuery, http.basePath, startTime, endTime]);
+
+  return viewInLogs ? (
+    <EuiButton href={viewInLogsUrl} iconType="popout" data-test-subj="viewInLogsBtn">
+      <FormattedMessage
+        id="xpack.fleet.agentLogs.openInLogsUiLinkText"
+        defaultMessage="Open in Logs"
+      />
+    </EuiButton>
+  ) : (
+    <EuiButton href={viewInDiscoverUrl} iconType="popout" data-test-subj="viewInDiscoverBtn">
+      <FormattedMessage
+        id="xpack.fleet.agentLogs.openInDiscoverUiLinkText"
+        defaultMessage="Open in Discover"
+      />
+    </EuiButton>
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/view_errors.test.tsx

@@ -12,25 +12,51 @@ import { I18nProvider } from '@kbn/i18n-react';
 
 import type { ActionStatus } from '../../../../../../../common/types';
 
+import { useStartServices } from '../../../../hooks';
+
 import { ViewErrors } from './view_errors';
 
+jest.mock('../../../../hooks', () => {
+  return {
+    ...jest.requireActual('../../../../hooks'),
+    useLink: jest.fn(),
+    useStartServices: jest.fn(),
+  };
+});
+
+const mockUseStartServices = useStartServices as jest.Mock;
+
 jest.mock('@kbn/shared-ux-link-redirect-app', () => ({
   RedirectAppLinks: (props: any) => {
     return <div>{props.children}</div>;
   },
 }));
 
-jest.mock('../../../../hooks', () => {
-  return {
-    useStartServices: jest.fn().mockReturnValue({
-      http: {
-        basePath: {
-          prepend: jest.fn().mockImplementation((str) => 'http://localhost' + str),
+const mockStartServices = (isServerlessEnabled?: boolean) => {
+  mockUseStartServices.mockReturnValue({
+    application: {},
+    data: {
+      query: {
+        timefilter: {
+          timefilter: {
+            calculateBounds: jest.fn().mockReturnValue({
+              min: '2023-10-04T13:08:53.340Z',
+              max: '2023-10-05T13:08:53.340Z',
+            }),
+          },
         },
       },
-    }),
-  };
-});
+    },
+    http: {
+      basePath: {
+        prepend: (url: string) => 'http://localhost:5620' + url,
+      },
+    },
+    cloud: {
+      isServerlessEnabled,
+    },
+  });
+};
 
 describe('ViewErrors', () => {
   const renderComponent = (action: ActionStatus) => {
@@ -41,7 +67,30 @@ describe('ViewErrors', () => {
     );
   };
 
-  it('should render error message with btn to logs', () => {
+  it('should render error message with btn to Logs view if serverless not enabled', () => {
+    mockStartServices();
+    const result = renderComponent({
+      actionId: 'action1',
+      latestErrors: [
+        {
+          agentId: 'agent1',
+          error: 'Agent agent1 is not upgradeable',
+          timestamp: '2023-03-06T14:51:24.709Z',
+        },
+      ],
+    } as any);
+
+    const errorText = result.getByTestId('errorText');
+    expect(errorText.textContent).toEqual('Agent agent1 is not upgradeable');
+
+    const viewErrorBtn = result.getByTestId('viewInLogsBtn');
+    expect(viewErrorBtn.getAttribute('href')).toEqual(
+      `http://localhost:5620/app/logs/stream?logPosition=(end%3A'2023-03-06T14%3A56%3A24.709Z'%2Cstart%3A'2023-03-06T14%3A46%3A24.709Z'%2CstreamLive%3A!f)&logFilter=(expression%3A'elastic_agent.id%3Aagent1%20and%20(data_stream.dataset%3Aelastic_agent)%20and%20(log.level%3Aerror)'%2Ckind%3Akuery)`
+    );
+  });
+
+  it('should render error message with btn to Discover view if serverless enabled', () => {
+    mockStartServices(true);
     const result = renderComponent({
       actionId: 'action1',
       latestErrors: [
@@ -56,9 +105,9 @@ describe('ViewErrors', () => {
     const errorText = result.getByTestId('errorText');
     expect(errorText.textContent).toEqual('Agent agent1 is not upgradeable');
 
-    const viewErrorBtn = result.getByTestId('viewLogsBtn');
+    const viewErrorBtn = result.getByTestId('viewInDiscoverBtn');
     expect(viewErrorBtn.getAttribute('href')).toEqual(
-      `http://localhost/app/logs/stream?logPosition=(position%3A(time%3A1678114284709)%2CstreamLive%3A!f)&logFilter=(expression%3A'elastic_agent.id%3Aagent1%20and%20(data_stream.dataset%3Aelastic_agent)%20and%20(log.level%3Aerror)'%2Ckind%3Akuery)`
+      `http://localhost:5620/app/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2023-03-06T14:46:24.709Z',to:'2023-03-06T14:56:24.709Z'))&_a=(columns:!(event.dataset,message),index:'logs-*',query:(language:kuery,query:'elastic_agent.id:agent1 and (data_stream.dataset:elastic_agent) and (log.level:error)'))`
     );
   });
 });