Skip to content

Commit 266da2b

Browse files
author
Henry Harding
authored
Improve alpha messaging (#64692) (#64840)
1 parent 1623629 commit 266da2b

File tree

3 files changed

+153
-22
lines changed

3 files changed

+153
-22
lines changed

‎x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import React from 'react';
7+
import {
8+
EuiButtonEmpty,
9+
EuiFlyout,
10+
EuiFlyoutBody,
11+
EuiFlyoutHeader,
12+
EuiFlyoutFooter,
13+
EuiLink,
14+
EuiText,
15+
EuiTitle,
16+
} from '@elastic/eui';
17+
import { FormattedMessage } from '@kbn/i18n/react';
18+
19+
interface Props {
20+
onClose: () => void;
21+
}
22+
23+
export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
24+
return (
25+
<EuiFlyout onClose={onClose} size="m" maxWidth={640}>
26+
<EuiFlyoutHeader hasBorder aria-labelledby="AlphaMessagingFlyoutTitle">
27+
<EuiTitle size="m">
28+
<h2 id="AlphaMessagingFlyoutTitle">
29+
<FormattedMessage
30+
id="xpack.ingestManager.alphaMessaging.flyoutTitle"
31+
defaultMessage="About this release"
32+
/>
33+
</h2>
34+
</EuiTitle>
35+
</EuiFlyoutHeader>
36+
<EuiFlyoutBody>
37+
<EuiText size="m">
38+
<p>
39+
<FormattedMessage
40+
id="xpack.ingestManager.alphaMessaging.introText"
41+
defaultMessage="This release is experimental and is not subject to the support SLA. It is designed for users to test and offer feedback about Ingest
42+
Manager and the new Elastic Agent. It is not intended for use in production environments since certain features may change or go away in a future release."
43+
/>
44+
</p>
45+
<FormattedMessage
46+
id="xpack.ingestManager.alphaMessaging.feedbackText"
47+
defaultMessage="We encourage you to read our {docsLink} or to ask questions and send feedback in our {forumLink}."
48+
values={{
49+
docsLink: (
50+
<EuiLink href="https://ela.st/ingest-manager-docs" external target="_blank">
51+
<FormattedMessage
52+
id="xpack.ingestManager.alphaMessaging.docsLink"
53+
defaultMessage="documentation"
54+
/>
55+
</EuiLink>
56+
),
57+
forumLink: (
58+
<EuiLink href="https://ela.st/ingest-manager-forum" external target="_blank">
59+
<FormattedMessage
60+
id="xpack.ingestManager.alphaMessaging.forumLink"
61+
defaultMessage="Discuss forum"
62+
/>
63+
</EuiLink>
64+
),
65+
}}
66+
/>
67+
<p />
68+
69+
<p>
70+
<FormattedMessage
71+
id="xpack.ingestManager.alphaMessaging.warningText"
72+
defaultMessage="{note}: you should not store important data with Ingest Manager
73+
since you will have limited visibility to it in a future release. This version uses an
74+
indexing strategy that will be deprecated in a future release and there is no migration
75+
path. Also, licensing for certain features is under consideration and may change in the future. As a result, you may lose access to certain features based on your license
76+
tier."
77+
values={{
78+
note: (
79+
<strong>
80+
<FormattedMessage
81+
id="xpack.ingestManager.alphaMessaging.warningNote"
82+
defaultMessage="Note"
83+
/>
84+
</strong>
85+
),
86+
}}
87+
/>
88+
</p>
89+
</EuiText>
90+
</EuiFlyoutBody>
91+
<EuiFlyoutFooter>
92+
<EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
93+
<FormattedMessage
94+
id="xpack.ingestManager.alphaMessging.closeFlyoutLabel"
95+
defaultMessage="Close"
96+
/>
97+
</EuiButtonEmpty>
98+
</EuiFlyoutFooter>
99+
</EuiFlyout>
100+
);
101+
};

‎x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,45 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import React from 'react';
6+
import React, { useState } from 'react';
77
import styled from 'styled-components';
88
import { FormattedMessage } from '@kbn/i18n/react';
9-
import { EuiText } from '@elastic/eui';
9+
import { EuiText, EuiLink } from '@elastic/eui';
10+
import { AlphaFlyout } from './alpha_flyout';
1011

