[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:
parent
055880d3ef
commit
2c1a95950c
3 changed files with 32 additions and 2 deletions
|
@ -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`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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.',
|
||||
|
|
Loading…
Reference in a new issue