Skip to content

Commit

Permalink
[Enterprise Search] Engine overview layout stub (elastic#83756)
Browse files Browse the repository at this point in the history
* Set up Overview file

* Finish Overview page logic, stub out empty/metric views

* Stub in basic empty engine overview
- Minus document creation button & API code example

* Stub out EngineOverviewMetrics and unavailable empty prompt

* Stub out EngineOverMetrics components (stats, charts, logs)

* [Refactor] Pull out some document creation i18n strings to constants

- They're repeated/reused by the DocumentCreationPopover component

* PR feedback: Drop the regex

* PR feedback: RecentLogs -> RecentApiLogs

* PR feedback: Copy

* PR feedback: Copy, sentence-casing

* I forgot to rebase against my own PR :dead_inside:
  • Loading branch information
Constance authored and chrisronline committed Nov 19, 2020
1 parent d6cd489 commit 7ca801b
Show file tree
Hide file tree
Showing 24 changed files with 841 additions and 8 deletions.
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

0 comments on commit 7ca801b

Please sign in to comment.