[7.11] [Uptime] clear ping state when PingList component in unmounted (#88321)

x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.test.tsx

@@ -5,58 +5,58 @@
  */
 
 import React from 'react';
-import { shallowWithIntl } from '@kbn/test/jest';
 import { PingList } from './ping_list';
 import { Ping, PingsResponse } from '../../../../common/runtime_types';
 import { ExpandedRowMap } from '../../overview/monitor_list/types';
 import { rowShouldExpand, toggleDetails } from './columns/expand_row';
 import * as pingListHook from './use_pings';
-import { mockReduxHooks } from '../../../lib/helper/test_helpers';
+import { mockDispatch } from '../../../lib/helper/test_helpers';
+import { render } from '../../../lib/helper/rtl_helpers';
 
-mockReduxHooks();
+mockDispatch();
 
 describe('PingList component', () => {
-  let response: PingsResponse;
+  const defaultPings = [
+    {
+      docId: 'fewjio21',
+      timestamp: '2019-01-28T17:47:08.078Z',
+      error: {
+        message: 'dial tcp 127.0.0.1:9200: connect: connection refused',
+        type: 'io',
+      },
+      monitor: {
+        duration: { us: 1430 },
+        id: 'auto-tcp-0X81440A68E839814F',
+        ip: '127.0.0.1',
+        name: '',
+        status: 'down',
+        type: 'tcp',
+      },
+    },
+    {
+      docId: 'fewjoo21',
+      timestamp: '2019-01-28T17:47:09.075Z',
+      error: {
+        message: 'dial tcp 127.0.0.1:9200: connect: connection refused',
+        type: 'io',
+      },
+      monitor: {
+        duration: { us: 1370 },
+        id: 'auto-tcp-0X81440A68E839814D',
+        ip: '255.255.255.0',
+        name: '',
+        status: 'down',
+        type: 'tcp',
+      },
+    },
+  ];
 
-  beforeAll(() => {
-    response = {
-      total: 9231,
-      pings: [
-        {
-          docId: 'fewjio21',
-          timestamp: '2019-01-28T17:47:08.078Z',
-          error: {
-            message: 'dial tcp 127.0.0.1:9200: connect: connection refused',
-            type: 'io',
-          },
-          monitor: {
-            duration: { us: 1430 },
-            id: 'auto-tcp-0X81440A68E839814F',
-            ip: '127.0.0.1',
-            name: '',
-            status: 'down',
-            type: 'tcp',
-          },
-        },
-        {
-          docId: 'fewjoo21',
-          timestamp: '2019-01-28T17:47:09.075Z',
-          error: {
-            message: 'dial tcp 127.0.0.1:9200: connect: connection refused',
-            type: 'io',
-          },
-          monitor: {
-            duration: { us: 1370 },
-            id: 'auto-tcp-0X81440A68E839814D',
-            ip: '127.0.0.1',
-            name: '',
-            status: 'down',
-            type: 'tcp',
-          },
-        },
-      ],
-    };
+  const response: PingsResponse = {
+    total: 9231,
+    pings: defaultPings,
+  };
 
+  beforeEach(() => {
     jest.spyOn(pingListHook, 'usePingsList').mockReturnValue({
       ...response,
       error: undefined,
@@ -65,9 +65,34 @@ describe('PingList component', () => {
     });
   });
 
-  it('renders sorted list without errors', () => {
-    const component = shallowWithIntl(<PingList />);
-    expect(component).toMatchSnapshot();
+  it('renders loading state when pings are loading', () => {
+    jest.spyOn(pingListHook, 'usePingsList').mockReturnValue({
+      pings: [],
+      total: 0,
+      error: undefined,
+      loading: true,
+      failedSteps: { steps: [], checkGroup: '1-f-4d-4f' },
+    });
+    const { getByText } = render(<PingList />);
+    expect(getByText('Loading history...')).toBeInTheDocument();
+  });
+
+  it('renders no pings state when pings are not found', () => {
+    jest.spyOn(pingListHook, 'usePingsList').mockReturnValue({
+      pings: [],
+      total: 0,
+      error: undefined,
+      loading: false,
+      failedSteps: { steps: [], checkGroup: '1-f-4d-4f' },
+    });
+    const { getByText } = render(<PingList />);
+    expect(getByText('No history found')).toBeInTheDocument();
+  });
+
+  it('renders list without errors', () => {
+    const { getByText } = render(<PingList />);
+    expect(getByText(`${response.pings[0].monitor.ip}`)).toBeInTheDocument();
+    expect(getByText(`${response.pings[1].monitor.ip}`)).toBeInTheDocument();
   });
 
   describe('toggleDetails', () => {
@@ -139,7 +164,7 @@ describe('PingList component', () => {
                   "us": 1370,
                 },
                 "id": "auto-tcp-0X81440A68E839814D",
-                "ip": "127.0.0.1",
+                "ip": "255.255.255.0",
                 "name": "",
                 "status": "down",
                 "type": "tcp",

x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx

@@ -25,6 +25,7 @@ import { PingTimestamp } from './columns/ping_timestamp';
 import { FailedStep } from './columns/failed_step';
 import { usePingsList } from './use_pings';
 import { PingListHeader } from './ping_list_header';
+import { clearPings } from '../../../state/actions';
 
 export const SpanWithMargin = styled.span`
   margin-right: 16px;
@@ -54,6 +55,12 @@ export const PingList = () => {
     Object.keys(expandedRows).filter((e) => !pings.some(({ docId }) => docId === e))
   );
 
+  useEffect(() => {
+    return () => {
+      dispatch(clearPings());
+    };
+  }, [dispatch]);
+
   useEffect(() => {
     const parsed = JSON.parse(expandedIdsToRemove);
     if (parsed.length) {
@@ -200,6 +207,15 @@ export const PingList = () => {
         itemId="docId"
         itemIdToExpandedRowMap={expandedRows}
         pagination={pagination}
+        noItemsMessage={
+          loading
+            ? i18n.translate('xpack.uptime.pingList.pingsLoadingMesssage', {
+                defaultMessage: 'Loading history...',
+              })
+            : i18n.translate('xpack.uptime.pingList.pingsUnavailableMessage', {
+                defaultMessage: 'No history found',
+              })
+        }
         onChange={(criteria: any) => {
           setPageSize(criteria.page!.size);
           setPageIndex(criteria.page!.index);

x-pack/plugins/uptime/public/lib/helper/test_helpers.ts

@@ -62,6 +62,10 @@ export function mockReduxHooks(response?: any) {
   jest.spyOn(redux, 'useSelector').mockReturnValue(response);
 }
 
+export function mockDispatch() {
+  jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn());
+}
+
 export function mockReactRouterDomHooks({ useParamsResponse }: { useParamsResponse: any }) {
   jest.spyOn(reactRouterDom, 'useParams').mockReturnValue(useParamsResponse);
 }

x-pack/plugins/uptime/public/state/actions/ping.ts

@@ -12,6 +12,8 @@ import {
   GetPingsParams,
 } from '../../../common/runtime_types';
 
+export const clearPings = createAction('CLEAR PINGS');
+
 export const getPingHistogram = createAction<GetPingHistogramParams>('GET_PING_HISTOGRAM');
 export const getPingHistogramSuccess = createAction<HistogramResult>('GET_PING_HISTOGRAM_SUCCESS');
 export const getPingHistogramFail = createAction<Error>('GET_PING_HISTOGRAM_FAIL');

x-pack/plugins/uptime/public/state/reducers/ping_list.ts

@@ -6,7 +6,7 @@
 
 import { handleActions, Action } from 'redux-actions';
 import { PingsResponse } from '../../../common/runtime_types';
-import { getPings, getPingsSuccess, getPingsFail } from '../actions';
+import { clearPings, getPings, getPingsSuccess, getPingsFail } from '../actions';
 
 export interface PingListState {
   pingList: PingsResponse;
@@ -26,6 +26,10 @@ type PingListPayload = PingsResponse & Error;
 
 export const pingListReducer = handleActions<PingListState, PingListPayload>(
   {
+    [String(clearPings)]: (state) => ({
+      ...state,
+      ...initialState,
+    }),
     [String(getPings)]: (state) => ({
       ...state,
       loading: true,