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.

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

[Enterprise Search] Engine overview layout stub #83756

Merged
merged 11 commits into from
Nov 19, 2020
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export const TOTAL_DOCUMENTS = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.totalDocuments',
{ defaultMessage: 'Total documents' }
);

export const TOTAL_API_OPERATIONS = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.totalApiOperations',
{ defaultMessage: 'Total API operations' }
);

export const TOTAL_QUERIES = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.totalQueries',
{ defaultMessage: 'Total queries' }
);

export const TOTAL_CLICKS = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.totalClicks',
{ defaultMessage: 'Total clicks' }
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export const RECENT_API_EVENTS = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.apiLogs.recent',
{ defaultMessage: 'Recent API events' }
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiCode, EuiLink } from '@elastic/eui';

import { DOCS_PREFIX } from '../../routes';

export const DOCUMENT_CREATION_DESCRIPTION = (
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.documentCreation.description"
defaultMessage="There are three ways to send documents to your engine for indexing. You can paste raw JSON, upload a {jsonCode} file, or {postCode} to the {documentsApiLink} endpoint. Click on your choice below or see {apiStrong}."
values={{
jsonCode: <EuiCode>.json</EuiCode>,
postCode: <EuiCode>POST</EuiCode>,
documentsApiLink: (
<EuiLink target="_blank" href={`${DOCS_PREFIX}/indexing-documents-guide.html`}>
documents API
</EuiLink>
),
apiStrong: <strong>Indexing by API</strong>,
}}
/>
);

export const DOCUMENT_API_INDEXING_TITLE = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.documentCreation.api.title',
{ defaultMessage: 'Indexing by API' }
);

export const DOCUMENT_API_INDEXING_DESCRIPTION = (
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.documentCreation.api.description"
defaultMessage="The {documentsApiLink} can be used to add new documents to your engine, update documents, retrieve documents by id, and delete documents. There are a variety of {clientLibrariesLink} to help you get started."
values={{
documentsApiLink: (
<EuiLink target="_blank" href={`${DOCS_PREFIX}/indexing-documents-guide.html`}>
documents API
</EuiLink>
),
clientLibrariesLink: (
<EuiLink target="_blank" href={`${DOCS_PREFIX}/api-clients.html`}>
client libraries
</EuiLink>
),
}}
/>
);
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ import { i18n } from '@kbn/i18n';
// TODO: It's very likely that we'll move these i18n constants to their respective component
// folders once those are migrated over. This is a temporary way of DRYing them out for now.

