[App Search] API logs: Server route + ApiLogsLogic + useEffects (#95732…

…) (#95831)

* Set up API route

* Set up API types

* Set up date util needed by filters dates

* Add ApiLogsLogic

* Update ApiLogs and EngineOverview views with polling behavior

* Add API type notes - maybe serves as a TODO to clean up our API data some day

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

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

@@ -5,28 +5,67 @@
  * 2.0.
  */
 
+import { setMockValues, setMockActions, rerender } from '../../../__mocks__';
+import '../../../__mocks__/shallow_useeffect.mock';
+
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { EuiPageHeader } from '@elastic/eui';
 
+import { Loading } from '../../../shared/loading';
 import { LogRetentionCallout, LogRetentionTooltip } from '../log_retention';
 
 import { ApiLogs } from './';
 
 describe('ApiLogs', () => {
+  const values = {
+    dataLoading: false,
+    apiLogs: [],
+    meta: { page: { current: 1 } },
+  };
+  const actions = {
+    fetchApiLogs: jest.fn(),
+    pollForApiLogs: jest.fn(),
+  };
+
+  let wrapper: ShallowWrapper;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    setMockValues(values);
+    setMockActions(actions);
+    wrapper = shallow(<ApiLogs engineBreadcrumb={['some engine']} />);
   });
 
   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');
   });
+
+  it('renders a loading screen', () => {
+    setMockValues({ ...values, dataLoading: true, apiLogs: [] });
+    rerender(wrapper);
+
+    expect(wrapper.find(Loading)).toHaveLength(1);
+  });
+
+  describe('effects', () => {
+    it('calls a manual fetchApiLogs on page load and pagination', () => {
+      expect(actions.fetchApiLogs).toHaveBeenCalledTimes(1);
+
+      setMockValues({ ...values, meta: { page: { current: 2 } } });
+      rerender(wrapper);
+
+      expect(actions.fetchApiLogs).toHaveBeenCalledTimes(2);
+    });
+
+    it('starts pollForApiLogs on page load', () => {
+      expect(actions.pollForApiLogs).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -5,22 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { useValues, useActions } from 'kea';
 
 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 { Loading } from '../../../shared/loading';
 
 import { LogRetentionCallout, LogRetentionTooltip, LogRetentionOptions } from '../log_retention';
 
 import { API_LOGS_TITLE, RECENT_API_EVENTS } from './constants';
 
+import { ApiLogsLogic } from './';
+
 interface Props {
   engineBreadcrumb: BreadcrumbTrail;
 }
 export const ApiLogs: React.FC<Props> = ({ engineBreadcrumb }) => {
+  const { dataLoading, apiLogs, meta } = useValues(ApiLogsLogic);
+  const { fetchApiLogs, pollForApiLogs } = useActions(ApiLogsLogic);
+
+  useEffect(() => {
+    fetchApiLogs();
+  }, [meta.page.current]);
+
+  useEffect(() => {
+    pollForApiLogs();
+  }, []);
+
+  if (dataLoading && !apiLogs.length) return <Loading />;
+
   return (
     <>
       <SetPageChrome trail={[...engineBreadcrumb, API_LOGS_TITLE]} />