Stub out EngineOverMetrics components (stats, charts, logs)

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/engine_overview/components/index.ts

@@ -5,3 +5,6 @@
  */
 
 export { UnavailablePrompt } from './unavailable_prompt';
+export { TotalStats } from './total_stats';
+export { TotalCharts } from './total_charts';
+export { RecentLogs } from './recent_logs';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/recent_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 { EuiButton } from '../../../../shared/react_router_helpers';
+
+import { RecentLogs } from './recent_logs';
+
+describe('RecentLogs', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    jest.clearAllMocks();
+    setMockValues({
+      engineName: 'some-engine',
+    });
+    wrapper = shallow(<RecentLogs />);
+  });
+
+  it('renders the recent API logs table', () => {
+    expect(wrapper.find('h2').text()).toEqual('Recent API Events');
+    expect(wrapper.find(EuiButton).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_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 { EuiButton } 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 RecentLogs: 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>
+          <EuiButton to={engineRoute + ENGINE_API_LOGS_PATH} size="s">
+            {VIEW_API_LOGS}
+          </EuiButton>
+        </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 { EuiButton } 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(EuiButton).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(EuiButton).prop('to')).toEqual('/engines/some-engine/api-logs');
+    // TODO: find chart component
+  });
+});

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

@@ -0,0 +1,99 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageContentBody,
+  EuiTitle,
+  EuiText,
+} from '@elastic/eui';
+
+import { EuiButton } from '../../../../shared/react_router_helpers';
+
+import { ENGINE_ANALYTICS_PATH, ENGINE_API_LOGS_PATH, getEngineRoute } from '../../../routes';
+import { TOTAL_QUERIES, TOTAL_API_OPERATIONS } from '../../analytics/constants';
+import { VIEW_ANALYTICS, VIEW_API_LOGS, LAST_7_DAYS } from '../constants';
+
+import { EngineLogic } from '../../engine';
+import { EngineOverviewLogic } from '../';
+
+export const TotalCharts: React.FC = () => {
+  const { engineName } = useValues(EngineLogic);
+  const engineRoute = getEngineRoute(engineName);
+
+  const {
+    // startDate,
+    // endDate,
+    // queriesPerDay,
+    // operationsPerDay,
+  } = useValues(EngineOverviewLogic);
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiPageContent data-test-subj="TotalQueriesChart">
+          <EuiPageContentHeader responsive={false}>
+            <EuiPageContentHeaderSection>
+              <EuiTitle size="xs">
+                <h2>{TOTAL_QUERIES}</h2>
+              </EuiTitle>
+              <EuiText size="s" color="subdued">
+                {LAST_7_DAYS}
+              </EuiText>
+            </EuiPageContentHeaderSection>
+            <EuiPageContentHeaderSection>
+              <EuiButton to={engineRoute + ENGINE_ANALYTICS_PATH} size="s">
+                {VIEW_ANALYTICS}
+              </EuiButton>
+            </EuiPageContentHeaderSection>
+          </EuiPageContentHeader>
+          <EuiPageContentBody>
+            TODO: Analytics chart
+            {/* <EngineAnalytics
+              data={[queriesPerDay]}
+              startDate={new Date(startDate)}
+              endDate={new Date(endDate)}
+            /> */}
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPageContent data-test-subj="TotalApiOperationsChart">
+          <EuiPageContentHeader responsive={false}>
+            <EuiPageContentHeaderSection>
+              <EuiTitle size="xs">
+                <h2>{TOTAL_API_OPERATIONS}</h2>
+              </EuiTitle>
+              <EuiText size="s" color="subdued">
+                {LAST_7_DAYS}
+              </EuiText>
+            </EuiPageContentHeaderSection>
+            <EuiPageContentHeaderSection>
+              <EuiButton to={engineRoute + ENGINE_API_LOGS_PATH} size="s">
+                {VIEW_API_LOGS}
+              </EuiButton>
+            </EuiPageContentHeaderSection>
+          </EuiPageContentHeader>
+          <EuiPageContentBody>
+            TODO: API Logs chart
+            {/* <EngineAnalytics
+              data={[operationsPerDay]}
+              startDate={new Date(startDate)}
+              endDate={new Date(endDate)}
+            /> */}
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

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

@@ -0,0 +1,51 @@
+/*
+ * 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 { EuiStat } from '@elastic/eui';
+
+import { TotalStats } from './total_stats';
+
+describe('TotalStats', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    jest.clearAllMocks();
+    setMockValues({
+      totalQueries: 11,
+      documentCount: 22,
+      totalClicks: 33,
+    });
+    wrapper = shallow(<TotalStats />);
+  });
+
+  it('renders the total queries stat', () => {
+    expect(wrapper.find('[data-test-subj="TotalQueriesCard"]')).toHaveLength(1);
+
+    const card = wrapper.find(EuiStat).at(0);
+    expect(card.prop('title')).toEqual(11);
+    expect(card.prop('description')).toEqual('Total Queries');
+  });
+
+  it('renders the total documents stat', () => {
+    expect(wrapper.find('[data-test-subj="TotalDocumentsCard"]')).toHaveLength(1);
+
+    const card = wrapper.find(EuiStat).at(1);
+    expect(card.prop('title')).toEqual(22);
+    expect(card.prop('description')).toEqual('Total Documents');
+  });
+
+  it('renders the total clicks stat', () => {
+    expect(wrapper.find('[data-test-subj="TotalClicksCard"]')).toHaveLength(1);
+
+    const card = wrapper.find(EuiStat).at(2);
+    expect(card.prop('title')).toEqual(33);
+    expect(card.prop('description')).toEqual('Total Clicks');
+  });
+});

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat } from '@elastic/eui';
+
+import { TOTAL_QUERIES, TOTAL_DOCUMENTS, TOTAL_CLICKS } from '../../analytics/constants';
+
+import { EngineOverviewLogic } from '../';
+
+export const TotalStats: React.FC = () => {
+  const { totalQueries, documentCount, totalClicks } = useValues(EngineOverviewLogic);
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiPanel data-test-subj="TotalQueriesCard">
+          <EuiStat title={totalQueries} description={TOTAL_QUERIES} titleColor="primary" />
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPanel data-test-subj="TotalDocumentsCard">
+          <EuiStat title={documentCount} description={TOTAL_DOCUMENTS} titleColor="primary" />
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPanel data-test-subj="TotalClicksCard">
+          <EuiStat title={totalClicks} description={TOTAL_CLICKS} titleColor="primary" />
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

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

@@ -10,3 +10,18 @@ export const OVERVIEW_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.overview.title',
   { defaultMessage: 'Overview' }
 );
+
+export const VIEW_ANALYTICS = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.overview.analyticsLink',
+  { defaultMessage: 'View Analytics' }
+);
+
+export const VIEW_API_LOGS = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.overview.apiLogsLink',
+  { defaultMessage: 'View API Logs' }
+);
+
+export const LAST_7_DAYS = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.overview.chartDuration',
+  { defaultMessage: 'Last 7 days' }
+);