Add CrawlerStatusBanner and CrawlerStatusIndicator to CrawlerOverview

elastic · Aug 3, 2021 · f8ab0fc · f8ab0fc
1 parent d605a18
commit f8ab0fc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/...rprise_search/public/applications/app_search/components/crawler/crawler_overview.test.tsx b/...rprise_search/public/applications/app_search/components/crawler/crawler_overview.test.tsx
@@ -13,10 +13,14 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { getPageHeaderActions } from '../../../test_helpers';
+
 import { AddDomainFlyout } from './components/add_domain/add_domain_flyout';
 import { AddDomainForm } from './components/add_domain/add_domain_form';
 import { AddDomainFormSubmitButton } from './components/add_domain/add_domain_form_submit_button';
 import { CrawlRequestsTable } from './components/crawl_requests_table';
+import { CrawlerStatusBanner } from './components/crawler_status_banner';
+import { CrawlerStatusIndicator } from './components/crawler_status_indicator/crawler_status_indicator';
 import { DomainsTable } from './components/domains_table';
 import { CrawlerOverview } from './crawler_overview';
 import {
@@ -75,6 +79,7 @@ const crawlRequests: CrawlRequestFromServer[] = [
 describe('CrawlerOverview', () => {
   const mockActions = {
     fetchCrawlerData: jest.fn(),
+    getLatestCrawlRequests: jest.fn(),
   };
 
   const mockValues = {
@@ -88,12 +93,26 @@ describe('CrawlerOverview', () => {
     setMockActions(mockActions);
   });
 
-  it('calls fetchCrawlerData on page load', () => {
+  it('calls fetchCrawlerData and starts polling on page load', () => {
     setMockValues(mockValues);
 
     shallow(<CrawlerOverview />);
 
     expect(mockActions.fetchCrawlerData).toHaveBeenCalledTimes(1);
+    expect(mockActions.getLatestCrawlRequests).toHaveBeenCalledWith(false);
+  });
+
+  it('contains a crawler status banner', () => {
+    setMockValues(mockValues);
+    const wrapper = shallow(<CrawlerOverview />);
+
+    expect(wrapper.find(CrawlerStatusBanner)).toHaveLength(1);
+  });
+
+  it('contains a crawler status indicator', () => {
+    const wrapper = shallow(<CrawlerOverview />);
+
+    expect(getPageHeaderActions(wrapper).find(CrawlerStatusIndicator)).toHaveLength(1);
   });
 
   it('hides the domain and crawl request tables when there are no domains, and no crawl requests', () => {

diff --git a/.../enterprise_search/public/applications/app_search/components/crawler/crawler_overview.tsx b/.../enterprise_search/public/applications/app_search/components/crawler/crawler_overview.tsx
@@ -21,25 +21,33 @@ import { AddDomainFlyout } from './components/add_domain/add_domain_flyout';
 import { AddDomainForm } from './components/add_domain/add_domain_form';
 import { AddDomainFormSubmitButton } from './components/add_domain/add_domain_form_submit_button';
 import { CrawlRequestsTable } from './components/crawl_requests_table';
+import { CrawlerStatusBanner } from './components/crawler_status_banner';
+import { CrawlerStatusIndicator } from './components/crawler_status_indicator/crawler_status_indicator';
 import { DomainsTable } from './components/domains_table';
 import { CRAWLER_TITLE } from './constants';
 import { CrawlerOverviewLogic } from './crawler_overview_logic';
 
 export const CrawlerOverview: React.FC = () => {
   const { crawlRequests, dataLoading, domains } = useValues(CrawlerOverviewLogic);
 
-  const { fetchCrawlerData } = useActions(CrawlerOverviewLogic);
+  const { fetchCrawlerData, getLatestCrawlRequests } = useActions(CrawlerOverviewLogic);
 
   useEffect(() => {
     fetchCrawlerData();
+    getLatestCrawlRequests(false);
   }, []);
 
   return (
     <AppSearchPageTemplate
       pageChrome={getEngineBreadcrumbs([CRAWLER_TITLE])}
-      pageHeader={{ pageTitle: CRAWLER_TITLE }}
+      pageHeader={{
+        pageTitle: CRAWLER_TITLE,
+        rightSideItems: [<CrawlerStatusIndicator />],
+      }}
       isLoading={dataLoading}
     >
+      <CrawlerStatusBanner />
+      <EuiSpacer size="l" />
       {domains.length > 0 ? (
         <>
           <EuiFlexGroup direction="row" alignItems="stretch">