[Uptime] Add loading message for monitor list no items (#67378)

* Add loading message for monitor list no items.

* Add tests.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Justin Kambic 2020-06-03 14:59:40 -04:00 committed by GitHub
parent 055880d3ef
commit 2c1a95950c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 2 deletions

View file

@ -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`);
});
});
});

View file

@ -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<Props> = ({
filters,
monitorList: { list, error, loading },
@ -164,7 +169,7 @@ export const MonitorListComponent: React.FC<Props> = ({
itemId="monitor_id"
itemIdToExpandedRowMap={getExpandedRowMap()}
items={items}
noItemsMessage={!!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE}
noItemsMessage={noItemsMessage(loading, filters)}
columns={columns}
/>
<EuiSpacer size="m" />

View file

@ -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.',