[App Search] API Logs - set up basic view & routing (#95369) (#95434)

* Add basic API Logs view

* Update engine router + nav link

Co-authored-by: Constance <[email protected]>

x-pack/plugins/enterprise_search/public/applications/app_search/components/api_logs/api_logs.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { EuiPageHeader } from '@elastic/eui';
+
+import { LogRetentionCallout, LogRetentionTooltip } from '../log_retention';
+
+import { ApiLogs } from './';
+
+describe('ApiLogs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<ApiLogs engineBreadcrumb={['some engine']} />);
+
+    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('API Logs');
+    // TODO: Check for ApiLogsTable + NewApiEventsPrompt when those get added
+
+    expect(wrapper.find(LogRetentionCallout).prop('type')).toEqual('api');
+    expect(wrapper.find(LogRetentionTooltip).prop('type')).toEqual('api');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/api_logs/api_logs.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 { EuiPageHeader, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { FlashMessages } from '../../../shared/flash_messages';
+import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { BreadcrumbTrail } from '../../../shared/kibana_chrome/generate_breadcrumbs';
+
+import { LogRetentionCallout, LogRetentionTooltip, LogRetentionOptions } from '../log_retention';
+
+import { API_LOGS_TITLE, RECENT_API_EVENTS } from './constants';
+
+interface Props {
+  engineBreadcrumb: BreadcrumbTrail;
+}
+export const ApiLogs: React.FC<Props> = ({ engineBreadcrumb }) => {
+  return (
+    <>
+      <SetPageChrome trail={[...engineBreadcrumb, API_LOGS_TITLE]} />
+      <EuiPageHeader pageTitle={API_LOGS_TITLE} />
+
+      <FlashMessages />
+      <LogRetentionCallout type={LogRetentionOptions.API} />
+
+      <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false} wrap>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h2>{RECENT_API_EVENTS}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <LogRetentionTooltip type={LogRetentionOptions.API} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{/* TODO: NewApiEventsPrompt */}</EuiFlexItem>
+      </EuiFlexGroup>
+
+      {/* TODO: ApiLogsTable */}
+    </>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/api_logs/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { API_LOGS_TITLE } from './constants';
+export { ApiLogs } from './api_logs';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx

@@ -246,8 +246,7 @@ export const EngineNav: React.FC = () => {
       )}
       {canViewEngineApiLogs && (
         <SideNavLink
-          isExternal
-          to={getAppSearchUrl(generateEnginePath(ENGINE_API_LOGS_PATH))}
+          to={generateEnginePath(ENGINE_API_LOGS_PATH)}
           data-test-subj="EngineAPILogsLink"
         >
           {API_LOGS_TITLE}

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx

@@ -17,6 +17,7 @@ import { shallow } from 'enzyme';
 
 import { Loading } from '../../../shared/loading';
 import { AnalyticsRouter } from '../analytics';
+import { ApiLogs } from '../api_logs';
 import { CurationsRouter } from '../curations';
 import { EngineOverview } from '../engine_overview';
 import { RelevanceTuning } from '../relevance_tuning';
@@ -119,4 +120,11 @@ describe('EngineRouter', () => {
 
     expect(wrapper.find(ResultSettings)).toHaveLength(1);
   });
+
+  it('renders an API logs view', () => {
+    setMockValues({ ...values, myRole: { canViewEngineApiLogs: true } });
+    const wrapper = shallow(<EngineRouter />);
+
+    expect(wrapper.find(ApiLogs)).toHaveLength(1);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx

@@ -31,9 +31,10 @@ import {
   ENGINE_CURATIONS_PATH,
   ENGINE_RESULT_SETTINGS_PATH,
   // ENGINE_SEARCH_UI_PATH,
-  // ENGINE_API_LOGS_PATH,
+  ENGINE_API_LOGS_PATH,
 } from '../../routes';
 import { AnalyticsRouter } from '../analytics';
+import { ApiLogs } from '../api_logs';
 import { CurationsRouter } from '../curations';
 import { DocumentDetail, Documents } from '../documents';
 import { OVERVIEW_TITLE } from '../engine_overview';
@@ -58,7 +59,7 @@ export const EngineRouter: React.FC = () => {
       canManageEngineCurations,
       canManageEngineResultSettings,
       // canManageEngineSearchUi,
-      // canViewEngineApiLogs,
+      canViewEngineApiLogs,
     },
   } = useValues(AppLogic);
 
@@ -115,6 +116,11 @@ export const EngineRouter: React.FC = () => {
           <ResultSettings engineBreadcrumb={engineBreadcrumb} />
         </Route>
       )}
+      {canViewEngineApiLogs && (
+        <Route path={ENGINE_API_LOGS_PATH}>
+          <ApiLogs engineBreadcrumb={engineBreadcrumb} />
+        </Route>
+      )}
       <Route>
         <SetPageChrome trail={[...engineBreadcrumb, OVERVIEW_TITLE]} />
         <EngineOverview />

x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts

@@ -55,4 +55,4 @@ export const ENGINE_CURATIONS_NEW_PATH = `${ENGINE_CURATIONS_PATH}/new`;
 export const ENGINE_CURATION_PATH = `${ENGINE_CURATIONS_PATH}/:curationId`;
 
 export const ENGINE_SEARCH_UI_PATH = `${ENGINE_PATH}/reference_application/new`;
-export const ENGINE_API_LOGS_PATH = `${ENGINE_PATH}/api-logs`;
+export const ENGINE_API_LOGS_PATH = `${ENGINE_PATH}/api_logs`;