diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx index cf6d137e8692b..29e24a83cfa15 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx @@ -10,7 +10,7 @@ import { CursorDirection, SortOrder, } from '../../../../../common/runtime_types'; -import { MonitorListComponent } from '../monitor_list'; +import { MonitorListComponent, noItemsMessage } from '../monitor_list'; import { renderWithRouter, shallowWithRouter } from '../../../../lib'; import * as redux from 'react-redux'; @@ -288,4 +288,24 @@ describe('MonitorList component', () => { expect(component).toMatchSnapshot(); }); }); + + describe('noItemsMessage', () => { + it('returns loading message while loading', () => { + expect(noItemsMessage(true)).toEqual(`Loading...`); + }); + + it('returns loading message when filters are defined and loading', () => { + expect(noItemsMessage(true, 'filters')).toEqual(`Loading...`); + }); + + it('returns no monitors selected when filters are defined and not loading', () => { + expect(noItemsMessage(false, 'filters')).toEqual( + `No monitors found for selected filter criteria` + ); + }); + + it('returns no data message when no filters and not loading', () => { + expect(noItemsMessage(false)).toEqual(`No uptime monitors found`); + }); + }); }); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index d99983d0e8faa..27ac9184d0636 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -43,6 +43,11 @@ const TruncatedEuiLink = styled(EuiLink)` text-overflow: ellipsis; `; +export const noItemsMessage = (loading: boolean, filters?: string) => { + if (loading) return labels.LOADING; + return !!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE; +}; + export const MonitorListComponent: React.FC = ({ filters, monitorList: { list, error, loading }, @@ -163,7 +168,7 @@ export const MonitorListComponent: React.FC = ({ itemId="monitor_id" itemIdToExpandedRowMap={getExpandedRowMap()} items={items} - noItemsMessage={!!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE} + noItemsMessage={noItemsMessage(loading, filters)} columns={columns} /> diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts index 90dc854cc6904..e70eef1d91161 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts @@ -52,6 +52,11 @@ export const NO_MONITOR_ITEM_SELECTED = i18n.translate( } ); +export const LOADING = i18n.translate('xpack.uptime.monitorList.loading', { + defaultMessage: 'Loading...', + description: 'Shown when the monitor list is waiting for a server response', +}); + export const NO_DATA_MESSAGE = i18n.translate('xpack.uptime.monitorList.noItemMessage', { defaultMessage: 'No uptime monitors found', description: 'This message is shown if the monitors table is rendered but has no items.',