export const OVERVIEW_TITLE = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.overview.title',
{ defaultMessage: 'Overview' }
);
export const ANALYTICS_TITLE = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.title',
{ defaultMessage: 'Analytics' }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ import {
} from '../../routes';
import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
import { ENGINES_TITLE } from '../engines';
import { OVERVIEW_TITLE } from '../engine_overview';
import {
OVERVIEW_TITLE,
ANALYTICS_TITLE,
DOCUMENTS_TITLE,
SCHEMA_TITLE,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ jest.mock('../../../shared/flash_messages', () => ({
import { setQueuedErrorMessage } from '../../../shared/flash_messages';

import { Loading } from '../../../shared/loading';
import { EngineOverview } from '../engine_overview';

import { EngineRouter } from './';

Expand Down Expand Up @@ -71,7 +72,7 @@ describe('EngineRouter', () => {
const wrapper = shallow(<EngineRouter />);

expect(wrapper.find(Switch)).toHaveLength(1);
expect(wrapper.find('[data-test-subj="EngineOverviewTODO"]')).toHaveLength(1);
expect(wrapper.find(EngineOverview)).toHaveLength(1);
});

it('renders an analytics view', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ import {
// ENGINE_API_LOGS_PATH,
} from '../../routes';
import { ENGINES_TITLE } from '../engines';
import { OVERVIEW_TITLE } from '../engine_overview';
import {
OVERVIEW_TITLE,
ANALYTICS_TITLE,
// DOCUMENTS_TITLE,
// SCHEMA_TITLE,
Expand All @@ -46,6 +46,7 @@ import {
} from './constants';

import { Loading } from '../../../shared/loading';
import { EngineOverview } from '../engine_overview';

import { EngineLogic } from './';

Expand Down Expand Up @@ -100,7 +101,7 @@ export const EngineRouter: React.FC = () => {
)}
<Route>
<SetPageChrome trail={[...engineBreadcrumb, OVERVIEW_TITLE]} />
<div data-test-subj="EngineOverviewTODO">Overview</div>
<EngineOverview />
</Route>
</Switch>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { UnavailablePrompt } from './unavailable_prompt';
export { TotalStats } from './total_stats';
export { TotalCharts } from './total_charts';
export { RecentApiLogs } from './recent_api_logs';
Original file line number Diff line number Diff line change
@@ -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;
* you may not use this file except in compliance with the Elastic License.
*/

import { setMockValues } from '../../../../__mocks__/kea.mock';

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';

import { EuiButtonTo } from '../../../../shared/react_router_helpers';

import { RecentApiLogs } from './recent_api_logs';

describe('RecentApiLogs', () => {
let wrapper: ShallowWrapper;

beforeAll(() => {
jest.clearAllMocks();
setMockValues({
engineName: 'some-engine',
});
wrapper = shallow(<RecentApiLogs />);
});

it('renders the recent API logs table', () => {
expect(wrapper.find('h2').text()).toEqual('Recent API events');
expect(wrapper.find(EuiButtonTo).prop('to')).toEqual('/engines/some-engine/api-logs');
// TODO: expect(wrapper.find(ApiLogsTable)).toHaveLength(1)
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { useValues } from 'kea';

import {
EuiPageContent,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiPageContentBody,
EuiTitle,
} from '@elastic/eui';

import { EuiButtonTo } from '../../../../shared/react_router_helpers';

import { ENGINE_API_LOGS_PATH, getEngineRoute } from '../../../routes';
import { RECENT_API_EVENTS } from '../../api_logs/constants';
import { VIEW_API_LOGS } from '../constants';

import { EngineLogic } from '../../engine';

export const RecentApiLogs: React.FC = () => {
const { engineName } = useValues(EngineLogic);
const engineRoute = getEngineRoute(engineName);

return (
<EuiPageContent>
<EuiPageContentHeader responsive={false}>
<EuiPageContentHeaderSection>
<EuiTitle size="xs">
<h2>{RECENT_API_EVENTS}</h2>
</EuiTitle>
</EuiPageContentHeaderSection>
<EuiPageContentHeaderSection>
<EuiButtonTo to={engineRoute + ENGINE_API_LOGS_PATH} size="s">
{VIEW_API_LOGS}
</EuiButtonTo>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>
TODO: API Logs Table
{/* <ApiLogsTable hidePagination={true} /> */}
</EuiPageContentBody>
</EuiPageContent>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { setMockValues } from '../../../../__mocks__/kea.mock';

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';

import { EuiButtonTo } from '../../../../shared/react_router_helpers';

import { TotalCharts } from './total_charts';

describe('TotalCharts', () => {
let wrapper: ShallowWrapper;

beforeAll(() => {
jest.clearAllMocks();
setMockValues({
engineName: 'some-engine',
startDate: '1970-01-01',
endDate: '1970-01-08',
queriesPerDay: [0, 1, 2, 3, 5, 10, 50],
operationsPerDay: [0, 0, 0, 0, 0, 0, 0],
});
wrapper = shallow(<TotalCharts />);
});

it('renders the total queries chart', () => {
const chart = wrapper.find('[data-test-subj="TotalQueriesChart"]');

expect(chart.find('h2').text()).toEqual('Total queries');
expect(chart.find(EuiButtonTo).prop('to')).toEqual('/engines/some-engine/analytics');
// TODO: find chart component
});

it('renders the total API operations chart', () => {
const chart = wrapper.find('[data-test-subj="TotalApiOperationsChart"]');

expect(chart.find('h2').text()).toEqual('Total API operations');
expect(chart.find(EuiButtonTo).prop('to')).toEqual('/engines/some-engine/api-logs');
// TODO: find chart component
});
});
Loading