Skip to content

Commit

Permalink
[Uptime] Add loading message for monitor list no items (#67378) (#68187)
Browse files Browse the repository at this point in the history
* Add loading message for monitor list no items.

* Add tests.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
justinkambic and elasticmachine authored Jun 4, 2020
1 parent bfd4774 commit 47f2479
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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`);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -163,7 +168,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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down

0 comments on commit 47f2479

Please sign in to comment.