1112
const Message = styled(EuiText).attrs(props => ({
1213
color: 'subdued',
1314
textAlign: 'center',
15+
size: 's',
1416
}))`
1517
padding: ${props => props.theme.eui.paddingSizes.m};
1618
`;
1719

18-
export const AlphaMessaging: React.FC<{}> = () => (
19-
<Message>
20-
<p>
21-
<small>
22-
<strong>
20+
export const AlphaMessaging: React.FC<{}> = () => {
21+
const [isAlphaFlyoutOpen, setIsAlphaFlyoutOpen] = useState<boolean>(false);
22+
23+
return (
24+
<>
25+
<Message>
26+
<p>
27+
<strong>
28+
<FormattedMessage
29+
id="xpack.ingestManager.alphaMessageTitle"
30+
defaultMessage="Experimental"
31+
/>
32+
</strong>
33+
{' – '}
2334
<FormattedMessage
24-
id="xpack.ingestManager.alphaMessageTitle"
25-
defaultMessage="Alpha release"
26-
/>
27-
</strong>
28-
{' – '}
29-
<FormattedMessage
30-
id="xpack.ingestManager.alphaMessageDescription"
31-
defaultMessage="Ingest Manager is under active development and is not
35+
id="xpack.ingestManager.alphaMessageDescription"
36+
defaultMessage="Ingest Manager is under active development and is not
3237
intended for production purposes."
33-
/>
34-
</small>
35-
</p>
36-
</Message>
37-
);
38+
/>{' '}
39+
<EuiLink color="subdued" onClick={() => setIsAlphaFlyoutOpen(true)}>
40+
View more details.
41+
</EuiLink>
42+
</p>
43+
</Message>
44+
{isAlphaFlyoutOpen && <AlphaFlyout onClose={() => setIsAlphaFlyoutOpen(false)} />}
45+
</>
46+
);
47+
};

‎x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import styled from 'styled-components';
88
import {
99
EuiButton,
1010
EuiButtonEmpty,
11+
EuiBetaBadge,
1112
EuiPanel,
1213
EuiText,
1314
EuiTitle,
@@ -19,10 +20,11 @@ import {
1920
EuiFlexItem,
2021
} from '@elastic/eui';
2122
import { FormattedMessage } from '@kbn/i18n/react';
23+
import { i18n } from '@kbn/i18n';
2224
import { WithHeaderLayout } from '../../layouts';
2325
import { useLink, useGetAgentConfigs } from '../../hooks';
2426
import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components';
25-
import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../../constants';
27+
import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from '../../constants';
2628

2729
const OverviewPanel = styled(EuiPanel).attrs(props => ({
2830
paddingSize: 'm',
@@ -57,6 +59,11 @@ const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
5759
}
5860
`;
5961

62+
const AlphaBadge = styled(EuiBetaBadge)`
63+
vertical-align: top;
64+
margin-left: ${props => props.theme.eui.paddingSizes.s};
65+
`;
66+
6067
export const IngestManagerOverview: React.FunctionComponent = () => {
6168
// Agent enrollment flyout state
6269
const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
@@ -79,6 +86,19 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
7986
id="xpack.ingestManager.overviewPageTitle"
8087
defaultMessage="Ingest Manager"
8188
/>
89+
<AlphaBadge
90+
iconType="beaker"
91+
label={i18n.translate('xpack.ingestManager.alphaBadge.labelText', {
92+
defaultMessage: 'Experimental',
93+
})}
94+
title={i18n.translate('xpack.ingestManager.alphaBadge.titleText', {
95+
defaultMessage: 'Experimental',
96+
})}
97+
tooltipContent={i18n.translate('xpack.ingestManager.alphaBadge.tooltipText', {
98+
defaultMessage:
99+
'This plugin might change or be removed in a future release and is not subject to the support SLA.',
100+
})}
101+
/>
82102
</h1>
83103
</EuiText>
84104
</EuiFlexItem>
@@ -213,7 +233,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
213233
/>
214234
</h2>
215235
</EuiTitle>
216-
<EuiButtonEmpty size="xs" flush="right">
236+
<EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
217237
<FormattedMessage
218238
id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
219239
defaultMessage="View data streams"

0 commit comments

Comments
 (0)