-
Notifications
You must be signed in to change notification settings - Fork 8.1k
/
welcome.tsx
103 lines (91 loc) · 3.35 KB
/
welcome.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
93
94
95
96
97
98
99
100
101
102
103
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
/*
* The UI and related logic for the welcome screen that *should* show only
* when it is enabled (the default) and there is no Kibana-consumed data
* in Elasticsearch.
*/
import React from 'react';
import { EuiTitle, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPortal } from '@elastic/eui';
import { METRIC_TYPE } from '@kbn/analytics';
import { FormattedMessage } from '@kbn/i18n-react';
import { getServices } from '../kibana_services';
import { SampleDataCard } from './sample_data';
interface Props {
urlBasePath: string;
onSkip: () => void;
}
/**
* Shows a full-screen welcome page that gives helpful quick links to beginners.
*/
export class Welcome extends React.Component<Props> {
private services = getServices();
private hideOnEsc = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
this.props.onSkip();
}
};
private redirectToAddData() {
this.services.application.navigateToApp('integrations', { path: '/browse' });
}
private onSampleDataDecline = () => {
this.services.trackUiMetric(METRIC_TYPE.CLICK, 'sampleDataDecline');
this.props.onSkip();
};
private onSampleDataConfirm = () => {
this.services.trackUiMetric(METRIC_TYPE.CLICK, 'sampleDataConfirm');
this.redirectToAddData();
};
componentDidMount() {
const { welcomeService } = this.services;
this.services.trackUiMetric(METRIC_TYPE.LOADED, 'welcomeScreenMount');
document.addEventListener('keydown', this.hideOnEsc);
welcomeService.onRendered();
}
componentWillUnmount() {
document.removeEventListener('keydown', this.hideOnEsc);
}
render() {
const { urlBasePath } = this.props;
const { welcomeService } = this.services;
return (
<EuiPortal>
<div className="homWelcome" data-test-subj="homeWelcomeInterstitial">
<header className="homWelcome__header">
<div className="homWelcome__content eui-textCenter">
<EuiSpacer size="xl" />
<span className="homWelcome__logo">
<EuiIcon type="logoElastic" size="xxl" />
</span>
<EuiTitle size="l" className="homWelcome__title">
<h1>
<FormattedMessage id="home.welcomeTitle" defaultMessage="Welcome to Elastic" />
</h1>
</EuiTitle>
<EuiSpacer size="m" />
</div>
</header>
<div className="homWelcome__content homWelcome-body">
<EuiFlexGroup gutterSize="l">
<EuiFlexItem>
<SampleDataCard
urlBasePath={urlBasePath}
onConfirm={this.onSampleDataConfirm}
onDecline={this.onSampleDataDecline}
/>
<EuiSpacer size="s" />
{welcomeService.renderTelemetryNotice()}
</EuiFlexItem>
</EuiFlexGroup>
</div>
</div>
</EuiPortal>
);
}
}