[Enterprise Search] Convert IndexingStatus to use logic for fetching

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx

@@ -4,21 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import '../../__mocks__/kea.mock';
+import '../../__mocks__/shallow_useeffect.mock';
+
+import { setMockActions, setMockValues } from '../../__mocks__';
+
 import React from 'react';
 import { shallow } from 'enzyme';
 
 import { EuiPanel } from '@elastic/eui';
 
 import { IndexingStatusContent } from './indexing_status_content';
 import { IndexingStatusErrors } from './indexing_status_errors';
-import { IndexingStatusFetcher } from './indexing_status_fetcher';
 import { IndexingStatus } from './indexing_status';
 
 describe('IndexingStatus', () => {
   const getItemDetailPath = jest.fn();
   const getStatusPath = jest.fn();
   const onComplete = jest.fn();
   const setGlobalIndexingStatus = jest.fn();
+  const fetchIndexingStatus = jest.fn();
 
   const props = {
     percentageComplete: 50,
@@ -32,20 +37,29 @@ describe('IndexingStatus', () => {
     setGlobalIndexingStatus,
   };
 
+  beforeEach(() => {
+    setMockActions({ fetchIndexingStatus });
+  });
+
   it('renders', () => {
+    setMockValues({
+      percentageComplete: 50,
+      numDocumentsWithErrors: 0,
+    });
     const wrapper = shallow(<IndexingStatus {...props} />);
-    const fetcher = wrapper.find(IndexingStatusFetcher).prop('children')(
-      props.percentageComplete,
-      props.numDocumentsWithErrors
-    );
 
-    expect(shallow(fetcher).find(EuiPanel)).toHaveLength(1);
-    expect(shallow(fetcher).find(IndexingStatusContent)).toHaveLength(1);
+    expect(wrapper.find(EuiPanel)).toHaveLength(1);
+    expect(wrapper.find(IndexingStatusContent)).toHaveLength(1);
+    expect(fetchIndexingStatus).toHaveBeenCalled();
   });
 
   it('renders errors', () => {
+    setMockValues({
+      percentageComplete: 100,
+      numDocumentsWithErrors: 1,
+    });
     const wrapper = shallow(<IndexingStatus {...props} percentageComplete={100} />);
-    const fetcher = wrapper.find(IndexingStatusFetcher).prop('children')(100, 1);
-    expect(shallow(fetcher).find(IndexingStatusErrors)).toHaveLength(1);
+
+    expect(wrapper.find(IndexingStatusErrors)).toHaveLength(1);
   });
 });

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx

@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { useValues, useActions } from 'kea';
 
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 
 import { IndexingStatusContent } from './indexing_status_content';
 import { IndexingStatusErrors } from './indexing_status_errors';
-import { IndexingStatusFetcher } from './indexing_status_fetcher';
+import { IndexingStatusLogic } from './indexing_status_logic';
 
 import { IIndexingStatus } from '../types';
 
@@ -23,22 +25,34 @@ export interface IIndexingStatusProps extends IIndexingStatus {
   setGlobalIndexingStatus?(activeReindexJob: IIndexingStatus): void;
 }
 
-export const IndexingStatus: React.FC<IIndexingStatusProps> = (props) => (
-  <IndexingStatusFetcher {...props}>
-    {(percentageComplete, numDocumentsWithErrors) => (
-      <div>
-        {percentageComplete < 100 && (
-          <EuiPanel paddingSize="l" hasShadow>
-            <IndexingStatusContent percentageComplete={percentageComplete} />
-          </EuiPanel>
-        )}
-        {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
-          <>
-            <EuiSpacer />
-            <IndexingStatusErrors viewLinkPath={props.viewLinkPath} />
-          </>
-        )}
-      </div>
-    )}
-  </IndexingStatusFetcher>
-);
+export const IndexingStatus: React.FC<IIndexingStatusProps> = ({
+  itemId,
+  activeReindexJobId,
+  viewLinkPath,
+  getStatusPath,
+  onComplete,
+}) => {
+  const { percentageComplete, numDocumentsWithErrors } = useValues(IndexingStatusLogic);
+  const { fetchIndexingStatus } = useActions(IndexingStatusLogic);
+  const statusPath = getStatusPath(itemId, activeReindexJobId);
+
+  useEffect(() => {
+    fetchIndexingStatus({ statusPath, onComplete });
+  }, []);
+
+  return (
+    <div className="c-stui-indexing-status-wrapper">
+      {percentageComplete < 100 && (
+        <EuiPanel paddingSize="l" hasShadow={true}>
+          <IndexingStatusContent percentageComplete={percentageComplete} />
+        </EuiPanel>
+      )}
+      {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
+        <>
+          <EuiSpacer />
+          <IndexingStatusErrors viewLinkPath={viewLinkPath} />
+        </>
+      )}
+    </div>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_logic.test.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 { resetContext } from 'kea';
+
+jest.mock('../http', () => ({
+  HttpLogic: {
+    values: { http: { get: jest.fn() } },
+  },
+}));
+import { HttpLogic } from '../http';
+
+jest.mock('../flash_messages', () => ({
+  flashAPIErrors: jest.fn(),
+}));
+import { flashAPIErrors } from '../flash_messages';
+
+import { IndexingStatusLogic } from './indexing_status_logic';
+
+describe('IndexingStatusLogic', () => {
+  jest.useFakeTimers();
+
+  let unmount: any;
+
+  const mockStatusResponse = {
+    percentageComplete: 50,
+    numDocumentsWithErrors: 3,
+    activeReindexJobId: 1,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    resetContext({});
+    unmount = IndexingStatusLogic.mount();
+  });
+
+  it('has expected default values', () => {
+    expect(IndexingStatusLogic.values).toEqual({
+      percentageComplete: 100,
+      numDocumentsWithErrors: 0,
+    });
+  });
+
+  describe('setIndexingStatus', () => {
+    it('sets reducers', () => {
+      IndexingStatusLogic.actions.setIndexingStatus(mockStatusResponse);
+
+      expect(IndexingStatusLogic.values.percentageComplete).toEqual(
+        mockStatusResponse.percentageComplete
+      );
+      expect(IndexingStatusLogic.values.numDocumentsWithErrors).toEqual(
+        mockStatusResponse.numDocumentsWithErrors
+      );
+    });
+  });
+
+  describe('fetchIndexingStatus', () => {
+    const statusPath = '/api/workplace_search/path/123';
+    const onComplete = jest.fn();
+    const TIMEOUT = 3000;
+
+    it('calls API and sets values', async () => {
+      const setIndexingStatusSpy = jest.spyOn(IndexingStatusLogic.actions, 'setIndexingStatus');
+      const promise = Promise.resolve(mockStatusResponse);
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      IndexingStatusLogic.actions.fetchIndexingStatus({ statusPath, onComplete });
+      jest.advanceTimersByTime(TIMEOUT);
+
+      expect(HttpLogic.values.http.get).toHaveBeenCalledWith(statusPath);
+      await promise;
+
+      expect(setIndexingStatusSpy).toHaveBeenCalledWith(mockStatusResponse);
+    });
+
+    it('handles error', async () => {
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      IndexingStatusLogic.actions.fetchIndexingStatus({ statusPath, onComplete });
+      jest.advanceTimersByTime(TIMEOUT);
+
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+
+    it('handles indexing complete state', async () => {
+      const promise = Promise.resolve({ ...mockStatusResponse, percentageComplete: 100 });
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+      IndexingStatusLogic.actions.fetchIndexingStatus({ statusPath, onComplete });
+      jest.advanceTimersByTime(TIMEOUT);
+
+      await promise;
+
+      expect(clearInterval).toHaveBeenCalled();
+      expect(onComplete).toHaveBeenCalledWith(mockStatusResponse.numDocumentsWithErrors);
+    });
+
+    it('handles unmounting', async () => {
+      unmount();
+      expect(clearInterval).toHaveBeenCalled();
+    });
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_logic.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 { kea, MakeLogicType } from 'kea';
+
+import { HttpLogic } from '../http';
+
+import { IIndexingStatus } from '../types';
+
+import { flashAPIErrors } from '../flash_messages';
+
+interface IndexingStatusProps {
+  statusPath: string;
+  onComplete(numDocumentsWithErrors: number): void;
+}
+
+interface IndexingStatusActions {
+  fetchIndexingStatus(props: IndexingStatusProps): IndexingStatusProps;
+  setIndexingStatus({
+    percentageComplete,
+    numDocumentsWithErrors,
+  }: IIndexingStatus): IIndexingStatus;
+}
+
+interface IndexingStatusValues {
+  percentageComplete: number;
+  numDocumentsWithErrors: number;
+}
+
+let pollingInterval: number;
+
+export const IndexingStatusLogic = kea<MakeLogicType<IndexingStatusValues, IndexingStatusActions>>({
+  actions: {
+    fetchIndexingStatus: ({ statusPath, onComplete }) => ({ statusPath, onComplete }),
+    setIndexingStatus: ({ numDocumentsWithErrors, percentageComplete }) => ({
+      numDocumentsWithErrors,
+      percentageComplete,
+    }),
+  },
+  reducers: {
+    percentageComplete: [
+      100,
+      {
+        setIndexingStatus: (_, { percentageComplete }) => percentageComplete,
+      },
+    ],
+    numDocumentsWithErrors: [
+      0,
+      {
+        setIndexingStatus: (_, { numDocumentsWithErrors }) => numDocumentsWithErrors,
+      },
+    ],
+  },
+  listeners: ({ actions }) => ({
+    fetchIndexingStatus: ({ statusPath, onComplete }: IndexingStatusProps) => {
+      pollingInterval = window.setInterval(async () => {
+        try {
+          const response = (await HttpLogic.values.http.get(statusPath)) as IIndexingStatus;
+          if (response.percentageComplete >= 100) {
+            clearInterval(pollingInterval);
+          }
+          actions.setIndexingStatus(response);
+          if (response.percentageComplete >= 100 && onComplete) {
+            onComplete(response.numDocumentsWithErrors);
+          }
+        } catch (e) {
+          flashAPIErrors(e);
+        }
+      }, 3000);
+    },
+  }),
+  events: () => ({
+    beforeUnmount() {
+      clearInterval(pollingInterval);
+    },
+  }),
+});