[Enterprise Search] Engine overview layout stub (elastic#83756)

* 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:

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/constants.ts

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

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

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

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

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

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/constants.ts

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

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

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

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

@@ -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 './';
 
@@ -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', () => {

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

@@ -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,
@@ -46,6 +46,7 @@ import {
 } from './constants';
 
 import { Loading } from '../../../shared/loading';
+import { EngineOverview } from '../engine_overview';
 
 import { EngineLogic } from './';
 
@@ -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>
   );

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/index.ts

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

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

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

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

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

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

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