/
empty_state.tsx
92 lines (87 loc) · 3.07 KB
/
empty_state.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiEmptyPrompt, EuiLink, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { Fragment } from 'react';
import { Query } from 'react-apollo';
import { UptimeCommonProps } from '../../../uptime_app';
import { getDocCountQuery } from './get_doc_count';
interface EmptyStateProps {
children: JSX.Element[];
}
type Props = EmptyStateProps & UptimeCommonProps;
export const EmptyState = ({ autorefreshInterval, autorefreshIsPaused, children }: Props) => (
<Query
query={getDocCountQuery}
pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
>
{({ loading, error, data }) => {
if (loading) {
return i18n.translate('xpack.uptime.emptyState.loadingMessage', {
defaultMessage: 'Loading…',
});
}
if (error) {
return i18n.translate('xpack.uptime.emptyState.errorMessage', {
values: { message: error.message },
defaultMessage: 'Error {message}',
});
}
const {
getDocCount: { count },
} = data;
return (
<Fragment>
{!count && (
<EuiEmptyPrompt
title={
<EuiTitle size="l">
<h3>
<FormattedMessage
id="xpack.uptime.emptyState.noDataTitle"
defaultMessage="No Uptime Data"
/>
</h3>
</EuiTitle>
}
body={
<Fragment>
<p>
<FormattedMessage
id="xpack.uptime.emptyState.noDataDescription"
defaultMessage="There is no uptime data available."
/>
</p>
<p>
<FormattedMessage
id="xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage"
defaultMessage="{configureHeartbeatLink} to start logging uptime data."
values={{
configureHeartbeatLink: (
<EuiLink
target="_blank"
href="https://www.elastic.co/guide/en/beats/heartbeat/6.5/configuring-howto-heartbeat.html"
>
<FormattedMessage
id="xpack.uptime.emptyState.configureHeartbeatLinkText"
defaultMessage="Configure Heartbeat"
/>
</EuiLink>
),
}}
/>
</p>
</Fragment>
}
/>
)}
{count > 0 && children}
</Fragment>
);
}}
</Query>
);