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

* Add basic API Logs view

* Update engine router + nav link
This commit is contained in:
Constance 2021-03-25 09:19:39 -07:00 committed by GitHub
parent 50d7cea812
commit b9ef084130
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 98 additions and 5 deletions

View file

@ -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');
});
});

View file

@ -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 */}
</>
);
};

View file

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

View file

@ -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}

View file

@ -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);
});
});

View file

@ -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 />

View file

@ -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`;