Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Mar 30, 2021
+715 −5
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b52ae2c
Set up API route
cee-chen Mar 29, 2021
3d77232
Set up API types
cee-chen Mar 29, 2021
389096d
Set up date util needed by filters dates
cee-chen Mar 29, 2021
2ae83ba
Add ApiLogsLogic
cee-chen Mar 30, 2021
2250d82
Update ApiLogs and EngineOverview views with polling behavior
cee-chen Mar 30, 2021
f87d871
Add API type notes - maybe serves as a TODO to clean up our API data …
cee-chen Mar 30, 2021
24cd8a5
Merge branch 'master' into api-logs-2
constancecchen Mar 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 42 additions & 3 deletions ...ns/enterprise_search/public/applications/app_search/components/api_logs/api_logs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});
20 changes: 19 additions & 1 deletion ...plugins/enterprise_search/public/applications/app_search/components/api_logs/api_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}, []);
Comment on lines +32 to +38
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ I hope with this useEffect example it makes more sense why I split out the concept of an "immediate" fetch and a "poll" fetch in the logic! Also for even more context, check out the different requirements for the Engine Overview:

kibana/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/recent_api_logs.tsx

Lines 24 to 27 in 2250d82

useEffect(() => {
fetchApiLogs();
pollForApiLogs();
}, []);

The table there does not have pagination, so it doesn't need an extra effect and only calls fetchApiLogs once on load.


if (dataLoading && !apiLogs.length) return <Loading />;

return (
<>
<SetPageChrome trail={[...engineBreadcrumb, API_LOGS_TITLE]} />
Expand Down
Loading