diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_list.test.tsx.snap deleted file mode 100644 index 7d7da0b7dd74c..0000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_list.test.tsx.snap +++ /dev/null @@ -1,114 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PingList component renders sorted list without errors 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.test.tsx index d0fac09f683fc..60e65580027a3 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.test.tsx +++ b/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(); - 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(); + 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(); + expect(getByText('No history found')).toBeInTheDocument(); + }); + + it('renders list without errors', () => { + const { getByText } = render(); + 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", diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx index 75f261f1e42fa..3da788cc23a7a 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx +++ b/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); diff --git a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts b/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts index b56b55f9146ae..ad842e7f34d1f 100644 --- a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts +++ b/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); } diff --git a/x-pack/plugins/uptime/public/state/actions/ping.ts b/x-pack/plugins/uptime/public/state/actions/ping.ts index 70918a4cc70e5..af940ea00f3a2 100644 --- a/x-pack/plugins/uptime/public/state/actions/ping.ts +++ b/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('GET_PING_HISTOGRAM'); export const getPingHistogramSuccess = createAction('GET_PING_HISTOGRAM_SUCCESS'); export const getPingHistogramFail = createAction('GET_PING_HISTOGRAM_FAIL'); diff --git a/x-pack/plugins/uptime/public/state/reducers/ping_list.ts b/x-pack/plugins/uptime/public/state/reducers/ping_list.ts index 1fbdc6302f113..da05a3ed3a036 100644 --- a/x-pack/plugins/uptime/public/state/reducers/ping_list.ts +++ b/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( { + [String(clearPings)]: (state) => ({ + ...state, + ...initialState, + }), [String(getPings)]: (state) => ({ ...state, loading: true,